mistagent 0.1.18 → 0.1.20

package/dist/src/components/App.d.ts

@@ -18,6 +18,8 @@ interface AppProps {
     loginError: string | null;
     isAuthenticated: boolean;
     initialTheme: ThemeMode;
+    terminalWidth: number;
+    terminalHeight: number;
 }
 export declare const App: React.FC<AppProps>;
 export {};

package/dist/src/components/App.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { useStdout } from 'ink';
 import { AppStateContext, AppActionsContext, } from '../contexts/AppContext.js';
 import { ChatStateContext, ChatDispatchContext, useChatReducer, } from '../contexts/ChatContext.js';
 import { UIStateContext, UIActionsContext, } from '../contexts/UIContext.js';
@@ -30,15 +31,32 @@ const AppInner = ({ onLogin, loginError, isAuthenticated, authEnabled }) => {
     }
     return _jsx(AppLayout, { onSubmit: handleSubmit, onCancel: cancelStream, onConfirmPlan: confirmPlan, onResolveToolApproval: resolveToolApproval });
 };
-export const App = ({ serverUrl, token, username, authEnabled, version, healthData, availableCommands, availableTools, initialModels, initialCurrentModel, initialSessions, onLogin, onLogout, loginError, isAuthenticated, initialTheme, }) => {
+export const App = ({ serverUrl, token, username, authEnabled, version, healthData, availableCommands, availableTools, initialModels, initialCurrentModel, initialSessions, onLogin, onLogout, loginError, isAuthenticated, initialTheme, terminalWidth: initialTerminalWidth, terminalHeight: initialTerminalHeight, }) => {
+    const { stdout } = useStdout();
     const [appToken, setAppToken] = useState(token);
     const [appUsername, setAppUsername] = useState(username);
     const [chatState, chatDispatch] = useChatReducer();
-    // Terminal size
-    const [terminalWidth] = useState(process.stdout.columns || 80);
-    const [terminalHeight] = useState(process.stdout.rows || 24);
     const [activeDialog, setActiveDialog] = useState('none');
     const [theme, setThemeState] = useState(initialTheme);
+    // Track terminal size — updated by both:
+    // 1. stdout 'resize' events (primary: fired by the OS → Node TTY → Ink's stdout)
+    // 2. A polling fallback every 200ms (catches any missed events)
+    const [terminalWidth, setTerminalWidth] = useState(() => stdout.columns || process.stdout.columns || initialTerminalWidth);
+    const [terminalHeight, setTerminalHeight] = useState(() => stdout.rows || process.stdout.rows || initialTerminalHeight);
+    useEffect(() => {
+        const readSize = () => {
+            setTerminalWidth(stdout.columns || process.stdout.columns || 80);
+            setTerminalHeight(stdout.rows || process.stdout.rows || 24);
+        };
+        stdout.on('resize', readSize);
+        process.stdout.on('resize', readSize);
+        const poll = setInterval(readSize, 200);
+        return () => {
+            stdout.off('resize', readSize);
+            process.stdout.off('resize', readSize);
+            clearInterval(poll);
+        };
+    }, [stdout]);
     const appState = {
         serverUrl,
         token: appToken,

package/dist/src/components/Composer.js

@@ -13,6 +13,7 @@ import { useInputHistory } from '../hooks/useInputHistory.js';
 import { useFileCompletion } from '../hooks/useFileCompletion.js';
 import { useSymbolCompletion } from '../hooks/useSymbolCompletion.js';
 import { useTextBuffer } from '../hooks/useTextBuffer.js';
+import { MarkdownRenderer } from './shared/MarkdownRenderer.js';
 import { useKeypress, KeypressPriority } from '../hooks/useKeypress.js';
 import { palette } from '../utils/colors.js';
 const EXIT_WARNING_DURATION_MS = 2000;
@@ -405,7 +406,7 @@ export const Composer = ({ onSubmit, onCancel, onConfirmPlan, onResolveToolAppro
                                     const full = activeToolCall.name + (activeToolCall.args ? `(${activeToolCall.args})` : '');
                                     const maxLen = Math.max(40, terminalWidth - 10);
                                     return full.length > maxLen ? full.slice(0, maxLen) + '...' : full;
-                                })() })] }))] })), hasPendingPlan && (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 0, children: [_jsxs(Box, { borderStyle: "round", borderColor: palette.warning, flexDirection: "column", paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: palette.warning, bold: true, children: "\uD83D\uDCCB Plan Review" }), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), pendingPlan.steps.map((step, i) => (_jsxs(Text, { color: palette.text, children: [_jsx(Text, { color: palette.accent, bold: true, children: `  ${i + 1}. ` }), step] }, i))), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), planEditMode ? (_jsxs(Text, { children: [_jsx(Text, { color: palette.warning, bold: true, children: "\u270F\uFE0F  Type feedback, " }), _jsx(Text, { color: palette.success, bold: true, children: "Enter" }), _jsx(Text, { color: palette.textDim, children: " to revise  " }), _jsx(Text, { color: palette.error, bold: true, children: "Esc" }), _jsx(Text, { color: palette.textDim, children: " to cancel" })] })) : (_jsxs(Text, { children: [_jsx(Text, { color: palette.success, bold: true, children: "Enter" }), _jsx(Text, { color: palette.textDim, children: " approve  " }), _jsx(Text, { color: palette.warning, bold: true, children: "Tab" }), _jsx(Text, { color: palette.textDim, children: " edit  " }), _jsx(Text, { color: palette.error, bold: true, children: "Esc" }), _jsx(Text, { color: palette.textDim, children: " reject" })] }))] }), planEditMode && (_jsx(InputPrompt, { buffer: buffer, isActive: true, borderColor: palette.warning, width: terminalWidth - 2 }))] })), hasPendingToolApproval && pendingToolApproval && (_jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: palette.warning, flexDirection: "column", paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: palette.warning, bold: true, children: "\uD83D\uDD12 \u64CD\u4F5C\u786E\u8BA4" }), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: palette.text, children: [_jsx(Text, { color: palette.accent, bold: true, children: "\u5DE5\u5177: " }), pendingToolApproval.request.tool_name] }), Object.entries(pendingToolApproval.request.args).map(([k, v]) => {
+                                })() })] }))] })), hasPendingPlan && (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 0, children: [_jsxs(Box, { borderStyle: "round", borderColor: palette.warning, flexDirection: "column", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: palette.warning, bold: true, children: ["\uD83D\uDCCB Plan Review (", pendingPlan.steps.length, " steps)"] }), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), pendingPlan.content ? (_jsx(MarkdownRenderer, { text: pendingPlan.content })) : (pendingPlan.steps.map((step, i) => (_jsxs(Text, { color: palette.text, children: [_jsx(Text, { color: palette.accent, bold: true, children: `  ${i + 1}. ` }), step] }, i)))), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), planEditMode ? (_jsxs(Text, { children: [_jsx(Text, { color: palette.warning, bold: true, children: "\u270F\uFE0F  Type feedback, " }), _jsx(Text, { color: palette.success, bold: true, children: "Enter" }), _jsx(Text, { color: palette.textDim, children: " to revise  " }), _jsx(Text, { color: palette.error, bold: true, children: "Esc" }), _jsx(Text, { color: palette.textDim, children: " to cancel" })] })) : (_jsxs(Text, { children: [_jsx(Text, { color: palette.success, bold: true, children: "Enter" }), _jsx(Text, { color: palette.textDim, children: " approve  " }), _jsx(Text, { color: palette.warning, bold: true, children: "Tab" }), _jsx(Text, { color: palette.textDim, children: " edit  " }), _jsx(Text, { color: palette.error, bold: true, children: "Esc" }), _jsx(Text, { color: palette.textDim, children: " reject" })] }))] }), planEditMode && (_jsx(InputPrompt, { buffer: buffer, isActive: true, borderColor: palette.warning, width: terminalWidth - 2 }))] })), hasPendingToolApproval && pendingToolApproval && (_jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: palette.warning, flexDirection: "column", paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: palette.warning, bold: true, children: "\uD83D\uDD12 \u64CD\u4F5C\u786E\u8BA4" }), _jsx(Text, { color: palette.textDim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: palette.text, children: [_jsx(Text, { color: palette.accent, bold: true, children: "\u5DE5\u5177: " }), pendingToolApproval.request.tool_name] }), Object.entries(pendingToolApproval.request.args).map(([k, v]) => {
                             const str = String(v);
                             const truncated = !toolDetailExpanded && str.length > 80;
                             return (_jsxs(Text, { color: palette.text, wrap: toolDetailExpanded ? 'wrap' : 'truncate', children: [_jsxs(Text, { color: palette.textDim, children: ["  ", k, ": "] }), truncated ? str.slice(0, 80) + '...' : str] }, k));

package/dist/src/components/Header.js

@@ -8,12 +8,7 @@ import { useSessionState } from '../contexts/SessionContext.js';
 import { useChatState } from '../contexts/ChatContext.js';
 import { useAppState } from '../contexts/AppContext.js';
 import { MASCOT_LINES, VERSION, TIPS, getMascotGradient } from '../utils/constants.js';
-// ── Catppuccin tokens (matching pencil variables) ──
 const C = {
-    bg: '#1E1E2E',
-    bgDark: '#181825',
-    bgDeep: '#11111B',
-    surface1: '#313244',
     border: '#585B70',
     dimtext: '#6C7086',
     subtext: '#A6ADC8',
@@ -24,185 +19,98 @@ const C = {
     teal: '#94E2D5',
     green: '#A6E3A1',
     red: '#F38BA8',
-    peach: '#FAB387',
-    rose: '#E05A4E',
     yellow: '#F9E2AF',
 };
-// ── Shortcuts (matching pencil: full key names) ──
-const SHORTCUTS = [
-    { key: '/', desc: '命令' },
-    { key: '@', desc: '文件' },
-    { key: '@@', desc: '符号' },
-    { key: 'Shift+Tab', desc: '模式' },
-    { key: 'Shift+Enter', desc: '多行' },
-];
-// ── Helper functions ──
-const pad = (s, width) => {
-    const len = stringWidth(s);
-    if (len >= width)
-        return s;
-    return s + ' '.repeat(width - len);
-};
-const centerPad = (s, width) => {
-    const len = stringWidth(s);
-    if (len >= width)
-        return s;
-    const left = Math.floor((width - len) / 2);
-    const right = width - len - left;
-    return ' '.repeat(left) + s + ' '.repeat(right);
-};
-const truncate = (s, maxLen) => {
-    if (maxLen <= 0)
+// Three-tier breakpoints
+// col1(mascot)=35 + div=1 + col2(stats)=26 + div=1 + col3(min~10) + border+pad~6 = ~79 minimum
+// Use 90 as safe threshold so the 3-column layout never gets squeezed
+const CONDENSED_MAX = 40; // <40  → single line
+const COMPACT_MAX = 90; // <90  → stacked compact
+// ≥90  → full 3-column
+function truncate(s, max) {
+    if (max <= 0)
         return '';
-    if (stringWidth(s) <= maxLen)
+    if (stringWidth(s) <= max)
         return s;
-    let result = '';
+    let out = '';
     for (const ch of s) {
-        if (stringWidth(result + ch) > maxLen - 1)
+        if (stringWidth(out + ch) > max - 1)
             break;
-        result += ch;
+        out += ch;
     }
-    return result + '…';
+    return out + '…';
+}
+// ─────────────────────────────────────────────
+// Tier 1 — Condensed  (<40 cols)
+// Single row: ❯ MIST v0.x  model  ●
+// ─────────────────────────────────────────────
+const CondensedHeader = ({ modelName, isConnected, version }) => (_jsxs(Box, { flexDirection: "row", gap: 1, marginTop: 1, children: [_jsx(Text, { color: C.blue, bold: true, children: '❯' }), _jsx(Text, { color: C.text, bold: true, children: 'MIST' }), _jsx(Text, { color: C.dimtext, children: `v${version}` }), _jsx(Text, { color: C.sapphire, children: modelName }), _jsx(Text, { color: isConnected ? C.green : C.red, children: '●' })] }));
+// ─────────────────────────────────────────────
+// Tier 2 — Compact  (40–69 cols)
+// Stacked: brand + model + status + shortcuts
+// ─────────────────────────────────────────────
+const CompactHeader = ({ modelName, isConnected, modeLabel, theme, version }) => {
+    const themeIcon = theme === 'dark' ? '◐' : '◑';
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: C.border, paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { color: C.blue, bold: true, children: `❯ MIST v${version}` }), _jsx(Text, { color: isConnected ? C.green : C.red, children: isConnected ? '● ON' : '○ OFF' })] }), _jsx(Text, { color: C.sapphire, children: `model: ${modelName}` }), _jsx(Text, { color: C.dimtext, children: `mode: ${modeLabel}   ${themeIcon} ${theme}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: C.dimtext, children: '[/] cmd  [@] file  [Shift+Tab] mode' }) })] }));
+};
+// ─────────────────────────────────────────────
+// Tier 3 — Horizontal  (≥70 cols)
+// Full 3-column with Ink flexbox (no manual widths)
+// ─────────────────────────────────────────────
+const MascotLogo = () => {
+    const gradient = getMascotGradient();
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [MASCOT_LINES.map((line, i) => (_jsx(Text, { color: gradient[i] ?? gradient[gradient.length - 1], bold: true, children: line }, i))), _jsx(Text, { color: C.dimtext, children: 'A    G    E    N    T' })] }));
 };
-// ── Border chars (dashed style) ──
-const B = {
-    topLeft: '╭',
-    topRight: '╮',
-    bottomLeft: '╰',
-    bottomRight: '╯',
-    h: '╌', // dashed horizontal
-    v: '┊', // dashed vertical
+const StatsPanel = ({ modelName, sessionCount, modeLabel, theme }) => {
+    const themeIcon = theme === 'dark' ? '◐' : '◑';
+    const rows = [
+        { label: 'model', value: truncate(modelName, 18), color: C.sapphire },
+        { label: 'sessions', value: String(sessionCount), color: C.teal },
+        { label: 'mode', value: modeLabel, color: modeLabel === 'plan' ? C.mauve : C.green },
+        { label: 'theme', value: `${themeIcon} ${theme}`, color: C.mauve },
+    ];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: C.subtext, children: '// stats' }), rows.map(r => (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: C.dimtext, children: r.label }) }), _jsx(Text, { color: r.color, bold: true, children: r.value })] }, r.label)))] }));
+};
+const ActivityPanel = ({ tip, sessions }) => {
+    const dotColors = [C.green, C.blue, C.mauve];
+    const recent = sessions.slice(0, 3);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: C.subtext, children: '// tip' }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: C.green, bold: true, children: '$ ' }), _jsx(Text, { color: C.text, children: tip })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: C.subtext, children: `// recent (${sessions.length})` }) }), recent.length === 0 ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: C.dimtext, children: 'No recent activity' }) })) : (recent.map((s, i) => {
+                const d = new Date(s.last_activity);
+                const t = d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+                return (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: C.dimtext, children: `${t} ` }), _jsx(Text, { color: dotColors[i % dotColors.length], children: '● ' }), _jsx(Text, { color: C.subtext, children: truncate(s.title || 'New Chat', 25) })] }, i));
+            }))] }));
 };
