pelulu-cli 1.0.5 → 1.1.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,7 +5,7 @@
 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';
@@ -30,10 +30,9 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
     const scrollOffsetRef = useRef(0);
 
     // Calculate how many rows are available for messages
+    const MAX_VISIBLE_MESSAGES = 12;
     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);
+      return MAX_VISIBLE_MESSAGES;
     }, []);
 
     // ─── Enable Ink mode for logger ──────────────────
@@ -117,6 +116,23 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         }, 500);
       };
 
+      // Agent progress events
+      const onAgentProgress = ({ state, message, tool, action }) => {
+        if (state === 'tool') {
+          setThinking('tool_call');
+          setLogLine(`[TOOL] ${tool}.${action || ''}...`);
+        } else if (state === 'tool_done') {
+          setThinking('thinking');
+          setLogLine(`[TOOL] done, waiting...`);
+        } else if (state === 'receiving') {
+          setLogLine(`[LLM] ${message}`);
+        } else if (state === 'thinking') {
+          setThinking('thinking');
+        } else if (state === 'timeout') {
+          setLogLine(`[WARN] ${message}`);
+        }
+      };
+
       bus.on('llm:text', onLlmText);
       bus.on('tts:sentence', onTtsSentence);
       bus.on('tool:called', onToolCalled);
@@ -124,6 +140,7 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
       bus.on('ready', onReady);
       bus.on('mqtt:error', onDisconnect);
       bus.on('log:message', onLogMessage);
+      bus.on('agent:progress', onAgentProgress);
 
       return () => {
         bus.off('llm:text', onLlmText);
@@ -133,6 +150,7 @@ export function createApp({ registry, mqtt, stats, session, bus, config, extras
         bus.off('ready', onReady);
         bus.off('mqtt:error', onDisconnect);
         bus.off('log:message', onLogMessage);
+        bus.off('agent:progress', onAgentProgress);
         if (ttsTimer) clearTimeout(ttsTimer);
       };
     }, []);
@@ -171,6 +189,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,
@@ -244,31 +272,82 @@ 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
+        try {
+          const result = await agentController.run(text, { generatePlan: false });
+          setThinking('idle');
+          
+          if (result.success && result.result) {
+            setMessages(prev => [...prev.slice(-maxMessages), {
+              id: `assistant-${Date.now()}`, role: 'assistant', content: result.result,
+            }]);
+          }
+        } 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
+        mqtt.sendText(text);
+      }
     }, [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();
+    // Calculate visible messages (scrollable window, max 12 rendered lines)
+    const MAX_RENDER_LINES = 12;
     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
+      React.createElement(AsciiBanner, {
+        version: config?.agent?.version,
+      }),
       React.createElement(StatusBar, {
         connected, session: sessionId,
-        version: config?.agent?.version,
       }),
 
       // Log status line (single line, auto-updating, auto-hiding)

package/src/tui/ink-components.js

@@ -5,25 +5,72 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Box, Text, useStdin } from 'ink';
 import TextInput from 'ink-text-input';
+import { readFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, '..', '..');
+
+let _pkgVersion = null;
+async function readPkgVersion() {
+  if (_pkgVersion) return _pkgVersion;
+  try {
+    const pkg = JSON.parse(await readFile(join(ROOT, 'package.json'), 'utf-8'));
+    _pkgVersion = pkg.version || '0.0.0';
+  } catch { _pkgVersion = '0.0.0'; }
+  return _pkgVersion;
+}
+readPkgVersion();
+
+// ─── ASCII Banner ────────────────────────────────────────
+// Memoized — only re-renders when version prop changes
+export const AsciiBanner = React.memo(function AsciiBanner({ version }) {
+  const v = version || '0.0.0';
+  return React.createElement(Box, {
+    flexDirection: 'column', paddingLeft: 1,
+  },
+    React.createElement(Box, null,
+      React.createElement(Text, { color: 'cyan' }, '  /\\_/\\      '),
+      React.createElement(Text, { color: 'cyan', bold: true }, 'PELULU-CLI'),
+    ),
+    React.createElement(Text, { color: 'cyan' }, ' ( o.o )    v' + v),
+    React.createElement(Text, { color: 'cyan' }, '  > ^ <     the tiny coding agent'),
+    React.createElement(Text, { color: 'cyan' }, ' /|   |\\    powered by XiaoZhi'),
+    React.createElement(Text, { color: 'cyan' }, '(_|   |_)'),
+    React.createElement(Text, { dimColor: true }, '             18 tools • MCP protocol • agent mode'),
+  );
+});
 
 // ─── Status Bar ───────────────────────────────────────────
