@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/CustomSelect.module.css

@@ -0,0 +1,142 @@
+.wrap {
+	position: relative;
+	display: inline-block;
+}
+
+.trigger {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 6px;
+	border: 0.5px solid var(--dsw-border-l2);
+	background: var(--dsw-glass-input);
+	color: var(--dsw-label-primary);
+	cursor: pointer;
+	text-align: left;
+	user-select: none;
+	transition: border-color 0.18s var(--isx-ease), box-shadow 0.18s var(--isx-ease), background 0.18s var(--isx-ease);
+}
+
+.trigger:hover:not(:disabled) {
+	border-color: var(--dsw-border-l3);
+	background: var(--dsw-bg-elevated);
+}
+
+.trigger:focus-visible,
+.trigger[data-open="true"] {
+	border-color: var(--dsw-accent);
+	box-shadow: 0 0 0 2px var(--dsw-accent-soft);
+	outline: none;
+}
+
+.trigger:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+
+.sizeSm {
+	min-height: 32px;
+	padding: 0 9px;
+	font-size: 12.5px;
+	border-radius: 10px;
+}
+
+.sizeMd {
+	width: 100%;
+	min-height: 42px;
+	padding: 0 13px;
+	font-size: 13.5px;
+	border-radius: 13px;
+}
+
+.label {
+	min-width: 0;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.chevron {
+	flex: none;
+	color: var(--dsw-label-secondary);
+	transition: transform 0.2s var(--isx-ease);
+}
+
+.chevronOpen {
+	transform: rotate(180deg);
+}
+
+.menu {
+	position: absolute;
+	top: calc(100% + 5px);
+	left: 0;
+	min-width: 100%;
+	width: max-content;
+	max-width: 300px;
+	z-index: 100;
+	max-height: 220px;
+	overflow-y: auto;
+	padding: 4px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 12px;
+	background: var(--dsw-glass-popover);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+	animation: popover-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.menuFlip {
+	top: auto;
+	bottom: calc(100% + 5px);
+}
+
+@keyframes popover-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+	padding: 6px 9px;
+	border-radius: 8px;
+	font-size: 12.5px;
+	color: var(--dsw-label-primary);
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	text-align: left;
+	user-select: none;
+	transition: background 0.12s ease, color 0.12s ease;
+}
+
+.option:hover:not(:disabled) {
+	background: var(--dsw-hover);
+}
+
+.optionSelected {
+	color: var(--dsw-accent);
+	font-weight: 550;
+	background: var(--dsw-accent-soft);
+}
+
+.option:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.check {
+	flex: none;
+	color: var(--dsw-accent);
+}

package/src/components/CustomSelect.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
+import { IconCheckOutline14, IconChevronDown14 } from "@/components/icons";
+import styles from "./CustomSelect.module.css";
+
+export interface SelectOption {
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
+
+export interface CustomSelectProps {
+	value: string;
+	onChange: (value: string) => void;
+	options: SelectOption[];
+	placeholder?: string;
+	disabled?: boolean;
+	size?: "sm" | "md";
+	className?: string;
+	style?: CSSProperties;
+	"aria-label"?: string;
+	"data-testid"?: string;
+}
+
+export function CustomSelect({
+	value,
+	onChange,
+	options,
+	placeholder,
+	disabled = false,
+	size = "md",
+	className = "",
+	style,
+	"aria-label": ariaLabel,
+	"data-testid": testId,
+}: CustomSelectProps) {
+	const [open, setOpen] = useState(false);
+	const [flip, setFlip] = useState(false);
+	const wrapRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+
+	const selectedOption = options.find((opt) => opt.value === value);
+
+	useEffect(() => {
+		if (!open) return;
+		// 检查下方空间是否足够，不足则向上展开
+		if (triggerRef.current) {
+			const rect = triggerRef.current.getBoundingClientRect();
+			const spaceBelow = window.innerHeight - rect.bottom;
+			setFlip(spaceBelow < 220 && rect.top > 220);
+		}
+
+		const handlePointerDown = (e: MouseEvent) => {
+			if (!wrapRef.current?.contains(e.target as Node)) {
+				setOpen(false);
+			}
+		};
+
+		const handleKeyDownDoc = (e: globalThis.KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+
+		document.addEventListener("mousedown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDownDoc);
+		return () => {
+			document.removeEventListener("mousedown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDownDoc);
+		};
+	}, [open]);
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+		if (disabled) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			setOpen((prev) => !prev);
+		}
+	};
+
+	return (
+		<div ref={wrapRef} className={`${styles.wrap} ${className}`} style={style}>
+			{/* 原生隐藏 select：保证测试、表单无障碍与自动化脚本完全兼容 */}
+			<select
+				tabIndex={-1}
+				value={value}
+				disabled={disabled}
+				aria-label={ariaLabel}
+				onChange={(e) => onChange(e.target.value)}
+				style={{
+					position: "absolute",
+					width: 1,
+					height: 1,
+					padding: 0,
+					margin: -1,
+					overflow: "hidden",
+					clip: "rect(0, 0, 0, 0)",
+					whiteSpace: "nowrap",
+					border: 0,
+					opacity: 0,
+					pointerEvents: "none",
+				}}
+			>
+				{options.map((opt) => (
+					<option key={opt.value} value={opt.value} disabled={opt.disabled}>
+						{opt.label}
+					</option>
+				))}
+			</select>
+
+			<button
+				ref={triggerRef}
+				type="button"
+				disabled={disabled}
+				data-open={open ? "true" : undefined}
+				data-testid={testId}
+				aria-label={ariaLabel}
+				aria-haspopup="listbox"
+				aria-expanded={open}
+				className={`${styles.trigger} ${size === "sm" ? styles.sizeSm : styles.sizeMd}`}
+				onClick={() => setOpen((prev) => !prev)}
+				onKeyDown={handleKeyDown}
+			>
+				<span className={styles.label}>{selectedOption?.label ?? placeholder ?? value}</span>
+				<IconChevronDown14 size={size === "sm" ? 13 : 15} className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`} />
+			</button>
+
+			{open && (
+				<div className={`${styles.menu} ${flip ? styles.menuFlip : ""}`} role="listbox" aria-label={ariaLabel}>
+					{options.map((opt) => {
+						const isSelected = opt.value === value;
+						return (
+							<button
+								key={opt.value}
+								type="button"
+								role="option"
+								aria-selected={isSelected}
+								disabled={opt.disabled}
+								className={`${styles.option} ${isSelected ? styles.optionSelected : ""}`}
+								onClick={() => {
+									onChange(opt.value);
+									setOpen(false);
+									triggerRef.current?.focus();
+								}}
+							>
+								<span className="truncate">{opt.label}</span>
+								{isSelected ? <IconCheckOutline14 size={14} className={styles.check} /> : null}
+							</button>
+						);
+					})}
+				</div>
+			)}
+		</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/ExtensionUI.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { IconShieldOutline16 } from "@/components/icons";
 import { useI18n } from "@/i18n";
-import type { ExtensionDialog } from "@/hooks/usePiWeb";
+import type { ExtensionDialog, PiWebNotice } from "@/hooks/usePiWeb";
 
 /** message 若全是 "key : value" 行（权限对话框的常见形态），解析成键值表渲染 */
 function parseKeyValueRows(message: string): { key: string; value: string }[] | null {
@@ -154,11 +154,17 @@ export function ExtensionNotices({
 	onDismiss,
 	children,
 }: {
-	notices: { id: string; message: string; type: "info" | "warning" | "error"; ts: number }[];
+	notices: PiWebNotice[];
 	onDismiss: (id: string) => void;
 	/** 同一摞里的其它常驻提示（如更新提示条），排在扩展通知上面，免得两处浮层叠在一起 */
 	children?: React.ReactNode;
 }) {
+	const { t } = useI18n();
+	const text = (n: PiWebNotice) => {
+		if (n.code === "external_reload") return t.externalSessionReloaded.replace("{n}", String(n.count ?? 0));
+		if (n.code === "external_write") return t.externalSessionWriting.replace("{n}", String(n.count ?? 0));
+		return n.message;
+	};
 	// 通知 6 秒后自动消失
 	useEffect(() => {
 		if (!notices.length) return;
@@ -179,7 +185,7 @@ export function ExtensionNotices({
 					style={{ fontSize: 12.5, background: "var(--dsw-glass-popover)", border: "0.5px solid var(--dsw-border-l2)", boxShadow: "var(--dsw-elevation-soft)", borderLeft: `3px solid ${color(n.type)}` }}
 					onClick={() => onDismiss(n.id)}
 				>
-					{n.message}
+					{text(n)}
 				</button>
 			))}
 		</div>

package/src/components/FileViewer.tsx

@@ -17,6 +17,7 @@ import { IconAtOutline16, IconChevronDown14, IconChevronUp14, IconCloseOutline14
 import type { GrowthApi } from "@/hooks/useGrowth";
 import { useI18n } from "@/i18n";
 import { fileIconSrc } from "@/lib/file-icons";
+import { fmtBytes } from "@/lib/format";
 import { fuzzyScore, type TreeNode } from "@/lib/growth-tree";
 import type { ViewerState } from "@/hooks/useFileViewer";
 import { highlightCode, languageForPath } from "@/lib/highlight";
@@ -113,8 +114,7 @@ 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 [dirPage, setDirPage] = useState<(DirPage & { key: string; error?: string }) | null>(null);
 	const diffRef = useRef<FullDiffHandle>(null);
 	const rootRef = useRef<HTMLDivElement>(null);
 	const quickInputRef = useRef<HTMLInputElement>(null);
@@ -138,41 +138,44 @@ export function FileViewer({
 	const [dirFallback, setDirFallback] = useState<string | null>(null);
 	const dirPath = activeTab?.kind === "dir" ? activeTab.path : dirFallback;
 	const isDir = Boolean(dirPath);
+	// @src/ 这类带尾斜杠的引用：列目录时去掉
+	const dirRel = dirPath ? dirPath.replace(/\/+$/, "") : null;
+	const dirKey = dirRel !== null && cwd ? `dir|${cwd}|${dirRel}` : null;
+	// 只认当前目录的那一页：从一个文件夹页签切到另一个时，上一个目录的条目不能在新请求回来前冒充新目录
+	// （点上去会拼出不存在的路径），「加载更多」也不能接着上一个目录的偏移拉
+	const page = dirPage && dirPage.key === dirKey ? dirPage : null;
 	// 文件夹：列目录（分页，后端已按 .gitignore 过滤），不读文件内容
 	useEffect(() => {
-		if (!dirPath || !cwd || !activeTab) {
+		if (dirRel === null || !cwd || !dirKey) {
 			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 });
+				const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(dirRel)}&offset=0`);
+				if (alive) setDirPage({ key: dirKey, ...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 });
+				if (alive) setDirPage({ key: dirKey, dir: dirRel, entries: [], nextOffset: null, truncated: false, error: error instanceof Error ? error.message : t.viewerLoadFailed });
 			}
 		})();
 		return () => {
 			alive = false;
 		};
-	}, [activeTab, dirPath, cwd, t.viewerLoadFailed]);
+	}, [dirRel, dirKey, cwd, t.viewerLoadFailed]);
 
 	/** 目录还有下一页时接着拉（大目录：node_modules 这种已被忽略，剩下的也不会太多） */
 	const loadMore = useCallback(async () => {
-		if (!activeTab || !cwd || !dirPage?.nextOffset) return;
+		if (!page?.nextOffset || dirRel === null || !cwd) return;
+		const base = page;
 		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] });
