@code4bug/jarvis-agent 1.0.2

package/dist/components/MarkdownText.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Text } from 'ink';
+import { Marked } from 'marked';
+// @ts-ignore — marked-terminal 无内置类型声明
+import { markedTerminal } from 'marked-terminal';
+// @ts-ignore
+import Table from 'cli-table3';
+// ===== ANSI 颜色常量 =====
+const RESET = '\x1b[0m';
+const BG_CODE = '\x1b[48;5;236m'; // 深灰背景
+const FG_LANG = '\x1b[38;5;243m'; // 语言标签颜色
+const FG_BORDER = '\x1b[38;5;240m'; // 边框颜色
+const FG_CODE = '\x1b[38;5;252m'; // 代码文本颜色
+/** 获取终端宽度，用于代码块边框 */
+function getTermWidth() {
+    return Math.min(process.stdout.columns || 80, 100);
+}
+/**
+ * 去除字符串中的 ANSI 转义序列，返回可见字符长度
+ */
+function stripAnsi(str) {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1b\[[0-9;]*m/g, '');
+}
+/**
+ * 自定义代码块渲染：深色背景 + Unicode 边框 + 语言标签
+ */
+function renderCodeBlock(code, lang) {
+    const width = getTermWidth() - 4;
+    const innerWidth = width - 2;
+    const lines = code.replace(/\n$/, '').split('\n');
+    const langTag = lang ? ` ${lang} ` : '';
+    const topBarFill = innerWidth - langTag.length;
+    const parts = [];
+    parts.push(`${FG_BORDER}┌${'─'.repeat(Math.max(topBarFill - langTag.length, 1))}${FG_LANG}${langTag}${FG_BORDER}${'─'.repeat(Math.min(langTag.length, topBarFill))}┐${RESET}`);
+    for (const line of lines) {
+        const visible = stripAnsi(line);
+        const pad = Math.max(innerWidth - visible.length, 0);
+        parts.push(`${FG_BORDER}│${RESET}${BG_CODE}${FG_CODE}${line}${' '.repeat(pad)}${RESET}${FG_BORDER}│${RESET}`);
+    }
+    parts.push(`${FG_BORDER}└${'─'.repeat(innerWidth)}┘${RESET}`);
+    return '\n' + parts.join('\n') + '\n';
+}
+// ===== 表格边框字符 =====
+const TABLE_CHARS = {
+    top: '─', 'top-mid': '┬', 'top-left': '┌', 'top-right': '┐',
+    bottom: '─', 'bottom-mid': '┴', 'bottom-left': '└', 'bottom-right': '┘',
+    left: '│', 'left-mid': '├',
+    mid: '─', 'mid-mid': '┼',
+    right: '│', 'right-mid': '┤',
+    middle: '│',
+};
+/**
+ * 根据终端宽度和实际列数，计算每列宽度
+ * cli-table3 的 colWidths 包含 padding（左右各1），所以每列最小宽度 = 内容宽度 + 2
+ */
+function calcColWidths(colCount) {
+    const termWidth = getTermWidth();
+    // 边框占用：左边框1 + 列间分隔符(colCount-1) + 右边框1 = colCount + 1
+    const borderOverhead = colCount + 1;
+    // 每列 padding 左右各1
+    const paddingOverhead = colCount * 2;
+    const available = Math.max(termWidth - borderOverhead - paddingOverhead, colCount * 6);
+    const baseWidth = Math.floor(available / colCount);
+    const remainder = available - baseWidth * colCount;
+    // 均分宽度，余数分给前几列；+2 是 cli-table3 的 padding
+    return Array.from({ length: colCount }, (_, i) => baseWidth + (i < remainder ? 1 : 0) + 2);
+}
+/**
+ * 递归提取 marked token 中的纯文本内容
+ */
+function extractTokenText(tokens) {
+    if (!tokens || !Array.isArray(tokens))
+        return '';
+    return tokens.map((t) => {
+        if (t.type === 'text' || t.type === 'codespan')
+            return t.text || t.raw || '';
+        if (t.type === 'strong' || t.type === 'em' || t.type === 'del')
+            return extractTokenText(t.tokens);
+        if (t.type === 'link')
+            return extractTokenText(t.tokens);
+        return t.raw || t.text || '';
+    }).join('');
+}
+/**
+ * 自定义表格渲染：动态列宽 + 自动换行
+ * 作为 marked extension 注入，完全接管表格 token 的渲染
+ */
+function renderTable(token) {
+    // 解析表头
+    const headerCells = token.header.map((cell) => extractTokenText(cell.tokens));
+    // 解析表体
+    const bodyRows = token.rows.map((row) => row.map((cell) => extractTokenText(cell.tokens)));
+    const colCount = headerCells.length;
+    if (colCount === 0)
+        return '';
+    const colWidths = calcColWidths(colCount);
+    const table = new Table({
+        head: headerCells,
+        chars: TABLE_CHARS,
+        colWidths,
+        wordWrap: true,
+        wrapOnWordBoundary: false,
+        style: {
+            'padding-left': 1,
+            'padding-right': 1,
+            head: ['cyan', 'bold'],
+        },
+    });
+    for (const row of bodyRows) {
+        table.push(row);
+    }
+    return '\n' + table.toString() + '\n\n';
+}
+// 创建 marked 实例
+const marked = new Marked(markedTerminal({
+    reflowText: false,
+    code: renderCodeBlock,
+    // 保留 tableOptions 作为 fallback，但主要靠 extension 接管
+    tableOptions: {
+        chars: TABLE_CHARS,
+    },
+}), 
+// 自定义 table renderer extension，优先级高于 markedTerminal 的 table 方法
+{
+    renderer: {
+        table: renderTable,
+    },
+});
+/**
+ * 补全流式文本中未闭合的 markdown 结构
+ */
+function patchIncompleteMarkdown(text) {
+    let patched = text;
+    const fenceMatches = patched.match(/^```/gm);
+    if (fenceMatches && fenceMatches.length % 2 !== 0) {
+        patched += '\n```';
+    }
+    const backtickCount = (patched.match(/(?<!\\)`/g) || []).length;
+    if (backtickCount % 2 !== 0) {
+        patched += '`';
+    }
+    return patched;
+}
+/** 将 markdown 文本渲染为终端 ANSI 字符串 */
+function renderMarkdown(text) {
+    try {
+        const patched = patchIncompleteMarkdown(text);
+        const rendered = marked.parse(patched);
+        return rendered.replace(/^\n+/, '').replace(/\n+$/, '');
+    }
+    catch {
+        return text;
+    }
+}
+/**
+ * Markdown 终端渲染组件
+ * 支持表格（动态列宽+自动换行）、代码块（深色背景+边框）、加粗、列表等
+ * 对流式不完整文本做容错补全
+ */
+function MarkdownText({ text, color }) {
+    const rendered = useMemo(() => renderMarkdown(text), [text]);
+    return (_jsx(Text, { wrap: "wrap", color: color, children: rendered }));
+}
+export default React.memo(MarkdownText);

package/dist/components/MessageItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Message } from '../types/index.js';
+declare function MessageItem({ msg, showDetails }: {
+    msg: Message;
+    showDetails?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof MessageItem>;
+export default _default;

package/dist/components/MessageItem.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import MarkdownText from './MarkdownText.js';
+// 状态圆点 icon，根据消息类型 + 状态决定颜色
+// reasoning 完成 → 白色 / tool_exec 成功 → 绿色 / error → 红色 / aborted → 黄色 / pending → 黄色
+function statusDot(status, type) {
+    if (status === 'pending')
+        return { dot: '●', color: 'yellow' };
+    if (status === 'aborted')
+        return { dot: '●', color: 'yellow' };
+    if (status === 'error')
+        return { dot: '●', color: 'red' };
+    // success 按消息类型区分
+    if (type === 'reasoning')
+        return { dot: '●', color: 'white' };
+    if (type === 'tool_exec')
+        return { dot: '●', color: 'green' };
+    return { dot: '●', color: 'green' };
+}
+/** 消息统计信息行：耗时 / token 数 / 首 token 延时 / 平均 token/s */
+function MessageStats({ msg, show }) {
+    if (msg.type === 'user' || msg.status === 'pending')
+        return null;
+    // aborted 提示始终显示，不受 showDetails 控制
+    const showAbortHint = msg.status === 'aborted' && msg.abortHint;
+    if (!show && !showAbortHint)
+        return null;
+    const parts = [];
+    if (show) {
+        if (msg.duration != null)
+            parts.push(`耗时 ${(msg.duration / 1000).toFixed(1)}s`);
+        if (msg.tokenCount != null)
+            parts.push(`${msg.tokenCount} tokens`);
+        if (msg.firstTokenLatency != null)
+            parts.push(`首token ${msg.firstTokenLatency}ms`);
+        if (msg.tokensPerSecond != null)
+            parts.push(`${msg.tokensPerSecond.toFixed(1)} tok/s`);
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [parts.length > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: parts.join(' · ') })), showAbortHint && (_jsxs(Text, { color: "red", children: ["\u23F9 ", msg.abortHint] }))] }));
+}
+function MessageItem({ msg, showDetails = false }) {
+    const { dot, color: dotColor } = statusDot(msg.status, msg.type);
+    if (msg.type === 'user') {
+        return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "gray", children: "\u276F " }), _jsx(Text, { bold: true, children: msg.content })] }));
+    }
+    if (msg.type === 'thinking' && msg.status === 'pending') {
+        // pending 阶段 thinking 内容存储在 content 字段（由 onThinking 回调实时更新）
+        const thinkContent = msg.content && msg.content !== '思考中...' ? msg.content : '';
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "gray", children: [" ", _jsx(Text, { color: dotColor, children: dot }), " Thinking..."] })] }), thinkContent ? (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: _jsx(Text, { color: "gray", dimColor: true, wrap: "wrap", children: thinkContent.length > 200 ? thinkContent.slice(0, 200) + '...' : thinkContent }) })) : null] }));
+    }
+    // thinking 完成后持久化渲染，Ctrl+O 展开/折叠
+    if (msg.type === 'thinking' && msg.status === 'success' && msg.think) {
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: ['○', " "] }), _jsx(Text, { color: "gray", children: "Thinking" }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", msg.think.length, " chars)"] }), !showDetails && _jsx(Text, { color: "gray", dimColor: true, children: "  [Ctrl+O \u5C55\u5F00]" })] }), showDetails && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: _jsx(Text, { color: "gray", dimColor: true, wrap: "wrap", children: msg.think }) }))] }));
+    }
+    if (msg.type === 'tool_exec') {
+        // Bash 工具直接显示命令内容
+        const isBash = msg.toolName === 'Bash';
+        const bashCmd = isBash && msg.toolArgs?.command ? String(msg.toolArgs.command) : '';
+        const toolLabel = isBash && bashCmd ? `Bash(${bashCmd})` : (msg.toolName || 'tool');
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: dotColor, children: [dot, " "] }), isBash && bashCmd ? (_jsxs(Text, { children: [_jsx(Text, { color: "white", bold: true, children: "Bash" }), _jsxs(Text, { color: "gray", children: ["(", bashCmd, ")"] })] })) : (_jsx(Text, { color: "magenta", bold: true, children: toolLabel }))] }), showDetails && msg.toolArgs && !isBash && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, wrap: "wrap", children: JSON.stringify(msg.toolArgs) }) })), showDetails && msg.toolResult && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", wrap: "wrap", children: msg.toolResult.length > 300 ? msg.toolResult.slice(0, 300) + '…' : msg.toolResult }) })), _jsx(MessageStats, { msg: msg, show: showDetails })] }));
+    }
+    if (msg.type === 'error') {
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: "red", children: [_jsx(Text, { color: dotColor, children: dot }), " ", msg.content] }), _jsx(MessageStats, { msg: msg, show: showDetails })] }));
+    }
+    if (msg.type === 'reasoning') {
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: dotColor, children: dot }), _jsx(Box, { marginLeft: 1, children: _jsx(MarkdownText, { text: msg.content }) })] }), _jsx(MessageStats, { msg: msg, show: showDetails })] }));
+    }
+    if (msg.status !== 'pending' && msg.content) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: dotColor, children: dot }), _jsx(Box, { marginLeft: 1, children: _jsx(MarkdownText, { text: msg.content, color: "gray" }) })] }), _jsx(MessageStats, { msg: msg, show: showDetails })] }));
+    }
+    return null;
+}
+export default React.memo(MessageItem, (prev, next) => {
+    // 仅当消息内容或显示详情变化时才重新渲染
+    return prev.msg === next.msg && prev.showDetails === next.showDetails;
+});

