@rexvane/piweb 0.3.16 → 0.3.18

package/src/components/AppShell.tsx

@@ -7,7 +7,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PiMark } from "@/components/PiMark";
 import { ChatInput, EMPTY_CHAT_DRAFT, type ChatDraft, type ChatDraftUpdate } from "@/components/ChatInput";
-import { ChatWindow, SessionStatsBar } from "@/components/ChatWindow";
+import { ChatWindow, SessionStatsBar, type RoundBadge } from "@/components/ChatWindow";
 import { ExtensionDialogHost, ExtensionNotices } from "@/components/ExtensionUI";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
@@ -23,21 +23,14 @@ 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";
@@ -46,7 +39,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, WorkflowMode } from "@/lib/types";
+import type { ImageAttachment, TrajEntry } from "@/lib/types";
 
 // dsh ui-layout columns.ts 几何常量
 const SIDEBAR_MIN = 264;
@@ -79,8 +72,6 @@ export function AppShell() {
 		currentPath,
 		state,
 		models,
-		modelLoading,
-		modelLoadError,
 		addedWorkspaces,
 		removedWorkspaces,
 		workspaceAliases,
@@ -95,11 +86,9 @@ export function AppShell() {
 		setGroupBy,
 		setOrderBy,
 		addWorkspaceByPicker,
-		addWorkspaceByPath,
 		removeWorkspace,
 		refreshModels,
 		sendCommand,
-		editAndResend,
 		newSession,
 		openSession,
 		closeSession,
@@ -155,8 +144,6 @@ 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(() => {
@@ -370,9 +357,15 @@ export function AppShell() {
 	const doEditMessage = useCallback(
 		async (entryId: string, text: string) => {
 			if (!currentId) return;
-			await editAndResend(entryId, text);
+			const done = await sendCommand({ cmd: "editAndResend", entryId, text });
+			if (!done?.success) {
+				setError(done?.error ?? t.editMessageFailed);
+				return;
+			}
+			// 被编辑消息之后的尾部要从视图里消失（服务端已切断该分支）
+			resync();
 		},
-		[currentId, editAndResend],
+		[currentId, resync, sendCommand, setError, t.editMessageFailed],
 	);
 
 	const doArchiveSession = useCallback(
@@ -381,7 +374,6 @@ export function AppShell() {
 				await archiveSession(path);
 			} catch {
 				// usePiWeb exposes the request failure in the shared error banner.
-				return;
 			}
 			// 归档后会话立刻离开工作区列表（服务端同时让它收工）。正在看的会话被归档时
 			// 必须切走：先取同一工作区的另一个可见会话，没有就回到空态（工作区仍留在侧栏）。
@@ -440,7 +432,6 @@ 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
@@ -530,8 +521,6 @@ 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(
@@ -539,8 +528,6 @@ 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(() => {
@@ -553,31 +540,6 @@ 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');
@@ -591,12 +553,12 @@ export function AppShell() {
 		requestAnimationFrame(() => textarea?.focus());
 	}, [draftKey, updateDraft]);
 	const openInEditor = useCallback(
-		async (filePath: string, cwdOverride?: string) => {
+		async (filePath: string) => {
 			try {
 				const r = await fetch("/api/files", {
 					method: "POST",
 					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({ action: "open", cwd: cwdOverride || panelCwd, path: filePath }),
+					body: JSON.stringify({ action: "open", cwd: panelCwd, path: filePath }),
 				});
 				const j = await r.json();
 				if (!j.success) throw new Error(j.error || "failed to open file");
@@ -612,29 +574,39 @@ export function AppShell() {
 	useEffect(() => {
 		resetViewer();
 	}, [panelCwd, resetViewer]);
-	const growthTurnStarts = useMemo(
-		() => {
-			const persisted = state.snapshot?.userTurns ?? [];
-			const ids = new Set(persisted.map((turn) => turn.id));
-			const lastTs = persisted[persisted.length - 1]?.ts ?? -Infinity;
-			const live = state.messages
-				.filter((message) => message.role === "user" && (!message.id || !ids.has(message.id)) && (message.timestamp ?? Date.now()) >= lastTs - 1000)
-				.map((message) => message.timestamp ?? Date.now());
-			return [...persisted.map((turn) => turn.ts), ...live];
-		},
-		[state.snapshot?.userTurns, state.messages],
-	);
 	const growth = useGrowth({
 		cwd: panelCwd,
 		sessionPath: currentPath,
-		liveSteps: state.growth.steps,
-		pending: state.growth.pending,
+		liveRounds: state.growth.rounds,
 		runtimeError: state.growth.error,
 		active: projectOpen || viewer.state.open,
+		watchRounds: Boolean(currentPath),
 		connected: state.connected,
-		turnStarts: growthTurnStarts,
 	});
 	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy }), [viewer]);
+	const roundBadges = useMemo(() => {
+		const map = new Map<string, RoundBadge>();
+		for (const round of growth.rounds) {
+			if (round.kind !== "round" || !round.promptIds[0]) continue;
+			const st = round.stats;
+			map.set(round.promptIds[0], { commit: round.commit, files: st.added + st.modified + st.deleted + st.renamed, add: st.add, del: st.del });
+		}
+		return map;
+	}, [growth.rounds]);
+	const growthSelect = growth.select;
+	const showRound = useCallback((commit: string) => {
+		toggleProject(true);
+		growthSelect(commit);
+	}, [toggleProject, growthSelect]);
+	const jumpToChat = useCallback((messageId: string) => {
+		requestAnimationFrame(() => {
+			const node = document.querySelector<HTMLElement>(`[data-role="user"][data-message-id="${CSS.escape(messageId)}"]`);
+			if (!node) return;
+			node.scrollIntoView({ block: "center", behavior: "smooth" });
+			node.dataset.flash = "";
+			setTimeout(() => delete node.dataset.flash, 1600);
+		});
+	}, []);
 
 	useEffect(() => {
 		document.title = currentId && title && title !== "pi" ? `${title} · pi` : "pi";
@@ -660,6 +632,8 @@ export function AppShell() {
 				workspaceName={panelCwd ? getWorkspaceName(panelCwd) : ""}
 				cwd={panelCwd}
 				hasSession={Boolean(currentPath)}
+				running={isStreaming}
+				onJumpToChat={jumpToChat}
 				onOpenFile={openFileNode}
 				onReference={insertIntoComposer}
 				onOpenEditor={openInEditor}
@@ -673,159 +647,28 @@ export function AppShell() {
 	);
 
 	return (
-		<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="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="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}
@@ -870,104 +713,15 @@ 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>
 
-				{/* 四列网格中始终保留项目列 */}
-				{!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" />)}
+			{/* 四列网格中始终保留项目列，否则关闭项目栏时会话区会落进 0px 列。 */}
+			{!isNarrow && (projectColumn || <div aria-hidden="true" />)}
 
-				{/* 会话区与多视图卡片 (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="pi-main flex min-h-0 min-w-0 flex-col">
+				{!currentId ? (
 					<div className="flex min-h-0 flex-1 flex-col">
 						<Hero
 								draft={composerDrafts.current.get(heroDraftKey) ?? EMPTY_CHAT_DRAFT}
@@ -986,9 +740,6 @@ export function AppShell() {
 							getWorkspaceName={getWorkspaceName}
 							onSend={heroSend}
 							models={modelChoices}
-							modelLoading={modelLoading}
-							modelLoadError={modelLoadError}
-							onRetryModels={() => void refreshModels()}
 							providerNames={providerNames}
 							authByProvider={authByProvider}
 							addWorkspaceByPicker={addWorkspaceByPicker}
@@ -1000,11 +751,8 @@ export function AppShell() {
 							}}
 							defaultModel={defaultModel}
 							heroModelLevels={heroModelLevels}
-								heroThinking={heroThinking}
-								onSelectHeroThinking={setHeroThinking}
-								heroMode={heroMode}
-								onSelectHeroMode={setHeroMode}
-								onOpenSwarm={() => setActiveTopView("swarm")}
+							heroThinking={heroThinking}
+							onSelectHeroThinking={setHeroThinking}
 						/>
 						{/* 草稿阶段的错误行内显示（不再弹右下角） */}
 						{state.error && (
@@ -1022,9 +770,43 @@ 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="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">
+								<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">
 									<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>
@@ -1033,6 +815,8 @@ export function AppShell() {
 									)}
 								</div>
 							)}
+							{/* 轨迹页签已移除：轨迹按需查看（对话里的工具行 → 轨迹详情），不再占用主区域 */}
+						</div>
 
 						{/* 内容：只有对话区，轨迹按需在详情栏查看 */}
 						{!snapshot ? (
@@ -1073,20 +857,22 @@ export function AppShell() {
 									onOpenFile={openInEditor}
 									onFork={handleFork}
 									onEditMessage={doEditMessage}
+									roundBadges={roundBadges}
+									onShowRound={showRound}
 								/>
-								<div className="pw-session-composer px-4 pb-3 pt-2">
+								<div className="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}
@@ -1097,15 +883,9 @@ 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}
@@ -1127,46 +907,45 @@ export function AppShell() {
 												{Object.entries(state.extensionStatuses).map(([k, v]) => <span key={k}>{v}</span>)}
 											</div>
 										)}
-									</div>
+										</div>
 								</div>
 								</div>
 								)
 						}
 					</>
 				)}
-				</section>
+			</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>
+			{/* 提示词来源 / 轨迹 / 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>
+			)}
 
 			{/* 拖拽手柄 */}
 			{!isNarrow && !sidebarCollapsed && (
@@ -1280,9 +1059,6 @@ function Hero({
 	getWorkspaceName,
 	onSend,
 	models,
-	modelLoading,
-	modelLoadError,
-	onRetryModels,
 	providerNames,
 	authByProvider,
 	addWorkspaceByPicker,
@@ -1292,9 +1068,6 @@ function Hero({
 	heroModelLevels,
 	heroThinking,
 	onSelectHeroThinking,
-	heroMode,
-	onSelectHeroMode,
-	onOpenSwarm,
 }: {
 	draft: ChatDraft;
 	onDraftChange: (update: ChatDraftUpdate) => void;
@@ -1312,9 +1085,6 @@ 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>;
@@ -1324,9 +1094,6 @@ 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);
@@ -1344,106 +1111,81 @@ 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="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="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 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 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 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>
 				</div>
 
 				{/* 输入卡 */}
-				<div className="w-full mb-4">
-					<ChatInput
+				<ChatInput
 						draft={draft}
 						onDraftChange={onDraftChange}
 						onUploadError={onUploadError}
@@ -1452,60 +1194,26 @@ 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}
-						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>
+					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}
+				/>
 			</div>
 		</div>
 	);