@rexvane/piweb 0.3.1

package/src/components/GrowthTree.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+/**
+ * 项目树（项目栏与文件查看器「文件」页签共用）：
+ * 紧凑行（22px）、material 图标、名字按状态着色、行尾 +/− 与 A/M/D/R 角标、目录汇总角标、
+ * 生成中呼吸态、新步入场动画、窗口化渲染、键盘导航（↑↓ 移动，←→ 收展，Enter 打开）。
+ */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IconEditOutline16, IconFileOutline16, IconTriangleRightFill14 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+import { fileIconSrc, folderIconSrc } from "@/lib/file-icons";
+import { flattenTree, treeNodeKey, type FlatRow, type TreeNode } from "@/lib/growth-tree";
+
+const ROW_H = 22;
+const OVERSCAN = 12;
+
+export interface GrowthTreeProps {
+	tree: TreeNode;
+	expanded: Set<string>;
+	fresh?: Set<string>;
+	filter?: string;
+	onlyChanges?: boolean;
+	/** 查看器里正在看的文件 */
+	selectedPath?: string | null;
+	onToggleDir: (path: string) => void;
+	onExpandLazy?: (path: string) => void;
+	onOpenFile: (node: TreeNode) => void;
+	onReference?: (path: string) => void;
+	onOpenEditor?: (path: string) => void;
+	/** 需要滚到并聚焦的路径（面包屑跳转）；revealKey 变化时即使路径相同也重新滚动 */
+	revealPath?: string | null;
+	revealKey?: number;
+	emptyText?: string;
+}
+
+function statusColor(status?: TreeNode["status"]): string | undefined {
+	if (status === "A") return "var(--dsw-success)";
+	if (status === "M") return "var(--dsw-warn)";
+	if (status === "D") return "var(--dsw-danger)";
+	if (status === "R") return "var(--dsw-accent)";
+	return undefined;
+}
+
+function dirBadge(node: TreeNode): { text: string; color: string } | null {
+	const c = node.counts;
+	if (!c) return null;
+	const total = c.added + c.modified + c.deleted + c.renamed;
+	if (c.pending && !total) return { text: "…", color: "var(--dsw-label-caption)" };
+	if (!total) return null;
+	const color = c.deleted >= c.added && c.deleted >= c.modified ? "var(--dsw-danger)" : c.added >= c.modified ? "var(--dsw-success)" : "var(--dsw-warn)";
+	return { text: String(total), color };
+}
+
+export const GrowthTree = memo(function GrowthTree({
+	tree,
+	expanded,
+	fresh,
+	filter = "",
+	onlyChanges = false,
+	selectedPath,
+	onToggleDir,
+	onExpandLazy,
+	onOpenFile,
+	onReference,
+	onOpenEditor,
+	revealPath,
+	revealKey,
+	emptyText,
+}: GrowthTreeProps) {
+	const { t } = useI18n();
+	const rows = useMemo(() => flattenTree(tree, expanded, { onlyChanges, filter }), [tree, expanded, onlyChanges, filter]);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [viewport, setViewport] = useState({ top: 0, height: 600 });
+	const [focused, setFocused] = useState<string | null>(null);
+
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const update = () => setViewport({ top: el.scrollTop, height: el.clientHeight });
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => {
+			el.removeEventListener("scroll", update);
+			ro.disconnect();
+		};
+	}, []);
+
+	// 面包屑跳转：滚到目标行并聚焦
+	useEffect(() => {
+		if (!revealPath) return;
+		const idx = rows.findIndex((r) => r.node.path === revealPath);
+		if (idx < 0) return;
+		setFocused(treeNodeKey(rows[idx].node));
+		const el = scrollRef.current;
+		if (!el) return;
+		const top = idx * ROW_H;
+		if (top < el.scrollTop || top + ROW_H > el.scrollTop + el.clientHeight) el.scrollTo({ top: Math.max(0, top - el.clientHeight / 2) });
+	}, [revealPath, revealKey, rows]);
+
+	const activate = useCallback(
+		(row: FlatRow) => {
+			const node = row.node;
+			if (node.kind === "dir") {
+				if (node.lazy && !row.expanded && onExpandLazy) void onExpandLazy(node.path);
+				onToggleDir(node.path);
+			} else onOpenFile(node);
+		},
+		[onExpandLazy, onToggleDir, onOpenFile],
+	);
+
+	const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+		if (!rows.length) return;
+		const idx = Math.max(0, rows.findIndex((r) => treeNodeKey(r.node) === focused));
+		const row = rows[idx];
+		const focusRow = (i: number) => {
+			const target = rows[Math.max(0, Math.min(rows.length - 1, i))];
+			setFocused(treeNodeKey(target.node));
+			const el = scrollRef.current;
+			if (!el) return;
+			const top = Math.max(0, Math.min(rows.length - 1, i)) * ROW_H;
+			if (top < el.scrollTop) el.scrollTop = top;
+			else if (top + ROW_H > el.scrollTop + el.clientHeight) el.scrollTop = top + ROW_H - el.clientHeight;
+		};
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			focusRow(focused === null ? 0 : idx + 1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			focusRow(idx - 1);
+		} else if (e.key === "ArrowRight" && row) {
+			e.preventDefault();
+			if (row.node.kind === "dir" && !row.expanded) activate(row);
+			else focusRow(idx + 1);
+		} else if (e.key === "ArrowLeft" && row) {
+			e.preventDefault();
+			if (row.node.kind === "dir" && row.expanded) onToggleDir(row.node.path);
+			else {
+				const parent = row.node.path.includes("/") ? row.node.path.slice(0, row.node.path.lastIndexOf("/")) : "";
+					const pi = rows.findIndex((r) => r.node.kind === "dir" && r.node.path === parent);
+				if (pi >= 0) focusRow(pi);
+			}
+		} else if ((e.key === "Enter" || e.key === " ") && row) {
+			e.preventDefault();
+			activate(row);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			focusRow(0);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			focusRow(rows.length - 1);
+		}
+	};
+
+	const start = Math.max(0, Math.floor(viewport.top / ROW_H) - OVERSCAN);
+	const end = Math.min(rows.length, Math.ceil((viewport.top + viewport.height) / ROW_H) + OVERSCAN);
+	const visible = rows.slice(start, end);
+
+	return (
+		<div
+			ref={scrollRef}
+			className="pw-tree min-h-0 flex-1 overflow-auto outline-none"
+			tabIndex={0}
+			role="tree"
+			onKeyDown={onKeyDown}
+			// 焦点落到行内的「引用 / 编辑器」按钮上仍算在树里，不清键盘焦点行
+			onBlur={(e) => {
+				if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocused(null);
+			}}
+		>
+			{rows.length === 0 ? (
+				<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "10px 12px" }}>{emptyText ?? t.filesEmpty}</div>
+			) : (
+				<div style={{ height: rows.length * ROW_H, position: "relative" }}>
+					{visible.map((row, i) => (
+						<TreeRow
+							key={treeNodeKey(row.node)}
+							row={row}
+							top={(start + i) * ROW_H}
+							fresh={row.node.kind === "file" && Boolean(fresh?.has(row.node.path))}
+							selected={row.node.kind === "file" && selectedPath === row.node.path}
+							focused={focused === treeNodeKey(row.node)}
+							onActivate={activate}
+							onFocusRow={setFocused}
+							onReference={onReference}
+							onOpenEditor={onOpenEditor}
+							pendingLabel={t.growthPending}
+								lazyLabel={t.growthLazyDir}
+								deletedLabel={t.growthStatD}
+								referenceLabel={t.fileReference}
+							editorLabel={t.fileOpenEditor}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+});
+
+const TreeRow = memo(function TreeRow({
+	row,
+	top,
+	fresh,
+	selected,
+	focused,
+	onActivate,
+	onFocusRow,
+	onReference,
+	onOpenEditor,
+	pendingLabel,
+	lazyLabel,
+	deletedLabel,
+	referenceLabel,
+	editorLabel,
+}: {
+	row: FlatRow;
+	top: number;
+	fresh: boolean;
+	selected: boolean;
+	focused: boolean;
+	onActivate: (row: FlatRow) => void;
+	onFocusRow: (path: string) => void;
+	onReference?: (path: string) => void;
+	onOpenEditor?: (path: string) => void;
+	pendingLabel: string;
+	lazyLabel: string;
+	deletedLabel: string;
+	referenceLabel: string;
+	editorLabel: string;
+}) {
+	const { node, depth, expanded } = row;
+	const isDir = node.kind === "dir";
+	const color = statusColor(node.status);
+	const badge = isDir ? dirBadge(node) : null;
+	const diskOnly = Boolean(node.lazy && !node.counts);
+	const title = [isDir ? `${node.path}/` : node.path, node.status === "D" ? deletedLabel : "", node.status === "R" && node.from ? `← ${node.from}` : "", node.pending ? pendingLabel : "", diskOnly ? lazyLabel : ""].filter(Boolean).join("\n");
+	return (
+		<div
+			className="pw-tree-row group/row"
+			role="treeitem"
+			aria-expanded={isDir ? expanded : undefined}
+			aria-selected={selected}
+			data-selected={selected || undefined}
+			data-focused={focused || undefined}
+			data-fresh={fresh ? node.status ?? "M" : undefined}
+			data-status={node.status}
+			data-pending={node.pending || undefined}
+			data-lazy={diskOnly ? "1" : undefined}
+			style={{ top, paddingLeft: depth * 12 + 6 }}
+			title={title}
+			onClick={() => {
+				onFocusRow(treeNodeKey(node));
+				onActivate(row);
+			}}
+		>
+			<span className="pw-tree-chevron" aria-hidden>
+				{isDir && <IconTriangleRightFill14 size={10} style={{ transform: expanded ? "rotate(90deg)" : undefined, transition: "transform var(--ds-duration-fast)" }} />}
+			</span>
+			<img className="pw-tree-icon" data-kind={node.kind} src={isDir ? folderIconSrc(node.name, expanded) : fileIconSrc(node.name)} alt="" draggable={false} />
+			<span className="pw-tree-name" style={{ color, textDecoration: node.status === "D" ? "line-through" : undefined }}>
+				{node.name}{isDir ? "/" : ""}
+				{node.status === "D" && <span className="pw-tree-from">({deletedLabel})</span>}
+				{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} />}
+			{!isDir && (onReference || onOpenEditor) && !node.lazy && (
+				<span className="pw-tree-actions">
+					{onReference && (
+						<button
+							type="button"
+							className="icon-btn"
+							style={{ width: 18, height: 18, borderRadius: 5 }}
+							title={referenceLabel}
+							onClick={(e) => {
+								e.stopPropagation();
+								onReference(node.path);
+							}}
+						>
+							<IconEditOutline16 size={11} />
+						</button>
+					)}
+					{onOpenEditor && (
+						<button
+							type="button"
+							className="icon-btn"
+							style={{ width: 18, height: 18, borderRadius: 5 }}
+							title={editorLabel}
+							onClick={(e) => {
+								e.stopPropagation();
+								onOpenEditor(node.path);
+							}}
+						>
+							<IconFileOutline16 size={11} />
+						</button>
+					)}
+				</span>
+			)}
+			{!isDir && node.status && (node.add || node.del) ? (
+				<span className="pw-tree-stat">
+					{node.add ? <span style={{ color: "var(--dsw-success)" }}>+{node.add}</span> : null}
+					{node.del ? <span style={{ color: "var(--dsw-danger)" }}>−{node.del}</span> : null}
+				</span>
+			) : null}
+			{!isDir && node.status && (
+				<span className="pw-tree-badge" style={{ color, borderColor: color }}>
+					{node.status}
+				</span>
+			)}
+			{badge && (
+				<span className="pw-tree-badge" style={{ color: badge.color, borderColor: badge.color }}>
+					{badge.text}
+				</span>
+			)}
+		</div>
+	);
+});

package/src/components/ModelSelector.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+/**
+ * 模型选择菜单：打开即显示 Provider 分组模型列表；思考级别保留为独立子页。
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconCheckOutline14, IconChevronDown14, IconChevronLeft14, IconChevronRight14 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+
+export interface ModelChoice {
+	provider: string;
+	id: string;
+	name: string;
+	reasoning: boolean;
+	thinkingLevels?: string[];
+	contextWindow: number;
+}
+
+export function ModelSelector({
+	model,
+	thinkingLevel,
+	thinkingLevels,
+	models,
+	providerNames,
+	authByProvider,
+	onSelectModel,
+	onSelectLevel,
+	open: openProp,
+	onOpenChange,
+}: {
+	model?: { provider: string; id: string; name: string };
+	thinkingLevel?: string;
+	thinkingLevels: string[];
+	models: ModelChoice[];
+	providerNames: Record<string, string>;
+	authByProvider: Record<string, boolean>;
+	onSelectModel: (provider: string, id: string) => void;
+	onSelectLevel: (level: string) => void;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const [openState, setOpenState] = useState(false);
+	const open = openProp ?? openState;
+	const setOpen = (v: boolean) => {
+		setOpenState(v);
+		onOpenChange?.(v);
+	};
+	const [pane, setPane] = useState<"model" | "effort">("model");
+	const ref = useRef<HTMLDivElement>(null);
+	const listRef = useRef<HTMLDivElement>(null);
+	const { t } = useI18n();
+
+	useEffect(() => {
+		if (!open) {
+			setPane("model");
+			return;
+		}
+		const onPointerDown = (e: MouseEvent) => {
+			if (!ref.current?.contains(e.target as Node)) setOpen(false);
+		};
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key !== "Escape") return;
+			if (pane === "effort") setPane("model");
+			else setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [open, pane]);
+
+	const groups = useMemo(() => {
+		const byProvider = new Map<string, ModelChoice[]>();
+		for (const m of models) {
+			if (authByProvider[m.provider] === false) continue;
+			if (!byProvider.has(m.provider)) byProvider.set(m.provider, []);
+			byProvider.get(m.provider)!.push(m);
+		}
+		const out = [...byProvider.entries()].map(([provider, list]) => ({
+			provider,
+			label: providerNames[provider] ?? provider,
+			models: [...list].sort((a, b) => a.name.localeCompare(b.name)),
+		}));
+		out.sort((a, b) => a.label.localeCompare(b.label));
+		if (model) {
+			const idx = out.findIndex((g) => g.provider === model.provider);
+			if (idx > 0) {
+				const [g] = out.splice(idx, 1);
+				out.unshift(g);
+			}
+		}
+		return out;
+	}, [models, providerNames, authByProvider, model]);
+
+	// 进入模型列表时滚动到选中项
+	useEffect(() => {
+		if (!open || pane !== "model") return;
+		requestAnimationFrame(() => {
+			listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
+		});
+	}, [open, pane]);
+
+	const hasModel = Boolean(model?.id);
+	const modelName = hasModel ? (model?.name || model?.id || "") : "";
+	const effortLabel = hasModel && thinkingLevel && thinkingLevel !== "off" ? thinkingLevel : undefined;
+	const triggerTitle = hasModel
+		? `${providerNames[model?.provider ?? ""] ?? model?.provider}/${modelName}${effortLabel ? ` · ${effortLabel}` : ""}`
+		: t.selectModel;
+
+	return (
+		<div ref={ref} className="relative">
+			<button
+				type="button"
+				className="chip"
+				data-open={open}
+				title={triggerTitle}
+				aria-label={triggerTitle}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				onClick={() => {
+					setOpen(!open);
+					setPane("model");
+				}}
+			>
+				<span className="max-w-[220px] truncate" suppressHydrationWarning>{hasModel ? modelName : t.selectModel}</span>
+				{effortLabel && (
+					<span style={{ color: "var(--dsw-label-caption)", flex: "none", fontSize: 13 }}>
+						{effortLabel}
+					</span>
+				)}
+				<span className="chevron">
+					<IconChevronDown14 size={14} />
+				</span>
+			</button>
+
+			{open && (
+				<div
+					className="popover absolute bottom-10 right-0 z-50 flex w-[312px] max-w-[calc(100vw-24px)] flex-col"
+					role="menu"
+					onKeyDown={(event) => {
+						if (event.key !== "Escape") return;
+						event.preventDefault();
+						if (pane === "effort") setPane("model");
+						else setOpen(false);
+					}}
+				>
+					{pane === "effort" && (
+						<div className="py-1">
+							<button
+								type="button"
+								className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors"
+								style={{ color: "var(--dsw-label-secondary)" }}
+								onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+								onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+								onClick={() => setPane("model")}
+							>
+								<IconChevronLeft14 size={14} /> {t.thinking}
+							</button>
+							{thinkingLevels.length === 0 && (
+								<div className="px-4 py-3" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
+									{t.emptyEfforts}
+								</div>
+							)}
+							{thinkingLevels.map((lv) => {
+								const selected = thinkingLevel === lv;
+								return (
+									<button
+										key={lv}
+										type="button"
+										role="menuitemradio"
+										aria-checked={selected}
+										className="flex w-full items-center justify-between px-4 py-2 text-left transition-colors"
+										onMouseEnter={(e) => {
+											if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
+										}}
+										onMouseLeave={(e) => {
+											if (!selected) e.currentTarget.style.background = "transparent";
+										}}
+										onClick={() => {
+											onSelectLevel(lv);
+											setOpen(false);
+										}}
+									>
+										<span style={{ fontSize: 14, color: "var(--dsw-label-primary)" }}>{lv}</span>
+										{selected && (
+											<span style={{ display: "inline-flex", color: "var(--dsw-label-primary)" }}>
+												<IconCheckOutline14 size={14} />
+											</span>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					)}
+
+					{pane === "model" && (
+						<div className="flex min-h-0 flex-col">
+							<div ref={listRef} className="max-h-[340px] overflow-y-auto py-1">
+								{groups.length === 0 && (
+									<div className="px-3 py-3" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
+										{t.emptyModels}
+									</div>
+								)}
+								{groups.map((g) => (
+									<section key={g.provider} role="group" aria-label={g.label}>
+										{/* 提供商名不吸顶：吸顶会在滚动时钉住并被下一组顶出成半截文字（"卡住"观感） */}
+										<div
+											className="px-3 pb-1 pt-2"
+											style={{ fontSize: 12, fontWeight: 500, color: "var(--dsw-label-caption)" }}
+										>
+											{g.label}
+										</div>
+										{g.models.map((m) => {
+											const selected = model?.provider === m.provider && model?.id === m.id;
+											return (
+												<button
+													key={`${m.provider}/${m.id}`}
+													type="button"
+													role="menuitemradio"
+											aria-checked={selected}
+											data-selected={selected}
+											className="flex min-h-10 w-full items-center justify-between gap-3 rounded-[10px] px-3 py-2 text-left transition-colors"
+											style={{ background: selected ? "var(--dsw-active)" : "transparent" }}
+											onMouseEnter={(e) => {
+												if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
+											}}
+											onMouseLeave={(e) => {
+												if (!selected) e.currentTarget.style.background = "transparent";
+											}}
+													onClick={() => {
+														onSelectModel(m.provider, m.id);
+														setOpen(false);
+													}}
+												>
+													<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14, fontWeight: 500, color: "var(--dsw-label-primary)" }}>
+														{m.name}
+													</span>
+													{selected && (
+														<span style={{ display: "inline-flex", color: "var(--dsw-label-primary)", flex: "none" }}>
+															<IconCheckOutline14 size={16} />
+														</span>
+													)}
+												</button>
+											);
+										})}
+									</section>
+								))}
+							</div>
+							{/* 思考档位入口：模型只有一档（非推理模型 / models.json 没写 reasoning: true）时也显示，
+							    但置灰并说明是模型不支持，而不是让入口凭空消失 */}
+							{hasModel && (thinkingLevels.length > 1 ? (
+								<button
+									type="button"
+									className="mt-1 flex w-full items-center justify-between gap-3 border-t px-3 pb-1 pt-2 text-left transition-colors"
+									style={{ borderColor: "var(--dsw-border-l1)" }}
+									onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+									onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+									onClick={() => setPane("effort")}
+								>
+									<span style={{ fontSize: 13.5, color: "var(--dsw-label-secondary)" }}>{t.thinking}</span>
+									<span className="flex min-w-0 items-center gap-1">
+										<span className="truncate" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
+											{thinkingLevel ?? t.thinkingOff}
+										</span>
+										<IconChevronRight14 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
+									</span>
+								</button>
+							) : (
+								<div
+									className="mt-1 flex w-full items-center justify-between gap-3 border-t px-3 pb-1 pt-2"
+									style={{ borderColor: "var(--dsw-border-l1)", opacity: 0.6 }}
+									title={t.thinkingUnsupportedHint}
+								>
+									<span style={{ fontSize: 13.5, color: "var(--dsw-label-secondary)" }}>{t.thinking}</span>
+									<span className="truncate" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.thinkingUnsupported}</span>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}