@rexvane/piweb 0.3.15 → 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

@@ -305,7 +305,7 @@ 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 === visibleSource;
 						return (
@@ -314,18 +314,16 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 								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>
 						);
 					})}
@@ -339,10 +337,10 @@ 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>
@@ -354,20 +352,22 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 							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>
 									)}