apex-dev 2.0.0 → 3.0.0

package/src/app.jsx

@@ -0,0 +1,96 @@
+import { useCallback } from 'react';
+import { useKeyboard } from '@opentui/react';
+import { useStore } from './hooks/useStore.js';
+import { setState, addMessage, clearMessages, getRenderer } from './store.js';
+import { session } from './config.js';
+import { handleUserInput } from './agent.js';
+import { handleSlashCommand } from './commands.js';
+import Header from './components/Header.jsx';
+import Divider from './components/Divider.jsx';
+import ChatArea from './components/ChatArea.jsx';
+import InputBar from './components/InputBar.jsx';
+import StatusBar from './components/StatusBar.jsx';
+import HelpModal from './components/HelpModal.jsx';
+
+function exitApp() {
+  const renderer = getRenderer();
+  if (renderer) renderer.destroy();
+
+  const elapsed = ((Date.now() - session.startTime) / 1000 / 60).toFixed(1);
+  const parts = [
+    `${elapsed} min`,
+    `${session.turnCount} turns`,
+    `${session.toolCallCount} tool calls`,
+    `${session.totalTokens.toLocaleString()} tokens`,
+    `$${session.totalCost.toFixed(4)}`,
+  ];
+  if (session.filesModified.size > 0) parts.push(`${session.filesModified.size} files modified`);
+  if (session.commandsRun.length > 0) parts.push(`${session.commandsRun.length} commands`);
+
+  console.log(`\n  Session: ${parts.join(' · ')}\n`);
+  console.log('  Goodbye! ✦\n');
+  process.exit(0);
+}
+
+export default function App() {
+  const state = useStore();
+
+  useKeyboard((key) => {
+    if (key.ctrl && key.name === 'c') {
+      exitApp();
+    }
+  });
+
+  const handleInput = useCallback(async (value) => {
+    if (value === 'exit' || value === 'quit') {
+      exitApp();
+      return;
+    }
+
+    if (value.startsWith('/')) {
+      const result = await handleSlashCommand(value);
+      if (result?.action === 'quit') {
+        exitApp();
+      }
+      return;
+    }
+
+    handleUserInput(value).catch(err => {
+      addMessage({ role: 'system', content: `Error: ${err.message}` });
+      setState({ isProcessing: false });
+    });
+  }, []);
+
+  const handleHelpCommand = useCallback((cmd) => {
+    if (cmd) {
+      handleSlashCommand(cmd).then(result => {
+        if (result?.action === 'quit') exitApp();
+      });
+    }
+  }, []);
+
+  return (
+    <box style={{ flexDirection: 'column', flexGrow: 1 }}>
+      <Header />
+      <Divider />
+      <ChatArea
+        messages={state.messages}
+        streamingContent={state.streamingContent}
+        streamingThinking={state.streamingThinking}
+        isProcessing={state.isProcessing}
+      />
+      <Divider />
+      <StatusBar isProcessing={state.isProcessing} />
+      <InputBar
+        disabled={state.isProcessing || state.showHelp}
+        onSubmit={handleInput}
+      />
+      {state.showHelp ? (
+        <HelpModal
+          onClose={() => setState({ showHelp: false })}
+          onCommand={handleHelpCommand}
+        />
+      ) : null}
+    </box>
+  );
+}

package/src/commands.js

@@ -3,103 +3,131 @@
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
-const { PROJECT_ROOT, session, resolvePath } = require('./config');
-const { t, indent, showHeader, showSessionSummary, showHelpMenu } = require('./ui');
+const { PROJECT_ROOT, session, resolvePath, getMode, setMode } = require('./config');
 const { executeTool } = require('./toolExecutors');
+const store = require('./store');
 
