@rexvane/piweb 0.3.17 → 0.3.19

package/src/components/ProjectPanel.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 /**
- * 项目栏（侧栏与对话之间的第四列）：项目生长 = 每轮一个 git commit。
+ * 项目栏:右侧抽屉的「项目」入口(不再独占网格一列)。项目生长 = 每轮一个 git commit。
  * 头部：工作区名 + 立即记录 / 收起；所选轮：提问首行、时间、文件数与行数、在对话里看；
  * 工具行：范围（本轮 / 本会话累计）、只看改动、筛选；中间：项目树（GrowthTree）；
- * 底部：时间轴每轮一根柱（高度 = 改动行数，灰色细柱 = 你在两轮之间自己的修改），默认跟随最新一轮。
+ * 底部：时间轴每轮一根柱（高度 = 改动行数，灰色细柱 = 你在两轮之间自己的修改），默认不再跟随,底部计数可点开轮数列表跳到任意一轮。
  */
 import { useEffect, useMemo, useRef, useState } from "react";
 import { GrowthTree } from "@/components/GrowthTree";
@@ -13,7 +13,59 @@ import type { GrowthApi, GrowthEntry } from "@/hooks/useGrowth";
 import { useI18n } from "@/i18n";
 import type { GitInfo } from "@/lib/git-service";
 import type { TreeNode } from "@/lib/growth-tree";
