openaxies 0.2.1 → 0.4.0

package/package.json

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

package/src/App.js

@@ -56,6 +56,8 @@ function AppRoot() {
   const [streamText, setStreamText] = React.useState('');
   const [streamingActive, setStreamingActive] = React.useState(false);
   const [scrollOffset, setScrollOffset] = React.useState(0);
+  const [isThinking, setIsThinking] = React.useState(false);
+  const [spinnerChar, setSpinnerChar] = React.useState('');
 
   const commands = getCommands();
 
@@ -72,6 +74,34 @@ function AppRoot() {
   const availLines = Math.max(1, rows - fixedH);
 
   const abortRef = React.useRef(null);
+  const connectingRef = React.useRef(null);
+  const spinnerRef = React.useRef(null);
+  const thinkingAccumRef = React.useRef('');
+
+  const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
+
+  React.useEffect(function () {
+    if (isThinking === false) {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.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]);
+    }, 120);
+    return function cleanup() {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.current = null;
+      }
+    };
+  }, [isThinking]);
 
   // ---------------------------------------------------------------------------
   // Input handlers
@@ -120,7 +150,7 @@ function AppRoot() {
         if (prev === 'openaxis/openaxis-flash') {
           return 'openaxis/openaxis-heavy';
         }
-        return 'openaxis/openaxis-flash';
+          return 'openaxis/openaxis-flash';
       });
     }
 
@@ -133,7 +163,7 @@ function AppRoot() {
             '**Available commands:**\n' +
             '- `/help`  — Show this help\n' +
             '- `/clear` — Clear the conversation\n' +
-            '- `/model` — Toggle between OpenAxies Flash and Heavy\n' +
+            '- `/model` — Toggle between Flash and Heavy\n' +
             '- `/exit`  — Quit the application\n\n' +
             'Type your message and press **Enter** to chat.',
           id: 'help-' + Date.now(),
@@ -161,10 +191,23 @@ function AppRoot() {
       return prev.concat([{ role: 'user', content: safeText, id: msgId }]);
     });
     setInputBuffer('');