-export function StatusBar({ connected, session, version }) {
+// Memoized — only re-renders when connected/session changes
+export const StatusBar = React.memo(function StatusBar({ connected, session }) {
+  const statusDot = connected ? '●' : '○';
+  const statusColor = connected ? 'green' : 'red';
+  const sess = session ? session.slice(0, 8) : '---';
+
   return React.createElement(Box, {
-    borderStyle: 'single', borderColor: 'cyan', width: '100%', paddingX: 0,
+    borderStyle: 'single', borderColor: 'cyan', width: '100%',
+    paddingX: 1, paddingY: 0,
+    flexDirection: 'row', justifyContent: 'space-between',
   },
-    React.createElement(Text, { color: 'cyan', bold: true }, ` pelulu-cli v.${version || '0.0.0'} `),
-    React.createElement(Text, { dimColor: true }, '| '),
-    React.createElement(Text, { color: connected ? 'green' : 'red', bold: connected },
-      connected ? 'ONLINE' : 'OFFLINE'
+    React.createElement(Box, { flexDirection: 'row' },
+      React.createElement(Text, { color: 'cyan', bold: true }, '🐱 PELULU '),
+      React.createElement(Text, { color: statusColor }, statusDot),
+      React.createElement(Text, { color: statusColor, bold: connected },
+        connected ? ' online' : ' offline'
+      ),
+    ),
+    React.createElement(Box, { flexDirection: 'row' },
+      React.createElement(Text, { dimColor: true }, `session:${sess}`),
+      React.createElement(Text, { dimColor: true }, '  '),
+      React.createElement(Text, { dimColor: true }, 'xiaozhi.me'),
     ),
-    React.createElement(Text, { dimColor: true }, ' | '),
-    React.createElement(Text, { dimColor: true }, session ? session.slice(0, 8) : '-'),
-    React.createElement(Text, { dimColor: true }, ' | Provider: Xiaozhi.me'),
   );
-}
+});
 
 // ─── Strip Emojis ─────────────────────────────────────────
-function stripEmojis(text) {
+export function stripEmojis(text) {
   return text
     .replace(/\p{Emoji_Presentation}/gu, '')
     .replace(/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?/gu, '')

package/src/tui/ink-entry.js

@@ -10,7 +10,15 @@ export function startInkTUI({ registry, mqtt, stats, session, bus, config, extra
   const isTTY = process.stdin.isTTY;
 
   if (!isTTY) {
-    return startFallbackREPL({ registry, mqtt, stats, session, bus, config, extras });
+    // Return a wrapper that handles the async REPL
+    let replResult = null;
+    const replPromise = startFallbackREPL({ registry, mqtt, stats, session, bus, config, extras })
+      .then(result => { replResult = result; return result; });
+    
+    return {
+      unmount: () => { if (replResult) replResult.unmount(); },
+      waitUntilExit: () => replPromise,
+    };
   }
 
   const App = createApp({ registry, mqtt, stats, session, bus, config, extras });
@@ -72,7 +80,23 @@ async function startFallbackREPL({ registry, mqtt, stats, session, bus, extras }
       }
     } catch {}
 
-    mqtt.sendText(text);
+    // Use agent controller if available, otherwise send directly
+    const agentController = extras?.agentController;
+    if (agentController) {
+      try {
+        const result = await agentController.run(text, { generatePlan: false });
+        if (result.success && result.result) {
+          const clean = result.result.replace(/\p{Emoji_Presentation}/gu, '').replace(/\p{Extended_Pictographic}/gu, '').trim();
+          if (clean) console.log(chalk.white(`  ${clean}`));
+        } else if (!result.success) {
+          console.log(chalk.red(`  Error: ${result.result}`));
+        }
+      } catch (err) {
+        console.log(chalk.red(`  Error: ${err.message}`));
+      }
+    } else {
+      mqtt.sendText(text);
+    }
     rl.prompt();
   });
 

package/src/tui/renderer.js

@@ -3,7 +3,12 @@
  * Like Claude Code / Gemini CLI / OpenCode
  */
 import chalk from 'chalk';
-import { createInterface } from 'readline';
+import { readFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, '..', '..');
 
 const box = {
   tl: '╭', tr: '╮', bl: '╰', br: '╯',
@@ -23,20 +28,64 @@ function center(text, width) {
   return ' '.repeat(left) + text + ' '.repeat(width - left - text.length);
 }
 
+/**
+ * Read version from package.json (cached)
+ */
+let _cachedVersion = null;
+async function getVersion() {
+  if (_cachedVersion) return _cachedVersion;
+  try {
+    const pkg = JSON.parse(await readFile(join(ROOT, 'package.json'), 'utf-8'));
+    _cachedVersion = pkg.version || '0.0.0';
+  } catch {
+    _cachedVersion = '0.0.0';
+  }
+  return _cachedVersion;
+}
+
+function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;]*m/g, '');
+}
+
 /**
  * Render the Pelulu ASCII art banner (displayed once at startup)
  */
