@rexvane/piweb 0.3.15 → 0.3.16

package/src/components/AppShell.tsx

@@ -23,14 +23,21 @@ const samePath = (a: string, b: string): boolean =>
 const ProjectPanel = dynamic(() => import("@/components/ProjectPanel").then((m) => m.ProjectPanel), { ssr: false });
 const FileViewer = dynamic(() => import("@/components/FileViewer").then((m) => m.FileViewer), { ssr: false });
 const GitPanel = dynamic(() => import("@/components/GitPanel").then((m) => m.GitPanel), { ssr: false });
+const TestInspectorPod = dynamic(() => import("@/components/TestInspectorPod").then((m) => m.TestInspectorPod), { ssr: false });
+const SwarmCoordinatorPod = dynamic(() => import("@/components/SwarmCoordinatorPod").then((m) => m.SwarmCoordinatorPod), { ssr: false });
 import {
 	IconAgentPresetOutline16,
+	IconArchiveOutline20,
+	IconBranchOutline16,
 	IconCheckOutline14,
 	IconChevronDown14,
 	IconFolderClose16,
 	IconFolderOpenOutline16,
 	IconPanelLeftOutline16,
 	IconProjectAddOutline16,
+	IconSettingsOutline16,
+	IconShieldOutline16,
+	IconWorkflowAgent16,
 } from "@/components/icons";
 import { useI18n } from "@/i18n";
 import { usePiWeb } from "@/hooks/usePiWeb";
@@ -39,7 +46,7 @@ import { useFileViewer } from "@/hooks/useFileViewer";
 import type { TreeNode } from "@/lib/growth-tree";
 import { syncPebrelTheme } from "@/lib/theme";
 import type { ModelChoice } from "@/components/ModelSelector";
-import type { ImageAttachment, TrajEntry } from "@/lib/types";
+import type { ImageAttachment, TrajEntry, WorkflowMode } from "@/lib/types";
 
 // dsh ui-layout columns.ts 几何常量
 const SIDEBAR_MIN = 264;
