@rexvane/piweb 0.3.20 → 0.3.21

package/src/components/ChatWindow.tsx

@@ -28,6 +28,7 @@ import { DiffView, type DiffLine, parseUnifiedDiff } from "@/components/DiffView
 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 { useI18n } from "@/i18n";
 import type { ToolCardState } from "@/hooks/usePiWeb";
 import type { ContextResource, TrajEntry, TrajTokens, WebContent, WebMessage, WebStats } from "@/lib/types";
@@ -614,9 +615,13 @@ const ThinkStep = memo(function ThinkStep({ text, live, startedAt }: { text: str
 // ---------- 叙述：模型在工具之间说的话，作为阶段标题（基线对齐，主色） ----------
 
 const NarrationBlock = memo(function NarrationBlock({ text, live, error }: { text: string; live?: boolean; error?: boolean }) {
+	// 流过的这一段一直交给流式组件：live 结束后它先把还没放出来的字放完，再自己换成整段渲染。
+	// 一结束就换成 <Markdown>，打字机这类慢样式积压的字会一口吐出来。
+	const [streamed, setStreamed] = useState(Boolean(live));
+	if (live && !streamed) setStreamed(true);
 	return (
 		<div className="pw-narr" data-error={error || undefined}>
-			{live ? <StreamingMarkdown text={text} /> : <Markdown text={text} />}
+			{streamed ? <StreamingMarkdown text={text} live={Boolean(live)} /> : <Markdown text={text} />}
 		</div>
 	);
 });
@@ -1425,6 +1430,16 @@ export function ChatWindow({
 	const widthPreference = useRef<number | null>(null);
 	const widthDrag = useRef<{ side: "left" | "right"; origin: number; width: number; pointerId: number } | null>(null);
 	const stickToBottom = useRef(true);
+	/** 上一次滚动事件时的 scrollTop：比它小就是在往上走（用户翻看、大纲 / 搜索跳转） */
+	const lastScrollTop = useRef(0);
+	// 流式正文逐帧变高时据此决定要不要跟着贴底（见 chat/chat-scroll）
+	const chatScroll = useMemo<ChatScroll>(() => ({
+		shouldPin: () => stickToBottom.current,
+		pin: () => {
+			const node = scrollRef.current;
+			if (node) node.scrollTop = node.scrollHeight;
+		},
+	}), []);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;
@@ -1635,89 +1650,98 @@ export function ChatWindow({
 					}}
 				/>
 			))}
-			<div
-				ref={scrollRef}
-				className="min-h-0 flex-1 overflow-y-auto"
-				role="log"
-				aria-live="polite"
-				aria-relevant="additions"
-				onScroll={(event) => {
-					const node = event.currentTarget;
-					const atBottom = node.scrollHeight - node.scrollTop - node.clientHeight < 96;
-					stickToBottom.current = atBottom;
-					setAwayFromBottom(!atBottom);
-					if (atBottom) setUnseen(0);
-					scheduleUpgradeCheck();
-				}}
-			>
-				<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
-					{turns.map((turn, ti) => (
-						// 回合间 28px 的分隔挂在槽上：用户消息现在总是槽里的第一个子元素，它自己的 mt-7 会被 first:mt-0 吃掉
-						<div key={turn.key} data-turn-slot={ti} ref={slotRef(ti)} className="mt-7 first:mt-0">
-							{isNear(ti) ? (
-								<TurnBlock
-									turn={turn}
-									messages={messages}
-									tools={tools}
-									cwd={cwd}
-									isStreaming={isStreaming}
-									isLast={ti === turns.length - 1}
-									lastAssistantIndex={lastAssistantIndex}
-									contextFiles={turn.userIndex >= 0 && turn.userIndex === firstUser ? contextFiles : undefined}
-									retryNotice={retryNotice}
-									streamStartedAt={streamStartedAt}
-									runningTool={runningTool}
-									outputTokens={stats?.tokens.output}
-									workingMessage={workingMessage}
-									onFork={onFork}
-									onEditMessage={onEditMessage}
-									roundBadge={turn.userIndex >= 0 ? roundBadges?.get(messages[turn.userIndex].id ?? "") : undefined}
-									onShowRound={onShowRound}
-									onInspectTool={onOpenTrajectory}
-									onOpenFile={onOpenFile}
-								/>
-							) : (
-								<TurnLite turn={turn} messages={messages} />
-							)}
-						</div>
-					))}
-					{/* 还没有任何消息就已在流式（极少见）：单独给一条工作指示 */}
-					{isStreaming && streamStartedAt && turns.length === 0 && (
-						<div className="pw-turn">
-							<WorkingStep startedAt={streamStartedAt} outputTokens={stats?.tokens.output} workingMessage={workingMessage} hasLiveStep={Boolean(runningTool)} />
-						</div>
-					)}
-					{/* 重连提示：跟随消息流显示在最后一条输出下面 */}
-					{!connected && (
-						<div className="mt-3 flex justify-center">
-							<div
-								className="rounded-full px-3 py-1"
-								style={{ fontSize: "var(--piweb-chat-font-t)", color: "var(--dsw-label-caption)", border: "0.5px dashed var(--dsw-border-l3)" }}
-							>
-								{t.reconnecting}
+			<ChatScrollContext.Provider value={chatScroll}>
+				<div
+					ref={scrollRef}
+					className="min-h-0 flex-1 overflow-y-auto"
+					role="log"
+					aria-live="polite"
+					aria-relevant="additions"
+					onScroll={(event) => {
+						const node = event.currentTarget;
+						const distance = node.scrollHeight - node.scrollTop - node.clientHeight;
+						const atBottom = distance < 96;
+						// 往上走就立刻松开贴底，不等离底 96px：流式正文每帧都会贴一次底，
+						// 大纲 / 搜索的平滑跳转刚起步、还在 96px 以内时就会被拽回去。
+						// 已经在最底下（内容变短被浏览器夹回来）不算往上翻。
+						const movedUp = node.scrollTop < lastScrollTop.current - 1 && distance > 2;
+						lastScrollTop.current = node.scrollTop;
+						if (movedUp) stickToBottom.current = false;
+						else stickToBottom.current = atBottom;
+						setAwayFromBottom(!atBottom);
+						if (atBottom) setUnseen(0);
+						scheduleUpgradeCheck();
+					}}
+				>
+					<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
+						{turns.map((turn, ti) => (
+							// 回合间 28px 的分隔挂在槽上：用户消息现在总是槽里的第一个子元素，它自己的 mt-7 会被 first:mt-0 吃掉
+							<div key={turn.key} data-turn-slot={ti} ref={slotRef(ti)} className="mt-7 first:mt-0">
+								{isNear(ti) ? (
+									<TurnBlock
+										turn={turn}
+										messages={messages}
+										tools={tools}
+										cwd={cwd}
+										isStreaming={isStreaming}
+										isLast={ti === turns.length - 1}
+										lastAssistantIndex={lastAssistantIndex}
+										contextFiles={turn.userIndex >= 0 && turn.userIndex === firstUser ? contextFiles : undefined}
+										retryNotice={retryNotice}
+										streamStartedAt={streamStartedAt}
+										runningTool={runningTool}
+										outputTokens={stats?.tokens.output}
+										workingMessage={workingMessage}
+										onFork={onFork}
+										onEditMessage={onEditMessage}
+										roundBadge={turn.userIndex >= 0 ? roundBadges?.get(messages[turn.userIndex].id ?? "") : undefined}
+										onShowRound={onShowRound}
+										onInspectTool={onOpenTrajectory}
+										onOpenFile={onOpenFile}
+									/>
+								) : (
+									<TurnLite turn={turn} messages={messages} />
+								)}
 							</div>
-						</div>
-					)}
-					{compaction && (
-						<div className="mt-3 flex justify-center" role="status">
-							<div className="flex items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-hover)", color: "var(--dsw-label-secondary)" }}>
-								<span>{compaction.phase === "start" ? t.compacting : compaction.errorMessage ? `${t.compactionFailed}: ${compaction.errorMessage}` : t.compactionComplete}</span>
-								{compaction.phase === "end" && <button type="button" onClick={onClearCompaction} aria-label={t.close} className="icon-btn">×</button>}
+						))}
+						{/* 还没有任何消息就已在流式（极少见）：单独给一条工作指示 */}
+						{isStreaming && streamStartedAt && turns.length === 0 && (
+							<div className="pw-turn">
+								<WorkingStep startedAt={streamStartedAt} outputTokens={stats?.tokens.output} workingMessage={workingMessage} hasLiveStep={Boolean(runningTool)} />
 							</div>
-						</div>
-					)}
-					{error && (
-						<button
-							className="mt-3 rounded-xl px-3 py-2 text-left"
-							style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-danger)", color: "white" }}
-							onClick={onClearError}
-							role="alert"
-						>
-							{error}
-						</button>
-					)}
+						)}
+						{/* 重连提示：跟随消息流显示在最后一条输出下面 */}
+						{!connected && (
+							<div className="mt-3 flex justify-center">
+								<div
+									className="rounded-full px-3 py-1"
+									style={{ fontSize: "var(--piweb-chat-font-t)", color: "var(--dsw-label-caption)", border: "0.5px dashed var(--dsw-border-l3)" }}
+								>
+									{t.reconnecting}
+								</div>
+							</div>
+						)}
+						{compaction && (
+							<div className="mt-3 flex justify-center" role="status">
+								<div className="flex items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-hover)", color: "var(--dsw-label-secondary)" }}>
+									<span>{compaction.phase === "start" ? t.compacting : compaction.errorMessage ? `${t.compactionFailed}: ${compaction.errorMessage}` : t.compactionComplete}</span>
+									{compaction.phase === "end" && <button type="button" onClick={onClearCompaction} aria-label={t.close} className="icon-btn">×</button>}
+								</div>
+							</div>
+						)}
+						{error && (
+							<button
+								className="mt-3 rounded-xl px-3 py-2 text-left"
+								style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-danger)", color: "white" }}
+								onClick={onClearError}
+								role="alert"
+							>
+								{error}
+							</button>
+						)}
+					</div>
 				</div>
