openaxies 0.5.4 → 0.6.0

package/package.json

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

package/src/App.js

@@ -1,25 +1,16 @@
 import React from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 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 { createComposerDock, DOCK_HEIGHT } from './components/ComposerDock.js';
+import { createBrandHeader, BRAND_HEIGHT } from './components/BrandHeader.js';
+import TextInput from 'ink-text-input';
 
 const h = React.createElement;
 
 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 h = [];
   for (let i = 0; i < messages.length; i++) {
@@ -36,20 +27,28 @@ function buildHistory(messages, newText) {
   return h;
 }
 
-function formatTimer(s) {
+function fmtTime(s) {
   if (typeof s !== 'number' || s < 0) return '0.0s';
   return s.toFixed(1) + 's';
 }
 
-function hr(cols, color) {
+function hr(cols) {
   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);
+  return h(Text, { color: '#1A1A28' }, s);
 }
 
-const SPINNER = ['\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF', '\u25D5', '\u25D0', '\u25D4'];
+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() {
   const { stdout } = useStdout();
@@ -67,50 +66,31 @@ function AppRoot() {
   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 commands = getCommands();
-  const LOGO_H = 5;
-  const overlayH = showOverlay ? 6 : 0;
-  const fixedH = LOGO_H + overlayH + DOCK_HEIGHT;
-  const availLines = Math.max(1, rows - fixedH);
+  const STATUS_H = 3;
+  const DOCK_H = 1;
+  const fixedH = BRAND_HEIGHT + STATUS_H + DOCK_H;
+  const availLines = Math.max(10, rows - fixedH);
 
   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('');
 
   React.useEffect(function () {
-    if (isThinking === false) {
-      if (spinnerRef.current !== null) {
-        clearInterval(spinnerRef.current);
-        spinnerRef.current = null;
-      }
-      if (timerRef.current !== null) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
-      return;
-    }
+    if (isThinking === false) return;
     let idx = 0;
-    spinnerRef.current = setInterval(function () {
-      idx = (idx + 1) % SPINNER.length;
-      setSpinnerIdx(idx);
-    }, 100);
-    timerRef.current = setInterval(function () {
-      if (thinkStartRef.current !== null) {
-        setThinkingElapsed((Date.now() - thinkStartRef.current) / 1000);
-      }
+    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 () {
-      if (spinnerRef.current !== null) {
-        clearInterval(spinnerRef.current);
-        spinnerRef.current = null;
-      }
-      if (timerRef.current !== null) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
+      clearInterval(si); clearInterval(ti);
     };
   }, [isThinking]);
 
@@ -136,6 +116,7 @@ function AppRoot() {
   async function handleSubmit(text) {
     const safe = typeof text === 'string' ? text : '';
     if (safe.length === 0 || streamingActive === true) return;
+    lastQueryRef.current = safe;
     setStreamingActive(true);
     setToolInfo(null);
     setStreamText(' connecting');
@@ -148,16 +129,13 @@ function AppRoot() {
         return ' connecting';
       });
     }, 400);
-    setMessages(function (p) {
-      return p.concat([{ role: 'user', content: safe, 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;
-      setStreamingActive(false);
-      setStreamText('');
-      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'No model selected. Use /model.', id: 'e-' + Date.now() }]); });
+      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);
@@ -170,90 +148,72 @@ function AppRoot() {
       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 (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 content = typeof event.content === 'string' ? event.content : '';
-          accumulated = accumulated + content;
+          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);
-          }
-          await new Promise(function (r) { setTimeout(r, 0); });
+          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;
+          setStreamText(accumulated); break;
         }
       }
       if (connRef.current !== null) clearInterval(connRef.current), connRef.current = null;
-      setIsThinking(false);
-      thinkStartRef.current = null;
-      setThinkingElapsed(0);
-      setStreamingActive(false);
+      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('');
+      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 + '\n\nSpace cold-starting? Try again.', id: 'er-' + Date.now() }]);
-      });
+      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'Error: ' + errMsg, id: 'er-' + Date.now() }]); });
     }
   }
 
   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); }
+    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.value;
+    const t = item.trigger;
     if (typeof t !== 'string') return;
     if (t === '/exit') process.exit(0);
-    if (t === '/clear') setMessages([]);
+    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() }]); });
+    if (t === '/thoughts') { setShowThoughts(function (p) { return !p; }); }
+    if (t === '/resume') {
+      const q = lastQueryRef.current;
+      if (q.length > 0 && streamingActive === false) handleSubmit(q);
     }
-    setInputBuffer('');
-    setShowOverlay(false);
-    setOverlayIndex(0);
+    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({ value: cmd.trigger }); 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) {
@@ -261,144 +221,214 @@ function AppRoot() {
       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(''); }
-      process.exit(0);
+    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;
+      }
+      if (input === 'l' || input === 'L') { setMessages([]); return; }
+      if (input === 'k' || input === 'K') { setInputBuffer('/'); setShowOverlay(true); setOverlayIndex(0); return; }
     }
   });
 
