openaxies 0.5.1 → 0.5.2

package/package.json

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

package/src/App.js

@@ -10,32 +10,43 @@ 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 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.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 hr(cols) {
+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: '#1A1A28' }, s);
+  return h(Text, { color: c }, s);
 }
 
 const SPINNER = ['\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF', '\u25D5', '\u25D0', '\u25D4'];
@@ -58,8 +69,9 @@ function AppRoot() {
   const [toolInfo, setToolInfo] = React.useState(null);
 
   const commands = getCommands();
+  const LOGO_H = 5;
   const overlayH = showOverlay ? 6 : 0;
-  const fixedH = 1 + overlayH + DOCK_HEIGHT;
+  const fixedH = LOGO_H + overlayH + DOCK_HEIGHT;
   const availLines = Math.max(1, rows - fixedH);
 
   const abortRef = React.useRef(null);
@@ -124,12 +136,10 @@ function AppRoot() {
   async function handleSubmit(text) {
     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 (p) {
         if (p === ' connecting') return ' connecting.';
@@ -138,52 +148,36 @@ function AppRoot() {
         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;
-      }
+      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() }]);
-      });
+      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'No model selected. Use /model.', id: 'e-' + Date.now() }]); });
       return;
     }
-
     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 });
           continue;
         }
-
         if (event.type === 'thinking' || event.type === 'token') {
           const content = typeof event.content === 'string' ? event.content : '';
           for (let i = 0; i < content.length; i++) {
@@ -204,53 +198,33 @@ 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 (p) {
-          return p.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';
+      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(),
-        }]);
+        return p.concat([{ role: 'assistant', content: 'Error: ' + errMsg + '\n\nSpace cold-starting? Try again.', id: 'er-' + Date.now() }]);
       });
     }
   }
@@ -258,13 +232,8 @@ function AppRoot() {
   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);
-    }
+    if (s.length === 1 && s[0] === '/' && showOverlay === false) { setShowOverlay(true); setOverlayIndex(0); }
+    if (showOverlay === true && (s.length === 0 || s[0] !== '/')) { setShowOverlay(false); }
   }
 
   function handleCmd(item) {
@@ -275,9 +244,7 @@ function AppRoot() {
     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() }]);
-      });
+      setMessages(function (p) { return p.concat([{ role: 'assistant', content: 'Commands: /help  /clear  /model  /exit', id: 'h-' + Date.now() }]); });
     }
     setInputBuffer('');
     setShowOverlay(false);