-			</div>
+			</ChatScrollContext.Provider>
 			{/* 右侧大纲导航：从助手回答的标题和用户消息生成，随滚动高亮，悬停展开 */}
 			<OutlineRail scrollRef={scrollRef} revision={`${messages.length}:${nearTurns.size}:${isStreaming ? 1 : 0}`} />
 			{/* 脱离底部时的“回到底部”浮钮：与输入框卡片同轴，挂在右上角顶部，图标带新内容角标 */}

package/src/components/ContextMeter.tsx

@@ -7,6 +7,8 @@
  * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
  * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
  * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
+ * 冷会话（只浏览历史、agent 没启动）拿不到组装后的 System Prompt 和工具定义：
+ * 其余分项照常显示，另给「现在统计」按需启动会话，分项随后经 context_breakdown 事件刷新。
  * 无对话时不渲染（由父组件经 contextVisible 控制）。
  */
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -40,11 +42,20 @@ export function ContextMeter({
 		systemChars: number;
 		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown }> }[];
 		breakdown?: ContextBreakdown;
+		/** 冷会话里点「现在统计」：启动会话（prepare），System Prompt 与工具定义才算得出来 */
+		loadFull?: () => Promise<unknown> | unknown;
 	};
 }) {
 	const [open, setOpen] = useState(false);
+	const [counting, setCounting] = useState(false);
 	const ref = useRef<HTMLDivElement>(null);
 	const { t } = useI18n();
+	const cold = Boolean(source?.breakdown?.cold);
+
+	// 新分项到了（不再是冷的）就收起「统计中」
+	useEffect(() => {
+		if (!cold) setCounting(false);
+	}, [cold]);
 
 	useEffect(() => {
 		if (!open) return;
@@ -154,6 +165,26 @@ export function ContextMeter({
 						))}
 						{window_ > 0 && <SegmentRow label={t.contextFreeSpace} tokens={free} color="var(--dsw-selector)" />}
 					</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}
+								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>
+						</div>
+					) : null}
 				</div>
 			)}
 		</div>