+  function filterText(t) {
+    if (showThoughts === true) return t;
+    return t.split('<think>').join('').split('</think>').join('');
+  }
+
   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])
-    );
+  // Build sections
+  const sections = [];
+
+  // Show overlay items
+  if (showOverlay === true) {
+    sections.push({ t: 'sep' });
+    sections.push({ t: 'header_bright', text: 'Commands' });
+    for (let i = 0; i < COMMANDS.length; i++) {
+      const c = COMMANDS[i];
+      const sel = i === overlayIndex;
+      sections.push({ t: 'cmd', trigger: c.trigger, desc: c.desc, selected: sel });
+    }
+    sections.push({ t: 'sep' });
   }
-  const logo = h(Box, { flexDirection: 'column', width: '100%', flexShrink: 0, paddingLeft: 0 }, ...logoEls);
 
-  const viewLines = [];
+  // Conversation history
   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') {
-      viewLines.push({ t: 'user', text: '\u25B7 ' + content });
+      sections.push({ t: 'sep' });
+      sections.push({ t: 'user', text: content });
     } else {
-      viewLines.push({ t: 'text', text: content });
+      if (sections.length > 0 && sections[sections.length - 1].t !== 'sep') sections.push({ t: 'sep' });
+      const display = filterText(content);
+      sections.push({ t: 'text', text: display });
     }
   }
 
+  // Streaming section
   const hasStream = typeof streamText === 'string' && streamText.length > 0;
   if (hasStream === true) {
+    const clean = filterText(streamText);
+
     if (toolInfo !== null && toolInfo.used === true && toolInfo.query.length > 0) {
-      viewLines.push({ t: 'tool', text: '\u2500\u2500 ' + toolInfo.tool + ': "' + toolInfo.query + '" (' + toolInfo.sites + ' sites)' });
+      sections.push({ t: 'tool', tool: toolInfo.tool, query: toolInfo.query, sites: toolInfo.sites });
     }
+
     if (isThinking === true) {
-      viewLines.push({ t: 'think', spin: SPINNER[spinnerIdx], elapsed: formatTimer(thinkingElapsed) });
-      const clean = streamText.split('<think>').join('').split('</think>').join('');
-      viewLines.push({ t: 'think-text', text: clean });
+      sections.push({ t: 'thinking', spin: SPINNER[spinnerIdx], elapsed: fmtTime(thinkingElapsed), content: clean });
     } else {
-      const clean = streamText.split('<think>').join('').split('</think>').join('');
-      viewLines.push({ t: 'text', text: clean });
+      sections.push({ t: 'stream', text: clean });
     }
   }
 