-async function handleSlashCommand(input, rl) {
+async function handleSlashCommand(input) {
   const [cmd, ...rest] = input.split(' ');
   const arg = rest.join(' ');
 
   switch (cmd) {
     case '/help':
-      showHelpMenu();
+      store.setState({ showHelp: true });
       break;
 
     case '/clear':
       session.conversationHistory = [];
-      showHeader();
-      console.log(indent(t.green('✓ ') + t.muted('Conversation cleared.')));
-      console.log();
+      store.clearMessages();
+      store.addMessage({ role: 'system', content: 'Conversation cleared.' });
       break;
 
     case '/files':
     case '/ls': {
       const dirPath = arg ? resolvePath(arg) : PROJECT_ROOT;
-      console.log();
-      console.log(indent(t.text.bold('Project Files')));
-      console.log();
+      store.addMessage({ role: 'system', content: 'Loading file tree...', label: 'Project Files' });
       const result = await executeTool('ListDir', { path: dirPath, recursive: true });
-      console.log(indent(t.dim(result), 4));
-      console.log();
+      store.addMessage({ role: 'system', content: result, label: 'Project Files' });
       break;
     }
 
     case '/cost':
     case '/status': {
       const elapsed = ((Date.now() - session.startTime) / 1000 / 60).toFixed(1);
-      console.log();
-      console.log(indent(`  ${t.dim('Session')} ${t.text(elapsed + ' min')}  ${t.dim('Turns')} ${t.text(String(session.turnCount))}  ${t.dim('Tools')} ${t.text(String(session.toolCallCount))}  ${t.dim('Tokens')} ${t.text(session.totalTokens.toLocaleString())}  ${t.dim('Cost')} ${t.text('$' + session.totalCost.toFixed(4))}`));
-      console.log();
+      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) {
-        console.log(indent(t.yellow('No edits to undo.')));
+        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();
-        console.log(indent(t.green('✓ ') + t.muted(`Undone last edit to ${path.basename(last.path)}`)));
+        store.addMessage({ role: 'system', content: `Undone last edit to ${path.basename(last.path)}` });
       }
-      console.log();
       break;
     }
 
     case '/diff': {
       try {
         const diff = execSync('git diff --stat 2>/dev/null', { encoding: 'utf-8', cwd: PROJECT_ROOT });
-        console.log();
-        console.log(indent(t.text.bold('Git Diff')));
-        console.log(indent(t.dim(diff || '(no changes)'), 4));
-        console.log();
+        store.addMessage({ role: 'system', content: diff || '(no changes)', label: 'Git Diff' });
       } catch {
-        console.log(indent(t.yellow('Not a git repository.')));
-        console.log();
+        store.addMessage({ role: 'system', content: 'Not a git repository.' });
       }
       break;
     }
 
     case '/git': {
       if (!arg) {
-        console.log(indent(t.yellow('Usage: /git <command>')));
-        console.log();
+        store.addMessage({ role: 'system', content: 'Usage: /git <command>' });
         break;
       }
       try {
         const output = execSync(`git ${arg}`, { encoding: 'utf-8', cwd: PROJECT_ROOT });
-        console.log();
-        console.log(indent(t.dim(output), 4));
-        console.log();
+        store.addMessage({ role: 'system', content: output || '(no output)', label: `git ${arg}` });
       } catch (err) {
-        console.log(indent(t.red(err.stderr || err.message)));
-        console.log();
+        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':
-      console.log();
-      showSessionSummary();
-      console.log(indent(t.dim('Goodbye! ') + t.primary('✦')));
-      console.log();
-      process.exit(0);
+      return { action: 'quit' };
 
     default:
-      console.log(indent(t.yellow(`Unknown command: ${cmd}. Type /help for available commands.`)));
-      console.log();
+      store.addMessage({ role: 'system', content: `Unknown command: ${cmd}. Type /help for available commands.` });
   }
+
+  return null;
 }
 
 module.exports = { handleSlashCommand };

package/src/components/AssistantMessage.jsx

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,23 @@
+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>
+  );
+}