package/src/components/DrawerPanel.tsx

@@ -87,22 +87,10 @@ export function DrawerPanel({
 
 	return (
 		<div className="flex h-full min-h-0 flex-col" data-testid="drawer-panel">
-			{/* 头部:与 PromptPanel / ProjectPanel 同一套排布。
-			    提示词 / Git 两个面板自带同款标题行(含关闭),这里就不再叠一层;
-			    「导入会话」段落没有标题行,抽屉自己出这行,并关掉整个抽屉。 */}
-			{section === "import" && (
-				<div className="hairline-b flex items-center gap-1.5 px-3 pb-2 pt-3">
-					<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }}>
-						{t.drawerPanel}
-					</span>
-					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} aria-label={t.close} onClick={onClose}>
-						<IconCloseOutline14 size={13} />
-					</button>
-				</div>
-			)}
-
 			{/* 入口列表：横向一排图标，不显示文字（名字放 title / aria-label）。
-			    激活态复用设置页那套下划线（.settings-tab-underline），不自创样式。 */}
+			    激活态复用设置页那套下划线（.settings-tab-underline），不自创样式。
+			    悬停底色交给 CSS（.drawer-tab:hover）：以前用 onMouseEnter/Leave 直接改 style，
+			    悬停时点下去这一项变成选中，移开时「选中就不复原」，底色就永远留在上面。 */}
 			<div className="hairline-b flex items-stretch gap-1 px-2" role="tablist" aria-label={t.drawerSections}>
 				{entries.map((entry) => (
 					<button
@@ -110,16 +98,10 @@ export function DrawerPanel({
 						type="button"
 						role="tab"
 						aria-selected={section === entry.id}
-						className="settings-tab-underline flex flex-1 items-center justify-center rounded-t-lg"
+						className="settings-tab-underline drawer-tab flex flex-1 items-center justify-center rounded-t-lg"
 						data-active={section === entry.id}
 						title={entry.label}
 						aria-label={entry.label}
-						onMouseEnter={(e) => {
-							if (section !== entry.id) e.currentTarget.style.background = "var(--dsw-hover)";
-						}}
-						onMouseLeave={(e) => {
-							if (section !== entry.id) e.currentTarget.style.background = "transparent";
-						}}
 						onClick={() => onSectionChange(entry.id)}
 						data-testid={`drawer-entry-${entry.id}`}
 					>
@@ -128,12 +110,23 @@ export function DrawerPanel({
 				))}
 			</div>
 
-			{/* 所选入口的内容:项目 / 提示词 / Git 三个面板自带标题行与滚动,导入段落沿用抽屉的留白 */}
+			{/* 所选入口的内容:项目 / 提示词 / Git 三个面板自带标题行与滚动。
+			    「导入会话」段落没有标题行,这里补一行,排布照抄 PromptPanel(同样在入口列表下面、关掉整个抽屉) */}
 			<div className="flex min-h-0 flex-1 flex-col">
 				{section === "import" ? (
-					<div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
-						<SessionImportSection cwd={cwd} />
-					</div>
+					<>
+						<div className="hairline-b flex items-center gap-2 px-4 py-2.5">
+							<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13.5, fontWeight: 600 }}>
+								{t.importSessions}
+							</span>
+							<button type="button" className="icon-btn" style={{ width: 26, height: 26 }} title={t.close} aria-label={t.close} onClick={onClose}>
+								<IconCloseOutline14 size={14} />
+							</button>
+						</div>
+						<div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+							<SessionImportSection cwd={cwd} />
+						</div>
+					</>
 				) : section === "project" ? (
 					<ProjectPanel
 						growth={growth}

package/src/components/ExtensionUI.tsx

@@ -152,9 +152,12 @@ export function ExtensionDialogHost({
 export function ExtensionNotices({
 	notices,
 	onDismiss,
+	children,
 }: {
 	notices: { id: string; message: string; type: "info" | "warning" | "error"; ts: number }[];
 	onDismiss: (id: string) => void;
+	/** 同一摞里的其它常驻提示（如更新提示条），排在扩展通知上面，免得两处浮层叠在一起 */
+	children?: React.ReactNode;
 }) {
 	// 通知 6 秒后自动消失
 	useEffect(() => {
@@ -162,10 +165,13 @@ export function ExtensionNotices({
 		const timers = notices.map((n) => setTimeout(() => onDismiss(n.id), Math.max(500, 6000 - (Date.now() - n.ts))));
 		return () => timers.forEach(clearTimeout);
 	}, [notices, onDismiss]);
-	if (!notices.length) return null;
+	// 有 children 时容器常驻：children 自己决定显示与否，容器里没东西时什么也看不见（pointer-events-none）
+	if (!notices.length && !children) return null;
 	const color = (type: string) => (type === "error" ? "var(--dsw-danger)" : type === "warning" ? "var(--dsw-warn)" : "var(--dsw-accent)");
+	// 手机上输入卡占满底部，放底部会盖住发送按钮：窄屏改挂到顶栏下面
 	return (
-		<div className="pointer-events-none fixed bottom-24 right-4 z-[110] flex w-[min(92vw,360px)] flex-col gap-2">
+		<div className="pointer-events-none fixed right-4 top-16 z-[110] flex w-[min(92vw,360px)] flex-col gap-2 sm:top-auto sm:bottom-24">
+			{children}
 			{notices.map((n) => (
 				<button
 					key={n.id}