openaxies 0.3.0 → 0.5.0

package/src/App.js

@@ -1,23 +1,18 @@
 import React from 'react';
-import { Box, useInput, useStdout } from 'ink';
+import { Box, Text, useInput, useStdout } from 'ink';
 import { hex } from './config/theme.js';
 import { getCommands } from './config/commands.js';
-import { getModelById, DEFAULT_MODEL_ID } from './config/models.js';
+import { getModels, getModelById, DEFAULT_MODEL_ID } from './config/models.js';
 import { callModel } from './providers/index.js';
-import { createBrandHeader, BRAND_HEIGHT } from './components/BrandHeader.js';
-import { createRouterBar, ROUTER_HEIGHT } from './components/RouterBar.js';
-import { createChatViewport } from './components/ChatViewport.js';
-import { createSlashOverlay, SLASH_OVERLAY_HEIGHT } from './components/SlashOverlay.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;
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
 function buildHistory(messages, newText) {
   const history = [];
   for (let i = 0; i < messages.length; i++) {
@@ -36,157 +31,169 @@ function buildHistory(messages, newText) {
   return history;
 }
 
-// ---------------------------------------------------------------------------
-// Root component
-// ---------------------------------------------------------------------------
+function formatTimer(seconds) {
+  if (typeof seconds !== 'number' || seconds < 0) {
+    return '0.0s';
+  }
+  return seconds.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 AppRoot() {
   const { stdout } = useStdout();
   const rows = stdout.rows || 24;
   const cols = stdout.columns || 80;
 
-  // --- UI state ---
-  const [inputBuffer, setInputBuffer] = React.useState('');
-  const [showOverlay, setShowOverlay] = React.useState(false);
-  const [overlayIndex, setOverlayIndex] = React.useState(0);  // cursor inside overlay
-
-  // --- Chat state ---
   const [messages, setMessages] = React.useState([]);
   const [activeModel, setActiveModel] = React.useState(DEFAULT_MODEL_ID);
   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 [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();
-
-  // ---------------------------------------------------------------------------
-  // Strict row budget
-  //   BrandHeader    : BRAND_HEIGHT  (7)
-  //   RouterBar      : ROUTER_HEIGHT (2)
-  //   SlashOverlay   : SLASH_OVERLAY_HEIGHT (6) — conditional
-  //   ComposerDock   : DOCK_HEIGHT   (3)
-  //   ChatViewport   : rows - all fixed rows (flexGrow fills remainder)
-  // ---------------------------------------------------------------------------
-  const overlayH = showOverlay ? SLASH_OVERLAY_HEIGHT : 0;
-  const fixedH = BRAND_HEIGHT + ROUTER_HEIGHT + overlayH + DOCK_HEIGHT;
+  const MODEL_BAR_H = 1;
+  const SEP_H = 1;
+  const DOCK = DOCK_HEIGHT;
+  const overlayH = showOverlay ? 6 : 0;
+  const fixedH = MODEL_BAR_H + SEP_H + overlayH + DOCK;
   const availLines = Math.max(1, rows - fixedH);
 
   const abortRef = React.useRef(null);
-  const connectingRef = React.useRef(null);
-
-  // ---------------------------------------------------------------------------
-  // Input handlers
-  // ---------------------------------------------------------------------------
-
-  function handleInputChange(value) {
-    const safeValue = typeof value === 'string' ? value : '';
-    setInputBuffer(safeValue);
-    // Open overlay on first '/' character
-    if (safeValue.length === 1 && safeValue[0] === '/' && showOverlay === false) {
-      setShowOverlay(true);
-      setOverlayIndex(0);
-    }
-    // Close overlay if buffer no longer starts with '/'
-    if (showOverlay === true && (safeValue.length === 0 || safeValue[0] !== '/')) {
-      setShowOverlay(false);
-    }
-  }
-
-  // onSubmit for TextInput — actual submit goes through useInput Enter handler.
-  function handleInputSubmit() {
-    return;
-  }
-
-  function handleSlashSelect(item) {
-    if (item === null || item === undefined) {
-      return;
-    }
-    const trigger = item.value;
-    if (typeof trigger !== 'string') {
+  const connRef = React.useRef(null);
+  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) {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.current = null;
+      }
+      if (timerRef.current !== null) {
+        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]);
+    }, 100);
+    timerRef.current = setInterval(function () {
+      if (thinkStartRef.current !== null) {
+        setThinkingElapsed((Date.now() - thinkStartRef.current) / 1000);
+      }
+    }, 100);
+    return function () {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.current = null;
+      }
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [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;
+    });
+  }
 
-    if (trigger === '/exit') {
-      process.exit(0);
-    }
-
-    if (trigger === '/clear') {
-      setMessages([]);
-      setScrollOffset(0);
-    }
-
-    if (trigger === '/model') {
-      // Toggle between the two local models
-      setActiveModel(function (prev) {
-        if (prev === 'openaxis/openaxis-mixtral') {
-          return 'openaxis/openaxis-heavy';
-        }
-          return 'openaxis/openaxis-mixtral';
-      });
-    }
-
-    if (trigger === '/help') {
-      setScrollOffset(0);
-      setMessages(function (prev) {
-        return prev.concat([{
-          role: 'assistant',
-          content:
-            '**Available commands:**\n' +
-            '- `/help`  — Show this help\n' +
-            '- `/clear` — Clear the conversation\n' +
-            '- `/model` — Toggle between Mixtral and Heavy\n' +
-            '- `/exit`  — Quit the application\n\n' +
-            'Type your message and press **Enter** to chat.',
-          id: 'help-' + Date.now(),
-        }]);
-      });
-    }
-
-    // Always close & clear after any selection
-    setInputBuffer('');
-    setShowOverlay(false);
-    setOverlayIndex(0);
+  function checkThinkState(text) {
+    const openIdx = text.lastIndexOf('<think>');
+    const closeIdx = text.lastIndexOf('</think>');
+    if (openIdx === -1 && closeIdx === -1) return false;
+    return openIdx > closeIdx;
   }
 
   async function handleSubmit(text) {
     const safeText = typeof text === 'string' ? text : '';
-    if (safeText.length === 0 || streamingActive === true) {
-      return;
-    }
-
-    const msgId = 'user-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
+    if (safeText.length === 0 || streamingActive === true) return;
 
     setStreamingActive(true);
-    setScrollOffset(0);
-    setMessages(function (prev) {
-      return prev.concat([{ role: 'user', content: safeText, id: msgId }]);
-    });
-    setInputBuffer('');
+    setToolInfo(null);
     setStreamText(' connecting');
-    connectingRef.current = setInterval(function () {
+    setThinkingElapsed(0);
+    connRef.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;
+        return ' connecting';
       });
     }, 400);
 
