@rexvane/piweb 0.3.20 → 0.3.22

package/src/components/ContextMeter.tsx

@@ -1,174 +1,255 @@
 "use client";
 
-/**
- * 上下文占用：
- * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与 13 类分段占用条
- * （mac 磁盘存储条式的多色分段，含 Free Space 段）。
- * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
- * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
- * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
- * 无对话时不渲染（由父组件经 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 }: {
 	percent: number | null;
 	tokens: number | null;
 	contextWindow: number | null;
-	/** 分段数据源：消息字符统计只在弹窗打开时执行（流式期间消息每 token 都变，不能常驻扫描） */
+	/** 当前会话的模型：有它才能在弹窗里改上下文窗口 */
+	model?: { provider: string; id: string } | null;
 	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;
+		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;
-		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;
+	const usageLabel = percent === null && !recomputed ? t.contextUnknown : `${fmtPercent(p)} ${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。
+	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;
+	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: "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);
 
 	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 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>
-
-					{/* 分段占用条（mac 磁盘存储条式多色分段，含 Free Space） */}
-					{usedSum > 0 && (
+					{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>
-							{segments.filter((s) => s.tokens > 0).map((s) => (
-								<span key={s.key} style={{ width: bar(s.tokens), background: s.color }} />
-							))}
-							{free > 0 && <span style={{ width: bar(free), background: "transparent" }} />}
+							<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)" }} />}
 						</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>
+					<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)" }}>
+						{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}
+								onClick={() => {
+									setCounting(true);
+									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>
+					)}
+					{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

@@ -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}