pelulu-cli 1.0.0 → 1.0.3

package/src/tui/ink-components.js

@@ -0,0 +1,157 @@
+/**
+ * Ink UI Components — building blocks for Pelulu TUI
+ * Uses React.createElement (no JSX — ESM compatible, no build step)
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useStdin } from 'ink';
+import TextInput from 'ink-text-input';
+
+// ─── Status Bar ───────────────────────────────────────────
+export function StatusBar({ connected, session, version }) {
+  return React.createElement(Box, {
+    borderStyle: 'single', borderColor: 'cyan', width: '100%', 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'
+    ),
+    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) {
+  return text
+    .replace(/\p{Emoji_Presentation}/gu, '')
+    .replace(/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?/gu, '')
+    .replace(/\p{Extended_Pictographic}/gu, '')
+    .replace(/[\u2600-\u27BF]/g, '')
+    .replace(/[\u{1F000}-\u{1FFFF}]/gu, '')
+    .replace(/[\u200D\uFE0F]/g, '')
+    .replace(/[ \t]{2,}/g, ' ')
+    .replace(/ ([.,;:!?])/g, '$1')
+    .trim();
+}
+
+// ─── Wrap text helper ─────────────────────────────────────
+function wrapText(text, maxWidth) {
+  const lines = [];
+  for (const paragraph of text.split('\n')) {
+    if (!paragraph.trim()) { lines.push(''); continue; }
+    const words = paragraph.split(/\s+/);
+    let line = '';
+    for (const word of words) {
+      if (line.length + word.length + 1 > maxWidth && line.length > 0) {
+        lines.push(line);
+        line = word;
+      } else {
+        line = line ? `${line} ${word}` : word;
+      }
+    }
+    if (line) lines.push(line);
+  }
+  return lines;
+}
+
+// ─── Message Bubble ───────────────────────────────────────
+export function MessageBubble({ message }) {
+  const { role, content } = message;
+  const isUser = role === 'user';
+  const isTool = role === 'tool';
+  const isSystem = role === 'system';
+
+  if (isTool) {
+    return React.createElement(Box, { paddingLeft: 2 },
+      React.createElement(Text, { dimColor: true },
+        `${message.toolName || 'tool'}${message.action ? '.' + message.action : ''}  ${message.detail || ''}`
+      ),
+    );
+  }
+
+  if (isSystem) {
+    return React.createElement(Box, { paddingLeft: 2 },
+      React.createElement(Text, { dimColor: true, italic: true }, content),
+    );
+  }
+
+  const cleanContent = stripEmojis(content);
+  if (!cleanContent) return null;
+
+  const color = isUser ? 'blue' : 'white';
+  const w = (process.stdout.columns || 80) - 6;
+
+  if (isUser) {
+    return React.createElement(Box, { paddingLeft: 1, flexDirection: 'column' },
+      React.createElement(Text, { color, bold: true }, `> ${cleanContent}`),
+    );
+  }
+
+  // Assistant: wrap + indent all lines
+  const lines = wrapText(cleanContent, w);
+  return React.createElement(Box, { paddingLeft: 2, flexDirection: 'column' },
+    ...lines.map((line, i) =>
+      React.createElement(Text, { key: i, color }, line)
+    ),
+  );
+}
+
+// ─── Tool Result Line ─────────────────────────────────────
+export function ToolResultLine({ success, detail }) {
+  return React.createElement(Box, { paddingLeft: 4 },
+    React.createElement(Text, { color: success ? 'green' : 'red' },
+      success ? `v ${detail || 'OK'}` : `x ${detail || 'error'}`
+    ),
+  );
+}
+
+// ─── Input Bar ────────────────────────────────────────────
+export function InputBar({ onSubmit, placeholder }) {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = (val) => {
+    const trimmed = val.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setValue('');
+  };
+
+  return React.createElement(Box, { paddingX: 1 },
+    React.createElement(Text, { color: 'cyan' }, '> '),
+    React.createElement(TextInput, {
+      value,
+      onChange: setValue,
+      onSubmit: handleSubmit,
+      placeholder: placeholder || 'type a message...',
+    }),
+  );
+}
+
+// ─── Thinking Indicator ───────────────────────────────────
+export function ThinkingIndicator({ state }) {
+  if (!state || state === 'idle') return null;
+
+  const labels = {
+    thinking: 'thinking...',
+    tool_call: 'using tool...',
+    reading: 'reading file...',
+    writing: 'writing...',
+    searching: 'searching...',
+  };
+
+  return React.createElement(Box, { paddingLeft: 2 },
+    React.createElement(Text, { dimColor: true, italic: true },
+      `.. ${labels[state] || 'processing...'}`
+    ),
+  );
+}
+
+// ─── Divider ──────────────────────────────────────────────
+export function Divider() {
+  return React.createElement(Box, { width: '100%' },
+    React.createElement(Text, { dimColor: true }, '─'.repeat(process.stdout.columns || 80)),
+  );
+}
+

package/src/tui/ink-entry.js

@@ -0,0 +1,86 @@
+/**
+ * Ink Entry — renders the Ink TUI and connects to Pelulu internals
+ * Falls back to readline REPL if Ink can't start (non-TTY, etc.)
+ */
+import React from 'react';
+import { render } from 'ink';
+import { createApp } from './ink-app.js';
+
+export function startInkTUI({ registry, mqtt, stats, session, bus, config, extras }) {
+  const isTTY = process.stdin.isTTY;
+
+  if (!isTTY) {
+    return startFallbackREPL({ registry, mqtt, stats, session, bus, config, extras });
+  }
+
+  const App = createApp({ registry, mqtt, stats, session, bus, config, extras });
+
+  const { unmount, waitUntilExit } = render(
+    React.createElement(App),
+    { exitOnCtrlC: false },
+  );
+  return { unmount, waitUntilExit };
+}
+
+async function startFallbackREPL({ registry, mqtt, stats, session, bus, extras }) {
+  const { createInterface } = await import('readline');
+  const chalk = (await import('chalk')).default;
+  const { getCompletions } = await import('../core/completion.js');
+
+  console.log(chalk.gray('\n  Non-interactive mode. Type to chat.\n'));
+
+  const rl = createInterface({
+    input: process.stdin, output: process.stdout,
+    prompt: chalk.cyan('> '),
+    completer: (line) => {
+      const hits = getCompletions(line);
+      return [hits.length ? hits : [], line];
+    },
+  });
+
+  bus.on('llm:text', (text) => {
+    const clean = text.replace(/\p{Emoji_Presentation}/gu, '').replace(/\p{Extended_Pictographic}/gu, '').trim();
+    if (clean) console.log(chalk.white(`  ${clean}`));
+    rl.prompt();
+  });
+
+  bus.on('tool:called', ({ name, result, args }) => {
+    const status = result.isError ? chalk.red('x') : chalk.green('v');
+    const detail = args?.path || args?.command || '';
+    console.log(chalk.dim(`  ${name}.${args?.action || ''} ${detail} ${status}`));
+  });
+
+  bus.on('ready', () => rl.prompt());
+
+  rl.on('line', async (input) => {
+    const text = input.trim();
+    if (!text) return rl.prompt();
+
+    if (text.startsWith('/quit') || text.startsWith('/exit')) {
+      process.exit(0);
+    }
+
+    // Intent parsing
+    try {
+      const { parseIntent } = await import('../core/intent.js');
+      const intent = parseIntent(text);
+      if (intent.matched) {
+        const result = await registry.call(intent.tool, intent.params);
+        const { formatToolResult } = await import('../core/formatter.js');
+        console.log(`\n${formatToolResult(intent.tool, intent.action, result)}\n`);
+        return rl.prompt();
+      }
+    } catch {}
+
+    mqtt.sendText(text);
+    rl.prompt();
+  });
+
+  rl.on('close', () => process.exit(0));
+  rl.prompt();
+
+  return {
+    unmount: () => rl.close(),
+    waitUntilExit: () => new Promise(() => {}),
+  };
+}

