openaxies 0.4.0 → 0.5.1

package/src/App.js

@@ -1,30 +1,20 @@
 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 { createComposerDock, DOCK_HEIGHT } from './components/ComposerDock.js';
 
 const h = React.createElement;
 
 export default AppRoot;
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
 function buildHistory(messages, newText) {
   const history = [];
   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 });
@@ -36,49 +26,47 @@ 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 hr(cols) {
+  const n = typeof cols === 'number' && cols > 0 ? cols : 80;
+  let s = '';
+  for (let i = 0; i < n; i++) s = s + '\u2500';
+  return h(Text, { color: '#1A1A28' }, s);
+}
+
+const SPINNER = ['\u25CB', '\u25D4', '\u25D0', '\u25D5', '\u25CF', '\u25D5', '\u25D0', '\u25D4'];
 
 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 [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 [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 overlayH = showOverlay ? 6 : 0;
+  const fixedH = 1 + overlayH + DOCK_HEIGHT;
   const availLines = Math.max(1, rows - fixedH);
 
   const abortRef = React.useRef(null);
-  const connectingRef = React.useRef(null);
+  const connRef = React.useRef(null);
   const spinnerRef = React.useRef(null);
-  const thinkingAccumRef = React.useRef('');
-
-  const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
+  const timerRef = React.useRef(null);
+  const thinkStartRef = React.useRef(null);
 
   React.useEffect(function () {
     if (isThinking === false) {
@@ -86,255 +74,217 @@ function AppRoot() {
         clearInterval(spinnerRef.current);
         spinnerRef.current = null;
       }
-      setSpinnerChar('');
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
       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() {
+      idx = (idx + 1) % SPINNER.length;
+      setSpinnerIdx(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]);
 
-  // ---------------------------------------------------------------------------
-  // 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);
-    }
+  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;
+    });
   }
 
-  // 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') {
-      return;
-    }
-
-    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-flash') {
-          return 'openaxis/openaxis-heavy';
-        }
-          return 'openaxis/openaxis-flash';
-      });
-    }
-
-    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 Flash 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 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 msgId = 'user-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
+    const safe = typeof text === 'string' ? text : '';
+    if (safe.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 () {
-      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;
+    setThinkingElapsed(0);
+
+    connRef.current = setInterval(function () {
+      setStreamText(function (p) {
+        if (p === ' connecting') return ' connecting.';
+        if (p === ' connecting.') return ' connecting..';
+        if (p === ' connecting..') return ' connecting...';
+        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 || 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(),
-        }]);
+      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 {
-      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 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];
-            const isInsideThink = checkThinkState(accumulated);
-            setScrollOffset(0);
+            const inside = checkThink(accumulated);
             setStreamText(accumulated);
-            setIsThinking(isInsideThink);
-            if (isInsideThink === true) {
-              thinkingAccumRef.current = 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 (resolve) {
-              setTimeout(resolve, 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);
-      thinkingAccumRef.current = '';
+      thinkStartRef.current = null;
+      setThinkingElapsed(0);
       setStreamingActive(false);
+
+      const finalText = streamText;
       setStreamText('');
 
-      if (accumulated.length > 0) {
-        setMessages(function (prev) {
-          return prev.concat([{
-            role: 'assistant',
-            content: accumulated,
-            id: 'resp-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
-          }]);
+      if (finalText.length > 0) {
+        setMessages(function (p) {
+          return p.concat([{ role: 'assistant', 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);
-      thinkingAccumRef.current = '';
+      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([{
+      setMessages(function (p) {
+        return p.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),
+          content: 'Error: ' + errMsg + '\n\nSpace cold-starting? Try again.',
+          id: 'er-' + Date.now(),
         }]);
       });
     }
   }
 
-  // ---------------------------------------------------------------------------
-  // 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) {
+  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);
+    }
+  }
 
-    // ── Overlay branch ──────────────────────────────────────────────────────
+  function handleCmd(item) {
+    if (item === null || item === undefined) return;
+    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);
+    setOverlayIndex(0);
+  }
+
+  useInput(function handleInput(input, key) {
     if (showOverlay === true) {
       if (key.escape === true) {
         setShowOverlay(false);
@@ -342,63 +292,31 @@ 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) handleCmd({ 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);
-      }
-      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);
-      });
+      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 (_) { }
+        try { abortRef.current.abort(); } catch (_) {}
         abortRef.current = null;
         setStreamingActive(false);
         setStreamText('');
@@ -407,27 +325,116 @@ function AppRoot() {
     }
   });
 
-  // ---------------------------------------------------------------------------
-  // Render
-  // ---------------------------------------------------------------------------
+  const activeInfo = getModelById(activeModel);
+  const activeLabel = activeInfo !== null ? activeInfo.label : 'OpenAxies';
+  const activeBadge = activeInfo !== null ? activeInfo.badge : '';
+
+  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 (msg.role === 'user') {
+      if (i > 0) viewLines.push({ t: 'sep' });
+      viewLines.push({ t: 'user', text: content });
+      viewLines.push({ t: 'sep' });
+    } else {
+      viewLines.push({ t: 'text', text: content });
+    }
+  }
+
+  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)' });
+    }
+    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 });
+    } else {
+      const clean = streamText.split('<think>').join('').split('</think>').join('');
+      viewLines.push({ t: 'text', text: clean });
+    }
+  }
+
+  if (viewLines.length === 0) {
+    viewLines.push({ t: 'idle', text: '  start typing to chat...' });
+  }
+
+  const visible = Math.max(1, availLines - 1);
+  const display = viewLines.slice(-visible);
+  const viewEls = [];
+
+  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') {
+      viewEls.push(
+        h(Box, { key: 'k-' + i, height: 1, paddingLeft: 1 },
+          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(Text, { color: '#FF9F43' }, l.text)
+        )
+      );
+    } else if (l.t === 'tool') {
+      viewEls.push(
+        h(Box, { key: 'tl-' + i, height: 1, paddingLeft: 1 },
+          h(Text, { color: '#5B5B8A' }, l.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 (l.t === 'text') {
+      viewEls.push(
+        h(Box, { key: 'a-' + i, height: 1, paddingLeft: 1 },
+          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)
+        )
+      );
+    }
+  }
+
+  const viewport = h(Box, {
+    flexGrow: 1,
+    height: availLines,
+    flexDirection: 'column',
+    overflow: 'hidden',
+    paddingBottom: 1,
+  }, ...viewEls);
 
-  const header = createBrandHeader(cols);
-  const routerBar = createRouterBar(activeModel, cols);
-  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset, isThinking, spinnerChar);
   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
+    onChange: handleChange,
+    onSubmit: function () {},
+    inputActive: showOverlay === false,
     isStreaming: streamingActive,
     terminalWidth: cols,
+    modelLabel: activeLabel + ' \u25CF',
+    modelStatus: true,
   });
 
-  // 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%',
@@ -435,10 +442,11 @@ 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
+    h(Box, { height: 1 }, hr(cols)),
+    viewport,
+    slashOverlay,
+    dock
   );
 }
+
+import { createSlashOverlay } from './components/SlashOverlay.js';