package/dist/components/MultilineInput.d.ts

@@ -0,0 +1,34 @@
+interface MultilineInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    onUpArrow?: () => void;
+    onDownArrow?: () => void;
+    placeholder?: string;
+    isActive?: boolean;
+    showCursor?: boolean;
+    /** 斜杠命令菜单：是否处于激活状态 */
+    slashMenuActive?: boolean;
+    /** 斜杠命令菜单：选中项上移 */
+    onSlashMenuUp?: () => void;
+    /** 斜杠命令菜单：选中项下移 */
+    onSlashMenuDown?: () => void;
+    /** 斜杠命令菜单：确认选中 */
+    onSlashMenuSelect?: () => void;
+    /** 斜杠命令菜单：关闭菜单 */
+    onSlashMenuClose?: () => void;
+    /** 输入为空时按 Tab 的回调（用于填入 placeholder） */
+    onTabFillPlaceholder?: () => void;
+}
+/**
+ * 多行文本输入组件，支持光标移动和粘贴折叠。
+ *
+ * - Enter: 提交（占位符会被展开为真实内容）
+ * - Alt/Option+Enter: 换行
+ * - ←→: 左右移动光标
+ * - ↑↓: 上下行移动光标（单行时触发 onUpArrow/onDownArrow）
+ * - Backspace: 删除光标前一个字符（占位符整体删除）
+ * - 粘贴多行内容: 折叠为 [Pasted text #N +X lines] 占位符
+ */
+export default function MultilineInput({ value, onChange, onSubmit, onUpArrow, onDownArrow, placeholder, isActive, showCursor, slashMenuActive, onSlashMenuUp, onSlashMenuDown, onSlashMenuSelect, onSlashMenuClose, onTabFillPlaceholder, }: MultilineInputProps): import("react/jsx-runtime").JSX.Element;
+export {};