-export function renderAsciiBanner(version) {
-  const v = version ? `v.${version}` : '';
-  const lines = [
-    chalk.cyan('  /\\_/\\  '),
-    chalk.cyan(' ( o.o ) ') + chalk.bold.cyan(` P E L U L U - C L I`),
-    chalk.cyan('  > ^ <  ') + chalk.gray(` ${v}  |  powered by XiaoZhi`),
-    chalk.cyan(' /|   |\\ '),
-    chalk.cyan('(_|   |_)') + chalk.dim('  the tiny coding companion'),
+export async function renderAsciiBanner() {
+  const version = await getVersion();
+  const w = 52;
+
+  const cat = [
+    '   /\\_/\\  ',
+    '  ( o.o ) ',
+    '   > ^ <  ',
+    '  /|   |\\ ',
+    ' (_|   |_)',
   ];
+
+  const info = [
+    chalk.cyan.bold('P E L U L U - C L I'),
+    chalk.gray(`v${version}`),
+    chalk.cyan('coding companion'),
+    chalk.gray('powered by XiaoZhi'),
+    '',
+  ];
+
   console.log('');
-  for (const line of lines) console.log(line);
+  console.log(chalk.cyan(`${box.tl}${horizontal(w, box.h)}${box.tr}`));
+
+  for (let i = 0; i < Math.max(cat.length, info.length); i++) {
+    const left = cat[i] ? chalk.cyan(cat[i]) : ' '.repeat(11);
+    const right = info[i] || '';
+    const gap = '    ';
+    console.log(chalk.cyan(`${box.v}`) + left + gap + right + ' '.repeat(Math.max(0, w - 11 - gap.length - stripAnsi(right).length)) + chalk.cyan(`${box.v}`));
+  }
+
+  console.log(chalk.cyan(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
+
+  const features = chalk.gray('  18 tools  •  MCP protocol  •  agent mode');
+  console.log(chalk.cyan(`${box.v}`) + features + ' '.repeat(Math.max(0, w - stripAnsi(features).length)) + chalk.cyan(`${box.v}`));
+
+  console.log(chalk.cyan(`${box.bl}${horizontal(w, box.h)}${box.br}`));
   console.log('');
 }
 
@@ -100,12 +149,7 @@ export function renderToolResult(success, data) {
   }
 }
 
-/**
- * Strip emoji and decorative unicode from text.
- * Keeps ASCII, CJK, common punctuation.
- */
 function stripEmojis(text) {
-  // Remove emoji (Unicode ranges), box-drawing decorative symbols, and common decorative chars
   return text
     .replace(/\p{Emoji_Presentation}/gu, '')
     .replace(/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?/gu, '')
@@ -122,7 +166,6 @@ export function renderAiResponse(text) {
   const clean = stripEmojis(text);
   if (!clean) return;
   console.log('');
-  // Wrap long lines at 80 chars
   const lines = wrapText(clean, 80);
   for (const line of lines) {
     console.log(chalk.white(`  ${line}`));
@@ -183,10 +226,6 @@ export function createPrompt(dirName) {
   return chalk.cyan(`${dirName} `) + chalk.white('❯ ');
 }
 
-/**
- * Render update notification banner
- * @param {object} update - { local, remote, release: { tag, name, url, body } }
- */
 export function renderUpdateNotification(update) {
   const w = 56;
   const { local, remote, release } = update;
@@ -197,40 +236,42 @@ export function renderUpdateNotification(update) {
   console.log(chalk.yellow(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
   console.log(chalk.yellow(`${box.v}`) + chalk.white(pad(`  Versi lokal   : ${local}`, w)) + chalk.yellow(`${box.v}`));
   console.log(chalk.yellow(`${box.v}`) + chalk.green(pad(`  Versi terbaru : ${remote}`, w)) + chalk.yellow(`${box.v}`));
-
-  if (release?.name && release.name !== release.tag) {
-    console.log(chalk.yellow(`${box.v}`) + chalk.gray(pad(`  Release       : ${release.name}`, w)) + chalk.yellow(`${box.v}`));
-  }
-
-  if (release?.url) {
-    console.log(chalk.yellow(`${box.v}`) + chalk.cyan(pad(`  ${release.url}`, w)) + chalk.yellow(`${box.v}`));
-  }
-
-  console.log(chalk.yellow(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
-  console.log(chalk.yellow(`${box.v}`) + chalk.bold.white(pad('  Jalankan perintah berikut untuk update:', w)) + chalk.yellow(`${box.v}`));
-  console.log(chalk.yellow(`${box.v}`) + chalk.green(pad('  npm install pelulu-cli@latest', w)) + chalk.yellow(`${box.v}`));
+  console.log(chalk.yellow(`${box.v}`) + chalk.gray(pad('  Menginstall update secara otomatis...', w)) + chalk.yellow(`${box.v}`));
   console.log(chalk.yellow(`${box.bl}${horizontal(w, box.h)}${box.br}`));
   console.log('');
 }
 
 /**
- * Render update check failure (silent, dim)
+ * Render usage info after successful update
  */
+export function renderPostUpdate(packageName, version) {
+  const w = 52;
+  console.log('');
+  console.log(chalk.green(`${box.tl}${horizontal(w, box.h)}${box.tr}`));
+  console.log(chalk.green(`${box.v}`) + chalk.bold.green(center(`  ✓ ${packageName} v${version} installed!`, w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
+  console.log(chalk.green(`${box.v}`) + chalk.white(pad('  Run:', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.cyan(pad(`  $ ${packageName}`, w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.white(pad('  Commands:', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('  /help    — show commands', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('  /tools   — list tools', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('  /status  — connection status', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('  /clear   — clear screen', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.v}`) + chalk.gray(pad('  /quit    — exit', w)) + chalk.green(`${box.v}`));
+  console.log(chalk.green(`${box.bl}${horizontal(w, box.h)}${box.br}`));
+  console.log('');
+}
+
 export function renderUpdateError(message) {
   console.log(chalk.dim(`  [WARN]  Update check failed: ${message}`));
 }
 
-/**
- * Render a clean init status line (replaces verbose per-tool logging)
- */
 export function renderInitLine(icon, text, detail = '') {
   const detailStr = detail ? chalk.dim(` (${detail})`) : '';
   console.log(chalk.gray(`  ${icon} ${text}`) + detailStr);
 }
 
-/**
- * Render ready line with session info
- */
 export function renderReady(sessionId) {
   console.log(chalk.green(`  ✓ Ready`) + chalk.dim(`  session: ${sessionId || '-'}`));
   console.log('');