clarity-ai 6.2.3 → 6.3.0

package/bin/clarity.js

@@ -1,20 +1,13 @@
 #!/usr/bin/env node
 import React from 'react';
 import { render } from 'ink';
-import { App } from '../src/app.js';
+import { App } from '../src/components/AppRoot.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
 
-// Keep stdin flowing so Ink's useInput hooks can register.
-// This must happen before any async I/O that might pause stdin.
 process.stdin.resume();
 process.stdin.setEncoding('utf8');
 
-// Do NOT clear the screen here. Ink's { fullscreen: true } switches
-// to the alternate screen buffer on mount, which implicitly clears
-// the visible area. Any manual \x1b[2J before render() would clear
-// the main buffer — destructive, shows as a flash on Termux.
-
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
@@ -28,37 +21,27 @@ async function main() {
     });
     const { setKey } = await import('../src/config/keys.js');
     setKey(provider, key);
-    // readline.close() can leave stdin paused — restore it for Ink
     process.stdin.resume();
   }
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  // Mount Ink. fullscreen:true enters the alternate screen buffer.
-  // We DO NOT await waitUntilExit; on some Termux/Node combos it
-  // resolves before the first frame renders. Instead we keep the
-  // process alive with a never-resolving promise and exit only via
-  // signal handlers or process.exit from inside the app.
   const { clear } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
   });
 
-  // Keep the event loop alive — Ink's reconciler settles
-  // synchronously when no async state updates are queued.
   setInterval(() => {}, 2 ** 31 - 1);
 
-  // Signal handlers are the ONLY way to exit.
   function cleanup() {
-    try { clear(); } catch {}                     // Ink unmount — exit alt buffer, restore TTY
-    process.stdout.write('\x1b[?25h\x1b[0m');     // show cursor, reset attrs
+    try { clear(); } catch {}
+    process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
 
-  // Never-resolving promise — we stay alive until a signal fires cleanup.
   await new Promise(() => {});
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "6.2.3",
-  "description": "Premium OpenCode-style terminal AI agent — 24-bit TrueColor theme, 8s timeout recovery, virtual scroll, inline tool trees, collapsible thought cards",
+  "version": "6.3.0",
+  "description": "Premium terminal AI agent — fixed-height viewport, box-drawing UI, TrueColor theme, streaming with abort",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
@@ -16,14 +16,7 @@
     "ink": "^5",
     "react": "^18",
     "ink-spinner": "^5",
-    "marked": "^12",
-    "cli-highlight": "^2",
     "chalk": "^5",
-    "ansi-escapes": "^7",
-    "cli-cursor": "^5",
-    "wrap-ansi": "^9",
-    "strip-ansi": "^7",
-    "string-width": "^7",
-    "picocolors": "^1"
+    "wrap-ansi": "^9"
   }
 }

package/src/chat.js

@@ -1,6 +1,8 @@
 import { callAI } from './providers/index.js';
 import { setKey } from './config/keys.js';
 import { TOOLS, executeTool } from './tools.js';
+import { cancelStream } from './components/AppRoot.js';
+
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 export function createChatState() {
@@ -12,8 +14,6 @@ export function createChatState() {
     }],
     thinking: false,
     streamContent: '',
-    awaitingKey: false,
-    blockedProvider: null,
     agentMode: true,
     agentStatus: '',
     toolExecutions: [],
@@ -26,8 +26,8 @@ let execId = 0;
 function nextId() { return 'm' + (++msgId); }
 function nextExecId() { return 'x' + (++execId); }
 