-    setStreamText('\u2022\u2022\u2022');  // animated placeholder
+    setStreamText(' connecting');
+    connectingRef.current = setInterval(function () {
+      setStreamText(function (prev) {
+        if (prev === ' connecting') return ' connecting.';
+        if (prev === ' connecting.') return ' connecting..';
+        if (prev === ' connecting..') return ' connecting...';
+        if (prev === ' connecting...') return ' connecting';
+        return prev;
+      });
+    }, 400);
 
     const modelInfo = getModelById(activeModel);
     if (modelInfo === null || modelInfo === undefined) {
+      if (connectingRef.current !== null) {
+        clearInterval(connectingRef.current);
+        connectingRef.current = null;
+      }
       setStreamingActive(false);
       setStreamText('');
       setScrollOffset(0);
@@ -183,46 +226,44 @@ function AppRoot() {
     abortRef.current = abortController;
 
     try {
+      function checkThinkState(text) {
+        const openIdx = text.lastIndexOf('<think>');
+        const closeIdx = text.lastIndexOf('</think>');
+        if (openIdx === -1 && closeIdx === -1) {
+          return false;
+        }
+        if (openIdx > closeIdx) {
+          return true;
+        }
+        return false;
+      }
+
       const gen = callModel(modelInfo, history, abortController.signal);
       let accumulated = '';
-      let thinkingId = null;
-      const thinkingLines = [];
+      let firstEvent = true;
 
       for await (const event of gen) {
         if (abortController.signal.aborted === true) {
           break;
         }
-        if (event.type === 'thinking') {
-          if (thinkingId === null) {
-            thinkingId = 'think-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
+        if (firstEvent === true) {
+          firstEvent = false;
+          if (connectingRef.current !== null) {
+            clearInterval(connectingRef.current);
+            connectingRef.current = null;
           }
-          thinkingLines.push(typeof event.content === 'string' ? event.content : '');
-          const content = thinkingLines.join('\n');
-          setMessages(function (prev) {
-            let replaced = false;
-            const next = [];
-            for (let i = 0; i < prev.length; i++) {
-              const item = prev[i];
-              if (item !== null && item !== undefined && item.id === thinkingId) {
-                next.push({ role: 'thinking', content: content, id: thinkingId });
-                replaced = true;
-              } else {
-                next.push(item);
-              }
-            }
-            if (replaced === false) {
-              next.push({ role: 'thinking', content: content, id: thinkingId });
-            }
-            return next;
-          });
-          setScrollOffset(0);
         }
-        if (event.type === 'token') {
+        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 isInsideThink = checkThinkState(accumulated);
             setScrollOffset(0);
             setStreamText(accumulated);
+            setIsThinking(isInsideThink);
+            if (isInsideThink === true) {
+              thinkingAccumRef.current = accumulated;
+            }
             await new Promise(function (resolve) {
               setTimeout(resolve, 0);
             });
@@ -240,6 +281,12 @@ function AppRoot() {
         }
       }
 
+      if (connectingRef.current !== null) {
+        clearInterval(connectingRef.current);
+        connectingRef.current = null;
+      }
+      setIsThinking(false);
+      thinkingAccumRef.current = '';
       setStreamingActive(false);
       setStreamText('');
 
@@ -253,6 +300,12 @@ function AppRoot() {
         });
       }
     } catch (err) {
+      if (connectingRef.current !== null) {
+        clearInterval(connectingRef.current);
+        connectingRef.current = null;
+      }
+      setIsThinking(false);
+      thinkingAccumRef.current = '';
       setStreamingActive(false);
       setStreamText('');
       setScrollOffset(0);
@@ -360,7 +413,7 @@ function AppRoot() {
 
   const header = createBrandHeader(cols);
   const routerBar = createRouterBar(activeModel, cols);
-  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset);
+  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset, isThinking, spinnerChar);
   const slashOverlay = showOverlay === true
     ? createSlashOverlay(commands, overlayIndex)
     : null;

package/src/components/ChatViewport.js

@@ -4,6 +4,9 @@ import { hex } from '../config/theme.js';
 
 const h = React.createElement;
 
+const THINK_OPEN = '<think>';
+const THINK_CLOSE = '</think>';
+
 function checkArray(arr) {
   if (Array.isArray(arr) === false) {
     return [];
@@ -11,49 +14,6 @@ function checkArray(arr) {
   return arr;
 }
 
-// Splits content on <think>...</think> tags.
-// Returns an array of { type: 'text' | 'think', content: string } parts.
-function parseThinkTags(content) {
-  if (typeof content !== 'string') {
-    return [];
-  }
-  const parts = [];
-  let remaining = content;
-  let inThink = false;
-
-  while (remaining.length > 0) {
-    if (inThink === false) {
-      const startIdx = remaining.indexOf('<think>');
-      if (startIdx === -1) {
-        if (remaining.length > 0) {
-          parts.push({ type: 'text', content: remaining });
-        }
-        break;
-      }
-      if (startIdx > 0) {
-        parts.push({ type: 'text', content: remaining.slice(0, startIdx) });
-      }
-      remaining = remaining.slice(startIdx + 7);
-      inThink = true;
-    } else {
-      const endIdx = remaining.indexOf('</think>');
-      if (endIdx === -1) {
-        if (remaining.length > 0) {
-          parts.push({ type: 'think', content: remaining });
-        }
-        break;
-      }
-      if (endIdx > 0) {
-        parts.push({ type: 'think', content: remaining.slice(0, endIdx) });
-      }
-      remaining = remaining.slice(endIdx + 8);
-      inThink = false;
-    }
-  }
-
-  return parts;
-}
-
 function clampWidth(width) {
   if (typeof width !== 'number' || width < 20) {
     return 80;
@@ -104,42 +64,70 @@ function pushWrapped(lines, text, width, color, bold) {
   }
 }
 
-function pushContentLines(lines, content, width) {
-  const parts = parseThinkTags(content);
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    if (part.type === 'think') {
-      pushWrapped(lines, '# think ' + part.content.trim(), width, '#555577', false);
-    } else {
-      pushWrapped(lines, part.content, width, hex.primary, false);
-    }
+function stripThinkTags(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  return text.split(THINK_OPEN).join('').split(THINK_CLOSE).join('');
+}
+
+function extractThinkContent(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  const openIdx = text.indexOf(THINK_OPEN);
+  if (openIdx === -1) {
+    return '';
+  }
+  const closeIdx = text.indexOf(THINK_CLOSE, openIdx + THINK_OPEN.length);
+  if (closeIdx === -1) {
+    return text.slice(openIdx + THINK_OPEN.length);
+  }
+  return text.slice(openIdx + THINK_OPEN.length, closeIdx);
+}
+
+function extractAfterThink(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  const closeIdx = text.lastIndexOf(THINK_CLOSE);
+  if (closeIdx === -1) {
+    return '';
   }
+  return text.slice(closeIdx + THINK_CLOSE.length);
 }
 
-// Transcript message - linear terminal flow, no side panels or bubbles.
-function pushMessageLines(lines, msg, safeCols) {
+function pushRawMessage(lines, msg, safeCols) {
   if (msg === null || msg === undefined || typeof msg !== 'object') {
     return;
   }
 
   const content = typeof msg.content === 'string' ? msg.content : '';
+  if (content.length === 0) {
+    return;
+  }
 
-  if (msg.role === 'thinking') {
-    pushWrapped(lines, content, safeCols, hex.orange, false);
+  const clean = stripThinkTags(content);
+  if (clean.length === 0) {
     return;
   }
 
   if (msg.role === 'user') {
-    pushWrapped(lines, 'You > ' + content, safeCols, hex.neonBlue, true);
+    pushWrapped(lines, clean, safeCols, hex.neonBlue, false);
     return;
   }
 
-  pushLine(lines, 'OpenAxies $', hex.greenOnline, true);
-  pushContentLines(lines, content, safeCols);
-  pushLine(lines, '', hex.primary, false);
+  pushWrapped(lines, clean, safeCols, hex.primary, false);
+}
+
+function pushSpinnerLine(lines, spinnerChar, safeCols) {
+  const safeChar = typeof spinnerChar === 'string' && spinnerChar.length > 0
+    ? spinnerChar
+    : '◐';
+  pushLine(lines, ' ' + safeChar + ' thinking', '#FF9F43', true);
 }
 
-export function createChatViewport(messages, streamText, availLines, cols, scrollOffset) {
+export function createChatViewport(messages, streamText, availLines, cols, scrollOffset, isThinking, spinnerChar) {
   const safeMessages = checkArray(messages);
   const safeAvail = typeof availLines === 'number' && availLines > 0 ? availLines : 1;
   const safeCols = clampWidth(cols);
@@ -147,19 +135,30 @@ export function createChatViewport(messages, streamText, availLines, cols, scrol
     ? Math.floor(scrollOffset)
     : 0;
   const hasStream = typeof streamText === 'string' && streamText.length > 0;
+  const isStreamingThink = isThinking === true && hasStream === true;
   const transcriptLines = [];
 
   for (let i = 0; i < safeMessages.length; i++) {
-    pushMessageLines(transcriptLines, safeMessages[i], safeCols);
+    pushRawMessage(transcriptLines, safeMessages[i], safeCols);
   }
 
   if (hasStream === true) {
-    pushLine(transcriptLines, 'OpenAxies $ streaming...', hex.greenOnline, true);
-    pushContentLines(transcriptLines, streamText, safeCols);
+    if (isStreamingThink === true) {
+      pushSpinnerLine(transcriptLines, spinnerChar, safeCols);
+      const thinkContent = extractThinkContent(streamText);
+      if (thinkContent.length > 0) {
+        pushWrapped(transcriptLines, thinkContent, safeCols, '#FF9F43', false);
+      }
+    } else {
+      const clean = stripThinkTags(streamText);
+      if (clean.length > 0) {
+        pushWrapped(transcriptLines, clean, safeCols, hex.primary, false);
+      }
+    }
   }
 
   if (transcriptLines.length === 0) {
-    pushLine(transcriptLines, '# waiting for input', '#333355', false);
+    pushLine(transcriptLines, '  awaiting input...', '#333355', false);
   }
 
   const visibleHeight = Math.max(1, safeAvail - 1);

package/src/components/RouterBar.js

@@ -52,7 +52,7 @@ export function createRouterBar(activeModel, cols) {
       alignItems: 'center',
     },
 
-      // ── Flash slot ──
+      // ── Mixtral slot ──
       h(Text, {
         color: isFlash ? hex.neonBlue : '#333355',
         bold: isFlash,

package/src/config/models.js

@@ -33,7 +33,6 @@ function checkModels(arr) {
   return arr;
 }
 
-// Two routed models only — Flash (fast) and Heavy (quality).
 const MODELS = Object.freeze([
   {
     id: 'openaxis/openaxis-flash',

package/src/providers/index.js

@@ -55,26 +55,18 @@ export async function* callModel(modelConfig, messages, signal) {
   let modelMessages = messages;
 
   if (shouldUseWebSearch(messages) === true) {
-    yield { type: 'thinking', content: 'OpenAxies thinking > [Internal reasoning]' };
-    yield { type: 'thinking', content: 'Checking tools...' };
-    yield { type: 'thinking', content: 'Let me do websearch' };
-    yield { type: 'thinking', content: 'Doing websearch' };
-
     try {
       const webResult = await runWebSearchGraph(messages, signal);
-      if (webResult.used === true) {
-        yield { type: 'thinking', content: 'Searched ' + webResult.sites + ' sites' };
-        yield { type: 'thinking', content: 'Thinking...' };
+      if (webResult.used === true && webResult.sites > 0) {
         modelMessages = [{
           role: 'system',
           content:
-            'Use these websearch results when they are relevant. Cite URLs inline when possible.\n\n' +
-            webResult.summary,
+            'Current web search results (use when relevant, cite URLs inline):\n\n' +
+            webResult.summary +
+            '\n\nNow respond to the user using these results as needed.',
         }].concat(messages);
       }
-    } catch (err) {
-      yield { type: 'thinking', content: 'Searched 0 sites' };
-      yield { type: 'thinking', content: 'Thinking...' };
+    } catch (_) {
     }
   }
 

package/src/providers/streaming.js

@@ -1,5 +1,5 @@
-const CONNECT_TIMEOUT = 120000;
-const READ_TIMEOUT = 15000;
+const CONNECT_TIMEOUT = 20000;
+const READ_TIMEOUT = 8000;
 
 function readWithTimeout(reader, timeoutMs) {
   return Promise.race([