openaxies 0.5.0 → 0.5.2

package/package.json

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

package/src/App.js

@@ -4,49 +4,53 @@ import { hex } from './config/theme.js';
 import { getCommands } from './config/commands.js';
 import { getModels, getModelById, DEFAULT_MODEL_ID } from './config/models.js';
 import { callModel } from './providers/index.js';
-import { createModelBar } from './components/ModelBar.js';
-import { createParticleRow } from './components/Particles.js';
 import { createComposerDock, DOCK_HEIGHT } from './components/ComposerDock.js';
 
 const h = React.createElement;
-const BAR_COLOR = '#1A1A2E';
 
 export default AppRoot;
 
+const LOGO = [
+  ' \u2588\u2588\u2588  \u2588\u2588\u2588\u2588  \u2588\u2588\u2588\u2588\u2588 \u2588   \u2588  \u2588\u2588   \u2588   \u2588 \u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588  \u2588\u2588\u2588',
+  '\u2588   \u2588 \u2588   \u2588 \u2588     \u2588\u2588  \u2588 \u2588  \u2588   \u2588 \u2588    \u2588   \u2588     \u2588   ',
+  '\u2588   \u2588 \u2588\u2588\u2588\u2588  \u2588\u2588\u2588\u2588  \u2588 \u2588 \u2588 \u2588\u2588\u2588\u2588    \u2588     \u2588   \u2588\u2588\u2588\u2588   \u2588\u2588\u2588',
+  '\u2588   \u2588 \u2588     \u2588     \u2588  \u2588\u2588 \u2588  \u2588   \u2588 \u2588    \u2588   \u2588         \u2588',
+  ' \u2588\u2588\u2588  \u2588     \u2588\u2588\u2588\u2588\u2588 \u2588   \u2588 \u2588  \u2588  \u2588   \u2588   \u2588   \u2588\u2588\u2588\u2588\u2588  \u2588\u2588\u2588 ',
+];
+
+const LOGO_COLORS = ['#00F0FF', '#00DDFF', '#00CCFF', '#00BBFF', '#00AAFF'];
+
 function buildHistory(messages, newText) {
-  const history = [];
+  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 === null || m === undefined || typeof m !== 'object') continue;
     if (m.role === 'user' || m.role === 'assistant') {
-      const content = typeof m.content === 'string' ? m.content : '';
-      history.push({ role: m.role, content: content });
+      const c = typeof m.content === 'string' ? m.content : '';
+      h.push({ role: m.role, content: c });
     }
   }
   if (typeof newText === 'string' && newText.length > 0) {
-    history.push({ role: 'user', content: newText });
+    h.push({ role: 'user', content: newText });
   }
-  return history;
+  return h;
 }
 
