kiku-agent 1.0.0

package/server/agent/ui.js

@@ -0,0 +1,469 @@
+import readline from 'node:readline';
+import { stdin as input, stdout as output } from 'node:process';
+import { eventBus, Events } from './eventBus.js';
+import { AgentStates } from './agentState.js';
+import { ansiBackground, ansiForeground, getThemePalette } from './theme.js';
+
+
+export const C = Object.freeze({
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  italic: '\x1b[3m',
+  underline: '\x1b[4m',
+
+  get sakura() { return ansiForeground(getThemePalette().primary); },
+  get roseGlow() { return ansiForeground(getThemePalette().secondary); },
+  get gold() { return ansiForeground(getThemePalette().highlight); },
+  get amber() { return ansiForeground(getThemePalette().warning); },
+  get cyberCyan() { return ansiForeground(getThemePalette().info); },
+  get emerald() { return ansiForeground(getThemePalette().success); },
+  get lavender() { return ansiForeground(getThemePalette().tertiary); },
+  get slate() { return ansiForeground(getThemePalette().muted); },
+  get darkGray() { return ansiForeground(getThemePalette().subdued); },
+  get white() { return ansiForeground(getThemePalette().text); },
+  get red() { return ansiForeground(getThemePalette().error); },
+  get bgPanel() { return ansiBackground(getThemePalette().panel); },
+  get bgPanelHeader() { return ansiBackground(getThemePalette().panelHeader); },
+  get bgDark() { return ansiBackground(getThemePalette().panel); },
+  get bgTool() { return ansiBackground(getThemePalette().panel); },
+  get bgToolResult() { return ansiBackground(getThemePalette().panel); },
+  get bgToolError() { return ansiBackground(getThemePalette().panel); },
+  get bgThinking() { return ansiBackground(getThemePalette().panel); },
+  get bgResponse() { return ansiBackground(getThemePalette().panel); },
+  get bgError() { return ansiBackground(getThemePalette().panel); },
+});
+
+const _rawStdoutWrite = process.stdout.write.bind(process.stdout);
+const _rawConsoleLog = console.log.bind(console);
+const _rawConsoleClear = console.clear.bind(console);
+
+
+
+export const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export const processingFrames = spinnerFrames;
+export const thinkingFrames = spinnerFrames;
+export const successFrames = ['OK'];
+export const pulseFrames = ['▓', '▒', '░', '▒', '▓', '█', '▓', '▒'];
+export const INPUT_PLACEHOLDER = 'Ask about Ju Jingyi or type / for commands';
+export const UI_ICONS = Object.freeze({
+  help: '📖',
+  music: '🎵',
+  sponsor: '📢',
+});
+
+const fanNames = ['Mìjú / 蜜橘'];
+export function randomFanName() {
+  return fanNames[Math.floor(Math.random() * fanNames.length)];
+}
+
+
+
+const graphemeSegmenter = typeof Intl?.Segmenter === 'function'
+  ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  : null;
+
+function fallbackGraphemeSegments(str) {
+  const segments = [];
+  let index = 0;
+
+  for (const char of Array.from(str)) {
+    const isContinuation = segments.length > 0 && (
+      /^\p{Mark}$/u.test(char) ||
+      /^\p{Emoji_Modifier}$/u.test(char) ||
+      char === '\uFE0F' ||
+      char === '\u20E3' ||
+      segments.at(-1).segment.endsWith('\u200D') ||
+      char === '\u200D'
+    );
+
+    if (isContinuation) {
+      segments.at(-1).segment += char;
+      segments.at(-1).end += char.length;
+    } else {
+      segments.push({ segment: char, index, end: index + char.length });
+    }
+    index += char.length;
+  }
+
+  return segments;
+}
+
+
+export function getGraphemeSegments(str) {
+  if (!str) return [];
+  if (!graphemeSegmenter) return fallbackGraphemeSegments(str);
+  return Array.from(graphemeSegmenter.segment(str), ({ segment, index }) => ({
+    segment,
+    index,
+    end: index + segment.length,
+  }));
+}
+
+export function previousGraphemeBoundary(str, cursor) {
+  const safeCursor = Math.max(0, Math.min(str.length, cursor));
+  let previous = 0;
+  for (const item of getGraphemeSegments(str)) {
+    if (item.end >= safeCursor) return item.index;
+    previous = item.end;
+  }
+  return previous;
+}
+
+export function nextGraphemeBoundary(str, cursor) {
+  const safeCursor = Math.max(0, Math.min(str.length, cursor));
+  for (const item of getGraphemeSegments(str)) {
+    if (item.end > safeCursor) return item.end;
+  }
+  return str.length;
+}
+
+function getGraphemeDisplayWidth(segment) {
+  if (/\p{Extended_Pictographic}|\p{Regional_Indicator}/u.test(segment) || /[\uFE0F\u20E3]/u.test(segment)) {
+    return 2;
+  }
+
+  let width = 0;
+  for (const char of Array.from(segment)) {
+    const code = char.codePointAt(0);
+    if (/^\p{Mark}$/u.test(char) || code === 0x200D || (code >= 0xFE00 && code <= 0xFE0F)) continue;
+    if (
+      (code >= 0x1100 && code <= 0x11FF) ||
+      (code >= 0x2E80 && code <= 0x9FFF) ||
+      (code >= 0xAC00 && code <= 0xD7A3) ||
+      (code >= 0xF900 && code <= 0xFAFF) ||
+      (code >= 0xFE30 && code <= 0xFE4F)
+    ) {
+      width += 2;
+    } else {
+      width += 1;
+    }
+  }
+  return width;
+}
+
+
+export function getStringDisplayWidth(str) {
+  if (!str) return 0;
+  const clean = str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
+  return getGraphemeSegments(clean).reduce((width, item) => width + getGraphemeDisplayWidth(item.segment), 0);
+}
+
+
+export function sliceLineForDisplay(str, cursor, maxWidth) {
+  const segments = getGraphemeSegments(str).map(item => ({
+    ...item,
+    width: getGraphemeDisplayWidth(item.segment),
+  }));
+  const safeMaxWidth = Math.max(1, maxWidth);
+  const totalWidth = segments.reduce((sum, item) => sum + item.width, 0);
+  const safeCursor = Math.max(0, Math.min(str.length, cursor));
+
+  let cursorIndex = segments.findIndex(item => item.index >= safeCursor);
+  if (cursorIndex === -1) cursorIndex = segments.length;
+
+  if (totalWidth <= safeMaxWidth) {
+    return {
+      displayLine: str,
+      cursorVisualOffset: segments.slice(0, cursorIndex).reduce((sum, item) => sum + item.width, 0),
+    };
+  }
+
+  let start = cursorIndex;
+  let end = cursorIndex;
+  let contentWidth = 0;
+  let leftWidth = 0;
+  let rightWidth = 0;
+
+  while (true) {
+    const candidates = [];
+    if (start > 0) {
+      const nextStart = start - 1;
+      const markerWidth = (nextStart > 0 ? 1 : 0) + (end < segments.length ? 1 : 0);
+      const width = segments[nextStart].width;
+      if (contentWidth + width + markerWidth <= safeMaxWidth) {
+        candidates.push({ side: 'left', width, balance: leftWidth });
+      }
+    }
+    if (end < segments.length) {
+      const nextEnd = end + 1;
+      const markerWidth = (start > 0 ? 1 : 0) + (nextEnd < segments.length ? 1 : 0);
+      const width = segments[end].width;
+      if (contentWidth + width + markerWidth <= safeMaxWidth) {
+        candidates.push({ side: 'right', width, balance: rightWidth });
+      }
+    }
+    if (candidates.length === 0) break;
+
+    candidates.sort((a, b) => a.balance - b.balance || a.width - b.width);
+    const selected = candidates[0];
+    if (selected.side === 'left') {
+      start--;
+      leftWidth += selected.width;
+    } else {
+      rightWidth += selected.width;
+      end++;
+    }
+    contentWidth += selected.width;
+  }
+
+  const hasLeftEllipsis = start > 0;
+  const hasRightEllipsis = end < segments.length;
+  const displayLine = `${hasLeftEllipsis ? '…' : ''}${segments.slice(start, end).map(item => item.segment).join('')}${hasRightEllipsis ? '…' : ''}`;
+  const cursorVisualOffset = (hasLeftEllipsis ? 1 : 0) + segments
+    .slice(start, cursorIndex)
+    .reduce((sum, item) => sum + item.width, 0);
+
+  return { displayLine, cursorVisualOffset };
+}
+
+export function getFullWidth() {
+  return process.stdout.columns || 80;
+}
+
+
+
+export function wrapText(text, maxWidth = 72) {
+  if (!text) return [];
+  const lines = [];
+  const rawParagraphs = text.split('\n');
+
+  for (const para of rawParagraphs) {
+    if (!para.trim()) {
+      lines.push('');
+      continue;
+    }
+
+    const words = para.split(/\s+/);
+    let currentLine = '';
+
+    for (const word of words) {
+      if (!word) continue;
+      const testLine = currentLine ? (currentLine + ' ' + word) : word;
+      const testWidth = getStringDisplayWidth(testLine);
+
+      if (testWidth <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+          currentLine = word;
+        } else {
+          let chunk = '';
+          for (const ch of word) {
+            if (getStringDisplayWidth(chunk + ch) <= maxWidth) {
+              chunk += ch;
+            } else {
+              lines.push(chunk);
+              chunk = ch;
+            }
+          }
+          currentLine = chunk;
+        }
+      }
+    }
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+  }
+  return lines;
+}
+
+
+
+export function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+
+export function fitStyledText(styledText, maxWidth) {
+  const safeWidth = Math.max(0, maxWidth);
+  let result = '';
+  let usedWidth = 0;
+  const tokens = String(styledText || '').split(/(\x1b\[[0-9;]*[a-zA-Z])/g);
+
+  for (const token of tokens) {
+    if (!token) continue;
+    if (/^\x1b\[[0-9;]*[a-zA-Z]$/.test(token)) {
+      result += token;
+      continue;
+    }
+    for (const item of getGraphemeSegments(token)) {
+      const itemWidth = getGraphemeDisplayWidth(item.segment);
+      if (usedWidth + itemWidth > safeWidth) return result;
+      result += item.segment;
+      usedWidth += itemWidth;
+    }
+  }
+  return result;
+}
+
+
+
+export function printSolidBannerRow(styledText, targetWidth, requestedBg = C.bgPanel, indent = '') {
+  const terminalWidth = getFullWidth();
+  const rowWidth = Math.max(1, Math.min(targetWidth || terminalWidth, terminalWidth) - 1);
+  const contentWidth = Math.max(0, rowWidth - getStringDisplayWidth(indent));
+  const fitted = fitStyledText(styledText, contentWidth);
+  const background = requestedBg === C.bgPanelHeader ? C.bgPanelHeader : C.bgPanel;
+  const fixedStyled = fitted.replace(/\x1b\[0m/g, C.reset + background + C.white);
+
+  console.log(indent + background + C.white + fixedStyled + '\x1b[0K' + C.reset);
+}
+
+export function printSolidPanel({ title, lines, width, indent = '' }) {
+  const w = width || getFullWidth();
+  if (title) {
+    printSolidBannerRow(`${indent}  ${C.bold}${C.roseGlow}${title}${C.reset}`, w, C.bgPanelHeader);
+  }
+  for (const raw of lines) {
+    const text = typeof raw === 'string' ? raw : raw.text;
+    printSolidBannerRow(`${indent}  ${text}`, w, C.bgPanel);
+  }
+  console.log('');
+}
+
+
+
+export function formatTerminalMarkdown(text) {
+  if (!text) return '';
+  return text
+    .replace(/^###\s*(.+)$/gm, `${C.bold}${C.gold}✦ $1${C.reset}`)
+    .replace(/^##\s*(.+)$/gm, `\n${C.bold}${C.roseGlow}$1${C.reset}`)
+    .replace(/^#\s*(.+)$/gm, `\n${C.bold}${C.sakura}━━━ $1 ━━━${C.reset}`)
+    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, `${C.bold}${C.cyberCyan}$1${C.reset} ➔ ${C.underline}${C.roseGlow}$2${C.reset}`)
+    .replace(/\*{3}([^*]+)\*{3}/g, `${C.bold}${C.italic}${C.white}$1${C.reset}`)
+    .replace(/\*\*([^*]+)\*\*/g, `${C.bold}${C.white}$1${C.reset}`)
+    .replace(/(?<!\*)\*([^\*\n]+)\*(?!\*)/g, `${C.italic}${C.white}$1${C.reset}`)
+    .replace(/`([^`]+)`/g, `${C.cyberCyan}$1${C.reset}`)
+    .replace(/^(\s*)[*•-]\s+/gm, `$1  ${C.sakura}•${C.reset} `)
+    .replace(/^\s*[-*_]{3,}\s*$/gm, `  ${C.slate}${'─'.repeat(Math.max(20, getFullWidth() - 6))}${C.reset}`);
+}
+
+
+export function parseMarkdownTableRow(text) {
+  const trimmed = String(text || '').trim();
+  if (!trimmed.includes('|')) return null;
+
+  const content = trimmed
+    .replace(/^\|/, '')
+    .replace(/\|$/, '');
+  const cells = content
+    .split(/(?<!\\)\|/)
+    .map(cell => cell.trim().replace(/\\\|/g, '|'));
+
+  return cells.length >= 2 ? cells : null;
+}
+
+
+export function isMarkdownTableSeparator(cells) {
+  return Array.isArray(cells)
+    && cells.length > 0
+    && cells.every(cell => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, '')));
+}
+
+
+export function expandMarkdownLinks(text) {
+  return String(text || '').replace(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+    '$1: $2'
+  );
+}
+
+
+
+export function printWelcomeHero() {
+  console.log(`\n${C.sakura}  ██╗  ██╗██╗██╗  ██╗██╗   ██╗     █████╗ ██╗${C.reset}\n${C.sakura}  ██║ ██╔╝██║██║ ██╔╝██║   ██║    ██╔══██╗██║${C.reset}\n${C.roseGlow}  █████═╝ ██║█████═╝ ██║   ██║    ███████║██║${C.reset}\n${C.roseGlow}  ██╔═██╗ ██║██╔═██╗ ██║   ██║    ██╔══██║██║${C.reset}\n${C.sakura}  ██║ ╚██╗██║██║ ╚██╗╚██████╔╝    ██║  ██║██║${C.reset}\n${C.sakura}  ╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝     ╚═╝  ╚═╝╚═╝${C.reset}\n\n${C.bold}${C.roseGlow}Example Questions:${C.reset}\n  ${C.dim}•${C.reset} ${C.white}"What are Ju Jingyi's 2026 upcoming drama series?"${C.reset}\n  ${C.dim}•${C.reset} ${C.white}"Tell me about her Global Brand Ambassador roles in 2026."${C.reset}\n  ${C.dim}•${C.reset} ${C.white}"Search the internet for Ju Jingyi's latest news."${C.reset}\n  ${C.dim}•${C.reset} ${C.white}"What OST songs are from The Blooms at Ruyi Pavilion?"${C.reset}\n${C.lavender}Quick Commands:${C.reset} ${C.cyberCyan}/help${C.reset} ${C.dim}•${C.reset} ${C.emerald}/history${C.reset} ${C.dim}•${C.reset} ${C.emerald}/lang${C.reset} ${C.dim}•${C.reset} ${C.emerald}/session${C.reset} ${C.dim}•${C.reset} ${C.emerald}/tool${C.reset} ${C.dim}•${C.reset} ${C.emerald}/mem${C.reset} ${C.dim}•${C.reset} ${C.emerald}/play${C.reset} ${C.dim}•${C.reset} ${C.emerald}/pause${C.reset} ${C.dim}•${C.reset} ${C.emerald}/next${C.reset} ${C.dim}•${C.reset} ${C.emerald}/search${C.reset} ${C.dim}•${C.reset} ${C.emerald}/current${C.reset} ${C.dim}•${C.reset} ${C.emerald}/ads${C.reset} ${C.dim}(Tab or ↑/↓ to navigate / commands)${C.reset}\n`);
+}
+
+
+
+
+export function setupOutputInterception(tuiPrompt, _isProcessingFn) {
+  let isTuiWriting = false;
+  let isReplaying = false;
+  let resizeTimer = null;
+  const transcript = [];
+  const MAX_TRANSCRIPT_ENTRIES = 2500;
+
+  const remember = (entry) => {
+    if (isReplaying) return;
+    transcript.push(entry);
+    if (transcript.length > MAX_TRANSCRIPT_ENTRIES) {
+      transcript.splice(0, transcript.length - MAX_TRANSCRIPT_ENTRIES);
+    }
+  };
+
+  process.stdout.write = function (chunk, encoding, callback) {
+    if (!isTuiWriting && !isReplaying) remember({ type: 'write', chunk: String(chunk) });
+    if (tuiPrompt && tuiPrompt.activeResolve && !isTuiWriting) {
+      isTuiWriting = true;
+      try {
+        tuiPrompt.clearPrompt();
+        return _rawStdoutWrite(chunk, encoding, callback);
+      } finally {
+        tuiPrompt.render();
+        isTuiWriting = false;
+      }
+    }
+    return _rawStdoutWrite(chunk, encoding, callback);
+  };
+
+  console.log = function (...args) {
+    if (!isReplaying) remember({ type: 'log', args: [...args] });
+    if (tuiPrompt && tuiPrompt.activeResolve && !isTuiWriting) {
+      isTuiWriting = true;
+      try {
+        tuiPrompt.clearPrompt();
+        _rawConsoleLog(...args);
+      } finally {
+        tuiPrompt.render();
+        isTuiWriting = false;
+      }
+    } else {
+      const wasTuiWriting = isTuiWriting;
+      isTuiWriting = true;
+      try { _rawConsoleLog(...args); }
+      finally { isTuiWriting = wasTuiWriting; }
+    }
+  };
+
+  console.clear = function () {
+    transcript.length = 0;
+    _rawConsoleClear();
+  };
+
+  process.stdout.on('resize', () => {
+    if (resizeTimer) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      resizeTimer = null;
+      if (!tuiPrompt || !tuiPrompt.activeResolve) return;
+
+      isTuiWriting = true;
+      isReplaying = true;
+      try {
+        tuiPrompt.lastRenderedLines = 0;
+        tuiPrompt.hasTopPadding = false;
+        _rawStdoutWrite('\x1b[?25l\x1b[2J\x1b[H');
+        printWelcomeHero();
+        for (const entry of transcript) {
+          if (entry.type === 'log') _rawConsoleLog(...entry.args);
+          else _rawStdoutWrite(entry.chunk);
+        }
+        tuiPrompt.render();
+      } finally {
+        _rawStdoutWrite('\x1b[?25h');
+        isReplaying = false;
+        isTuiWriting = false;
+      }
+    }, 120);
+  });
+}
+
+export function restoreOutput() {
+  process.stdout.write = _rawStdoutWrite;
+  console.log = _rawConsoleLog;
+  console.clear = _rawConsoleClear;
+}
+
+export { _rawStdoutWrite as rawWrite, _rawConsoleLog as rawLog };