minimal-agent 0.10.0 → 0.12.0

package/src/ui/QueuedMessagesBanner.tsx

@@ -0,0 +1,51 @@
+/**
+ * ============================================================
+ *  src/ui/QueuedMessagesBanner.tsx —— 排队消息横幅
+ * ------------------------------------------------------------
+ *  当 AI 工作过程中用户发送了多条插话时，在输入框上方显示排队消息列表。
+ *  插话成功处理后队列清空，横幅自动消失。
+ * ============================================================
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { QueuedInput } from '../messageQueue.js';
+import { theme } from './theme.js';
+
+interface Props {
+  items: readonly QueuedInput[];
+}
+
+function truncate(s: string, maxLen: number): string {
+  const oneLine = s.replace(/\n/g, ' ').trim();
+  if (oneLine.length <= maxLen) return oneLine;
+  return `${oneLine.slice(0, maxLen - 1)}…`;
+}
+
+export function QueuedMessagesBanner({ items }: Props): JSX.Element | null {
+  if (items.length === 0) return null;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.warning}
+      paddingX={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text color={theme.warning} bold>
+          📬 排队中 {items.length} 条补充消息（当前任务结束后将逐条处理）：
+        </Text>
+      </Box>
+      {items.map((item, idx) => (
+        <Box key={item.id}>
+          <Text color={theme.subtle} dimColor>
+            {idx + 1}.{' '}
+          </Text>
+          <Text color={theme.user}>{truncate(item.value, 80)}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/ui/Root.js

@@ -12,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *    菜单里选"完成退出"后必须直接进 App，不能让用户手动重跑命令。在 React
  *    树里用 state 切换是最自然的方式，无需 ink unmount/remount 的额外开销。
  *
- *  initialHistory 的构造（buildFullSystemPrompt + 历史持久化加载）在菜单退出
+ *  initialHistory 的构造（buildBaseSystemPrompt + 历史持久化加载）在菜单退出
  *  后才跑，因为：
  *    - 系统提示词本身不依赖 provider，但流程上推迟到"确定要进 App"那一刻
  *      最干净。
@@ -23,12 +23,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { getWorkingDir } from '../bootstrap/workingDir.js';
-import { ConfigMenu } from '../cli/configMenu.js';
+import { QuickModelSetup } from '../cli/quickModelSetup.js';
 import { loadContext } from '../context/persistContext.js';
 import { getActiveSession } from '../context/sessionRegistry.js';
 import { resolveSessionFile } from '../context/sessionPath.js';
 import { workspaceIndexService } from '../context/workspaceIndex.js';
-import { buildFullSystemPrompt } from '../prompts/system.js';
+import { buildBaseSystemPrompt } from '../prompts/system.js';
 import { ALL_TOOLS } from '../tools/index.js';
 import { App } from './App.js';
 import { theme } from './theme.js';
@@ -51,10 +51,7 @@ export function Root({ initialProvider }) {
         };
     }, [phase]);
     if (phase.kind === 'wizard') {
-        return (_jsx(ConfigMenu, { mode: "first-run", onDone: (provider) => {
-                if (provider)
-                    setPhase({ kind: 'loading-history', provider });
-            } }));
+        return (_jsx(QuickModelSetup, { onDone: (provider) => setPhase({ kind: 'loading-history', provider }) }));
     }
     if (phase.kind === 'loading-history') {
         return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.subtle, children: "\u6B63\u5728\u52A0\u8F7D\u5386\u53F2\u4E0A\u4E0B\u6587..." }) }));
@@ -67,7 +64,8 @@ export function Root({ initialProvider }) {
  */
 async function buildInitialHistory() {
     await workspaceIndexService.register(getWorkingDir()).catch(() => { });
-    const content = await buildFullSystemPrompt(getWorkingDir(), ALL_TOOLS);
+    // 只放稳定层（同 main.tsx::buildInitialHistory）；易变层每回合经 transientContext 注入尾部。
+    const content = await buildBaseSystemPrompt(getWorkingDir(), ALL_TOOLS);
     const fresh = { role: 'system', content };
     const activeSession = await getActiveSession(getWorkingDir());
     const persisted = await loadContext(await resolveSessionFile(getWorkingDir(), activeSession));

package/src/ui/Root.tsx

@@ -0,0 +1,100 @@
+/**
+ * ============================================================
+ *  src/ui/Root.tsx —— TUI 顶层 phase 切换器
+ * ------------------------------------------------------------
+ *  作为 Ink 渲染树的根节点，根据"有没有 Provider 配置"决定渲染：
+ *    - 没有 → <ConfigMenu mode="first-run">：菜单式分段配置，完成基座
+ *      模型配置（可选顺带配其它项）后切到 App
+ *    - 有 → <App>：常规对话界面
+ *
+ *  为什么需要这一层而不是直接在 main.tsx 二选一渲染？
+ *    菜单里选"完成退出"后必须直接进 App，不能让用户手动重跑命令。在 React
+ *    树里用 state 切换是最自然的方式，无需 ink unmount/remount 的额外开销。
+ *
+ *  initialHistory 的构造（buildBaseSystemPrompt + 历史持久化加载）在菜单退出
+ *  后才跑，因为：
+ *    - 系统提示词本身不依赖 provider，但流程上推迟到"确定要进 App"那一刻
+ *      最干净。
+ *    - 第一次启动时常常没历史可加载，buildInitialHistory 行为是只返 system
+ *      prompt，开销可忽略。
+ * ============================================================
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+
+import { getWorkingDir } from '../bootstrap/workingDir.js';
+import { QuickModelSetup } from '../cli/quickModelSetup.js';
+import { loadContext } from '../context/persistContext.js';
+import { getActiveSession } from '../context/sessionRegistry.js';
+import { resolveSessionFile } from '../context/sessionPath.js';
+import { workspaceIndexService } from '../context/workspaceIndex.js';
+import { buildBaseSystemPrompt } from '../prompts/system.js';
+import { ALL_TOOLS } from '../tools/index.js';
+import type { Message, Provider } from '../types.js';
+import { App } from './App.js';
+import { theme } from './theme.js';
+
+type Phase =
+  | { kind: 'wizard' }
+  | { kind: 'loading-history'; provider: Provider }
+  | { kind: 'app'; provider: Provider; initialHistory: Message[] };
+
+interface Props {
+  /** 启动时已加载到的 provider；null 表示要先走向导 */
+  initialProvider: Provider | null;
+}
+
+export function Root({ initialProvider }: Props): JSX.Element {
+  const [phase, setPhase] = useState<Phase>(
+    initialProvider
+      ? { kind: 'loading-history', provider: initialProvider }
+      : { kind: 'wizard' },
+  );
+
+  useEffect(() => {
+    if (phase.kind !== 'loading-history') return;
+    let cancelled = false;
+    void (async () => {
+      const history = await buildInitialHistory();
+      if (cancelled) return;
+      setPhase({ kind: 'app', provider: phase.provider, initialHistory: history });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [phase]);
+
+  if (phase.kind === 'wizard') {
+    return (
+      <QuickModelSetup onDone={(provider) => setPhase({ kind: 'loading-history', provider })} />
+    );
+  }
+
+  if (phase.kind === 'loading-history') {
+    return (
+      <Box paddingX={1}>
+        <Text color={theme.subtle}>正在加载历史上下文...</Text>
+      </Box>
+    );
+  }
+
+  return <App provider={phase.provider} initialHistory={phase.initialHistory} />;
+}
+
+/**
+ * 复用 main.tsx 的逻辑：fresh system prompt + 上次未关闭的对话。
+ * 这里独立一份是为了让 Root 内部能在向导成功后即时构造，不必返工 main.tsx。
+ */
+async function buildInitialHistory(): Promise<Message[]> {
+  await workspaceIndexService.register(getWorkingDir()).catch(() => {});
+  // 只放稳定层（同 main.tsx::buildInitialHistory）；易变层每回合经 transientContext 注入尾部。
+  const content = await buildBaseSystemPrompt(getWorkingDir(), ALL_TOOLS);
+  const fresh: Message = { role: 'system', content };
+
+  const activeSession = await getActiveSession(getWorkingDir());
+  const persisted = await loadContext(await resolveSessionFile(getWorkingDir(), activeSession));
+  if (!persisted || persisted.length === 0) return [fresh];
+  const rest = persisted[0]?.role === 'system' ? persisted.slice(1) : persisted;
+  return [fresh, ...rest];
+}

package/src/ui/SessionPicker.tsx

@@ -0,0 +1,169 @@
+/**
+ * ============================================================
+ *  src/ui/SessionPicker.tsx —— /session /sessions /resume 的会话选择界面
+ * ------------------------------------------------------------
+ *  内核（context/sessionRegistry.ts）早就支持同一工作目录下多个隔离 session，
+ *  这个组件只是给 TUI 补上一个真实的"列出 + 选择 + 新建"入口——此前 App.tsx
+ *  的 /session /sessions 只回显固定提示语，不做真正的切换/列出。
+ *
+ *  交互设计照抄已验证过的 AskQuestion.tsx：手写 useInput，↑↓ 移动 + Enter 确认 +
+ *  ESC 取消，零新依赖（不引 ink-select-input）。列表末尾追加一个"+ 新建会话"伪
+ *  选项，选中后进入文本子模式输入标题——与 AskQuestion.tsx 处理"其他（自由输入）"
+ *  伪选项完全同构。
+ * ============================================================
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+import type { SessionSummary } from '../context/sessionRegistry.js';
+import { theme } from './theme.js';
+
+interface SessionPickerProps {
+  sessions: SessionSummary[];
+  activeSessionId: string;
+  /** 选中一条已有 session */
+  onSelect: (sessionId: string) => void;
+  /** 选中"新建会话"并输入完标题 */
+  onCreate: (title: string) => void;
+  /** ESC / Ctrl+C 取消 */
+  onCancel: () => void;
+}
+
+const PREVIEW_MAX = 60;
+
+function clampPreview(s: string): string {
+  const oneLine = s.replace(/\s+/g, ' ').trim();
+  return oneLine.length > PREVIEW_MAX ? `${oneLine.slice(0, PREVIEW_MAX - 1)}…` : oneLine;
+}
+
+/** 粗粒度相对时间，够用即可（不追求 Claude Code 那种精确到分钟的实现）。 */
+function formatRelativeTime(ms: number): string {
+  const diff = Date.now() - ms;
+  if (diff < 60_000) return '刚刚';
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 60) return `${minutes}分钟前`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}小时前`;
+  const days = Math.floor(hours / 24);
+  return `${days}天前`;
+}
+
+/** 一行元数据：相对时间 · 最后一条消息预览（借用 kakadeai formatLogMetadata 的 parts+join 写法，简化到本项目实际有的字段）。 */
+function formatMetaLine(s: SessionSummary): string {
+  const parts = [formatRelativeTime(s.updatedAt)];
+  if (s.lastMessagePreview) parts.push(clampPreview(s.lastMessagePreview));
+  return parts.join(' · ');
+}
+
+export function SessionPicker({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onCreate,
+  onCancel,
+}: SessionPickerProps): JSX.Element {
+  // 末尾"+ 新建会话"伪选项占据下标 sessions.length
+  const createIndex = sessions.length;
+  const listLength = sessions.length + 1;
+
+  const [idx, setIdx] = useState(0);
+  const [textMode, setTextMode] = useState(false);
+  const [draft, setDraft] = useState('');
+
+  useInput((input, key) => {
+    if (textMode) {
+      if (key.escape) {
+        // 退回列表，不取消整个 picker
+        setTextMode(false);
+        setDraft('');
+        return;
+      }
+      if (key.return) {
+        const title = draft.trim();
+        onCreate(title); // 空标题时 createSession 会用它自己的默认标题兜底
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setDraft((s) => s.slice(0, -1));
+        return;
+      }
+      if (input && !key.meta && !key.ctrl) {
+        setDraft((s) => s + input);
+      }
+      return;
+    }
+
+    if (key.escape || (key.ctrl && input === 'c')) {
+      onCancel();
+      return;
+    }
+    if (key.upArrow) {
+      setIdx((i) => (i - 1 + listLength) % listLength);
+      return;
+    }
+    if (key.downArrow) {
+      setIdx((i) => (i + 1) % listLength);
+      return;
+    }
+    if (key.return) {
+      if (idx === createIndex) {
+        setTextMode(true);
+        setDraft('');
+        return;
+      }
+      const target = sessions[idx];
+      if (target) onSelect(target.id);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color={theme.user} bold>
+          选择会话（当前 {sessions.length} 个）
+        </Text>
+      </Box>
+
+      {textMode ? (
+        <Box flexDirection="column">
+          <Text color={theme.subtle}>✏️ 新会话标题（留空使用默认标题）：</Text>
+          <Box marginTop={1} borderStyle="round" borderColor="cyan" paddingX={1}>
+            <Text>{draft || ' '}</Text>
+          </Box>
+          <Text color={theme.subtle}>输入后 Enter 创建 · ESC 返回列表</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {sessions.map((s, i) => {
+            const active = i === idx;
+            const isCurrent = s.id === activeSessionId;
+            return (
+              <Box key={s.id} flexDirection="column">
+                <Text color={active ? theme.user : undefined}>
+                  {active ? '> ' : '  '}
+                  {s.title}
+                  {isCurrent ? ' (当前)' : ''}
+                </Text>
+                <Text color={theme.subtle}>
+                  {'      '}
+                  {formatMetaLine(s)}
+                </Text>
+              </Box>
+            );
+          })}
+
+          {/* 末尾"+ 新建会话"伪选项 */}
+          <Text color={idx === createIndex ? theme.user : undefined}>
+            {idx === createIndex ? '> ' : '  '}
+            + 新建会话
+          </Text>
+
+          <Box marginTop={1}>
+            <Text color={theme.subtle}>↑↓ 选择 · Enter 确认 · ESC 取消</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/ui/StatusLine.js

@@ -37,8 +37,29 @@ export const StatusLine = React.memo(function StatusLine({ provider, history, pl
     const ratio = usage.tokens / usage.threshold;
     const color = ratio >= 1 ? theme.error : ratio >= 0.7 ? theme.warning : theme.ok;
     const cwdDisplay = shortenPath(getWorkingDir());
-    return (_jsxs(Box, { children: [pluginProgress && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.plugin, children: ["\uD83D\uDD04 ", pluginProgress.pluginId, " "] }), pluginProgress.current !== undefined && (_jsxs(Text, { color: theme.plugin, children: [pluginProgress.current, "/", pluginProgress.max ?? '?'] })), _jsx(Text, { color: theme.subtle, children: ' · ' })] })), _jsx(Text, { color: theme.user, children: "cwd " }), _jsx(Text, { color: theme.subtle, children: cwdDisplay }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsxs(Text, { color: theme.subtle, children: [provider.name, "/", provider.model] }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsxs(Text, { color: color, children: ["tokens ", fmt(usage.tokens), " / ", fmt(usage.contextWindow)] }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsx(Text, { color: color, children: usage.toThreshold > 0 ? `距压缩 ${fmt(usage.toThreshold)}` : `已超阈值（下轮压缩）` })] }));
+    const cacheHit = formatCacheHit(contextUsage);
+    return (_jsxs(Box, { children: [pluginProgress && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.plugin, children: ["\uD83D\uDD04 ", pluginProgress.pluginId, " "] }), pluginProgress.current !== undefined && (_jsxs(Text, { color: theme.plugin, children: [pluginProgress.current, "/", pluginProgress.max ?? '?'] })), _jsx(Text, { color: theme.subtle, children: ' · ' })] })), _jsx(Text, { color: theme.user, children: "cwd " }), _jsx(Text, { color: theme.subtle, children: cwdDisplay }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsxs(Text, { color: theme.subtle, children: [provider.name, "/", provider.model] }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsxs(Text, { color: color, children: ["tokens ", fmt(usage.tokens), " / ", fmt(usage.contextWindow)] }), _jsx(Text, { color: theme.subtle, children: ' · ' }), _jsx(Text, { color: color, children: usage.toThreshold > 0 ? `距压缩 ${fmt(usage.toThreshold)}` : `已超阈值（下轮压缩）` }), cacheHit && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.subtle, children: ' · ' }), _jsxs(Text, { color: theme.subtle, children: ["\u7F13\u5B58 ", cacheHit] })] }))] }));
 });
+/**
+ * 提示词缓存命中率显示串，provider 没报告缓存信息时返回 null（整段不渲染）。
+ *
+ * 「没报告」与「报告了 0 命中」必须区分：前者是 provider 不支持自动前缀缓存（或没开
+ * include_usage），显示 0% 会误导排障；后者是真实的冷启动/前缀失配，值得显示出来。
+ * 这个区分由 loop.ts 只在有真实 usage 时才附带字段来保证。
+ */
+export function formatCacheHit(usage) {
+    if (!usage?.promptCacheUsage?.reported)
+        return usage ? '未报告' : null;
+    const read = usage.promptCacheUsage.cacheReadTokens ?? 0;
+    const total = usage.promptCacheUsage.promptTokens;
+    if (total === undefined)
+        return read > 0 ? `命中 ${fmt(read)}` : '冷启动 0%';
+    if (total <= 0)
+        return '冷启动 0%';
+    const percent = Math.round((read / total) * 100);
+    const miss = usage.promptCacheUsage.cacheMissTokens;
+    return `${read === 0 ? '冷启动 ' : '命中 '}${percent}% · ${fmt(read)}${miss !== undefined ? ` · Miss ${fmt(miss)}` : ''}`;
+}
 /** 把整数格式化为 1.2K / 12.3K / 1.5M */
 function fmt(n) {
     if (n < 1000)

package/src/ui/StatusLine.tsx

@@ -0,0 +1,145 @@
+/**
+ * ============================================================
+ *  src/ui/StatusLine.tsx —— 底部状态栏
+ * ------------------------------------------------------------
+ *  显示：
+ *    cwd ~/proj · {provider}/{model} · tokens 12.3K / 200K · 距压缩 7.7K
+ *  接近压缩阈值时 tokens / 距压缩 变黄；超过阈值时变红。
+ * ============================================================
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { homedir } from 'node:os';
+import { sep } from 'node:path';
+
+import { getWorkingDir } from '../bootstrap/workingDir.js';
+import type { Message, Provider } from '../types.js';
+import type { ContextUsageInfo, PluginProgressState } from './hooks/useChat.js';
+import { useTokenUsage } from './hooks/useTokenUsage.js';
+import { theme } from './theme.js';
+
+interface Props {
+  provider: Provider;
+  history: Message[];
+  pluginProgress?: PluginProgressState | null;
+  /**
+   * 内核每轮算出的真实上下文用量（见 loop.ts 的 context_usage 事件），比本组件
+   * 自算的 useTokenUsage 估算更准（含 tools-schema 开销 + 真实 provider usage）。
+   * 缺省/null（如刚启动、尚未跑过一轮）时降级回 useTokenUsage 估算。
+   */
+  contextUsage?: ContextUsageInfo | null;
+}
+
+/**
+ * React.memo 包装。
+ *
+ * props: provider 引用启动后稳定；history 引用变化（useMemo slice）但内容变化
+ * 才需要重算 useTokenUsage —— React.memo 浅比较 history 引用就够了（slice 后引用
+ * 变了说明真有新消息）；pluginProgress 仅插件循环时更新。
+ *
+ * 流式 streamingText 高频更新不影响 history 引用，StatusLine 不会被带着 rerender。
+ */
+export const StatusLine = React.memo(function StatusLine({
+  provider,
+  history,
+  pluginProgress,
+  contextUsage,
+}: Props): JSX.Element {
+  const estimated = useTokenUsage(history, provider);
+  const usage = contextUsage
+    ? {
+        tokens: contextUsage.usedTokens,
+        threshold: contextUsage.compactThreshold,
+        contextWindow: contextUsage.contextWindow,
+        toThreshold: contextUsage.compactThreshold - contextUsage.usedTokens,
+      }
+    : estimated;
+
+  const ratio = usage.tokens / usage.threshold;
+  const color = ratio >= 1 ? theme.error : ratio >= 0.7 ? theme.warning : theme.ok;
+
+  const cwdDisplay = shortenPath(getWorkingDir());
+  const cacheHit = formatCacheHit(contextUsage);
+
+  return (
+    <Box>
+      {pluginProgress && (
+        <>
+          <Text color={theme.plugin}>🔄 {pluginProgress.pluginId} </Text>
+          {pluginProgress.current !== undefined && (
+            <Text color={theme.plugin}>
+              {pluginProgress.current}/{pluginProgress.max ?? '?'}
+            </Text>
+          )}
+          <Text color={theme.subtle}>{' · '}</Text>
+        </>
+      )}
+      <Text color={theme.user}>cwd </Text>
+      <Text color={theme.subtle}>{cwdDisplay}</Text>
+      <Text color={theme.subtle}>{' · '}</Text>
+      <Text color={theme.subtle}>
+        {provider.name}/{provider.model}
+      </Text>
+      <Text color={theme.subtle}>{' · '}</Text>
+      <Text color={color}>
+        tokens {fmt(usage.tokens)} / {fmt(usage.contextWindow)}
+      </Text>
+      <Text color={theme.subtle}>{' · '}</Text>
+      <Text color={color}>
+        {usage.toThreshold > 0 ? `距压缩 ${fmt(usage.toThreshold)}` : `已超阈值（下轮压缩）`}
+      </Text>
+      {cacheHit && (
+        <>
+          <Text color={theme.subtle}>{' · '}</Text>
+          <Text color={theme.subtle}>缓存 {cacheHit}</Text>
+        </>
+      )}
+    </Box>
+  );
+});
+
+/**
+ * 提示词缓存命中率显示串，provider 没报告缓存信息时返回 null（整段不渲染）。
+ *
+ * 「没报告」与「报告了 0 命中」必须区分：前者是 provider 不支持自动前缀缓存（或没开
+ * include_usage），显示 0% 会误导排障；后者是真实的冷启动/前缀失配，值得显示出来。
+ * 这个区分由 loop.ts 只在有真实 usage 时才附带字段来保证。
+ */
+export function formatCacheHit(usage?: ContextUsageInfo | null): string | null {
+  if (!usage?.promptCacheUsage?.reported) return usage ? '未报告' : null;
+  const read = usage.promptCacheUsage.cacheReadTokens ?? 0;
+  const total = usage.promptCacheUsage.promptTokens;
+  if (total === undefined) return read > 0 ? `命中 ${fmt(read)}` : '冷启动 0%';
+  if (total <= 0) return '冷启动 0%';
+  const percent = Math.round((read / total) * 100);
+  const miss = usage.promptCacheUsage.cacheMissTokens;
+  return `${read === 0 ? '冷启动 ' : '命中 '}${percent}% · ${fmt(read)}${miss !== undefined ? ` · Miss ${fmt(miss)}` : ''}`;
+}
+
+/** 把整数格式化为 1.2K / 12.3K / 1.5M */
+function fmt(n: number): string {
+  if (n < 1000) return `${n}`;
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}K`;
+  return `${(n / 1_000_000).toFixed(2)}M`;
+}
+
+/**
+ * 把绝对路径精简成适合状态栏显示的形式：
+ *   - home 下 → 以 ~ 开头
+ *   - 超过 40 字符 → 保留首段 + … + 末两段
+ */
+export function shortenPath(abs: string): string {
+  const home = homedir();
+  let p = abs;
+  if (home && (p === home || p.startsWith(home + sep))) {
+    p = '~' + p.slice(home.length);
+  }
+  if (p.length <= 40) return p;
+
+  const parts = p.split(/[\\/]/).filter(Boolean);
+  if (parts.length <= 3) return p;
+  const head = p.startsWith('~') ? '~' : parts[0];
+  const tail = parts.slice(-2).join(sep);
+  return `${head}${sep}…${sep}${tail}`;
+}