-function formatTimer(seconds) {
-  if (typeof seconds !== 'number' || seconds < 0) {
-    return '0.0s';
-  }
-  return seconds.toFixed(1) + 's';
+function formatTimer(s) {
+  if (typeof s !== 'number' || s < 0) return '0.0s';
+  return s.toFixed(1) + 's';
 }
 
-function barLine(cols) {
-  const safeCols = typeof cols === 'number' && cols > 0 ? cols : 80;
-  let line = '';
-  for (let i = 0; i < safeCols; i++) {
-    line = line + '\u2500';
-  }
-  return h(Text, { color: BAR_COLOR }, line);
+function hr(cols, color) {
+  const n = typeof cols === 'number' && cols > 0 ? cols : 80;
+  const c = typeof color === 'string' ? color : '#1A1A28';
+  let s = '';
+  for (let i = 0; i < n; i++) s = s + '\u2500';
+  return h(Text, { color: c }, s);
 }
 
+const SPINNER = ['\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF', '\u25D5', '\u25D0', '\u25D4'];
+
 function AppRoot() {
   const { stdout } = useStdout();
   const rows = stdout.rows || 24;
@@ -57,20 +61,17 @@ function AppRoot() {
   const [streamText, setStreamText] = React.useState('');
   const [streamingActive, setStreamingActive] = React.useState(false);
   const [isThinking, setIsThinking] = React.useState(false);
-  const [spinnerChar, setSpinnerChar] = React.useState('');
+  const [spinnerIdx, setSpinnerIdx] = React.useState(0);
   const [thinkingElapsed, setThinkingElapsed] = React.useState(0);
   const [inputBuffer, setInputBuffer] = React.useState('');
   const [showOverlay, setShowOverlay] = React.useState(false);
   const [overlayIndex, setOverlayIndex] = React.useState(0);
-  const [particleFrame, setParticleFrame] = React.useState(0);
   const [toolInfo, setToolInfo] = React.useState(null);
 
   const commands = getCommands();
-  const MODEL_BAR_H = 1;
-  const SEP_H = 1;
-  const DOCK = DOCK_HEIGHT;
+  const LOGO_H = 5;
   const overlayH = showOverlay ? 6 : 0;
-  const fixedH = MODEL_BAR_H + SEP_H + overlayH + DOCK;
+  const fixedH = LOGO_H + overlayH + DOCK_HEIGHT;
   const availLines = Math.max(1, rows - fixedH);
 
   const abortRef = React.useRef(null);
@@ -78,27 +79,6 @@ function AppRoot() {
   const spinnerRef = React.useRef(null);
   const timerRef = React.useRef(null);
   const thinkStartRef = React.useRef(null);
-  const particleRef = React.useRef(null);
-
-  const SPINNER_FRAMES = [
-    '\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF',
-    '\u25D5', '\u25D0', '\u25D4', '\u25CB', '\u25D1',
-    '\u25D2', '\u25D3', '\u25CF', '\u25D3', '\u25D2',
-    '\u25D1', '\u25CC', '\u25CB', '\u25CD', '\u25CE',
-    '\u25CF', '\u25CE', '\u25CD', '\u25CB',
-  ];
-
-  React.useEffect(function () {
-    particleRef.current = setInterval(function () {
-      setParticleFrame(function (p) { return (p + 1) % 64; });
-    }, 100);
-    return function () {
-      if (particleRef.current !== null) {
-        clearInterval(particleRef.current);
-        particleRef.current = null;
-      }
-    };
-  }, []);
 
   React.useEffect(function () {
     if (isThinking === false) {
@@ -110,14 +90,12 @@ function AppRoot() {
         clearInterval(timerRef.current);
         timerRef.current = null;
       }
-      setSpinnerChar('');
       return;
     }
     let idx = 0;
-    setSpinnerChar(SPINNER_FRAMES[0]);
     spinnerRef.current = setInterval(function () {
-      idx = (idx + 1) % SPINNER_FRAMES.length;
-      setSpinnerChar(SPINNER_FRAMES[idx]);
+      idx = (idx + 1) % SPINNER.length;
+      setSpinnerIdx(idx);
     }, 100);
     timerRef.current = setInterval(function () {
       if (thinkStartRef.current !== null) {
@@ -148,101 +126,71 @@ function AppRoot() {
     });
   }
 
-  function checkThinkState(text) {
-    const openIdx = text.lastIndexOf('<think>');
-    const closeIdx = text.lastIndexOf('</think>');
-    if (openIdx === -1 && closeIdx === -1) return false;
-    return openIdx > closeIdx;
+  function checkThink(text) {
+    const o = text.lastIndexOf('<think>');
+    const c = text.lastIndexOf('</think>');
+    if (o === -1 && c === -1) return false;
+    return o > c;
   }
 
   async function handleSubmit(text) {
-    const safeText = typeof text === 'string' ? text : '';
-    if (safeText.length === 0 || streamingActive === true) return;
-
+    const safe = typeof text === 'string' ? text : '';
+    if (safe.length === 0 || streamingActive === true) return;
     setStreamingActive(true);
     setToolInfo(null);
     setStreamText(' connecting');
     setThinkingElapsed(0);
     connRef.current = setInterval(function () {
-      setStreamText(function (prev) {
-        if (prev === ' connecting') return ' connecting.';
-        if (prev === ' connecting.') return ' connecting..';
-        if (prev === ' connecting..') return ' connecting...';
+      setStreamText(function (p) {
+        if (p === ' connecting') return ' connecting.';
+        if (p === ' connecting.') return ' connecting..';
+        if (p === ' connecting..') return ' connecting...';
         return ' connecting';
       });
     }, 400);
-
-    setMessages(function (prev) {
-      return prev.concat([{
-        role: 'user',
-        content: safeText,
-        id: 'u-' + Date.now(),
-      }]);
+    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;
-      }
+      if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
       setStreamingActive(false);
       setStreamText('');
-      setMessages(function (prev) {
-        return prev.concat([{
-          role: 'assistant',
-          content: 'No model selected. Use `/model` to switch.',
-          id: 'e-' + Date.now(),
-        }]);
-      });
+      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'No model selected. Use /model.', id: 'e-' + Date.now() }]); });
       return;
     }
-
-    const history = buildHistory(messages, safeText);
+    const history = buildHistory(messages, safe);
     const abortController = new AbortController();
     abortRef.current = 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 (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,
-          });
+          setToolInfo({ tool: event.tool, used: event.used, sites: event.sites, query: event.query });
           continue;
         }
-
         if (event.type === 'thinking' || event.type === 'token') {
           const content = typeof event.content === 'string' ? event.content : '';
           for (let i = 0; i < content.length; i++) {
             accumulated = accumulated + content[i];
-            const insideThink = checkThinkState(accumulated);
+            const inside = checkThink(accumulated);
             setStreamText(accumulated);
-            setIsThinking(insideThink);
-            if (insideThink === true && thinkStarted === false) {
+            setIsThinking(inside);
+            if (inside === true && thinkStarted === false) {
               thinkStarted = true;
               thinkStartRef.current = Date.now();
               setThinkingElapsed(0);
             }
-            if (insideThink === false && thinkStarted === true) {
+            if (inside === false && thinkStarted === true) {
               thinkStarted = false;
               thinkStartRef.current = null;
               setThinkingElapsed(0);
@@ -250,98 +198,53 @@ function AppRoot() {
             await new Promise(function (r) { setTimeout(r, 0); });
           }
         }
-
         if (event.type === 'done') break;
         if (event.type === 'timeout') {
-          if (accumulated.length > 0) {
-            accumulated = accumulated + '\n\n\u2014 stream timed out \u2014';
-          }
+          if (accumulated.length > 0) accumulated = accumulated + '\n\n\u2014 stream timed out \u2014';
           setStreamText(accumulated);
           break;
         }
       }
-
-      if (connRef.current !== null) {
-        clearInterval(connRef.current);
-        connRef.current = null;
-      }
+      if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
       setIsThinking(false);
       thinkStartRef.current = null;
       setThinkingElapsed(0);
       setStreamingActive(false);
-
       const finalText = streamText;
       setStreamText('');
-
       if (finalText.length > 0) {
-        setMessages(function (prev) {
-          return prev.concat([{
-            role: 'assistant',
-            content: finalText,
-            id: 'a-' + Date.now(),
-          }]);
-        });
+        setMessages(function (p) { return p.concat([{ role: 'assistant', content: finalText, id: 'a-' + Date.now() }]); });
       }
     } catch (err) {
-      if (connRef.current !== null) {
-        clearInterval(connRef.current);
-        connRef.current = null;
-      }
+      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 (prev) {
-        return prev.concat([{
-          role: 'assistant',
-          content: '**Error:** ' + errMsg + '\n\nThe Space may be cold-starting (30\u2013120 s first request). Try again.',
-          id: 'er-' + Date.now(),
-        }]);
+      const errMsg = err !== null && err !== undefined ? (err.message || String(err)) : 'Unknown error';
+      setMessages(function (p) {
+        return p.concat([{ role: 'assistant', content: 'Error: ' + errMsg + '\n\nSpace cold-starting? Try again.', id: 'er-' + Date.now() }]);
       });
     }
   }
 
-  function handleInputChange(v) {
-    const safe = typeof v === 'string' ? v : '';
-    setInputBuffer(safe);
-    if (safe.length === 1 && safe[0] === '/' && showOverlay === false) {
-      setShowOverlay(true);
-      setOverlayIndex(0);
-    }
-    if (showOverlay === true && (safe.length === 0 || safe[0] !== '/')) {
-      setShowOverlay(false);
-    }
+  function handleChange(v) {
+    const s = typeof v === 'string' ? v : '';
+    setInputBuffer(s);
+    if (s.length === 1 && s[0] === '/' && showOverlay === false) { setShowOverlay(true); setOverlayIndex(0); }
+    if (showOverlay === true && (s.length === 0 || s[0] !== '/')) { setShowOverlay(false); }
   }
 
-  function handleSlashSelect(item) {
+  function handleCmd(item) {
     if (item === null || item === undefined) return;
-    const trigger = item.value;
-    if (typeof trigger !== 'string') return;
-
-    if (trigger === '/exit') process.exit(0);
-    if (trigger === '/clear') {
-      setMessages([]);
-    }
-    if (trigger === '/model') {
-      cycleModel();
-    }
-    if (trigger === '/help') {
-      setMessages(function (prev) {
-        return prev.concat([{
-          role: 'assistant',
-          content:
-            '**Commands:**\n' +
-            '- `/help` \u2014 this help\n' +
-            '- `/clear` \u2014 clear chat\n' +
-            '- `/model` \u2014 cycle: Llama \u2192 GPT \u2192 DeepSeek\n' +
-            '- `/exit` \u2014 quit',
-          id: 'hlp-' + Date.now(),
-        }]);
-      });
+    const t = item.value;
+    if (typeof t !== 'string') return;
+    if (t === '/exit') process.exit(0);
+    if (t === '/clear') setMessages([]);
+    if (t === '/model') cycleModel();
+    if (t === '/help') {
+      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'Commands: /help  /clear  /model  /exit', id: 'h-' + Date.now() }]); });
     }
     setInputBuffer('');
     setShowOverlay(false);
@@ -350,49 +253,33 @@ function AppRoot() {
 
   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) handleSlashSelect({ value: cmd.trigger });
-        return;
-      }
+      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({ value: cmd.trigger }); return; }
       return;
     }
-
     if (key.return === true) {
-      const safe = typeof inputBuffer === 'string' ? inputBuffer : '';
-      if (safe.length > 0 && streamingActive === false) {
-        handleSubmit(safe);
-      }
+      const s = typeof inputBuffer === 'string' ? inputBuffer : '';
+      if (s.length > 0 && streamingActive === false) handleSubmit(s);
       return;
     }
-
     if (key.ctrl === true && (input === 'c' || input === 'C')) {
-      if (abortRef.current !== null) {
-        try { abortRef.current.abort(); } catch (_) {}
-        abortRef.current = null;
-        setStreamingActive(false);
-        setStreamText('');
-      }
+      if (abortRef.current !== null) { try { abortRef.current.abort(); } catch (_) {} abortRef.current = null; setStreamingActive(false); setStreamText(''); }
       process.exit(0);
     }
   });
 
-  const modelBar = createModelBar(activeModel, cols);
-  const particleTop = createParticleRow(particleFrame, cols, 'tp');
+  const activeInfo = getModelById(activeModel);
+  const activeLabel = activeInfo !== null ? activeInfo.label : 'OpenAxies';
+
+  const logoEls = [];
+  for (let r = 0; r < LOGO.length; r++) {
+    logoEls.push(
+      h(Text, { key: 'l' + r, color: LOGO_COLORS[r % LOGO_COLORS.length], bold: true }, LOGO[r])
+    );
+  }
+  const logo = h(Box, { flexDirection: 'column', width: '100%', flexShrink: 0, paddingLeft: 1 }, ...logoEls);
 
   const viewLines = [];
   for (let i = 0; i < messages.length; i++) {
@@ -400,104 +287,72 @@ function AppRoot() {
     if (msg === null || typeof msg !== 'object') continue;
     const content = typeof msg.content === 'string' ? msg.content : '';
     if (content.length === 0) continue;
-
-    if (i > 0) viewLines.push({ type: 'sep' });
-
     if (msg.role === 'user') {
-      viewLines.push({ type: 'user', text: content });
-      viewLines.push({ type: 'sep' });
+      viewLines.push({ t: 'user', text: '\u25B7 ' + content });
     } else {
-      viewLines.push({ type: 'assistant', text: content });
+      viewLines.push({ t: 'text', text: content });
     }
   }
 
   const hasStream = typeof streamText === 'string' && streamText.length > 0;
   if (hasStream === true) {
-    viewLines.push({ type: 'sep' });
-
-    if (toolInfo !== null && toolInfo.used === true) {
-      viewLines.push({
-        type: 'tool',
-        text: '  \u2500\u2500 ' + toolInfo.tool + ': "' + toolInfo.query + '" (' + toolInfo.sites + ' sites)',
-      });
+    if (toolInfo !== null && toolInfo.used === true && toolInfo.query.length > 0) {
+      viewLines.push({ t: 'tool', text: '\u2500\u2500 ' + toolInfo.tool + ': "' + toolInfo.query + '" (' + toolInfo.sites + ' sites)' });
     }
-
     if (isThinking === true) {
-      const sp = typeof spinnerChar === 'string' && spinnerChar.length > 0 ? spinnerChar : '\u25CB';
-      viewLines.push({
-        type: 'think',
-        spin: sp,
-        elapsed: formatTimer(thinkingElapsed),
-      });
+      viewLines.push({ t: 'think', spin: SPINNER[spinnerIdx], elapsed: formatTimer(thinkingElapsed) });
       const clean = streamText.split('<think>').join('').split('</think>').join('');
-      viewLines.push({ type: 'stream', text: clean, color: '#FF9F43' });
+      viewLines.push({ t: 'think-text', text: clean });
     } else {
       const clean = streamText.split('<think>').join('').split('</think>').join('');
-      viewLines.push({ type: 'stream', text: clean, color: hex.primary });
+      viewLines.push({ t: 'text', text: clean });
     }
   }
 
   if (viewLines.length === 0) {
-    viewLines.push({ type: 'muted', text: '  type a message to start...' });
+    viewLines.push({ t: 'idle', text: '  \u25B8 type a message to begin...     [/help for commands]' });
   }
 
-  const visibleHeight = Math.max(1, availLines - 1);
-  const displayLines = viewLines.slice(-visibleHeight);
-  const viewElements = [];
+  const visible = Math.max(1, availLines - 1);
+  const display = viewLines.slice(-visible);
+  const viewEls = [];
 
-  for (let i = 0; i < displayLines.length; i++) {
-    const line = displayLines[i];
-    if (line.type === 'sep') {
-      viewElements.push(h(Box, { key: 'vs-' + i, height: 1 }, barLine(cols)));
-    } else if (line.type === 'think') {
-      viewElements.push(
-        h(Box, { key: 'vt-' + i, height: 1 },
-          h(Text, { color: '#FF9F43', bold: true },
-            ' ' + line.spin + ' Thinking \u2022 ' + line.elapsed
-          )
+  for (let i = 0; i < display.length; i++) {
+    const l = display[i];
+    if (l.t === 'think') {
+      viewEls.push(
+        h(Box, { key: 'k-' + i, height: 1, paddingLeft: 2 },
+          h(Text, { color: '#FF9F43', bold: true }, l.spin + ' Thinking \u2022 ' + l.elapsed)
         )
       );
-    } else if (line.type === 'tool') {
-      viewElements.push(
-        h(Box, { key: 'vtl-' + i, height: 1 },
-          h(Text, { color: '#5B5B8A' }, line.text)
+    } else if (l.t === 'think-text') {
+      viewEls.push(
+        h(Box, { key: 'kt-' + i, height: 1, paddingLeft: 3 },
+          h(Text, { color: '#FF9F43' }, l.text)
         )
       );
-    } else if (line.type === 'user') {
-      viewElements.push(
-        h(Box, {
-          key: 'vu-' + i,
-          height: 1,
-          paddingLeft: 1,
-        },
-          h(Text, { color: hex.neonBlue, bold: true }, '\u25B7 '),
-          h(Text, { color: hex.neonBlue }, line.text)
+    } else if (l.t === 'tool') {
+      viewEls.push(
+        h(Box, { key: 'tl-' + i, height: 1, paddingLeft: 2 },
+          h(Text, { color: '#5B5B8A' }, l.text)
         )
       );
-    } else if (line.type === 'assistant') {
-      viewElements.push(
-        h(Box, {
-          key: 'va-' + i,
-          height: 1,
-          paddingLeft: 1,
-        },
-          h(Text, { color: hex.primary }, line.text)
+    } else if (l.t === 'user') {
+      viewEls.push(
+        h(Box, { key: 'u-' + i, height: 1, paddingLeft: 1 },
+          h(Text, { color: hex.neonBlue }, l.text)
         )
       );
-    } else if (line.type === 'stream') {
-      viewElements.push(
-        h(Box, {
-          key: 'vst-' + i,
-          height: 1,
-          paddingLeft: 1,
-        },
-          h(Text, { color: line.color }, line.text)
+    } else if (l.t === 'text') {
+      viewEls.push(
+        h(Box, { key: 'a-' + i, height: 1, paddingLeft: 2 },
+          h(Text, { color: hex.primary }, l.text)
         )
       );
-    } else if (line.type === 'muted') {
-      viewElements.push(
-        h(Box, { key: 'vm-' + i, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#333355' }, line.text)
+    } else if (l.t === 'idle') {
+      viewEls.push(
+        h(Box, { key: 'i-' + i, height: 1, paddingLeft: 1 },
+          h(Text, { color: '#444466' }, l.text)
         )
       );
     }
@@ -508,22 +363,21 @@ function AppRoot() {
     height: availLines,
     flexDirection: 'column',
     overflow: 'hidden',
-    paddingBottom: 1,
-  }, ...viewElements);
-
-  const particleBot = createParticleRow(particleFrame, cols, 'bt');
+    paddingTop: 0,
+    paddingBottom: 0,
+  }, ...viewEls);
 
-  const slashOverlay = showOverlay === true
-    ? createSlashOverlay(commands, overlayIndex)
-    : null;
+  const slashOverlay = showOverlay === true ? createSlashOverlay(commands, overlayIndex) : null;
 
   const dock = createComposerDock({
     value: inputBuffer,
-    onChange: handleInputChange,
+    onChange: handleChange,
     onSubmit: function () {},
     inputActive: showOverlay === false,
     isStreaming: streamingActive,
     terminalWidth: cols,
+    modelLabel: activeLabel + ' \u25CF',
+    modelStatus: true,
   });
 
   return h(Box, {
@@ -533,11 +387,9 @@ function AppRoot() {
     backgroundColor: hex.black,
     overflow: 'hidden',
   },
-    modelBar,
-    h(Box, { height: 1 }, barLine(cols)),
-    h(Box, { height: 1, paddingLeft: 1 }, particleTop),
+    logo,
+    h(Box, { height: 1 }, hr(cols, '#1A1A2E')),
     viewport,
-    h(Box, { height: 1, paddingLeft: 1 }, particleBot),
     slashOverlay,
     dock
   );

package/src/components/ComposerDock.js

@@ -1,105 +1,66 @@
 import React from 'react';
-import { Box, Text } from 'ink';
+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 = 3;
-const MAX_FRAME_WIDTH = 80;
-const PROMPT = 'openaxies@root:~$ ';
+export const DOCK_HEIGHT = 4;
 
-function checkString(value) {
-  if (typeof value !== 'string') {
-    return '';
-  }
-  return value;
-}
-
-function checkCallback(fn, label) {
-  if (fn !== null && fn !== undefined && typeof fn !== 'function') {
-    throw new Error(label + ' must be a function');
-  }
-}
+const PROMPT = '> ';
 
-// ComposerDock — 3 rows, permanently at the bottom of the layout.
-//
-// Layout:
-//   ┌──────────────────────────────────────────────────────────────────────────────┐
-//   │ openaxies@root:~$ [TextInput]                                                │
-//   └──────────────────────────────────────────────────────────────────────────────┘
-//
-// The frame is capped at 80 columns for narrow terminal clients.
-// flexShrink: 0 prevents Ink from ever yielding these rows to the viewport.
-//
-// config.inputActive (bool, default true):
-//   Set to false when SlashOverlay is open so TextInput releases keyboard
-//   focus and arrow keys don't corrupt the input buffer.
 export function createComposerDock(config) {
   if (config === null || config === undefined || typeof config !== 'object') {
     throw new Error('createComposerDock requires a config object');
   }
 
-  const value = checkString(config.value);
+  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 terminalWidth = Number.isFinite(config.terminalWidth)
-    ? Math.floor(config.terminalWidth)
-    : MAX_FRAME_WIDTH;
-
-  checkCallback(onChange, 'onChange');
-  checkCallback(onSubmit, 'onSubmit');
+  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...'
-    : '/ commands';
-  const frameWidth = Math.max(2, Math.min(MAX_FRAME_WIDTH, terminalWidth));
-  const innerWidth = frameWidth - 2;
-  const inputWidth = Math.max(1, innerWidth - PROMPT.length);
-  const horizontalRule = '\u2500'.repeat(innerWidth);
+  const placeholder = isStreaming ? 'Ctrl+C to interrupt...' : 'type a message...';
+  const innerW = safeCols - 2;
 
   return h(Box, {
     width: '100%',
     height: DOCK_HEIGHT,
     flexDirection: 'column',
-    alignItems: 'center',
     flexShrink: 0,
   },
-    h(Box, { width: frameWidth, height: 1, flexShrink: 0 },
-      h(Text, { color: hex.border }, '\u250C' + horizontalRule + '\u2510')
+    h(Box, { height: 1, paddingLeft: 1 },
+      h(Text, { color: '#1A1A28' }, '\u2500'.repeat(innerW))
     ),
-    h(Box, {
-      width: frameWidth,
-      height: 1,
-      flexDirection: 'row',
-      flexShrink: 0,
-      overflow: 'hidden',
-    },
+    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
       h(Text, { color: hex.border }, '\u2502'),
-      h(Box, {
-        width: innerWidth,
-        height: 1,
-        flexDirection: 'row',
-        overflow: 'hidden',
-      },
-        h(Text, { color: inputActive ? hex.greenOnline : hex.muted, bold: true }, PROMPT),
-        h(Box, { width: inputWidth, height: 1, overflow: 'hidden' },
-          h(TextInput, {
-            value: value,
-            onChange: onChange,
-            onSubmit: onSubmit,
-            placeholder: placeholder,
-            focus: inputActive,
-            showCursor: true,
-          })
-        )
+      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, { width: frameWidth, height: 1, flexShrink: 0 },
-      h(Text, { color: hex.border }, '\u2514' + horizontalRule + '\u2518')
+    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 || '')
     )
   );
 }

package/src/components/ModelBar.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex } from '../config/theme.js';
-import { getModels } from '../config/models.js';
-
-const h = React.createElement;
-
-const BAR_COLOR = '#1A1A2E';
-
-export function createModelBar(activeId, cols) {
-  const models = getModels();
-  const safeCols = typeof cols === 'number' && cols > 0 ? cols : 80;
-  const parts = [];
-
-  for (let i = 0; i < models.length; i++) {
-    const m = models[i];
-    const isActive = m.id === activeId;
-    if (i > 0) {
-      parts.push(h(Text, { key: 'sp-' + i, color: BAR_COLOR }, '  \u2502  '));
-    }
-    const prefix = isActive ? '\u25B8 ' : '  ';
-    const dot = isActive ? '\u25CF' : '\u25CB';
-    const dotColor = isActive ? hex.greenOnline : '#333355';
-    const nameColor = isActive ? hex.neonBlue : '#555577';
-    const badgeColor = isActive ? hex.muted : '#333344';
-
-    parts.push(
-      h(Text, { key: 'pre-' + i, color: hex.primary }, prefix)
-    );
-    parts.push(
-      h(Text, { key: 'nm-' + i, color: nameColor, bold: isActive }, m.label)
-    );
-    parts.push(
-      h(Text, { key: 'bd-' + i, color: badgeColor }, ' [' + m.badge + ']')
-    );
-    parts.push(
-      h(Text, { key: 'dt-' + i, color: dotColor }, ' ' + dot)
-    );
-  }
-
-  return h(Box, { width: '100%', height: 1, paddingLeft: 1 }, ...parts);
-}

package/src/components/Particles.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Text } from 'ink';
-import { hex } from '../config/theme.js';
-
-const h = React.createElement;
-
-const CHAR_SET = [
-  '\u2726', '\u00B7', '\u2727', '\u00B7', '\u2605', '\u00B7',
-  '\u2726', '\u00B7', '\u2219', '\u2727', '\u00B7', '\u2726',
-  '\u2219', '\u2605', '\u2219', '\u2727', '\u2219', '\u2726',
-  '\u00B7', '\u2727', '\u2605', '\u00B7', '\u2726', '\u00B7',
-  '\u2219', '\u2727',
-];
-
-const COLORS = [
-  '#00F0FF', '#FF9F43', '#00FF88', '#FF6B9D', '#8B5CF6',
-  '#00F0FF', '#FFD700', '#00FF88',
-];
-
-function getColor(frame, index, total) {
-  const phase = Math.floor((index / total) * 52);
-  const idx = (frame + phase) % COLORS.length;
-  return COLORS[idx];
-}
-
-export function createParticleRow(frame, cols, key) {
-  const safeCols = typeof cols === 'number' && cols > 0 ? cols : 80;
-  const safeFrame = typeof frame === 'number' ? frame : 0;
-  const parts = [];
-
-  for (let i = 0; i < 26; i++) {
-    const color = getColor(safeFrame, i, 52);
-    const ch = CHAR_SET[i % CHAR_SET.length];
-    parts.push(
-      h(Text, { key: key + '-' + i, color: color }, ch)
-    );
-  }
-
-  return h(Text, null, parts);
-}
-
-export function createParticlePair(frame, cols) {
-  return [
-    createParticleRow(frame, cols, 'top'),
-    createParticleRow(frame, cols, 'bot'),
-  ];
-}