@@ -72,6 +79,8 @@ export function AppShell() {
 		currentPath,
 		state,
 		models,
+		modelLoading,
+		modelLoadError,
 		addedWorkspaces,
 		removedWorkspaces,
 		workspaceAliases,
@@ -86,9 +95,11 @@ export function AppShell() {
 		setGroupBy,
 		setOrderBy,
 		addWorkspaceByPicker,
+		addWorkspaceByPath,
 		removeWorkspace,
 		refreshModels,
 		sendCommand,
+		editAndResend,
 		newSession,
 		openSession,
 		closeSession,
@@ -144,6 +155,8 @@ export function AppShell() {
 	const [heroCwd, setHeroCwd] = useState("");
 	const [heroModel, setHeroModel] = useState<{ provider: string; id: string } | null>(null);
 	const [heroThinking, setHeroThinking] = useState("");
+	const [heroMode, setHeroMode] = useState<WorkflowMode>("agent");
+	const [activeTopView, setActiveTopView] = useState<"workbench" | "diff" | "tests" | "swarm" | "archive">("workbench");
 	const [isNarrow, setIsNarrow] = useState(false);
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 	useEffect(() => {
@@ -357,15 +370,9 @@ export function AppShell() {
 	const doEditMessage = useCallback(
 		async (entryId: string, text: string) => {
 			if (!currentId) return;
-			const done = await sendCommand({ cmd: "editAndResend", entryId, text });
-			if (!done?.success) {
-				setError(done?.error ?? t.editMessageFailed);
-				return;
-			}
-			// 被编辑消息之后的尾部要从视图里消失（服务端已切断该分支）
-			resync();
+			await editAndResend(entryId, text);
 		},
-		[currentId, resync, sendCommand, setError, t.editMessageFailed],
+		[currentId, editAndResend],
 	);
 
 	const doArchiveSession = useCallback(
@@ -374,6 +381,7 @@ export function AppShell() {
 				await archiveSession(path);
 			} catch {
 				// usePiWeb exposes the request failure in the shared error banner.
+				return;
 			}
 			// 归档后会话立刻离开工作区列表（服务端同时让它收工）。正在看的会话被归档时
 			// 必须切走：先取同一工作区的另一个可见会话，没有就回到空态（工作区仍留在侧栏）。
@@ -432,6 +440,7 @@ export function AppShell() {
 			provider: effective?.provider,
 			modelId: effective?.id,
 			thinking: heroThinking || undefined,
+			mode: heroMode,
 		});
 		if (!p) return { success: false };
 		// Bind before the new-session render. In-flight ChatInput callbacks still own
@@ -521,6 +530,8 @@ export function AppShell() {
 
 	// 项目栏/文件查看器的工作区：当前会话的工作区优先，快照未到时回落到会话列表里的 cwd
 	const panelCwd = snapshot?.cwd || currentSession?.cwd || heroCwd || knownCwds[0] || "";
+	const activeSnapshot = currentPath && snapshot?.sessionPath && samePath(snapshot.sessionPath, currentPath) ? snapshot : null;
+	const activeWorkspaceCwd = currentPath ? (activeSnapshot?.cwd || currentSession?.cwd || "") : heroCwd;
 
 	// Git 面板自动刷新：pi 每完成一个会改动文件的工具，或一轮结束时，静默重拉
 	const mutatingDone = useMemo(
@@ -528,6 +539,8 @@ export function AppShell() {
 		[state.tools],
 	);
 	const [panelRefreshKey, setPanelRefreshKey] = useState(0);
+	const [gitSummary, setGitSummary] = useState<{ available: boolean; isRepo: boolean; branch: string | null; detached: boolean; files: unknown[]; statusError?: string } | null>(null);
+	const [gitSummaryError, setGitSummaryError] = useState(false);
 	const prevMutatingRef = useRef(mutatingDone);
 	const prevStreamingRef = useRef(isStreaming);
 	useEffect(() => {
@@ -540,6 +553,31 @@ export function AppShell() {
 		if (prevStreamingRef.current && !isStreaming) setPanelRefreshKey((k) => k + 1);
 		prevStreamingRef.current = isStreaming;
 	}, [isStreaming]);
+	useEffect(() => {
+		const controller = new AbortController();
+		setGitSummary(null);
+		setGitSummaryError(false);
+		if (!activeWorkspaceCwd) return () => controller.abort();
+		void (async () => {
+			try {
+				const response = await fetch(`/api/git?cwd=${encodeURIComponent(activeWorkspaceCwd)}`, { signal: controller.signal });
+				const body = await response.json();
+				if (!response.ok || !body.success) throw new Error(body.error || "Git 状态读取失败");
+				if (!controller.signal.aborted) setGitSummary(body.data);
+			} catch {
+				if (!controller.signal.aborted) setGitSummaryError(true);
+			}
+		})();
+		return () => controller.abort();
+	}, [activeWorkspaceCwd, panelRefreshKey]);
+	const gitBranchLabel = gitSummary?.isRepo ? (gitSummary.detached ? "HEAD" : gitSummary.branch || "—") : "—";
+	const gitStatusLabel = !activeWorkspaceCwd ? "未选择"
+		: gitSummaryError || gitSummary?.statusError ? "状态未知"
+		: !gitSummary ? "读取中"
+		: !gitSummary.available ? "Git 不可用"
+		: !gitSummary.isRepo ? "非仓库"
+		: gitSummary.files.length ? `${gitSummary.files.length} 改动` : "干净";
+	const gitCanCommit = Boolean(gitSummary?.isRepo && !gitSummary.statusError && gitSummary.files.length);
 
 	const insertIntoComposer = useCallback((text: string) => {
 		const textarea = document.querySelector<HTMLTextAreaElement>('[data-testid="composer"] textarea');
@@ -553,12 +591,12 @@ export function AppShell() {
 		requestAnimationFrame(() => textarea?.focus());
 	}, [draftKey, updateDraft]);
 	const openInEditor = useCallback(
-		async (filePath: string) => {
+		async (filePath: string, cwdOverride?: string) => {
 			try {
 				const r = await fetch("/api/files", {
 					method: "POST",
 					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({ action: "open", cwd: panelCwd, path: filePath }),
+					body: JSON.stringify({ action: "open", cwd: cwdOverride || panelCwd, path: filePath }),
 				});
 				const j = await r.json();
 				if (!j.success) throw new Error(j.error || "failed to open file");
@@ -635,28 +673,159 @@ export function AppShell() {
 	);
 
 	return (
-		<div
-			className="grid h-screen w-screen overflow-hidden"
-			style={{
-				gridTemplateColumns: gridCols,
-				transition: dragging ? "none" : "grid-template-columns var(--ds-duration-slow) var(--ds-ease-in-out)",
-				background: "var(--dsw-bg-base)",
-			}}
-		>
-			{/* 侧栏 */}
-			<div
-				className="min-h-0 overflow-hidden"
-				style={isNarrow ? {
-					position: "fixed",
-					inset: "0 auto 0 0",
-					width: "min(86vw, 340px)",
-					zIndex: 90,
-					background: "var(--dsw-sidebar-fill)",
-					transform: mobileSidebarOpen ? "translateX(0)" : "translateX(-105%)",
-					transition: "transform var(--ds-duration-normal) var(--ds-ease-in-out)",
-					boxShadow: mobileSidebarOpen ? "var(--dsw-elevation-prominent)" : "none",
-				} : { background: "var(--dsw-sidebar-fill)" }}
+		<div className="flex flex-col h-screen w-screen overflow-hidden bg-clay-bg text-clay-slate-text antialiased">
+			{/* 全局粘土顶部导航栏 (Screen 1, 2, 3, 8) */}
+			<header className="pw-top-navbar h-14 px-6 flex items-center justify-between border-b border-white/60 bg-white/70 backdrop-blur-md z-30 shrink-0 select-none">
+				{/* Left: Engine brand badge + Code Workbench capsule */}
+				<div className="flex items-center gap-3 min-w-0">
+					<div className="w-9 h-9 clay-badge bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-white font-black text-lg shadow-sm">
+						π
+					</div>
+					<div className="flex items-baseline gap-2">
+						<span className="font-extrabold text-lg tracking-tight text-slate-900 dark:text-slate-100">piweb</span>
+						<span className="text-xs font-bold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-950/70 dark:text-emerald-300 tracking-wide uppercase border border-emerald-300 dark:border-emerald-800">Code Workbench</span>
+					</div>
+				</div>
+
+				{/* Center: Session Breadcrumb Status Pill */}
+				<div className="hidden lg:flex items-center gap-2 px-3 py-1.5 clay-inset bg-white dark:bg-slate-900 rounded-full text-xs font-medium border border-slate-200 dark:border-slate-800 min-w-0">
+					<span className={`w-2.5 h-2.5 rounded-full flex-none ${state.connected ? "bg-emerald-500 animate-pulse" : "bg-slate-400"}`} />
+					<span className="font-bold text-slate-800 dark:text-slate-200">PiWeb</span>
+					<span className="text-slate-400">/</span>
+					<span className="font-semibold text-slate-600 dark:text-slate-400">SESSION</span>
+					<span className="text-slate-400">/</span>
+					<span className="text-slate-900 dark:text-slate-100 max-w-xs truncate font-bold">
+						{currentId ? title : (heroCwd ? (getWorkspaceName ? getWorkspaceName(heroCwd) : basename(heroCwd)) : t.newChat)}
+					</span>
+				</div>
+
+				{/* Center/Nav: View Switcher Pill Tabs */}
+				<nav aria-label="视图切换" className="clay-inset flex min-w-0 items-center overflow-x-auto p-1 rounded-full bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 gap-1 text-xs font-semibold">
+					<button
+						type="button"
+						className={`px-3.5 py-1 rounded-full transition-all duration-150 ${
+							activeTopView === "workbench"
+								? "clay-btn-peach text-white font-bold shadow-sm"
+								: "text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-white"
+						}`}
+						onClick={() => setActiveTopView("workbench")}
+					>
+						工作台
+					</button>
+					<button
+						type="button"
+						className={`flex items-center gap-1.5 px-3.5 py-1 rounded-full transition-all duration-150 ${
+							activeTopView === "diff"
+								? "clay-btn-peach text-white font-bold shadow-sm"
+								: "text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-white"
+						}`}
+						onClick={() => { setPanelRefreshKey((key) => key + 1); setActiveTopView("diff"); }}
+					>
+						<span>差异对比</span>
+						<span className={`text-[10px] px-1.5 py-0.2 rounded-full font-bold ${
+							activeTopView === "diff" ? "bg-white/30 text-white" : "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/70 dark:text-emerald-300"
+						}`}>
+							{gitSummary?.isRepo ? gitSummary.files.length : "—"}
+						</span>
+					</button>
+					<button
+						type="button"
+						className={`shrink-0 px-3.5 py-1 rounded-full transition-all duration-150 ${
+							activeTopView === "tests"
+								? "clay-btn-peach text-white font-bold shadow-sm"
+								: "text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-white"
+						}`}
+						onClick={() => setActiveTopView("tests")}
+					>
+						测试检查器
+					</button>
+					<button
+						type="button"
+						className={`flex items-center gap-1.5 px-3.5 py-1 rounded-full transition-all duration-150 ${
+							activeTopView === "swarm"
+								? "clay-btn-peach text-white font-bold shadow-sm"
+								: "text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-white"
+						}`}
+						onClick={() => setActiveTopView("swarm")}
+					>
+						<span>智能体群</span>
+					</button>
+				</nav>
+
+				{/* Right: Actions */}
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						className="clay-badge hidden md:flex items-center gap-1.5 px-3 py-1 text-xs font-mono text-slate-800 dark:text-slate-200 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-sm font-semibold hover:border-slate-300 transition-all cursor-pointer"
+						title="Git 工作区状态（点击进入差异对比）"
+						onClick={() => {
+							setPanelRefreshKey((key) => key + 1);
+							setActiveTopView("diff");
+						}}
+					>
+						<IconBranchOutline16 size={13} className="text-emerald-500" />
+						<span>{gitBranchLabel}</span>
+						<span className="text-slate-400">·</span>
+						<span className="text-amber-600 dark:text-amber-400 font-bold">{gitStatusLabel}</span>
+					</button>
+					<button
+						type="button"
+						className="w-8 h-8 clay-btn bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors"
+						title={t.projectPanel}
+						aria-label={t.projectPanel}
+						data-testid="project-toggle"
+						onClick={() => toggleProject()}
+					>
+						<IconFolderOpenOutline16 size={15} />
+					</button>
+					<button
+						type="button"
+						className="w-8 h-8 clay-btn bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors"
+						title={t.promptPanel}
+						aria-label={t.promptPanel}
+						data-testid="prompt-panel-toggle"
+						onClick={() => {
+							setPromptsOpen((open) => !open);
+							setSelected(null);
+							setGitDetailsOpen(false);
+						}}
+					>
+						<IconAgentPresetOutline16 size={15} />
+					</button>
+					<button
+						type="button"
+						className="w-8 h-8 clay-btn bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors"
+						title={t.settings}
+						aria-label={t.settings}
+						data-testid="settings-toggle"
+						onClick={() => setSettingsOpen(true)}
+					>
+						<IconSettingsOutline16 size={15} />
+					</button>
+				</div>
+			</header>
+
+			{/* 三栏/四栏悬浮粘土卡片主体容器 */}
+			<main
+				className="pw-shell grid flex-1 min-h-0 overflow-hidden p-3 gap-3 bg-clay-bg"
+				style={{
+					gridTemplateColumns: gridCols,
+					transition: dragging ? "none" : "grid-template-columns var(--ds-duration-slow) var(--ds-ease-in-out)",
+				}}
 			>
+				{/* 侧栏卡片 */}
+				<div
+					className="pw-sidebar-surface clay-surface rounded-3xl p-3 shrink-0 flex flex-col justify-between overflow-hidden shadow-md"
+					style={isNarrow ? {
+						position: "fixed",
+						inset: "0 auto 0 0",
+						width: "min(86vw, 340px)",
+						zIndex: 90,
+						transform: mobileSidebarOpen ? "translateX(0)" : "translateX(-105%)",
+						transition: "transform var(--ds-duration-normal) var(--ds-ease-in-out)",
+						boxShadow: mobileSidebarOpen ? "var(--dsw-elevation-prominent)" : "none",
+					} : undefined}
+				>
 				<SessionSidebar
 					sessions={sessions}
 					sessionListError={sessionListError}
@@ -701,15 +870,104 @@ export function AppShell() {
 					}}
 					onAddWorkspace={() => void addWorkspaceByPicker()}
 					draftCwd={!currentId ? heroCwd || null : null}
+					gitBranch={gitBranchLabel}
+					gitStatus={gitStatusLabel}
+					canAskCommit={gitCanCommit}
+					onAskCommit={() => { setActiveTopView("workbench"); insertIntoComposer(t.gitAskCommitPrompt); }}
+					activeTopView={activeTopView}
+					onSelectTopView={(v) => { setActiveTopView(v); setMobileSidebarOpen(false); }}
 				/>
 			</div>
 
-			{/* 四列网格中始终保留项目列，否则关闭项目栏时会话区会落进 0px 列。 */}
-			{!isNarrow && (projectColumn || <div aria-hidden="true" />)}
+				{/* 四列网格中始终保留项目列 */}
+				{!isNarrow && (projectColumn ? (
+					<div className="clay-surface rounded-3xl p-3 shrink-0 flex flex-col overflow-hidden shadow-md">
+						{projectColumn}
+					</div>
+				) : <div aria-hidden="true" />)}
 
-			{/* 会话区 */}
-			<div className="pi-main flex min-h-0 min-w-0 flex-col">
-				{!currentId ? (
+				{/* 会话区与多视图卡片 (Screen 1 & Screen 3) */}
+				<section className={`pi-main pw-main flex flex-col clay-card rounded-3xl overflow-hidden min-h-0 min-w-0 relative bg-white shadow-md${currentId ? "" : " pw-main-hero"}`}>
+
+
+				{/* 视图内容切换 */}
+				{activeTopView === "diff" ? (
+					<div className="flex-1 min-h-0 overflow-hidden p-4 sm:p-6 bg-slate-50/50 dark:bg-slate-950/30">
+						<div className="clay-card mx-auto h-full max-w-6xl overflow-hidden rounded-3xl bg-white/85 dark:bg-slate-900/80">
+							<GitPanel cwd={activeWorkspaceCwd} refreshKey={panelRefreshKey} onClose={() => setActiveTopView("workbench")} onOpenFile={(filePath) => void openInEditor(filePath, activeWorkspaceCwd)} />
+						</div>
+					</div>
+				) : activeTopView === "tests" ? (
+					<div className="flex-1 min-h-0 overflow-y-auto p-4 sm:p-6 bg-slate-50/50 dark:bg-slate-950/30">
+						<TestInspectorPod
+							cwd={activeWorkspaceCwd}
+							onClose={() => setActiveTopView("workbench")}
+							onSwitchToWorkbench={() => setActiveTopView("workbench")}
+							onSwitchToDiff={() => setActiveTopView("diff")}
+						/>
+					</div>
+				) : activeTopView === "swarm" ? (
+					<div className="flex-1 min-h-0 overflow-hidden p-3 sm:p-4 bg-slate-50/50 dark:bg-slate-950/30">
+						<SwarmCoordinatorPod
+							cwd={activeWorkspaceCwd}
+							onClose={() => setActiveTopView("workbench")}
+							onSwitchToWorkbench={() => setActiveTopView("workbench")}
+							projectTrust={activeSnapshot?.projectTrust}
+							onWorkspaceChanged={() => setPanelRefreshKey((key) => key + 1)}
+						/>
+					</div>
+				) : activeTopView === "archive" ? (
+					<div className="flex-1 min-h-0 overflow-y-auto p-6 flex flex-col items-center bg-slate-50/40 dark:bg-slate-950/20">
+						<div className="clay-card max-w-2xl w-full p-6 rounded-3xl space-y-4">
+							<div className="flex items-center justify-between pb-3 border-b border-slate-200/60 dark:border-slate-800/60">
+								<h2 className="text-base font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2">
+									<IconArchiveOutline20 size={18} className="text-slate-400" />
+									已归档会话 ({archivedSessions.length})
+								</h2>
+								<span className="text-xs text-slate-400">保留历史记录，不占用主工作台</span>
+							</div>
+							{archivedSessions.length === 0 ? (
+								<div className="text-center py-12 text-sm text-slate-400">暂无归档会话</div>
+							) : (
+								<div className="space-y-2">
+									{archivedSessions.map((session) => (
+										<div
+											key={session.path}
+											className="clay-card flex items-center justify-between p-3.5 rounded-2xl hover:scale-[1.01] transition-transform"
+										>
+											<div className="min-w-0 flex-1">
+												<div className="font-semibold text-sm text-slate-800 dark:text-slate-200 truncate">{session.name || session.firstMessage || basename(session.path)}</div>
+												<div className="text-xs text-slate-400 truncate mt-0.5">{session.cwd}</div>
+											</div>
+											<div className="flex items-center gap-2 ml-4">
+												<button
+													type="button"
+													className="clay-btn clay-btn-soft px-3 py-1.5 text-xs text-slate-700 dark:text-slate-200"
+													onClick={() => {
+														doUnarchiveSession(session.path);
+														setActiveTopView("workbench");
+													}}
+												>
+													恢复会话
+												</button>
+												<button
+													type="button"
+													className="clay-btn clay-btn-peach px-3 py-1.5 text-xs text-white"
+													onClick={() => {
+														openSession(session.path);
+														setActiveTopView("workbench");
+													}}
+												>
+													查看
+												</button>
+											</div>
+										</div>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				) : !currentId ? (
 					<div className="flex min-h-0 flex-1 flex-col">
 						<Hero
 								draft={composerDrafts.current.get(heroDraftKey) ?? EMPTY_CHAT_DRAFT}
@@ -728,6 +986,9 @@ export function AppShell() {
 							getWorkspaceName={getWorkspaceName}
 							onSend={heroSend}
 							models={modelChoices}
+							modelLoading={modelLoading}
+							modelLoadError={modelLoadError}
+							onRetryModels={() => void refreshModels()}
 							providerNames={providerNames}
 							authByProvider={authByProvider}
 							addWorkspaceByPicker={addWorkspaceByPicker}
@@ -739,8 +1000,11 @@ export function AppShell() {
 							}}
 							defaultModel={defaultModel}
 							heroModelLevels={heroModelLevels}
-							heroThinking={heroThinking}
-							onSelectHeroThinking={setHeroThinking}
+								heroThinking={heroThinking}
+								onSelectHeroThinking={setHeroThinking}
+								heroMode={heroMode}
+								onSelectHeroMode={setHeroMode}
+								onOpenSwarm={() => setActiveTopView("swarm")}
 						/>
 						{/* 草稿阶段的错误行内显示（不再弹右下角） */}
 						{state.error && (
@@ -758,43 +1022,9 @@ export function AppShell() {
 					</div>
 				) : (
 					<>
-							{/* 头部：标题行 + 页签行（dsh 两行式） */}
-							<div className="hairline-b px-5 pb-0 pt-3">
-								<div className="flex items-center gap-3">
-									<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14.5, fontWeight: 600 }}>
-										{title}
-									</span>
-									{/* 项目生长入口；轨迹详情由对话内工具行点击唤起 */}
-									<button
-										type="button"
-										className="icon-btn"
-										style={{ width: 30, height: 30, background: projectOpen ? "var(--dsw-active)" : undefined }}
-										title={`${t.projectPanel} (Ctrl/⌘+Shift+E)`}
-										aria-label={t.projectPanel}
-										data-testid="project-toggle"
-										onClick={() => toggleProject()}
-									>
-										<IconFolderOpenOutline16 size={15} />
-									</button>
-									{/* 提示词来源：系统提示词 / 记忆 / 技能 / 模板 / 工具提示词集中列出，点开即看 */}
-									<button
-										type="button"
-										className="icon-btn"
-										style={{ width: 30, height: 30, background: promptsOpen ? "var(--dsw-active)" : undefined }}
-										title={t.promptPanel}
-										aria-label={t.promptPanel}
-										data-testid="prompt-panel-toggle"
-										onClick={() => {
-											setPromptsOpen((open) => !open);
-											setSelected(null);
-											setGitDetailsOpen(false);
-										}}
-									>
-										<IconAgentPresetOutline16 size={15} />
-									</button>
-								</div>
+							{/* 会话信任横幅 */}
 							{projectTrust?.required && !projectTrust.trusted && (
-								<div className="mt-2 flex flex-wrap items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", border: "0.5px solid var(--dsw-border-l2)" }} role="status">
+								<div className="mx-5 mt-2 flex flex-wrap items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", border: "0.5px solid var(--dsw-border-l2)" }} role="status">
 									<span style={{ color: "var(--dsw-warn)", fontWeight: 600 }}>⚠</span>
 									<span className="min-w-0 flex-1">{projectTrust.source === "default-never" || projectTrust.source === "remembered" ? t.projectTrustBannerNever : t.projectTrustBanner}</span>
 									<button className="btn-primary-white" style={{ height: 26, padding: "0 10px", fontSize: 12 }} onClick={() => void setProjectTrust(true)}>{t.projectTrustAllow}</button>
@@ -803,8 +1033,6 @@ export function AppShell() {
 									)}
 								</div>
 							)}
-							{/* 轨迹页签已移除：轨迹按需查看（对话里的工具行 → 轨迹详情），不再占用主区域 */}
-						</div>
 
 						{/* 内容：只有对话区，轨迹按需在详情栏查看 */}
 						{!snapshot ? (
@@ -846,19 +1074,19 @@ export function AppShell() {
 									onFork={handleFork}
 									onEditMessage={doEditMessage}
 								/>
-								<div className="px-4 pb-3 pt-2">
+								<div className="pw-session-composer px-4 pb-3 pt-2">
 									<div className="mx-auto w-full" style={{ maxWidth: "var(--dsh-composer-card-max-width)" }}>
 										{/* 运行状态指示由 ChatWindow 内的 WorkingIndicator 承担（含工具/输出 token 信息） */}
 										<ChatInput
 											key={draftKey}
-												draft={composerDrafts.current.get(draftKey) ?? EMPTY_CHAT_DRAFT}
-												onDraftChange={saveSessionDraft}
-												onUploadError={(message) => failUpload(draftKey, message)}
-												onUploadProgress={(delta) => trackUpload(draftKey, delta)}
-												uploadFailure={uploadFailures[draftKey]}
-												pendingUploadCount={uploadCounts[draftKey] ?? 0}
-												pendingSend={pendingSends[draftKey] ?? false}
-												onSendPendingChange={(pending) => trackSend(draftKey, pending)}
+											draft={composerDrafts.current.get(draftKey) ?? EMPTY_CHAT_DRAFT}
+											onDraftChange={saveSessionDraft}
+											onUploadError={(message) => failUpload(draftKey, message)}
+											onUploadProgress={(delta) => trackUpload(draftKey, delta)}
+											uploadFailure={uploadFailures[draftKey]}
+											pendingUploadCount={uploadCounts[draftKey] ?? 0}
+											pendingSend={pendingSends[draftKey] ?? false}
+											onSendPendingChange={(pending) => trackSend(draftKey, pending)}
 											isStreaming={isStreaming}
 											contextPercent={snapshot?.contextUsage?.percent ?? null}
 											contextTokens={snapshot?.contextUsage?.tokens ?? null}
@@ -869,9 +1097,15 @@ export function AppShell() {
 											thinkingLevel={snapshot?.thinkingLevel}
 											thinkingLevels={snapshot?.thinkingLevels ?? ["off", "minimal", "low", "medium", "high", "xhigh", "max"]}
 											models={modelChoices}
+											modelLoading={modelLoading}
+											modelLoadError={modelLoadError}
+											onRetryModels={() => void refreshModels()}
 											providerNames={providerNames}
 											authByProvider={authByProvider}
 											queue={snapshot?.queue ?? { steering: [], followUp: [] }}
+											workflow={snapshot?.workflow}
+											onWorkflowModeChange={(mode) => sendCommand({ cmd: "setWorkflowMode", mode })}
+											onApprovePlan={() => sendCommand({ cmd: "approvePlan" })}
 											commands={slashCommands}
 											onCommand={runSlashCommand}
 											onSend={sendPrompt}
@@ -893,45 +1127,46 @@ export function AppShell() {
 												{Object.entries(state.extensionStatuses).map(([k, v]) => <span key={k}>{v}</span>)}
 											</div>
 										)}
-										</div>
+									</div>
 								</div>
 								</div>
 								)
 						}
 					</>
 				)}
-			</div>
+				</section>
 
-			{/* 提示词来源 / 轨迹 / Git 详情栏 */}
-			{(selected || gitDetailsOpen || promptsOpen) && (
-				<div
-					className="flex min-h-0 flex-col overflow-hidden"
-					style={isNarrow ? {
-						position: "fixed",
-						inset: "0 0 0 auto",
-						width: "min(92vw, 640px)",
-						zIndex: 90,
-						background: "var(--dsw-sidebar-fill)",
-						boxShadow: "var(--dsw-elevation-prominent)",
-					} : { background: "var(--dsw-sidebar-fill)", borderLeft: "0.5px solid var(--dsw-border-l2)" }}
-				>
-					<div className="min-h-0 flex-1">
-						{promptsOpen ? (
-							<PromptPanel
-								cwd={panelCwd}
-								sessionId={currentId}
-								refreshKey={currentId}
-								onOpenContent={(path, content) => viewer.openStatic(path, content)}
-								onClose={() => setPromptsOpen(false)}
-							/>
-						) : selected ? (
-							<TrajInspector entry={selected} onClose={() => setSelected(null)} />
-						) : (
-							<GitPanel cwd={panelCwd} refreshKey={panelRefreshKey} onClose={() => setGitDetailsOpen(false)} onAskCommit={() => insertIntoComposer(t.gitAskCommitPrompt)} onOpenFile={openInEditor} />
-						)}
-					</div>
-				</div>
-			)}
+				{/* 提示词来源 / 轨迹 / Git 详情栏卡片 */}
+				{(selected || gitDetailsOpen || promptsOpen) && (
+					<aside
+						className="pw-details-surface clay-surface rounded-3xl p-4 shrink-0 flex flex-col overflow-hidden shadow-md"
+						data-purpose="inspector-panel"
+						style={isNarrow ? {
+							position: "fixed",
+							inset: "0 0 0 auto",
+							width: "min(92vw, 640px)",
+							zIndex: 90,
+							boxShadow: "var(--dsw-elevation-prominent)",
+						} : undefined}
+					>
+						<div className="min-h-0 flex-1 flex flex-col">
+							{promptsOpen ? (
+								<PromptPanel
+									cwd={panelCwd}
+									sessionId={currentId}
+									refreshKey={currentId}
+									onOpenContent={(path, content) => viewer.openStatic(path, content)}
+									onClose={() => setPromptsOpen(false)}
+								/>
+							) : selected ? (
+								<TrajInspector entry={selected} onClose={() => setSelected(null)} />
+							) : (
+								<GitPanel cwd={panelCwd} refreshKey={panelRefreshKey} onClose={() => setGitDetailsOpen(false)} onAskCommit={() => insertIntoComposer(t.gitAskCommitPrompt)} onOpenFile={openInEditor} />
+							)}
+						</div>
+					</aside>
+				)}
+			</main>
 
 			{/* 拖拽手柄 */}
 			{!isNarrow && !sidebarCollapsed && (
@@ -1045,6 +1280,9 @@ function Hero({
 	getWorkspaceName,
 	onSend,
 	models,
+	modelLoading,
+	modelLoadError,
+	onRetryModels,
 	providerNames,
 	authByProvider,
 	addWorkspaceByPicker,
@@ -1054,6 +1292,9 @@ function Hero({
 	heroModelLevels,
 	heroThinking,
 	onSelectHeroThinking,
+	heroMode,
+	onSelectHeroMode,
+	onOpenSwarm,
 }: {
 	draft: ChatDraft;
 	onDraftChange: (update: ChatDraftUpdate) => void;
@@ -1071,6 +1312,9 @@ function Hero({
 	getWorkspaceName?: (cwd: string) => string;
 	onSend: (text: string, images: ImageAttachment[]) => Promise<{ success: boolean }>;
 	models: ModelChoice[];
+	modelLoading: boolean;
+	modelLoadError: string | null;
+	onRetryModels: () => void;
 	providerNames: Record<string, string>;
 	authByProvider: Record<string, boolean>;
 	addWorkspaceByPicker: () => Promise<string | null>;
@@ -1080,6 +1324,9 @@ function Hero({
 	heroModelLevels: string[];
 	heroThinking: string;
 	onSelectHeroThinking: (level: string) => void;
+	heroMode: WorkflowMode;
+	onSelectHeroMode: (mode: WorkflowMode) => void;
+	onOpenSwarm?: () => void;
 }) {
 	const { t } = useI18n();
 	const [wsMenu, setWsMenu] = useState(false);
@@ -1097,81 +1344,106 @@ function Hero({
 	}, [wsMenu]);
 
 	const pickWorkspace = async () => {
+		setWsMenu(false);
 		const p = await addWorkspaceByPicker();
 		if (p) {
 			setCwd(p);
-			setWsMenu(false);
 		}
 	};
 
 	const currentLabel = cwd ? (getWorkspaceName ? getWorkspaceName(cwd) : basename(cwd)) : t.startWith;
 
 	return (
-		<div className="flex h-full min-h-0 flex-col items-center justify-center px-6">
-			{/* 品牌行：仅 π 标 */}
-			<div className="mb-5 flex items-center justify-center gap-3">
-				<PiMark size={40} />
-			</div>
+		<div className="pw-hero flex h-full min-h-0 flex-col items-center justify-center px-6 py-8 overflow-y-auto relative">
+			{/* Ambient orbs */}
+			<div className="absolute -top-10 left-12 w-64 h-64 bg-emerald-200/40 dark:bg-emerald-950/20 rounded-full filter blur-3xl opacity-60 pointer-events-none" />
+			<div className="absolute top-1/3 -right-16 w-80 h-80 bg-sky-200/40 dark:bg-sky-950/20 rounded-full filter blur-3xl opacity-60 pointer-events-none" />
+			<div className="absolute bottom-6 left-1/4 w-72 h-72 bg-orange-200/30 dark:bg-orange-950/20 rounded-full filter blur-3xl opacity-50 pointer-events-none" />
 
-			{/* 工作区芯片行 + 输入卡 同宽容器（芯片行与卡片左对齐） */}
-			<div className="w-full flex flex-col items-stretch mx-auto" style={{ maxWidth: "var(--dsh-composer-card-max-width)" }}>
-				<div ref={menuRef} className="mb-3 flex items-center gap-3" style={{ paddingLeft: 7 }}>
-					<div className="relative">
-						<button className="hero-chip" data-open={wsMenu} onClick={() => setWsMenu((v) => !v)}>
-							<IconFolderClose16 className="hero-chip-icon" size={16} />
-							<span className="max-w-[220px] truncate" suppressHydrationWarning>{currentLabel}</span>
-							<span className="chevron">
-								<IconChevronDown14 size={14} />
-							</span>
-						</button>
-						{wsMenu && (
-							<div className="popover absolute bottom-9 left-0 z-50 w-56 py-1">
-								{knownCwds.map((c) => {
-									const itemLabel = getWorkspaceName ? getWorkspaceName(c) : basename(c);
-									return (
-										<button
-											key={c}
-											className="flex w-full items-center gap-2.5 px-3.5 py-2 text-left transition-colors"
-											style={{
-												fontSize: 13,
-												background: cwd === c ? "var(--dsw-accent-soft)" : "transparent",
-												color: cwd === c ? "var(--dsw-accent)" : "inherit",
-											}}
-											onMouseEnter={(e) => {
-												if (cwd !== c) e.currentTarget.style.background = "var(--dsw-hover)";
-											}}
-											onMouseLeave={(e) => {
-												if (cwd !== c) e.currentTarget.style.background = "transparent";
-											}}
-											onClick={() => {
-												setCwd(c);
-												setWsMenu(false);
-											}}
-										>
-											<IconFolderClose16 size={14} style={{ flex: "none", color: cwd === c ? "var(--dsw-accent)" : "var(--dsw-label-tertiary)" }} />
-											<span className="min-w-0 flex-1 truncate">{itemLabel}</span>
-											{cwd === c && <IconCheckOutline14 size={13} style={{ flex: "none" }} />}
-										</button>
-									);
-								})}
-								<div className="my-1" style={{ borderTop: "0.5px solid var(--dsw-border-l2)" }} />
-								<button
-									className="flex w-full items-center gap-2.5 px-3.5 py-2 text-left transition-colors"
-									style={{ fontSize: 13 }}
-									onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-									onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-									onClick={pickWorkspace}
-								>
-									<IconProjectAddOutline16 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
-									{t.addWorkspace}
-								</button>
-							</div>
-						)}
+			{/* 工作区芯片行 + 输入卡 同宽容器 */}
+			<div className="pw-hero-content w-full flex flex-col items-stretch mx-auto my-auto z-10" style={{ maxWidth: "var(--dsh-composer-card-max-width)" }}>
+				<div className="pw-hero-intro mb-4 text-center">
+					<div className="flex items-center justify-center gap-4 px-4 py-2 rounded-full clay-card mb-3 mx-auto w-fit animate-bounce duration-1000 border border-slate-200 dark:border-slate-800">
+						<div className="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center shadow-[inset_1px_1px_2px_rgba(255,255,255,0.7)] text-white font-mono font-bold text-sm">
+							π
+						</div>
+						<div className="flex items-center gap-2">
+							<span className="font-extrabold tracking-wider text-slate-900 dark:text-slate-100 text-xs sm:text-sm">PIWEB</span>
+							<span className="text-slate-400">/</span>
+							<span className="text-[10px] tracking-widest text-slate-600 dark:text-slate-400 font-bold uppercase">WORKBENCH</span>
+						</div>
+						<span className="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-slate-600" />
+						<div className="flex items-center gap-1.5 px-2.5 py-0.5 rounded-full clay-inset border border-slate-200 dark:border-slate-800">
+							<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+							<span className="font-mono text-[11px] text-emerald-700 dark:text-emerald-300 font-bold tracking-wider">01 / READY</span>
+						</div>
+					</div>
+					<h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 mb-2 drop-shadow-sm">
+						让想法落到代码。
+					</h1>
+					<p className="text-sm text-slate-600 dark:text-slate-300 max-w-lg mx-auto leading-relaxed font-medium">
+						规划、执行、验证。一个专注于交付的轻量工作台。
+					</p>
+
+					{/* 工作区选择器 */}
+					<div ref={menuRef} className="pw-hero-workspace mt-4 mb-3 flex items-center justify-center gap-2.5">
+						<div className="relative">
+							<button
+								type="button"
+								className="clay-btn clay-btn-soft flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-bold text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-700 shadow-sm"
+								data-open={wsMenu}
+								onClick={() => setWsMenu((v) => !v)}
+							>
+								<IconFolderClose16 className="text-amber-500 flex-none" size={15} />
+								<span className="max-w-[240px] truncate" suppressHydrationWarning>{currentLabel}</span>
+								<IconChevronDown14 size={13} className="text-slate-500 dark:text-slate-400" />
+							</button>
+							{wsMenu && (
+								<div className="clay-card popover absolute top-full left-1/2 -translate-x-1/2 z-50 w-64 mt-2 p-1.5 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-800">
+									<div className="px-3 py-1.5 text-[11px] font-bold text-slate-500 dark:text-slate-400">选择工作区</div>
+									{knownCwds.map((c) => {
+										const itemLabel = getWorkspaceName ? getWorkspaceName(c) : basename(c);
+										return (
+											<button
+												key={c}
+												className="flex w-full items-center gap-2.5 px-3 py-2 text-left rounded-xl transition-colors text-xs font-medium"
+												style={{
+													background: cwd === c ? "var(--dsw-accent-soft)" : "transparent",
+													color: cwd === c ? "var(--dsw-accent)" : "inherit",
+												}}
+												onClick={() => {
+													setCwd(c);
+													setWsMenu(false);
+												}}
+											>
+												<IconFolderClose16 size={14} style={{ flex: "none", color: cwd === c ? "var(--dsw-accent)" : "var(--dsw-label-tertiary)" }} />
+												<span className="min-w-0 flex-1 truncate font-medium">{itemLabel}</span>
+												{cwd === c && <IconCheckOutline14 size={13} style={{ flex: "none" }} />}
+											</button>
+										);
+									})}
+									<div className="my-1 border-t border-slate-200/50 dark:border-slate-800/50" />
+									<button
+										type="button"
+										className="flex w-full items-center gap-2.5 px-3 py-2 text-left rounded-xl transition-colors text-xs text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 font-semibold"
+										onClick={pickWorkspace}
+									>
+										<IconProjectAddOutline16 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
+										{t.addWorkspace}
+									</button>
+								</div>
+							)}
+						</div>
+						<div className="px-3 py-1.5 rounded-full clay-inset text-slate-700 dark:text-slate-300 text-xs font-mono font-semibold flex items-center gap-1.5 border border-slate-200 dark:border-slate-800">
+							<span className="text-amber-500">⚡</span>
+							<span>在当前工作区执行</span>
+						</div>
 					</div>
 				</div>
 
 				{/* 输入卡 */}
-				<ChatInput
+				<div className="w-full mb-4">
+					<ChatInput
 						draft={draft}
 						onDraftChange={onDraftChange}
 						onUploadError={onUploadError}
@@ -1180,26 +1452,60 @@ function Hero({
 						pendingUploadCount={pendingUploadCount}
 						pendingSend={pendingSend}
 						onSendPendingChange={onSendPendingChange}
-					commands={commands}
-					onCommand={onCommand}
-					isStreaming={false}
-					contextPercent={null}
-					contextTokens={null}
-					contextWindow={null}
-					contextVisible={false}
-					model={heroModel ? models.find((m) => m.provider === heroModel.provider && m.id === heroModel.id) ?? { provider: heroModel.provider, id: heroModel.id, name: heroModel.id, reasoning: false, contextWindow: 0 } : defaultModel}
-					thinkingLevel={heroThinking || undefined}
-					thinkingLevels={heroModelLevels}
-					models={models}
-					providerNames={providerNames}
-					authByProvider={authByProvider}
-					queue={{ steering: [], followUp: [] }}
-					onSend={onSend}
-					onSteer={() => ({ success: false })}
-					onAbort={() => {}}
-					onSelectModel={onSelectHeroModel}
-					onSelectLevel={onSelectHeroThinking}
-				/>
+						commands={commands}
+						onCommand={onCommand}
+						isStreaming={false}
+						contextPercent={null}
+						contextTokens={null}
+						contextWindow={null}
+						contextVisible={false}
+						model={heroModel ? models.find((m) => m.provider === heroModel.provider && m.id === heroModel.id) ?? { provider: heroModel.provider, id: heroModel.id, name: heroModel.id, reasoning: false, contextWindow: 0 } : defaultModel}
+						thinkingLevel={heroThinking || undefined}
+						thinkingLevels={heroModelLevels}
+						models={models}
+						modelLoading={modelLoading}
+						modelLoadError={modelLoadError}
+						onRetryModels={onRetryModels}
+						providerNames={providerNames}
+						authByProvider={authByProvider}
+						queue={{ steering: [], followUp: [] }}
+						workflow={{ mode: heroMode, planStatus: "idle", goal: "" }}
+						onWorkflowModeChange={onSelectHeroMode}
+						onSend={onSend}
+						onSteer={() => ({ success: false })}
+						onAbort={() => {}}
+						onSelectModel={onSelectHeroModel}
+						onSelectLevel={onSelectHeroThinking}
+					/>
+					<div className="flex items-center justify-between px-2 pt-2 text-slate-500 dark:text-slate-400 font-mono text-xs font-medium">
+						<div className="flex items-center gap-3">
+							<span className="flex items-center gap-1"><kbd className="px-1.5 py-0.5 rounded clay-inset font-bold text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700">⏎</kbd> 发送</span>
+							<span className="flex items-center gap-1"><kbd className="px-1.5 py-0.5 rounded clay-inset font-bold text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700">⇧ ⏎</kbd> 换行</span>
+						</div>
+						<div className="flex items-center gap-1.5 text-emerald-700 dark:text-emerald-400 font-semibold">
+							<IconShieldOutline16 size={13} />
+							<span>主会话无系统级沙盒隔离</span>
+						</div>
+					</div>
+				</div>
+
+				{/* Telemetry bottom bar */}
+				<div className="flex items-center justify-center gap-4 text-slate-600 dark:text-slate-300 text-xs font-semibold tracking-wider">
+					<div className="flex items-center gap-1.5">
+						<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+						<span>极速热加载</span>
+					</div>
+					<span>•</span>
+					<div className="flex items-center gap-1.5">
+						<span className="w-1.5 h-1.5 rounded-full bg-sky-500" />
+						<span>MCP 扩展全兼容</span>
+					</div>
+					<span>•</span>
+					<div className="flex items-center gap-1.5">
+						<span className="w-1.5 h-1.5 rounded-full bg-orange-500" />
+						<span>端侧安全加固</span>
+					</div>
+				</div>
 			</div>
 		</div>
 	);