ompchamber 0.3.0

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

@@ -0,0 +1,205 @@
+import { useMemo } from 'preact/hooks';
+import { CheckCircle2, HelpCircle, XCircle } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { highlightCode, isCodeLike, 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 { CopyButton } from '@/client/components/common/CopyButton';
+
+interface OptionItem {
+  label: string;
+  description?: string;
+}
+
+/** Panel khusus untuk tool `ask` — dialog pertanyaan agent ke user atau konfirmasi. */
+export function Ask({ tool }: { tool: ToolCallData }) {
+  const input = tool.input;
+  const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, any>) : undefined;
+
+  // 1. Support omp questions array: input.questions[0]
+  const questionEntry = Array.isArray(inputObj?.questions) && inputObj.questions.length > 0
+    ? inputObj.questions[0]
+    : undefined;
+
+  const header = questionEntry?.header;
+
+  const question =
+    questionEntry?.question ||
+    (typeof inputObj?.question === 'string'
+      ? inputObj.question
+      : typeof inputObj?.prompt === 'string'
+        ? inputObj.prompt
+        : typeof inputObj?.message === 'string'
+          ? inputObj.message
+          : typeof input === 'string'
+            ? input
+            : tool.detail || 'Question from agent');
+
+  // Parse options: can be array of { label, description } or strings
+  const rawOptions = questionEntry?.options || inputObj?.options || inputObj?.choices || [];
+  const options: OptionItem[] = Array.isArray(rawOptions)
+    ? rawOptions.map((opt: unknown) => {
+        if (typeof opt === 'string') return { label: opt };
+        if (typeof opt === 'object' && opt !== null) {
+          const o = opt as Record<string, any>;
+          return {
+            label: typeof o.label === 'string' ? o.label : typeof o.text === 'string' ? o.text : String(opt),
+            description: typeof o.description === 'string' ? o.description : undefined,
+          };
+        }
+        return { label: String(opt) };
+      })
+    : [];
+
+  const rawOutput = useMemo(() => {
+    if (typeof tool.output === 'string') return tool.output;
+    if (tool.output && typeof tool.output === 'object') return JSON.stringify(tool.output, null, 2);
+    if (typeof inputObj?.answer === 'string') return inputObj.answer;
+    if (inputObj?.answer && typeof inputObj?.answer === 'object') return JSON.stringify(inputObj.answer, null, 2);
+    return '';
+  }, [tool.output, inputObj?.answer]);
+
+  const isCancelled =
+    (typeof rawOutput === 'string' && /cancelled|aborted|interrupted|disconnected/i.test(rawOutput)) ||
+    tool.status === 'aborted' ||
+    (tool.status === 'error' && typeof rawOutput === 'string' && /disconnect|error/i.test(rawOutput));
+
+  // Extract selected answer if e.g. "User selected: Blue"
+  const selectedMatch = typeof rawOutput === 'string' ? rawOutput.match(/selected:\s*(.+)$/i) : null;
+  const selectedAnswer = selectedMatch ? selectedMatch[1].trim() : rawOutput;
+
+  const jsonResult = useMemo(
+    () => (!isCancelled && rawOutput ? tryParseJson(rawOutput) : { isValid: false }),
+    [rawOutput, isCancelled]
+  );
+
+  const isMultilineText = typeof rawOutput === 'string' && rawOutput.includes('\n') && !selectedMatch;
+
+  const syntaxReady = useSyntaxReady();
+  const highlightedResponse = useMemo(
+    () => (typeof rawOutput === 'string' && isCodeLike(rawOutput) ? highlightCode(rawOutput, 'javascript') : ''),
+    [rawOutput, syntaxReady]
+  );
+
+  return (
+    <div className="space-y-2">
+      <div className="rounded-lg border border-ink/10 bg-paper p-3 shadow-xs">
+        <div className="flex items-start gap-2 min-w-0">
+          <HelpCircle size={14} className="mt-0.5 shrink-0 text-ink/60" />
+          <div className="min-w-0 flex-1">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-ink/40">
+              {header ? `Agent Question · ${header}` : 'Agent Question'}
+            </span>
+            <div className="mt-1 text-[12.5px] leading-relaxed text-ink/90 select-text">
+              <MarkdownRenderer content={question} />
+            </div>
+          </div>
+        </div>
+
+        {options.length > 0 && (
+          <div className="mt-3 space-y-1.5 border-t border-ink/6 pt-2.5">
+            <span className="text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
+              Options
+            </span>
+            <div className="grid gap-1.5">
+              {options.map((opt, idx) => {
+                const isSelected =
+                  !isCancelled &&
+                  Boolean(selectedAnswer) &&
+                  selectedAnswer.toLowerCase().includes(opt.label.toLowerCase());
+
+                return (
+                  <div
+                    key={idx}
+                    className={`flex flex-col gap-0.5 rounded-md px-2.5 py-1.5 text-[11px] transition-colors ${
+                      isSelected
+                        ? 'border border-ink/30 bg-ink/5 font-medium text-ink'
+                        : 'border border-ink/6 bg-canvas/30 text-ink/75'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded bg-ink/5 font-mono text-[9px] text-ink/60 font-semibold">
+                        {idx + 1}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate font-medium text-ink/90">
+                        {opt.label}
+                      </span>
+                      {isSelected && <CheckCircle2 size={12} className="shrink-0 text-success" />}
+                    </div>
+                    {opt.description && (
+                      <div className="pl-5.5 text-[10px] leading-relaxed text-ink/50">
+                        {opt.description}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* User Response Section — compact, proportional styling */}
+      {isCancelled && rawOutput && (
+        <div className="flex items-center gap-2 rounded-md border border-ink/8 bg-ink/[0.02] px-2.5 py-1 text-[10.5px] text-ink/60">
+          <XCircle size={11} className="shrink-0 text-ink/40" />
+          <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40 shrink-0">
+            Status:
+          </span>
+          <span className="font-mono text-ink/60 truncate select-text">{rawOutput}</span>
+        </div>
+      )}
+
+      {!isCancelled && jsonResult.isValid && jsonResult.pretty && (
+        <JsonCodeBlock
+          jsonString={jsonResult.pretty}
+          title="User Response"
+          maxHeightClass="max-h-40"
+          compact={true}
+          icon={<CheckCircle2 size={10.5} className="text-success shrink-0" />}
+          showHeader={true}
+        />
+      )}
+
+      {!isCancelled && !jsonResult.isValid && rawOutput && (
+        isMultilineText ? (
+          <div className="overflow-hidden rounded-md border border-ink/8 bg-paper">
+            <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-2.5 py-1">
+              <div className="flex items-center gap-1.5">
+                <CheckCircle2 size={10.5} className="shrink-0 text-success" />
+                <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+                  User Response
+                </span>
+              </div>
+              <CopyButton
+                text={rawOutput}
+                className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink shrink-0"
+                title="Copy response"
+                label="Copy"
+              />
+            </div>
+            <pre className="max-h-32 overflow-y-auto p-2 font-mono text-[10.5px] leading-snug whitespace-pre-wrap break-words text-ink/85 select-text">
+              {highlightedResponse ? (
+                <span dangerouslySetInnerHTML={{ __html: highlightedResponse }} />
+              ) : (
+                rawOutput
+              )}
+            </pre>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 rounded-md border border-ink/8 bg-canvas/30 px-2.5 py-1 text-[10.5px]">
+            <CheckCircle2 size={11} className="shrink-0 text-success" />
+            <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40 shrink-0">
+              User Response:
+            </span>
+            <span className="font-mono text-ink/90 font-medium truncate select-text">
+              {selectedMatch ? selectedMatch[1].trim().replace(/^["']|["']$/g, '') : rawOutput}
+            </span>
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,202 @@
+import { useMemo } from 'preact/hooks';
+import { ArrowRight, CheckCircle2, Clock, Wand2 } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { getLanguageFromPath, 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,223 @@
+import { useMemo } from 'preact/hooks';
+import { Check, Clock } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { stripAnsiCodes } from '@/shared/lib/code/ansi';
+import { highlightCode, isCodeLike, 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 { 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 highlightedOutput = useMemo(
+    () => (outputIsCode ? highlightCode(truncatedOutput.text, outputLang) : ''),
+    [outputIsCode, truncatedOutput, outputLang, syntaxReady]
+  );
+
+  return (
+    <div className="space-y-2">
+      {/* 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 items-center gap-2">
+              <div className="flex items-center gap-1">
+                <span className="h-2 w-2 rounded-full bg-ink/20" />
+                <span className="h-2 w-2 rounded-full bg-ink/20" />
+                <span className="h-2 w-2 rounded-full bg-ink/20" />
+              </div>
+              <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>
+          {truncatedOutput.skipped > 0 && (
+            <div className="border-b border-ink/6 bg-canvas/40 px-3 py-1 font-mono text-[9.5px] text-ink/45">
+              … {truncatedOutput.skipped} earlier lines hidden
+            </div>
+          )}
+          <div className="max-h-72 overflow-y-auto overscroll-contain p-3 font-mono text-[11px] leading-relaxed select-text">
+            {outputIsCode ? (
+              <pre
+                className="overflow-x-auto whitespace-pre text-ink/85 leading-relaxed"
+                dangerouslySetInnerHTML={{ __html: highlightedOutput }}
+              />
+            ) : (
+              truncatedOutput.text.split('\n').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>
+      )}
+    </div>
+  );
+}