pelulu-cli 1.0.0 → 1.0.1

package/src/tui/ink-app.js

@@ -0,0 +1,324 @@
+/**
+ * Ink App — Main Pelulu TUI Application
+ * Full React component with message list, input, status, thinking
+ */
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Box, Text, useApp, useInput, useStdin } from 'ink';
+import {
+  StatusBar, MessageBubble, ThinkingIndicator,
+} from './ink-components.js';
+import { CompletableInput } from './completable-input.js';
+import { setInkMode } from '../core/logger.js';
+
+export function createApp({ registry, mqtt, stats, session, bus, config, extras }) {
+  return function App() {
+    const { exit } = useApp();
+    const { isRawModeSupported } = useStdin();
+    const [messages, setMessages] = useState([]);
+    const [thinking, setThinking] = useState('idle');
+    const [connected, setConnected] = useState(mqtt.connected);
+    const [sessionId, setSessionId] = useState(mqtt.sessionId);
+    // Show last startup log as initial log line
+    const _startupLogs = extras?.startupLogs || [];
+    const _lastStartup = _startupLogs.length
+      ? _startupLogs[_startupLogs.length - 1].replace(/\x1b\[[0-9;]*m/g, '')
+      : '';
+    const [logLine, setLogLine] = useState(_lastStartup);
+    const logTimer = useRef(null);
+    const maxMessages = 200;
+    const [scrollOffset, setScrollOffset] = useState(0); // 0 = bottom, N = scrolled up N messages
+    const scrollOffsetRef = useRef(0);
+
+    // 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);
+    }, []);
+
+    // ─── Enable Ink mode for logger ──────────────────
+    useEffect(() => {
+      setInkMode(true, bus);
+      return () => {
+        setInkMode(false, null);
+        if (logTimer.current) clearTimeout(logTimer.current);
+      };
+    }, []);
+
+    // ─── Bus Events ───────────────────────────────────
+    useEffect(() => {
+      const onLlmText = (text) => {
+        setThinking('idle');
+        // 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)
+        setMessages(prev => [...prev.slice(-maxMessages), {
+          id: Date.now().toString(), role: 'assistant', content: text,
+        }]);
+      };
+
+      const onToolCalled = ({ name, result, args }) => {
+        setMessages(prev => [...prev.slice(-maxMessages), {
+          id: `tool-${Date.now()}`, role: 'tool',
+          toolName: name, action: args?.action,
+          detail: args?.path || args?.command || args?.pattern || '',
+        }, {
+          id: `result-${Date.now()}`, role: 'tool',
+          toolName: '', action: '',
+          detail: result.isError
+            ? `x ${result.content?.[0]?.text || 'error'}`
+            : 'v OK',
+        }]);
+      };
+
+      const onThinking = ({ state }) => setThinking(state);
+      const onReady = () => {
+        setConnected(true);
+        setSessionId(mqtt.sessionId);
+      };
+      const onDisconnect = () => {
+        setConnected(false);
+        setSessionId(null);
+      };
+
+      // Single log line that updates in place
+      const onLogMessage = ({ level, msg }) => {
+        const LABELS = { ok: 'OK', err: 'ERR', warn: 'WARN', info: 'i', tool: 'TOOL', mcp: 'MCP', user: 'USER', ai: 'AI' };
+        const label = LABELS[level] || level.toUpperCase();
+        setLogLine(`[${label}] ${msg}`);
+        // Auto-hide after 4s of no new logs
+        if (logTimer.current) clearTimeout(logTimer.current);
+        logTimer.current = setTimeout(() => setLogLine(''), 4000);
+      };
+
+      // XiaoZhi sends responses as TTS sentences, not LLM text
+      // Accumulate TTS sentences and display as assistant message
+      let ttsBuffer = '';
+      let ttsTimer = null;
+
+      const onTtsSentence = (text) => {
+        ttsBuffer += text;
+        setThinking('idle');
+        // Debounce: wait for all TTS sentences to arrive, then display
+        if (ttsTimer) clearTimeout(ttsTimer);
+        ttsTimer = setTimeout(() => {
+          if (ttsBuffer) {
+            setMessages(prev => {
+              const next = [...prev.slice(-maxMessages), {
+                id: Date.now().toString(), role: 'assistant', content: ttsBuffer,
+              }];
+              // Auto-scroll to bottom on new AI response
+              setScrollOffset(0);
+              scrollOffsetRef.current = 0;
+              return next;
+            });
+            ttsBuffer = '';
+          }
+        }, 500);
+      };
+
+      bus.on('llm:text', onLlmText);
+      bus.on('tts:sentence', onTtsSentence);
+      bus.on('tool:called', onToolCalled);
+      bus.on('thinking', onThinking);
+      bus.on('ready', onReady);
+      bus.on('mqtt:error', onDisconnect);
+      bus.on('log:message', onLogMessage);
+
+      return () => {
+        bus.off('llm:text', onLlmText);
+        bus.off('tts:sentence', onTtsSentence);
+        bus.off('tool:called', onToolCalled);
+        bus.off('thinking', onThinking);
+        bus.off('ready', onReady);
+        bus.off('mqtt:error', onDisconnect);
+        bus.off('log:message', onLogMessage);
+        if (ttsTimer) clearTimeout(ttsTimer);
+      };
+    }, []);
+
+    // ─── Keyboard shortcuts ─────────────────────────
+    useInput((input, key) => {
+      if (key.ctrl && input === 'c') exit();
+
+      // Scroll: Shift+Up / Shift+Down / PageUp / PageDown
+      if (key.shift && key.upArrow) {
+        setScrollOffset(prev => {
+          const next = Math.min(prev + 5, messages.length - 1);
+          scrollOffsetRef.current = next;
+          return next;
+        });
+      } else if (key.shift && key.downArrow) {
+        setScrollOffset(prev => {
+          const next = Math.max(0, prev - 5);
+          scrollOffsetRef.current = next;
+          return next;
+        });
+      } else if (key.pageUp) {
+        setScrollOffset(prev => {
+          const next = Math.min(prev + 20, messages.length - 1);
+          scrollOffsetRef.current = next;
+          return next;
+        });
+      } else if (key.pageDown) {
+        setScrollOffset(prev => {
+          const next = Math.max(0, prev - 20);
+          scrollOffsetRef.current = next;
+          return next;
+        });
+      }
+    });
+
+    // ─── Handle Submit ────────────────────────────────
+    const handleSubmit = useCallback(async (text) => {
+      // Add user message
+      setMessages(prev => [...prev.slice(-maxMessages), {
+        id: `user-${Date.now()}`, role: 'user', content: text,
+      }]);
+
+      // Slash commands
+      if (text.startsWith('/')) {
+        const [cmd, ...rest] = text.split(' ');
+        const arg = rest.join(' ');
+        const ctx = { registry, mqtt, stats, session, fileTracker: extras.fileTracker, history: [] };
+
+        if (cmd === '/quit' || cmd === '/exit') {
+          exit();
+          return;
+        }
+        if (cmd === '/clear') {
+          setMessages([]);
+          setScrollOffset(0);
+          scrollOffsetRef.current = 0;
+          return;
+        }
+        if (cmd === '/status') {
+          const s = session.getStats();
+          setMessages(prev => [...prev, {
+            id: `sys-${Date.now()}`, role: 'system',
+            content: `mqtt: ${mqtt.connected ? 'on' : 'off'} | session: ${mqtt.sessionId || '-'} | tools: ${registry.all().length} | turns: ${s.turns} | calls: ${s.toolCalls}`,
+          }]);
+          return;
+        }
+        if (cmd === '/tools') {
+          const tools = registry.list();
+          const lines = tools.map(t => `  ${t.name} (${t.actions?.length || 0})`).join('\n');
+          setMessages(prev => [...prev, {
+            id: `sys-${Date.now()}`, role: 'system', content: `tools:\n${lines}`,
+          }]);
+          return;
+        }
+
+        // Try repl-commands handler
+        try {
+          const { handleCommand } = await import('../repl-commands.js');
+          const special = await handleCommand(cmd, arg, ctx);
+          if (special === 'help') {
+            setMessages(prev => [...prev, {
+              id: `sys-${Date.now()}`, role: 'system',
+              content: '/tools /status /stats /clear /quit /call <tool> <action> /keys',
+            }]);
+          }
+        } catch {}
+        return;
+      }
+
+      // Intent parsing (natural language shortcuts)
+      try {
+        const { parseIntent } = await import('../core/intent.js');
+        const intent = parseIntent(text);
+        if (intent.matched) {
+          setThinking('tool_call');
+          const result = await registry.call(intent.tool, intent.params);
+          setThinking('idle');
+          const { formatToolResult } = await import('../core/formatter.js');
+          const formatted = formatToolResult(intent.tool, intent.action, result);
+          setMessages(prev => [...prev.slice(-maxMessages), {
+            id: `tool-${Date.now()}`, role: 'tool',
+            toolName: intent.tool, action: intent.action,
+            detail: '',
+          }, {
+            id: `result-${Date.now()}`, role: 'assistant', content: formatted,
+          }]);
+          return;
+        }
+      } catch {}
+
+      // Send to XiaoZhi
+      setThinking('thinking');
+      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();
+    const totalMessages = messages.length;
+    const endIdx = totalMessages - scrollOffset;
+    const startIdx = Math.max(0, endIdx - availableRows);
+    const visibleMessages = messages.slice(startIdx, endIdx);
+    const canScrollUp = scrollOffset < totalMessages - 1;
+    const canScrollDown = scrollOffset > 0;
+
+    return React.createElement(Box, {
+      flexDirection: 'column', width: '100%',
+    },
+      // Top: Status bar
+      React.createElement(StatusBar, {
+        connected, session: sessionId,
+        version: config?.agent?.version,
+      }),
+
+      // Log status line (single line, auto-updating, auto-hiding)
+      logLine
+        ? React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true, color: 'gray' }, logLine),
+          )
+        : null,
+
+      // Scroll indicator (only when scrolled up)
+      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]`
+            ),
+          )
+        : null,
+
+      // Middle: Messages (scrollable window)
+      React.createElement(Box, {
+        flexDirection: 'column', paddingY: 1,
+      },
+        totalMessages === 0
+          ? React.createElement(Box, { paddingLeft: 2 },
+              React.createElement(Text, { dimColor: true },
+                'type a message to get started. tab for autocomplete. /help for commands.'
+              ),
+            )
+          : visibleMessages.map((msg) =>
+              React.createElement(MessageBubble, { key: msg.id, message: msg })
+            ),
+        canScrollDown
+          ? React.createElement(Box, { paddingLeft: 2 },
+              React.createElement(Text, { dimColor: true, color: 'yellow' },
+                `[${scrollOffset} more below | Shift+Down or PgDn to scroll to bottom]`
+              ),
+            )
+          : null,
+        React.createElement(ThinkingIndicator, { state: thinking }),
+      ),
+
+      // Bottom: Input
+      React.createElement(Box, {
+        borderStyle: 'single', borderColor: 'cyan', paddingX: 0,
+      },
+        React.createElement(CompletableInput, {
+          onSubmit: handleSubmit,
+          placeholder: 'type a message or /help ...',
+        }),
+      ),
+    );
+  };
+}

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(() => {}),
+  };
+}