@rexvane/piweb 0.3.14 → 0.3.16

package/src/components/PiMark.tsx

@@ -34,46 +34,13 @@ export function PiMark({
 /** 品牌簇：对齐 dsh 品牌模板 [Logo] [Name] [BADGE] */
 export function BrandPi({ compact = false }: { compact?: boolean }) {
 	if (compact) {
-		return <PiMark size={18} />;
+		return <PiMark size={18} style={{ color: "var(--dsw-accent)" }} />;
 	}
 	return (
-		<div
-			className="inline-flex items-center select-none"
-			style={{
-				color: "var(--dsw-label-primary)",
-				gap: 6,
-			}}
-		>
-			<PiMark size={17} />
-			<span
-				className="inline-flex items-center"
-				style={{
-					fontSize: 16.5,
-					fontWeight: 600,
-					letterSpacing: "-0.02em",
-					color: "var(--dsw-label-primary)",
-					lineHeight: 1,
-				}}
-			>
-				pi
-			</span>
-			<span
-				className="inline-flex items-center justify-center font-bold"
-				style={{
-					fontSize: 9.5,
-					letterSpacing: "0.06em",
-					height: 15,
-					paddingLeft: 4.5,
-					paddingRight: 4.5,
-					borderRadius: 4,
-					background: "var(--dsw-label-primary)",
-					color: "var(--dsw-bg-base)",
-					lineHeight: 1,
-					textTransform: "uppercase",
-				}}
-			>
-				HARNESS
-			</span>
+		<div className="pw-brand select-none">
+			<span className="pw-brand-symbol"><PiMark size={18} style={{ color: "var(--dsw-accent)" }} /></span>
+			<span className="pw-brand-name">piweb</span>
+			<span className="pw-brand-meta">CODE WORKBENCH</span>
 		</div>
 	);
 }

package/src/components/ProjectPanel.tsx

@@ -223,6 +223,7 @@ export function ProjectPanel({
 				<input
 					value={filter}
 					onChange={(e) => setFilter(e.target.value)}
+					aria-label={t.growthFilter}
 					placeholder={t.growthFilter}
 					className="min-w-0 flex-1 bg-transparent"
 					style={{ fontSize: 12 }}

package/src/components/PromptPanel.tsx

@@ -6,7 +6,7 @@
  * 技能 / 提示模板，含扩展与 npm 包提供的那些）；热会话额外给出"组装后的系统提示词"
  * 与每个工具的定义，它们不是文件、没有路径，直接在本面板内展开查看。
  */
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useI18n } from "@/i18n";
 import { IconRefreshOutline14, IconCloseOutline14 } from "@/components/icons";
 
@@ -67,30 +67,46 @@ export function PromptPanel({
 	onClose: () => void;
 }) {
 	const { t } = useI18n();
-	const [data, setData] = useState<PromptSourcesData | null>(null);
+	const owner = JSON.stringify([cwd, sessionId]);
+	const [catalog, setCatalog] = useState<{ owner: string; data: PromptSourcesData } | null>(null);
+	const data = catalog?.owner === owner ? catalog.data : null;
 	const [error, setError] = useState<string | null>(null);
 	const [busy, setBusy] = useState(false);
 	const [opening, setOpening] = useState<string | null>(null);
+	const listRequest = useRef<AbortController | null>(null);
+	const readRequest = useRef<AbortController | null>(null);
 
 	const load = useCallback(async () => {
+		listRequest.current?.abort();
+		readRequest.current?.abort();
+		const controller = new AbortController();
+		listRequest.current = controller;
+		const current = () => listRequest.current === controller && !controller.signal.aborted;
+		setCatalog(null);
+		setOpening(null);
 		setBusy(true);
 		setError(null);
 		try {
 			const query = new URLSearchParams({ cwd });
 			if (sessionId) query.set("session", sessionId);
-			const response = await fetch(`/api/prompts?${query.toString()}`);
+			const response = await fetch(`/api/prompts?${query.toString()}`, { signal: controller.signal });
 			const body = await response.json();
+			if (!current()) return;
 			if (!response.ok || !body.success) throw new Error(body.error || `request failed (${response.status})`);
-			setData(body.data as PromptSourcesData);
+			setCatalog({ owner, data: body.data as PromptSourcesData });
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			if (current()) setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			setBusy(false);
+			if (current()) setBusy(false);
 		}
-	}, [cwd, sessionId]);
+	}, [cwd, sessionId, owner]);
 
 	useEffect(() => {
 		void load();
+		return () => {
+			listRequest.current?.abort();
+			readRequest.current?.abort();
+		};
 	}, [load, refreshKey]);
 
 	const originLabel = (origin: PromptSourceOrigin): string => {
@@ -115,21 +131,28 @@ export function PromptPanel({
 	/** 文件类：按需读内容，交给外部查看器 */
 	const openFile = async (source: PromptSource) => {
 		if (!source.path || !onOpenContent) return;
+		readRequest.current?.abort();
+		const controller = new AbortController();
+		const catalogRequest = listRequest.current;
+		readRequest.current = controller;
+		const current = () => readRequest.current === controller && !controller.signal.aborted && listRequest.current === catalogRequest;
 		setOpening(source.path);
 		setError(null);
 		try {
 			const response = await fetch("/api/prompts", {
 				method: "POST",
+				signal: controller.signal,
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({ action: "read", filePath: source.path, cwd }),
 			});
 			const body = await response.json();
+			if (!current()) return;
 			if (!response.ok || !body.success) throw new Error(body.error || "read failed");
 			onOpenContent(source.path, body.data.content as string);
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			if (current()) setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			setOpening(null);
+			if (current()) setOpening(null);
 		}
 	};
 
@@ -138,50 +161,94 @@ export function PromptPanel({
 	);
 	const hasTools = (data?.tools?.length ?? 0) > 0;
 
+	const fileExtBadge = (name: string): string => {
+		const ext = name.split(".").pop()?.toUpperCase() ?? "DOC";
+		return ext.length <= 4 ? ext : "DOC";
+	};
+
 	return (
-		<div className="flex min-h-0 flex-1 flex-col">
-			<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.promptPanel}</span>
-				<button type="button" className="icon-btn" style={{ width: 26, height: 26 }} title={t.promptRefresh} aria-label={t.promptRefresh} onClick={() => void load()}>
-					<span className={busy ? "piweb-spin" : undefined} style={{ display: "inline-flex" }}>
-						<IconRefreshOutline14 size={14} />
-					</span>
-				</button>
-				<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 className="flex min-h-0 flex-1 flex-col p-2 select-none">
+			{/* Right Header (Screen 2 Claymorphism) */}
+			<div className="flex items-center justify-between pb-3 mb-3 border-b border-slate-200 dark:border-slate-800 px-2">
+				<div className="flex items-center gap-2">
+					<div className="w-2.5 h-2.5 rounded-full bg-sky-500 animate-pulse" />
+					<h2 className="text-sm font-bold text-slate-900 dark:text-slate-100 tracking-tight">{t.promptPanel}</h2>
+				</div>
+				<div className="flex items-center gap-1.5 text-slate-500">
+					<button
+						type="button"
+						className="w-7 h-7 clay-btn bg-white dark:bg-slate-800 text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-white transition-colors shadow-sm"
+						title={t.promptRefresh}
+						aria-label={t.promptRefresh}
+						onClick={() => void load()}
+					>
+						<span className={busy ? "piweb-spin" : undefined} style={{ display: "inline-flex" }}>
+							<IconRefreshOutline14 size={13} />
+						</span>
+					</button>
+					<button
+						type="button"
+						className="w-7 h-7 clay-btn bg-white dark:bg-slate-800 text-slate-700 hover:text-rose-600 dark:text-slate-300 transition-colors shadow-sm"
+						title={t.close}
+						aria-label={t.close}
+						onClick={onClose}
+					>
+						<IconCloseOutline14 size={13} />
+					</button>
+				</div>
 			</div>
-			<div className="min-h-0 flex-1 overflow-auto px-3 py-3" style={{ fontSize: 12.5 }}>
+
+			<div className="min-h-0 flex-1 overflow-y-auto px-1 space-y-4 text-xs">
 				{error && (
-					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-danger)" }} role="alert">
+					<div className="rounded-xl px-3 py-2 bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300 font-semibold" role="alert">
 						{error}
 					</div>
 				)}
-				{!data && busy && <div style={{ color: "var(--dsw-label-tertiary)" }}>{t.promptLoading}</div>}
+
+				{!data && busy && <div className="text-slate-500 py-4 text-center">{t.promptLoading}</div>}
+
 				{data && !data.sessionReady && (
-					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }} role="status">
+					<div className="rounded-xl px-3 py-2.5 clay-inset text-slate-600 dark:text-slate-300 leading-relaxed text-xs" role="status">
 						{t.promptColdHint}
 					</div>
 				)}
 
 				{groups.map((group) => (
-					<section key={group.kind} className="mb-3">
-						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{kindLabel(group.kind)}</div>
-						<div className="flex flex-col gap-1">
+					<section key={group.kind} className="space-y-1.5">
+						<div className="flex items-center justify-between text-xs font-bold text-slate-800 dark:text-slate-200 px-1 mb-1">
+							<span>{kindLabel(group.kind)}</span>
+							<span className="text-[10px] text-slate-500 dark:text-slate-400 font-mono font-semibold">{group.items.length} 项</span>
+						</div>
+						<div className="flex flex-col gap-1.5">
 							{group.items.map((source) => (
 								<button
 									key={`${source.kind}:${source.path ?? source.name}`}
 									type="button"
-									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
-									style={{ background: opening === source.path ? "var(--dsw-active)" : "transparent", border: "0.5px solid var(--dsw-border-l2)" }}
+									className={`clay-card p-3 flex items-center justify-between hover:scale-[1.01] transition-all cursor-pointer rounded-2xl text-left bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-800 ${
+										opening === source.path ? "ring-2 ring-emerald-500" : ""
+									}`}
 									title={source.path ?? source.name}
 									onClick={() => void openFile(source)}
 								>
-									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{source.name}</span>
-									<span className="flex-none" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)" }}>{formatBytes(source.bytes)}</span>
-									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
-										{originLabel(source.origin)}
-									</span>
+									<div className="flex items-center gap-2.5 min-w-0 flex-1 mr-2">
+										<div className="w-7 h-7 clay-inset bg-emerald-50 text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300 flex items-center justify-center rounded-xl font-mono font-bold text-[10px] flex-none">
+											{fileExtBadge(source.name)}
+										</div>
+										<div className="min-w-0 flex-1">
+											<div className="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">{source.name}</div>
+											<div className="text-[11px] text-slate-600 dark:text-slate-400 truncate">{source.path ?? kindLabel(source.kind)}</div>
+										</div>
+									</div>
+									<div className="text-right flex-none flex flex-col items-end gap-0.5">
+										{source.bytes !== undefined && (
+											<span className="text-[11px] font-mono font-bold text-slate-800 dark:text-slate-200 block">
+												{formatBytes(source.bytes)}
+											</span>
+										)}
+										<span className="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-semibold border border-slate-200 dark:border-slate-700">
+											{originLabel(source.origin)}
+										</span>
+									</div>
 								</button>
 							))}
 						</div>
@@ -189,15 +256,17 @@ export function PromptPanel({
 				))}
 
 				{hasTools && (
-					<section className="mb-3">
-						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindTool}</div>
-						<div className="flex flex-col gap-1">
+					<section className="space-y-1.5">
+						<div className="flex items-center justify-between text-xs font-bold text-slate-800 dark:text-slate-200 px-1 mb-1">
+							<span>{t.promptKindTool}</span>
+							<span className="text-[10px] text-slate-500 dark:text-slate-400 font-mono font-semibold">{data!.tools!.length} 个工具</span>
+						</div>
+						<div className="flex flex-col gap-1.5">
 							{data!.tools!.map((tool) => (
 								<button
 									key={`tool:${tool.name}`}
 									type="button"
-									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
-									style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+									className="clay-card p-3 flex items-center justify-between hover:scale-[1.01] transition-all cursor-pointer rounded-2xl text-left bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-800"
 									title={tool.name}
 									onClick={() =>
 										onOpenContent?.(
@@ -214,8 +283,16 @@ export function PromptPanel({
 										)
 									}
 								>
-									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{tool.name}</span>
-									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
+									<div className="flex items-center gap-2.5 min-w-0 flex-1 mr-2">
+										<div className="w-7 h-7 clay-inset bg-sky-50 text-sky-700 dark:bg-sky-950/70 dark:text-sky-300 flex items-center justify-center rounded-xl font-mono font-bold text-[10px] flex-none">
+											TOOL
+										</div>
+										<div className="min-w-0 flex-1">
+											<div className="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">{tool.name}</div>
+											<div className="text-[11px] text-slate-600 dark:text-slate-400 truncate">{tool.description || t.promptKindTool}</div>
+										</div>
+									</div>
+									<span className="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-semibold border border-slate-200 dark:border-slate-700 flex-none">
 										{tool.source === "builtin" ? t.promptToolBuiltin : t.promptToolExtension}
 									</span>
 								</button>
@@ -225,31 +302,35 @@ export function PromptPanel({
 				)}
 
 				{data?.assembledSystemPrompt && (
-					<section className="mb-3">
-						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindAssembled}</div>
+					<section className="space-y-1.5">
+						<div className="text-xs font-bold text-slate-800 dark:text-slate-200 px-1 mb-1">{t.promptKindAssembled}</div>
 						<button
 							type="button"
-							className="w-full rounded-lg px-2 py-1.5 text-left"
-							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+							className="w-full clay-card p-3 flex items-center gap-2.5 hover:scale-[1.01] transition-all cursor-pointer rounded-2xl text-left bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-800"
 							title={t.promptAssembledKey}
 							onClick={() => onOpenContent?.("system-prompt.md", data.assembledSystemPrompt ?? "")}
 						>
-							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptAssembledKey}</span>
+							<div className="w-7 h-7 clay-inset bg-emerald-50 text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300 flex items-center justify-center rounded-xl font-bold text-sm flex-none">
+								π
+							</div>
+							<span className="truncate font-bold text-slate-900 dark:text-slate-100 text-xs">{t.promptAssembledKey}</span>
 						</button>
 					</section>
 				)}
 
 				{data?.compactedSummary && (
-					<section className="mb-3">
-						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindCompacted}</div>
+					<section className="space-y-1.5">
+						<div className="text-xs font-bold text-slate-800 dark:text-slate-200 px-1 mb-1">{t.promptKindCompacted}</div>
 						<button
 							type="button"
-							className="w-full rounded-lg px-2 py-1.5 text-left"
-							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+							className="w-full clay-card p-3 flex items-center gap-2.5 hover:scale-[1.01] transition-all cursor-pointer rounded-2xl text-left bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-800"
 							title={t.promptCompactedKey}
 							onClick={() => onOpenContent?.("compacted-summary.md", data.compactedSummary ?? "")}
 						>
-							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptCompactedKey}</span>
+							<div className="w-7 h-7 clay-inset bg-amber-50 text-amber-700 dark:bg-amber-950/70 dark:text-amber-300 flex items-center justify-center rounded-xl font-bold text-xs flex-none">
+								SUM
+							</div>
+							<span className="truncate font-bold text-slate-900 dark:text-slate-100 text-xs">{t.promptCompactedKey}</span>
 						</button>
 					</section>
 				)}

package/src/components/SessionImportSection.tsx

@@ -36,6 +36,8 @@ interface ImportOutcome {
 	reason?: string;
 	messageCount?: number;
 	workspace?: string;
+	/** 已成功导入，但源里的运行时注入/加密内容等无法作为对话还原 */
+	skipped?: string[];
 }
 
 interface ImportReport {
@@ -60,6 +62,8 @@ function dayOf(ms?: number): string {
 	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 }
 
+const summaryKey = (summary: Pick<Summary, "source" | "externalId">) => `${summary.source}:${summary.externalId}`;
+
 export function SessionImportSection({ cwd }: { cwd: string }) {
 	const { t } = useI18n();
 	const [summaries, setSummaries] = useState<Summary[]>([]);
@@ -83,9 +87,14 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 				setFailure(json.error || t.toastError);
 				return;
 			}
-			setSummaries(json.data.sessions ?? []);
+			const nextSummaries = (json.data.sessions ?? []) as Summary[];
+			const nextImported = new Set<string>(json.data.imported ?? []);
+			const selectable = new Set(nextSummaries.map(summaryKey));
+			setSummaries(nextSummaries);
 			setErrors(json.data.errors ?? []);
-			setImportedKeys(new Set<string>(json.data.imported ?? []));
+			setImportedKeys(nextImported);
+			// 重新扫描后，源会话可能已经消失或被另一个请求导入；不要留下幽灵选择
+			setSelected((previous) => new Set([...previous].filter((item) => selectable.has(item) && !nextImported.has(item))));
 		} catch (error) {
 			setFailure(error instanceof Error ? error.message : String(error));
 		} finally {
@@ -109,8 +118,6 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 		void scan();
 	}, [scan]);
 
-	const key = (summary: Summary) => `${summary.source}:${summary.externalId}`;
-
 	const groups = useMemo(() => {
 		const bySource = new Map<string, Summary[]>();
 		for (const summary of summaries) {
@@ -120,27 +127,30 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 		}
 		return SOURCE_ORDER.filter((source) => bySource.has(source)).map((source) => {
 			const rows = [...(bySource.get(source) as Summary[])].sort((left, right) => (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0));
-			return { source, rows, imported: rows.filter((row) => importedKeys.has(key(row))).length };
+			return { source, rows, imported: rows.filter((row) => importedKeys.has(summaryKey(row))).length };
 		});
 	}, [summaries, importedKeys]);
 
 	/**
 	 * 一次只显示一个来源：六个工具各列 15 条就是 90 行，全铺出来既难找也没必要。
-	 * 默认落在第一个有会话的来源上（SOURCE_ORDER 的顺序），用户切换后不被扫描结果重置。
+	 * 首次打开默认落到“最近活动会话”所在的来源；用户切换后保持选择。
+	 * 直接派生有效来源，不用 effect 回填，避免初始化 effect 覆盖用户刚完成的点击。
 	 */
 	const [activeSource, setActiveSource] = useState("");
-	useEffect(() => {
-		if (activeSource && groups.some((group) => group.source === activeSource)) return;
-		setActiveSource(groups[0]?.source ?? "");
-	}, [groups, activeSource]);
-	const activeGroup = groups.find((group) => group.source === activeSource);
+	const defaultSource = groups.reduce<{ source: string; at: number } | null>((latest, group) => {
+		const first = group.rows[0];
+		const at = first?.updatedAt ?? first?.createdAt ?? 0;
+		return !latest || at > latest.at ? { source: group.source, at } : latest;
+	}, null)?.source ?? "";
+	const visibleSource = activeSource && groups.some((group) => group.source === activeSource) ? activeSource : defaultSource;
+	const activeGroup = groups.find((group) => group.source === visibleSource);
 
 	const toggle = (summary: Summary) => {
-		if (importedKeys.has(key(summary))) return;
+		if (importedKeys.has(summaryKey(summary))) return;
 		setSelected((previous) => {
 			const next = new Set(previous);
-			if (next.has(key(summary))) next.delete(key(summary));
-			else next.add(key(summary));
+			if (next.has(summaryKey(summary))) next.delete(summaryKey(summary));
+			else next.add(summaryKey(summary));
 			return next;
 		});
 	};
@@ -149,9 +159,9 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 		setSelected((previous) => {
 			const next = new Set(previous);
 			for (const row of rows) {
-				if (importedKeys.has(key(row))) continue;
-				if (checked) next.add(key(row));
-				else next.delete(key(row));
+				if (importedKeys.has(summaryKey(row))) continue;
+				if (checked) next.add(summaryKey(row));
+				else next.delete(summaryKey(row));
 			}
 			return next;
 		});
@@ -159,7 +169,7 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 
 	const run = async () => {
 		if (!selected.size) return;
-		const items = summaries.filter((summary) => selected.has(key(summary))).map((summary) => ({ source: summary.source, externalId: summary.externalId }));
+		const items = summaries.filter((summary) => selected.has(summaryKey(summary))).map((summary) => ({ source: summary.source, externalId: summary.externalId }));
 		setImporting(true);
 		setFailure(null);
 		setReport(null);
@@ -198,6 +208,7 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 
 	const failures = report?.results.filter((result) => result.status === "failed") ?? [];
 	const skipped = report?.results.filter((result) => result.status === "skipped") ?? [];
+	const importedWithNotes = report?.results.filter((result) => result.status === "imported" && result.skipped?.length) ?? [];
 
 	return (
 		<div className="flex flex-col gap-4" data-testid="session-import">
@@ -277,6 +288,11 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 							{sourceLabel(result.source)} · {result.title || result.externalId} — {result.reason}
 						</div>
 					))}
+					{importedWithNotes.map((result) => (
+						<div key={`note-${result.source}-${result.externalId}`} className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+							{sourceLabel(result.source)} · {result.title || result.externalId} — {result.skipped?.join("；")}
+						</div>
+					))}
 					{failures.map((result) => (
 						<div key={`fail-${result.source}-${result.externalId}`} className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}>
 							{sourceLabel(result.source)} · {result.title || result.externalId} — {result.reason}
@@ -289,27 +305,25 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 
 			{/* 来源选择器：选中哪个就只列哪个工具的会话 */}
 			{groups.length > 0 && (
-				<div className="flex flex-wrap items-center gap-1.5" role="tablist" aria-label={t.importPickSource} data-testid="import-source-tabs">
+				<div className="flex flex-wrap items-center gap-2 p-1.5 rounded-2xl bg-slate-100/80 dark:bg-slate-900/60" role="tablist" aria-label={t.importPickSource} data-testid="import-source-tabs">
 					{groups.map((group) => {
-						const active = group.source === activeSource;
+						const active = group.source === visibleSource;
 						return (
 							<button
 								key={group.source}
 								type="button"
 								role="tab"
 								aria-selected={active}
-								className="rounded-full px-3 py-1 transition-colors"
-								style={{
-									fontSize: 12,
-									border: `0.5px solid ${active ? "var(--dsw-accent)" : "var(--dsw-border-l2)"}`,
-									background: active ? "var(--dsw-accent)" : "transparent",
-									color: active ? "#fff" : "var(--dsw-label-tertiary)",
-								}}
+								className={`clay-btn rounded-xl px-3.5 py-1.5 transition-all text-xs font-medium flex items-center gap-1.5 ${
+									active
+										? "clay-btn-peach text-white shadow-sm font-semibold"
+										: "clay-btn-soft text-slate-600 dark:text-slate-300"
+								}`}
 								onClick={() => setActiveSource(group.source)}
 								data-testid={`import-source-${group.source}`}
 							>
-								{sourceLabel(group.source)}
-								<span style={{ marginLeft: 6, opacity: 0.75 }}>{group.rows.length}</span>
+								<span>{sourceLabel(group.source)}</span>
+								<span className={`text-[10px] px-1.5 py-0.2 rounded-full ${active ? "bg-white/30 text-white" : "bg-slate-200 dark:bg-slate-700 text-slate-500"}`}>{group.rows.length}</span>
 							</button>
 						);
 					})}
@@ -323,35 +337,37 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 							{t.importGroupCount.replace("{n}", String(activeGroup.rows.length)).replace("{imported}", String(activeGroup.imported))}
 						</span>
 						<div className="flex-1" />
-						<button className="rounded-lg px-2 py-0.5" style={{ fontSize: 11.5, color: "var(--dsw-label-tertiary)" }} onClick={() => selectGroup(activeGroup.rows, true)}>
+						<button className="clay-btn clay-btn-soft rounded-lg px-2.5 py-1 text-xs" onClick={() => selectGroup(activeGroup.rows, true)}>
 							{t.importSelectAll}
 						</button>
-						<button className="rounded-lg px-2 py-0.5" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} onClick={() => selectGroup(activeGroup.rows, false)}>
+						<button className="clay-btn clay-btn-soft rounded-lg px-2.5 py-1 text-xs text-slate-400" onClick={() => selectGroup(activeGroup.rows, false)}>
 							{t.importSelectNone}
 						</button>
 					</div>
 					<div className="flex flex-col gap-1.5">
 						{activeGroup.rows.map((row) => {
-							const rowKey = key(row);
+							const rowKey = summaryKey(row);
 							const done = importedKeys.has(rowKey);
 							const checked = selected.has(rowKey);
 							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={`clay-card flex cursor-pointer items-center gap-3 rounded-2xl px-3.5 py-2.5 transition-all hover:translate-x-0.5 ${
+										checked ? "ring-2 ring-emerald-500 bg-white dark:bg-slate-800" : "bg-white/70 dark:bg-slate-900/60"
+									}`}
+									style={{ opacity: done ? 0.55 : 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}>
+										<div className="truncate text-xs font-medium text-slate-800 dark:text-slate-100" title={row.title}>
 											{row.title || t.importUntitled}
 										</div>
-										<div className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }} title={row.projectPath}>
+										<div className="truncate text-[11px] text-slate-400" title={row.projectPath}>
 											{row.projectPath || t.importNoProject}
 										</div>
 									</div>
 									{done && (
-										<span className="rounded-full px-2 py-0.5" style={{ fontSize: 10, background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }}>
+										<span className="clay-badge rounded-full px-2 py-0.5 text-[10px] bg-slate-100 text-slate-400">
 											{t.importAlready}
 										</span>
 									)}