-import type { GrowthChange } from "@/lib/types";
+import type { GrowthChange, GrowthConsentRequest } from "@/lib/types";
+
+/**
+ * 「要不要在这个工作区建 git 仓库」：工作区还不是仓库根目录时，生长记录第一次提交前问一次。
+ * 关掉（Esc / 点遮罩外）不算回答，下次打开会话还会再问；只有两个按钮会被记住。
+ */
+export function GrowthConsentDialog({ request, onAnswer }: { request: GrowthConsentRequest; onAnswer: (allow: boolean) => void }) {
+	const { t } = useI18n();
+	const [dismissed, setDismissed] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		setDismissed(false);
+		ref.current?.focus();
+	}, [request.cwd, request.reason]);
+	if (dismissed) return null;
+	const body = request.reason === "nested" ? t.growthConsentNested.replace("{parent}", request.parent ?? "") : t.growthConsentNotGit;
+	return (
+		<div
+			ref={ref}
+			tabIndex={-1}
+			className="fixed inset-0 z-[120] flex items-center justify-center"
+			style={{ background: "var(--dsw-mask)" }}
+			role="dialog"
+			aria-modal="true"
+			aria-label={t.growthConsentTitle}
+			data-testid="growth-consent-dialog"
+			onKeyDown={(event) => {
+				event.stopPropagation();
+				if (event.key === "Escape") setDismissed(true);
+			}}
+		>
+			<div className="popover flex w-[min(92vw,480px)] flex-col gap-3 p-5" style={{ background: "var(--dsw-glass-modal)" }}>
+				<div className="flex items-start gap-2.5">
+					<span className="flex flex-none items-center justify-center rounded-lg" style={{ width: 30, height: 30, background: "var(--dsw-hover)" }}>
+						<IconGitOutline16 size={16} style={{ color: "var(--dsw-label-secondary)" }} />
+					</span>
+					<div className="min-w-0 flex-1">
+						<div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.4 }}>{t.growthConsentTitle}</div>
+						<div className="mt-0.5 truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", fontFamily: "var(--font-mono)" }} title={request.cwd}>{request.cwd}</div>
+					</div>
+				</div>
+				<div className="rounded-xl px-3 py-2.5" style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)", lineHeight: 1.55, background: "var(--dsw-hover)" }}>
+					{body}
+					<div className="mt-1.5" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.growthConsentNote}</div>
+				</div>
+				<div className="flex justify-end gap-2">
+					<button className="btn-outline" style={{ height: 32 }} onClick={() => onAnswer(false)}>{t.growthConsentDecline}</button>
+					<button className="btn-primary-white" style={{ height: 32 }} onClick={() => onAnswer(true)}>{t.growthConsentAllow}</button>
+				</div>
+			</div>
+		</div>
+	);
+}
 
 /** 「第 7 轮 · 把保存按钮改成红色」/「你的修改」 */
 export function roundTitle(round: GrowthEntry, t: Record<string, string>): string {
@@ -90,6 +142,13 @@ export function ProjectPanel({
 	const [onlyChanges, setOnlyChanges] = useState(true);
 	const [recording, setRecording] = useState(false);
 	const [notice, setNotice] = useState("");
+	/** 轮数列表(底部计数点开) */
+	const [roundPickerOpen, setRoundPickerOpen] = useState(false);
+	/** 列表顶部「输入轮号...」已就地把那一行变成输入框 */
+	const [jumpEditing, setJumpEditing] = useState(false);
+	const [jumpValue, setJumpValue] = useState("");
+	const roundPickerRef = useRef<HTMLDivElement>(null);
+	const roundListRef = useRef<HTMLDivElement>(null);
 	const [gitState, setGitState] = useState<{ cwd: string; info: GitInfo | null; error?: string } | null>(null);
 	const git = gitState?.cwd === cwd ? gitState.info : null;
 	const gitError = gitState?.cwd === cwd ? gitState.error ?? git?.statusError : undefined;
@@ -125,6 +184,43 @@ export function ProjectPanel({
 		railRef.current?.querySelector<HTMLElement>(`[data-commit="${selected.commit}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
 	}, [selected]);
 	const selectedIdx = selected ? rounds.findIndex((round) => round.commit === selected.commit) : -1;
+
+	// 轮数列表:打开时自动滚到当前轮;Esc / 点外部关闭
+	useEffect(() => {
+		if (!roundPickerOpen) {
+			setJumpEditing(false);
+			setJumpValue("");
+			return;
+		}
+		requestAnimationFrame(() => {
+			roundListRef.current?.querySelector('[data-selected]')?.scrollIntoView({ block: "center" });
+		});
+		const onPointerDown = (e: MouseEvent) => {
+			if (!roundPickerRef.current?.contains(e.target as Node)) setRoundPickerOpen(false);
+		};
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				setRoundPickerOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [roundPickerOpen]);
+	/** 跳到第 n 轮(轮号从 1 起,只数 pi 的轮次);越界夹到有效范围,非法输入不跳 */
+	const jumpToRound = (raw: string) => {
+		const parsed = Number.parseInt(raw.trim(), 10);
+		if (Number.isNaN(parsed) || piRounds === 0) return;
+		const n = Math.max(1, Math.min(piRounds, parsed));
+		const round = rounds.find((item) => item.n === n);
+		if (!round) return;
+		growth.select(round.commit);
+		setRoundPickerOpen(false);
+	};
 	const conflicts = git?.files.filter((file) => file.kind === "conflict").length ?? 0;
 	const staged = git?.files.filter((file) => file.kind !== "conflict" && file.indexStatus !== " ").length ?? 0;
 	const unstaged = git?.files.filter((file) => file.kind !== "conflict" && file.workStatus !== " " && file.kind !== "untracked").length ?? 0;
@@ -152,8 +248,10 @@ export function ProjectPanel({
 	const emptyText = !cwd || !hasSession ? t.growthNoSession : growth.loading && !rounds.length ? t.growthLoading : !growth.available ? t.growthUnavailable : rounds.length ? undefined : t.growthNoRounds;
 	const statusText = selected?.status === "aborted" ? t.growthStatusAborted : selected?.status === "error" ? t.growthStatusError : "";
 
+	// 项目面板现在是抽屉的一个入口(不再独占网格一列):.pw-project 自带的右描边在抽屉里
+	// 会变成贴在窗口最右边的一条多余发丝线,所以这里去掉;背景沿用侧栏填充色即可。
 	return (
-		<div className="pw-project flex h-full min-h-0 flex-col" data-testid="project-panel">
+		<div className="pw-project flex h-full min-h-0 flex-1 flex-col" style={{ borderRight: "none" }} data-testid="project-panel">
 			{/* 头部 */}
 			<div className="flex items-center gap-1.5 px-3 pt-3 pb-1.5">
 				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }} title={cwd}>
@@ -314,16 +412,101 @@ export function ProjectPanel({
 						<button className="icon-btn" style={{ width: 20, height: 20 }} title={t.growthNext} onClick={growth.next} disabled={selectedIdx < 0 || selectedIdx >= rounds.length - 1}>
 							<IconChevronRight14 size={12} />
 						</button>
-						<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-secondary)" }}>
-							{selected?.n
-								? t.growthRoundPosition.replace("{current}", String(selected.n)).replace("{total}", String(piRounds))
-								: selected
-									? t.growthKindUser
-									: t.growthRoundPosition.replace("{current}", "0").replace("{total}", String(piRounds))}
-						</span>
-						<button type="button" className="pw-chip" data-active={growth.following} onClick={growth.follow} title={t.growthFollow}>
-							{growth.following ? t.growthFollowing : t.growthFollow}
-						</button>
+						{/* 计数可点开轮数列表:单击直接弹列表(不做双击变输入框,避免 250ms 单双击
+						    判定拖慢弹出);「输入轮号」是列表里一个固定入口,选中后当场变数字输入框 */}
+						<div className="relative min-w-0 flex-1">
+							<button
+								type="button"
+								className="w-full truncate rounded px-1 text-left"
+								style={{ color: "var(--dsw-label-secondary)", background: roundPickerOpen ? "var(--dsw-active)" : undefined }}
+								title={t.growthPickRound}
+								aria-haspopup="listbox"
+								aria-expanded={roundPickerOpen}
+								data-testid="growth-round-picker"
+								onClick={() => setRoundPickerOpen((v) => !v)}
+							>
+								{selected?.n
+									? t.growthRoundPosition.replace("{current}", String(selected.n)).replace("{total}", String(piRounds))
+									: selected
+										? t.growthKindUser
+										: t.growthRoundPosition.replace("{current}", "0").replace("{total}", String(piRounds))}
+							</button>
+							{roundPickerOpen && (
+								<div
+									ref={roundPickerRef}
+									className="popover absolute bottom-7 left-0 z-50 flex w-[268px] max-w-[calc(100vw-24px)] flex-col"
+									role="listbox"
+									aria-label={t.growthPickRound}
+									data-testid="growth-round-list"
+								>
+									{/* 「输入轮号」入口固定在最上面:选中后它自己变成数字输入框 */}
+									{jumpEditing ? (
+										<div className="px-1.5 pb-1">
+											<input
+												autoFocus
+												value={jumpValue}
+												inputMode="numeric"
+												placeholder={t.growthRoundJump}
+												title={t.growthRoundJumpHint}
+												data-testid="growth-round-input"
+												className="w-full rounded-md px-1.5 py-1"
+												style={{ fontSize: 12.5, background: "var(--dsw-hover)" }}
+												onChange={(e) => setJumpValue(e.target.value)}
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														jumpToRound(jumpValue);
+													}
+												}}
+											/>
+										</div>
+									) : (
+										<button
+											type="button"
+											className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors"
+											style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)" }}
+											onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+											onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+											data-testid="growth-round-jump"
+											onClick={() => {
+												setJumpValue("");
+												setJumpEditing(true);
+											}}
+										>
+											{t.growthRoundJump}
+										</button>
+									)}
+									{/* 轮次列表:当前轮高亮,打开时自动滚到它 */}
+									<div ref={roundListRef} className="min-h-0 max-h-[260px] overflow-y-auto border-t pt-1" style={{ borderColor: "var(--dsw-border-l1)" }}>
+										{rounds.map((round) => (
+											<button
+												key={round.commit}
+												type="button"
+												role="option"
+												aria-selected={selected?.commit === round.commit}
+												data-selected={selected?.commit === round.commit || undefined}
+												className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors"
+												style={{ background: selected?.commit === round.commit ? "var(--dsw-active)" : "transparent" }}
+												onMouseEnter={(e) => {
+													if (selected?.commit !== round.commit) e.currentTarget.style.background = "var(--dsw-hover)";
+												}}
+												onMouseLeave={(e) => {
+													if (selected?.commit !== round.commit) e.currentTarget.style.background = "transparent";
+												}}
+												title={`${roundTitle(round, tt)} · ${fmtTime(round.ts)}`}
+												onClick={() => {
+													growth.select(round.commit);
+													setRoundPickerOpen(false);
+												}}
+											>
+												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12.5 }}>{roundTitle(round, tt)}</span>
+												<span className="flex-none" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtTime(round.ts)}</span>
+											</button>
+										))}
+									</div>
+								</div>
+							)}
+						</div>
 					</div>
 				</div>
 			)}

package/src/components/RemoteSection.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+/**
+ * 设置 → 远程连接（内置插件）。
+ *
+ * 显示一个内置插件「远程连接」，它有两层入口：
+ *   - 局域网入口：注入代理，默认就开着；手机连同一个 WiFi 用这个地址，排版是手机版。
+ *   - 公网入口：cloudflared 快速隧道，由这里的按钮开关；开了之后任何浏览器都能打开。
+ *
+ * 公开地址由 Cloudflare 随机分配且每次启动都变；拿到地址后还要十几秒才在全球 DNS 生效，
+ * 所以状态里区分「已生成」和「已生效」，没生效时按钮区域给出说明而不是假装好了。
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useI18n } from "@/i18n";
+
+interface LanState {
+	running: boolean;
+	port: number | null;
+	urls: string[];
+	error: string | null;
+}
+
+interface PublicState {
+	running: boolean;
+	url: string | null;
+	ready: boolean;
+	engine: string | null;
+	engineAvailable: boolean;
+	error: string | null;
+}
+
+interface RemoteStatus {
+	plugin: string;
+	targetPort: number;
+	/** 非空时服务端拒绝开任何入口（没开认证 / 开发模式） */
+	blocked: "auth" | "dev" | null;
+	lan: LanState;
+	public: PublicState;
+}
+
+/** 状态点：绿=在跑，蓝=过渡中，灰=没开 */
+function Dot({ tone }: { tone: "on" | "pending" | "off" }) {
+	const color = tone === "on" ? "var(--dsw-success)" : tone === "pending" ? "var(--dsw-accent)" : "var(--dsw-label-caption)";
+	return <span className="inline-block h-[7px] w-[7px] flex-none rounded-full" style={{ background: color }} />;
+}
+
+function Row({ title, hint, children }: { title: string; hint?: string; children: React.ReactNode }) {
+	return (
+		<div className="hairline-b flex flex-wrap items-start justify-between gap-4 pb-5">
+			<div className="min-w-0 flex-1" style={{ minWidth: "45%" }}>
+				<div style={{ fontSize: 14 }}>{title}</div>
+				{hint ? <div style={{ fontSize: 12, color: "var(--dsw-label-caption)", lineHeight: 1.55, marginTop: 2 }}>{hint}</div> : null}
+			</div>
+			<div className="flex-none">{children}</div>
+		</div>
+	);
+}
+
+export function RemoteSection() {
+	const { t } = useI18n();
+	const [status, setStatus] = useState<RemoteStatus | null>(null);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	const alive = useRef(true);
+
+	const load = useCallback(async () => {
+		try {
+			const response = await fetch("/api/remote", { cache: "no-store" });
+			const result = await response.json();
+			if (!alive.current) return;
+			if (result?.success) {
+				setStatus(result.data as RemoteStatus);
+				setError("");
+			} else {
+				setError(result?.error ?? t.remoteFailed);
+			}
+		} catch {
+			if (alive.current) setError(t.remoteFailed);
+		}
+	}, [t]);
+
+	useEffect(() => {
+		alive.current = true;
+		void load();
+		return () => {
+			alive.current = false;
+		};
+	}, [load]);
+
+	// 地址已生成但还没生效时，短轮询到生效为止（实测这段要十几秒）
+	const waiting = Boolean(status?.public.running && !status.public.ready);
+	useEffect(() => {
+		if (!waiting) return;
+		const timer = setInterval(() => void load(), 2_500);
+		return () => clearInterval(timer);
+	}, [waiting, load]);
+
+	const act = async (action: "start" | "stop") => {
+		if (busy) return;
+		setBusy(true);
+		setError("");
+		try {
+			const response = await fetch("/api/remote", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ action }),
+			});
+			const result = await response.json();
+			if (result?.success) setStatus(result.data as RemoteStatus);
+			else setError(result?.error ?? t.remoteFailed);
+		} catch {
+			setError(t.remoteFailed);
+		} finally {
+			if (alive.current) setBusy(false);
+		}
+	};
+
+	// 「让所有设备重新登录」点两下才生效（第一下只把按钮换成确认文案，4 秒后复原）
+	const [confirmSignOut, setConfirmSignOut] = useState(false);
+	useEffect(() => {
+		if (!confirmSignOut) return;
+		const timer = setTimeout(() => setConfirmSignOut(false), 4_000);
+		return () => clearTimeout(timer);
+	}, [confirmSignOut]);
+	const signOutAll = async () => {
+		if (!confirmSignOut) {
+			setConfirmSignOut(true);
+			return;
+		}
+		setConfirmSignOut(false);
+		setError("");
+		try {
+			const response = await fetch("/api/web-auth?scope=all", { method: "DELETE" });
+			const result = await response.json().catch(() => null);
+			if (!response.ok || !result?.success) throw new Error(result?.error ?? t.remoteFailed);
+			window.location.href = "/login";
+		} catch (e) {
+			if (alive.current) setError(e instanceof Error ? e.message : t.remoteFailed);
+		}
+	};
+
+	const lan = status?.lan;
+	const pub = status?.public;
+	const blocked = status?.blocked ?? null;
+	const lanTone: "on" | "off" = lan?.running ? "on" : "off";
+	const pubTone: "on" | "pending" | "off" = pub?.running ? (pub.ready ? "on" : "pending") : "off";
+
+	return (
+		<div className="flex flex-col gap-6">
+			{/* 插件抬头 */}
+			<div className="flex items-center gap-2.5">
+				<div style={{ fontSize: 15, fontWeight: 500 }}>{t.setRemote}</div>
+				<span
+					className="rounded-md px-2 py-[2px]"
+					style={{ fontSize: 11, background: "var(--dsw-hover)", color: "var(--dsw-label-secondary)" }}
+				>
+					{t.remoteBuiltin}
+				</span>
+			</div>
+
+			{/* 局域网入口 */}
+			<Row title={t.remoteLanTitle} hint={t.remoteLanHint}>
+				<div className="flex flex-col items-end gap-1.5">
+					<div className="flex items-center gap-2" style={{ fontSize: 13 }}>
+						<Dot tone={lanTone} />
+						<span style={{ color: lan?.running ? "var(--dsw-label-primary)" : "var(--dsw-label-caption)" }}>
+							{lan?.running ? t.remoteRunning : t.remoteStopped}
+						</span>
+					</div>
+					{(lan?.urls ?? []).map((url) => (
+						<a key={url} href={url} target="_blank" rel="noreferrer" className="font-mono hover:underline" style={{ fontSize: 12 }}>
+							{url}
+						</a>
+					))}
+					{lan?.error ? <div style={{ fontSize: 12, color: "var(--dsw-danger)" }}>{lan.error}</div> : null}
+				</div>
+			</Row>
+
+			{/* 公网入口 */}
+			<Row title={t.remotePublicTitle} hint={t.remotePublicHint}>
+				<div className="flex flex-col items-end gap-2">
+					<div className="flex items-center gap-2" style={{ fontSize: 13 }}>
+						<Dot tone={pubTone} />
+						<span style={{ color: pub?.running ? "var(--dsw-label-primary)" : "var(--dsw-label-caption)" }}>
+							{pub?.running ? (pub.ready ? t.remoteRunning : t.remotePending) : t.remoteStopped}
+						</span>
+					</div>
+					{pub?.url ? (
+						<a href={pub.url} target="_blank" rel="noreferrer" className="font-mono hover:underline" style={{ fontSize: 12 }}>
+							{pub.url}
+						</a>
+					) : null}
+					<div className="flex items-center gap-2">
+						{pub?.running ? (
+							<button className="btn-outline" style={{ height: 30, fontSize: 13 }} disabled={busy} onClick={() => void act("stop")}>
+								{t.remoteStop}
+							</button>
+						) : (
+							<button className="btn-primary-white" style={{ height: 30, fontSize: 13 }} disabled={busy || blocked !== null} onClick={() => void act("start")}>
+								{busy ? t.remoteWorking : t.remoteStart}
+							</button>
+						)}
+					</div>
+				</div>
+			</Row>
+
+			{/* 没开认证就没有登录这回事 */}
+			{status && blocked !== "auth" ? (
+				<Row title={t.remoteSessionsTitle} hint={t.remoteSessionsHint}>
+					<button
+						className="btn-outline"
+						style={{ height: 30, fontSize: 13, color: confirmSignOut ? "var(--dsw-danger)" : undefined }}
+						onClick={() => void signOutAll()}
+					>
+						{confirmSignOut ? t.remoteSignOutAllConfirm : t.remoteSignOutAll}
+					</button>
+				</Row>
+			) : null}
+
+			{blocked ? (
+				<div style={{ fontSize: 12, color: "var(--dsw-label-secondary)", lineHeight: 1.6 }}>
+					{blocked === "auth" ? t.remoteBlockedAuth : t.remoteBlockedDev}
+				</div>
+			) : null}
+			{pub && !pub.engineAvailable ? (
+				<div style={{ fontSize: 12, color: "var(--dsw-danger)", lineHeight: 1.6 }}>{t.remoteEngineMissing}</div>
+			) : null}
+			{pub?.error ? <div style={{ fontSize: 12, color: "var(--dsw-danger)", lineHeight: 1.6 }}>{pub.error}</div> : null}
+			{error ? <div role="alert" style={{ fontSize: 12, color: "var(--dsw-danger)" }}>{error}</div> : null}
+		</div>
+	);
+}

package/src/components/SessionImportSection.tsx

@@ -200,50 +200,38 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 	const skipped = report?.results.filter((result) => result.status === "skipped") ?? [];
 
 	return (
-		<div className="flex flex-col gap-4" data-testid="session-import">
-			<div style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.importDesc}</div>
-			<div style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={t.importLimitHintTooltip} data-testid="import-limit-hint">
-				{t.importLimitHint.replace("{n}", String(SCAN_LIMIT))}
+		<div className="flex flex-col gap-3.5" data-testid="session-import">
+			{/* 说明区:主说明 + 扫描范围提示收进一个卡片,和下面的操作区分开 */}
+			<div className="flex flex-col gap-1.5 rounded-2xl px-4 py-3" style={{ background: "var(--dsw-hover)" }}>
+				<div style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)", lineHeight: 1.6 }}>{t.importDesc}</div>
+				<div style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={t.importLimitHintTooltip} data-testid="import-limit-hint">
+					{t.importLimitHint.replace("{n}", String(SCAN_LIMIT))}
+				</div>
 			</div>
 
-			{/* 工具条：扫描 / 选择 / 兜底工作区 / 导入 */}
+			{/* 操作行:扫描 / 清空 / 导入。去向是"设置",单独一行读起来更清楚 */}
 			<div className="flex flex-wrap items-center gap-2">
 				<button
-					className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5"
-					style={{ fontSize: 12, border: "0.5px solid var(--dsw-border-l2)" }}
+					className="btn-outline flex flex-none items-center gap-1.5 whitespace-nowrap"
+					style={{ height: 30, padding: "0 12px", fontSize: 12.5 }}
 					onClick={() => void scan()}
 					disabled={scanning}
 					data-testid="import-rescan"
 				>
 					<IconRefreshOutline14 size={13} /> {scanning ? t.importScanning : t.importRescan}
 				</button>
-				<span style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.importFallbackWorkspace}</span>
-				<select
-					className="rounded-lg px-2 py-1"
-					style={{ fontSize: 12, border: "0.5px solid var(--dsw-border-l2)", background: "transparent", maxWidth: 260 }}
-					value={fallback}
-					onChange={(event) => setFallback(event.target.value)}
-					aria-label={t.importFallbackWorkspace}
-					data-testid="import-fallback"
-				>
-					{(workspaces.includes(fallback) || !fallback ? workspaces : [fallback, ...workspaces]).map((workspace) => (
-						<option key={workspace} value={workspace}>
-							{workspace}
-						</option>
-					))}
-				</select>
 				<div className="flex-1" />
 				<button
-					className="rounded-lg px-2.5 py-1.5"
-					style={{ fontSize: 12, color: "var(--dsw-label-tertiary)" }}
+					className="whitespace-nowrap rounded-lg px-2.5 py-1.5"
+					style={{ fontSize: 12, color: selected.size ? "var(--dsw-label-secondary)" : "var(--dsw-label-tertiary)" }}
 					onClick={() => setSelected(new Set())}
 					disabled={!selected.size}
 				>
 					{t.importClearSelection}
 				</button>
 				<button
-					className="flex items-center gap-1.5 rounded-lg px-3 py-1.5"
-					style={{ fontSize: 12, background: selected.size && !importing ? "var(--dsw-accent)" : "var(--dsw-hover)", color: selected.size && !importing ? "#fff" : "var(--dsw-label-caption)" }}
+					className="flex flex-none items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5"
+					style={{ fontSize: 12.5, background: selected.size && !importing ? "var(--dsw-accent)" : "var(--dsw-hover)", color: selected.size && !importing ? "#fff" : "var(--dsw-label-caption)" }}
 					onClick={() => void run()}
 					disabled={!selected.size || importing}
 					data-testid="import-run"
@@ -251,6 +239,24 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 					<IconDownloadOutline16 size={13} /> {importing ? t.importRunning : t.importRun.replace("{n}", String(selected.size))}
 				</button>
 			</div>
+			<div className="flex min-w-0 flex-wrap items-center gap-2">
+				<span className="flex-none" style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.importFallbackWorkspace}</span>
+				<select
+					className="min-w-0 rounded-lg px-2 py-1"
+					style={{ fontSize: 12, border: "0.5px solid var(--dsw-border-l2)", background: "transparent", maxWidth: 280 }}
+					value={fallback}
+					onChange={(event) => setFallback(event.target.value)}
+					aria-label={t.importFallbackWorkspace}
+					data-testid="import-fallback"
+				>
+					{(workspaces.includes(fallback) || !fallback ? workspaces : [fallback, ...workspaces]).map((workspace) => (
+						<option key={workspace} value={workspace}>
+							{workspace}
+						</option>
+					))}
+				</select>
+				<span className="min-w-0" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.importFallbackHint}</span>
+			</div>
 
 			{failure && (
 				<div role="alert" className="rounded-lg px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", color: "var(--dsw-danger)" }}>
@@ -335,30 +341,46 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 							const rowKey = key(row);
 							const done = importedKeys.has(rowKey);
 							const checked = selected.has(rowKey);
+							// 去向:源项目目录还在本机就回原工作区(服务端判定),否则用兜底工作区。
+							// 这里只按"有没有 projectPath"给出预期,不假装知道目录是否真的存在。
+							const target = row.projectPath || fallback;
+							const goesOriginal = Boolean(row.projectPath);
 							return (
 								<label
 									key={rowKey}
-									className="flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2"
-									style={{ border: `0.5px solid ${checked ? "var(--dsw-accent)" : "var(--dsw-border-l2)"}`, opacity: done ? 0.55 : 1 }}
+									className="flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 transition-colors"
+									style={{
+										border: `0.5px solid ${checked ? "var(--dsw-accent)" : "var(--dsw-border-l2)"}`,
+										background: checked ? "var(--dsw-accent-soft)" : "transparent",
+										opacity: done ? 0.5 : 1,
+									}}
 								>
-									<input type="checkbox" checked={checked} disabled={done} onChange={() => toggle(row)} />
-									<div className="min-w-0 flex-1">
-										<div className="truncate" style={{ fontSize: 12.5 }} title={row.title}>
+									<input type="checkbox" checked={checked} disabled={done} onChange={() => toggle(row)} className="flex-none" />
+									<div className="flex min-w-0 flex-1 flex-col gap-0.5">
+										<div className="truncate" style={{ fontSize: 12.5, color: done ? "var(--dsw-label-tertiary)" : "var(--dsw-label-primary)" }} title={row.title}>
 											{row.title || t.importUntitled}
 										</div>
-										<div className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }} title={row.projectPath}>
-											{row.projectPath || t.importNoProject}
+										<div className="flex min-w-0 items-center gap-1.5" title={row.projectPath}>
+											<span
+												className="flex-none rounded px-1 py-0.5"
+												style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-tertiary)" }}
+											>
+												{goesOriginal ? t.importGoesOriginal : t.importGoesFallback}
+											</span>
+											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>
+												{target || t.importNoProject}
+											</span>
 										</div>
 									</div>
+									<span className="flex-none" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>
+										{typeof row.messageCount === "number" ? t.importMessages.replace("{n}", String(row.messageCount)) : "—"}
+									</span>
+									<span className="flex-none" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>{dayOf(row.updatedAt ?? row.createdAt)}</span>
 									{done && (
-										<span className="rounded-full px-2 py-0.5" style={{ fontSize: 10, background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }}>
+										<span className="flex-none rounded-full px-2 py-0.5" style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-caption)" }}>
 											{t.importAlready}
 										</span>
 									)}
-									<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>
-										{typeof row.messageCount === "number" ? t.importMessages.replace("{n}", String(row.messageCount)) : "—"}
-									</span>
-									<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>{dayOf(row.updatedAt ?? row.createdAt)}</span>
 								</label>
 							);
 						})}