@rexvane/piweb 0.3.16 → 0.3.18

package/src/components/PromptPanel.tsx

@@ -6,7 +6,7 @@
  * 技能 / 提示模板，含扩展与 npm 包提供的那些）；热会话额外给出"组装后的系统提示词"
  * 与每个工具的定义，它们不是文件、没有路径，直接在本面板内展开查看。
  */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useI18n } from "@/i18n";
 import { IconRefreshOutline14, IconCloseOutline14 } from "@/components/icons";
 
@@ -67,46 +67,30 @@ export function PromptPanel({
 	onClose: () => void;
 }) {
 	const { t } = useI18n();
-	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 [data, setData] = useState<PromptSourcesData | null>(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()}`, { signal: controller.signal });
+			const response = await fetch(`/api/prompts?${query.toString()}`);
 			const body = await response.json();
-			if (!current()) return;
 			if (!response.ok || !body.success) throw new Error(body.error || `request failed (${response.status})`);
-			setCatalog({ owner, data: body.data as PromptSourcesData });
+			setData(body.data as PromptSourcesData);
 		} catch (err) {
-			if (current()) setError(err instanceof Error ? err.message : String(err));
+			setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			if (current()) setBusy(false);
+			setBusy(false);
 		}
-	}, [cwd, sessionId, owner]);
+	}, [cwd, sessionId]);
 
 	useEffect(() => {
 		void load();
-		return () => {
-			listRequest.current?.abort();
-			readRequest.current?.abort();
-		};
 	}, [load, refreshKey]);
 
 	const originLabel = (origin: PromptSourceOrigin): string => {
@@ -131,28 +115,21 @@ 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) {
-			if (current()) setError(err instanceof Error ? err.message : String(err));
+			setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			if (current()) setOpening(null);
+			setOpening(null);
 		}
 	};
 
@@ -161,94 +138,50 @@ 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 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 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>
-
-			<div className="min-h-0 flex-1 overflow-y-auto px-1 space-y-4 text-xs">
+			<div className="min-h-0 flex-1 overflow-auto px-3 py-3" style={{ fontSize: 12.5 }}>
 				{error && (
-					<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">
+					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-danger)" }} role="alert">
 						{error}
 					</div>
 				)}
-
-				{!data && busy && <div className="text-slate-500 py-4 text-center">{t.promptLoading}</div>}
-
+				{!data && busy && <div style={{ color: "var(--dsw-label-tertiary)" }}>{t.promptLoading}</div>}
 				{data && !data.sessionReady && (
-					<div className="rounded-xl px-3 py-2.5 clay-inset text-slate-600 dark:text-slate-300 leading-relaxed text-xs" role="status">
+					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }} role="status">
 						{t.promptColdHint}
 					</div>
 				)}
 
 				{groups.map((group) => (
-					<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">
+					<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">
 							{group.items.map((source) => (
 								<button
 									key={`${source.kind}:${source.path ?? source.name}`}
 									type="button"
-									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" : ""
-									}`}
+									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)" }}
 									title={source.path ?? source.name}
 									onClick={() => void openFile(source)}
 								>
-									<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>
+									<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>
 								</button>
 							))}
 						</div>
@@ -256,17 +189,15 @@ export function PromptPanel({
 				))}
 
 				{hasTools && (
-					<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">
+					<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">
 							{data!.tools!.map((tool) => (
 								<button
 									key={`tool:${tool.name}`}
 									type="button"
-									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"
+									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)" }}
 									title={tool.name}
 									onClick={() =>
 										onOpenContent?.(
@@ -283,16 +214,8 @@ export function PromptPanel({
 										)
 									}
 								>
-									<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">
+									<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)" }}>
 										{tool.source === "builtin" ? t.promptToolBuiltin : t.promptToolExtension}
 									</span>
 								</button>
@@ -302,35 +225,31 @@ export function PromptPanel({
 				)}
 
 				{data?.assembledSystemPrompt && (
-					<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>
+					<section className="mb-3">
+						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindAssembled}</div>
 						<button
 							type="button"
-							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"
+							className="w-full rounded-lg px-2 py-1.5 text-left"
+							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
 							title={t.promptAssembledKey}
 							onClick={() => onOpenContent?.("system-prompt.md", data.assembledSystemPrompt ?? "")}
 						>
-							<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>
+							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptAssembledKey}</span>
 						</button>
 					</section>
 				)}
 
 				{data?.compactedSummary && (
-					<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>
+					<section className="mb-3">
+						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindCompacted}</div>
 						<button
 							type="button"
-							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"
+							className="w-full rounded-lg px-2 py-1.5 text-left"
+							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
 							title={t.promptCompactedKey}
 							onClick={() => onOpenContent?.("compacted-summary.md", data.compactedSummary ?? "")}
 						>
-							<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>
+							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptCompactedKey}</span>
 						</button>
 					</section>
 				)}

package/src/components/SessionImportSection.tsx

@@ -36,8 +36,6 @@ interface ImportOutcome {
 	reason?: string;
 	messageCount?: number;
 	workspace?: string;
-	/** 已成功导入，但源里的运行时注入/加密内容等无法作为对话还原 */
-	skipped?: string[];
 }
 
 interface ImportReport {
@@ -62,8 +60,6 @@ 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[]>([]);
@@ -87,14 +83,9 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 				setFailure(json.error || t.toastError);
 				return;
 			}
-			const nextSummaries = (json.data.sessions ?? []) as Summary[];
-			const nextImported = new Set<string>(json.data.imported ?? []);
-			const selectable = new Set(nextSummaries.map(summaryKey));
-			setSummaries(nextSummaries);
+			setSummaries(json.data.sessions ?? []);
 			setErrors(json.data.errors ?? []);
-			setImportedKeys(nextImported);
-			// 重新扫描后，源会话可能已经消失或被另一个请求导入；不要留下幽灵选择
-			setSelected((previous) => new Set([...previous].filter((item) => selectable.has(item) && !nextImported.has(item))));
+			setImportedKeys(new Set<string>(json.data.imported ?? []));
 		} catch (error) {
 			setFailure(error instanceof Error ? error.message : String(error));
 		} finally {
@@ -118,6 +109,8 @@ 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) {
@@ -127,30 +120,27 @@ 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(summaryKey(row))).length };
+			return { source, rows, imported: rows.filter((row) => importedKeys.has(key(row))).length };
 		});
 	}, [summaries, importedKeys]);
 
 	/**
 	 * 一次只显示一个来源：六个工具各列 15 条就是 90 行，全铺出来既难找也没必要。
-	 * 首次打开默认落到“最近活动会话”所在的来源；用户切换后保持选择。
-	 * 直接派生有效来源，不用 effect 回填，避免初始化 effect 覆盖用户刚完成的点击。
+	 * 默认落在第一个有会话的来源上（SOURCE_ORDER 的顺序），用户切换后不被扫描结果重置。
 	 */
 	const [activeSource, setActiveSource] = useState("");