-// ── Dashed divider (orange, matching outer border) ──
-const DashedDivider = ({ width }) => (_jsx(Text, { color: C.yellow, children: B.h.repeat(width) }));
-// ── Empty row (full inner width, bordered) ──
-const EmptyRow = ({ width }) => (_jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), _jsx(Text, { children: ' '.repeat(width) }), _jsx(Text, { color: C.yellow, children: B.v })] }));
+const SHORTCUTS = [
+    { key: '/', desc: '命令' },
+    { key: '@', desc: '文件' },
+    { key: '@@', desc: '符号' },
+    { key: 'Shift+Tab', desc: '模式' },
+    { key: 'Shift+↵', desc: '多行' },
+];
+const HorizontalHeader = ({ modelName, isConnected, sessionCount, modeLabel, theme, tip, sessions, version }) => {
+    const netColor = isConnected ? C.green : C.red;
+    const netBadge = isConnected ? '● CONNECTED' : '○ OFFLINE';
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: C.border, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: C.blue, bold: true, children: '❯ ' }), _jsx(Text, { color: C.text, bold: true, children: 'MIST AGENT ' }), _jsx(Text, { color: C.mauve, bold: true, children: `[v${version}]` })] }), _jsx(Text, { color: netColor, children: `[ ${netBadge} ]` })] }), _jsx(Box, { borderStyle: "classic", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: C.border }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexShrink: 0, paddingX: 2, paddingY: 1, children: _jsx(MascotLogo, {}) }), _jsx(Box, { borderStyle: "classic", borderLeft: true, borderTop: false, borderBottom: false, borderRight: false, borderColor: C.border }), _jsx(Box, { flexShrink: 0, width: 26, paddingX: 1, paddingY: 1, children: _jsx(StatsPanel, { modelName: modelName, sessionCount: sessionCount, modeLabel: modeLabel, theme: theme }) }), _jsx(Box, { borderStyle: "classic", borderLeft: true, borderTop: false, borderBottom: false, borderRight: false, borderColor: C.border }), _jsx(Box, { flexGrow: 1, flexShrink: 1, paddingX: 1, paddingY: 1, overflow: "hidden", children: _jsx(ActivityPanel, { tip: tip, sessions: sessions }) })] }), _jsx(Box, { borderStyle: "classic", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: C.border }), _jsx(Box, { flexDirection: "row", justifyContent: "center", gap: 3, paddingX: 1, paddingY: 1, children: SHORTCUTS.map(s => (_jsxs(Text, { color: C.dimtext, children: [_jsx(Text, { color: C.subtext, children: `[${s.key}]` }), ` ${s.desc}`] }, s.key))) })] }));
+};
+// ─────────────────────────────────────────────
+// Root export — picks tier based on terminalWidth
+// ─────────────────────────────────────────────
 export const Header = () => {
     const { currentModel } = useModelState();
     const { terminalWidth, theme } = useUIState();
     const { sessions } = useSessionState();
     const { forceMode } = useChatState();
     const { healthData } = useAppState();
-    const modelName = currentModel?.model ?? 'MistAgent 0.1';
+    const modelName = currentModel?.model ?? 'MistAgent';
     const isConnected = !!healthData;
-    const innerWidth = terminalWidth - 2;
-    // ── Column widths ──
-    const mascotWidth = Math.max(...MASCOT_LINES.map(l => stringWidth(l)));
-    const logoColWidth = mascotWidth + 8;
-    const statsColWidth = 28;
-    const infoColWidth = Math.max(10, innerWidth - logoColWidth - statsColWidth - 2);
-    // ── Random tip (stable per mount) ──
-    const [tipText] = React.useState(() => TIPS[Math.floor(Math.random() * TIPS.length)]);
-    const mascotGradient = getMascotGradient();
-    // ── Stats data ──
     const modeLabel = forceMode === 'plan' ? 'plan' : 'chat';
-    const themeIcon = theme === 'dark' ? '◐' : '◑';
-    const statsData = [
-        { label: 'model', value: modelName, valueColor: C.sapphire },
-        { label: 'sessions', value: String(sessions.length), valueColor: C.teal },
-        { label: 'mode', value: modeLabel, valueColor: forceMode === 'plan' ? C.mauve : C.green },
-        { label: 'theme', value: `${themeIcon} ${theme}`, valueColor: C.mauve },
-    ];
-    // ── Recent sessions ──
-    const recentSessions = sessions.slice(0, 3);
-    const dotColors = [C.green, C.blue, C.mauve];
-    const emptyLogo = () => _jsx(Text, { children: ' '.repeat(logoColWidth) });
-    const emptyStats = () => _jsx(Text, { children: ' '.repeat(statsColWidth) });
-    const emptyInfo = () => _jsx(Text, { children: ' '.repeat(infoColWidth) });
-    // Col 1: Logo — top padding(2) + mascot(6) + gap + subtitle + bottom padding(2)
-    const logoRows = [
-        emptyLogo, // top padding 1
-        emptyLogo, // top padding 2
-        ...MASCOT_LINES.map((line, i) => () => {
-            const color = mascotGradient[i] ?? mascotGradient[mascotGradient.length - 1];
-            return _jsx(Text, { color: color, bold: true, children: centerPad(line, logoColWidth) });
-        }),
-        emptyLogo, // gap before subtitle
-        () => _jsx(Text, { color: C.dimtext, children: centerPad('A    G    E    N    T', logoColWidth) }),
-        emptyLogo, // bottom padding 1
-        emptyLogo, // bottom padding 2
-    ];
-    // Col 2: Stats — top padding(2) + header + gap + 4 rows (with gaps) + bottom padding
-    const statsRows = [
-        emptyStats, // top padding 1
-        emptyStats, // top padding 2
-        () => _jsx(Text, { color: C.subtext, children: pad(' // quick stats', statsColWidth) }),
-        emptyStats, // gap after header
-        ...statsData.flatMap((s, i) => {
-            const row = () => {
-                const lbl = ` ${s.label}`;
-                const val = `${s.value} `;
-                const gap = Math.max(1, statsColWidth - stringWidth(lbl) - stringWidth(val));
-                return (_jsxs(Text, { children: [_jsx(Text, { color: C.dimtext, children: lbl }), _jsx(Text, { children: ' '.repeat(gap) }), _jsx(Text, { color: s.valueColor, bold: true, children: val })] }));
-            };
-            // Add empty row between stat rows (not after the last one)
-            return i < statsData.length - 1 ? [row, emptyStats] : [row];
-        }),
-        emptyStats, // bottom padding 1
-        emptyStats, // bottom padding 2
-    ];
-    // Col 3: Info — top padding(2) + tip section + gap + recent section + bottom padding
-    const infoRows = [
-        emptyInfo, // top padding
-        () => _jsx(Text, { color: C.subtext, children: pad('  // daily tip', infoColWidth) }),
-        emptyInfo, // gap after tip label
-        () => {
-            const tipPrefix = '  $ ';
-            const tipContent = truncate(tipText, infoColWidth - stringWidth(tipPrefix));
-            return (_jsxs(Text, { children: [_jsx(Text, { color: C.green, bold: true, children: tipPrefix }), _jsx(Text, { color: C.text, children: pad(tipContent, infoColWidth - stringWidth(tipPrefix)) })] }));
-        },
-        emptyInfo, // gap between sections
-        emptyInfo,
-        () => _jsx(Text, { color: C.subtext, children: pad('  // recent activity (' + sessions.length + ')', infoColWidth) }),
-        emptyInfo, // gap after recent label
-    ];
-    if (recentSessions.length > 0) {
-        for (const [idx, s] of recentSessions.entries()) {
-            const dotColor = dotColors[idx % dotColors.length];
-            infoRows.push(() => {
-                const date = new Date(s.last_activity);
-                const timeStr = date.toLocaleString('zh-CN', {
-                    month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
-                });
-                const title = s.title || 'New Chat';
-                const timePrefix = `  ${timeStr} `;
-                const dotStr = '● ';
-                const usedWidth = stringWidth(timePrefix) + stringWidth(dotStr);
-                const titleWidth = Math.max(0, infoColWidth - usedWidth);
-                const displayTitle = pad(truncate(title, titleWidth), titleWidth);
-                return (_jsxs(Text, { children: [_jsx(Text, { color: C.dimtext, children: timePrefix }), _jsx(Text, { color: dotColor, children: dotStr }), _jsx(Text, { color: C.subtext, children: displayTitle })] }));
-            });
-            // Add empty row between recent items (not after the last one)
-            if (idx < recentSessions.length - 1) {
-                infoRows.push(emptyInfo);
-            }
-        }
+    const [tip] = React.useState(() => TIPS[Math.floor(Math.random() * TIPS.length)]);
+    if (terminalWidth < CONDENSED_MAX) {
+        return _jsx(CondensedHeader, { modelName: modelName, isConnected: isConnected, version: VERSION });
     }
-    else {
-        infoRows.push(() => _jsx(Text, { color: C.dimtext, children: pad(' No recent activity', infoColWidth) }));
+    if (terminalWidth < COMPACT_MAX) {
+        return (_jsx(CompactHeader, { modelName: modelName, isConnected: isConnected, modeLabel: modeLabel, theme: theme, version: VERSION }));
     }
-    // Equalize row count
-    const maxRows = Math.max(logoRows.length, statsRows.length, infoRows.length);
-    while (logoRows.length < maxRows)
-        logoRows.push(emptyLogo);
-    while (statsRows.length < maxRows)
-        statsRows.push(emptyStats);
-    while (infoRows.length < maxRows)
-        infoRows.push(emptyInfo);
-    // ── Top bar layout ──
-    const netColor = isConnected ? C.green : C.red;
-    return (_jsxs(Box, { flexDirection: "column", width: terminalWidth, marginTop: 1, children: [_jsx(Text, { children: _jsxs(Text, { color: C.yellow, children: [B.topLeft, B.h.repeat(innerWidth), B.topRight] }) }), _jsx(EmptyRow, { width: innerWidth }), (() => {
-                const leftPad = '  ';
-                const prompt = '❯';
-                const brand = ' M I S T  A G E N T ';
-                const verBadge = `[ v${VERSION} ]`;
-                const netBadge = isConnected ? '[ ● CONNECTED ]' : '[ ○ OFFLINE ]';
-                const leftStr = `${leftPad}${prompt}${brand}${verBadge}`;
-                const rightStr = `${netBadge}  `;
-                const gap = Math.max(1, innerWidth - stringWidth(leftStr) - stringWidth(rightStr));
-                return (_jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), _jsx(Text, { children: leftPad }), _jsx(Text, { color: C.blue, bold: true, children: prompt }), _jsx(Text, { color: C.text, bold: true, children: brand }), _jsx(Text, { color: C.mauve, bold: true, children: verBadge }), _jsx(Text, { children: ' '.repeat(gap) }), _jsx(Text, { color: netColor, children: netBadge }), _jsx(Text, { children: '  ' }), _jsx(Text, { color: C.yellow, children: B.v })] }));
-            })(), _jsx(EmptyRow, { width: innerWidth }), _jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), _jsx(DashedDivider, { width: innerWidth }), _jsx(Text, { color: C.yellow, children: B.v })] }), Array.from({ length: maxRows }).map((_, i) => {
-                return (_jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), logoRows[i](), _jsx(Text, { color: C.yellow, children: "\u2502" }), statsRows[i](), _jsx(Text, { color: C.yellow, children: "\u2502" }), infoRows[i](), _jsx(Text, { color: C.yellow, children: B.v })] }, i));
-            }), _jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), _jsx(DashedDivider, { width: innerWidth }), _jsx(Text, { color: C.yellow, children: B.v })] }), _jsx(EmptyRow, { width: innerWidth }), _jsxs(Text, { children: [_jsx(Text, { color: C.yellow, children: B.v }), _jsx(Text, { children: centerPad(SHORTCUTS.map(s => `[${s.key}] ${s.desc}`).join('   '), innerWidth) }), _jsx(Text, { color: C.yellow, children: B.v })] }), _jsx(EmptyRow, { width: innerWidth }), _jsx(Text, { children: _jsxs(Text, { color: C.yellow, children: [B.bottomLeft, B.h.repeat(innerWidth), B.bottomRight] }) })] }));
+    return (_jsx(HorizontalHeader, { modelName: modelName, isConnected: isConnected, sessionCount: sessions.length, modeLabel: modeLabel, theme: theme, tip: tip, sessions: sessions, version: VERSION }));
 };
 //# sourceMappingURL=Header.js.map

