@rexvane/piweb 0.3.21 → 0.3.23

package/src/components/ContextMeter.tsx

@@ -1,48 +1,25 @@
 "use client";
 
-/**
- * 上下文占用：
- * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与 13 类分段占用条
- * （mac 磁盘存储条式的多色分段，含 Free Space 段）。
- * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
- * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
- * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
- * 冷会话（只浏览历史、agent 没启动）拿不到组装后的 System Prompt 和工具定义：
- * 其余分项照常显示，另给「现在统计」按需启动会话，分项随后经 context_breakdown 事件刷新。
- * 无对话时不渲染（由父组件经 contextVisible 控制）。
- */
+/** 上下文总量是 SDK 估算；API 输入用量与内容字符分类分别展示，不能按比例分摊 token。 */
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@/i18n";
+import { fmtPercent, fmtTokens } from "@/lib/format";
+import { formatCapacity, parseCapacity } from "@/lib/model-draft";
 import { classifyMessageChars } from "@/lib/process-format";
-import type { ContextBreakdown } from "@/lib/types";
-
-function fmtTok(n: number): string {
-	return n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(Math.round(n));
-}
+import type { ContextBreakdown, TrajTokens } from "@/lib/types";
 
-/** 13 类分段的定义（顺序即渲染顺序） */
-interface Segment {
-	key: string;
-	label: string;
-	tokens: number;
-	color: string;
-}
-
-export function ContextMeter({
-	percent,
-	tokens,
-	contextWindow,
-	source,
-}: {
+export function ContextMeter({ percent, tokens, contextWindow, model, source, label }: {
 	percent: number | null;
 	tokens: number | null;
 	contextWindow: number | null;
-	/** 分段数据源：消息字符统计只在弹窗打开时执行（流式期间消息每 token 都变，不能常驻扫描） */
+	/** 当前会话的模型：有它才能在弹窗里改上下文窗口 */
+	model?: { provider: string; id: string } | null;
+	/** 覆盖「上下文估算」这个措辞：真实用量（如旁聊）不该叫估算 */
+	label?: string;
 	source?: {
 		systemChars: number;
-		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown }> }[];
+		messages: Array<{ role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: TrajTokens; stopReason?: string }>;
 		breakdown?: ContextBreakdown;
-		/** 冷会话里点「现在统计」：启动会话（prepare），System Prompt 与工具定义才算得出来 */
 		loadFull?: () => Promise<unknown> | unknown;
 	};
 }) {
@@ -52,154 +29,246 @@ export function ContextMeter({
 	const { t } = useI18n();
 	const cold = Boolean(source?.breakdown?.cold);
 
-	// 新分项到了（不再是冷的）就收起「统计中」
-	useEffect(() => {
-		if (!cold) setCounting(false);
-	}, [cold]);
-
+	useEffect(() => { if (!cold) setCounting(false); }, [cold]);
 	useEffect(() => {
 		if (!open) return;
-		const h = (e: MouseEvent) => {
-			if (!ref.current?.contains(e.target as Node)) setOpen(false);
-		};
+		const h = (e: MouseEvent) => { if (!ref.current?.contains(e.target as Node)) setOpen(false); };
 		document.addEventListener("mousedown", h);
 		return () => document.removeEventListener("mousedown", h);
 	}, [open]);
 
-	const used = tokens ?? 0;
-	const window_ = contextWindow ?? 0;
-	const b = source?.breakdown;
+	// 流式期间只在打开弹窗后扫描，分类是实际文本字符数，不是假设的 token 数。
+	const chars = useMemo(() => classifyMessageChars(open ? source?.messages ?? [] : []), [open, source]);
+	const lastUsage = useMemo(() => open ? source?.messages.findLast((m) => m.role === "assistant" && m.stopReason !== "error" && m.stopReason !== "aborted" && m.stopReason !== "pending" &&
+		(m.usage?.input ?? 0) + (m.usage?.cacheRead ?? 0) + (m.usage?.cacheWrite ?? 0) + (m.usage?.output ?? 0) > 0)?.usage : undefined, [open, source]);
+	const measuredInput = lastUsage ? (lastUsage.input ?? 0) + (lastUsage.cacheRead ?? 0) + (lastUsage.cacheWrite ?? 0) : null;
 
-	// 消息分项只在弹窗打开时统计（≈4 字符/token，与 SDK 一致）
-	const messageSegments = useMemo(() => {
-		if (!open) return { user: 0, agentText: 0, agentThinking: 0, agentToolCall: 0, toolOutput: 0 };
-		const chars = classifyMessageChars(source?.messages ?? []);
-		return {
-			user: Math.max(0, Math.round(chars.user / 4)),
-			agentText: Math.max(0, Math.round(chars.agentText / 4)),
-			agentThinking: Math.max(0, Math.round(chars.agentThinking / 4)),
-			agentToolCall: Math.max(0, Math.round(chars.agentToolCall / 4)),
-			toolOutput: Math.max(0, Math.round(chars.toolOutput / 4)),
-		};
-	}, [open, source]);
+	// 刚改过窗口：服务端已落盘，但页面上的 contextWindow 还是改之前的值（冷会话要等下一次快照）。
+	// 在它变之前先显示刚保存的值；contextWindow 一变（快照 / 用量追上来，或别处改了）就以 props 为准。
+	const modelKey = model ? `${model.provider}/${model.id}` : "";
+	const [applied, setApplied] = useState<{ key: string; from: number; value: number } | null>(null);
+	useEffect(() => {
+		if (applied && (applied.key !== modelKey || contextWindow !== applied.from)) setApplied(null);
+	}, [applied, modelKey, contextWindow]);
+	const override = applied && applied.key === modelKey && contextWindow === applied.from ? applied.value : null;
 
-	const p = percent ?? 0;
-	const usageLabel = percent === null ? t.contextUnknown : `${Math.round(p)}% ${t.contextUsed}`;
+	const known = tokens !== null && Number.isFinite(tokens) && tokens >= 0;
+	const used = known ? tokens : 0;
+	const window_ = override ?? contextWindow ?? 0;
+	const recomputed = override !== null && known;
+	const p = recomputed ? used / override * 100 : percent ?? 0;
+	/** 圆环与悬停提示仍用 SDK 估算（那是「占窗口多少」），弹窗正文只留 API 出来的真实数字 */
+	const usageLabel = percent === null && !recomputed ? t.contextUnknown : `${fmtPercent(p)} ${label ?? t.contextEstimated}`;
 	const r = 5.5;
-	const c = 2 * Math.PI * r;
-	const shown = Math.max(0, Math.min(100, p));
-
-	const segments: Segment[] = b
-		? [
-				{ key: "systemPrompt", label: t.contextSystemPrompt, tokens: b.systemPrompt, color: "var(--dsw-accent)" },
-				{ key: "systemTools", label: t.contextSystemTools, tokens: b.systemTools, color: "#8B7EC8" },
-				{ key: "customTools", label: t.contextCustomTools, tokens: b.customTools, color: "#B39DDB" },
-				{ key: "memory", label: t.contextMemory, tokens: b.memory, color: "#5FA8D3" },
-				{ key: "skills", label: t.contextSkills, tokens: b.skills, color: "#4FB286" },
-				{ key: "user", label: t.contextUserMessages, tokens: messageSegments.user, color: "var(--dsw-success)" },
-				{ key: "agentText", label: t.contextAgentText, tokens: messageSegments.agentText, color: "#7BC96F" },
-				{ key: "agentThinking", label: t.contextAgentThinking, tokens: messageSegments.agentThinking, color: "#C9A66B" },
-				{ key: "agentToolCall", label: t.contextAgentToolCall, tokens: messageSegments.agentToolCall, color: "#D3A15F" },
-				{ key: "toolOutput", label: t.contextToolOutput, tokens: messageSegments.toolOutput, color: "var(--dsw-warn)" },
-				{ key: "compacted", label: t.contextCompacted, tokens: b.compacted, color: "#A05A78" },
-				{ key: "buffer", label: t.contextAutoCompactBuffer, tokens: b.autoCompactBuffer, color: "var(--dsw-border-l3)" },
-			]
-		: // 服务端分项缺失（旧快照）：退回旧三段口径
-			[
-				{ key: "system", label: t.contextSystem, tokens: Math.max(0, Math.round((source?.systemChars ?? 0) / 4)), color: "var(--dsw-accent)" },
-				{ key: "messages", label: t.contextMessages, tokens: messageSegments.user + messageSegments.agentText + messageSegments.agentThinking, color: "var(--dsw-success)" },
-				{ key: "tools", label: t.contextTools, tokens: Math.max(0, used - Math.max(0, Math.round((source?.systemChars ?? 0) / 4)) - messageSegments.user - messageSegments.agentText - messageSegments.agentThinking), color: "var(--dsw-warn)" },
-			];
-
-	// Free Space：窗口余量（窗口未知则不显示）；分段条不归一化到已用之和
-	const usedSum = segments.reduce((sum, s) => sum + s.tokens, 0);
-	const free = window_ > 0 ? Math.max(0, window_ - usedSum) : 0;
-	const barTotal = window_ > 0 ? window_ : usedSum || 1;
-	const bar = (n: number) => `${(n / barTotal) * 100}%`;
+	const circumference = 2 * Math.PI * r;
+	const reserved = Math.max(0, source?.breakdown?.autoCompactBuffer ?? 0);
+	/**
+	 * 进度条与 Free Space 的「已用」基准：优先最近一次请求的真实输入（API 报的），
+	 * 没测到才退回 SDK 估算；两者都没有就不画（未知不能当空闲）。
+	 */
+	const anchor = window_ > 0 ? (measuredInput !== null ? Math.min(measuredInput, window_) : known ? Math.min(used, window_) : null) : null;
+	// 超过窗口时预留不再画到窗口外；用量未知不能将整扇窗口显示为 Free Space。
+	const visibleReserved = anchor === null ? 0 : Math.min(reserved, Math.max(0, window_ - anchor));
+	const free = anchor === null ? null : Math.max(0, window_ - anchor - reserved);
+	const b = source?.breakdown?.characters;
+	const rows = [
+		{ key: "system", label: t.contextSystemPrompt, value: b?.systemPrompt, color: "var(--dsw-accent)" },
+		{ key: "builtin", label: t.contextSystemTools, value: b?.systemTools, color: "#8B7EC8" },
+		{ key: "custom", label: t.contextCustomTools, value: b?.customTools, color: "#B39DDB" },
+		{ key: "background", label: t.contextBackground, value: b?.background, color: "#5B8DEF" },
+		{ key: "memory", label: t.contextMemory, value: b?.memory, color: "#5FA8D3" },
+		{ key: "skills", label: t.contextSkills, value: b?.skills, color: "#4FB286" },
+		{ key: "user", label: t.contextUserMessages, value: chars.user, color: "var(--dsw-success)" },
+		{ key: "text", label: t.contextAgentText, value: chars.agentText, color: "#7BC96F" },
+		{ key: "thinking", label: t.contextAgentThinking, value: chars.agentThinking, color: "#C9A66B" },
+		{ key: "call", label: t.contextAgentToolCall, value: chars.agentToolCall, color: "#D3A15F" },
+		{ key: "output", label: t.contextToolOutput, value: chars.toolOutput, color: "var(--dsw-warn)" },
+		{ key: "compacted", label: t.contextCompacted, value: b?.compacted, color: "#A05A78" },
+	].filter((row) => row.value !== undefined && row.value > 0);
+	const charTotal = rows.reduce((sum, row) => sum + (row.value ?? 0), 0);
+	/**
+	 * 进度条整条 = 全部上下文窗口：已用那一截按各类**字符数比例**分段（API 不给分类 token，
+	 * 所以只摊比例、不报每类的 token 数），剩下的部分就是背景色的 Free Space。
+	 */
+	const segments = anchor === null || charTotal === 0 ? [] : rows.map((row) => ({
+		key: row.key,
+		label: row.label,
+		value: row.value as number,
+		color: row.color,
+		width: anchor / window_ * 100 * ((row.value as number) / charTotal),
+	}));
 
 	return (
 		<div ref={ref} className="relative">
-			<button
-				className="icon-btn"
-				style={{ width: 28, height: 28 }}
-				title={usageLabel}
-				onClick={() => setOpen((o) => !o)}
-			>
+			<button className="icon-btn" style={{ width: 28, height: 28 }} title={usageLabel} aria-label={usageLabel} onClick={() => setOpen((o) => !o)}>
 				<svg width="14" height="14" viewBox="0 0 14 14">
 					<circle cx="7" cy="7" r={r} fill="none" stroke="var(--dsw-border-l3)" strokeWidth="2" />
-					<circle
-						cx="7" cy="7" r={r}
-						fill="none"
-						stroke={p != null && p > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"}
-						strokeWidth="2"
-						strokeDasharray={`${(c * shown) / 100} ${c}`}
-						transform="rotate(-90 7 7)"
-						strokeLinecap="round"
-					/>
+					<circle cx="7" cy="7" r={r} fill="none" stroke={p > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"} strokeWidth="2"
+						strokeDasharray={`${circumference * Math.max(0, Math.min(100, p)) / 100} ${circumference}`} transform="rotate(-90 7 7)" strokeLinecap="round" />
 				</svg>
 			</button>
 			{open && (
-				<div
-					className="popover absolute bottom-9 right-0 z-50 w-64 p-4"
-					style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}
-				>
-					<div className="font-medium" style={{ color: "var(--dsw-label-primary)" }}>
-						{usageLabel}
-					</div>
-					<div style={{ color: "var(--dsw-label-tertiary)" }} className="mt-1">
-						{tokens === null ? "—" : `~${fmtTok(used)}`} / {window_ > 0 ? fmtTok(window_) : "—"}
-					</div>
-
-					{/* 分段占用条（mac 磁盘存储条式多色分段，含 Free Space） */}
-					{usedSum > 0 && (
-						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} aria-hidden>
-							{segments.filter((s) => s.tokens > 0).map((s) => (
-								<span key={s.key} style={{ width: bar(s.tokens), background: s.color }} />
+				<div className="popover absolute bottom-9 right-0 z-50 w-72 p-4" style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}>
+					{measuredInput !== null && <div className="mt-2 flex items-center justify-between gap-2"><span>{t.contextApiInput}</span><span title={`${measuredInput} tok`}>{fmtTokens(measuredInput)} tok</span></div>}
+					{window_ > 0 && (
+						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} data-testid="context-bar" aria-hidden>
+							{segments.map((segment) => (
+								<span key={segment.key} data-segment={segment.key} className="flex-none" title={`${segment.label}：${fmtTokens(segment.value)} ${t.contextChars}`}
+									style={{ width: `${segment.width}%`, background: segment.color }} />
 							))}
-							{free > 0 && <span style={{ width: bar(free), background: "transparent" }} />}
+							{visibleReserved > 0 && <span data-segment="reserved" className="flex-none" style={{ width: `${visibleReserved / window_ * 100}%`, background: "var(--dsw-border-l3)" }} />}
 						</div>
 					)}
 					<div className="mt-2 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
-						{segments.filter((s) => s.tokens > 0).map((s) => (
-							<SegmentRow key={s.key} label={s.label} tokens={s.tokens} color={s.color} />
-						))}
-						{window_ > 0 && <SegmentRow label={t.contextFreeSpace} tokens={free} color="var(--dsw-selector)" />}
+						{reserved > 0 && <DataRow label={t.contextAutoCompactBuffer} value={`${fmtTokens(reserved)} tok`} exact={`${reserved} tok`} color="var(--dsw-border-l3)" />}
+						{window_ > 0 && <DataRow label={t.contextFreeSpace} value={free === null ? "—" : `~${fmtTokens(free)} tok`} color="var(--dsw-selector)" />}
 					</div>
-					{cold && source?.loadFull ? (
+					{/* 进度条的图例：颜色跟上面的分段一一对应，数字是真实字符数 */}
+					<div className="mt-3 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
+						{rows.map((row) => <DataRow key={row.key} label={row.label} value={`${fmtTokens(row.value!)} ${t.contextChars}`} exact={`${row.value} ${t.contextChars}`} color={row.color} />)}
+					</div>
+					{cold && source?.loadFull && (
 						<div className="mt-3 flex items-center justify-between gap-2" style={{ color: "var(--dsw-label-tertiary)" }}>
 							<span className="min-w-0" style={{ fontSize: 11.5 }}>{t.contextColdHint}</span>
-							<button
-								type="button"
-								className="btn-outline flex-none"
-								style={{ height: 24, padding: "0 10px", fontSize: 12 }}
-								disabled={counting}
+							<button type="button" className="btn-outline flex-none" style={{ height: 24, padding: "0 10px", fontSize: 12 }} disabled={counting}
 								onClick={() => {
 									setCounting(true);
-									// 启动失败（例如没配模型）就把按钮还回来；成功时等 context_breakdown 事件把冷标记去掉
 									void Promise.resolve(source.loadFull?.()).then((result) => {
 										if ((result as { success?: boolean } | undefined)?.success === false) setCounting(false);
 									}, () => setCounting(false));
-								}}
-							>
-								{counting ? t.contextCounting : t.contextCountNow}
-							</button>
+								}}>{counting ? t.contextCounting : t.contextCountNow}</button>
 						</div>
-					) : null}
+					)}
+					{model && window_ > 0 && (
+						<WindowEditor key={modelKey} model={model} value={window_} onSaved={(value) => setApplied({ key: modelKey, from: contextWindow ?? 0, value })} />
+					)}
 				</div>
 			)}
 		</div>
 	);
 }
 
-function SegmentRow({ label, tokens, color }: { label: string; tokens: number; color: string }) {
-	if (tokens <= 0) return null;
+async function postModels<T>(body: Record<string, unknown>): Promise<T> {
+	const response = await fetch("/api/models", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+	const payload = (await response.json().catch(() => null)) as { success?: boolean; data?: T; error?: string } | null;
+	if (!response.ok || !payload?.success) throw new Error(payload?.error || `request failed (${response.status})`);
+	return payload.data as T;
+}
+
+/**
+ * 弹窗底部的上下文窗口：平时显示精确值，「修改」后填数字保存。
+ * 不用滑块：模型的真实上限是 128000、200000 这类精确值，拖出来的近似值多一点上游就 400。
+ * 内置目录有原值就并排给出、填大了提醒；改的是该模型的全局配置，这一点写在输入框下面。
+ */
+function WindowEditor({ model, value, onSaved }: { model: { provider: string; id: string }; value: number; onSaved: (value: number) => void }) {
+	const { t } = useI18n();
+	const [editing, setEditing] = useState(false);
+	const [text, setText] = useState("");
+	/** undefined = 还在查（不显示上限提示，免得先闪一句「没有内置值」） */
+	const [builtin, setBuiltin] = useState<number | null | undefined>(undefined);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const infoSeq = useRef(0);
+	const parsed = parseCapacity(text);
+	const target = parsed !== undefined && !Number.isNaN(parsed) ? parsed : null;
+	const valid = target !== null;
+	const over = target !== null && typeof builtin === "number" && target > builtin;
+	const exact = (n: number) => n.toLocaleString("en-US");
+
+	const begin = () => {
+		setEditing(true);
+		setText(formatCapacity(value));
+		setError(null);
+		setBuiltin(undefined);
+		const seq = ++infoSeq.current;
+		void postModels<{ builtin: number | null }>({ action: "contextWindowInfo", providerId: model.provider, modelId: model.id }).then(
+			(info) => { if (seq === infoSeq.current) setBuiltin(info.builtin); },
+			() => { if (seq === infoSeq.current) setBuiltin(null); },
+		);
+	};
+	const cancel = () => {
+		infoSeq.current += 1;
+		setEditing(false);
+	};
+	const save = async () => {
+		if (target === null || saving) return;
+		setSaving(true);
+		setError(null);
+		try {
+			const info = await postModels<{ contextWindow: number }>({ action: "setContextWindow", providerId: model.provider, modelId: model.id, contextWindow: target });
+			onSaved(info.contextWindow);
+			setEditing(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	if (!editing) {
+		return (
+			<div className="hairline-t mt-3 flex items-center justify-between gap-2 pt-3" style={{ color: "var(--dsw-label-tertiary)" }}>
+				<span>{t.contextWindowLabel}</span>
+				<span className="flex items-center gap-2">
+					<span style={{ color: "var(--dsw-label-secondary)", fontFamily: "var(--font-mono)" }}>{exact(value)}</span>
+					<button type="button" className="btn-outline" style={{ height: 22, padding: "0 8px", fontSize: 11.5 }} onClick={begin}>{t.contextWindowEdit}</button>
+				</span>
+			</div>
+		);
+	}
 	return (
-		<div className="flex items-center justify-between gap-2">
-			<span className="flex items-center gap-1.5">
-				<span className="inline-block rounded-full" style={{ width: 7, height: 7, background: color }} />
-				{label}
-			</span>
-			<span>~{fmtTok(tokens)}</span>
+		<div className="hairline-t mt-3 pt-3" style={{ color: "var(--dsw-label-tertiary)" }}>
+			<div>{t.contextWindowLabel}</div>
+			<div className="mt-1.5 flex items-center gap-1.5">
+				<input
+					autoFocus
+					value={text}
+					onChange={(e) => setText(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							void save();
+						} else if (e.key === "Escape") {
+							e.preventDefault();
+							e.stopPropagation();
+							cancel();
+						}
+					}}
+					aria-label={t.contextWindowLabel}
+					aria-invalid={!valid}
+					spellCheck={false}
+					className="min-w-0 flex-1 rounded-md px-2"
+					style={{ height: 26, fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-primary)", background: "var(--dsw-hover)", border: `0.5px solid ${valid ? "var(--dsw-border-l2)" : "var(--dsw-danger)"}` }}
+				/>
+				<button type="button" className="btn-primary-white flex-none" style={{ height: 26, padding: "0 10px", fontSize: 12 }} disabled={!valid || saving} onClick={() => void save()}>
+					{saving ? t.saving : t.save}
+				</button>
+				<button type="button" className="btn-outline flex-none" style={{ height: 26, padding: "0 10px", fontSize: 12 }} disabled={saving} onClick={cancel}>{t.cancel}</button>
+			</div>
+			{typeof builtin === "number" && (
+				<div className="mt-1.5 flex items-center gap-1.5" style={{ fontSize: 11.5 }}>
+					<span>{t.contextWindowBuiltin.replace("{value}", exact(builtin))}</span>
+					{target !== builtin && (
+						<button type="button" className="underline" style={{ color: "var(--dsw-label-secondary)" }} onClick={() => setText(formatCapacity(builtin))}>{t.contextWindowUseBuiltin}</button>
+					)}
+				</div>
+			)}
+			{!valid ? (
+				<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}>{t.contextWindowInvalid}</div>
+			) : over ? (
+				<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-warn)" }}>{t.contextWindowOverBuiltin}</div>
+			) : builtin === null ? (
+				<div className="mt-1" style={{ fontSize: 11.5 }}>{t.contextWindowNoBuiltin}</div>
+			) : null}
+			<div className="mt-1" style={{ fontSize: 11.5 }}>{t.contextWindowScope}</div>
+			{error && <div className="mt-1" role="alert" style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}>{error}</div>}
 		</div>
 	);
 }
+
+function DataRow({ label, value, exact, color }: { label: string; value: string; exact?: string; color: string }) {
+	return <div className="flex items-center justify-between gap-2">
+		<span className="flex items-center gap-1.5"><span className="inline-block rounded-full" style={{ width: 7, height: 7, background: color }} />{label}</span>
+		<span title={exact}>{value}</span>
+	</div>;
+}

package/src/components/DrawerPanel.tsx

@@ -18,7 +18,7 @@ import type { GrowthApi } from "@/hooks/useGrowth";
 import { useI18n } from "@/i18n";
 import type { TreeNode } from "@/lib/growth-tree";
 
-/** 抽屉里的入口,顺序即顶部入口列表的显示顺序:项目 → 提示词 → Git 详情 → 会话导入 */
+/** 抽屉入口：项目 → 提示词 → Git 详情 → 会话导入（旁聊已独立成右侧面板，不再共用这一列）。 */
 export type DrawerSection = "project" | "prompts" | "git" | "import";
 
 export function DrawerPanel({

package/src/components/FileViewer.tsx

@@ -6,7 +6,7 @@
  * 文件页签：面包屑 + 模式（变更 / 内容 / 渲染）+ 折叠未改动 + 上一处 / 下一处 + 引用 / 编辑器打开。
  * 「变更」= 整文件行内 diff（FullDiff）；「内容」= 所选步的全文（被删文件显示删除前）；「渲染」= Markdown。
  */
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
@@ -46,6 +46,10 @@ function cachedJson<T>(url: string): Promise<T> {
 	return p;
 }
 
+/** 文件夹预览：一页目录条目（分页；后端已按 .gitignore 过滤） */
+interface DirEntry { name: string; kind: "dir" | "file"; size?: number }
+interface DirPage { dir: string; entries: DirEntry[]; nextOffset: number | null; truncated: boolean }
+
 interface Loaded {
 	key: string;
 	diff: DiffLine[] | null;
@@ -94,7 +98,7 @@ export function FileViewer({
 	onClose: () => void;
 	onSelectTab: (path: string | null) => void;
 	onCloseTab: (path: string) => void;
-	onOpen: (path: string, opts?: { from?: string; lazy?: boolean }) => void;
+	onOpen: (path: string, opts?: { from?: string; lazy?: boolean; kind?: "dir" | "file" }) => void;
 	onReference?: (path: string) => void;
 	onOpenEditor?: (path: string) => void;
 }) {
@@ -109,6 +113,8 @@ export function FileViewer({
 	const [treeFilter, setTreeFilter] = useState("");
 	const [reveal, setReveal] = useState<{ path: string; key: number } | null>(null);
 	const [loaded, setLoaded] = useState<Loaded | null>(null);
+	const [dirPage, setDirPage] = useState<(DirPage & { key: string }) | null>(null);
+	const [dirMore, setDirMore] = useState<DirEntry[]>([]);
 	const diffRef = useRef<FullDiffHandle>(null);
 	const rootRef = useRef<HTMLDivElement>(null);
 	const quickInputRef = useRef<HTMLInputElement>(null);
@@ -121,15 +127,56 @@ export function FileViewer({
 	// 切页签：模式按是否有改动自动选，用户手动切过才保留
 	useEffect(() => {
 		setModeTouched(false);
+		setDirFallback(null);
 	}, [state.active]);
 	useEffect(() => {
 		if (modeTouched || !activeTab) return;
 		setMode(change && !activeTab.lazy ? "diff" : isMarkdown ? "render" : "content");
 	}, [activeTab, change, isMarkdown, modeTouched]);
 
+	/** 目录兜底：文件读取报 400（不存在 / 不是文件）时探一下目录接口，成功就当文件夹显示 */
+	const [dirFallback, setDirFallback] = useState<string | null>(null);
+	const dirPath = activeTab?.kind === "dir" ? activeTab.path : dirFallback;
+	const isDir = Boolean(dirPath);
+	// 文件夹：列目录（分页，后端已按 .gitignore 过滤），不读文件内容
+	useEffect(() => {
+		if (!dirPath || !cwd || !activeTab) {
+			setDirPage(null);
+			setDirMore([]);
+			return;
+		}
+		// @src/ 这类带尾斜杠的引用：列目录时去掉
+		const path_ = dirPath.replace(/\/+$/, "");
+		const key = `dir|${path_}`;
+		let alive = true;
+		setDirMore([]);
+		void (async () => {
+			try {
+				const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(path_)}&offset=0`);
+				if (alive) setDirPage({ key, ...data });
+			} catch (error) {
+				if (alive) setDirPage({ key, dir: path_, entries: [], nextOffset: null, truncated: false, error: error instanceof Error ? error.message : t.viewerLoadFailed } as DirPage & { key: string; error?: string });
+			}
+		})();
+		return () => {
+			alive = false;
+		};
+	}, [activeTab, dirPath, cwd, t.viewerLoadFailed]);
+
+	/** 目录还有下一页时接着拉（大目录：node_modules 这种已被忽略，剩下的也不会太多） */
+	const loadMore = useCallback(async () => {
+		if (!activeTab || !cwd || !dirPage?.nextOffset) return;
+		try {
+			const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(activeTab.path)}&offset=${dirPage.nextOffset}`);
+			setDirPage({ key: `dir|${activeTab.path}`, ...data, entries: [...dirPage.entries, ...data.entries] });
+		} catch {
+			// 下一页失败就留在当前这页，用户可以再点
+		}
+	}, [activeTab, cwd, dirPage]);
+
 	// 取数据
 	useEffect(() => {
-		if (!activeTab) {
+		if (!activeTab || activeTab.kind === "dir") {
 			setLoaded(null);
 			return;
 		}
@@ -157,6 +204,15 @@ export function FileViewer({
 				done({ content: data.content, binary: data.binary, truncated: data.truncated, notice });
 			} catch (error) {
 				if ((error as { status?: number }).status !== 400) throw error;
+				// 400 有两种：文件不存在 / 路径其实是目录。探一下目录接口，能列出条目就当文件夹打开
+				try {
+					await requestJson<DirPage>(`/api/files?${q}&path=${encodeURIComponent(tab.path)}&offset=0`);
+					done({ notice: null });
+					setDirFallback(tab.path);
+					return;
+				} catch {
+					// 目录也列不出来：照旧报「文件不存在」
+				}
 				done({ notice: "missing" });
 			}
 		};
@@ -379,7 +435,7 @@ export function FileViewer({
 									{stepBadge}
 								</span>
 							)}
-							{!activeTab.lazy && (
+							{!activeTab.lazy && !isDir && (
 								<span className="pw-seg" role="radiogroup">
 									{(["diff", "content", ...(isMarkdown ? ["render" as const] : [])] as Mode[]).map((m) => (
 										<button
@@ -398,7 +454,7 @@ export function FileViewer({
 									))}
 								</span>
 							)}
-							{activeTab.lazy && isMarkdown && (
+							{!isDir && activeTab.lazy && isMarkdown && (
 								<span className="pw-seg" role="radiogroup">
 									{(["content", "render"] as Mode[]).map((m) => (
 										<button key={m} type="button" role="radio" aria-checked={mode === m} data-active={mode === m} onClick={() => { setModeTouched(true); setMode(m); }}>
@@ -407,7 +463,7 @@ export function FileViewer({
 									))}
 								</span>
 							)}
-							{isDiffMode && (
+							{isDiffMode && !isDir && (
 								<>
 									<button type="button" className="pw-chip" data-active={folded} onClick={() => setFolded((f) => !f)}>
 										{folded ? t.viewerFold : t.viewerUnfold}
@@ -439,7 +495,32 @@ export function FileViewer({
 							</div>
 						)}
 						{loaded?.truncated && <div className="pw-viewer-notice" data-kind="warn">{mode === "diff" ? t.viewerPatchTruncated : t.filePreviewTruncated}</div>}
-						{!loaded || loaded.key !== `${activeTab.path}|${mode}|${range?.from ?? ""}|${range?.to ?? ""}|${change?.status ?? ""}` ? (
+						{isDir ? (
+							<div className="min-h-0 flex-1 overflow-auto" data-testid="viewer-dir">
+								<div className="px-3 py-2" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+									{t.viewerDirHint.replace("{n}", String(dirPage?.entries.length ?? 0))}
+								</div>
+								{dirPage?.entries.map((entry) => (
+									<button
+										key={entry.name}
+										type="button"
+										className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-[var(--dsw-hover)]"
+										onClick={() => (entry.kind === "dir"
+											? onOpen(`${dirPath!.replace(/\/+$/, "")}/${entry.name}`, { kind: "dir", lazy: true })
+											: onOpen(`${dirPath!.replace(/\/+$/, "")}/${entry.name}`, { lazy: true }))}
+									>
+										<img className="pw-tree-icon" src={entry.kind === "dir" ? "/file-icons/folder-close.svg" : fileIconSrc(entry.name)} alt="" />
+										<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12.5, fontFamily: entry.kind === "dir" ? "inherit" : "var(--font-mono)" }}>{entry.name}</span>
+										{entry.kind === "file" && entry.size !== undefined && (
+											<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", fontVariantNumeric: "tabular-nums" }}>{entry.size} B</span>
+										)}
+									</button>
+								))}
+								{dirPage?.nextOffset ? (
+									<button type="button" className="pw-chip mx-3 my-2" onClick={() => void loadMore()}>{t.viewerDirMore}</button>
+								) : null}
+							</div>
+						) : !loaded || loaded.key !== `${activeTab.path}|${mode}|${range?.from ?? ""}|${range?.to ?? ""}|${change?.status ?? ""}` ? (
 							<div className="flex min-h-0 flex-1 items-center justify-center" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.panelLoading}</div>
 						) : loaded.error ? (
 							<div className="flex min-h-0 flex-1 items-center justify-center" style={{ fontSize: 12.5, color: "var(--dsw-danger)" }}>{loaded.error}</div>
@@ -480,7 +561,7 @@ export function FileViewer({
 							selectedPath={null}
 							onToggleDir={growth.toggleDir}
 							onExpandLazy={growth.expandLazy}
-							onOpenFile={(node: TreeNode) => onOpen(node.path, { from: node.from, lazy: node.lazy })}
+							onOpenFile={(node: TreeNode) => onOpen(node.path, { from: node.from, lazy: node.lazy, kind: node.kind })}
 							onReference={onReference}
 							onOpenEditor={onOpenEditor}
 							revealPath={reveal?.path ?? null}