+    setMessages(function (prev) {
+      return prev.concat([{
+        role: 'user',
+        content: safeText,
+        id: 'u-' + Date.now(),
+      }]);
+    });
+    setInputBuffer('');
+
     const modelInfo = getModelById(activeModel);
-    if (modelInfo === null || modelInfo === undefined) {
-      if (connectingRef.current !== null) {
-        clearInterval(connectingRef.current);
-        connectingRef.current = null;
+    if (modelInfo === null) {
+      if (connRef.current !== null) {
+        clearInterval(connRef.current);
+        connRef.current = null;
       }
       setStreamingActive(false);
       setStreamText('');
-      setScrollOffset(0);
       setMessages(function (prev) {
         return prev.concat([{
           role: 'assistant',
           content: 'No model selected. Use `/model` to switch.',
-          id: 'err-' + Date.now(),
+          id: 'e-' + Date.now(),
         }]);
       });
       return;
@@ -200,91 +207,148 @@ function AppRoot() {
       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 (abortController.signal.aborted === true) break;
+
         if (firstEvent === true) {
           firstEvent = false;
-          if (connectingRef.current !== null) {
-            clearInterval(connectingRef.current);
-            connectingRef.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++) {
             accumulated = accumulated + content[i];
-            setScrollOffset(0);
+            const insideThink = checkThinkState(accumulated);
             setStreamText(accumulated);
-            await new Promise(function (resolve) {
-              setTimeout(resolve, 0);
-            });
+            setIsThinking(insideThink);
+            if (insideThink === true && thinkStarted === false) {
+              thinkStarted = true;
+              thinkStartRef.current = Date.now();
+              setThinkingElapsed(0);
+            }
+            if (insideThink === false && thinkStarted === true) {
+              thinkStarted = false;
+              thinkStartRef.current = null;
+              setThinkingElapsed(0);
+            }
+            await new Promise(function (r) { setTimeout(r, 0); });
           }
         }
-        if (event.type === 'done') {
-          break;
-        }
+
+        if (event.type === 'done') break;
         if (event.type === 'timeout') {
           if (accumulated.length > 0) {
-            accumulated = accumulated + '\n\n*[Response incomplete \u2014 stream timed out]*';
+            accumulated = accumulated + '\n\n\u2014 stream timed out \u2014';
           }
           setStreamText(accumulated);
           break;
         }
       }
 
-      if (connectingRef.current !== null) {
-        clearInterval(connectingRef.current);
-        connectingRef.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 (accumulated.length > 0) {
+      if (finalText.length > 0) {
         setMessages(function (prev) {
           return prev.concat([{
             role: 'assistant',
-            content: accumulated,
-            id: 'resp-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
+            content: finalText,
+            id: 'a-' + Date.now(),
           }]);
         });
       }
     } catch (err) {
-      if (connectingRef.current !== null) {
-        clearInterval(connectingRef.current);
-        connectingRef.current = null;
+      if (connRef.current !== null) {
+        clearInterval(connRef.current);
+        connRef.current = null;
       }
+      setIsThinking(false);
+      thinkStartRef.current = null;
+      setThinkingElapsed(0);
       setStreamingActive(false);
       setStreamText('');
-      setScrollOffset(0);
-      const errMsg = (err !== null && err !== undefined)
+      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(),
+        }]);
+      });
+    }
+  }
+
+  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 handleSlashSelect(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:
-            '**Connection Error:** ' + errMsg +
-            '\n\nThe Space may be cold-starting (model download can take 30\u2013120 s). Please try again.',
-          id: 'err-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
+            '**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(),
         }]);
       });
     }