+			const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(dirRel)}&offset=${base.nextOffset}`);
+			// 请求途中切走了（或别的请求先换了这一页）就丢掉结果
+			setDirPage((current) => (current === base ? { ...base, ...data, key: base.key, entries: [...base.entries, ...data.entries] } : current));
 		} catch {
 			// 下一页失败就留在当前这页，用户可以再点
 		}
-	}, [activeTab, cwd, dirPage]);
+	}, [page, dirRel, cwd]);
 
 	// 取数据
 	useEffect(() => {
@@ -497,10 +500,10 @@ export function FileViewer({
 						{loaded?.truncated && <div className="pw-viewer-notice" data-kind="warn">{mode === "diff" ? t.viewerPatchTruncated : t.filePreviewTruncated}</div>}
 						{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 className="px-3 py-2" style={{ fontSize: 11.5, color: page?.error ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
+									{!page ? t.panelLoading : page.error ? page.error : t.viewerDirHint.replace("{n}", String(page.entries.length))}
 								</div>
-								{dirPage?.entries.map((entry) => (
+								{page?.entries.map((entry) => (
 									<button
 										key={entry.name}
 										type="button"
@@ -512,11 +515,11 @@ export function FileViewer({
 										<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>
+											<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", fontVariantNumeric: "tabular-nums" }}>{fmtBytes(entry.size)}</span>
 										)}
 									</button>
 								))}
-								{dirPage?.nextOffset ? (
+								{page?.nextOffset ? (
 									<button type="button" className="pw-chip mx-3 my-2" onClick={() => void loadMore()}>{t.viewerDirMore}</button>
 								) : null}
 							</div>

package/src/components/GitPanel.tsx

@@ -329,7 +329,7 @@ export function GitPanel({
 						<div className="flex flex-wrap items-center gap-2" style={{ fontSize: 12.5 }}>
 							<span
 								className="flex items-center gap-1.5 rounded-full px-2.5 py-1"
-								style={{ background: "var(--dsw-accent-soft)", color: "var(--dsw-accent)", fontWeight: 500 }}
+								style={{ background: "var(--dsw-accent-soft)", color: "var(--dsw-accent)", fontWeight: 600, border: "1px solid var(--dsw-border-l2)" }}
 							>
 								<IconGitOutline16 size={12} />
 								{info.detached ? t.gitDetached : info.branch ?? "—"}
@@ -364,20 +364,35 @@ export function GitPanel({
 										<span style={{ fontWeight: 600 }}>{area.label}</span>
 										<span>{area.entries.length}</span>
 									</div>
-									<div className="flex flex-col">
+									<div className="flex flex-col gap-0.5">
 										{area.entries.map(({ file: f, mode }) => (
 											<button
 												key={`${area.key}:${f.path}`}
 												type="button"
-												className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors"
+												className="flex w-full items-center gap-2 rounded-xl px-2.5 py-1.5 text-left transition-all"
 												title={f.path}
-												onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-												onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+												style={{ transition: "all 0.18s var(--isx-ease)" }}
+												onMouseEnter={(e) => {
+													e.currentTarget.style.background = "var(--dsw-hover)";
+													e.currentTarget.style.transform = "translateX(2px)";
+												}}
+												onMouseLeave={(e) => {
+													e.currentTarget.style.background = "transparent";
+													e.currentTarget.style.transform = "none";
+												}}
 												onClick={() => openFile(f, mode, mode === "staged" ? t.gitStagedDiff : mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
 											>
 												<span
-													className="flex-none rounded px-1 text-center"
-													style={{ minWidth: 16, fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: KIND_COLOR[f.kind], background: "var(--dsw-hover)" }}
+													className="flex-none rounded-full px-1.5 text-center"
+													style={{
+														minWidth: 18,
+														fontSize: 10,
+														fontFamily: "var(--font-mono)",
+														fontWeight: 700,
+														color: KIND_COLOR[f.kind],
+														background: "var(--dsw-hover)",
+														border: "1px solid currentColor",
+													}}
 												>
 													{f.kind === "untracked" ? "?" : f.kind === "conflict" ? "!" : mode === "staged" ? f.indexStatus : f.workStatus !== " " ? f.workStatus : f.indexStatus}
 												</span>
@@ -397,21 +412,28 @@ export function GitPanel({
 							{info.commits.length === 0 ? (
 								<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitNoCommits}</div>
 							) : (
-								<div className="flex flex-col">
+								<div className="flex flex-col gap-0.5">
 									{info.commits.map((c) => (
 										<button
 											key={c.hash}
 											type="button"
-											className="flex w-full flex-col items-stretch rounded-lg px-2 py-1 text-left transition-colors"
-											onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-											onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+											className="flex w-full flex-col items-stretch rounded-xl px-2.5 py-1.5 text-left transition-all"
+											style={{ transition: "all 0.18s var(--isx-ease)" }}
+											onMouseEnter={(e) => {
+												e.currentTarget.style.background = "var(--dsw-hover)";
+												e.currentTarget.style.transform = "translateX(2px)";
+											}}
+											onMouseLeave={(e) => {
+												e.currentTarget.style.background = "transparent";
+												e.currentTarget.style.transform = "none";
+											}}
 											onClick={() => changeView({ kind: "commit", hash: c.hash })}
 										>
 											<span className="flex items-baseline gap-2">
-												<span className="flex-none" style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--dsw-accent)" }}>{c.hash}</span>
+												<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--dsw-accent)", background: "var(--dsw-accent-soft)" }}>{c.hash}</span>
 												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, color: "var(--dsw-label-secondary)" }} title={c.subject}>{c.subject}</span>
 											</span>
-											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", paddingLeft: 0 }}>
+											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", paddingLeft: 0, marginTop: 2 }}>
 												{c.author} · {c.relative}
 											</span>
 										</button>

package/src/components/GrowthTree.tsx

@@ -160,7 +160,9 @@ export const GrowthTree = memo(function GrowthTree({
 	return (
 		<div
 			ref={scrollRef}
-			className="pw-tree min-h-0 flex-1 overflow-auto outline-none"
+			// overflow-x-hidden 是必须的：.pw-tree-row:hover 会 translateX(2px)，
+			// 单写 overflow-auto 时这 2px 会撑出横向滚动区，底部冒出一条滑块。
+			className="pw-tree min-h-0 flex-1 overflow-x-hidden overflow-y-auto outline-none"
 			tabIndex={0}
 			role="tree"
 			onKeyDown={onKeyDown}
@@ -274,7 +276,9 @@ const TreeRow = memo(function TreeRow({
 				{node.status === "R" && node.from && <span className="pw-tree-from">← {node.from.split("/").pop()}</span>}
 			</span>
 			{node.pending && <span className="pw-tree-pulse" aria-label={pendingLabel} />}
-			{!node.lazy && (onReference || (!isDir && onOpenEditor) || isDir) && (
+			{/* 只有「磁盘上才有、快照里没有」的节点不给按钮。不能按 lazy 判断：快照里的目录只要磁盘上也有，
+			    graftLazy 就会给它标 lazy（为了能展开读磁盘），根目录又总会被列出，顶层目录的按钮就全没了 */}
+			{!diskOnly && (onReference || (!isDir && onOpenEditor) || isDir) && (
 				<span className="pw-tree-actions">
 					{isDir && (
 						<button

package/src/components/ImageViewer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useI18n } from "@/i18n";
+import type { ImageAttachment } from "@/lib/types";
+
+export type PreviewImageSource = ImageAttachment | string;
+export const imageSource = (image: PreviewImageSource) => typeof image === "string" ? image : `data:${image.mimeType};base64,${image.data}`;
+
+/** 只读图集；删除只提供给尚未发送的输入附件（发出去的消息图片不可删） */
+export function ImageViewer({ images, index, disabled, onIndex, onRemove, onClose }: {
+	images: PreviewImageSource[];
+	index: number;
+	disabled?: boolean;
+	onIndex: (index: number) => void;
+	onRemove?: (index: number) => void;
+	onClose: () => void;
+}) {
+	const { t } = useI18n();
+	const dialogRef = useRef<HTMLDivElement>(null);
+	const closeRef = useRef<HTMLButtonElement>(null);
+	const count = images.length;
+	const go = (delta: number) => onIndex((index + delta + count) % count);
+
+	// 打开时把焦点移进来、锁住页面滚动，关掉时把焦点还给原来那个元素（还在页面上的话）
+	useEffect(() => {
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const overflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		closeRef.current?.focus();
+		return () => {
+			document.body.style.overflow = overflow;
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+
+	// 捕获阶段处理：Esc / 方向键不再传给页面上其它监听 document 的面板；Tab 只在预览里转
+	useEffect(() => {
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+			else if (event.key === "ArrowLeft" && count > 1) go(-1);
+			else if (event.key === "ArrowRight" && count > 1) go(1);
+			else if (event.key === "Tab") {
+				const focusable = [...(dialogRef.current?.querySelectorAll<HTMLElement>("button:not(:disabled)") ?? [])];
+				if (!focusable.length) return;
+				const at = focusable.indexOf(document.activeElement as HTMLElement);
+				const next = event.shiftKey ? (at <= 0 ? focusable.length - 1 : at - 1) : at === focusable.length - 1 ? 0 : at + 1;
+				focusable[next].focus();
+			} else return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		document.addEventListener("keydown", onKey, true);
+		return () => document.removeEventListener("keydown", onKey, true);
+	}, [count, index, onClose, onIndex]);
+
+	if (!images[index]) return null;
+	return (
+		<div ref={dialogRef} className="pw-lightbox" role="dialog" aria-modal="true" aria-label={t.imageViewer} onClick={onClose}>
+			<div className="pw-lightbox-bar" onClick={(event) => event.stopPropagation()}>
+				<span className="pw-lightbox-count">{count > 1 ? `${index + 1} / ${count}` : ""}</span>
+				{onRemove && <button type="button" className="pw-lightbox-btn" disabled={disabled} onClick={() => onRemove(index)}>{t.delete}</button>}
+				<button ref={closeRef} type="button" className="pw-lightbox-btn" aria-label={t.close} onClick={onClose}>✕</button>
+			</div>
+			<img src={imageSource(images[index])} alt={t.imageViewer} className="pw-lightbox-image" onClick={(event) => event.stopPropagation()} />
+			{count > 1 && <>
+				<button type="button" className="pw-lightbox-nav" data-side="prev" aria-label={t.imagePrev} onClick={(event) => { event.stopPropagation(); go(-1); }}>‹</button>
+				<button type="button" className="pw-lightbox-nav" data-side="next" aria-label={t.imageNext} onClick={(event) => { event.stopPropagation(); go(1); }}>›</button>
+			</>}
+		</div>
+	);
+}