package/src/tui/renderer.js

@@ -23,19 +23,38 @@ function center(text, width) {
   return ' '.repeat(left) + text + ' '.repeat(width - left - text.length);
 }
 
-export function renderBanner(config, tools, connected) {
+/**
+ * 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'),
+  ];
+  console.log('');
+  for (const line of lines) console.log(line);
+  console.log('');
+}
+
+export function renderBanner(config, tools, connected, meta = {}) {
   const w = 48;
   const actions = tools.reduce((s, t) => s + (t.actions?.length || 0), 0);
   const cwd = process.cwd();
   const dirName = cwd.split('/').pop() || cwd;
+  const session = meta.session || '-';
+  const version = config.agent?.version || '';
 
   console.log('');
   console.log(chalk.cyan(`${box.tl}${horizontal(w, box.h)}${box.tr}`));
-  console.log(chalk.cyan(`${box.v}`) + chalk.bold.white(center(`🐾 ${config.agent?.name || 'Pelulu CLI'}`, w)) + chalk.cyan(`${box.v}`));
+  console.log(chalk.cyan(`${box.v}`) + chalk.bold.white(center(`${config.agent?.name || 'Pelulu CLI'}${version ? ' v' + version : ''}`, w)) + chalk.cyan(`${box.v}`));
   console.log(chalk.cyan(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
-  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  📁 ${dirName}`, w)) + chalk.cyan(`${box.v}`));
-  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  🔧 ${tools.length} tools · ${actions} actions · 15 MCP slots used`, w)) + chalk.cyan(`${box.v}`));
-  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  ${connected ? '🟢 MQTT Connected' : '🔴 Disconnected'}`, w)) + chalk.cyan(`${box.v}`));
+  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  ${dirName}`, w)) + chalk.cyan(`${box.v}`));
+  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  ${tools.length} tools / ${actions} actions`, w)) + chalk.cyan(`${box.v}`));
+  console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  ${connected ? 'MQTT: on' : 'MQTT: off'}  |  Session: ${session}`, w)) + chalk.cyan(`${box.v}`));
   console.log(chalk.cyan(`${box.bl}${horizontal(w, box.h)}${box.br}`));
   console.log('');
 }
@@ -44,7 +63,7 @@ export function renderStatus(status) {
   const w = 48;
   console.log('');
   console.log(chalk.cyan(`${box.tl}${horizontal(w, box.h)}${box.tr}`));
-  console.log(chalk.cyan(`${box.v}`) + chalk.bold.white(pad('  📊 Status', w)) + chalk.cyan(`${box.v}`));
+  console.log(chalk.cyan(`${box.v}`) + chalk.bold.white(pad('  [STATS] Status', w)) + chalk.cyan(`${box.v}`));
   console.log(chalk.cyan(`${box.ml}${horizontal(w, box.h)}${box.mr}`));
   for (const [key, value] of Object.entries(status)) {
     console.log(chalk.cyan(`${box.v}`) + chalk.gray(pad(`  ${key}: ${value}`, w)) + chalk.cyan(`${box.v}`));
@@ -55,7 +74,7 @@ export function renderStatus(status) {
 
 export function renderTools(tools) {
   console.log('');
-  console.log(chalk.bold.white('🔧 Available Tools:'));
+  console.log(chalk.bold.white('Available Tools:'));
   console.log('');
   for (const t of tools) {
     const actions = t.actions?.map(a => a.name || a).join(', ') || '';
@@ -67,29 +86,73 @@ export function renderTools(tools) {
 
 export function renderToolCall(name, action, args) {
   const ts = new Date().toLocaleTimeString();
-  console.log('');
-  console.log(chalk.dim(`  ${ts} `) + chalk.cyan('⚙️ ') + chalk.white(`${name}.${action}`));
-  if (args?.path) console.log(chalk.dim(`     📁 ${args.path}`));
-  if (args?.command) console.log(chalk.dim(`     💻 ${args.command}`));
+  const actionStr = action ? `.${action}` : '';
+  const detail = args?.path || args?.command || args?.pattern || args?.url || '';
+  const detailStr = detail ? chalk.dim(`  ${detail}`) : '';
+  console.log(`  ${chalk.dim(ts)} ${chalk.cyan(name)}${chalk.white(actionStr)}${detailStr}`);
 }
 
 export function renderToolResult(success, data) {
   if (success) {
-    console.log(chalk.green(`     ✅ OK`));
+    console.log(chalk.green(`     [OK] OK`));
   } else {
-    console.log(chalk.red(`     ❌ ${data || 'error'}`));
+    console.log(chalk.red(`     [ERR] ${data || 'error'}`));
   }
 }
 
+/**
+ * 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, '')
+    .replace(/\p{Extended_Pictographic}/gu, '')
+    .replace(/[\u2600-\u27BF]/g, '')
+    .replace(/[\u{1F000}-\u{1FFFF}]/gu, '')
+    .replace(/[\u200D\uFE0F]/g, '')
+    .replace(/[ \t]{2,}/g, ' ')
+    .replace(/ ([.,;:!?])/g, '$1')
+    .trim();
+}
+
 export function renderAiResponse(text) {
+  const clean = stripEmojis(text);
+  if (!clean) return;
   console.log('');
-  console.log(chalk.green(`  🤖 ${text}`));
+  // Wrap long lines at 80 chars
+  const lines = wrapText(clean, 80);
+  for (const line of lines) {
+    console.log(chalk.white(`  ${line}`));
+  }
   console.log('');
 }
 
+function wrapText(text, maxWidth) {
+  const paragraphs = text.split('\n');
+  const result = [];
+  for (const para of paragraphs) {
+    if (!para.trim()) { result.push(''); continue; }
+    const words = para.split(/\s+/);
+    let line = '';
+    for (const word of words) {
+      if (line.length + word.length + 1 > maxWidth && line.length > 0) {
+        result.push(line);
+        line = word;
+      } else {
+        line = line ? `${line} ${word}` : word;
+      }
+    }
+    if (line) result.push(line);
+  }
+  return result;
+}
+
 export function renderUserInput(text) {
   const ts = new Date().toLocaleTimeString();
-  console.log(chalk.dim(`  ${ts} `) + chalk.blue('👤 ') + chalk.white(text));
+  console.log(chalk.dim(`  ${ts} `) + chalk.blue('> ') + chalk.white(text));
 }
 
 export function renderHelp() {
@@ -103,17 +166,72 @@ export function renderHelp() {
   console.log(chalk.cyan('    /files') + chalk.gray('           File changes'));
   console.log(chalk.cyan('    /call <tool>') + chalk.gray('     Call tool directly'));
   console.log(chalk.cyan('    /doctor') + chalk.gray('          Health check'));
+  console.log(chalk.cyan('    /keys') + chalk.gray('           Keyboard shortcuts'));
   console.log(chalk.cyan('    /clear') + chalk.gray('           Clear screen'));
   console.log(chalk.cyan('    /quit') + chalk.gray('            Exit'));
   console.log('');
   console.log(chalk.bold.white('  Shortcuts:'));
-  console.log(chalk.cyan('    read index.js') + chalk.gray('     → file read'));
-  console.log(chalk.cyan('    run npm test') + chalk.gray('      → shell exec'));
-  console.log(chalk.cyan('    git status') + chalk.gray('        → git status'));
-  console.log(chalk.cyan('    build') + chalk.gray('              → project build'));
+  console.log(chalk.cyan('    read <file>') + chalk.gray('       file read'));
+  console.log(chalk.cyan('    run <cmd>') + chalk.gray('        shell exec'));
+  console.log(chalk.cyan('    git <cmd>') + chalk.gray('        git operation'));
+  console.log(chalk.cyan('    build / test / lint') + chalk.gray(' project actions'));
+  console.log(chalk.cyan('    Tab') + chalk.gray('               auto-complete'));
   console.log('');
 }
 
 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;
+
+  console.log('');
+  console.log(chalk.yellow(`${box.tl}${horizontal(w, box.h)}${box.tr}`));
+  console.log(chalk.yellow(`${box.v}`) + chalk.bold.yellow(center('  UPDATE TERSEDIA!', w)) + chalk.yellow(`${box.v}`));
+  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.bl}${horizontal(w, box.h)}${box.br}`));
+  console.log('');
+}
+
+/**
+ * Render update check failure (silent, dim)
+ */
+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('');
+}