+    setInputBuffer('');
+    setShowOverlay(false);
+    setOverlayIndex(0);
   }
 
-  // ---------------------------------------------------------------------------
-  // Keyboard router
-  //
-  // Overlay mode:  ↑↓ move cursor · Enter selects · Esc dismisses
-  //                All other keys are absorbed (TextInput has focus=false)
-  //
-  // Normal mode:   Enter submits · Ctrl+C abort/quit
-  // ---------------------------------------------------------------------------
   useInput(function handleInput(input, key) {
-
-    // ── Overlay branch ──────────────────────────────────────────────────────
     if (showOverlay === true) {
       if (key.escape === true) {
         setShowOverlay(false);
@@ -292,63 +356,33 @@ function AppRoot() {
         setOverlayIndex(0);
         return;
       }
-
       if (key.upArrow === true) {
-        setOverlayIndex(function (prev) {
-          return prev > 0 ? prev - 1 : commands.length - 1;  // wrap around top
-        });
+        setOverlayIndex(function (p) { return p > 0 ? p - 1 : commands.length - 1; });
         return;
       }
-
       if (key.downArrow === true) {
-        setOverlayIndex(function (prev) {
-          return prev < commands.length - 1 ? prev + 1 : 0;  // wrap around bottom
-        });
+        setOverlayIndex(function (p) { return p < commands.length - 1 ? p + 1 : 0; });
         return;
       }
-
       if (key.return === true) {
-        const selectedCmd = commands[overlayIndex];
-        if (selectedCmd !== null && selectedCmd !== undefined) {
-          handleSlashSelect({ value: selectedCmd.trigger });
-        }
+        const cmd = commands[overlayIndex];
+        if (cmd !== null && cmd !== undefined) handleSlashSelect({ value: cmd.trigger });
         return;
       }
-
-      // Absorb everything else while overlay is open
       return;
     }
 
-    // ── Normal branch ────────────────────────────────────────────────────────
     if (key.return === true) {
-      const safeValue = typeof inputBuffer === 'string' ? inputBuffer : '';
-      if (safeValue.length > 0 && streamingActive === false) {
-        handleSubmit(safeValue);
+      const safe = typeof inputBuffer === 'string' ? inputBuffer : '';
+      if (safe.length > 0 && streamingActive === false) {
+        handleSubmit(safe);
       }
       return;
     }
 
-    if (key.pageUp === true || (key.ctrl === true && key.upArrow === true)) {
-      const pageSize = Math.max(1, availLines - 2);
-      setScrollOffset(function (prev) {
-        return prev + pageSize;
-      });
-      return;
-    }
-
-    if (key.pageDown === true || (key.ctrl === true && key.downArrow === true)) {
-      const pageSize = Math.max(1, availLines - 2);
-      setScrollOffset(function (prev) {
-        return Math.max(0, prev - pageSize);
-      });
-      return;
-    }
-
     if (key.ctrl === true && (input === 'c' || input === 'C')) {
       if (abortRef.current !== null) {
-        try {
-          abortRef.current.abort();
-        } catch (_) { }
+        try { abortRef.current.abort(); } catch (_) {}
         abortRef.current = null;
         setStreamingActive(false);
         setStreamText('');
@@ -357,27 +391,141 @@ function AppRoot() {
     }
   });
 
-  // ---------------------------------------------------------------------------
-  // Render
-  // ---------------------------------------------------------------------------
+  const modelBar = createModelBar(activeModel, cols);
+  const particleTop = createParticleRow(particleFrame, cols, 'tp');
+
+  const viewLines = [];
+  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 (i > 0) viewLines.push({ type: 'sep' });
+
+    if (msg.role === 'user') {
+      viewLines.push({ type: 'user', text: content });
+      viewLines.push({ type: 'sep' });
+    } else {
+      viewLines.push({ type: 'assistant', 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 (isThinking === true) {
+      const sp = typeof spinnerChar === 'string' && spinnerChar.length > 0 ? spinnerChar : '\u25CB';
+      viewLines.push({
+        type: 'think',
+        spin: sp,
+        elapsed: formatTimer(thinkingElapsed),
+      });
+      const clean = streamText.split('<think>').join('').split('</think>').join('');
+      viewLines.push({ type: 'stream', text: clean, color: '#FF9F43' });
+    } else {
+      const clean = streamText.split('<think>').join('').split('</think>').join('');
+      viewLines.push({ type: 'stream', text: clean, color: hex.primary });
+    }
+  }
+
+  if (viewLines.length === 0) {
+    viewLines.push({ type: 'muted', text: '  type a message to start...' });
+  }
+
+  const visibleHeight = Math.max(1, availLines - 1);
+  const displayLines = viewLines.slice(-visibleHeight);
+  const viewElements = [];
+
+  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
+          )
+        )
+      );
+    } else if (line.type === 'tool') {
+      viewElements.push(
+        h(Box, { key: 'vtl-' + i, height: 1 },
+          h(Text, { color: '#5B5B8A' }, line.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 (line.type === 'assistant') {
+      viewElements.push(
+        h(Box, {
+          key: 'va-' + i,
+          height: 1,
+          paddingLeft: 1,
+        },
+          h(Text, { color: hex.primary }, line.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 (line.type === 'muted') {
+      viewElements.push(
+        h(Box, { key: 'vm-' + i, height: 1, paddingLeft: 1 },
+          h(Text, { color: '#333355' }, line.text)
+        )
+      );
+    }
+  }
+
+  const viewport = h(Box, {
+    flexGrow: 1,
+    height: availLines,
+    flexDirection: 'column',
+    overflow: 'hidden',
+    paddingBottom: 1,
+  }, ...viewElements);
+
+  const particleBot = createParticleRow(particleFrame, cols, 'bt');
 
-  const header = createBrandHeader(cols);
-  const routerBar = createRouterBar(activeModel, cols);
-  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset);
   const slashOverlay = showOverlay === true
     ? createSlashOverlay(commands, overlayIndex)
     : null;
+
   const dock = createComposerDock({
     value: inputBuffer,
     onChange: handleInputChange,
-    onSubmit: handleInputSubmit,
-    inputActive: showOverlay === false,  // yield focus to overlay navigation
+    onSubmit: function () {},
+    inputActive: showOverlay === false,
     isStreaming: streamingActive,
     terminalWidth: cols,
   });
 
-  // Strict column layout — total height === rows (no scroll, no overflow).
-  // ComposerDock has flexShrink:0 so it is always pinned at bottom.
   return h(Box, {
     flexDirection: 'column',
     width: '100%',
@@ -385,10 +533,14 @@ function AppRoot() {
     backgroundColor: hex.black,
     overflow: 'hidden',
   },
-    header,       // 7 rows
-    routerBar,    // 2 rows
-    viewport,     // dynamic — flexGrow fills all remaining rows
-    slashOverlay, // 6 rows (null when closed)
-    dock          // 3 rows — flexShrink:0, always at bottom
+    modelBar,
+    h(Box, { height: 1 }, barLine(cols)),
+    h(Box, { height: 1, paddingLeft: 1 }, particleTop),
+    viewport,
+    h(Box, { height: 1, paddingLeft: 1 }, particleBot),
+    slashOverlay,
+    dock
   );
 }
+
+import { createSlashOverlay } from './components/SlashOverlay.js';