openaxies 0.7.0 → 1.0.1

package/openaxies-debug.log

@@ -0,0 +1,6 @@
+The above error occurred in the <AppRoot> component:
+
+    at AppRoot (file:///storage/emulated/0/agent-open/openaxis/src/App.js:60:22)
+    at App (file:///storage/emulated/0/agent-open/openaxis/node_modules/ink/build/components/App.js:17:16)
+
+React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openaxies",
-  "version": "0.7.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "bin": {

package/src/App.js

@@ -1,471 +1,194 @@
 import React from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
+import { Box, Text, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
 import { hex } from './config/theme.js';
 import { getModels, getModelById, DEFAULT_MODEL_ID } from './config/models.js';
 import { callModel } from './providers/index.js';
-import { createHeaderBar, HEADER_HEIGHT } from './components/BrandHeader.js';
-import TextInput from 'ink-text-input';
+import { Typography } from './components/ui/Typography.js';
+import { Separator } from './components/ui/Separator.js';
+import { ActivityItem } from './components/timeline/ActivityItem.js';
 
 const h = React.createElement;
-export default AppRoot;
 
 const STARTUP_LOGO = [
   '  \u2588\u2588\u2588\u2588\u2588\u2588\u2557',
-  ' \u2588\u2588\u2594\u2594\u2594\u2594\u2588\u2588\u2557',
-  ' \u2588\u2588\u2591   \u2588\u2588\u2591',
-  ' \u2588\u2588\u2591   \u2588\u2588\u2591',
-  ' \u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2594\u259d',
+  ' \u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557',
+  ' \u2588\u2588\u2551   \u2588\u2588\u2551',
+  ' \u2588\u2588\u2551   \u2588\u2588\u2551',
+  ' \u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d',
 ];
 
-function buildHistory(messages, newText) {
-  const h = [];
-  for (let i = 0; i < messages.length; i++) {
-    const m = messages[i];
-    if (m === null || m === undefined || typeof m !== 'object') continue;
-    if (m.role === 'user' || m.role === 'assistant') {
-      const c = typeof m.content === 'string' ? m.content : '';
-      h.push({ role: m.role, content: c });
-    }
-  }
-  if (typeof newText === 'string' && newText.length > 0) {
-    h.push({ role: 'user', content: newText });
-  }
-  return h;
-}
-
-function fmtTime(s) {
-  if (typeof s !== 'number' || s < 0) return '0.0s';
-  return s.toFixed(1) + 's';
-}
-
-function hr(cols) {
-  const n = typeof cols === 'number' && cols > 0 ? cols : 80;
-  let s = '';
-  for (let i = 0; i < n; i++) s = s + '\u2500';
-  return h(Text, { color: '#1A1A28' }, s);
-}
-
-const SPINNER = ['\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF', '\u25D5', '\u25D0', '\u25D4', '\u25D1', '\u25D2', '\u25D3'];
-
-const COMMANDS = [
-  { id: 'model', trigger: '/model', desc: 'Switch model' },
-  { id: 'thoughts', trigger: '/thoughts', desc: 'Toggle thinking visibility' },
-  { id: 'resume', trigger: '/resume', desc: 'Re-run last query' },
-  { id: 'clear', trigger: '/clear', desc: 'Clear conversation' },
-  { id: 'help', trigger: '/help', desc: 'Show commands' },
-  { id: 'exit', trigger: '/exit', desc: 'Quit' },
-];
-
-function AppRoot() {
+export default function AppRoot() {
   const { stdout } = useStdout();
   const rows = stdout.rows || 24;
   const cols = stdout.columns || 80;
 
   const [messages, setMessages] = React.useState([]);
   const [activeModel, setActiveModel] = React.useState(DEFAULT_MODEL_ID);
-  const [streamText, setStreamText] = React.useState('');
+  const [inputBuffer, setInputBuffer] = React.useState('');
   const [streamingActive, setStreamingActive] = React.useState(false);
-  const [isThinking, setIsThinking] = React.useState(false);
-  const [spinnerIdx, setSpinnerIdx] = React.useState(0);
+  const [streamContent, setStreamContent] = React.useState('');
+  const [thoughtContent, setThoughtContent] = React.useState('');
   const [thinkingElapsed, setThinkingElapsed] = React.useState(0);
-  const [inputBuffer, setInputBuffer] = React.useState('');
-  const [showOverlay, setShowOverlay] = React.useState(false);
-  const [overlayIndex, setOverlayIndex] = React.useState(0);
-  const [toolInfo, setToolInfo] = React.useState(null);
-  const [showThoughts, setShowThoughts] = React.useState(true);
+  const [isThinking, setIsThinking] = React.useState(false);
   const [startupDone, setStartupDone] = React.useState(false);
 
-  const SEP_H = 1;
-  const FIXED_H = startupDone ? (HEADER_HEIGHT + SEP_H + 1 + 1) : 0;
-  const DOCK_H = 1;
-  const STATUS_H = 1;
-  const totalFixed = startupDone ? (HEADER_HEIGHT + SEP_H + DOCK_H + STATUS_H) : 11;
-  const availLines = Math.max(10, rows - totalFixed);
-
-  const abortRef = React.useRef(null);
-  const connRef = React.useRef(null);
-  const spinnerRef = React.useRef(null);
-  const timerRef = React.useRef(null);
-  const thinkStartRef = React.useRef(null);
-  const lastQueryRef = React.useRef('');
+  const abortControllerRef = React.useRef(null);
 
-  React.useEffect(function () {
-    if (isThinking === false) return;
-    let idx = 0;
-    const si = setInterval(function () { idx = (idx + 1) % SPINNER.length; setSpinnerIdx(idx); }, 120);
-    const ti = setInterval(function () {
-      if (thinkStartRef.current !== null) setThinkingElapsed((Date.now() - thinkStartRef.current) / 1000);
-    }, 100);
-    spinnerRef.current = si;
-    timerRef.current = ti;
-    return function () { clearInterval(si); clearInterval(ti); };
+  React.useEffect(() => {
+    let timer;
+    if (isThinking) {
+      timer = setInterval(() => {
+        setThinkingElapsed(prev => prev + 0.1);
+      }, 100);
+    }
+    return () => clearInterval(timer);
   }, [isThinking]);
 
-  function cycleModel() {
-    const models = getModels();
-    setActiveModel(function (prev) {
-      let found = false;
-      for (let i = 0; i < models.length; i++) {
-        if (found) return models[i].id;
-        if (models[i].id === prev) found = true;
-      }
-      return models[0].id;
-    });
-  }
-
-  function checkThink(text) {
-    const o = text.lastIndexOf('<think>');
-    const c = text.lastIndexOf('</think>');
-    if (o === -1 && c === -1) return false;
-    return o > c;
-  }
-
-  function filterText(t) {
-    if (showThoughts === true) return t;
-    return t.split('<think>').join('').split('</think>').join('');
-  }
+  const model = getModelById(activeModel);
+  const modelLabel = model ? model.label : 'Unknown Model';
 
   async function handleSubmit(text) {
-    const safe = typeof text === 'string' ? text : '';
-    if (safe.length === 0 || streamingActive === true) return;
-    if (startupDone === false) setStartupDone(true);
-    lastQueryRef.current = safe;
+    if (!text || streamingActive) return;
+    setStartupDone(true);
+    
+    const userMsg = { type: 'user', content: text };
+    setMessages(prev => [...prev, userMsg]);
+    setInputBuffer('');
     setStreamingActive(true);
-    setToolInfo(null);
-    setStreamText(' connecting');
+    setStreamContent('');
+    setThoughtContent('');
     setThinkingElapsed(0);
-    connRef.current = setInterval(function () {
-      setStreamText(function (p) {
-        if (p === ' connecting') return ' connecting.';
-        if (p === ' connecting.') return ' connecting..';
-        if (p === ' connecting..') return ' connecting...';
-        return ' connecting';
-      });
-    }, 400);
-    setMessages(function (p) { return p.concat([{ role: 'user', content: safe, id: 'u-' + Date.now() }]); });
-    setInputBuffer('');
-    const modelInfo = getModelById(activeModel);
-    if (modelInfo === null) {
-      if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
-      setStreamingActive(false); setStreamText('');
-      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'No model selected.', id: 'e-' + Date.now() }]); });
-      return;
-    }
-    const history = buildHistory(messages, safe);
-    const abortController = new AbortController();
-    abortRef.current = abortController;
+
+    abortControllerRef.current = new AbortController();
+    
     try {
-      const gen = callModel(modelInfo, history, abortController.signal);
-      let accumulated = '';
-      let firstEvent = true;
-      let thinkStarted = false;
-      for await (const event of gen) {
-        if (abortController.signal.aborted === true) break;
-        if (firstEvent === true) { firstEvent = false; if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null; }
-        if (event.type === 'tool') { setToolInfo({ tool: event.tool, used: event.used, sites: event.sites, query: event.query }); continue; }
-        if (event.type === 'thinking' || event.type === 'token') {
-          const c = typeof event.content === 'string' ? event.content : '';
-          accumulated = accumulated + c;
-          const inside = checkThink(accumulated);
-          setStreamText(accumulated);
-          setIsThinking(inside);
-          if (inside === true && thinkStarted === false) { thinkStarted = true; thinkStartRef.current = Date.now(); setThinkingElapsed(0); }
-          if (inside === false && thinkStarted === true) { thinkStarted = false; thinkStartRef.current = null; setThinkingElapsed(0); }
-        }
-        if (event.type === 'done') break;
-        if (event.type === 'timeout') {
-          if (accumulated.length > 0) accumulated = accumulated + '\n\n\u2014 stream timed out \u2014';
-          setStreamText(accumulated); break;
+      const history = messages.map(m => ({
+        role: m.type === 'user' ? 'user' : 'assistant',
+        content: m.content
+      }));
+      history.push({ role: 'user', content: text });
+
+      const stream = callModel({ id: activeModel }, history, abortControllerRef.current.signal);
+      
+      for await (const event of stream) {
+        if (event.type === 'tool') {
+          setMessages(prev => [...prev, { type: 'tool', tool: event.tool, query: event.query }]);
+        } else if (event.type === 'token') {
+          const content = event.content;
+          if (content.includes('<think>')) {
+            setIsThinking(true);
+            setThoughtContent(prev => prev + content.replace('<think>', ''));
+          } else if (content.includes('</think>')) {
+            setIsThinking(false);
+            const finalThought = thoughtContent + content.replace('</think>', '');
+            setMessages(prev => [...prev, { type: 'thought', content: finalThought, elapsed: thinkingElapsed.toFixed(1) + 's' }]);
+            setThoughtContent('');
+          } else if (isThinking) {
+            setThoughtContent(prev => prev + content);
+          } else {
+            setStreamContent(prev => prev + content);
+          }
         }
       }
-      if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
-      setIsThinking(false); thinkStartRef.current = null; setThinkingElapsed(0); setStreamingActive(false);
-      setStreamText('');
-      if (accumulated.length > 0) {
-        setMessages(function (p) { return p.concat([{ role: 'assistant', content: accumulated, id: 'a-' + Date.now() }]); });
-      }
-    } catch (err) {
-      if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
-      setIsThinking(false); thinkStartRef.current = null; setThinkingElapsed(0); setStreamingActive(false); setStreamText('');
-      const errMsg = err !== null && err !== undefined ? (err.message || String(err)) : 'Unknown error';
-      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'Error: ' + errMsg, id: 'er-' + Date.now() }]); });
-    }
-  }
-
-  function handleChange(v) {
-    setInputBuffer(v);
-    if (v.length === 1 && v[0] === '/') { setShowOverlay(true); setOverlayIndex(0); }
-    if (showOverlay === true && (v.length === 0 || v[0] !== '/')) { setShowOverlay(false); }
-  }
-
-  function handleCmd(item) {
-    if (item === null || item === undefined) return;
-    const t = item.trigger;
-    if (typeof t !== 'string') return;
-    if (t === '/exit') process.exit(0);
-    if (t === '/clear') { setMessages([]); }
-    if (t === '/model') cycleModel();
-    if (t === '/thoughts') { setShowThoughts(function (p) { return !p; }); }
-    if (t === '/resume') {
-      const q = lastQueryRef.current;
-      if (q.length > 0 && streamingActive === false) handleSubmit(q);
-    }
-    if (t === '/help') { setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'Commands: /help /clear /model /thoughts /resume /exit', id: 'h-' + Date.now() }]); }); }
-    setInputBuffer(''); setShowOverlay(false); setOverlayIndex(0);
-  }
-
-  useInput(function handleInput(input, key) {
-    if (showOverlay === true) {
-      if (key.escape === true) { setShowOverlay(false); setInputBuffer(''); setOverlayIndex(0); return; }
-      if (key.upArrow === true) { setOverlayIndex(function (p) { return p > 0 ? p - 1 : COMMANDS.length - 1; }); return; }
-      if (key.downArrow === true) { setOverlayIndex(function (p) { return p < COMMANDS.length - 1 ? p + 1 : 0; }); return; }
-      if (key.return === true) { const cmd = COMMANDS[overlayIndex]; if (cmd !== null && cmd !== undefined) handleCmd(cmd); return; }
-      return;
-    }
-    if (key.escape === true) {
-      if (streamingActive === true) {
-        if (abortRef.current !== null) { try { abortRef.current.abort(); } catch (_) {} abortRef.current = null; }
-        setStreamingActive(false); setStreamText(''); setIsThinking(false);
-      }
-      return;
-    }
-    if (key.return === true) {
-      const s = typeof inputBuffer === 'string' ? inputBuffer : '';
-      if (s.length > 0 && streamingActive === false) handleSubmit(s);
-      return;
-    }
-    if (key.ctrl === true) {
-      if (input === 'c' || input === 'C') {
-        if (abortRef.current !== null) { try { abortRef.current.abort(); } catch (_) {} abortRef.current = null; }
-        setStreamingActive(false); setStreamText(''); setIsThinking(false);
-        process.exit(0);
-      }
-      if (input === 't' || input === 'T') { setShowThoughts(function (p) { return !p; }); return; }
-      if (input === 'p' || input === 'P') { cycleModel(); return; }
-      if (input === 'r' || input === 'R') {
-        const q = lastQueryRef.current;
-        if (q.length > 0 && streamingActive === false) handleSubmit(q);
-        return;
+    } catch (e) {
+      setMessages(prev => [...prev, { type: 'assistant', content: 'Error connecting to model.' }]);
+    } finally {
+      setStreamingActive(false);
+      setIsThinking(false);
+      if (streamContent) {
+        setMessages(prev => [...prev, { type: 'assistant', content: streamContent }]);
       }
-      if (input === 'l' || input === 'L') { setMessages([]); return; }
-      if (input === 'k' || input === 'K') { setInputBuffer('/'); setShowOverlay(true); setOverlayIndex(0); return; }
-    }
-  });
-
-  const modelInfo = getModelById(activeModel);
-  const modelLabel = modelInfo !== null ? modelInfo.label : 'OpenAxies Llama';
-
-  // Build viewport sections
-  const sections = [];
-
-  // Overlay items
-  if (showOverlay === true) {
-    sections.push({ t: 'sep' });
-    sections.push({ t: 'overlay_header' });
-    for (let i = 0; i < COMMANDS.length; i++) {
-      const c = COMMANDS[i];
-      sections.push({ t: 'cmd', trigger: c.trigger, desc: c.desc, sel: i === overlayIndex });
-    }
-    sections.push({ t: 'sep' });
-  }
-
-  // Messages
-  for (let i = 0; i < messages.length; i++) {
-    const msg = messages[i];
-    if (msg === null || typeof msg !== 'object') continue;
-    const content = typeof msg.content === 'string' ? msg.content : '';
-    if (content.length === 0) continue;
-    if (msg.role === 'user') {
-      sections.push({ t: 'sep' });
-      sections.push({ t: 'user', text: content });
-    } else {
-      if (sections.length > 0 && sections[sections.length - 1].t !== 'sep') sections.push({ t: 'sep' });
-      sections.push({ t: 'assistant', text: filterText(content) });
     }
   }
 
-  // Streaming
-  if (typeof streamText === 'string' && streamText.length > 0) {
-    const clean = filterText(streamText);
-    if (toolInfo !== null && toolInfo.used === true && toolInfo.query.length > 0) {
-      sections.push({ t: 'tool', tool: toolInfo.tool, query: toolInfo.query, sites: toolInfo.sites });
+  const renderHeader = () => {
+    return h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
+      h(Typography.Header, 'OpenAxies'),
+      h(Typography.Muted, ` \u2022 ${modelLabel}`),
+      h(Box, { flexGrow: 1 }),
+      h(Typography.Dim, 'local')
+    );
+  };
+
+  const renderFooter = () => {
+    return h(Box, { 
+      height: 1, 
+      paddingLeft: 1, 
+      paddingRight: 1, 
+      flexDirection: 'row', 
+      alignItems: 'center' 
+    },
+      h(Typography.Dim, 'esc interrupt \u2022 ctrl+t thoughts \u2022 ctrl+p models \u2022 ctrl+k commands'),
+      h(Box, { flexGrow: 1 }),
+      h(Typography.Muted, `${modelLabel.toLowerCase()} \u2022 local`)
+    );
+  };
+
+  const renderStartup = () => {
+    return h(Box, { 
+      flexDirection: 'column', 
+      paddingLeft: 1, 
+      paddingTop: 2,
+      backgroundColor: '#000000'
+    },
+      ...STARTUP_LOGO.map(line => h(Typography.Accent, line)),
+      h(Box, { height: 1 }),
+      h(Typography.Header, 'OpenAxies'),
+      h(Typography.Muted, 'local ai agent runtime'),
+      h(Box, { height: 2 }),
+      h(Typography.Dim, 'Press Enter to begin')
+    );
+  };
+
+  const renderTimeline = () => {
+    const events = [...messages];
+    if (isThinking) {
+      events.push({ type: 'thought', content: thoughtContent, elapsed: thinkingElapsed.toFixed(1) + 's' });
     }
-    if (isThinking === true) {
-      sections.push({ t: 'thinking', spin: SPINNER[spinnerIdx], elapsed: fmtTime(thinkingElapsed), content: clean });
-    } else {
-      sections.push({ t: 'stream', text: clean });
+    if (streamingActive && streamContent) {
+      events.push({ type: 'assistant', content: streamContent });
     }
-  }
-
-  // Startup screen
-  if (startupDone === false && messages.length === 0) {
-    sections.push({ t: 'startup' });
-  }
-
-  // Ready state
-  if (sections.length === 0) {
-    sections.push({ t: 'sep' });
-    sections.push({ t: 'ready' });
-    sections.push({ t: 'sep' });
-  }
-
-  // Estimate and limit sections
-  function estLines(s) {
-    if (s.t === 'sep' || s.t === 'assistant' || s.t === 'stream' || s.t === 'tool' || s.t === 'ready' || s.t === 'overlay_header') return 1;
-    if (s.t === 'cmd') return 1;
-    if (s.t === 'user') return 2;
-    if (s.t === 'thinking') return 2;
-    if (s.t === 'startup') return 11;
-    return 1;
-  }
-
-  let totalEst = 0;
-  let lastN = 0;
-  for (let i = sections.length - 1; i >= 0; i--) {
-    const l = estLines(sections[i]);
-    if (totalEst + l > availLines) break;
-    totalEst += l;
-    lastN = sections.length - i;
-  }
-  const visible = sections.slice(sections.length - lastN);
-
-  // Render sections
-  const sectionEls = [];
-  for (let i = 0; i < visible.length; i++) {
-    const s = visible[i];
-    const ki = 's-' + i;
-
-    if (s.t === 'sep') {
-      sectionEls.push(h(Box, { key: ki, height: 1 }, hr(cols)));
-    } else if (s.t === 'user') {
-      sectionEls.push(
-        h(Box, { key: ki + '-h', height: 1, paddingLeft: 1 },
-          h(Text, { color: '#888899', bold: true }, 'You')
-        )
-      );
-      sectionEls.push(
-        h(Box, { key: ki + '-t', height: 1, paddingLeft: 2 },
-          h(Text, { color: hex.neonBlue, wrap: 'wrap' }, s.text)
-        )
-      );
-    } else if (s.t === 'assistant' || s.t === 'stream') {
-      sectionEls.push(
-        h(Box, { key: ki, height: 1, paddingLeft: 1 },
-          h(Text, { color: hex.primary, wrap: 'wrap' }, s.text)
-        )
-      );
-    } else if (s.t === 'thinking') {
-      sectionEls.push(
-        h(Box, { key: ki + '-h', height: 1, paddingLeft: 1 },
-          h(Text, { color: '#FF9F43', bold: true }, s.spin + ' Thinking \u2022 ' + s.elapsed)
-        )
-      );
-      sectionEls.push(
-        h(Box, { key: ki + '-c', height: 1, paddingLeft: 2 },
-          h(Text, { color: '#FF9F43', wrap: 'wrap' }, s.content)
-        )
-      );
-    } else if (s.t === 'tool') {
-      sectionEls.push(
-        h(Box, { key: ki, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#5B5B8A' }, '\u2500\u2500 ' + s.tool + ' \u2014 ' + (s.query || '') + ' (' + (s.sites || 0) + ' sites)')
-        )
-      );
-    } else if (s.t === 'overlay_header') {
-      sectionEls.push(
-        h(Box, { key: ki, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#888899', bold: true }, 'Commands')
-        )
-      );
-    } else if (s.t === 'cmd') {
-      const prefix = s.sel === true ? '\u276F ' : '  ';
-      const col = s.sel === true ? hex.neonBlue : '#666688';
-      sectionEls.push(
-        h(Box, { key: ki, height: 1, paddingLeft: 2 },
-          h(Text, { color: col }, prefix + s.trigger),
-          h(Text, { color: '#444466' }, '  ' + (s.desc || ''))
-        )
-      );
-    } else if (s.t === 'ready') {
-      sectionEls.push(
-        h(Box, { key: ki, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#00FF88', bold: true }, 'Ready')
-        )
-      );
-    } else if (s.t === 'startup') {
-      for (let li = 0; li < STARTUP_LOGO.length; li++) {
-        sectionEls.push(
-          h(Box, { key: ki + '-l' + li, height: 1, paddingLeft: 1 },
-            h(Text, { color: '#00BBFF', bold: true }, STARTUP_LOGO[li])
-          )
-        );
-      }
-      sectionEls.push(h(Box, { key: ki + '-e1', height: 1 }, null));
-      sectionEls.push(
-        h(Box, { key: ki + '-t1', height: 1, paddingLeft: 1 },
-          h(Text, { color: '#FFFFFF', bold: true }, 'OpenAxies')
-        )
-      );
-      sectionEls.push(
-        h(Box, { key: ki + '-t2', height: 1, paddingLeft: 1 },
-          h(Text, { color: '#777788' }, 'local agent runtime')
-        )
-      );
-      sectionEls.push(h(Box, { key: ki + '-e2', height: 1 }, null));
-      sectionEls.push(
-        h(Box, { key: ki + '-t3', height: 1, paddingLeft: 1 },
-          h(Text, { color: '#555577' }, 'Press Enter to begin')
-        )
-      );
-    }
-  }
-
-  // Fill remaining
-  while (sectionEls.length < availLines) {
-    sectionEls.push(h(Box, { key: 'fl-' + sectionEls.length, height: 1 }, h(Text, {}, '')));
-  }
-
-  const viewport = h(Box, {
-    flexGrow: 1,
-    height: availLines,
-    flexDirection: 'column',
-    overflow: 'hidden',
-  }, ...sectionEls);
-
-  // Main layout
-  const headerBar = startupDone === true ? createHeaderBar(modelLabel) : null;
-  const headerSep = startupDone === true ? h(Box, { height: 1 }, hr(cols)) : null;
-
-  // Input line
-  const inputLine = h(Box, { height: DOCK_H, flexShrink: 0, paddingLeft: 2, paddingRight: 2 },
-    h(Text, { color: hex.greenOnline }, '\u258C'),
-    h(Text, { color: '#555577' }, ' Ask OpenAxies'),
-    h(TextInput, {
-      value: inputBuffer,
-      onChange: handleChange,
-      onSubmit: function () {},
-      placeholder: '',
-      focus: showOverlay === false,
-      showCursor: true,
-    })
-  );
-
-  // Shortcuts footer
-  const modelShort = modelLabel.replace('OpenAxies ', '');
-  const footerLine = h(Box, { height: STATUS_H, flexShrink: 0, paddingLeft: 2, paddingRight: 2 },
-    h(Text, { color: '#444466' }, 'esc \u2248 '),
-    h(Text, { color: '#444466' }, 'ctrl+t '),
-    h(Text, { color: '#444466' }, 'ctrl+p '),
-    h(Text, { color: '#444466' }, 'ctrl+k'),
-    h(Box, { flexGrow: 1 }),
-    h(Text, { color: '#555577' }, modelShort.toLowerCase() + ' \u2022 local'),
-  );
 
-  return h(Box, { flexDirection: 'column', width: '100%', height: rows, overflow: 'hidden' },
-    headerBar,
-    headerSep,
-    viewport,
-    inputLine,
-    footerLine,
+    return h(Box, { 
+      flexGrow: 1, 
+      flexDirection: 'column', 
+      overflow: 'hidden',
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+      ...events.slice(-15).map((event, i) => h(ActivityItem, { key: i, event }))
+    );
+  };
+
+  return h(Box, { 
+    flexDirection: 'column', 
+    width: '100%', 
+    height: rows, 
+    overflow: 'hidden' 
+  },
+    !startupDone ? renderStartup() : null,
+    startupDone && renderHeader(),
+    startupDone && h(Separator),
+    startupDone && renderTimeline(),
+    startupDone && h(Box, { height: 1 }, h(Separator)),
+    startupDone && h(Box, { 
+      height: 1, 
+      paddingLeft: 1, 
+      paddingRight: 1, 
+      flexDirection: 'row', 
+      alignItems: 'center' 
+    },
+      h(Typography.Accent, '▌ Ask OpenAxies'),
+      h(Box, { flexGrow: 1 }),
+      h(TextInput, { 
+        value: inputBuffer, 
+        onChange: setInputBuffer, 
+        onSubmit: handleSubmit, 
+        focus: true, 
+        showCursor: true 
+      })
+    ),
+    startupDone && renderFooter()
   );
 }

package/src/components/timeline/ActivityItem.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Typography } from '../ui/Typography.js';
+import { hex } from '../../config/theme.js';
+
+const h = React.createElement;
+
+export function ActivityItem({ event }) {
+  switch (event.type) {
+    case 'user':
+      return h(Box, { flexDirection: 'column', paddingLeft: 1, paddingRight: 1, marginBottom: 1 },
+        h(Typography.Subheader, 'You'),
+        h(Box, { paddingLeft: 1 }, h(Typography.Body, { color: hex.neonBlue }, event.content))
+      );
+    case 'assistant':
+      return h(Box, { flexDirection: 'column', paddingLeft: 1, paddingRight: 1, marginBottom: 1 },
+        h(Typography.Body, event.content)
+      );
+    case 'thought':
+      return h(Box, { 
+        flexDirection: 'column', 
+        paddingLeft: 1, 
+        paddingRight: 1, 
+        marginBottom: 1,
+        backgroundColor: '#12121A' 
+      },
+        h(Box, { flexDirection: 'row', alignItems: 'center' },
+          h(Typography.Thinking, `\u25CB Thinking \u2022 ${event.elapsed || '0.0s'}`)
+        ),
+        h(Box, { paddingLeft: 1 }, h(Typography.Thinking, event.content))
+      );
+    case 'tool':
+      return h(Box, { paddingLeft: 1, paddingRight: 1, marginBottom: 0.5 },
+        h(Typography.Muted, `\u2500\u2500 ${event.tool} ${event.query ? ' \u2014 ' + event.query : ''}`)
+      );
+    case 'todo':
+      const icon = event.status === 'completed' ? '\u2713' : (event.status === 'running' ? '\u25B2' : '\u25CB');
+      const color = event.status === 'completed' ? '#00FF88' : (event.status === 'running' ? hex.neonBlue : '#666688');
+      return h(Box, { paddingLeft: 1, paddingRight: 1 },
+        h(Text, { color }, `${icon} `),
+        h(Typography.Muted, event.text)
+      );
+    default:
+      return null;
+  }
+}

package/src/components/timeline/TodoTracker.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box } from 'ink';
+import { ActivityItem } from './ActivityItem.js';
+
+const h = React.createElement;
+
+export function TodoTracker({ todos }) {
+  if (!todos || todos.length === 0) return null;
+  
+  return h(Box, { 
+    flexDirection: 'column', 
+    paddingLeft: 1, 
+    paddingRight: 1, 
+    marginBottom: 1,
+    borderStyle: 'single',
+    borderColor: '#1A1A28'
+  },
+    ...todos.map((todo, i) => h(ActivityItem, { 
+      key: i, 
+      event: { type: 'todo', text: todo.text, status: todo.status } 
+    }))
+  );
+}

package/src/components/ui/Separator.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+const h = React.createElement;
+
+export function Separator() {
+  return h(Box, { height: 1, width: '100%' }, 
+    h(Text, { color: '#1A1A28' }, '\u2500'.repeat(80))
+  );
+}

package/src/components/ui/Typography.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from 'ink';
+import { hex } from '../../config/theme.js';
+
+const h = React.createElement;
+
+export const Typography = {
+  Header: ({ children }) => h(Text, { color: '#FFFFFF', bold: true }, children),
+  Subheader: ({ children }) => h(Text, { color: '#AAAAAA', bold: true }, children),
+  Body: ({ children, color = '#FFFFFF' }) => h(Text, { color, wrap: 'wrap' }, children),
+  Muted: ({ children }) => h(Text, { color: '#666688' }, children),
+  Dim: ({ children }) => h(Text, { color: '#444466' }, children),
+  Accent: ({ children }) => h(Text, { color: hex.neonBlue, bold: true }, children),
+  Thinking: ({ children }) => h(Text, { color: '#FF9F43' }, children),
+};

package/src/components/BrandHeader.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-
-const h = React.createElement;
-
-export function createHeaderBar(modelLabel) {
-  const label = typeof modelLabel === 'string' && modelLabel.length > 0 ? modelLabel : 'OpenAxies Llama';
-  return h(Box, { height: 1, paddingLeft: 1, paddingTop: 0, paddingBottom: 0 },
-    h(Text, { color: '#00BBFF', bold: true }, 'OpenAxies'),
-    h(Text, { color: '#555577' }, ' \u2022 '),
-    h(Text, { color: '#FFFFFF' }, label),
-    h(Text, { color: '#555577' }, ' \u2022 '),
-    h(Text, { color: '#777788' }, 'local'),
-  );
-}
-
-export const HEADER_HEIGHT = 1;

package/src/components/ComposerDock.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
-import TextInput from 'ink-text-input';
-import { hex } from '../config/theme.js';
-
-const h = React.createElement;
-
-export const DOCK_HEIGHT = 4;
-
-const PROMPT = '> ';
-
-export function createComposerDock(config) {
-  if (config === null || config === undefined || typeof config !== 'object') {
-    throw new Error('createComposerDock requires a config object');
-  }
-
-  const value = typeof config.value === 'string' ? config.value : '';
-  const onChange = config.onChange;
-  const onSubmit = config.onSubmit;
-  const inputActive = config.inputActive !== false;
-  const isStreaming = config.isStreaming === true;
-  const modelLabel = typeof config.modelLabel === 'string' ? config.modelLabel : '';
-  const modelStatus = config.modelStatus === true;
-  const safeCols = typeof config.terminalWidth === 'number' && config.terminalWidth > 0 ? config.terminalWidth : 80;
-
-  const placeholder = isStreaming ? 'Ctrl+C to interrupt...' : 'type a message...';
-  const innerW = safeCols - 2;
-
-  return h(Box, {
-    width: '100%',
-    height: DOCK_HEIGHT,
-    flexDirection: 'column',
-    flexShrink: 0,
-  },
-    h(Box, { height: 1, paddingLeft: 1 },
-      h(Text, { color: '#1A1A28' }, '\u2500'.repeat(innerW))
-    ),
-    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
-      h(Text, { color: hex.border }, '\u2502'),
-      h(Text, { color: inputActive ? hex.neonBlue : '#444466', bold: true }, ' ' + PROMPT),
-      h(Box, { flexGrow: 1, height: 1, overflow: 'hidden' },
-        h(TextInput, {
-          value: value,
-          onChange: onChange,
-          onSubmit: onSubmit,
-          placeholder: placeholder,
-          focus: inputActive,
-          showCursor: true,
-        })
-      ),
-      h(Text, { color: '#444466' }, ' '),
-      h(Text, { color: hex.border }, '\u2502')
-    ),
-    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
-      h(Text, { color: hex.border }, '\u2514'),
-      h(Box, { flexGrow: 1, height: 1, overflow: 'hidden' },
-        h(Text, { color: '#333344' }, '\u2500'.repeat(innerW - 2))
-      ),
-      h(Text, { color: hex.border }, '\u2518')
-    ),
-    h(Box, { height: 1, paddingRight: 1 },
-      h(Box, { flexGrow: 1 }),
-      h(Text, { color: '#444466', bold: modelStatus }, modelLabel || '')
-    )
-  );
-}