@rexvane/piweb 0.3.22 → 0.3.23

package/src/components/AppShell.tsx

@@ -13,6 +13,9 @@ import { UpdateNotice } from "@/components/update/UpdateNotice";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
 import type { DrawerSection } from "@/components/DrawerPanel";
+import { SideChatPanel } from "@/components/side-chat/SideChatPanel";
+import { SideChatIcon } from "@/components/side-chat/icons";
+import { preserveChatReadingPosition } from "@/components/chat/reading-anchor";
 import { DirectoryPicker } from "@/components/DirectoryPicker";
 
 // 首屏不需要的重组件按需加载（设置面板含供应商配置与代码高亮，轨迹/文件只在打开时才用）
@@ -157,10 +160,20 @@ export function AppShell() {
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [selected, setSelected] = useState<TrajEntry | null>(null);
 	/** 抽屉当前入口(由这里持有:轨迹详情关掉后要回到同一个入口) */
-	// 默认进「项目」:项目栏降级成抽屉入口后,它是最常用的那一个
+	/** 抽屉入口保存在浏览器；新用户先看到旁聊。 */
 	const [drawerSection, setDrawerSection] = useState<DrawerSection>("project");
+	const chooseDrawerSection = useCallback((section: DrawerSection) => {
+		setDrawerSection(section);
+		localStorage.setItem("piweb.drawerSection", section);
+		setSideChatOpen(false);
+	}, []);
 	/** 右侧抽屉(最右一列):入口列表 + 内容 */
 	const [drawerOpen, setDrawerOpen] = useState(false);
+	/**
+	 * 右侧旁聊面板：和抽屉共用最右一列，所以两者互斥（开一个就关另一个）。
+	 * 旁聊不再作为抽屉的一个入口 —— 它是独立面板，入口是会话头部那个图标按钮。
+	 */
+	const [sideChatOpen, setSideChatOpen] = useState(false);
 	/** 打开抽屉时「落到最新轮」只跳过这一次(点 badge 指定轮次时用) */
 	const skipLatestOnce = useRef(false);
 	/** useGrowth 的"落到最新轮":它在 AppShell 里、不随抽屉卸载,所以必须显式调用 */
@@ -177,6 +190,8 @@ export function AppShell() {
 		setRightWidth(restoreRightWidth());
 		setSidebarCollapsed(localStorage.getItem("piweb.sidebarCollapsed") === "1");
 		setDrawerOpen(localStorage.getItem("piweb.drawerOpen") === "1");
+		const section = localStorage.getItem("piweb.drawerSection");
+		if (["project", "prompts", "git", "import"].includes(section ?? "")) setDrawerSection(section as DrawerSection);
 	}, []);
 	/** 新会话时加载用户之前的选择，或使用系统建议（第一个认证的） */
 	useEffect(() => {
@@ -203,20 +218,23 @@ export function AppShell() {
 	}, [heroCwd]);
 	/** 右侧抽屉开关(项目栏降级成抽屉入口后,它是"最右一列是否打开"唯一的开关) */
 	const toggleDrawer = useCallback((next?: boolean) => {
+		preserveChatReadingPosition();
 		setDrawerOpen((cur) => {
 			const v = next ?? !cur;
 			localStorage.setItem("piweb.drawerOpen", v ? "1" : "0");
+			// 最右一列只有一个：开抽屉就收起旁聊
+			if (v) setSideChatOpen(false);
 			return v;
 		});
 	}, []);
 	/** 切到某个抽屉入口并打开抽屉(顶栏图标 / 点 badge 都用这条) */
 	const openDrawerSection = useCallback(
 		(section: DrawerSection) => {
-			setDrawerSection(section);
+			chooseDrawerSection(section);
 			setSelected(null);
 			toggleDrawer(true);
 		},
-		[toggleDrawer],
+		[toggleDrawer, chooseDrawerSection],
 	);
 	// Ctrl/⌘+Shift+E：打开抽屉并切到「项目」入口；已经停在该入口时再按收起。
 	// 轨迹详情占着这一列时，这个快捷键把抽屉叫回来（而不是切到轨迹详情）。
@@ -351,12 +369,14 @@ export function AppShell() {
 				if (!frame) {
 					frame = requestAnimationFrame(() => {
 						frame = 0;
+						preserveChatReadingPosition();
 						commit(latest);
 					});
 				}
 			};
 			const up = () => {
 				if (frame) cancelAnimationFrame(frame);
+				preserveChatReadingPosition();
 				commit(latest);
 				persist(side === "sidebar" ? "piweb.sidebarW" : "piweb.drawerW", latest);
 				window.removeEventListener("pointermove", move);
@@ -372,6 +392,7 @@ export function AppShell() {
 	);
 
 	const toggleSidebar = () => {
+		preserveChatReadingPosition();
 		const next = !sidebarCollapsed;
 		setSidebarCollapsed(next);
 		localStorage.setItem("piweb.sidebarCollapsed", next ? "1" : "0");
@@ -386,6 +407,7 @@ export function AppShell() {
 	const openToolTrajectory = useCallback((toolCallId: string) => {
 		const entry = trajectoryRef.current.find((item) => item.toolCallId === toolCallId);
 		if (!entry) return;
+		preserveChatReadingPosition();
 		// 最右一列与抽屉互斥:选中轨迹详情即接管这一列,关掉后回落回抽屉的当前入口
 		setSelected(entry);
 	}, []);
@@ -673,7 +695,7 @@ export function AppShell() {
 		watchRounds: Boolean(currentPath),
 		connected: state.connected,
 	});
-	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy }), [viewer]);
+	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy, kind: node.kind }), [viewer]);
 	// 打开面板时落在最新轮:useGrowth 活在 AppShell 里、不随抽屉卸载,state 不会自己回到最新,
 	// 所以每次从「关」变「开」(或换了工作区)都显式选一次最新轮。
 	// 新轮次出现时不再自动跳——用户打开面板后停在哪一轮就是哪一轮。