-  if (viewLines.length === 0) {
-    viewLines.push({ t: 'idle', text: '  \u25B8 type a message to begin   |   /model to switch models   |   /help for commands' });
-    viewLines.push({ t: 'idle', text: '' });
-    viewLines.push({ t: 'idle-sm', text: '  Models: OpenAxies Llama  |  OpenAxies GPT  |  OpenAxies DeepSeek' });
-    viewLines.push({ t: 'idle-sm', text: '  Current: ' + activeLabel });
+  // Idle ready state
+  if (sections.length === 0) {
+    sections.push({ t: 'sep' });
+    sections.push({ t: 'ready', text: 'Ready' });
+    sections.push({ t: 'sep' });
+  }
+
+  // Estimate line count per section
+  function estLines(s) {
+    if (s.t === 'sep' || s.t === 'ready' || s.t === 'stream' || s.t === 'text' || s.t === 'tool') return 1;
+    if (s.t === 'cmd') return 1;
+    if (s.t === 'header_bright') return 1;
+    if (s.t === 'user') return 2;
+    if (s.t === 'thinking') return 2;
+    return 1;
   }
 
-  const visible = Math.max(1, availLines - 1);
-  const display = viewLines.slice(-visible);
-  const viewEls = [];
+  // Limit to available lines - show the LAST (newest) sections
+  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
+  const sectionEls = [];
+  for (let i = 0; i < visible.length; i++) {
+    const s = visible[i];
+    const ki = 's-' + i;
 
-  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)
+    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 === 'text' || s.t === 'stream') {
+      sectionEls.push(
+        h(Box, { key: ki, height: 1, paddingLeft: 1 },
+          h(Text, { color: hex.primary, wrap: 'wrap' }, s.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 (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)
         )
       );
-    } else if (l.t === 'tool') {
-      viewEls.push(
-        h(Box, { key: 'tl-' + i, height: 1, paddingLeft: 2 },
-          h(Text, { color: '#5B5B8A' }, l.text)
+      sectionEls.push(
+        h(Box, { key: ki + '-c', height: 1, paddingLeft: 2 },
+          h(Text, { color: '#FF9F43', wrap: 'wrap' }, s.content)
         )
       );
-    } 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 (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 (l.t === 'text') {
-      viewEls.push(
-        h(Box, { key: 'a-' + i, height: 1, paddingLeft: 2 },
-          h(Text, { color: hex.primary }, l.text)
+    } else if (s.t === 'header_bright') {
+      sectionEls.push(
+        h(Box, { key: ki, height: 1, paddingLeft: 1 },
+          h(Text, { color: '#888899', bold: true }, s.text || '')
         )
       );
-    } else if (l.t === 'idle') {
-      viewEls.push(
-        h(Box, { key: 'i-' + i, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#555577' }, l.text)
+    } else if (s.t === 'cmd') {
+      const prefix = s.selected === true ? '\u276F ' : '  ';
+      const col = s.selected === 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 (l.t === 'idle-sm') {
-      viewEls.push(
-        h(Box, { key: 'is-' + i, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#333355' }, l.text)
+    } else if (s.t === 'ready') {
+      sectionEls.push(
+        h(Box, { key: ki, height: 1, paddingLeft: 1 },
+          h(Text, { color: '#00FF88', bold: true }, s.text)
         )
       );
     }
   }
 
+  // Fill remaining lines
+  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',
-    paddingTop: 0,
-    paddingBottom: 0,
-  }, ...viewEls);
-
-  const slashOverlay = showOverlay === true ? createSlashOverlay(commands, overlayIndex) : null;
-
-  const dock = createComposerDock({
-    value: inputBuffer,
-    onChange: handleChange,
-    onSubmit: function () {},
-    inputActive: showOverlay === false,
-    isStreaming: streamingActive,
-    terminalWidth: cols,
-    modelLabel: activeLabel + ' \u25CF',
-    modelStatus: true,
-  });
+  }, ...sectionEls);
 
-  return h(Box, {
-    flexDirection: 'column',
-    width: '100%',
-    height: rows,
-    backgroundColor: hex.black,
-    overflow: 'hidden',
-  },
-    logo,
-    h(Box, { height: 1 }, hr(cols, '#1A1A2E')),
+  // Status bar
+  const statusBar = h(Box, { flexDirection: 'column', height: STATUS_H, flexShrink: 0 },
+    h(Box, { height: 1 }, hr(cols)),
+    h(Box, { height: 1, paddingLeft: 2 },
+      h(Text, { color: '#444466' }, 'esc interrupt     ctrl+t thoughts     ctrl+p models'),
+    ),
+    h(Box, { height: 1, paddingLeft: 2 },
+      h(Text, { color: '#444466' }, 'ctrl+l clear      ctrl+r resume       ctrl+k commands'),
+    )
+  );
+
+  // Prompt
+  const promptLine = h(Box, { height: DOCK_H, flexShrink: 0, paddingLeft: 2, paddingRight: 2 },
+    h(Text, { color: hex.greenOnline }, '\u258C'),
+    h(TextInput, {
+      value: inputBuffer,
+      onChange: handleChange,
+      onSubmit: function () {},
+      placeholder: '',
+      focus: showOverlay === false,
+      showCursor: true,
+    })
+  );
+
+  return h(Box, { flexDirection: 'column', width: '100%', height: rows, overflow: 'hidden' },
+    createBrandHeader(),
     viewport,
-    slashOverlay,
-    dock
+    statusBar,
+    promptLine
   );
 }
-
-import { createSlashOverlay } from './components/SlashOverlay.js';

package/src/components/BrandHeader.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+
+const h = React.createElement;
+
+const LOGO = [
+  '██████╗ ██████╗ ███████╗███╗   ██╗ █████╗ ██╗  ██╗██╗███████╗███████╗',
+  '██╔═══██╗██╔══██╗██╔════╝████╗  ██║██╔══██╗╚██╗██╔╝██║██╔════╝██╔════╝',
+  '██║   ██║██████╔╝█████╗  ██╔██╗ ██║███████║ ╚███╔╝ ██║█████╗  ███████╗',
+  '██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║██╔══██║ ██╔██╗ ██║██╔══╝  ╚════██║',
+  '╚██████╔╝██║     ███████╗██║ ╚████║██║  ██║██╔╝ ██╗██║███████╗███████║',
+  ' ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝',
+];
+
+export function createBrandHeader() {
+  const els = [];
+  for (let r = 0; r < LOGO.length; r++) {
+    els.push(
+      h(Text, { key: 'l' + r, color: '#00BBFF', bold: true }, LOGO[r])
+    );
+  }
+  els.push(
+    h(Text, { key: 'sub', color: '#666688' }, 'OpenAxies Agent Runtime')
+  );
+  return h(Box, {
+    flexDirection: 'column',
+    width: '100%',
+    flexShrink: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+  }, ...els);
+}
+
+export const BRAND_HEIGHT = 7;

package/src/providers/streaming.js

@@ -44,6 +44,9 @@ export async function* streamResponse(endpoint, body, signal) {
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'text/event-stream',
+        'Authorization': typeof process !== 'undefined' && process.env && process.env.OPENAXIES_HF_TOKEN
+          ? 'Bearer ' + process.env.OPENAXIES_HF_TOKEN
+          : undefined,
       },
       body: JSON.stringify(body),
       signal: combinedSignal,