-	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);
+	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 toggle = (summary: Summary) => {
-		if (importedKeys.has(summaryKey(summary))) return;
+		if (importedKeys.has(key(summary))) return;
 		setSelected((previous) => {
 			const next = new Set(previous);
-			if (next.has(summaryKey(summary))) next.delete(summaryKey(summary));
-			else next.add(summaryKey(summary));
+			if (next.has(key(summary))) next.delete(key(summary));
+			else next.add(key(summary));
 			return next;
 		});
 	};
@@ -159,9 +149,9 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 		setSelected((previous) => {
 			const next = new Set(previous);
 			for (const row of rows) {
-				if (importedKeys.has(summaryKey(row))) continue;
-				if (checked) next.add(summaryKey(row));
-				else next.delete(summaryKey(row));
+				if (importedKeys.has(key(row))) continue;
+				if (checked) next.add(key(row));
+				else next.delete(key(row));
 			}
 			return next;
 		});
@@ -169,7 +159,7 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 
 	const run = async () => {
 		if (!selected.size) return;
-		const items = summaries.filter((summary) => selected.has(summaryKey(summary))).map((summary) => ({ source: summary.source, externalId: summary.externalId }));
+		const items = summaries.filter((summary) => selected.has(key(summary))).map((summary) => ({ source: summary.source, externalId: summary.externalId }));
 		setImporting(true);
 		setFailure(null);
 		setReport(null);
@@ -208,7 +198,6 @@ 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">
@@ -288,11 +277,6 @@ 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}
@@ -305,25 +289,27 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 
 			{/* 来源选择器：选中哪个就只列哪个工具的会话 */}
 			{groups.length > 0 && (
-				<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">
+				<div className="flex flex-wrap items-center gap-1.5" role="tablist" aria-label={t.importPickSource} data-testid="import-source-tabs">
 					{groups.map((group) => {
-						const active = group.source === visibleSource;
+						const active = group.source === activeSource;
 						return (
 							<button
 								key={group.source}
 								type="button"
 								role="tab"
 								aria-selected={active}
-								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"
-								}`}
+								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)",
+								}}
 								onClick={() => setActiveSource(group.source)}
 								data-testid={`import-source-${group.source}`}
 							>
-								<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>
+								{sourceLabel(group.source)}
+								<span style={{ marginLeft: 6, opacity: 0.75 }}>{group.rows.length}</span>
 							</button>
 						);
 					})}
@@ -337,37 +323,35 @@ 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="clay-btn clay-btn-soft rounded-lg px-2.5 py-1 text-xs" onClick={() => selectGroup(activeGroup.rows, true)}>
+						<button className="rounded-lg px-2 py-0.5" style={{ fontSize: 11.5, color: "var(--dsw-label-tertiary)" }} onClick={() => selectGroup(activeGroup.rows, true)}>
 							{t.importSelectAll}
 						</button>
-						<button className="clay-btn clay-btn-soft rounded-lg px-2.5 py-1 text-xs text-slate-400" onClick={() => selectGroup(activeGroup.rows, false)}>
+						<button className="rounded-lg px-2 py-0.5" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} onClick={() => selectGroup(activeGroup.rows, false)}>
 							{t.importSelectNone}
 						</button>
 					</div>
 					<div className="flex flex-col gap-1.5">
 						{activeGroup.rows.map((row) => {
-							const rowKey = summaryKey(row);
+							const rowKey = key(row);
 							const done = importedKeys.has(rowKey);
 							const checked = selected.has(rowKey);
 							return (
 								<label
 									key={rowKey}
-									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 }}
+									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 }}
 								>
 									<input type="checkbox" checked={checked} disabled={done} onChange={() => toggle(row)} />
 									<div className="min-w-0 flex-1">
-										<div className="truncate text-xs font-medium text-slate-800 dark:text-slate-100" title={row.title}>
+										<div className="truncate" style={{ fontSize: 12.5 }} title={row.title}>
 											{row.title || t.importUntitled}
 										</div>
-										<div className="truncate text-[11px] text-slate-400" title={row.projectPath}>
+										<div className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }} title={row.projectPath}>
 											{row.projectPath || t.importNoProject}
 										</div>
 									</div>
 									{done && (
-										<span className="clay-badge rounded-full px-2 py-0.5 text-[10px] bg-slate-100 text-slate-400">
+										<span className="rounded-full px-2 py-0.5" style={{ fontSize: 10, background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }}>
 											{t.importAlready}
 										</span>
 									)}