package/dist/src/components/MainContent.js

@@ -1,22 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Static, Box } from 'ink';
+import { Box } from 'ink';
 import { useChatState, StreamingState } from '../contexts/ChatContext.js';
 import { HistoryItemDisplay } from './HistoryItemDisplay.js';
 import { AssistantMessage } from './messages/AssistantMessage.js';
 import { Header } from './Header.js';
-// Stable sentinel object — always the first item so <Static> renders
-// the Header once, and subsequent history items are appended after it.
-const HEADER_SENTINEL = { __header: true, id: '__header__' };
 export const MainContent = () => {
-    const { history, pendingContent, streamingState, sessionVersion } = useChatState();
-    // Always keep the sentinel at index 0 so Static.length grows correctly.
-    const staticItems = useMemo(() => [HEADER_SENTINEL, ...history], [history]);
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Static, { items: staticItems, children: (item) => {
-                    if ('__header' in item) {
-                        return (_jsx(Box, { children: _jsx(Header, {}) }, "__header__"));
-                    }
-                    return (_jsx(Box, { paddingX: 1, children: _jsx(HistoryItemDisplay, { item: item }) }, item.id));
-                } }, sessionVersion), streamingState !== StreamingState.Idle && (_jsx(Box, { paddingX: 1, children: _jsx(AssistantMessage, { text: pendingContent, isPending: true }) }))] }));
+    const { history, pendingContent, streamingState } = useChatState();
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, {}), history.map((item) => (_jsx(Box, { paddingX: 1, children: _jsx(HistoryItemDisplay, { item: item }) }, item.id))), streamingState !== StreamingState.Idle && (_jsx(Box, { paddingX: 1, children: _jsx(AssistantMessage, { text: pendingContent, isPending: true }) }))] }));
 };
 //# sourceMappingURL=MainContent.js.map

