kiku-agent 1.0.4 → 1.0.6

package/server/agent/ui.js

@@ -275,6 +275,15 @@ export function stripAnsi(str) {
   return str.replace(/\x1b\[[0-9;]*m/g, '');
 }
 
+export function sanitizeTerminalText(value, maxLength = 2000) {
+  return String(value ?? '')
+    .replace(/\x1b(?:\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1b\\))/g, '')
+    .replace(/[\x00-\x1f\x7f]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, Math.max(0, maxLength));
+}
+
 
 export function fitStyledText(styledText, maxWidth) {
   const safeWidth = Math.max(0, maxWidth);
@@ -311,6 +320,8 @@ export function printSolidBannerRow(styledText, targetWidth, requestedBg = C.bgP
   console.log(indent + background + C.white + fixedStyled + '\x1b[0K' + C.reset);
 }
 
+let activeTuiPrompt = null;
+
 export function createProgressRunner({
   badge = 'RUN',
   title = 'Processing...',
@@ -330,6 +341,13 @@ export function createProgressRunner({
     const spinner = spinnerFrames[frameIdx % spinnerFrames.length];
     frameIdx++;
 
+    if (activeTuiPrompt && !activeTuiPrompt.isDisposed && activeTuiPrompt.screenBuffer) {
+      activeTuiPrompt.agentState = `${currentTitle}${currentStep ? ` ▸ ${currentStep}` : ''}`;
+      activeTuiPrompt.agentStateTime = startTime;
+      activeTuiPrompt.render();
+      return;
+    }
+
     const badgeStr = `${badgeBg}${C.bold} ${badge} ${C.reset}`;
     const spinStr = `${C.sakura}${spinner}${C.reset}`;
     const titleStr = `${C.bold}${C.white}${currentTitle}${C.reset}`;
@@ -360,7 +378,12 @@ export function createProgressRunner({
         clearInterval(timer);
         timer = null;
       }
-      _rawStdoutWrite('\r\x1b[2K');
+      if (activeTuiPrompt && !activeTuiPrompt.isDisposed && activeTuiPrompt.screenBuffer) {
+        activeTuiPrompt.agentState = '';
+        activeTuiPrompt.render();
+      } else {
+        _rawStdoutWrite('\r\x1b[2K');
+      }
     },
     done(options = {}) {
       this.stop();
@@ -394,25 +417,33 @@ export function createProgressRunner({
 
 export function formatSolidPanelLines({ title, lines, width, indent = '', headerBg, bg }) {
   const w = width || getFullWidth();
+  const maxContentWidth = Math.max(16, w - (indent ? getStringDisplayWidth(indent) : 0) - 4);
   const rows = [];
   if (title) {
     const rawTitle = `${indent}  ${C.bold}${C.roseGlow}${title}${C.reset}`;
-    const fitted = fitStyledText(rawTitle, w);
-    const pad = Math.max(0, w - getStringDisplayWidth(fitted));
+    const wrappedTitle = wrapText(rawTitle, maxContentWidth);
     const hBg = headerBg || C.bgPanelHeader;
-    const themed = fitted.replace(/\x1b\[0m/g, C.reset + hBg + C.white);
-    rows.push(`${hBg}${C.white}${themed}${' '.repeat(pad)}${C.reset}`);
+    for (const tLine of wrappedTitle) {
+      const fitted = fitStyledText(tLine.startsWith(indent) ? tLine : `${indent}  ${tLine}`, w);
+      const pad = Math.max(0, w - getStringDisplayWidth(fitted));
+      const themed = fitted.replace(/\x1b\[0m/g, C.reset + hBg + C.white);
+      rows.push(`${hBg}${C.white}${themed}${' '.repeat(pad)}${C.reset}`);
+    }
   }
   const bodyBg = bg || C.bgPanel;
   for (const raw of (lines || [])) {
     const text = typeof raw === 'string' ? raw : (raw?.text ?? '');
     const sublines = String(text).split('\n');
     for (const subline of sublines) {
-      const rowText = `${indent}  ${subline}`;
-      const fitted = fitStyledText(rowText, w);
-      const pad = Math.max(0, w - getStringDisplayWidth(fitted));
-      const themed = fitted.replace(/\x1b\[0m/g, C.reset + bodyBg + C.white);
-      rows.push(`${bodyBg}${C.white}${themed}${' '.repeat(pad)}${C.reset}`);
+      const isBoxTable = /^\s*[\x1b\[0-9;]*[┌├└│]/.test(subline);
+      const wrappedSublines = isBoxTable ? [subline] : wrapText(subline, maxContentWidth);
+      for (const wrapped of (wrappedSublines.length > 0 ? wrappedSublines : [''])) {
+        const rowText = isBoxTable ? (wrapped.startsWith(indent) ? wrapped : `${indent}${wrapped}`) : `${indent}  ${wrapped}`;
+        const fitted = fitStyledText(rowText, w);
+        const pad = Math.max(0, w - getStringDisplayWidth(fitted));
+        const themed = fitted.replace(/\x1b\[0m/g, C.reset + bodyBg + C.white);
+        rows.push(`${bodyBg}${C.white}${themed}${' '.repeat(pad)}${C.reset}`);
+      }
     }
   }
   return rows;
@@ -420,20 +451,284 @@ export function formatSolidPanelLines({ title, lines, width, indent = '', header
 
 export function printSolidPanel(options) {
   const rows = formatSolidPanelLines(options);
-  for (const row of rows) {
-    console.log(row);
+  console.log(`${rows.join('\n')}\n`);
+}
+
+export function formatRichBadge(text, color = C.emerald, bg = null) {
+  if (!text) return '';
+  if (bg) {
+    return `${bg}${color}${C.bold} ${text} ${C.reset}`;
+  }
+  return `${color}${C.bold}[${text}]${C.reset}`;
+}
+
+export function formatStatusBadge(statusType) {
+  const type = String(statusType || '').toLowerCase();
+  switch (type) {
+    case 'connected':
+    case 'ok':
+    case 'success':
+      return `${C.emerald}${C.bold}[✓ CONNECTED]${C.reset}`;
+    case 'offline':
+    case 'unreachable':
+      return `${C.amber}${C.bold}[! OFFLINE]${C.reset}`;
+    case 'autostart':
+    case 'starting':
+      return `${C.cyberCyan}${C.bold}[◆ AUTO-START]${C.reset}`;
+    case 'model':
+    case 'chat_ready':
+      return `${C.gold}${C.bold}[✦ MODEL READY]${C.reset}`;
+    case 'catalog':
+    case 'catalog_only':
+      return `${C.amber}${C.bold}[◆ CATALOG-ONLY]${C.reset}`;
+    case 'error':
+    case 'failed':
+      return `${C.red}${C.bold}[✕ ERROR]${C.reset}`;
+    case 'warning':
+    case 'warn':
+      return `${C.amber}${C.bold}[! WARNING]${C.reset}`;
+    case 'info':
+      return `${C.cyberCyan}${C.bold}[◆ INFO]${C.reset}`;
+    case 'mcp':
+      return `${C.lavender}${C.bold}[● MCP]${C.reset}`;
+    default:
+      return `${C.slate}${C.bold}[${String(statusType).toUpperCase()}]${C.reset}`;
+  }
+}
+
+export const STATUS_THEMES = Object.freeze({
+  connected: {
+    badgeBg: '\x1b[48;2;16;185;129m', badgeFg: '\x1b[38;2;10;25;18m',
+    headerBg: '\x1b[48;2;20;64;44m', headerFg: '\x1b[38;2;240;253;244m',
+    bodyBg: '\x1b[48;2;12;40;28m', bodyFg: '\x1b[38;2;230;250;240m',
+    icon: '✓', defaultBadge: 'CONNECTED',
+  },
+  ok: {
+    badgeBg: '\x1b[48;2;16;185;129m', badgeFg: '\x1b[38;2;10;25;18m',
+    headerBg: '\x1b[48;2;20;64;44m', headerFg: '\x1b[38;2;240;253;244m',
+    bodyBg: '\x1b[48;2;12;40;28m', bodyFg: '\x1b[38;2;230;250;240m',
+    icon: '✓', defaultBadge: 'READY',
+  },
+  success: {
+    badgeBg: '\x1b[48;2;16;185;129m', badgeFg: '\x1b[38;2;10;25;18m',
+    headerBg: '\x1b[48;2;20;64;44m', headerFg: '\x1b[38;2;240;253;244m',
+    bodyBg: '\x1b[48;2;12;40;28m', bodyFg: '\x1b[38;2;230;250;240m',
+    icon: '✓', defaultBadge: 'SUCCESS',
+  },
+  offline: {
+    badgeBg: '\x1b[48;2;245;158;11m', badgeFg: '\x1b[38;2;28;20;8m',
+    headerBg: '\x1b[48;2;60;40;14m', headerFg: '\x1b[38;2;254;243;199m',
+    bodyBg: '\x1b[48;2;42;28;10m', bodyFg: '\x1b[38;2;253;230;138m',
+    icon: '!', defaultBadge: 'OFFLINE',
+  },
+  unreachable: {
+    badgeBg: '\x1b[48;2;245;158;11m', badgeFg: '\x1b[38;2;28;20;8m',
+    headerBg: '\x1b[48;2;60;40;14m', headerFg: '\x1b[38;2;254;243;199m',
+    bodyBg: '\x1b[48;2;42;28;10m', bodyFg: '\x1b[38;2;253;230;138m',
+    icon: '!', defaultBadge: 'OFFLINE',
+  },
+  autostart: {
+    badgeBg: '\x1b[48;2;14;165;233m', badgeFg: '\x1b[38;2;8;24;36m',
+    headerBg: '\x1b[48;2;16;52;72m', headerFg: '\x1b[38;2;224;242;254m',
+    bodyBg: '\x1b[48;2;10;34;48m', bodyFg: '\x1b[38;2;186;230;253m',
+    icon: '◆', defaultBadge: 'AUTO-START',
+  },
+  starting: {
+    badgeBg: '\x1b[48;2;14;165;233m', badgeFg: '\x1b[38;2;8;24;36m',
+    headerBg: '\x1b[48;2;16;52;72m', headerFg: '\x1b[38;2;224;242;254m',
+    bodyBg: '\x1b[48;2;10;34;48m', bodyFg: '\x1b[38;2;186;230;253m',
+    icon: '◆', defaultBadge: 'AUTO-START',
+  },
+  model: {
+    badgeBg: '\x1b[48;2;234;179;8m', badgeFg: '\x1b[38;2;30;24;8m',
+    headerBg: '\x1b[48;2;58;44;14m', headerFg: '\x1b[38;2;254;249;195m',
+    bodyBg: '\x1b[48;2;38;30;10m', bodyFg: '\x1b[38;2;254;240;138m',
+    icon: '✦', defaultBadge: 'MODEL READY',
+  },
+  chat_ready: {
+    badgeBg: '\x1b[48;2;234;179;8m', badgeFg: '\x1b[38;2;30;24;8m',
+    headerBg: '\x1b[48;2;58;44;14m', headerFg: '\x1b[38;2;254;249;195m',
+    bodyBg: '\x1b[48;2;38;30;10m', bodyFg: '\x1b[38;2;254;240;138m',
+    icon: '✦', defaultBadge: 'MODEL READY',
+  },
+  catalog: {
+    badgeBg: '\x1b[48;2;234;88;12m', badgeFg: '\x1b[38;2;30;12;6m',
+    headerBg: '\x1b[48;2;64;28;12m', headerFg: '\x1b[38;2;255;237;213m',
+    bodyBg: '\x1b[48;2;42;20;10m', bodyFg: '\x1b[38;2;254;215;170m',
+    icon: '◆', defaultBadge: 'CATALOG-ONLY',
+  },
+  catalog_only: {
+    badgeBg: '\x1b[48;2;234;88;12m', badgeFg: '\x1b[38;2;30;12;6m',
+    headerBg: '\x1b[48;2;64;28;12m', headerFg: '\x1b[38;2;255;237;213m',
+    bodyBg: '\x1b[48;2;42;20;10m', bodyFg: '\x1b[38;2;254;215;170m',
+    icon: '◆', defaultBadge: 'CATALOG-ONLY',
+  },
+  mcp: {
+    badgeBg: '\x1b[48;2;168;85;247m', badgeFg: '\x1b[38;2;26;10;36m',
+    headerBg: '\x1b[48;2;52;22;68m', headerFg: '\x1b[38;2;243;232;255m',
+    bodyBg: '\x1b[48;2;34;14;46m', bodyFg: '\x1b[38;2;233;213;255m',
+    icon: '●', defaultBadge: 'MCP READY',
+  },
+  warning: {
+    badgeBg: '\x1b[48;2;245;158;11m', badgeFg: '\x1b[38;2;28;20;8m',
+    headerBg: '\x1b[48;2;60;40;14m', headerFg: '\x1b[38;2;254;243;199m',
+    bodyBg: '\x1b[48;2;42;28;10m', bodyFg: '\x1b[38;2;253;230;138m',
+    icon: '!', defaultBadge: 'WARNING',
+  },
+  warn: {
+    badgeBg: '\x1b[48;2;245;158;11m', badgeFg: '\x1b[38;2;28;20;8m',
+    headerBg: '\x1b[48;2;60;40;14m', headerFg: '\x1b[38;2;254;243;199m',
+    bodyBg: '\x1b[48;2;42;28;10m', bodyFg: '\x1b[38;2;253;230;138m',
+    icon: '!', defaultBadge: 'WARNING',
+  },
+  error: {
+    badgeBg: '\x1b[48;2;239;68;68m', badgeFg: '\x1b[38;2;255;255;255m',
+    headerBg: '\x1b[48;2;68;18;24m', headerFg: '\x1b[38;2;254;226;226m',
+    bodyBg: '\x1b[48;2;46;12;16m', bodyFg: '\x1b[38;2;254;202;202m',
+    icon: '✕', defaultBadge: 'ERROR',
+  },
+  failed: {
+    badgeBg: '\x1b[48;2;239;68;68m', badgeFg: '\x1b[38;2;255;255;255m',
+    headerBg: '\x1b[48;2;68;18;24m', headerFg: '\x1b[38;2;254;226;226m',
+    bodyBg: '\x1b[48;2;46;12;16m', bodyFg: '\x1b[38;2;254;202;202m',
+    icon: '✕', defaultBadge: 'ERROR',
+  },
+  info: {
+    badgeBg: '\x1b[48;2;56;189;248m', badgeFg: '\x1b[38;2;8;24;36m',
+    headerBg: '\x1b[48;2;16;50;70m', headerFg: '\x1b[38;2;224;242;254m',
+    bodyBg: '\x1b[48;2;10;32;46m', bodyFg: '\x1b[38;2;186;230;253m',
+    icon: '◆', defaultBadge: 'INFO',
+  },
+});
+
+export function formatRichCardLines({
+  title = '',
+  badge = '',
+  status = null,
+  lines = [],
+  width,
+  indent = '  ',
+  footer = '',
+} = {}) {
+  const normStatus = String(status || 'info').toLowerCase();
+  const st = STATUS_THEMES[normStatus] || STATUS_THEMES.info;
+  const termWidth = width || getFullWidth();
+  const blockWidth = Math.max(30, Math.min(84, termWidth - getStringDisplayWidth(indent) - 2));
+  const rows = [];
+
+  const icon = st.icon;
+  const badgeLabel = badge || st.defaultBadge;
+  const badgePart = `${st.badgeBg}${st.badgeFg}${C.bold} ${icon} ${badgeLabel} ${C.reset}`;
+  const titlePart = title ? ` ${title}` : '';
+  const headerLeftVisual = getStringDisplayWidth(` ${icon} ${badgeLabel} `) + getStringDisplayWidth(titlePart);
+  const headerPad = Math.max(0, blockWidth - headerLeftVisual);
+  const headerRow = `${indent}${badgePart}${st.headerBg}${st.headerFg}${C.bold}${titlePart}${' '.repeat(headerPad)}${C.reset}`;
+  rows.push(headerRow);
+
+  const innerContentWidth = blockWidth - 4;
+  for (const raw of (lines || [])) {
+    const text = typeof raw === 'string' ? raw : (raw?.text ?? '');
+    const sublines = String(text).split('\n');
+    for (const subline of sublines) {
+      const wrapped = wrapText(subline, innerContentWidth);
+      for (const wLine of (wrapped.length > 0 ? wrapped : [''])) {
+        const fitted = fitStyledText(wLine, innerContentWidth);
+        const pad = Math.max(0, innerContentWidth - getStringDisplayWidth(fitted));
+        const lineRow = `${indent}${st.bodyBg}${st.bodyFg}  ${fitted}${' '.repeat(pad)}  ${C.reset}`;
+        rows.push(lineRow);
+      }
+    }
   }
-  console.log('');
+
+  if (footer) {
+    const footerText = fitStyledText(footer, innerContentWidth);
+    const footerPad = Math.max(0, innerContentWidth - getStringDisplayWidth(footerText));
+    const footerRow = `${indent}${st.bodyBg}${C.dim}${st.bodyFg}  ${footerText}${' '.repeat(footerPad)}  ${C.reset}`;
+    rows.push(footerRow);
+  }
+
+  return rows;
 }
 
+export function printRichCard(options) {
+  const rows = formatRichCardLines(options);
+  console.log(`${rows.join('\n')}\n`);
+}
+
+export function printRichStatusCard({ status, title, lines = [], footer = '', width } = {}) {
+  const rows = formatRichCardLines({
+    title,
+    status,
+    lines,
+    footer,
+    width,
+  });
+  console.log(`\n${rows.join('\n')}\n`);
+}
+
+export function formatRichTable(headers = [], rows = [], maxWidth = getFullWidth() - 4) {
+  if (!headers.length && !rows.length) return [];
+  const colCount = Math.max(headers.length, ...rows.map(r => r.length));
+  const colWidths = new Array(colCount).fill(3);
+
+  for (let c = 0; c < colCount; c++) {
+    const headerLen = getStringDisplayWidth(headers[c] || '');
+    colWidths[c] = Math.max(colWidths[c], headerLen);
+    for (const row of rows) {
+      const cellLen = getStringDisplayWidth(row[c] || '');
+      colWidths[c] = Math.max(colWidths[c], cellLen);
+    }
+  }
+
+  const totalVisualWidth = colWidths.reduce((sum, w) => sum + w + 3, 1);
+  if (totalVisualWidth > maxWidth) {
+    const available = Math.max(20, maxWidth - colCount * 3 - 1);
+    const sumWidths = colWidths.reduce((a, b) => a + b, 0);
+    for (let c = 0; c < colCount; c++) {
+      colWidths[c] = Math.max(6, Math.floor((colWidths[c] / sumWidths) * available));
+    }
+  }
+
+  const output = [];
+  const topBorder = `  ┌─${colWidths.map(w => '─'.repeat(w)).join('─┬─')}─┐`;
+  const midBorder = `  ├─${colWidths.map(w => '─'.repeat(w)).join('─┼─')}─┤`;
+  const botBorder = `  └─${colWidths.map(w => '─'.repeat(w)).join('─┴─')}─┘`;
+
+  output.push(`${C.slate}${topBorder}${C.reset}`);
+
+  if (headers.length > 0) {
+    const headerCells = [];
+    for (let c = 0; c < colCount; c++) {
+      const text = fitStyledText(headers[c] || '', colWidths[c]);
+      const pad = Math.max(0, colWidths[c] - getStringDisplayWidth(text));
+      headerCells.push(`${C.bold}${C.gold}${text}${C.reset}${' '.repeat(pad)}`);
+    }
+    output.push(`  ${C.slate}│${C.reset} ${headerCells.join(` ${C.slate}│${C.reset} `)} ${C.slate}│${C.reset}`);
+    output.push(`${C.slate}${midBorder}${C.reset}`);
+  }
+
+  for (const row of rows) {
+    const rowCells = [];
+    for (let c = 0; c < colCount; c++) {
+      const cellRaw = row[c] || '—';
+      const text = fitStyledText(cellRaw, colWidths[c]);
+      const pad = Math.max(0, colWidths[c] - getStringDisplayWidth(text));
+      rowCells.push(`${C.white}${text}${C.reset}${' '.repeat(pad)}`);
+    }
+    output.push(`  ${C.slate}│${C.reset} ${rowCells.join(` ${C.slate}│${C.reset} `)} ${C.slate}│${C.reset}`);
+  }
 
+  output.push(`${C.slate}${botBorder}${C.reset}`);
+  return output;
+}
 
 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.roseGlow}■ $1${C.reset}`)
     .replace(/^#\s*(.+)$/gm, `\n${C.bold}${C.sakura}━━━ $1 ━━━${C.reset}`)
+    .replace(/^>\s*(.+)$/gm, `  ${C.slate}│${C.reset} ${C.italic}${C.white}$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}`)
@@ -443,7 +738,6 @@ export function formatTerminalMarkdown(text) {
     .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;
@@ -458,7 +752,6 @@ export function parseMarkdownTableRow(text) {
   return cells.length >= 2 ? cells : null;
 }
 
-
 export function isMarkdownTableSeparator(cells) {
   return Array.isArray(cells)
     && cells.length > 0
@@ -472,23 +765,112 @@ export function expandMarkdownLinks(text) {
   );
 }
 
+export function formatMarkdownLines(text, maxWidth = getFullWidth() - 8) {
+  if (!text) return [];
+  const lines = String(text).split('\n');
+  const result = [];
+  let tableHeaders = null;
+  let tableRows = [];
+
+  const flushTable = () => {
+    if (tableHeaders) {
+      if (tableRows.length > 0) {
+        const rendered = formatRichTable(tableHeaders, tableRows, maxWidth);
+        result.push(...rendered);
+      } else {
+        result.push(formatTerminalMarkdown(`| ${tableHeaders.join(' | ')} |`));
+      }
+      tableHeaders = null;
+      tableRows = [];
+    }
+  };
+
+  let pendingHeader = null;
+
+  for (let i = 0; i < lines.length; i++) {
+    const rawLine = lines[i];
+    const cells = parseMarkdownTableRow(rawLine);
+
+    if (pendingHeader) {
+      if (cells && cells.length === pendingHeader.length && isMarkdownTableSeparator(cells)) {
+        tableHeaders = pendingHeader.map(c => c.replace(/\*\*/g, '').replace(/`/g, ''));
+        pendingHeader = null;
+        tableRows = [];
+        continue;
+      } else {
+        result.push(formatTerminalMarkdown(expandMarkdownLinks(`| ${pendingHeader.join(' | ')} |`)));
+        pendingHeader = null;
+      }
+    }
+
+    if (tableHeaders) {
+      if (cells && cells.length === tableHeaders.length && !isMarkdownTableSeparator(cells)) {
+        tableRows.push(cells.map(c => c.replace(/\*\*/g, '').replace(/`/g, '')));
+        continue;
+      } else {
+        flushTable();
+      }
+    }
+
+    if (cells && !isMarkdownTableSeparator(cells)) {
+      pendingHeader = cells;
+      continue;
+    }
+
+    const formatted = formatTerminalMarkdown(expandMarkdownLinks(rawLine));
+    result.push(formatted);
+  }
+
+  if (pendingHeader) {
+    result.push(formatTerminalMarkdown(expandMarkdownLinks(`| ${pendingHeader.join(' | ')} |`)));
+  }
+  flushTable();
+
+  return result;
+}
+
 export function getWelcomeHeroLines() {
+  const p = C.sakura;
+  const r = C.roseGlow;
+  const g = C.gold;
+  const c = C.cyberCyan;
+  const l = C.lavender;
+  const e = C.emerald;
+  const s = C.slate;
+  const w = C.white;
+  const b = C.bold;
+  const d = C.dim;
+  const rst = C.reset;
+  const boxWidth = Math.min(84, Math.max(50, getFullWidth() - 4));
+  const headerTitle = 'Suggested Topics & Queries';
+  const topDashCount = Math.max(2, boxWidth - getStringDisplayWidth(headerTitle) - 6);
+  const innerWidth = boxWidth - 2;
+
+  const padItem = (icon, tag, text) => {
+    const tagWidth = 14;
+    const tagPadded = tag + ' '.repeat(Math.max(0, tagWidth - getStringDisplayWidth(tag)));
+    const visualContent = 2 + 2 + tagWidth + 2 + getStringDisplayWidth(text);
+    const pad = Math.max(0, innerWidth - visualContent);
+    return `  ${s}│${rst}  ${icon} ${tag}${rst}${' '.repeat(Math.max(0, tagWidth - getStringDisplayWidth(tag)))}  ${w}${text}${rst}${' '.repeat(pad)}${s}│${rst}`;
+  };
+
   return [
     '',
-    `  ${C.sakura}██╗  ██╗██╗██╗  ██╗██╗   ██╗     █████╗ ██╗${C.reset}   ${C.bold}${C.white}Kiku AI Terminal Agent${C.reset}`,
-    `  ${C.sakura}██║ ██╔╝██║██║ ██╔╝██║   ██║    ██╔══██╗██║${C.reset}   ${C.gold}v1.0.4${C.reset} ${C.slate}• Intelligent Fan Portal${C.reset}`,
-    `  ${C.roseGlow}█████═╝ ██║█████═╝ ██║   ██║    ███████║██║${C.reset}   ${C.cyberCyan}SSOT • DAG • Dynamic Tools${C.reset}`,
-    `  ${C.roseGlow}██╔═██╗ ██║██╔═██╗ ██║   ██║    ██╔══██╗██║${C.reset}   ${C.emerald}LM Studio / Cloud Providers${C.reset}`,
-    `  ${C.sakura}██║ ╚██╗██║██║ ╚██╗╚██████╔╝    ██║  ██║██║${C.reset}`,
-    `  ${C.sakura}╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝     ╚═╝  ╚═╝╚═╝${C.reset}`,
+    `  ${p}██╗  ██╗██╗██╗  ██╗██╗   ██╗     █████╗ ██╗${rst}   ${b}${p}◆ Ju Jingyi • 鞠婧祎 • Mìjú Terminal Portal ◆${rst}`,
+    `  ${p}██║ ██╔╝██║██║ ██╔╝██║   ██║    ██╔══██╗██║${rst}   ${d}${s}Interactive Fan Knowledge Base & Autonomous Agent${rst}`,
+    `  ${r}█████═╝ ██║█████═╝ ██║   ██║    ███████║██║${rst}   ${d}${s}Filmography • Discography • Fashion & Awards${rst}`,
+    `  ${r}██╔═██╗ ██║██╔═██╗ ██║   ██║    ██╔══██╗██║${rst}   ${c}● Live Ready${rst} ${s}• Multilingual (CN / EN / TH)${rst}`,
+    `  ${p}██║ ╚██╗██║██║ ╚██╗╚██████╔╝    ██║  ██║██║${rst}`,
+    `  ${p}╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝     ╚═╝  ╚═╝╚═╝${rst}`,
     '',
-    `  ${C.bold}${C.gold}Suggested Queries & Topics:${C.reset}`,
-    `  ${C.sakura}• 2026 Works${C.reset}    ${C.white}"What are Ju Jingyi's 2026 upcoming dramas?"${C.reset}`,
-    `  ${C.cyberCyan}• Music & OST${C.reset}   ${C.white}"OSTs from In Blossom & Ruyi Pavilion, /play Ginkgo"${C.reset}`,
-    `  ${C.emerald}• Endorsements${C.reset}  ${C.white}"Versace Global Ambassador & fashion partnerships"${C.reset}`,
-    `  ${C.lavender}• Tools / MCP${C.reset}   ${C.white}"@search_works 2026, /mcp list, /stats, /help"${C.reset}`,
+    `  ${s}╭──${rst} ${b}${g}${headerTitle}${rst} ${s}${'─'.repeat(topDashCount)}╮${rst}`,
+    padItem(p + '◆', '2026 Works', '"What are Ju Jingyi\'s 2026 upcoming dramas?"'),
+    padItem(c + '◆', 'Music & OST', '"OSTs from In Blossom & Ruyi Pavilion, /play Ginkgo"'),
+    padItem(e + '◆', 'Endorsements', '"Versace Global Ambassador & fashion partnerships"'),
+    padItem(l + '◆', 'Tools / MCP', '"@search_works 2026, /mcp list, /stats, /help"'),
+    `  ${s}╰${'─'.repeat(boxWidth)}╯${rst}`,
     '',
-    `  ${C.slate}Shortcuts: [Tab] Autocomplete • [↑/↓] History • [PgUp/PgDn] Scroll • [F2] Details • [Ctrl+C] Exit${C.reset}`,
+    `  ${s}Shortcuts: ${b}${w}[Tab]${rst} ${s}Autocomplete • ${b}${w}[↑/↓]${rst} ${s}History • ${b}${w}[PgUp/PgDn]${rst} ${s}Scroll • ${b}${w}[F2]${rst} ${s}Details • ${b}${w}[Ctrl+C]${rst} ${s}Exit${rst}`,
     '',
   ];
 }
@@ -502,6 +884,7 @@ export function printWelcomeHero() {
 
 
 export function setupOutputInterception(tuiPrompt, _isProcessingFn) {
+  activeTuiPrompt = tuiPrompt;
   let isTuiWriting = false;
   let isReplaying = false;
   let resizeTimer = null;
@@ -558,7 +941,7 @@ export function setupOutputInterception(tuiPrompt, _isProcessingFn) {
     if (tuiPrompt && tuiPrompt.screenBuffer && !tuiPrompt.isDisposed && !isTuiWriting) {
       isTuiWriting = true;
       try {
-        const text = args.map(a => (typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a))).join(' ');
+        const text = args.length === 0 ? '' : args.map(a => (typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a))).join(' ');
         tuiPrompt.addViewportLines(text);
       } finally {
         isTuiWriting = false;
@@ -579,6 +962,7 @@ export function setupOutputInterception(tuiPrompt, _isProcessingFn) {
   };
 
   return () => {
+    activeTuiPrompt = null;
     process.stdout.removeListener('resize', onResize);
     process.stdout.write = _rawStdoutWrite;
     console.log = _rawConsoleLog;
@@ -646,16 +1030,34 @@ export function formatTaskPlanBanner(plan) {
 
 export function enterAlternateScreen() {
   if (process.stdout.isTTY) {
-    _rawStdoutWrite('\x1b[?1049h\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1005l\x1b[?1006l\x1b[?25l\x1b[H\x1b[2J');
+    _rawStdoutWrite('\x1b[?1049h\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1005l\x1b[?1006l\x1b[?1015l\x1b[?25l\x1b[H\x1b[2J');
   }
 }
 
 export function exitAlternateScreen() {
   if (process.stdout.isTTY) {
-    _rawStdoutWrite('\x1b[?1006l\x1b[?1005l\x1b[?1003l\x1b[?1002l\x1b[?1000l\x1b[?1049l\x1b[?25h\x1b[0m\r\n');
+    _rawStdoutWrite('\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1005l\x1b[?1006l\x1b[?1015l\x1b[?1049l\x1b[?25h\x1b[0m\r\n');
   }
 }
 
+export function getTuiViewportLayout(termRows = 24) {
+  const parsedRows = Number(termRows);
+  const rows = Math.max(10, Number.isFinite(parsedRows) ? Math.floor(parsedRows) : 24);
+  const viewportStartRow = 1;
+  const statusBarRow = rows - 4;
+  const promptRow = rows - 2;
+  const separatorRow = rows - 1;
+
+  return {
+    termRows: rows,
+    viewportStartRow,
+    viewportHeight: Math.max(1, statusBarRow - viewportStartRow),
+    statusBarRow,
+    promptRow,
+    separatorRow,
+  };
+}
+
 export class VirtualScreenBuffer {
   constructor(width = 80, height = 24, writer = null) {
     this.width = Math.max(10, width);