package/src/tui/status-bar.js

@@ -7,7 +7,7 @@ import chalk from 'chalk';
 export class StatusBar {
   constructor() {
     this.items = {
-      mqtt: '⏳',
+      mqtt: '...',
       session: '-',
       tools: 0,
       calls: 0,
@@ -22,12 +22,12 @@ export class StatusBar {
     const { mqtt, session, tools, calls } = this.items;
     const time = new Date().toLocaleTimeString();
     const line = [
-      chalk.dim('─'.repeat(process.stdout.columns || 60)),
-      chalk.gray(`  ${mqtt === '✅' ? '🟢' : '🔴'} MQTT: ${mqtt}`),
-      chalk.gray(`  📡 Session: ${session}`),
-      chalk.gray(`  🔧 Tools: ${tools}`),
-      chalk.gray(`  📊 Calls: ${calls}`),
-      chalk.gray(`  🕐 ${time}`),
+      chalk.dim('\u2500'.repeat(process.stdout.columns || 60)),
+      chalk.gray(`  ${mqtt === '[OK]' ? '[on]' : '[off]'} MQTT: ${mqtt}`),
+      chalk.gray(`  Session: ${session}`),
+      chalk.gray(`  Tools: ${tools}`),
+      chalk.gray(`  Calls: ${calls}`),
+      chalk.gray(`  ${time}`),
     ].join('  ');
     console.log(line);
   }