apex-dev 3.0.2 → 3.1.0

package/src/commands.js

@@ -1,133 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const { PROJECT_ROOT, session, resolvePath, getMode, setMode } = require('./config');
-const { executeTool } = require('./toolExecutors');
-const store = require('./store');
-
-async function handleSlashCommand(input) {
-  const [cmd, ...rest] = input.split(' ');
-  const arg = rest.join(' ');
-
-  switch (cmd) {
-    case '/help':
-      store.setState({ showHelp: true });
-      break;
-
-    case '/clear':
-      session.conversationHistory = [];
-      store.clearMessages();
-      store.addMessage({ role: 'system', content: 'Conversation cleared.' });
-      break;
-
-    case '/files':
-    case '/ls': {
-      const dirPath = arg ? resolvePath(arg) : PROJECT_ROOT;
-      store.addMessage({ role: 'system', content: 'Loading file tree...', label: 'Project Files' });
-      const result = await executeTool('ListDir', { path: dirPath, recursive: true });
-      store.addMessage({ role: 'system', content: result, label: 'Project Files' });
-      break;
-    }
-
-    case '/cost':
-    case '/status': {
-      const elapsed = ((Date.now() - session.startTime) / 1000 / 60).toFixed(1);
-      const parts = [
-        `Session: ${elapsed} min`,
-        `Turns: ${session.turnCount}`,
-        `Tools: ${session.toolCallCount}`,
-        `Tokens: ${session.totalTokens.toLocaleString()}`,
-        `Cost: $${session.totalCost.toFixed(4)}`,
-      ];
-      if (session.filesModified.size > 0) parts.push(`Files modified: ${session.filesModified.size}`);
-      if (session.commandsRun.length > 0) parts.push(`Commands: ${session.commandsRun.length}`);
-      store.addMessage({ role: 'system', content: parts.join('\n'), label: 'Session Stats' });
-      break;
-    }
-
-    case '/undo': {
-      if (session.editHistory.length === 0) {
-        store.addMessage({ role: 'system', content: 'No edits to undo.' });
-      } else {
-        const last = session.editHistory[session.editHistory.length - 1];
-        fs.writeFileSync(last.path, last.before, 'utf-8');
-        session.editHistory.pop();
-        store.addMessage({ role: 'system', content: `Undone last edit to ${path.basename(last.path)}` });
-      }
-      break;
-    }
-
-    case '/diff': {
-      try {
-        const diff = execSync('git diff --stat 2>/dev/null', { encoding: 'utf-8', cwd: PROJECT_ROOT });
-        store.addMessage({ role: 'system', content: diff || '(no changes)', label: 'Git Diff' });
-      } catch {
-        store.addMessage({ role: 'system', content: 'Not a git repository.' });
-      }
-      break;
-    }
-
-    case '/git': {
-      if (!arg) {
-        store.addMessage({ role: 'system', content: 'Usage: /git <command>' });
-        break;
-      }
-      try {
-        const output = execSync(`git ${arg}`, { encoding: 'utf-8', cwd: PROJECT_ROOT });
-        store.addMessage({ role: 'system', content: output || '(no output)', label: `git ${arg}` });
-      } catch (err) {
-        store.addMessage({ role: 'system', content: err.stderr || err.message });
-      }
-      break;
-    }
-
-    case '/mode': {
-      if (!arg) {
-        const current = getMode();
-        const modes = ['default', 'max', 'lite'];
-        const modeDescriptions = {
-          default: 'Single agent pass with auto code review',
-          max: 'Multi-strategy editing, best-of-N thinking, multi-perspective review, auto context pruning',
-          lite: 'Fast mode — skips validation and review steps',
-        };
-        const lines = modes.map(m =>
-          `${m === current ? '→ ' : '  '}${m.padEnd(10)} ${modeDescriptions[m]}`
-        );
-        store.addMessage({ role: 'system', content: `Current mode: ${current}\n\n${lines.join('\n')}`, label: 'Mode' });
-      } else {
-        const success = setMode(arg.trim());
-        if (success) {
-          store.addMessage({ role: 'system', content: `Mode set to: ${arg.trim()}`, label: 'Mode' });
-        } else {
-          store.addMessage({ role: 'system', content: `Invalid mode: ${arg}. Use default, max, or lite.` });
-        }
-      }
-      break;
-    }
-
-    case '/compact': {
-      const pruneId = store.addMessage({ role: 'system', content: 'Compacting conversation...', label: 'Context Pruner' });
-      try {
-        const result = await executeTool('ContextPruner', {}, (partial) => {
-          store.updateMessage(pruneId, { content: partial, label: 'Context Pruner' });
-        });
-        store.updateMessage(pruneId, { content: result, label: 'Context Pruner' });
-      } catch (err) {
-        store.updateMessage(pruneId, { content: `Compaction failed: ${err.message}` });
-      }
-      break;
-    }
-
-    case '/quit':
-      return { action: 'quit' };
-
-    default:
-      store.addMessage({ role: 'system', content: `Unknown command: ${cmd}. Type /help for available commands.` });
-  }
-
-  return null;
-}
-
-module.exports = { handleSlashCommand };

