mistagent 0.1.19 → 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/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,28 +1,13 @@
 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);
-}
+import { applyMarkdown } from '../../utils/markdown.js';
 export const MarkdownRenderer = React.memo(({ text, }) => {
     const rendered = useMemo(() => {
         if (!text)
             return null;
         try {
-            return silentParse(text).trimEnd();
+            return applyMarkdown(text);
         }
         catch {
             return text;

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/main.js

@@ -9,7 +9,7 @@ import { toolsApi } from './api/tools.js';
 import { skillsApi } from './api/skills.js';
 import { scanLocalSkills } from './utils/skillScanner.js';
 import { sessionsApi } from './api/sessions.js';
-import { getServerUrl, loadToken, saveToken, clearToken, loadTheme, loadModel } from './utils/config.js';
+import { getServerUrl, loadToken, saveToken, clearToken, loadTheme, loadModel, saveRefreshToken, loadRefreshToken } from './utils/config.js';
 import chalk from 'chalk';
 import { setTheme, palette } from './utils/colors.js';
 import { VERSION } from './utils/constants.js';
@@ -64,7 +64,6 @@ export async function main() {
             const muted = chalk.hex(palette.textMuted);
             const accent = chalk.hex(palette.accent);
             const rawMsg = err instanceof Error ? err.message : String(err);
-            // Detect specific failure reasons
             let reason;
             let hint;
             if (rawMsg.includes('ECONNREFUSED') || rawMsg.includes('fetch failed')) {
@@ -101,6 +100,41 @@ export async function main() {
     catch {
         authStatus = { auth_enabled: false };
     }
+    // Token refresh (Supabase tokens expire in ~1 hour)
+    let refreshTimer = null;
+    const startTokenRefresh = () => {
+        if (refreshTimer)
+            return;
+        const supabaseUrl = authStatus.supabase_url;
+        const supabaseKey = authStatus.supabase_anon_key;
+        if (!supabaseUrl || !supabaseKey)
+            return;
+        refreshTimer = setInterval(async () => {
+            const rt = loadRefreshToken();
+            if (!rt)
+                return;
+            try {
+                const res = await fetch(`${supabaseUrl}/auth/v1/token?grant_type=refresh_token`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'apikey': supabaseKey,
+                    },
+                    body: JSON.stringify({ refresh_token: rt }),
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    client.setToken(data.access_token);
+                    saveToken(data.access_token);
+                    saveRefreshToken(data.refresh_token);
+                    token = data.access_token;
+                }
+            }
+            catch {
+                // Silent — will retry next interval
+            }
+        }, 50 * 60 * 1000); // 50 minutes
+    };
     // Try to restore token
     let token = null;
     let username = null;
@@ -114,6 +148,7 @@ export async function main() {
                 token = savedToken;
                 username = me.username;
                 isAuthenticated = true;
+                startTokenRefresh();
             }
             catch {
                 client.setToken(null);
@@ -167,16 +202,27 @@ export async function main() {
     ];
     // Login handler
     let loginError = null;
-    const renderApp = (overrides = {}) => (_jsx(App, { serverUrl: serverUrl, token: overrides.token ?? token, username: overrides.username ?? username, authEnabled: authStatus.auth_enabled, version: healthData?.version ?? VERSION, healthData: healthData, availableCommands: commands, availableTools: tools, initialModels: models, initialCurrentModel: currentModel, initialSessions: initialSessions, initialTheme: initialTheme, onLogin: handleLogin, onLogout: handleLogout, loginError: overrides.loginError ?? loginError, isAuthenticated: overrides.isAuthenticated ?? isAuthenticated }));
+    // Terminal size — tracked outside React so rerender() can inject fresh values
+    // This mirrors the claude-code pattern: Ink's renderer owns resize detection,
+    // and we piggyback by re-calling render()/rerender() with updated props.
+    const getTerminalSize = () => ({
+        terminalWidth: process.stdout.columns || 80,
+        terminalHeight: process.stdout.rows || 24,
+    });
+    const renderApp = (overrides = {}) => (_jsx(App, { serverUrl: serverUrl, token: overrides.token ?? token, username: overrides.username ?? username, authEnabled: authStatus.auth_enabled, version: healthData?.version ?? VERSION, healthData: healthData, availableCommands: commands, availableTools: tools, initialModels: models, initialCurrentModel: currentModel, initialSessions: initialSessions, initialTheme: initialTheme, onLogin: handleLogin, onLogout: handleLogout, loginError: overrides.loginError ?? loginError, isAuthenticated: overrides.isAuthenticated ?? isAuthenticated, ...getTerminalSize() }));
     const handleLogin = async (user, pass) => {
         try {
             const res = await authApi.login(user, pass);
             client.setToken(res.access_token);
             saveToken(res.access_token);
+            if (res.refresh_token) {
+                saveRefreshToken(res.refresh_token);
+            }
             token = res.access_token;
             username = res.user.username;
             isAuthenticated = true;
             loginError = null;
+            startTokenRefresh();
             rerender(renderApp({ token, username, isAuthenticated: true, loginError: null }));
         }
         catch (err) {
@@ -185,6 +231,10 @@ export async function main() {
         }
     };
     const handleLogout = () => {
+        if (refreshTimer) {
+            clearInterval(refreshTimer);
+            refreshTimer = null;
+        }
         client.setToken(null);
         clearToken();
         token = null;
@@ -199,9 +249,17 @@ export async function main() {
         process.stderr.write(formatUpdateMessage(updateInfo) + '\n\n');
     }
     // Render the app
-    const { rerender } = render(renderApp(), {
+    const { rerender, clear } = render(renderApp(), {
         exitOnCtrlC: false,
         kittyKeyboard: { mode: 'auto' },
     });
+    // On resize: clear the screen first to avoid stale rows left over when the
+    // Header shrinks (e.g. horizontal→compact reduces height by ~10 rows and
+    // Ink's in-place diff won't erase the leftover lines). Then rerender with
+    // fresh terminal dimensions.
+    process.stdout.on('resize', () => {
+        clear();
+        rerender(renderApp());
+    });
 }
 //# sourceMappingURL=main.js.map

package/dist/src/types/api.d.ts

@@ -1,6 +1,7 @@
 export interface LoginResponse {
     success: boolean;
     access_token: string;
+    refresh_token?: string;
     token_type: string;
     user: {
         user_id: string;
@@ -13,9 +14,12 @@ export interface UserInfo {
     user_id: string;
     username: string;
     display_name: string;
+    is_admin?: boolean;
 }
 export interface AuthStatus {
     auth_enabled: boolean;
+    supabase_url?: string;
+    supabase_anon_key?: string;
 }
 export interface SessionInfo {
     thread_id: string;

package/dist/src/utils/config.d.ts

@@ -3,6 +3,8 @@ export declare function getServerUrl(cliArg?: string): string;
 export declare function saveToken(token: string): void;
 export declare function loadToken(): string | null;
 export declare function clearToken(): void;
+export declare function saveRefreshToken(token: string): void;
+export declare function loadRefreshToken(): string | null;
 export type ThemeMode = 'dark' | 'light';
 export declare function saveTheme(mode: ThemeMode): void;
 export declare function loadTheme(): ThemeMode;