pelulu-cli 1.0.5 → 1.2.0

package/src/tui/completable-input.js

@@ -1,68 +1,71 @@
 /**
- * CompletableInput — TextInput with Tab auto-completion
+ * CompletableInput — TextInput with Tab auto-completion + char counter
  * Wraps ink-text-input and adds completion support
  */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import { getCompletions } from '../core/completion.js';
 
+const MAX_CHARS = 70;
+
 export function CompletableInput({ onSubmit, placeholder }) {
   const [value, setValue] = useState('');
   const [completions, setCompletions] = useState([]);
   const [completionIndex, setCompletionIndex] = useState(0);
   const [showCompletions, setShowCompletions] = useState(false);
 
-  // Handle Tab for completion
+  const isAtLimit = value.length >= MAX_CHARS;
+  const charCount = value.length;
+  const remaining = MAX_CHARS - charCount;
+
+  // Handle Tab/Escape/Return — regular chars are handled by TextInput
   useInput((input, key) => {
     if (key.tab) {
       if (!showCompletions) {
-        // First Tab: show completions
         const hits = getCompletions(value);
         if (hits.length > 0) {
           setCompletions(hits);
           setCompletionIndex(0);
           setShowCompletions(true);
-          // Auto-fill first match
           if (hits.length === 1) {
-            setValue(hits[0] + ' ');
+            const filled = hits[0] + ' ';
+            if (filled.length <= MAX_CHARS) {
+              setValue(filled);
+            }
             setShowCompletions(false);
           } else {
-            setValue(hits[0]);
+            setValue(hits[0].slice(0, MAX_CHARS));
           }
         }
       } else {
-        // Subsequent Tab: cycle through completions
         const next = (completionIndex + 1) % completions.length;
         setCompletionIndex(next);
-        setValue(completions[next]);
+        setValue(completions[next].slice(0, MAX_CHARS));
       }
     } else if (key.escape) {
-      // Escape: hide completions
       setShowCompletions(false);
       setCompletions([]);
       setCompletionIndex(0);
     } else if (key.return) {
-      // Enter: handled by TextInput onSubmit, do nothing here
       setShowCompletions(false);
       setCompletions([]);
-    } else {
-      // Any other key: reset completions
-      if (showCompletions) {
-        setShowCompletions(false);
-        setCompletions([]);
-        setCompletionIndex(0);
-      }
     }
+    // All other keys: let TextInput handle them (no-op here)
   });
 
-  // Update value from TextInput (but not on Tab/Enter which are handled above)
+  // Update value from TextInput — stable reference, no deps
   const handleChange = useCallback((val) => {
-    setValue(val);
-    // Live completion hints
-    if (val.length > 0) {
-      const hits = getCompletions(val);
-      if (hits.length > 0 && hits[0] !== val) {
+    const trimmed = val.slice(0, MAX_CHARS);
+    setValue(trimmed);
+  }, []);
+
+  // Derive completions from value (debounced via useEffect to avoid
+  // extra re-renders on every character)
+  useEffect(() => {
+    if (value.length > 0) {
+      const hits = getCompletions(value);
+      if (hits.length > 0 && hits[0] !== value) {
         setCompletions(hits);
         setShowCompletions(true);
         setCompletionIndex(0);
@@ -72,9 +75,9 @@ export function CompletableInput({ onSubmit, placeholder }) {
     } else {
       setShowCompletions(false);
     }
-  }, []);
+  }, [value]);
 
-  // Handle TextInput submit (Enter key)
+  // Handle TextInput submit
   const handleSubmit = useCallback((val) => {
     const trimmed = val.trim();
     if (trimmed) {
@@ -85,6 +88,9 @@ export function CompletableInput({ onSubmit, placeholder }) {
     setCompletions([]);
   }, [onSubmit]);
 
+  // Color for char counter
+  const counterColor = isAtLimit ? 'red' : remaining <= 10 ? 'yellow' : 'dim';
+
   return React.createElement(Box, { flexDirection: 'column', width: '100%' },
     // Completion suggestions
     showCompletions && completions.length > 1
@@ -105,23 +111,24 @@ export function CompletableInput({ onSubmit, placeholder }) {
       )
       : null,
 
-    // Input line
-    React.createElement(Box, { paddingX: 1 },
+    // Input line with char counter
+    React.createElement(Box, { paddingX: 1, flexDirection: 'row', alignItems: 'center' },
       React.createElement(Text, { color: 'cyan' }, '> '),
-      React.createElement(TextInput, {
-        value,
-        onChange: handleChange,
-        onSubmit: handleSubmit,
-        placeholder: placeholder || 'type a message...',
-        // Don't show cursor when we have a completion suggestion
-        showCursor: !showCompletions || completions.length <= 1,
-      }),
-      // Show ghost completion (the remaining part of the suggested completion)
-      showCompletions && completions.length > 0 && value.length > 0
-        ? React.createElement(Text, { dimColor: true },
-            completions[completionIndex]?.slice(value.length) || ''
-          )
-        : null,
+      React.createElement(Box, { flexDirection: 'column', flexGrow: 1 },
+        React.createElement(TextInput, {
+          value,
+          onChange: handleChange,
+          onSubmit: handleSubmit,
+          placeholder: isAtLimit ? '⚠️ limit reached!' : (placeholder || 'type a message...'),
+          showCursor: !showCompletions || completions.length <= 1,
+        }),
+      ),
+      // Char counter
+      React.createElement(Box, { marginLeft: 1 },
+        React.createElement(Text, { color: counterColor },
+          isAtLimit ? `🚫 ${MAX_CHARS}/${MAX_CHARS}` : `${charCount}/${MAX_CHARS}`
+        ),
+      ),
     ),
   );
 }

package/src/tui/ink-app.js

@@ -5,10 +5,11 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Box, Text, useApp, useInput, useStdin } from 'ink';
 import {
-  StatusBar, MessageBubble, ThinkingIndicator,
+  AsciiBanner, StatusBar, MessageBubble, ThinkingIndicator, stripEmojis,
 } from './ink-components.js';
 import { CompletableInput } from './completable-input.js';
 import { setInkMode } from '../core/logger.js';
+import { jobManager } from '../core/job-manager.js';
 
 export function createApp({ registry, mqtt, stats, session, bus, config, extras }) {
   return function App() {
@@ -28,14 +29,36 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
     const maxMessages = 200;
     const [scrollOffset, setScrollOffset] = useState(0); // 0 = bottom, N = scrolled up N messages
     const scrollOffsetRef = useRef(0);
+    // Watchdog + background task phase tracking
+    const activityTimer = useRef(null);   // LLM/agent "thinking" watchdog
+    const taskTimer = useRef(null);       // long-running task liveness watchdog
+    const lastPhaseRef = useRef(null);
+    const taskRunningRef = useRef(false);  // a background task is active
+    const agentBusyRef = useRef(false);    // a XiaoZhi turn is actively in progress
+    const wasConnectedRef = useRef(mqtt.connected); // dedupe "connected" spam
+    const STUCK_TIMEOUT_MS = config?.agent?.stuck_timeout_ms || 45000;
+    // A single step can legitimately run a while; only warn if a task
+    // produces NO progress events at all for this long.
+    const TASK_STUCK_MS = config?.agent?.task_timeout_ms || 90000;
 
-    // Calculate how many rows are available for messages
-    const getAvailableRows = useCallback(() => {
-      const termRows = process.stdout.rows || 24;
-      // status bar (3) + log line (1) + input box (3) + padding (2) + thinking (1) = ~10
-      return Math.max(5, termRows - 10);
+    // Track terminal height so the whole UI always fits inside the viewport.
+    // If the total output is taller than the terminal, Ink cannot erase the
+    // previous frame and re-prints the top border on every render — this is
+    // the "duplicate banner" bug. Keeping the tree <= terminal rows avoids it.
+    const [rows, setRows] = useState(process.stdout.rows || 24);
+    useEffect(() => {
+      const onResize = () => setRows(process.stdout.rows || 24);
+      process.stdout.on('resize', onResize);
+      return () => process.stdout.off('resize', onResize);
     }, []);
 
+    // Chrome that is ALWAYS present around the message window:
+    //   banner (7) + status bar (3) + input box (3) + message paddingY (2) = 15
+    // Dynamic single-line chrome (status line, thinking, scroll hints) is
+    // accounted for at render time so the frame never exceeds the terminal
+    // height — overflow is what causes the duplicated banner + vanishing chat.
+    const BASE_CHROME = 15;
+
     // ─── Enable Ink mode for logger ──────────────────
     useEffect(() => {
       setInkMode(true, bus);
@@ -49,6 +72,7 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
     useEffect(() => {
       const onLlmText = (text) => {
         setThinking('idle');
+        if (activityTimer.current) { clearTimeout(activityTimer.current); activityTimer.current = null; }
         // Strip emojis to check if there's real content
         const clean = text.replace(/\p{Emoji_Presentation}/gu, '').replace(/\p{Extended_Pictographic}/gu, '').trim();
         if (!clean) return; // skip emoji-only LLM responses (TTS will carry the real text)
@@ -58,6 +82,8 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
       };
 
       const onToolCalled = ({ name, result, args }) => {
+        // A tool just finished -> refresh the watchdog (agent is alive)
+        if (activityTimer.current) { clearTimeout(activityTimer.current); activityTimer.current = null; }
         setMessages(prev => [...prev.slice(-maxMessages), {
           id: `tool-${Date.now()}`, role: 'tool',
           toolName: name, action: args?.action,
@@ -71,14 +97,164 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         }]);
       };
 
-      const onThinking = ({ state }) => setThinking(state);
+      // File change tracking — surface each tracked change as a chat line
+      const onFilesChanged = ({ path, change }) => {
+        const short = path.replace(process.cwd() + '/', '');
+        setMessages(prev => [...prev.slice(-maxMessages), {
+          id: `track-${Date.now()}`, role: 'system',
+          content: `tracked: ${change} ${short}`,
+        }]);
+      };
+
+      const pushSystem = (content) => setMessages(prev => [...prev.slice(-maxMessages), {
+        id: `sys-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, role: 'system', content,
+      }]);
+
+      // Watchdog: if the agent is "busy" but nothing happens for a while,
+      // recover the UI instead of hanging forever on ".. using tool...".
+      const clearWatchdog = () => {
+        if (activityTimer.current) { clearTimeout(activityTimer.current); activityTimer.current = null; }
+      };
+      const armWatchdog = () => {
+        clearWatchdog();
+        activityTimer.current = setTimeout(() => {
+          setThinking('idle');
+          pushSystem('still waiting on XiaoZhi to reply — you can keep typing meanwhile.');
+        }, STUCK_TIMEOUT_MS);
+      };
+
+      const onThinking = ({ state }) => {
+        // While a background task owns the UI, ignore transient
+        // "thinking/tool_call" states so we never get stuck on ".. using tool..".
+        if (taskRunningRef.current) return;
+        setThinking(state);
+        if (state && state !== 'idle') armWatchdog();
+        else clearWatchdog();
+      };
       const onReady = () => {
         setConnected(true);
         setSessionId(mqtt.sessionId);
+        // Only announce a real disconnected -> connected transition, so
+        // reconnects / repeated hellos don't spam and look like a reset.
+        if (!wasConnectedRef.current) pushSystem('connected to XiaoZhi.');
+        wasConnectedRef.current = true;
       };
-      const onDisconnect = () => {
+      const onDisconnect = (err) => {
         setConnected(false);
         setSessionId(null);
+        setThinking('idle');
+        clearWatchdog();
+        lastPhaseRef.current = null;
+        if (wasConnectedRef.current) {
+          pushSystem(`disconnected${err?.message ? ` (${err.message})` : ''} — reconnecting...`);
+        }
+        wasConnectedRef.current = false;
+      };
+      const onSessionEnd = (info) => {
+        // XiaoZhi ended the audio session (idle `goodbye`). The next message now
+        // auto-reconnects (see mqtt.ensureSession), so this is silent unless the
+        // user is waiting.
+        setSessionId(null);
+        // Don't nag while work is still in progress. A `goodbye` that lands mid
+        // turn is handled by mqtt-client (it re-opens the session so the current
+        // task keeps talking to XiaoZhi); showing "session paused" here would be
+        // wrong and alarming. Background tasks run locally and don't need the
+        // session either.
+        if (taskRunningRef.current || agentBusyRef.current || info?.turnActive) return;
+        setThinking('idle');
+        clearWatchdog();
+        // Surface a subtle, reassuring notice so a paused session doesn't look
+        // like a silent reset — the next message reconnects automatically.
+        pushSystem('XiaoZhi session paused — it resumes automatically when you send your next message.');
+      };
+      const onSessionDead = () => {
+        // ensureSession() failed to re-establish — tell the user explicitly
+        // instead of silently dropping their message.
+        setThinking('idle');
+        clearWatchdog();
+        pushSystem('could not reach XiaoZhi (session lost) — check connection and try again.');
+      };
+
+      // Reconnection lifecycle — keep the user informed instead of silently
+      // dropping the connection (the old "disconnected forever" symptom).
+      const onReconnecting = (data) => {
+        setConnected(false);
+        setSessionId(null);
+        pushSystem(`reconnecting to XiaoZhi (attempt ${data?.attempt || 1})...`);
+        wasConnectedRef.current = false;
+      };
+      const onReconnected = () => {
+        setConnected(true);
+        setSessionId(mqtt.sessionId);
+        pushSystem('reconnected to XiaoZhi.');
+        wasConnectedRef.current = true;
+      };
+
+      // Long-running task liveness watchdog — reset on EVERY progress event.
+      // This replaces the old per-phase timer that false-fired during slow
+      // steps (the bogus "no response (timed out)" mid-task).
+      const bumpTaskWatchdog = (label) => {
+        if (taskTimer.current) clearTimeout(taskTimer.current);
+        taskTimer.current = setTimeout(() => {
+          taskRunningRef.current = false;
+          setThinking('idle');
+          pushSystem(`${label} appears stalled (no progress ${Math.round(TASK_STUCK_MS / 1000)}s) — check with "jobs" tool or try again.`);
+        }, TASK_STUCK_MS);
+      };
+      const clearTaskWatchdog = () => {
+        if (taskTimer.current) { clearTimeout(taskTimer.current); taskTimer.current = null; }
+      };
+
+      // Background task progress -> surface inline in the chat
+      const onTaskProgress = (data) => {
+        if (!data) return;
+        const label = data.target || data.tool || 'task';
+        setLogLine(`[${data.tool || 'task'}] ${data.target || ''} ${data.phase || ''} ${data.elapsed || 0}s`.trim());
+
+        if (data.running) {
+          taskRunningRef.current = true;
+          setThinking('idle');            // never show the generic "using tool"
+          bumpTaskWatchdog(label);        // any event = still alive
+          // Announce each new phase inline
+          if (data.phase && data.phase !== lastPhaseRef.current) {
+            lastPhaseRef.current = data.phase;
+            pushSystem(`» ${label}: ${data.phase}${data.log ? ` — ${data.log}` : ''}`);
+          }
+        }
+
+        if (!data.running || data.phase === 'done') {
+          clearTaskWatchdog();
+          taskRunningRef.current = false;
+          if (lastPhaseRef.current !== 'done') {
+            lastPhaseRef.current = 'done';
+            pushSystem(`» ${label}: finished`);
+          }
+          setThinking('idle');
+        }
+      };
+
+      // ─── Universal background-job feedback ───────────
+      // Any tool action that runs past the grace window becomes a pollable
+      // background job. We announce it, stream its progress on the log line,
+      // and confirm completion inline — so EVERY tool gives continuous
+      // feedback and never looks "stuck".
+      const bgJobs = new Set();
+      const onJobBackgrounded = (snap) => {
+        if (!snap) return;
+        bgJobs.add(snap.id);
+        setThinking('idle');
+        pushSystem(`~ ${snap.label} is running in the background (${snap.id}); I'll report when it finishes.`);
+      };
+      const onJobProgress = (p) => {
+        if (!p) return;
+        setLogLine(`[${p.tool}] ${p.message}`.slice(0, 120));
+      };
+      const onJobDone = (snap) => {
+        if (!snap || !bgJobs.has(snap.id)) return; // only announce jobs we flagged as background
+        bgJobs.delete(snap.id);
+        if (snap.status === 'error') { pushSystem(`x ${snap.label} failed: ${snap.error}`); return; }
+        if (snap.status === 'cancelled') { pushSystem(`- ${snap.label} cancelled.`); return; }
+        pushSystem(`+ ${snap.label} finished in ${snap.elapsed_s}s.`);
       };
 
       // Single log line that updates in place
@@ -99,6 +275,7 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
       const onTtsSentence = (text) => {
         ttsBuffer += text;
         setThinking('idle');
+        if (activityTimer.current) { clearTimeout(activityTimer.current); activityTimer.current = null; }
         // Debounce: wait for all TTS sentences to arrive, then display
         if (ttsTimer) clearTimeout(ttsTimer);
         ttsTimer = setTimeout(() => {
@@ -117,23 +294,84 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         }, 500);
       };
 
+      // Agent progress events
+      const onAgentProgress = ({ state, message, tool, action }) => {
+        if (state === 'tool') {
+          agentBusyRef.current = true;
+          setThinking('tool_call');
+          setLogLine(`[TOOL] ${tool}.${action || ''}...`);
+          armWatchdog();
+        } else if (state === 'tool_done') {
+          agentBusyRef.current = true;
+          setThinking('thinking');
+          setLogLine(`[TOOL] done, waiting...`);
+          armWatchdog();
+        } else if (state === 'receiving') {
+          agentBusyRef.current = true;
+          setLogLine(`[LLM] ${message}`);
+          armWatchdog();
+        } else if (state === 'thinking') {
+          agentBusyRef.current = true;
+          setThinking('thinking');
+          armWatchdog();
+        } else if (state === 'done') {
+          // The turn finished. Without this branch the watchdog armed by the
+          // last tool_done/receiving event was never cleared, so it fired
+          // ~45s later as a bogus "still waiting on XiaoZhi to reply" even
+          // though XiaoZhi had already answered. Clear it and go idle.
+          agentBusyRef.current = false;
+          setThinking('idle');
+          clearWatchdog();
+        } else if (state === 'timeout') {
+          agentBusyRef.current = false;
+          setThinking('idle');
+          clearWatchdog();
+          setLogLine(`[WARN] ${message}`);
+          pushSystem(`timeout: ${message}`);
+        }
+      };
+
       bus.on('llm:text', onLlmText);
       bus.on('tts:sentence', onTtsSentence);
       bus.on('tool:called', onToolCalled);
+      bus.on('files:changed', onFilesChanged);
       bus.on('thinking', onThinking);
       bus.on('ready', onReady);
+      bus.on('session:end', onSessionEnd);
+      bus.on('session:dead', onSessionDead);
       bus.on('mqtt:error', onDisconnect);
+      bus.on('mqtt:disconnected', onDisconnect);
+      bus.on('mqtt:reconnecting', onReconnecting);
+      bus.on('mqtt:reconnected', onReconnected);
       bus.on('log:message', onLogMessage);
+      bus.on('agent:progress', onAgentProgress);
+      bus.on('job:backgrounded', onJobBackgrounded);
+      bus.on('job:progress', onJobProgress);
+      bus.on('job:done', onJobDone);
+      bus.on('task:progress', onTaskProgress);
 
       return () => {
         bus.off('llm:text', onLlmText);
         bus.off('tts:sentence', onTtsSentence);
         bus.off('tool:called', onToolCalled);
+        bus.off('files:changed', onFilesChanged);
         bus.off('thinking', onThinking);
         bus.off('ready', onReady);
+        bus.off('session:end', onSessionEnd);
+        bus.off('session:dead', onSessionDead);
         bus.off('mqtt:error', onDisconnect);
+        bus.off('mqtt:disconnected', onDisconnect);
+        bus.off('mqtt:reconnecting', onReconnecting);
+        bus.off('mqtt:reconnected', onReconnected);
         bus.off('log:message', onLogMessage);
+        bus.off('agent:progress', onAgentProgress);
+        bus.off('job:backgrounded', onJobBackgrounded);
+        bus.off('job:progress', onJobProgress);
+        bus.off('job:done', onJobDone);
+        bus.off('task:progress', onTaskProgress);
         if (ttsTimer) clearTimeout(ttsTimer);
+        if (activityTimer.current) clearTimeout(activityTimer.current);
+        if (taskTimer.current) clearTimeout(taskTimer.current);
       };
     }, []);
 
@@ -171,6 +409,16 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
 
     // ─── Handle Submit ────────────────────────────────
     const handleSubmit = useCallback(async (text) => {
+      // Limit input to 70 chars (XiaoZhi limit)
+      const MAX_INPUT = 70;
+      if (text.length > MAX_INPUT) {
+        setMessages(prev => [...prev.slice(-maxMessages), {
+          id: `warn-${Date.now()}`, role: 'system', 
+          content: `⚠️ Input too long (${text.length}/${MAX_INPUT} chars)`,
+        }]);
+        return;
+      }
+
       // Add user message
       setMessages(prev => [...prev.slice(-maxMessages), {
         id: `user-${Date.now()}`, role: 'user', content: text,
@@ -200,6 +448,16 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
           }]);
           return;
         }
+        if (cmd === '/files' || cmd === '/changes') {
+          const changes = extras.fileTracker?.getChanges() || [];
+          const body = changes.length
+            ? changes.map(c => `  ${c.action} ${c.path.replace(process.cwd() + '/', '')}${c.count > 1 ? ` (${c.count}x)` : ''}`).join('\n')
+            : 'No file changes this session';
+          setMessages(prev => [...prev, {
+            id: `sys-${Date.now()}`, role: 'system', content: `file changes:\n${body}`,
+          }]);
+          return;
+        }
         if (cmd === '/tools') {
           const tools = registry.list();
           const lines = tools.map(t => `  ${t.name} (${t.actions?.length || 0})`).join('\n');
@@ -229,10 +487,23 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         const intent = parseIntent(text);
         if (intent.matched) {
           setThinking('tool_call');
-          const result = await registry.call(intent.tool, intent.params);
+          // Route through the job layer: fast commands render inline as before,
+          // slow ones self-background (announced + confirmed by the job:* handlers)
+          // so the TUI never freezes on a long local action.
+          const dispatched = await jobManager.dispatch(
+            { tool: intent.tool, action: intent.action, label: `${intent.tool}.${intent.action || ''}` },
+            () => registry.call(intent.tool, intent.params),
+          );
           setThinking('idle');
+          if (!dispatched.done) return; // backgrounded — job:* handlers take over
+          if (dispatched.error) {
+            setMessages(prev => [...prev.slice(-maxMessages), {
+              id: `err-${Date.now()}`, role: 'system', content: `x ${intent.tool} failed: ${dispatched.error.message}`,
+            }]);
+            return;
+          }
           const { formatToolResult } = await import('../core/formatter.js');
-          const formatted = formatToolResult(intent.tool, intent.action, result);
+          const formatted = formatToolResult(intent.tool, intent.action, dispatched.result);
           setMessages(prev => [...prev.slice(-maxMessages), {
             id: `tool-${Date.now()}`, role: 'tool',
             toolName: intent.tool, action: intent.action,
@@ -244,31 +515,99 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         }
       } catch {}
 
-      // Send to XiaoZhi
+      // Send to XiaoZhi via Agent Controller (if available) or direct
       setThinking('thinking');
-      mqtt.sendText(text);
+      
+      const agentController = extras?.agentController;
+      if (agentController) {
+        // Reset agent if it's stuck in running state
+        if (agentController.isRunning) {
+          agentController.abort();
+          await new Promise(r => setTimeout(r, 500));
+        }
+        
+        // Use agent controller for proper response handling.
+        // NOTE: XiaoZhi's actual reply is rendered live by the `tts:sentence` /
+        // `llm:text` handlers above, so we must NOT push result.result here or
+        // the final message would appear twice. The controller run is awaited
+        // purely to drive the think→act loop and the thinking indicator.
+        try {
+          await agentController.run(text, { generatePlan: false });
+          setThinking('idle');
+        } catch (err) {
+          setThinking('idle');
+          setMessages(prev => [...prev.slice(-maxMessages), {
+            id: `error-${Date.now()}`, role: 'system', content: `Error: ${err.message}`,
+          }]);
+        }
+      } else {
+        // Fallback: send directly to XiaoZhi (auto-reconnects if session died)
+        const sent = await mqtt.sendText(text);
+        setThinking('idle');
+        if (!sent) {
+          setMessages(prev => [...prev.slice(-maxMessages), {
+            id: `error-${Date.now()}`, role: 'system',
+            content: 'could not reach XiaoZhi — session lost, try again.',
+          }]);
+        }
+      }
     }, [registry, mqtt, stats, session]);
 
     // ─── Render ───────────────────────────────────────
     const tools = registry.all();
     const actions = tools.reduce((s, t) => s + (t.actions?.length || 0), 0);
 
-    // Calculate visible messages (scrollable window)
-    const availableRows = getAvailableRows();
+    // Dynamic chrome: base + the single-line widgets actually shown this frame,
+    // plus a reserve of 2 rows for the (possible) scroll-up/down hints. This
+    // guarantees banner + status + messages + input never exceed the terminal
+    // height, which is what caused the duplicated banner and vanishing chat.
+    const dynamicChrome =
+      BASE_CHROME +
+      (logLine ? 1 : 0) +
+      (thinking && thinking !== 'idle' ? 1 : 0) +
+      2;
+    const MAX_RENDER_LINES = Math.max(3, rows - dynamicChrome);
+
+    // Calculate visible messages (scrollable window sized to terminal height)
     const totalMessages = messages.length;
     const endIdx = totalMessages - scrollOffset;
-    const startIdx = Math.max(0, endIdx - availableRows);
+
+    // Count lines backwards from endIdx to fit within MAX_RENDER_LINES
+    let usedLines = 0;
+    let startIdx = endIdx;
+    for (let i = endIdx - 1; i >= 0; i--) {
+      const msg = messages[i];
+      let msgLines = 1;
+      if (msg.role === 'assistant' && msg.content) {
+        const w = (process.stdout.columns || 80) - 6;
+        const words = stripEmojis(msg.content).split(/\s+/);
+        let lineLen = 0;
+        msgLines = 1;
+        for (const word of words) {
+          if (lineLen + word.length + 1 > w && lineLen > 0) { msgLines++; lineLen = word.length; }
+          else { lineLen += word.length + (lineLen > 0 ? 1 : 0); }
+        }
+      }
+      if (usedLines + msgLines > MAX_RENDER_LINES) break;
+      usedLines += msgLines;
+      startIdx = i;
+    }
+
     const visibleMessages = messages.slice(startIdx, endIdx);
-    const canScrollUp = scrollOffset < totalMessages - 1;
+    const canScrollUp = startIdx > 0;
     const canScrollDown = scrollOffset > 0;
 
     return React.createElement(Box, {
       flexDirection: 'column', width: '100%',
     },
-      // Top: Status bar
+      // Top: Banner + Status bar (always visible / pinned)
+      React.createElement(AsciiBanner, {
+        key: 'ascii-banner',
+        version: config?.agent?.version,
+      }),
       React.createElement(StatusBar, {
+        key: 'status-bar',
         connected, session: sessionId,
-        version: config?.agent?.version,
       }),
 
       // Log status line (single line, auto-updating, auto-hiding)
@@ -282,7 +621,7 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
       canScrollUp
         ? React.createElement(Box, { paddingLeft: 2 },
             React.createElement(Text, { dimColor: true, color: 'yellow' },
-              `[${totalMessages - endIdx} more above | Shift+Up/Down or PgUp/PgDn to scroll]`
+              `[${startIdx} more above | Shift+Up/Down or PgUp/PgDn to scroll]`
             ),
           )
         : null,