ompchamber 0.3.0

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

@@ -0,0 +1,150 @@
+import { useMemo } from 'preact/hooks';
+import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface DiffLine {
+  kind: 'add' | 'del' | 'meta' | 'context';
+  text: string;
+}
+
+interface DiffFile {
+  oldPath: string;
+  newPath: string;
+  lines: DiffLine[];
+}
+
+function parseUnifiedDiff(text: string): DiffFile[] {
+  const files: DiffFile[] = [];
+  let current: DiffFile | null = null;
+  const lines = text.split(/\r?\n/);
+
+  for (const line of lines) {
+    if (line.startsWith('diff --git ')) {
+      if (current) files.push(current);
+      current = null;
+      continue;
+    }
+    if (line.startsWith('--- ')) {
+      if (!current) current = { oldPath: line.slice(4).replace(/^[ab]\//, ''), newPath: '', lines: [] };
+      else current.oldPath = line.slice(4).replace(/^[ab]\//, '');
+      continue;
+    }
+    if (line.startsWith('+++ ')) {
+      if (!current) current = { oldPath: '', newPath: '', lines: [] };
+      current.newPath = line.slice(4).replace(/^[ab]\//, '');
+      continue;
+    }
+    if (!current) {
+      if (line.startsWith('@@') || line.startsWith('+') || line.startsWith('-')) {
+        current = { oldPath: '', newPath: '', lines: [] };
+      } else {
+        continue;
+      }
+    }
+    if (line.startsWith('@@')) {
+      current.lines.push({ kind: 'meta', text: line });
+    } else if (line.startsWith('+') && !line.startsWith('+++')) {
+      current.lines.push({ kind: 'add', text: line.slice(1) });
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      current.lines.push({ kind: 'del', text: line.slice(1) });
+    } else {
+      current.lines.push({ kind: 'context', text: line.startsWith(' ') ? line.slice(1) : line });
+    }
+  }
+  if (current) files.push(current);
+  return files;
+}
+
+/** Split diff view untuk details.patch / details.diff dari toolResult. */
+export function DiffView({ text }: { text: string }) {
+  const files = useMemo(() => parseUnifiedDiff(text), [text]);
+  const syntaxReady = useSyntaxReady();
+
+  const htmlByFile = useMemo(() => {
+    return files.map((file) => {
+      const lang = getLanguageFromPath(file.newPath || file.oldPath);
+      return highlightLines(
+        file.lines.map((line) => (line.kind === 'meta' ? '' : line.text)).join('\n'),
+        lang
+      );
+    });
+  }, [files, syntaxReady]);
+  if (files.length === 0) {
+    return (
+      <pre className="max-h-48 overflow-auto whitespace-pre overflow-x-auto rounded-lg border border-ink/8 bg-paper p-3 font-mono text-[11px] leading-relaxed text-ink/80 select-text">
+        {text}
+      </pre>
+    );
+  }
+
+  const stats = files.reduce(
+    (acc, file) => {
+      for (const line of file.lines) {
+        if (line.kind === 'add') acc.added++;
+        else if (line.kind === 'del') acc.removed++;
+      }
+      return acc;
+    },
+    { added: 0, removed: 0 },
+  );
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8">
+      <div className="flex items-center gap-2 border-b border-ink/8 bg-paper px-2.5 py-1.5">
+        <span className="truncate font-mono text-[10.5px] text-ink/60">
+          {files[0]?.newPath || files[0]?.oldPath || 'diff'}
+        </span>
+        {files.length > 1 && (
+          <span className="rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9.5px] text-ink/45">
+            {files.length} files
+          </span>
+        )}
+        <span className="ml-auto flex items-center gap-1.5 font-mono text-[10px]">
+          <span className="text-success">+{stats.added}</span>
+          <span className="text-error">-{stats.removed}</span>
+        </span>
+      </div>
+      <div className="max-h-56 overflow-auto bg-paper font-mono text-[11px] leading-relaxed select-text">
+        {files.map((file, fileIndex) => (
+          <div key={fileIndex} className={fileIndex > 0 ? 'border-t border-ink/6' : ''}>
+            {file.lines.map((line, i) => {
+              const bg =
+                line.kind === 'add'
+                  ? 'bg-success/[0.07]'
+                  : line.kind === 'del'
+                    ? 'bg-error/[0.07]'
+                    : line.kind === 'meta'
+                      ? 'bg-ink/[0.04]'
+                      : '';
+              const color =
+                line.kind === 'add'
+                  ? 'text-success'
+                  : line.kind === 'del'
+                    ? 'text-error'
+                    : line.kind === 'meta'
+                      ? 'text-ink/45'
+                      : 'text-ink/70';
+              const marker = line.kind === 'add' ? '+' : line.kind === 'del' ? '-' : line.kind === 'meta' ? '@' : ' ';
+              const html = htmlByFile[fileIndex]?.[i] || '';
+              return (
+                <div key={i} className={`flex px-2.5 ${bg}`}>
+                  <span className={`w-4 shrink-0 select-none font-bold ${color}`}>{marker}</span>
+                  {line.kind === 'meta' || !html ? (
+                    <span className={`min-w-0 flex-1 whitespace-pre-wrap break-all ${color}`}>
+                      {line.text || '\u00a0'}
+                    </span>
+                  ) : (
+                    <span
+                      className="shiki min-w-0 flex-1 whitespace-pre-wrap break-all"
+                      dangerouslySetInnerHTML={{ __html: html }}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'preact/compat';
+import { useMemo } from 'preact/hooks';
+import { Code } from 'lucide-preact';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { stripAnsiCodes } from '@/shared/lib/code/ansi';
+import { detectOutputFormat } from '@/shared/lib/chat/detect-format';
+import { highlightCode, 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 FallbackOutputProps {
+  /** Teks output mentah dari tool result. */
+  text: string;
+}
+
+/** Render output fallback generik dengan deteksi format otomatis:
+ *  markdown → MarkdownRenderer; html → sanitize + inject; text → syntax highlight. */
+export function FallbackOutput({ text }: FallbackOutputProps) {
+  const stripped = useMemo(() => stripAnsiCodes(text), [text]);
+  const format = useMemo(() => detectOutputFormat(stripped), [stripped]);
+  const jsonResult = useMemo(() => (format === 'json' ? tryParseJson(stripped) : null), [format, stripped]);
+  const displayLinesCount = useMemo(() => {
+    if (jsonResult?.isValid && jsonResult.linesCount) return jsonResult.linesCount;
+    return stripped.split(/\r?\n/).length;
+  }, [jsonResult, stripped]);
+
+  const display = useMemo(() => {
+    const source = format === 'json' && jsonResult?.isValid && jsonResult.pretty ? jsonResult.pretty : stripped;
+    return truncateTailLines(source, MAX_OUTPUT_LINES);
+  }, [format, jsonResult, stripped]);
+
+  const isPlainText = format !== 'markdown' && format !== 'json' && format !== 'html';
+  const syntaxReady = useSyntaxReady();
+  const highlightedText = useMemo(
+    () => (isPlainText ? highlightCode(display.text, 'javascript') : ''),
+    [isPlainText, display, syntaxReady]
+  );
+  const copyText = useMemo(
+    () => (jsonResult?.isValid && jsonResult.pretty ? jsonResult.pretty : stripped),
+    [jsonResult, stripped]
+  );
+
+  let body: ReactNode;
+  if (format === 'markdown') {
+    body = (
+      <div className="prose-content max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 text-[12px] leading-relaxed text-ink/85 select-text">
+        <MarkdownRenderer content={display.text} />
+      </div>
+    );
+  } else if (format === 'json') {
+    body = (
+      <JsonCodeBlock
+        jsonString={display.text}
+        maxHeightClass="max-h-72"
+        showHeader={false}
+      />
+    );
+  } else if (format === 'html') {
+    const sanitized = sanitizeHtml(display.text);
+    body = (
+      <div
+        className="max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 text-[12px] leading-relaxed text-ink/85 select-text"
+        dangerouslySetInnerHTML={{ __html: sanitized }}
+      />
+    );
+  } else {
+    body = (
+      <pre
+        className="max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/80 select-text"
+        dangerouslySetInnerHTML={{ __html: highlightedText }}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5 text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
+          <Code size={11} className="text-ink/40" />
+          <span>Output</span>
+          <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] text-ink/45">
+            {format}
+          </span>
+          {displayLinesCount > 1 && (
+            <span className="font-mono text-[9px] text-ink/35">
+              {displayLinesCount} lines
+            </span>
+          )}
+        </div>
+        <CopyButton
+          text={copyText}
+          className="flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+          onClick={(e) => e.stopPropagation()}
+          label="Copy"
+        />
+      </div>
+      {display.skipped > 0 && (
+        <div className="font-mono text-[10px] text-ink/45">… {display.skipped} earlier lines hidden</div>
+      )}
+      {body}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'preact/compat';
+import { useMemo } from 'preact/hooks';
+import { Braces } from 'lucide-preact';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { highlightJson } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface JsonCodeBlockProps {
+  /** Formatted JSON string to render */
+  jsonString: string;
+  /** Optional title to show in the header */
+  title?: string;
+  /** Custom max-height class (default: max-h-56, or max-h-40 if compact) */
+  maxHeightClass?: string;
+  /** Whether to show header bar (default: true) */
+  showHeader?: boolean;
+  /** Custom root className */
+  className?: string;
+  /** Optional compact styling mode */
+  compact?: boolean;
+  /** Optional custom header icon */
+  icon?: ReactNode;
+}
+
+export function JsonCodeBlock({
+  jsonString,
+  title,
+  maxHeightClass,
+  showHeader = true,
+  className = '',
+  compact = false,
+  icon,
+}: JsonCodeBlockProps) {
+  const effectiveMaxHeight = maxHeightClass || (compact ? 'max-h-40' : 'max-h-56');
+  const lines = useMemo(() => jsonString.split('\n'), [jsonString]);
+  const syntaxReady = useSyntaxReady();
+  const highlighted = useMemo(() => highlightJson(jsonString), [jsonString, syntaxReady]);
+
+  return (
+    <div className={`overflow-hidden ${compact ? 'rounded-md' : 'rounded-lg'} border border-ink/8 bg-paper ${className}`}>
+      {showHeader && (
+        <div className={`flex items-center justify-between border-b border-ink/6 bg-canvas/40 ${compact ? 'px-2.5 py-1' : 'px-3 py-1.5'}`}>
+          <div className="flex items-center gap-1.5 min-w-0">
+            {icon || <Braces size={compact ? 10.5 : 11} className="text-ink/60 shrink-0" />}
+            <span className={`font-mono ${compact ? 'text-[10px]' : 'text-[10.5px]'} font-semibold text-ink truncate`}>
+              {title || 'JSON'}
+            </span>
+            <span className={`rounded bg-ink/5 px-1.5 py-0.2 font-mono ${compact ? 'text-[8.5px]' : 'text-[9px]'} uppercase tracking-wider text-ink/50 shrink-0`}>
+              JSON
+            </span>
+            <span className={`font-mono ${compact ? 'text-[9px]' : 'text-[9.5px]'} text-ink/40 shrink-0`}>
+              {lines.length} {lines.length === 1 ? 'line' : 'lines'}
+            </span>
+          </div>
+
+          <CopyButton
+            text={jsonString}
+            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 JSON"
+            onClick={(e) => e.stopPropagation()}
+            label="Copy"
+          />
+        </div>
+      )}
+
+      <div className={`flex ${effectiveMaxHeight} items-start overflow-x-auto font-mono ${compact ? 'text-[10.5px] leading-snug' : 'text-[11px] leading-relaxed'} select-text`}>
+        <div className={`sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 ${compact ? 'py-1.5 pl-2 pr-1.5 text-[9.5px]' : 'py-2 pl-2.5 pr-2 text-[10px]'} text-right text-ink/25`}>
+          {lines.map((_, idx) => (
+            <div key={idx}>{idx + 1}</div>
+          ))}
+        </div>
+        <pre
+          className={`flex-1 overflow-x-auto ${compact ? 'p-1.5' : 'p-2'} whitespace-pre text-ink/85 font-mono`}
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+import { useState } from 'preact/hooks';
+import type { ReactNode } from 'preact/compat';
+import { AlertCircle, Check, ChevronDown, CircleSlash, Loader2 } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { isSkippedTool } from '@/shared/lib/chat/tool-status';
+
+interface ToolCardShellProps {
+  tool: ToolCallData;
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  meta?: ReactNode;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  defaultExpanded?: boolean;
+  /** Render the body permanently — no collapse state, no chevron. */
+  alwaysExpanded?: boolean;
+  children?: ReactNode;
+}
+
+function statusDot(status: ToolCallData['status'], isSkipped: boolean) {
+  const base = 'h-1.5 w-1.5 rounded-full';
+  if (status === 'running') return <span className={`${base} bg-ink/60 animate-pulse`} />;
+  if (isSkipped) return <span className={`${base} bg-ink/30`} />;
+  if (status === 'error') return <span className={`${base} bg-error`} />;
+  return <span className={`${base} bg-success`} />;
+}
+
+function statusBadge(tool: ToolCallData) {
+  const isSkipped = isSkippedTool(tool);
+  if (isSkipped) {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-ink/8 px-2 py-0.5 text-[10px] font-semibold text-ink/50">
+        <CircleSlash size={10} /> Skipped
+      </span>
+    );
+  }
+
+  const status = tool.status || (tool.error ? 'error' : 'success');
+  if (status === 'error') {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-error/10 px-2 py-0.5 text-[10px] font-semibold text-error">
+        <AlertCircle size={10} /> Failed
+      </span>
+    );
+  }
+  if (status === 'running') {
+    return (
+      <span className="inline-flex items-center gap-1 rounded-full bg-ink/8 px-2 py-0.5 text-[10px] font-semibold text-ink/60">
+        <Loader2 size={10} className="animate-spin" /> Running
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-[10px] font-semibold text-success">
+      <Check size={10} /> Done
+    </span>
+  );
+}
+
+/** Shell card collapsible untuk semua tool call — header + body konsisten. */
+export function ToolCardShell({
+  tool,
+  icon,
+  title,
+  subtitle,
+  meta,
+  isOpen: controlledIsOpen,
+  onToggle,
+  defaultExpanded = false,
+  alwaysExpanded = false,
+  children,
+}: ToolCardShellProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultExpanded);
+  const collapsible = !alwaysExpanded;
+  const isExpanded = alwaysExpanded || (controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen);
+  const status = tool.status || (tool.error ? 'error' : 'success');
+  const isRunning = status === 'running';
+  const hasBody = Boolean(children);
+
+  const handleToggle = () => {
+    if (!hasBody || !collapsible) return;
+    if (onToggle) onToggle();
+    else setInternalIsOpen((prev) => !prev);
+  };
+
+  const isSkipped = isSkippedTool(tool);
+
+  return (
+    <div
+      className={`group overflow-hidden rounded-xl border transition-all duration-200 ${
+        status === 'error' && !isSkipped
+          ? 'border-error/25 bg-error/[0.03]'
+          : isRunning
+            ? 'border-ink/15 bg-paper'
+            : isSkipped
+              ? 'border-dashed border-ink/15 bg-paper/60 opacity-80'
+              : 'border-ink/10 bg-paper hover:border-ink/20'
+      } ${isExpanded ? 'shadow-sm' : ''}`}
+    >
+      <button
+        type="button"
+        onClick={handleToggle}
+        disabled={!hasBody || !collapsible}
+        aria-expanded={isExpanded}
+        className={`flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors ${
+          hasBody && collapsible ? 'cursor-pointer hover:bg-ink/[0.03]' : 'cursor-default'
+        } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/20`}
+      >
+        <span
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition-colors ${
+            status === 'error' && !isSkipped
+              ? 'bg-error/10 text-error'
+              : isRunning
+                ? 'bg-ink/8 text-ink'
+                : 'bg-ink/5 text-ink/70 group-hover:bg-ink/8'
+          }`}
+        >
+          {icon}
+        </span>
+
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span className="flex items-center gap-1.5">
+            <span className="truncate text-[12px] font-semibold tracking-tight text-ink">{title}</span>
+            {statusDot(status, isSkipped)}
+          </span>
+          {subtitle && (
+            <span className="truncate font-mono text-[10.5px] text-ink/45">{subtitle}</span>
+          )}
+        </span>
+
+        <span className="flex shrink-0 items-center gap-2">
+          {meta}
+          {statusBadge(tool)}
+          {hasBody && collapsible && (
+            <ChevronDown
+              size={14}
+              className={`text-ink/35 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+            />
+          )}
+        </span>
+      </button>
+
+      {isExpanded && hasBody && (
+        <div className="border-t border-ink/8 bg-canvas/40 px-3 py-3 code-surface">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/read-line-meta.ts

@@ -0,0 +1,95 @@
+import type { ToolCallData } from '@/shared/types/chat';
+
+export interface LineMeta {
+  startLine?: number;
+  lineNumbers?: (number | string | null | undefined)[];
+}
+
+/**
+ * Resolve the starting line number (and any explicit line-number gutter) that a
+ * `read` tool result should render against. Pure derivation from the tool call
+ * payload — the ordering of the heuristics below is load-bearing.
+ */
+export function extractLineMeta(
+  tool?: ToolCallData,
+  targetFilePath?: string,
+  rawContent?: string
+): LineMeta {
+  const details = (tool?.details ?? {}) as Record<string, any>;
+  const input = (tool?.input && typeof tool.input === 'object' ? tool.input : {}) as Record<string, any>;
+
+  // 1. Explicit lineNumbers array in details or displayContent
+  const displayContent = details.displayContent;
+  if (displayContent && Array.isArray(displayContent.lineNumbers) && displayContent.lineNumbers.length > 0) {
+    return {
+      startLine: typeof displayContent.startLine === 'number' ? displayContent.startLine : undefined,
+      lineNumbers: displayContent.lineNumbers,
+    };
+  }
+  if (Array.isArray(details.lineNumbers) && details.lineNumbers.length > 0) {
+    return {
+      startLine: typeof details.startLine === 'number' ? details.startLine : undefined,
+      lineNumbers: details.lineNumbers,
+    };
+  }
+
+  // 2. Explicit startLine in displayContent or details
+  if (typeof displayContent?.startLine === 'number' && displayContent.startLine > 0) {
+    return { startLine: displayContent.startLine };
+  }
+  if (typeof details.startLine === 'number' && details.startLine > 0) {
+    return { startLine: details.startLine };
+  }
+  if (typeof details.start_line === 'number' && details.start_line > 0) {
+    return { startLine: details.start_line };
+  }
+  if (typeof details.offset === 'number' && details.offset > 0) {
+    return { startLine: details.offset };
+  }
+
+  // 3. Truncation shownRange start
+  const shownRangeStart =
+    details.meta?.truncation?.shownRange?.start ??
+    details.truncation?.shownRange?.start ??
+    details.meta?.shownRange?.start ??
+    details.shownRange?.start;
+  if (typeof shownRangeStart === 'number' && shownRangeStart > 0) {
+    return { startLine: shownRangeStart };
+  }
+
+  // 4. Input startLine / offset / from
+  const inputStart = input.start_line ?? input.startLine ?? input.offset ?? input.StartLine ?? input.from;
+  if (typeof inputStart === 'number' && inputStart > 0) {
+    return { startLine: inputStart };
+  }
+  if (typeof inputStart === 'string' && /^\d+$/.test(inputStart.trim())) {
+    const parsed = parseInt(inputStart.trim(), 10);
+    if (parsed > 0) return { startLine: parsed };
+  }
+
+  // 5. Line range in target / input path / title: e.g. "app/types/chat.ts:55-100"
+  const pathCandidates = [
+    typeof input.path === 'string' ? input.path : '',
+    tool?.target || '',
+    tool?.title || '',
+    targetFilePath || '',
+  ];
+  for (const candidate of pathCandidates) {
+    const match = candidate.match(/:(\d+)(?:-\d+)?(?:\s|$)/);
+    if (match) {
+      const parsed = parseInt(match[1], 10);
+      if (parsed > 0) return { startLine: parsed };
+    }
+  }
+
+  // 6. Elision notice inside content: e.g. "[Showing lines 54-103 of 208...]"
+  if (rawContent) {
+    const match = rawContent.match(/\[(?:Showing\s+)?lines?\s+(\d+)(?:-\d+)?/i);
+    if (match) {
+      const parsed = parseInt(match[1], 10);
+      if (parsed > 0) return { startLine: parsed };
+    }
+  }
+
+  return {};
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/tool-input.ts

@@ -0,0 +1,18 @@
+import type { ToolCallData } from '@/shared/types/chat';
+
+/**
+ * Extract a `path` string from a tool call's raw arguments, which omp sends as
+ * an object but the MOCK path may send as a JSON string. Returns undefined when
+ * the argument is absent or not a string.
+ */
+export function getToolInputPath(input: ToolCallData['input']): string | undefined {
+  if (input && typeof input === 'object' && typeof input.path === 'string') return input.path;
+  return undefined;
+}
+
+/** Extract a string `action` from a tool call's raw arguments (omp sends an
+ *  object; the MOCK path may send a JSON string). Returns undefined otherwise. */
+export function getToolInputAction(input: ToolCallData['input']): string | undefined {
+  if (input && typeof input === 'object' && typeof input.action === 'string') return input.action;
+  return undefined;
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/truncate.ts

@@ -0,0 +1,18 @@
+/** Maximum number of lines rendered into the DOM for a single tool output. */
+export const MAX_OUTPUT_LINES = 1000;
+
+export interface TruncateTailResult {
+  /** The last `maxLines` lines — or the original text when it is short enough. */
+  text: string;
+  /** How many leading lines were dropped (0 when nothing was hidden). */
+  skipped: number;
+}
+
+/** Keep only the last `maxLines` lines of `text`, reporting how many were dropped.
+ *  Display-only helper: never use the result for persistence or clipboard payloads. */
+export function truncateTailLines(text: string, maxLines: number = MAX_OUTPUT_LINES): TruncateTailResult {
+  if (!text) return { text: '', skipped: 0 };
+  const lines = text.split(/\r?\n/);
+  if (lines.length <= maxLines) return { text, skipped: 0 };
+  return { text: lines.slice(lines.length - maxLines).join('\n'), skipped: lines.length - maxLines };
+}