package/src/ui/WorkspacePicker.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+import type { WorkspaceRecord } from '../context/workspaceIndex.js';
+import { theme } from './theme.js';
+
+interface Props {
+  workspaces: WorkspaceRecord[];
+  currentPath: string;
+  currentSessionId: string;
+  onSelect: (cwd: string, sessionId: string) => void;
+  onCancel: () => void;
+}
+
+export function WorkspacePicker({ workspaces, currentPath, currentSessionId, onSelect, onCancel }: Props): JSX.Element {
+  const available = useMemo(() => workspaces.filter((workspace) => workspace.sessions.length > 0), [workspaces]);
+  const [workspaceIndex, setWorkspaceIndex] = useState(0);
+  const [selectedWorkspace, setSelectedWorkspace] = useState<WorkspaceRecord | null>(null);
+  const [sessionIndex, setSessionIndex] = useState(0);
+
+  const items = selectedWorkspace?.sessions ?? available;
+  const index = selectedWorkspace ? sessionIndex : workspaceIndex;
+  const setIndex = selectedWorkspace ? setSessionIndex : setWorkspaceIndex;
+
+  useInput((input, key) => {
+    if (key.escape || (key.ctrl && input === 'c')) {
+      if (selectedWorkspace) {
+        setSelectedWorkspace(null);
+        setSessionIndex(0);
+      } else onCancel();
+      return;
+    }
+    if (!items.length) return;
+    if (key.upArrow) { setIndex((value) => (value - 1 + items.length) % items.length); return; }
+    if (key.downArrow) { setIndex((value) => (value + 1) % items.length); return; }
+    if (!key.return) return;
+    if (!selectedWorkspace) {
+      const workspace = available[workspaceIndex];
+      if (workspace) {
+        if (!workspace.available) return;
+        setSelectedWorkspace(workspace);
+        const activeIndex = workspace.sessions.findIndex((session) => session.id === workspace.activeSessionId);
+        setSessionIndex(Math.max(0, activeIndex));
+      }
+      return;
+    }
+    const session = selectedWorkspace.sessions[sessionIndex];
+    if (session) onSelect(selectedWorkspace.displayPath, session.id);
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Text color={theme.user} bold>
+        {selectedWorkspace ? `${selectedWorkspace.displayName} · 选择会话` : `选择工作区（${available.length}）`}
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {!items.length ? <Text color={theme.subtle}>暂无可恢复的工作区会话</Text> : null}
+        {selectedWorkspace
+          ? selectedWorkspace.sessions.map((session, itemIndex) => (
+              <Box key={session.id} flexDirection="column">
+                <Text color={itemIndex === sessionIndex ? theme.user : undefined}>
+                  {itemIndex === sessionIndex ? '> ' : '  '}{session.title}
+                  {selectedWorkspace.displayPath === currentPath && session.id === currentSessionId ? ' (当前)' : ''}
+                </Text>
+                {session.lastMessagePreview ? <Text color={theme.subtle}>    {session.lastMessagePreview.slice(0, 72)}</Text> : null}
+              </Box>
+            ))
+          : available.map((workspace, itemIndex) => (
+              <Text key={workspace.id} color={itemIndex === workspaceIndex ? theme.user : workspace.available ? undefined : theme.subtle}>
+                {itemIndex === workspaceIndex ? '> ' : '  '}{workspace.displayName} · {workspace.sessions.length} 个会话
+                {!workspace.available ? ' · 未连接' : ''}
+              </Text>
+            ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={theme.subtle}>
+          {!selectedWorkspace && available[workspaceIndex]?.available === false
+            ? '该工作区未连接，重新挂载磁盘后才能打开 · ESC 取消'
+            : `↑↓ 选择 · Enter 确认${selectedWorkspace ? ' · ESC 返回工作区' : ' · ESC 取消'}`}
+        </Text>
+      </Box>
+    </Box>
+  );
+}