-export async function handleSend(state, setState, input, model, provider, onStreamContent) {
-  if (!input.trim() || state.awaitingKey) return;
+export async function handleSend(state, setState, input, model, provider, onStreamContent, signal) {
+  if (!input.trim()) return;
 
   const userMsg = { id: nextId(), role: 'user', content: input };
   setState(s => ({
@@ -57,8 +57,9 @@ export async function handleSend(state, setState, input, model, provider, onStre
       return base;
     });
 
-    await processStream(provider, model, history, state.agentMode, setState, onStreamContent);
+    await processStream(provider, model, history, state.agentMode, setState, onStreamContent, 0, signal);
   } catch (err) {
+    if (err.name === 'AbortError') return;
     const thoughtTime = state.thoughtTimer ? Date.now() - state.thoughtTimer : 0;
     setState(s => ({
       ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null,
@@ -73,18 +74,20 @@ export async function handleSend(state, setState, input, model, provider, onStre
   }
 }
 
-async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0) {
+async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0, signal) {
   if (depth > 8) {
     setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
     onStreamContent('');
     return;
   }
+  if (signal?.aborted) return;
 
   let stream;
   try {
-    stream = callAI(provider, model, history, { tools: agentMode ? TOOLS : undefined });
+    stream = callAI(provider, model, history, { tools: agentMode ? TOOLS : undefined, signal });
   } catch (err) {
-    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
+    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth, signal); }
+    if (err.name === 'AbortError') return;
     throw err;
   }
 
@@ -95,13 +98,13 @@ async function processStream(provider, model, history, agentMode, setState, onSt
 
   try {
     for await (const event of stream) {
+      if (signal?.aborted) return;
       if (event.type === 'token') {
         buffer += event.content;
         onStreamContent(buffer);
         setState(s => ({ ...s, agentStatus: 'Writing response...' }));
       } else if (event.type === 'tool_calls') {
         if (!timedOut) toolCallsData = event.calls;
-      } else if (event.type === 'done') {
       } else if (event.type === 'timeout') {
         timedOut = true;
         setState(s => ({
@@ -119,11 +122,13 @@ async function processStream(provider, model, history, agentMode, setState, onSt
       }
     }
   } catch (err) {
+    if (err.name === 'AbortError') return;
     if (err.type === 'rate_limit') {
       await sleep(2000);
       setState(s => ({ ...s, agentStatus: 'Retrying after rate limit...' }));
-      return processStream(provider, model, history, agentMode, setState, onStreamContent, depth);
+      return processStream(provider, model, history, agentMode, setState, onStreamContent, depth, signal);
     }
+    if (signal?.aborted) return;
     throw err;
   }
 
@@ -142,7 +147,7 @@ async function processStream(provider, model, history, agentMode, setState, onSt
     onStreamContent('');
   }
 
-  if (timedOut) {
+  if (timedOut || signal?.aborted) {
     setState(s => ({ ...s, thinking: false, toolExecutions: [], thoughtTimer: null }));
     onStreamContent('');
     return;
@@ -168,6 +173,7 @@ async function processStream(provider, model, history, agentMode, setState, onSt
 
     const toolResults = [];
     for (let i = 0; i < toolCallsData.length; i++) {
+      if (signal?.aborted) return;
       const tc = toolCallsData[i];
       const { name, arguments: argsStr } = tc.function;
       let args;
@@ -203,6 +209,8 @@ async function processStream(provider, model, history, agentMode, setState, onSt
       }));
     }
 
+    if (signal?.aborted) return;
+
     setState(s => ({
       ...s,
       agentStatus: 'Processing results...',
@@ -230,12 +238,15 @@ async function processStream(provider, model, history, agentMode, setState, onSt
         ...toolResults.map(tr => ({
           id: nextId(), role: 'tool', content: tr.content,
           tool_call_id: tr.tool_call_id, toolName: tr.name,
+          completed: true,
         })),
       ],
       toolExecutions: [],
       agentStatus: '',
     }));
 
+    if (signal?.aborted) return;
+
     const newHistory = [
       ...history,
       { role: 'assistant', content: buffer || null, tool_calls: toolCallsData.map(tc => ({
@@ -245,7 +256,7 @@ async function processStream(provider, model, history, agentMode, setState, onSt
       ...toolResults,
     ];
 
-    await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1);
+    await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1, signal);
   } else {
     setState(s => ({
       ...s,
@@ -267,7 +278,7 @@ export async function handleCommand(input, state, setState, modelSetter, provide
       if (args.length >= 2) {
         setKey(args[0], args[1]);
         setState(s => ({
-          ...s, awaitingKey: false, blockedProvider: null,
+          ...s,
           messages: [...s.messages, { id: nextId(), role: 'system', content: 'Key saved for ' + args[0] }],
         }));
       } else {
@@ -303,6 +314,7 @@ export async function handleCommand(input, state, setState, modelSetter, provide
         '/model                  Switch model',
         '/provider               Switch provider',
         '/agent                  Toggle agent mode',
+        '/stop                   Cancel streaming',
         '/clear                  Clear conversation',
         '/export                 Export conversation',
         '/help                   Show this help',

package/src/{app.js → components/AppRoot.js}

@@ -1,12 +1,25 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Box } from 'ink';
-import { MessageList } from './components/MessageList.js';
-import { Composer } from './components/Composer.js';
-import { CommandPicker } from './components/CommandPicker.js';
-import { ModelPicker } from './components/ModelPicker.js';
-import { createChatState, handleSend, handleCommand } from './chat.js';
-import { theme } from './config/theme.js';
-const { createElement: h } = React;
+import { createChatState, handleSend, handleCommand } from '../chat.js';
+import { hex } from '../config/theme.js';
+import { Layout } from './Layout.js';
+
+let abortController = null;
+
+export function getAbortController() {
+  return abortController;
+}
+
+export function setAbortController(ac) {
+  abortController = ac;
+}
+
+export function cancelStream() {
+  if (abortController) {
+    try { abortController.abort(); } catch {}
+    abortController = null;
+  }
+}
 
 export function App({ config }) {
   const [state, setState] = useState(() => createChatState());
@@ -20,18 +33,29 @@ export function App({ config }) {
   const stateRef = useRef(state);
   const modelRef = useRef(model);
   const providerRef = useRef(provider);
+  const streamRef = useRef(streamContent);
   stateRef.current = state;
   modelRef.current = model;
   providerRef.current = provider;
+  streamRef.current = streamContent;
 
   const onSubmit = useCallback(async (input) => {
+    if (input === '/exit') { process.exit(0); return; }
     if (input.startsWith('/')) {
       if (input === '/model' || input === '/models') { setShowModels(true); return; }
       if (input === '/help') { setShowCommands(true); return; }
+      if (input === '/stop') { cancelStream(); return; }
       await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
       return;
     }
-    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent);
+    cancelStream();
+    const ac = new AbortController();
+    setAbortController(ac);
+    ac.signal.addEventListener('abort', () => {
+      setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
+      setStreamContent('');
+    });
+    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent, ac.signal);
   }, []);
 
   function handleCommandSelect(cmdName) {
@@ -49,38 +73,18 @@ export function App({ config }) {
     }));
   }
 
-  return h(Box, { flexDirection: 'column', backgroundColor: theme.bg, minHeight: '100%' },
-    h(Box, { flexGrow: 1, flexDirection: 'column', minHeight: 0 },
-      h(MessageList, {
-        messages: state.messages,
-        thinking: state.thinking,
-        streamContent,
-        agentStatus: state.agentStatus,
-        toolExecutions: state.toolExecutions,
-      })
-    ),
-    showCommands || showModels
-      ? h(Box, { flexDirection: 'column', marginBottom: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: theme.borderLight },
-          showCommands
-            ? h(CommandPicker, {
-                query: '',
-                onSelect: handleCommandSelect,
-                onClose: () => setShowCommands(false),
-              })
-            : null,
-          showModels
-            ? h(ModelPicker, {
-                onSelect: handleModelSelect,
-                onClose: () => setShowModels(false),
-              })
-            : null
-        )
-      : null,
-    h(Composer, {
-      provider,
+  return Box({ flexDirection: 'column', backgroundColor: hex.bg },
+    Layout({
+      state,
+      streamContent,
       model,
-      agentMode: state.agentMode,
-      thinking: state.thinking,
+      provider,
+      showCommands,
+      showModels,
+      onCommandSelect: handleCommandSelect,
+      onModelSelect: handleModelSelect,
+      onCloseCommands: () => setShowCommands(false),
+      onCloseModels: () => setShowModels(false),
       onSlash: () => setShowCommands(true),
       onSubmit,
     })

package/src/components/CodeBlock.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../config/theme.js';
+import { hex, usym } from '../config/theme.js';
+import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
 const LANG_COLORS = {
@@ -17,23 +18,30 @@ export function CodeBlock({ code, language }) {
   const lines = useMemo(() => String(code).split('\n'), [code]);
   const langColor = LANG_COLORS[lang] || '#555';
   const lnW = String(lines.length).length;
+  const { cols } = getLayout();
+  const maxLines = 20;
+  const visible = lines.slice(0, maxLines);
 
-  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 0 },
-    h(Box, { flexDirection: 'row', backgroundColor: theme.codeBg },
-      h(Text, { color: langColor, bold: true, backgroundColor: '#1C1C1C' }, ' ' + lang + ' '),
-      h(Text, { color: theme.textMuted, backgroundColor: '#1C1C1C' }, String(lines.length) + ' lines '),
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
+    h(Box, { flexDirection: 'row', backgroundColor: hex.codeBg },
+      h(Text, { color: langColor, bold: true, backgroundColor: hex.codeBg }, '  ' + lang + ' '),
+      h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, String(lines.length) + ' lines '),
     ),
-    h(Box, { flexDirection: 'column', backgroundColor: theme.codeBg },
-      lines.map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.codeBg },
-          h(Text, { color: theme.textMuted, backgroundColor: theme.codeBg },
+    h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
+      visible.map((line, i) =>
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: hex.codeBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg },
             ' ' + String(i + 1).padStart(lnW) + ' '
           ),
-          h(Text, { color: '#C9D1D9', backgroundColor: theme.codeBg, wrap: 'truncate-end' },
-            line || ' '
+          h(Text, { color: '#C9D1D9', backgroundColor: hex.codeBg, wrap: 'truncate-end' },
+            (line || ' ').slice(0, cols - 8)
           )
         )
-      )
+      ),
+      lines.length > maxLines
+        ? h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg },
+            '  ' + usym.ellipsis + ' ' + (lines.length - maxLines) + ' more lines')
+        : null
     )
   );
 }

package/src/components/CommandPicker.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { theme } from '../config/theme.js';
+import { hex, usym } from '../config/theme.js';
 const { createElement: h } = React;
 
 const COMMANDS = [
@@ -8,8 +8,8 @@ const COMMANDS = [
   { name: '/model',    desc: 'Switch model' },
   { name: '/provider', desc: 'Switch provider' },
   { name: '/agent',    desc: 'Toggle agent mode' },
+  { name: '/stop',     desc: 'Cancel streaming' },
   { name: '/clear',    desc: 'Clear conversation' },
-  { name: '/theme',    desc: 'Change color theme' },
   { name: '/export',   desc: 'Export conversation' },
   { name: '/help',     desc: 'Show all commands' },
   { name: '/exit',     desc: 'Exit CLARITY' },
@@ -37,29 +37,29 @@ export function CommandPicker({ query, onSelect, onClose }) {
 
   return h(Box, { flexDirection: 'column', width: boxWidth },
     h(Box, { flexDirection: 'row', marginBottom: 1, gap: 1 },
-      h(Text, { color: theme.textMuted }, '\u2315'),
-      h(Text, { color: search ? theme.text : theme.textMuted }, search || 'type to filter...'),
+      h(Text, { color: hex.textMuted }, usym.bulb),
+      h(Text, { color: search ? hex.text : hex.textMuted }, search || 'type to filter...'),
     ),
     filtered.map((cmd, i) =>
       h(Box, {
         key: cmd.name,
         flexDirection: 'row',
-        backgroundColor: i === idx ? theme.selectionBg : undefined,
+        backgroundColor: i === idx ? hex.selectionBg : undefined,
         width: boxWidth,
       },
         h(Text, {
-          color: i === idx ? theme.selectionText : theme.text,
+          color: i === idx ? hex.selectionText : hex.text,
           bold: i === idx,
-          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          backgroundColor: i === idx ? hex.selectionBg : undefined,
           wrap: 'truncate-end',
         }, '  ' + cmd.name.padEnd(16)),
         h(Text, {
-          color: i === idx ? theme.selectionText : theme.textDim,
-          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          color: i === idx ? hex.selectionText : hex.textDim,
+          backgroundColor: i === idx ? hex.selectionBg : undefined,
           wrap: 'truncate-end',
         }, cmd.desc)
       )
     ),
-    h(Text, { color: theme.textMuted }, ' \u2191\u2193 nav \u23CE select Esc close')
+    h(Text, { color: hex.textMuted }, ' ' + usym.arrowU + usym.arrowD + ' nav Enter select Esc close')
   );
 }

package/src/components/Composer.js

@@ -1,93 +1,104 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { theme } from '../config/theme.js';
-const { createElement: h } = React;
+import { hex, usym, u } from '../config/theme.js';
+import { getLayout } from '../config/layout.js';
+
+const MAX_VISIBLE_ROWS = 3;
 
 export function Composer({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
-  const [lines, setLines] = useState(['']);
-  const [cursorLine, setCursorLine] = useState(0);
-  const [cursorCol, setCursorCol] = useState(0);
-  const buf = useRef({ lines: [''], line: 0, col: 0 });
-  const displayName = provider + '/' + model;
+  const [input, setInput] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const inputRef = useRef('');
+  inputRef.current = input;
+
+  const { cols } = getLayout();
+  const w = Math.max(10, cols - 6);
+  const lineCount = Math.max(1, Math.ceil((input.slice(0, cursor).length + 1) / w));
+  const visibleLines = Math.min(lineCount, MAX_VISIBLE_ROWS);
 
-  useInput((input, key) => {
-    const s = buf.current;
+  const modelShort = model.replace(/^[^/]+\//, '').slice(0, 18);
 
-    if (key.return && !key.shift && !thinking) {
-      const text = s.lines.join('\n');
-      s.lines = ['']; s.line = 0; s.col = 0;
-      setLines(['']); setCursorLine(0); setCursorCol(0);
-      if (text.trim()) onSubmit(text);
+  useInput((ch, key) => {
+    if (key.ctrl && key.p) { onSlash(); return; }
+    if (key.escape) { onSubmit('/exit'); return; }
+    if (key.return && !key.shift) {
+      if (input.trim()) {
+        const text = input;
+        setInput('');
+        setCursor(0);
+        onSubmit(text);
+      }
       return;
     }
-
     if (key.return && key.shift) {
-      const rest = s.lines[s.line].slice(s.col);
-      s.lines[s.line] = s.lines[s.line].slice(0, s.col);
-      s.lines.splice(s.line + 1, 0, rest);
-      s.line++; s.col = 0;
-      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(0);
+      setInput(prev => prev.slice(0, cursor) + '\n' + prev.slice(cursor));
+      setCursor(c => c + 1);
       return;
     }
-
     if (key.backspace || key.delete) {
-      if (s.col > 0) {
-        s.lines[s.line] = s.lines[s.line].slice(0, s.col - 1) + s.lines[s.line].slice(s.col);
-        s.col--;
-      } else if (s.line > 0) {
-        s.col = s.lines[s.line - 1].length;
-        s.lines[s.line - 1] += s.lines[s.line];
-        s.lines.splice(s.line, 1);
-        s.line--;
+      if (cursor > 0) {
+        setInput(prev => prev.slice(0, cursor - 1) + prev.slice(cursor));
+        setCursor(c => c - 1);
       }
-      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
       return;
     }
-
-    if (key.upArrow && s.line > 0) { s.line--; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
-    if (key.downArrow && s.line < s.lines.length - 1) { s.line++; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
-    if (key.leftArrow) { if (s.col > 0) s.col--; else if (s.line > 0) { s.line--; s.col = s.lines[s.line].length; } setCursorLine(s.line); setCursorCol(s.col); return; }
-    if (key.rightArrow) { if (s.col < s.lines[s.line].length) s.col++; else if (s.line < s.lines.length - 1) { s.line++; s.col = 0; } setCursorLine(s.line); setCursorCol(s.col); return; }
-
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (input === '/' && s.lines.length === 1 && s.lines[0] === '') { onSlash?.(); return; }
-      s.lines[s.line] = s.lines[s.line].slice(0, s.col) + input + s.lines[s.line].slice(s.col);
-      s.col++;
-      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
+    if (key.leftArrow && cursor > 0) { setCursor(c => c - 1); return; }
+    if (key.rightArrow && cursor < input.length) { setCursor(c => c + 1); return; }
+    if (key.home) { setCursor(0); return; }
+    if (key.end) { setCursor(input.length); return; }
+    if (ch && ch.length === 1 && ch.charCodeAt(0) >= 32) {
+      setInput(prev => prev.slice(0, cursor) + ch + prev.slice(cursor));
+      setCursor(c => c + 1);
     }
   });
 
-  const dispLines = lines.join('\n') ? lines : [''];
-  const height = Math.min(dispLines.length, 5);
+  const displayText = input || (thinking ? '' : 'Type a message...');
+  const isPlaceholder = !input && !thinking;
+
+  const rows = [];
+  rows.push(
+    Box({ key: 'dock_header', height: 1, backgroundColor: hex.surfaceAlt },
+      Text({ color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' ' + u.h.repeat(Math.max(0, cols - 2)))
+    )
+  );
+
+  const inputRows = [];
+  for (let i = 0; i < visibleLines; i++) {
+    const start = i * w;
+    const end = start + w;
+    const seg = displayText.slice(start, end);
+    inputRows.push(
+      Box({ key: 'in' + i, height: 1, backgroundColor: hex.bg },
+        Text({
+          color: isPlaceholder ? hex.textMuted : hex.text,
+          backgroundColor: hex.bg,
+          wrap: 'truncate-end',
+        }, '  ' + usym.triR2 + ' ' + (seg || ' '))
+      )
+    );
+  }
 
-  return h(Box, { flexDirection: 'column', flexShrink: 0, borderStyle: 'round', borderColor: theme.border },
-    h(Box, { flexDirection: 'column' },
-      dispLines.slice(0, height).map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.surface },
-          h(Text, { color: theme.accent, backgroundColor: theme.surface },
-            i === cursorLine ? '\u276F' : ' '
-          ),
-          h(Text, { color: theme.text, backgroundColor: theme.surface, wrap: 'wrap' },
-            ' ' + (line || ' ')
-          ),
-          i === cursorLine
-            ? h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u258C')
-            : h(Text, { backgroundColor: theme.surface }, ' ')
-        )
+  for (let i = visibleLines; i < MAX_VISIBLE_ROWS + 1; i++) {
+    if (i === MAX_VISIBLE_ROWS + 0) break;
+    inputRows.push(
+      Box({ key: 'in_fill' + i, height: 1, backgroundColor: hex.bg },
+        Text({ color: hex.textMuted, backgroundColor: hex.bg }, '  ' + usym.lightV)
       )
-    ),
-    h(Box, { flexDirection: 'row', gap: 1, paddingX: 1, backgroundColor: theme.surfaceAlt },
-      h(Text, { color: theme.textMuted }, '\u2502'),
-      h(Text, { color: theme.info }, '\u25C9 ' + displayName),
-      h(Text, { color: theme.textMuted }, '\u00B7'),
-      h(Text, { color: agentMode ? theme.success : theme.textMuted },
-        agentMode ? '\u25C9 agent' : '\u25CB agent'
-      ),
-      h(Text, { color: theme.textMuted }, '\u00B7'),
-      h(Text, { color: theme.textDim }, 'Ctrl+P'),
-      thinking
-        ? h(Text, { color: theme.warning }, ' \u25CF thinking')
-        : null,
+    );
+  }
+
+  const statusLine = Box({ key: 'dock_status', height: 1, backgroundColor: hex.surfaceAlt },
+    Text({ color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+      '  ' + provider + ' ' + usym.midDot + ' ' + modelShort +
+      (agentMode ? ' ' + usym.midDot + ' Agent' : '') +
+      '  ' + usym.midDot + '  Ctrl+P commands'
     )
   );
+
+  rows.push(...inputRows);
+  rows.push(statusLine);
+
+  return Box({ flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+    ...rows
+  );
 }