package/src/components/AssistantMessage.jsx

@@ -1,83 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-export default function AssistantMessage({ content, isStreaming }) {
-  const { indent, isNarrow, width } = useLayout();
-  const codeIndent = isNarrow ? 1 : 2;
-  const separatorWidth = Math.min(width - indent - codeIndent, isNarrow ? 40 : 60);
-  if (!content) return null;
-
-  const lines = content.split('\n');
-  const rendered = [];
-  let inCodeBlock = false;
-  let codeLines = [];
-  let codeLang = '';
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    if (line.startsWith('```') && !inCodeBlock) {
-      inCodeBlock = true;
-      codeLang = line.slice(3).trim() || 'code';
-      codeLines = [];
-    } else if (line.startsWith('```') && inCodeBlock) {
-      inCodeBlock = false;
-      rendered.push(
-        <box key={`code-${i}`} style={{ flexDirection: 'column', paddingLeft: codeIndent, marginTop: 0 }}>
-          <text fg={colors.dim} content={`── ${codeLang} ──`} />
-          {codeLines.map((cl, j) => (
-            <text key={j}>
-              <span fg={colors.dim}>{String(j + 1).padStart(isNarrow ? 2 : 3) + ' │ '}</span>
-              <span fg={colors.text}>{cl}</span>
-            </text>
-          ))}
-          <text fg={colors.dim} content={'─'.repeat(Math.max(separatorWidth, 10))} />
-        </box>
-      );
-    } else if (inCodeBlock) {
-      codeLines.push(line);
-    } else {
-      const processed = line.replace(/`([^`]+)`/g, '«$1»');
-      if (processed.includes('«')) {
-        const parts = processed.split(/«|»/);
-        rendered.push(
-          <text key={`line-${i}`}>
-            {parts.map((part, j) =>
-              j % 2 === 0
-                ? <span key={j} fg={colors.text}>{part}</span>
-                : <span key={j} fg={colors.cyan}>{part}</span>
-            )}
-          </text>
-        );
-      } else {
-        rendered.push(
-          <text key={`line-${i}`}>
-            <span fg={colors.text}>{line}</span>
-          </text>
-        );
-      }
-    }
-  }
-
-  if (inCodeBlock && codeLines.length > 0) {
-    rendered.push(
-      <box key="code-tail" style={{ flexDirection: 'column', paddingLeft: codeIndent }}>
-        <text fg={colors.dim} content={`── ${codeLang} ──`} />
-        {codeLines.map((cl, j) => (
-          <text key={j}>
-            <span fg={colors.dim}>{String(j + 1).padStart(isNarrow ? 2 : 3) + ' │ '}</span>
-            <span fg={colors.text}>{cl}</span>
-          </text>
-        ))}
-      </box>
-    );
-  }
-
-  return (
-    <box style={{ flexDirection: 'column', paddingLeft: indent }}>
-      {rendered}
-      {isStreaming ? <text fg={colors.accent} content="▊" /> : null}
-    </box>
-  );
-}

package/src/components/ChatArea.jsx

@@ -1,84 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-import Welcome from './Welcome.jsx';
-import UserMessage from './UserMessage.jsx';
-import AssistantMessage from './AssistantMessage.jsx';
-import ThinkBlock from './ThinkBlock.jsx';
-import ToolCallItem from './ToolCallItem.jsx';
-import DiffView from './DiffView.jsx';
-import SystemMessage from './SystemMessage.jsx';
-import Spinner from './Spinner.jsx';
-import { toggleMessageExpanded } from '../store.js';
-
-function MessageItem({ message }) {
-  const { width } = useLayout();
-  switch (message.role) {
-    case 'user':
-      return <UserMessage content={message.content} />;
-    case 'assistant':
-      return (
-        <box style={{ flexDirection: 'column', marginTop: 1 }}>
-          <text fg={colors.primary} attributes={TextAttributes.BOLD} style={{ paddingLeft: 1 }} content="Apex" />
-          <AssistantMessage content={message.content} />
-        </box>
-      );
-    case 'thinking':
-      return (
-        <ThinkBlock
-          content={message.content}
-          expanded={message.expanded}
-          onToggle={() => toggleMessageExpanded(message.id)}
-        />
-      );
-    case 'tool':
-      return <ToolCallItem message={message} />;
-    case 'diff':
-      return <DiffView filename={message.filename} content={message.content} />;
-    case 'system':
-      return <SystemMessage message={message} />;
-    case 'divider':
-      return <text fg={colors.dim} style={{ paddingLeft: 1 }} content={'─'.repeat(Math.max(width - 2, 10))} />;
-    default:
-      return null;
-  }
-}
-
-export default function ChatArea({ messages, streamingContent, streamingThinking, isProcessing }) {
-  const { indent } = useLayout();
-  return (
-    <scrollbox
-      style={{ flexGrow: 1 }}
-      focused
-      stickyScroll
-      stickyStart="bottom"
-      scrollY
-    >
-      <box style={{ flexDirection: 'column' }}>
-        <Welcome />
-        {messages.map(msg => (
-          <MessageItem key={msg.id} message={msg} />
-        ))}
-        {streamingThinking ? (
-          <box style={{ paddingLeft: 2, marginTop: 0 }}>
-            <text fg={colors.dim} attributes={TextAttributes.ITALIC}>
-              <span fg={colors.dim}>{'▸ Thinking: '}</span>
-              <span fg={colors.dim}>{streamingThinking.slice(-100)}</span>
-            </text>
-          </box>
-        ) : null}
-        {streamingContent ? (
-          <box style={{ flexDirection: 'column', marginTop: 0 }}>
-            <AssistantMessage content={streamingContent} isStreaming />
-          </box>
-        ) : null}
-        {isProcessing && !streamingContent && !streamingThinking ? (
-          <box style={{ paddingLeft: indent, marginTop: 1 }}>
-            <Spinner label="Reasoning..." />
-          </box>
-        ) : null}
-        <box style={{ height: 1 }} />
-      </box>
-    </scrollbox>
-  );
-}

package/src/components/DiffView.jsx

@@ -1,26 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-const path = require('path');
-
-export default function DiffView({ filename, content }) {
-  const { indent } = useLayout();
-  if (!content) return null;
-  const lines = content.split('\n');
-
-  return (
-    <box style={{ flexDirection: 'column', paddingLeft: indent }}>
-      <text fg={colors.text} attributes={TextAttributes.BOLD} content={path.basename(filename || '')} />
-      {lines.map((line, i) => {
-        if (line.startsWith('+')) {
-          return <text key={i} fg={colors.green} content={line} />;
-        }
-        if (line.startsWith('-')) {
-          return <text key={i} fg={colors.red} content={line} />;
-        }
-        return null;
-      })}
-    </box>
-  );
-}

package/src/components/Divider.jsx

@@ -1,8 +0,0 @@
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-export default function Divider() {
-  const { width } = useLayout();
-  const cols = Math.min(width, 120);
-  return <text fg={colors.dim} content={'─'.repeat(cols)} />;
-}

package/src/components/Header.jsx

@@ -1,44 +0,0 @@
-import { useState, useEffect } from 'react';
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { PROJECT_ROOT, getMode } from '../config.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-const path = require('path');
-const { execSync } = require('child_process');
-
-export default function Header() {
-  const [branch, setBranch] = useState('');
-  const { isNarrow } = useLayout();
-  const cwd = path.basename(PROJECT_ROOT);
-  const mode = getMode();
-  const modeColors = { default: colors.dim, max: colors.accent, lite: colors.muted };
-
-  useEffect(() => {
-    try {
-      const b = execSync('git rev-parse --abbrev-ref HEAD 2>/dev/null', {
-        encoding: 'utf-8',
-        cwd: PROJECT_ROOT,
-      }).trim();
-      setBranch(b);
-    } catch {}
-  }, []);
-
-  return (
-    <box style={{ flexDirection: 'row', paddingLeft: 1, paddingRight: 1 }}>
-      <text>
-        <span fg={colors.primary} attributes={TextAttributes.BOLD}>⚡ Apex</span>
-        <span fg={colors.dim}>{'  '}</span>
-        <span fg={modeColors[mode] || colors.dim}>[{mode}]</span>
-        <span fg={colors.dim}>{'  '}</span>
-        <span fg={colors.muted}>{isNarrow && cwd.length > 12 ? cwd.slice(0, 12) + '…' : cwd}</span>
-        {branch && !isNarrow ? (
-          <>
-            <span fg={colors.dim}>{'  on '}</span>
-            <span fg={colors.text}>{branch}</span>
-          </>
-        ) : null}
-      </text>
-    </box>
-  );
-}

package/src/components/HelpModal.jsx

@@ -1,81 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { useKeyboard } from '@opentui/react';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-const COMMANDS = [
-  { cmd: '/help', desc: 'Show this menu' },
-  { cmd: '/mode', desc: 'Show/set mode (default, max, lite)' },
-  { cmd: '/compact', desc: 'Compact conversation context' },
-  { cmd: '/files', desc: 'Show project file tree' },
-  { cmd: '/clear', desc: 'Clear conversation' },
-  { cmd: '/cost', desc: 'Show session stats' },
-  { cmd: '/undo', desc: 'Undo last edit' },
-  { cmd: '/diff', desc: 'Show git diff' },
-  { cmd: '/git <cmd>', desc: 'Run a git command' },
-  { cmd: '/quit', desc: 'Exit' },
-];
-
-const TOOLS = [
-  'Read', 'Write', 'Edit', 'Patch', 'Bash', 'Grep', 'Glob', 'ListDir', 'UndoEdit', 'Task', 'CodeReview',
-];
-
-const SUBAGENTS = [
-  'FilePickerMax', 'Thinker', 'ThinkerBestOfN*', 'EditorMultiPrompt*', 'CodeReviewMulti*', 'Commander', 'ContextPruner',
-];
-
-export default function HelpModal({ onClose, onCommand }) {
-  const { isNarrow } = useLayout();
-
-  useKeyboard((key) => {
-    if (key.name === 'escape' || key.name === 'q') {
-      onClose();
-    }
-  });
-
-  return (
-    <box
-      zIndex={100}
-      border
-      borderColor={colors.primary}
-      backgroundColor="#0d0d1a"
-      title=" Help "
-      titleAlignment="center"
-      style={{
-        position: 'absolute',
-        top: 2,
-        left: isNarrow ? 1 : 4,
-        bottom: 2,
-        right: isNarrow ? 1 : 4,
-        padding: 1,
-        flexDirection: 'column',
-      }}
-    >
-      <text fg={colors.white} attributes={TextAttributes.BOLD} content="Commands" />
-      <box style={{ flexDirection: 'column', marginTop: 0 }}>
-        {COMMANDS.map(({ cmd, desc }) => (
-          <box
-            key={cmd}
-            style={{ flexDirection: 'row' }}
-            onMouseDown={() => {
-              const slashCmd = cmd.split(' ')[0];
-              if (onCommand && !cmd.includes('<')) onCommand(slashCmd);
-              onClose();
-            }}
-          >
-            <text>
-              <span fg={colors.accent}>{cmd.padEnd(isNarrow ? 10 : 14)}</span>
-              <span fg={colors.text}>{desc}</span>
-            </text>
-          </box>
-        ))}
-      </box>
-      <text fg={colors.white} attributes={TextAttributes.BOLD} style={{ marginTop: 1 }} content="Tools" />
-      <text fg={colors.dim} content={TOOLS.join(', ')} />
-      <text fg={colors.white} attributes={TextAttributes.BOLD} style={{ marginTop: 1 }} content="Sub-Agents" />
-      <text fg={colors.dim} content={SUBAGENTS.join(', ')} />
-      <text fg={colors.dim} content="  * = MAX mode only" />
-      <text fg={colors.dim} style={{ marginTop: 1 }} content="Press ESC or q to close" />
-    </box>
-  );
-}

package/src/components/InputBar.jsx

@@ -1,32 +0,0 @@
-import { useRef } from 'react';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-export default function InputBar({ disabled, onSubmit }) {
-  const inputRef = useRef(null);
-  const { isNarrow } = useLayout();
-
-  const handleSubmit = (value) => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    if (inputRef.current) inputRef.current.value = '';
-    onSubmit(trimmed);
-  };
-
-  return (
-    <box style={{ flexDirection: 'column' }}>
-      <text fg={colors.dim} style={{ paddingLeft: isNarrow ? 1 : 2 }} content={isNarrow ? '^C exit · /help' : 'Ctrl+C to exit · /help for commands'} />
-      <box style={{ flexDirection: 'row', paddingLeft: 1 }}>
-        <text fg={colors.primary} content="❯ " />
-        <input
-          ref={inputRef}
-          focused={!disabled}
-          placeholder={disabled ? 'Processing...' : 'Type a message...'}
-          onSubmit={handleSubmit}
-          fg={colors.text}
-          style={{ flexGrow: 1 }}
-        />
-      </box>
-    </box>
-  );
-}

package/src/components/Spinner.jsx

@@ -1,23 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { colors } from '../theme.js';
-
-const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-
-export default function Spinner({ label }) {
-  const [frame, setFrame] = useState(0);
-  const timerRef = useRef(null);
-
-  useEffect(() => {
-    timerRef.current = setInterval(() => {
-      setFrame(f => (f + 1) % FRAMES.length);
-    }, 80);
-    return () => clearInterval(timerRef.current);
-  }, []);
-
-  return (
-    <text>
-      <span fg={colors.accent}>{FRAMES[frame]}</span>
-      {label ? <span fg={colors.dim}>{' ' + label}</span> : null}
-    </text>
-  );
-}

package/src/components/StatusBar.jsx

@@ -1,44 +0,0 @@
-import { colors } from '../theme.js';
-import { session } from '../config.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-export default function StatusBar({ isProcessing }) {
-  const { isNarrow } = useLayout();
-  const elapsed = ((Date.now() - session.startTime) / 1000 / 60).toFixed(1);
-
-  return (
-    <box style={{ flexDirection: 'row', paddingLeft: isNarrow ? 1 : 2, paddingRight: isNarrow ? 1 : 2 }}>
-      <text>
-        <span fg={colors.dim}>{elapsed}min</span>
-        <span fg={colors.dim}>{' · '}</span>
-        <span fg={colors.dim}>{session.turnCount} turns</span>
-        {!isNarrow ? (
-          <>
-            <span fg={colors.dim}>{' · '}</span>
-            <span fg={colors.dim}>{session.toolCallCount} tools</span>
-          </>
-        ) : null}
-        {!isNarrow ? (
-          <>
-            <span fg={colors.dim}>{' · '}</span>
-            <span fg={colors.dim}>{session.totalTokens.toLocaleString()} tok</span>
-          </>
-        ) : null}
-        <span fg={colors.dim}>{' · '}</span>
-        <span fg={colors.dim}>{'$' + session.totalCost.toFixed(4)}</span>
-        {session.filesModified.size > 0 && !isNarrow ? (
-          <>
-            <span fg={colors.dim}>{' · '}</span>
-            <span fg={colors.yellow}>{session.filesModified.size} files modified</span>
-          </>
-        ) : null}
-        {isProcessing ? (
-          <>
-            <span fg={colors.dim}>{' · '}</span>
-            <span fg={colors.accent}>{isNarrow ? '...' : 'processing'}</span>
-          </>
-        ) : null}
-      </text>
-    </box>
-  );
-}

package/src/components/SystemMessage.jsx

@@ -1,31 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-import { toggleMessageExpanded } from '../store.js';
-
-export default function SystemMessage({ message }) {
-  const { isNarrow, smallIndent } = useLayout();
-  const { id, content = '', label, expanded } = message;
-  if (!content) return null;
-  const lines = content.split('\n');
-  const maxPreview = isNarrow ? 3 : 6;
-  const displayLines = expanded ? lines : lines.slice(0, maxPreview);
-  const isTruncated = !expanded && lines.length > maxPreview;
-
-  return (
-    <box
-      style={{ flexDirection: 'column', paddingLeft: smallIndent, marginTop: 1 }}
-      onMouseDown={() => toggleMessageExpanded(id)}
-    >
-      {label ? (
-        <text fg={colors.accent} attributes={TextAttributes.BOLD} content={label} />
-      ) : null}
-      {displayLines.map((line, i) => (
-        <text key={i} fg={colors.muted} content={line} />
-      ))}
-      {isTruncated ? (
-        <text fg={colors.dim} content={isNarrow ? `+${lines.length - maxPreview} more (tap)` : `... +${lines.length - maxPreview} more lines (click to expand)`} />
-      ) : null}
-    </box>
-  );
-}

package/src/components/ThinkBlock.jsx

@@ -1,29 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-
-export default function ThinkBlock({ content, expanded, onToggle }) {
-  const { isNarrow, smallIndent } = useLayout();
-  if (!content) return null;
-  const lines = content.split('\n');
-  const maxPreview = isNarrow ? 2 : 4;
-  const displayLines = expanded ? lines : lines.slice(0, maxPreview);
-  const isTruncated = !expanded && lines.length > maxPreview;
-
-  return (
-    <box
-      style={{ flexDirection: 'column', paddingLeft: smallIndent, marginTop: 0 }}
-      onMouseDown={onToggle}
-    >
-      <text fg={colors.dim} attributes={TextAttributes.ITALIC} content="▸ Thinking" />
-      {displayLines.map((line, i) => (
-        line.trim() ? (
-          <text key={i} fg={colors.dim} attributes={TextAttributes.ITALIC} style={{ paddingLeft: smallIndent }} content={line} />
-        ) : null
-      ))}
-      {isTruncated ? (
-        <text fg={colors.dim} attributes={TextAttributes.ITALIC} style={{ paddingLeft: smallIndent }} content={isNarrow ? `+${lines.length - maxPreview} more (tap)` : `... +${lines.length - maxPreview} more lines (click to expand)`} />
-      ) : null}
-    </box>
-  );
-}

package/src/components/ToolCallItem.jsx

@@ -1,43 +0,0 @@
-import { colors } from '../theme.js';
-import { useLayout } from '../hooks/useLayout.js';
-import { toggleMessageExpanded } from '../store.js';
-import Spinner from './Spinner.jsx';
-
-function formatElapsed(ms) {
-  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
-}
-
-function truncate(str, len) {
-  return str.length > len ? str.slice(0, len - 3) + '...' : str;
-}
-
-export default function ToolCallItem({ message }) {
-  const { indent, isNarrow } = useLayout();
-  const truncLen = isNarrow ? 30 : 50;
-  const { id, name, detail, status, success, elapsed, output, expanded } = message;
-  const isRunning = status === 'running' || status === 'pending';
-
-  return (
-    <box style={{ flexDirection: 'column', paddingLeft: indent }} onMouseDown={() => toggleMessageExpanded(id)}>
-      <box style={{ flexDirection: 'row' }}>
-        {isRunning ? (
-          <Spinner label={`[${name}] ${truncate(detail || '...', truncLen)}`} />
-        ) : (
-          <text>
-            <span fg={success ? colors.green : colors.red}>{success ? '✓' : '✗'}</span>
-            <span fg={colors.dim}>{' ['}</span>
-            <span fg={colors.accent}>{name}</span>
-            <span fg={colors.dim}>{'] '}</span>
-            <span fg={colors.dim}>{truncate(detail || '', truncLen)}</span>
-            {elapsed != null ? <span fg={colors.dim}>{'  ' + formatElapsed(elapsed)}</span> : null}
-          </text>
-        )}
-      </box>
-      {expanded && output ? (
-        <box style={{ paddingLeft: indent, marginTop: 0 }}>
-          <text fg={colors.dim} content={truncate(output, 500)} wrapMode="char" />
-        </box>
-      ) : null}
-    </box>
-  );
-}