@@ -704,11 +726,11 @@ export function AppShell() {
 	const growthSelect = growth.select;
 	const showRound = useCallback((commit: string) => {
 		skipLatestOnce.current = true;
-		setDrawerSection("project");
+		chooseDrawerSection("project");
 		setSelected(null);
 		toggleDrawer(true);
 		growthSelect(commit);
-	}, [toggleDrawer, growthSelect]);
+	}, [toggleDrawer, growthSelect, chooseDrawerSection]);
 	const jumpToChat = useCallback((messageId: string) => {
 		requestAnimationFrame(() => {
 			const node = document.querySelector<HTMLElement>(`[data-role="user"][data-message-id="${CSS.escape(messageId)}"]`);
@@ -727,7 +749,7 @@ export function AppShell() {
 	// 抽屉里的一个入口,不再单独占一列,所以是 3 列而不是 4 列。
 	// JSX 里各列的渲染顺序必须与这里严格一致,否则网格会把内容摆错列。
 	// 最右一列只有一条宽度(rightWidth):详情栏与抽屉合并后不再各占一列。
-	const rightColumnVisible = Boolean(selected) || drawerOpen;
+	const rightColumnVisible = Boolean(selected) || drawerOpen || sideChatOpen;
 	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px minmax(0,1fr) ${
 		rightColumnVisible ? `${rightWidth}px` : "0px"}`;
 
@@ -748,11 +770,21 @@ export function AppShell() {
 		>
 			{selected ? (
 				<TrajInspector entry={selected} onClose={() => setSelected(null)} />
+			) : sideChatOpen ? (
+				<SideChatPanel
+					sessionId={currentId}
+					ready={Boolean(snapshot)}
+					mainModel={snapshot?.model}
+					models={modelChoices}
+					providerNames={providerNames}
+					authByProvider={authByProvider}
+					onClose={() => setSideChatOpen(false)}
+				/>
 			) : (
 				<DrawerPanel
 					cwd={panelCwd}
 					section={drawerSection}
-					onSectionChange={setDrawerSection}
+					onSectionChange={chooseDrawerSection}
 					onClose={() => toggleDrawer(false)}
 					sessionId={currentId}
 					promptRefreshKey={currentId}
@@ -907,10 +939,28 @@ export function AppShell() {
 									<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14.5, fontWeight: 600 }}>
 										{title}
 									</span>
-									{/* 项目与提示词原来是两个平级图标,现已合并进右侧抽屉:
-									    抽屉顶部那条横向图标栏就是它们的新位置,顶栏只留一个抽屉开关。
-									    Ctrl/⌘+Shift+E 仍然直达项目入口(见快捷键绑定)。 */}
-									{/* 右侧抽屉:项目 / 提示词 / Git 详情 / 会话导入 四个入口都在里面 */}
+									{/* 旁聊直达按钮；旁聊与其他入口共用右侧抽屉。 */}
+									<button
+										type="button"
+										className="icon-btn"
+										style={{ width: 26, height: 26, color: sideChatOpen ? "var(--dsw-accent)" : "var(--dsw-label-secondary)" }}
+										aria-label={t.sideChat}
+										title={t.sideChat}
+										aria-pressed={sideChatOpen}
+										data-testid="side-chat-toggle"
+										onClick={() => {
+											preserveChatReadingPosition();
+											setSelected(null);
+											setSideChatOpen((open) => {
+												// 最右一列只有一个：开旁聊就收起抽屉
+												if (!open) toggleDrawer(false);
+												return !open;
+											});
+										}}
+									>
+										<SideChatIcon size={16} />
+									</button>
+									{/* 右侧抽屉的入口与开关 */}
 									<button
 										type="button"
 										className="icon-btn"
@@ -1065,7 +1115,7 @@ export function AppShell() {
 			{/* 窄屏最右一列:贴右边滑出(轨迹详情与抽屉共用,遮罩关闭回到对话) */}
 			{isNarrow && rightColumnVisible && (
 				<>
-					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : toggleDrawer(false))} aria-label={t.close} />
+					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : sideChatOpen ? setSideChatOpen(false) : toggleDrawer(false))} aria-label={t.close} />
 					{rightColumn}
 				</>
 			)}

package/src/components/ChatInput.tsx

@@ -159,6 +159,8 @@ export function ChatInput({
 	const [dragActive, setDragActive] = useState(false);
 	/** 引用 chip 超过 COLLAPSE_AT 就先折叠：手机上折行会把输入框顶掉（图片的折叠在 ComposerImages 里） */
 	const [refsExpanded, setRefsExpanded] = useState(false);
+	/** 上传文件超过 4 个时的展开状态（与引用同一套折叠规则） */
+	const [uploadsExpanded, setUploadsExpanded] = useState(false);
 	const dragDepth = useRef(0);
 	const [modelOpen, setModelOpen] = useState(false);
 	const [cmdIdx, setCmdIdx] = useState(0);
@@ -624,33 +626,34 @@ export function ChatInput({
 				</div>
 			)}
 
+			{/*
+			 * 附件轨（图片 / 引用 / 上传文件）：绝对定位浮在输入卡上方，**不占布局高度** ——
+			 * 输入框位置不动，多出来的附件直接盖住后面的聊天记录（用户要的就是这个）。
+			 * 外层 pointer-events-none，只有附件本身接收点击，免得挡住聊天区的交互。
+			 */}
+			<div className="pointer-events-none absolute inset-x-0 bottom-full z-20 flex flex-col gap-1.5 pb-2" data-testid="composer-attachments">
 			{/* 附件轨：图片（超过 4 张折叠成牌堆，展开沿弧线扇开；点开可放大、切换、删除） */}
 			{images.length > 0 && (
 				<ComposerImages
 					images={images}
 					disabled={sendBusy}
 					onRemove={(index) => changeDraft((previous) => ({ ...previous, images: previous.images.filter((_, at) => at !== index) }))}
+					onClear={() => changeDraft((previous) => ({ ...previous, images: [] }))}
 				/>
 			)}
 
 			{/* 路径引用(项目结构图/文件面板的「引用到输入框」):独立于正文,发送时拼成 @路径 */}
 			{references.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-1.5 px-1" data-testid="composer-references">
-					{(refsExpanded ? references : references.slice(0, COLLAPSE_AT)).map((path) => {
+				<div className="pointer-events-auto flex flex-wrap gap-1 px-1" data-testid="composer-references">
+					{(refsExpanded ? references : references.slice(0, COLLAPSE_AT)).map((path, i) => {
 						const chip = referenceChipOf(path);
 						return (
 							<span
 								key={path}
-								className="flex items-center gap-1 rounded-md px-2 py-1"
-								style={{
-									maxWidth: 260,
-									fontSize: 12,
-									fontFamily: "var(--font-mono)",
-									color: "var(--dsw-label-secondary)",
-									background: "var(--dsw-selector)",
-									border: "0.5px solid var(--dsw-border-l3)",
-								}}
+								className="pw-ref-chip group/ref"
 								title={path}
+								/* 与图片卡组同一套时序：从左往右错开浮上来，收起反向；不旋转（带文字转着读着累） */
+								style={{ animationDelay: `${Math.min(i * 14, 140)}ms` }}
 							>
 								{chip.dir ? (
 									<IconFolderClose16 size={12} style={{ flex: "none", color: "var(--dsw-warn)" }} />
@@ -660,8 +663,7 @@ export function ChatInput({
 								<span className="truncate">{chip.text}</span>
 								<button
 									type="button"
-									className="flex h-4 w-4 flex-none items-center justify-center rounded-full text-[10px]"
-									style={{ color: "var(--dsw-label-caption)" }}
+									className="pw-ref-close"
 									disabled={sendBusy}
 									onClick={() => changeDraft((previous) => ({ ...previous, references: (previous.references ?? []).filter((p) => p !== path) }))}
 									aria-label={`${t.delete} ${path}`}
@@ -679,33 +681,35 @@ export function ChatInput({
 				</div>
 			)}
 
-			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用） */}
+			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用）；超过 4 个折叠 */}
 			{uploads.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-2 px-1">
-					{uploads.map((f, i) => (
-						<div
-							key={f.path}
-							className="flex items-center gap-2 rounded-lg px-2.5 py-1.5"
-							style={{ border: "0.5px solid var(--dsw-border-l2)", background: "var(--dsw-hover)" }}
-							title={f.path}
-						>
-							<IconFileOutline16 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
-							<span className="max-w-[180px] truncate" style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)" }}>{f.name}</span>
-							<span style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtUploadSize(f.size)}</span>
+				<div className="pointer-events-auto flex flex-wrap items-center gap-1 px-1" data-testid="composer-uploads">
+					{(uploadsExpanded ? uploads : uploads.slice(0, COLLAPSE_AT)).map((f, i) => (
+						<span key={f.path} className="pw-ref-chip group/ref" title={f.path}>
+							<IconFileOutline16 size={12} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
+							<span className="max-w-[180px] truncate">{f.name}</span>
+							<span style={{ flex: "none", fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtUploadSize(f.size)}</span>
 							<button
-								className="flex h-5 w-5 items-center justify-center rounded-full text-[10px]"
-								style={{ color: "var(--dsw-label-caption)" }}
+								type="button"
+								className="pw-ref-close"
 								disabled={sendBusy}
 								onClick={() => changeDraft((previous) => ({ ...previous, uploads: previous.uploads.filter((_, index) => index !== i) }))}
-								aria-label="remove"
+								aria-label={`${t.delete} ${f.name}`}
 							>
 								✕
 							</button>
-						</div>
+						</span>
 					))}
+					{uploads.length > COLLAPSE_AT ? (
+						<button type="button" className="pw-chip" data-testid="uploads-toggle" onClick={() => setUploadsExpanded((open) => !open)}>
+							{uploadsExpanded ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(uploads.length - COLLAPSE_AT))}
+						</button>
+					) : null}
 				</div>
 			)}
 
+			</div>
+
 			{/* 卡片（玻璃态）—— 拖放由 document 级监听统一接管 */}
 			<div
 				className="relative w-full"

package/src/components/ChatWindow.tsx

@@ -29,6 +29,7 @@ import { languageForPath } from "@/lib/highlight";
 import { copyText } from "@/lib/clipboard";
 import { OutlineRail } from "@/components/OutlineRail";
 import { ChatScrollContext, type ChatScroll } from "@/components/chat/chat-scroll";
+import { useChatReadingAnchor } from "@/components/chat/reading-anchor";
 import { useI18n } from "@/i18n";
 import { fmtDuration, fmtPercent, fmtThroughput, fmtTokens } from "@/lib/format";
 import type { ToolCardState } from "@/hooks/usePiWeb";
@@ -1257,15 +1258,12 @@ export function SessionStatsBar({
 			.replace("{steps}", String(stats.assistantMessages)),
 	];
 	const durations: string[] = [];
-	const coverage = (n: number | undefined, total: number) => n !== undefined && n < total
-		? ` (${t.statsTimedCoverage.replace("{n}", String(n)).replace("{total}", String(total))})` : "";
-	if (stats.llmMs > 0) durations.push(`LLM ${fmtDuration(stats.llmMs)}${coverage(stats.llmTimedSteps, stats.assistantMessages)}`);
-	if (stats.toolMs > 0) durations.push(`${t.toolCalls} ${fmtDuration(stats.toolMs)}${coverage(stats.toolTimedCalls, stats.toolCalls)}`);
+	if (stats.llmMs > 0) durations.push(`LLM ${fmtDuration(stats.llmMs)}`);
+	if (stats.toolMs > 0) durations.push(`${t.toolCalls} ${fmtDuration(stats.toolMs)}`);
 	if (durations.length) groups.push(durations.join(" · "));
 	const speeds: string[] = [];
-	const timedLabel = (steps: number) => ` (${t.statsMeasuredSteps.replace("{n}", String(steps))})`;
-	if (stats.ttftSteps > 0) speeds.push(`${t.ttftAverage} ${fmtDuration(stats.ttftMs / stats.ttftSteps)}${timedLabel(stats.ttftSteps)}`);
-	if (stats.decodeMs > 0) speeds.push(`${fmtThroughput(stats.decodeTokens / (stats.decodeMs / 1000))} tok/s${timedLabel(stats.decodeSteps ?? stats.ttftSteps)}`);
+	if (stats.ttftSteps > 0) speeds.push(`${t.ttftAverage} ${fmtDuration(stats.ttftMs / stats.ttftSteps)}`);
+	if (stats.decodeMs > 0) speeds.push(`${fmtThroughput(stats.decodeTokens / (stats.decodeMs / 1000))} tok/s`);
 	if (speeds.length) groups.push(speeds.join(" · "));
 	const billedInput = stats.tokens.input + stats.tokens.cacheRead + stats.tokens.cacheWrite;
 	if (billedInput > 0 || stats.tokens.output > 0) {
@@ -1431,6 +1429,7 @@ export function ChatWindow({
 			if (node) node.scrollTop = node.scrollHeight;
 		},
 	}), []);
+	useChatReadingAnchor(rootRef, scrollRef, chatScroll.shouldPin);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;

package/src/components/ContextMeter.tsx

@@ -8,12 +8,14 @@ import { formatCapacity, parseCapacity } from "@/lib/model-draft";
 import { classifyMessageChars } from "@/lib/process-format";
 import type { ContextBreakdown, TrajTokens } from "@/lib/types";
 
-export function ContextMeter({ percent, tokens, contextWindow, model, source }: {
+export function ContextMeter({ percent, tokens, contextWindow, model, source, label }: {
 	percent: number | null;
 	tokens: number | null;
 	contextWindow: number | null;
 	/** 当前会话的模型：有它才能在弹窗里改上下文窗口 */
 	model?: { provider: string; id: string } | null;
+	/** 覆盖「上下文估算」这个措辞：真实用量（如旁聊）不该叫估算 */
+	label?: string;
 	source?: {
 		systemChars: number;
 		messages: Array<{ role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: TrajTokens; stopReason?: string }>;
@@ -55,18 +57,25 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source }:
 	const window_ = override ?? contextWindow ?? 0;
 	const recomputed = override !== null && known;
 	const p = recomputed ? used / override * 100 : percent ?? 0;
-	const usageLabel = percent === null && !recomputed ? t.contextUnknown : `${fmtPercent(p)} ${t.contextEstimated}`;
+	/** 圆环与悬停提示仍用 SDK 估算（那是「占窗口多少」），弹窗正文只留 API 出来的真实数字 */
+	const usageLabel = percent === null && !recomputed ? t.contextUnknown : `${fmtPercent(p)} ${label ?? t.contextEstimated}`;
 	const r = 5.5;
 	const circumference = 2 * Math.PI * r;
 	const reserved = Math.max(0, source?.breakdown?.autoCompactBuffer ?? 0);
-	// 超过窗口时预留不再画到窗口外；未知用量不能将整扇窗口显示为 Free Space。
-	const visibleReserved = known && window_ > 0 ? Math.min(reserved, Math.max(0, window_ - used)) : 0;
-	const free = known && window_ > 0 ? Math.max(0, window_ - used - reserved) : null;
+	/**
+	 * 进度条与 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)" },
@@ -76,6 +85,18 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source }:
 		{ 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">
@@ -88,24 +109,22 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source }:
 			</button>
 			{open && (
 				<div className="popover absolute bottom-9 right-0 z-50 w-72 p-4" style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}>
-					<div className="font-medium" style={{ color: "var(--dsw-label-primary)" }}>{usageLabel}</div>
-					<div className="mt-1" style={{ color: "var(--dsw-label-tertiary)" }}>
-						{known ? `~${fmtTokens(used)}` : "—"} / {window_ > 0 ? fmtTokens(window_) : "—"} tok
-					</div>
 					{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>}
-					{known && window_ > 0 && (
-						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} aria-hidden>
-							<span className="flex-none" style={{ width: `${Math.min(100, used / window_ * 100)}%`, background: "var(--dsw-accent)" }} />
-							{visibleReserved > 0 && <span className="flex-none" style={{ width: `${visibleReserved / window_ * 100}%`, background: "var(--dsw-border-l3)" }} />}
+					{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 }} />
+							))}
+							{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)" }}>
 						{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>
-					<div className="mt-3 font-medium">{t.contextCharacterBreakdown}</div>
-					<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-tertiary)" }}>{t.contextCharacterHint}</div>
-					<div className="mt-2 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
+					{/* 进度条的图例：颜色跟上面的分段一一对应，数字是真实字符数 */}
+					<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 && (

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}