package/dist/src/components/shared/MarkdownRenderer.js

@@ -1,31 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
 import { Text } from 'ink';
-import { Marked } from 'marked';
-import { markedTerminal } from 'marked-terminal';
-import { supportsLanguage } from 'cli-highlight';
-const marked = new Marked(markedTerminal({
-    reflowText: true,
-    width: 80,
-    showSectionPrefix: false,
-    tab: 2,
-}));
-// Replace ```<unsupported-lang> with ``` to avoid console.warn from highlight.js
-function silentParse(src) {
-    // Strip internal heading markers (e.g. {mist_session_heading:...})
-    let cleaned = src.replace(/\{mist_session_heading:[^}]*\}\s*/g, '');
-    cleaned = cleaned.replace(/^```(\w+)/gm, (_match, lang) => supportsLanguage(lang) ? '```' + lang : '```');
-    return marked.parse(cleaned);
-}
-export const MarkdownRenderer = ({ text, }) => {
-    if (!text)
+import { applyMarkdown } from '../../utils/markdown.js';
+export const MarkdownRenderer = React.memo(({ text, }) => {
+    const rendered = useMemo(() => {
+        if (!text)
+            return null;
+        try {
+            return applyMarkdown(text);
+        }
+        catch {
+            return text;
+        }
+    }, [text]);
+    if (!rendered)
         return null;
-    let rendered;
-    try {
-        rendered = silentParse(text).trimEnd();
-    }
-    catch {
-        rendered = text;
-    }
     return _jsx(Text, { children: rendered });
-};
+});
 //# sourceMappingURL=MarkdownRenderer.js.map

package/dist/src/components/shared/TextInput.js

@@ -1,9 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { useRef } from 'react';
+import { Box, Text, useCursor } from 'ink';
 import chalk from 'chalk';
+import stringWidth from 'string-width';
 import { cpSlice, cpLen } from '../../utils/textUtils.js';
 import { PASTE_PLACEHOLDER_REGEX } from '../../utils/pasteUtils.js';
 import { palette } from '../../utils/colors.js';
+/**
+ * Walk up the Yoga layout tree to compute absolute (x, y) of a DOM node.
+ * Same algorithm as Ink's internal `getAbsolutePosition` (layout.ts).
+ */
+function getAbsolutePosition(node) {
+    let x = 0;
+    let y = 0;
+    let cur = node;
+    while (cur?.parentNode) {
+        if (!cur.yogaNode)
+            return null;
+        x += cur.yogaNode.getComputedLeft();
+        y += cur.yogaNode.getComputedTop();
+        cur = cur.parentNode;
+    }
+    return { x, y };
+}
 /**
  * Split a line into segments, marking paste placeholders for accent rendering.
  * Returns array of { text, isPaste } segments.
@@ -93,10 +112,50 @@ export const TextInput = ({ buffer, placeholder = 'Ask anything...', isActive, }
     const { viewportVisualLines, visualCursor } = buffer;
     const [cursorRow, cursorCol] = visualCursor;
     const showPlaceholder = buffer.text.length === 0;
+    // ── Terminal cursor positioning for IME ──
+    // Park the real terminal cursor at the text caret so CJK IME candidate
+    // windows appear inline instead of at the end of the line.
+    const { setCursorPosition } = useCursor();
+    const boxRef = useRef(null);
+    if (!isActive) {
+        setCursorPosition(undefined);
+    }
+    else {
+        const node = boxRef.current;
+        if (node) {
+            const abs = getAbsolutePosition(node);
+            if (abs) {
+                const indent = cursorRow === 0 ? 0 : 2;
+                const lineText = viewportVisualLines[cursorRow] ?? '';
+                const textBeforeCursor = cpSlice(lineText, 0, cursorCol);
+                const displayCol = stringWidth(textBeforeCursor);
+                // Ink's buildCursorSuffix computes: moveUp = visibleLineCount - y.
+                // When output fits in terminal, the output string ends with '\n'
+                // and visibleLineCount = lines.length - 1 (= Yoga rootH). The
+                // cursor sits one line below the last visible line, so Yoga's
+                // absolute Y maps directly.
+                //
+                // When output overflows (rootH > termRows), Ink's incremental
+                // renderer omits the trailing '\n', so visibleLineCount = lines.length
+                // (= rootH + 1 effectively in the moveUp math). The cursor sits at
+                // the END of the last line, not a line below it. This shifts the
+                // moveUp origin by one row, requiring y + 1 to compensate.
+                let rootNode = node;
+                while (rootNode?.parentNode)
+                    rootNode = rootNode.parentNode;
+                const rootH = rootNode?.yogaNode?.getComputedHeight() ?? 0;
+                const overflows = rootH > (process.stdout.rows ?? 24);
+                setCursorPosition({
+                    x: abs.x + indent + displayCol,
+                    y: abs.y + cursorRow + (overflows ? 1 : 0),
+                });
+            }
+        }
+    }
     if (showPlaceholder) {
-        return (_jsx(Box, { children: isActive ? (_jsxs(Text, { children: [chalk.inverse(placeholder[0] || ' '), _jsx(Text, { color: palette.textDim, children: placeholder.slice(1) })] })) : (_jsx(Text, { color: palette.textDim, children: placeholder })) }));
+        return (_jsx(Box, { ref: boxRef, children: isActive ? (_jsxs(Text, { children: [chalk.inverse(placeholder[0] || ' '), _jsx(Text, { color: palette.textDim, children: placeholder.slice(1) })] })) : (_jsx(Text, { color: palette.textDim, children: placeholder })) }));
     }
-    return (_jsx(Box, { flexDirection: "column", children: viewportVisualLines.map((lineText, idx) => {
+    return (_jsx(Box, { ref: boxRef, flexDirection: "column", children: viewportVisualLines.map((lineText, idx) => {
             const isCursorLine = isActive && idx === cursorRow;
             // First line has no indent (follows ❯ prompt), subsequent lines indent 2 spaces
             const indent = idx === 0 ? '' : '  ';

package/dist/src/contexts/ChatContext.d.ts

@@ -13,6 +13,7 @@ export interface ActiveToolCall {
 export type ForceMode = 'chat' | 'plan';
 export interface PendingPlan {
     steps: string[];
+    content: string;
 }
 export interface PendingToolApproval {
     request: TunnelRequest;
@@ -81,6 +82,7 @@ export type ChatAction = {
 } | {
     type: 'PLAN_CONFIRM';
     steps: string[];
+    content: string;
 } | {
     type: 'PLAN_CLEAR';
 } | {

package/dist/src/contexts/ChatContext.js

@@ -179,7 +179,7 @@ function chatReducer(state, action) {
                 history: planHistory,
                 pendingContent: '',
                 activeToolCall: null,
-                pendingPlan: { steps: action.steps },
+                pendingPlan: { steps: action.steps, content: action.content },
                 tokenCount: state.tokenCount + Math.ceil(flushedContent.length / 4),
             };
         }