@@ -286,48 +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) handleCmd({ 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 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 activeInfo = getModelById(activeModel);
   const activeLabel = activeInfo !== null ? activeInfo.label : 'OpenAxies';
-  const activeBadge = activeInfo !== null ? activeInfo.badge : '';
+
+  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++) {
@@ -335,11 +287,8 @@ function AppRoot() {
     if (msg === null || typeof msg !== 'object') continue;
     const content = typeof msg.content === 'string' ? msg.content : '';
     if (content.length === 0) continue;
-
     if (msg.role === 'user') {
-      if (i > 0) viewLines.push({ t: 'sep' });
-      viewLines.push({ t: 'user', text: content });
-      viewLines.push({ t: 'sep' });
+      viewLines.push({ t: 'user', text: '\u25B7 ' + content });
     } else {
       viewLines.push({ t: 'text', text: content });
     }
@@ -347,7 +296,6 @@ function AppRoot() {
 
   const hasStream = typeof streamText === 'string' && streamText.length > 0;
   if (hasStream === true) {
-    viewLines.push({ t: 'sep' });
     if (toolInfo !== null && toolInfo.used === true && toolInfo.query.length > 0) {
       viewLines.push({ t: 'tool', text: '\u2500\u2500 ' + toolInfo.tool + ': "' + toolInfo.query + '" (' + toolInfo.sites + ' sites)' });
     }
@@ -362,7 +310,7 @@ function AppRoot() {
   }
 
   if (viewLines.length === 0) {
-    viewLines.push({ t: 'idle', text: '  start typing to chat...' });
+    viewLines.push({ t: 'idle', text: '  \u25B8 type a message to begin...     [/help for commands]' });
   }
 
   const visible = Math.max(1, availLines - 1);
@@ -371,23 +319,21 @@ function AppRoot() {
 
   for (let i = 0; i < display.length; i++) {
     const l = display[i];
-    if (l.t === 'sep') {
-      viewEls.push(h(Box, { key: 's-' + i, height: 1 }, hr(cols)));
-    } else if (l.t === 'think') {
+    if (l.t === 'think') {
       viewEls.push(
-        h(Box, { key: 'k-' + i, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#FF9F43', bold: true }, ' ' + l.spin + ' Thinking \u2022 ' + l.elapsed)
+        h(Box, { key: 'k-' + i, height: 1, paddingLeft: 2 },
+          h(Text, { color: '#FF9F43', bold: true }, l.spin + ' Thinking \u2022 ' + l.elapsed)
         )
       );
     } else if (l.t === 'think-text') {
       viewEls.push(
-        h(Box, { key: 'kt-' + i, height: 1, paddingLeft: 2 },
+        h(Box, { key: 'kt-' + i, height: 1, paddingLeft: 3 },
           h(Text, { color: '#FF9F43' }, l.text)
         )
       );
     } else if (l.t === 'tool') {
       viewEls.push(
-        h(Box, { key: 'tl-' + i, height: 1, paddingLeft: 1 },
+        h(Box, { key: 'tl-' + i, height: 1, paddingLeft: 2 },
           h(Text, { color: '#5B5B8A' }, l.text)
         )
       );
@@ -399,14 +345,14 @@ function AppRoot() {
       );
     } else if (l.t === 'text') {
       viewEls.push(
-        h(Box, { key: 'a-' + i, height: 1, paddingLeft: 1 },
+        h(Box, { key: 'a-' + i, height: 1, paddingLeft: 2 },
           h(Text, { color: hex.primary }, l.text)
         )
       );
     } else if (l.t === 'idle') {
       viewEls.push(
         h(Box, { key: 'i-' + i, height: 1, paddingLeft: 1 },
-          h(Text, { color: '#333355' }, l.text)
+          h(Text, { color: '#444466' }, l.text)
         )
       );
     }
@@ -417,12 +363,11 @@ function AppRoot() {
     height: availLines,
     flexDirection: 'column',
     overflow: 'hidden',
-    paddingBottom: 1,
+    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,
@@ -442,7 +387,8 @@ function AppRoot() {
     backgroundColor: hex.black,
     overflow: 'hidden',
   },
-    h(Box, { height: 1 }, hr(cols)),
+    logo,
+    h(Box, { height: 1 }, hr(cols, '#1A1A2E')),
     viewport,
     slashOverlay,
     dock

package/src/components/ComposerDock.js

@@ -5,7 +5,7 @@ import { hex } from '../config/theme.js';
 
 const h = React.createElement;
 
-export const DOCK_HEIGHT = 3;
+export const DOCK_HEIGHT = 4;
 
 const PROMPT = '> ';
 
@@ -21,8 +21,10 @@ export function createComposerDock(config) {
   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%',
@@ -30,8 +32,12 @@ export function createComposerDock(config) {
     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: inputActive ? hex.primary : '#444466' }, PROMPT),
+      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,
@@ -42,13 +48,19 @@ export function createComposerDock(config) {
           showCursor: true,
         })
       ),
-      h(Text, { color: '#444466' }, '  '),
-      h(Text, { color: modelStatus ? hex.greenOnline : '#444466', bold: modelStatus }, modelLabel || '')
+      h(Text, { color: '#444466' }, ' '),
+      h(Text, { color: hex.border }, '\u2502')
     ),
     h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
-      h(Text, { color: '#333344' }, '/help  /clear  /model  /exit'),
+      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: '#333344' }, isStreaming ? 'Ctrl+C to stop' : '')
+      h(Text, { color: '#444466', bold: modelStatus }, modelLabel || '')
     )
   );
 }