@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/workspace/chat-timeline/tool-renderers/index.tsx

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The panel registry: a component per `ToolPanelKind`, and the two helpers the
+ * card needs from it.
+ *
+ * `toolPanelKind` decides the key (pure, in `registry.ts`); this file is the
+ * map from that key to the component. Keeping them apart is what lets the
+ * classification be unit-tested without mounting a single panel — the old
+ * `hasToolDetailsPanel` answered the same question by rendering and discarding.
+ */
+
+import type { ReactNode } from 'preact/compat';
+import type { ToolCallData } from '@/shared/types';
+import { TaskResult } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/TaskResult';
+import { Todo } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Todo';
+import { Lsp } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Lsp';
+import { WebSearch } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/WebSearch';
+import { Eval } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Eval';
+import { Github } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Github';
+import { Checkpoint } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Checkpoint';
+import { Bash } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Bash';
+import { SearchTool } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SearchTool';
+import { SecurityScan } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SecurityScan';
+import { Proc } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Proc';
+import { ContextNotes } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/ContextNotes';
+import { Memory } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Memory';
+import { Debug } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Debug';
+import { Goal } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Goal';
+import { AstEdit } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/AstEdit';
+import { Resolve } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Resolve';
+import { ManageSkill } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/ManageSkill';
+import { SearchFs } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SearchFs';
+import { AskPanel } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel';
+import { Think } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Think';
+import { Read } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Read';
+import { Edit } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Edit';
+import { Mcp } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Mcp';
+import { Wait } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Wait';
+import { hashlineTargetPath } from '@/shared/lib/omp/session/hashline-patch';
+import { procPathOf } from '@/shared/lib/omp/session/proc';
+import { getToolInputPath } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/tool-input';
+import { isXdDocRead, toolPanelKind, type ToolPanelKind } from '@/client/components/workspace/chat-timeline/tool-renderers/registry';
+
+/** One panel component per kind. A kind with no entry falls back to generic
+ *  Input/Output rendering; the record is total so a missing one is a type error. */
+const PANELS: Record<ToolPanelKind, (props: { tool: ToolCallData }) => ReactNode> = {
+  read: ({ tool }) => (
+    <Read tool={tool} targetFilePath={resolveTargetFile(tool)} output={tool.output || ''} />
+  ),
+  edit: Edit,
+  write: Edit,
+  bash: Bash,
+  eval: Eval,
+  grep: SearchTool,
+  search_fs: SearchFs,
+  todo: Todo,
+  task: TaskResult,
+  web_search: WebSearch,
+  lsp: Lsp,
+  ast_edit: AstEdit,
+  resolve: Resolve,
+  reject: Resolve,
+  proc: Proc,
+  github: Github,
+  checkpoint: Checkpoint,
+  security_scan: SecurityScan,
+  debug: Debug,
+  manage_skill: ManageSkill,
+  context_notes: ContextNotes,
+  memory_edit: Memory,
+  goal: Goal,
+  ask: AskPanel,
+  think: Think,
+  mcp: Mcp,
+  wait: Wait,
+};
+
+/** File a tool call targets: explicit `target`, result details, its arguments
+ *  (plain path keys or an omp hashline patch header), then the raw input. */
+export function resolveTargetFile(tool: ToolCallData): string | undefined {
+  if (tool.target) return tool.target;
+  if (tool.diff?.file) return tool.diff.file;
+  if (tool.input && typeof tool.input === 'object') {
+    const obj = tool.input as Record<string, unknown>;
+    if (typeof obj.path === 'string') return obj.path;
+    if (typeof obj.TargetFile === 'string') return obj.TargetFile;
+    if (typeof obj.targetFile === 'string') return obj.targetFile;
+    if (typeof obj.FilePath === 'string') return obj.FilePath;
+    if (typeof obj.filePath === 'string') return obj.filePath;
+    if (typeof obj.AbsolutePath === 'string') return obj.AbsolutePath;
+    if (typeof obj.absolutePath === 'string') return obj.absolutePath;
+    if (typeof obj.file === 'string') return obj.file;
+    const patchPath = hashlineTargetPath(obj);
+    if (patchPath) return patchPath;
+  }
+  if (typeof tool.details?.path === 'string') return tool.details.path;
+  if (typeof tool.input === 'string' && (tool.input.includes('.') || tool.input.includes('/'))) {
+    return tool.input;
+  }
+  if (tool.detail && (tool.detail.includes('.') || tool.detail.includes('/'))) {
+    return tool.detail;
+  }
+  return undefined;
+}
+
+/**
+ * The canonical key for a tool call — omp's own name with Kabmo's legacy
+ * aliases folded. Used for icon selection and the header's title fallback.
+ */
+export function resolveToolKey(tool: ToolCallData): string {
+  // A `proc://` call is `read`/`write` transport, so the URL is the only thing
+  // that names what it did — the tool key drives the glyph and the header.
+  if (procPathOf(tool)) return 'proc';
+  // `read xd://<device>` is the device's docs: the key is `read`, so the glyph
+  // and the header describe a read rather than the device it documents.
+  if (isXdDocRead(tool)) return 'read';
+
+  const details = tool.details as Record<string, unknown> | undefined;
+  const xdev = details?.xdev;
+  if (xdev && typeof xdev === 'object') {
+    const name = (xdev as Record<string, unknown>).tool;
+    if (typeof name === 'string' && name) return name.toLowerCase();
+  }
+
+  const rawTarget = (tool.target || '').toLowerCase();
+  const inputPath = getToolInputPath(tool.input)?.toLowerCase() ?? '';
+  const xdTarget = rawTarget.startsWith('xd://')
+    ? rawTarget.slice(5)
+    : inputPath.startsWith('xd://')
+      ? inputPath.slice(5)
+      : '';
+  if (xdTarget) {
+    const device = xdTarget.split(/[/?#]/)[0].trim();
+    if (device) return device;
+  }
+
+  const rawName = (tool.name || '').toLowerCase();
+  if (rawName && rawName !== 'tool' && rawName !== 'custom') return rawName;
+
+  const titlePrefix = (tool.title || '').toLowerCase().split(/[\s—\-:]+/)[0]?.trim();
+  if (titlePrefix && TOOL_KEY_TITLES[titlePrefix]) return titlePrefix;
+
+  return (tool.type || '').toLowerCase();
+}
+
+/** Title prefixes that name a tool when no `name` was sent (MOCK path). */
+const TOOL_KEY_TITLES: Record<string, true> = {
+  grep: true, glob: true, read: true, write: true, edit: true, bash: true,
+  terminal: true, run_command: true, todo: true, eval: true, hub: true,
+  proc: true, lsp: true, github: true, task: true, resolve: true, reject: true,
+};
+
+/**
+ * Panel khusus per tool family — dirender di dalam body ToolCallCard.
+ * Classification is pure (`toolPanelKind`); this only maps the key to a
+ * component, so asking "does this tool have a panel?" no longer builds one.
+ */
+export function ToolDetailsPanel({ tool }: { tool: ToolCallData }): ReactNode {
+  const kind = toolPanelKind(tool);
+  if (!kind) return null;
+  return PANELS[kind]({ tool });
+}
+
+/** True kalau tool punya panel khusus yang sudah merender input/output sendiri —
+ *  ToolCallCard tidak boleh render Input/Output generik lagi (anti dobel). */
+export function hasToolDetailsPanel(tool: ToolCallData): boolean {
+  return toolPanelKind(tool) !== null;
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/AstEdit.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from 'preact/hooks';
+import { ArrowRight, CheckCircle2, Clock, Wand2 } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface AstEditItem {
+  file?: unknown;
+  path?: unknown;
+  nodeKind?: unknown;
+  changes?: unknown;
+  message?: unknown;
+}
+
+function parseAstChanges(output: string): AstEditItem[] {
+  if (!output) return [];
+  try {
+    const data = JSON.parse(output);
+    if (Array.isArray(data)) return data;
+    if (data && typeof data === 'object') {
+      if (Array.isArray(data.changes)) return data.changes;
+      if (Array.isArray(data.edits)) return data.edits;
+    }
+  } catch {}
+  return [];
+}
+
+/** Panel untuk tool `ast_edit` — perubahan AST terstruktur dan staged proposals. */
+export function AstEdit({ tool }: { tool: ToolCallData }) {
+  const details = (tool.details ?? {}) as Record<string, any>;
+  const xdev = (details.xdev ?? {}) as Record<string, any>;
+  const inner = (xdev.inner ?? {}) as Record<string, any>;
+  const args = (xdev.args ?? {}) as Record<string, any>;
+  const output = tool.output ?? '';
+
+  const isStaged =
+    inner.applied === false ||
+    output.toLowerCase().includes('staged as a proposal') ||
+    output.toLowerCase().includes('files not modified yet');
+
+  const ops: Array<{ pat: string; out: string }> = Array.isArray(args.ops) ? args.ops : [];
+  const paths: string[] = Array.isArray(args.paths) ? args.paths : inner.scopePath ? [inner.scopePath] : [];
+
+  const displayDiff = inner.displayContent || (output.includes('-') && output.includes('+') ? output : '');
+  const diffLines = displayDiff
+    ? displayDiff.split(/\r?\n/).filter((l: string) => !l.startsWith('Staged as a proposal') && Boolean(l.trim()))
+    : [];
+
+  const structuredItems: AstEditItem[] = Array.isArray(details.changes)
+    ? details.changes
+    : parseAstChanges(output);
+
+  const syntaxReady = useSyntaxReady();
+  const diffLang = getLanguageFromPath(paths[0]);
+  const diffHtml = useMemo(() => {
+    const contents = diffLines.map((line: string) =>
+      line.startsWith('+') || line.startsWith('-') || line.startsWith(' ') ? line.slice(1) : line
+    );
+    return highlightLines(contents.join('\n'), diffLang);
+  }, [diffLines, diffLang, syntaxReady]);
+
+  // If Staged Proposal Mode (oh-my-pi xd://ast_edit)
+  if (isStaged || ops.length > 0 || diffLines.length > 0) {
+    return (
+      <div className="space-y-2 select-text">
+        <div className="overflow-hidden rounded-lg border border-ink/10 bg-paper">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-3 py-2">
+            <div className="flex items-center gap-2">
+              <Wand2 size={13} className="text-ink/60" />
+              <span className="font-mono text-[11px] font-semibold text-ink">AST Edit</span>
+              {paths.length > 0 && (
+                <span className="font-mono text-[10px] text-ink/50 truncate max-w-[200px]">
+                  {paths[0]}
+                </span>
+              )}
+            </div>
+
+            <span
+              className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[9px] font-semibold ${
+                isStaged ? 'bg-warning/10 text-warning' : 'bg-success/10 text-success'
+              }`}
+            >
+              {isStaged ? <Clock size={10} /> : <CheckCircle2 size={10} />}
+              {isStaged ? 'STAGED PROPOSAL' : 'APPLIED'}
+            </span>
+          </div>
+
+          {/* Operations: Pattern -> Replacement */}
+          {ops.length > 0 && (
+            <div className="border-b border-ink/6 p-2.5 bg-canvas/20">
+              <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40">
+                Pattern Transformation
+              </span>
+              <div className="mt-1 space-y-1">
+                {ops.map((op, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center gap-2 rounded border border-ink/6 bg-paper px-2 py-1 font-mono text-[10.5px]"
+                  >
+                    <span className="text-error/90 line-through truncate">{op.pat}</span>
+                    <ArrowRight size={10} className="shrink-0 text-ink/35" />
+                    <span className="text-success/90 font-medium truncate">
+                      {op.out || '/* removed */'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Diff Output */}
+          {diffLines.length > 0 && (
+            <div className="p-2.5 font-mono text-[10.5px] leading-relaxed bg-canvas/30 space-y-0.5">
+              {diffLines.map((line: string, i: number) => {
+                const isDel = line.startsWith('-');
+                const isAdd = line.startsWith('+');
+                const html = diffHtml[i] || '';
+                return (
+                  <div
+                    key={i}
+                    className={`rounded px-1.5 py-0.5 ${
+                      isDel
+                        ? 'bg-error/10 text-error font-medium'
+                        : isAdd
+                          ? 'bg-success/10 text-success font-medium'
+                          : 'text-ink/70'
+                    }`}
+                  >
+                    {(isDel || isAdd) && line[0]}
+                    {html ? (
+                      <span className="shiki" dangerouslySetInnerHTML={{ __html: html }} />
+                    ) : (
+                      (isDel || isAdd) ? line.slice(1) : line
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Staged helper instruction */}
+          {isStaged && (
+            <div className="border-t border-ink/6 bg-paper px-3 py-1.5 text-[10px] text-ink/50">
+              Proposal staged in memory. Apply with <code className="font-mono text-ink/75">xd://resolve</code> or discard with <code className="font-mono text-ink/75">xd://reject</code>.
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Structured Items View
+  if (structuredItems.length > 0) {
+    return (
+      <div className="overflow-hidden rounded-lg border border-ink/8 select-text">
+        <div className="border-b border-ink/8 bg-paper px-2.5 py-1.5">
+          <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">AST Changes</span>
+          <span className="ml-2 rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9.5px] text-ink/45">
+            {structuredItems.length}
+          </span>
+        </div>
+        <div className="divide-y divide-ink/6 bg-canvas/40 py-1">
+          {structuredItems.map((item, index) => {
+            const file = typeof item.file === 'string' ? item.file : typeof item.path === 'string' ? item.path : '';
+            const msg = typeof item.message === 'string' ? item.message : '';
+            const kind = typeof item.nodeKind === 'string' ? item.nodeKind : '';
+            const changes = typeof item.changes === 'number' ? item.changes : undefined;
+            return (
+              <div key={index} className="flex items-start gap-2 px-2.5 py-1.5 text-[11.5px]">
+                <Wand2 size={11} className="mt-0.5 shrink-0 text-ink/40" />
+                <span className="min-w-0 flex-1 break-words">
+                  {file && <span className="font-mono text-[10px] text-ink/45">{file}: </span>}
+                  <span className="text-ink/80">{msg}</span>
+                  {kind && <span className="ml-1 font-mono text-[9.5px] text-ink/35">({kind})</span>}
+                </span>
+                {changes !== undefined && (
+                  <span className="shrink-0 rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9px] text-ink/45">
+                    {changes} changes
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback
+  const lines = output.split(/\r?\n/).filter(Boolean);
+  if (lines.length === 0) return null;
+  return (
+    <ul className="divide-y divide-ink/6 overflow-hidden rounded-lg border border-ink/8 bg-canvas/40 select-text">
+      {lines.map((line, i) => (
+        <li key={i} className="px-2.5 py-1.5 font-mono text-[11px] break-words text-ink/75">
+          {line}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Bash.tsx

@@ -0,0 +1,279 @@
+import { useMemo } from 'preact/hooks';
+import { Check, Clock, Server, Terminal } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { bashServiceOf, daemonTone, procUptime } from '@/shared/lib/omp/session/proc';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { stripAnsiCodes } from '@/shared/lib/code/ansi';
+import { isCodeLike } from '@/shared/lib/code/language';
+import { highlightCode, highlightLines, tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
+import { OutputWindow } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/OutputWindow';
+import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
+
+interface BashMeta {
+  exitCode?: unknown;
+  cwd?: unknown;
+  durationMs?: unknown;
+  truncated?: unknown;
+}
+
+function parseWallTime(text: string): { cleanText: string; wallTime?: string } {
+  const match = text.match(/\n*Wall time:\s*([^\n\r]+)$/);
+  if (match) {
+    return {
+      cleanText: text.replace(/\n*Wall time:\s*[^\n\r]+$/, ''),
+      wallTime: match[1].trim(),
+    };
+  }
+  return { cleanText: text };
+}
+
+/** Panel untuk tool `bash` / `terminal` — terminal styled console dengan log highlighting & stats. */
+export function Bash({ tool }: { tool: ToolCallData }) {
+  const details = tool.details ?? {};
+  const meta = details as BashMeta;
+  const inputObj = typeof tool.input === 'object' && tool.input !== null ? (tool.input as Record<string, any>) : undefined;
+  const command =
+    tool.command ||
+    (typeof inputObj?.command === 'string' ? inputObj.command : undefined) ||
+    (typeof inputObj?.cmd === 'string' ? inputObj.cmd : undefined) ||
+    (typeof inputObj?.CommandLine === 'string' ? inputObj.CommandLine : undefined) ||
+    (typeof inputObj?.commandLine === 'string' ? inputObj.commandLine : undefined) ||
+    (typeof tool.input === 'string' ? tool.input : '');
+  const rawOutput = tool.output || (tool.error ? `Error: ${tool.error}` : '');
+
+  const { cleanText: output, wallTime } = parseWallTime(rawOutput);
+
+  const exitCode = typeof meta.exitCode === 'number' ? meta.exitCode : tool.isError ? 1 : undefined;
+  const cwd =
+    (typeof meta.cwd === 'string' ? meta.cwd : undefined) ||
+    (typeof inputObj?.cwd === 'string' ? inputObj.cwd : undefined) ||
+    (typeof inputObj?.Cwd === 'string' ? inputObj.Cwd : undefined);
+  const durationMs = typeof meta.durationMs === 'number' ? meta.durationMs : tool.durationMs;
+  const duration = tool.duration || wallTime || (durationMs ? `${durationMs}ms` : undefined);
+
+  const isSilent = !output || output === '(no output)';
+
+  const jsonResult = useMemo(
+    () => (!isSilent && !tool.isError ? tryParseJson(output) : { isValid: false }),
+    [output, isSilent, tool.isError]
+  );
+
+  const strippedOutput = useMemo(() => stripAnsiCodes(output), [output]);
+  const truncatedOutput = useMemo(() => truncateTailLines(strippedOutput, MAX_OUTPUT_LINES), [strippedOutput]);
+  const copyText = useMemo(
+    () => (jsonResult.isValid && jsonResult.pretty ? jsonResult.pretty : strippedOutput),
+    [jsonResult, strippedOutput]
+  );
+  const outputIsCode = useMemo(() => isCodeLike(strippedOutput), [strippedOutput]);
+  const outputLang = useMemo(
+    () => (strippedOutput.trim().startsWith('{') || strippedOutput.trim().startsWith('[') ? 'json' : 'javascript'),
+    [strippedOutput]
+  );
+  const truncatedPretty = useMemo(
+    () => (jsonResult.isValid && jsonResult.pretty ? truncateTailLines(jsonResult.pretty, MAX_OUTPUT_LINES) : null),
+    [jsonResult]
+  );
+  const syntaxReady = useSyntaxReady();
+  const highlightedCommand = useMemo(() => (command ? highlightCode(command, 'bash') : ''), [command, syntaxReady]);
+
+  const service = bashServiceOf(tool);
+  const serviceTone = daemonTone(service?.state);
+  const serviceUptime = service ? procUptime(service) : undefined;
+
+  return (
+    <div className="space-y-2">
+      {/* A named service launch is not just a command: omp reports the
+          supervised process back in `details.service`, and `proc://<id>` reads
+          the same snapshot. Without this strip the only thing the card said
+          about a live dev server was its exit code. */}
+      {service && (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-ink/8 bg-paper px-3 py-2 font-mono text-[10.5px]">
+          <span className="flex items-center gap-1.5 text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
+            <Server size={11} className="text-ink/40" />
+            Service
+          </span>
+          <span className="font-semibold text-ink">{service.name}</span>
+          <span
+            className={`inline-flex items-center gap-1.5 font-semibold ${
+              serviceTone === 'ok'
+                ? 'text-success'
+                : serviceTone === 'error'
+                  ? 'text-error'
+                  : serviceTone === 'warn'
+                    ? 'text-warning'
+                    : 'text-ink/50'
+            }`}
+          >
+            <span
+              className={`h-1.5 w-1.5 rounded-full ${
+                serviceTone === 'ok'
+                  ? 'bg-success'
+                  : serviceTone === 'error'
+                    ? 'bg-error'
+                    : serviceTone === 'warn'
+                      ? 'bg-warning animate-pulse'
+                      : 'bg-ink/35'
+              }`}
+            />
+            {service.state}
+          </span>
+          {service.pid !== undefined && (
+            <span className="text-ink/45">
+              pid <strong className="text-ink">{service.pid}</strong>
+            </span>
+          )}
+          {serviceUptime && (
+            <span className="text-ink/45">
+              {typeof service.exitedAt === 'number' ? 'ran' : 'up'}{' '}
+              <strong className="text-ink">{serviceUptime.label}</strong>
+            </span>
+          )}
+          {service.exitCode !== undefined && (
+            <span className={service.exitCode === 0 ? 'text-success' : 'text-error'}>exit {service.exitCode}</span>
+          )}
+          <span className="text-ink/35">
+            read <span className="font-semibold">proc://{service.name}</span>
+          </span>
+        </div>
+      )}
+
+      {/* Terminal Command Window */}
+      {command && (
+        <div className="overflow-hidden rounded-lg border border-ink/10 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/60 px-3 py-1.5">
+            <div className="flex min-w-0 items-center gap-2">
+              <Terminal size={11} className="shrink-0 text-ink/45" />
+              <span className="font-mono text-[10px] font-semibold text-ink/50">bash</span>
+              {cwd && (
+                <span className="truncate font-mono text-[9.5px] text-ink/40" title={cwd}>
+                  {cwd}
+                </span>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {exitCode !== undefined && (
+                <span
+                  className={`rounded-full px-1.5 py-0.2 font-mono text-[9px] font-semibold ${
+                    exitCode === 0 ? 'bg-success/10 text-success' : 'bg-error/10 text-error'
+                  }`}
+                >
+                  exit {exitCode}
+                </span>
+              )}
+              {duration && (
+                <span className="flex items-center gap-1 font-mono text-[9.5px] text-ink/45">
+                  <Clock size={10} />
+                  <span>{duration}</span>
+                </span>
+              )}
+              <CopyButton
+                text={command}
+                className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9.5px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+                title="Copy command"
+                label="Copy"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2.5 px-3 py-2 font-mono text-[11.5px] leading-relaxed">
+            <span className="select-none font-bold text-ink/40">$</span>
+            <pre
+              className="min-w-0 flex-1 overflow-x-auto whitespace-pre-wrap break-all text-ink/90 select-text"
+              dangerouslySetInnerHTML={{ __html: highlightedCommand }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Output Console */}
+      {isSilent ? (
+        <div className="flex items-center justify-between rounded-lg border border-dashed border-ink/15 bg-canvas/30 px-3 py-2 font-mono text-[11px] text-ink/50">
+          <div className="flex items-center gap-2">
+            <Check size={12} className="text-success" />
+            <span>Command executed successfully with no output</span>
+          </div>
+          {duration && <span className="text-[10px] text-ink/40">Wall time: {duration}</span>}
+        </div>
+      ) : jsonResult.isValid && jsonResult.pretty ? (
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/30 px-3 py-1.5">
+            <div className="flex items-center gap-1.5">
+              <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">Console Output</span>
+              <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">JSON</span>
+              {jsonResult.linesCount && jsonResult.linesCount > 1 && (
+                <span className="font-mono text-[9.5px] text-ink/40">{jsonResult.linesCount} lines</span>
+              )}
+            </div>
+            <CopyButton
+              text={jsonResult.isValid && jsonResult.pretty ? jsonResult.pretty : output}
+              className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9.5px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              label="Copy"
+            />
+          </div>
+          {truncatedPretty && truncatedPretty.skipped > 0 && (
+            <div className="border-b border-ink/6 bg-canvas/40 px-3 py-1 font-mono text-[9.5px] text-ink/45">
+              … {truncatedPretty.skipped} earlier lines hidden
+            </div>
+          )}
+          <JsonCodeBlock
+            jsonString={truncatedPretty ? truncatedPretty.text : jsonResult.pretty}
+            maxHeightClass="max-h-72"
+            showHeader={false}
+          />
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/30 px-3 py-1.5">
+            <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">Console Output</span>
+            <CopyButton
+              text={copyText}
+              className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9.5px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              label="Copy"
+            />
+          </div>
+          {/* Only the tail is mounted: a 1000-line log inside a 288px box drew
+              ~15 visible rows and 985 nobody can see. `OutputWindow` reveals the
+              rest in steps, and the highlight runs on the slice on screen. */}
+          <OutputWindow
+            lines={truncatedOutput.text.split('\n')}
+            className="max-h-72 overflow-y-auto overscroll-contain p-3 font-mono text-[11px] leading-relaxed select-text"
+            render={(visible) =>
+              outputIsCode ? (
+                <pre
+                  className="overflow-x-auto whitespace-pre text-ink/85 leading-relaxed"
+                  dangerouslySetInnerHTML={{ __html: highlightLines(visible.join('\n'), outputLang).join('\n') }}
+                />
+              ) : (
+                visible.map((line, idx) => {
+                  const isSuccessLine = line.includes('✓') || line.includes('built in') || line.includes('ready: 0 errors');
+                  const isErrorLine = line.includes('Error:') || line.includes('error:') || line.includes('FAILED');
+                  const isWarningLine = line.includes('warning:') || line.includes('warn:');
+
+                  return (
+                    <div
+                      key={idx}
+                      className={`whitespace-pre-wrap break-words ${
+                        isSuccessLine
+                          ? 'text-success font-medium'
+                          : isErrorLine
+                            ? 'text-error font-medium'
+                            : isWarningLine
+                              ? 'text-warning font-medium'
+                              : 'text-ink/80'
+                      }`}
+                    >
+                      {line || '\u00a0'}
+                    </div>
+                  );
+                })
+              )
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}