pelulu-cli 1.0.5 → 1.2.0

package/src/tui/ink-components.js

@@ -5,25 +5,95 @@
 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.
+// Uses useMemo to cache the element reference so Ink's reconciler
+// skips re-rendering on every parent state change (fixes banner duplication).
+export const AsciiBanner = React.memo(function AsciiBanner({ version }) {
+  const v = version || _pkgVersion || '0.0.0';
+
+  const cat = [
+    '   /\\_/\\  ',
+    '  ( o.o ) ',
+    '   > ^ <  ',
+    '  /|   |\\ ',
+    ' (_|   |_)',
+  ];
+  const info = [
+    'P E L U L U - C L I',
+    `v${v}`,
+    'the tiny coding companion',
+    'powered by XiaoZhi',
+    '',
+  ];
 
-// ─── Status Bar ───────────────────────────────────────────
-export function StatusBar({ connected, session, version }) {
   return React.createElement(Box, {
-    borderStyle: 'single', borderColor: 'cyan', width: '100%', paddingX: 0,
+    flexDirection: 'column', width: '100%',
+    borderStyle: 'single', borderColor: 'cyan',
+    paddingY: 0, paddingX: 0,
   },
-    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'
+    ...cat.map((line, i) =>
+      React.createElement(Box, { key: i, paddingLeft: 1 },
+        React.createElement(Text, { color: 'cyan' }, line),
+        React.createElement(Text, {
+          color: i === 0 ? 'cyan' : i === 1 ? 'gray' : i === 2 ? 'cyanBright' : 'gray',
+          bold: i === 0,
+        }, '    ' + (info[i] || '')),
+      )
+    ),
+    React.createElement(Box, { paddingLeft: 1 },
+      React.createElement(Text, { dimColor: true }, '  18 tools  •  MCP protocol  •  agent mode  •  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'),
   );
-}
+});
+
+// ─── Status Bar ───────────────────────────────────────────
+// Uses useMemo to cache the element — avoids re-rendering on parent state 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) : '---';
+  const label = connected ? ' online' : ' offline';
+
+  const element = React.useMemo(() => React.createElement(Box, {
+    borderStyle: 'single', borderColor: 'cyan', width: '100%',
+    paddingX: 1, paddingY: 0,
+    flexDirection: 'row', justifyContent: 'space-between',
+  },
+    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 }, label),
+    ),
+    React.createElement(Box, { flexDirection: 'row' },
+      React.createElement(Text, { dimColor: true }, `session:${sess}`),
+      React.createElement(Text, { dimColor: true }, '  '),
+      React.createElement(Text, { dimColor: true }, 'xiaozhi.me'),
+    ),
+  ), [connected, sess]);
+  return element;
+});
 
 // ─── 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('the tiny 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('');