@rexvane/piweb 0.3.18 → 0.3.19

package/src/components/AppShell.tsx

@@ -11,7 +11,8 @@ import { ChatWindow, SessionStatsBar, type RoundBadge } from "@/components/ChatW
 import { ExtensionDialogHost, ExtensionNotices } from "@/components/ExtensionUI";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
-import { PromptPanel } from "@/components/PromptPanel";
+import type { DrawerSection } from "@/components/DrawerPanel";
+import { DirectoryPicker } from "@/components/DirectoryPicker";
 
 // 首屏不需要的重组件按需加载（设置面板含供应商配置与代码高亮，轨迹/文件只在打开时才用）
 const SettingsPanel = dynamic(() => import("@/components/SettingsPanel").then((m) => m.SettingsPanel), { ssr: false });
@@ -20,16 +21,16 @@ const TrajInspector = dynamic(() => import("@/components/TrajectoryView").then((
 /** 会话/工作区路径比较（Windows 大小写与分隔符差异不该影响判断） */
 const samePath = (a: string, b: string): boolean =>
 	a.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase() === b.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase();
-const ProjectPanel = dynamic(() => import("@/components/ProjectPanel").then((m) => m.ProjectPanel), { ssr: false });
+const DrawerPanel = dynamic(() => import("@/components/DrawerPanel").then((m) => m.DrawerPanel), { ssr: false });
+const GrowthConsentDialog = dynamic(() => import("@/components/ProjectPanel").then((m) => m.GrowthConsentDialog), { 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 });
+// Git 面板不再由 AppShell 直接渲染:它现在是抽屉里的一个入口(DrawerPanel 内部按需加载)
 import {
-	IconAgentPresetOutline16,
 	IconCheckOutline14,
 	IconChevronDown14,
 	IconFolderClose16,
-	IconFolderOpenOutline16,
 	IconPanelLeftOutline16,
+	IconPanelRightOutline16,
 	IconProjectAddOutline16,
 } from "@/components/icons";
 import { useI18n } from "@/i18n";
@@ -46,12 +47,11 @@ const SIDEBAR_MIN = 264;
 const SIDEBAR_MAX = 420;
 const SIDEBAR_DEFAULT = 280;
 const SIDEBAR_COLLAPSED = 56;
-const DETAILS_MIN = 300;
-const DETAILS_MAX = 760;
-const DETAILS_DEFAULT = 360;
-const PROJECT_MIN = 280;
-const PROJECT_MAX = 640;
-const PROJECT_DEFAULT = 380;
+// 最右一列(网格列,不是浮层):轨迹详情 ⇄ 抽屉共用同一列,所以宽度也只有一套。
+// 下界取原抽屉(顶部入口列表 + 内容),上界取原详情栏(diff 与轨迹详情需要更宽)。
+const RIGHT_MIN = 280;
+const RIGHT_MAX = 760;
+const RIGHT_DEFAULT = 360;
 function persist(key: string, value: number) {
 	localStorage.setItem(key, String(value));
 }
@@ -59,6 +59,19 @@ function restore(key: string, fallback: number): number {
 	const v = parseInt(localStorage.getItem(key) ?? "", 10);
 	return Number.isNaN(v) ? fallback : v;
 }
+/**
+ * 最右一列的宽度:合并前有两个键(piweb.drawerW 抽屉 / piweb.detailsW 详情栏),
+ * 现在同一列只写 piweb.drawerW(抽屉是这一列的常驻内容,详情栏已不再单独存在)。
+ * 读取时先抽屉键、再回落到旧的详情栏键,最后夹到统一后的上下界——
+ * 老用户拖过的那一列宽度不会被重置成默认值,两个键都写过时以较新的抽屉键为准。
+ */
+function restoreRightWidth(): number {
+	for (const key of ["piweb.drawerW", "piweb.detailsW"]) {
+		const v = parseInt(localStorage.getItem(key) ?? "", 10);
+		if (!Number.isNaN(v)) return Math.max(RIGHT_MIN, Math.min(RIGHT_MAX, v));
+	}
+	return RIGHT_DEFAULT;
+}
 
 export function AppShell() {
 	const { t } = useI18n();
@@ -86,6 +99,9 @@ export function AppShell() {
 		setGroupBy,
 		setOrderBy,
 		addWorkspaceByPicker,
+		dirPickerOpen,
+		confirmDirPicker,
+		cancelDirPicker,
 		removeWorkspace,
 		refreshModels,
 		sendCommand,
@@ -97,15 +113,14 @@ export function AppShell() {
 		clearCompaction,
 		setError,
 		answerExtensionDialog,
+		answerGrowthConsent,
 		dismissExtensionNotice,
 	} = usePiWeb();
 
 	const [sidebarWidth, setSidebarWidth] = useState(SIDEBAR_DEFAULT);
 	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-	const [detailsWidth, setDetailsWidth] = useState(DETAILS_DEFAULT);
-	/** 项目栏（侧栏与对话之间的第四列：项目生长可视化） */
-	const [projectOpen, setProjectOpen] = useState(false);
-	const [projectWidth, setProjectWidth] = useState(PROJECT_DEFAULT);
+	/** 最右一列(轨迹详情 / 抽屉共用)的宽度 */
+	const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
 	// Drafts are parent-owned data, never a replayable last insertion/upload event.
 	// A hero draft keeps its identity when newSession switches the rendered composer.
 	const composerDrafts = useRef(new Map<string, ChatDraft>());
@@ -135,12 +150,17 @@ export function AppShell() {
 	}, []);
 	const saveSessionDraft = useCallback((update: ChatDraftUpdate) => updateDraft(draftKey, update), [draftKey, updateDraft]);
 	const saveHeroDraft = useCallback((update: ChatDraftUpdate) => updateDraft(heroDraftKey, update), [heroDraftKey, updateDraft]);
-	const [dragging, setDragging] = useState<"sidebar" | "details" | "project" | null>(null);
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [selected, setSelected] = useState<TrajEntry | null>(null);
-	const [gitDetailsOpen, setGitDetailsOpen] = useState(false);
-	/** 提示词来源面板（右侧详情列） */
-	const [promptsOpen, setPromptsOpen] = useState(false);
+	/** 抽屉当前入口(由这里持有:轨迹详情关掉后要回到同一个入口) */
+	// 默认进「项目」:项目栏降级成抽屉入口后,它是最常用的那一个
+	const [drawerSection, setDrawerSection] = useState<DrawerSection>("project");
+	/** 右侧抽屉(最右一列):入口列表 + 内容 */
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	/** 打开抽屉时「落到最新轮」只跳过这一次(点 badge 指定轮次时用) */
+	const skipLatestOnce = useRef(false);
+	/** useGrowth 的"落到最新轮":它在 AppShell 里、不随抽屉卸载,所以必须显式调用 */
+	const growthSelectLatest = useRef<() => void>(() => {});
 	const [heroCwd, setHeroCwd] = useState("");
 	const [heroModel, setHeroModel] = useState<{ provider: string; id: string } | null>(null);
 	const [heroThinking, setHeroThinking] = useState("");
@@ -148,29 +168,40 @@ export function AppShell() {
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 	useEffect(() => {
 		setSidebarWidth(restore("piweb.sidebarW", SIDEBAR_DEFAULT));
-		setDetailsWidth(restore("piweb.detailsW", DETAILS_DEFAULT));
-		setProjectWidth(restore("piweb.projectW", PROJECT_DEFAULT));
+		setRightWidth(restoreRightWidth());
 		setSidebarCollapsed(localStorage.getItem("piweb.sidebarCollapsed") === "1");
-		setProjectOpen(localStorage.getItem("piweb.projectOpen") === "1");
+		setDrawerOpen(localStorage.getItem("piweb.drawerOpen") === "1");
 	}, []);
-	const toggleProject = useCallback((next?: boolean) => {
-		setProjectOpen((cur) => {
+	/** 右侧抽屉开关(项目栏降级成抽屉入口后,它是"最右一列是否打开"唯一的开关) */
+	const toggleDrawer = useCallback((next?: boolean) => {
+		setDrawerOpen((cur) => {
 			const v = next ?? !cur;
-			localStorage.setItem("piweb.projectOpen", v ? "1" : "0");
+			localStorage.setItem("piweb.drawerOpen", v ? "1" : "0");
 			return v;
 		});
 	}, []);
-	// Ctrl/⌘+Shift+E：切换项目栏（与 VS Code 资源管理器同键）
+	/** 切到某个抽屉入口并打开抽屉(顶栏图标 / 点 badge 都用这条) */
+	const openDrawerSection = useCallback(
+		(section: DrawerSection) => {
+			setDrawerSection(section);
+			setSelected(null);
+			toggleDrawer(true);
+		},
+		[toggleDrawer],
+	);
+	// Ctrl/⌘+Shift+E：打开抽屉并切到「项目」入口；已经停在该入口时再按收起。
+	// 轨迹详情占着这一列时，这个快捷键把抽屉叫回来（而不是切到轨迹详情）。
 	useEffect(() => {
 		const h = (e: KeyboardEvent) => {
 			if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "e") {
 				e.preventDefault();
-				toggleProject();
+				if (drawerOpen && !selected && drawerSection === "project") toggleDrawer(false);
+				else openDrawerSection("project");
 			}
 		};
 		document.addEventListener("keydown", h);
 		return () => document.removeEventListener("keydown", h);
-	}, [toggleProject]);
+	}, [drawerOpen, drawerSection, toggleDrawer, openDrawerSection]);
 
 	useEffect(() => {
 		const query = window.matchMedia("(max-width: 840px)");
@@ -200,11 +231,16 @@ export function AppShell() {
 		};
 	}, []);
 
-	// 切换会话时清掉轨迹页的选中态并收起详情栏
+	// Markdown 分块（react-markdown + highlight.js 常用语言集，实测 472KB）空闲预取：
+	// 首屏不为它付出下载成本，等真正打开会话时通常已经就绪，不会看到正文空窗。
+	useEffect(() => {
+		const timer = setTimeout(() => { void import("@/components/MarkdownBlock"); }, 1200);
+		return () => clearTimeout(timer);
+	}, []);
+
+	// 切换会话时清掉轨迹详情的选中态(最右一列回落到抽屉;抽屉入口保持不变)
 	useEffect(() => {
 		setSelected(null);
-		setGitDetailsOpen(false);
-		setPromptsOpen(false);
 	}, [currentPath]);
 
 	// 已知工作区列表（给 Hero 建议）；启动不预选任何工作区，
@@ -251,26 +287,32 @@ export function AppShell() {
 
 
 	// ---------- 拖拽 ----------
+	// pointermove 事件率（125~1000Hz）远高于帧率：事件里只记最新位置，rAF 里每帧
+	// 最多提交一次 state，渲染+重排从事件率降到帧率；持久化推迟到松手一次完成。
 	const onDrag = useCallback(
-		(side: "sidebar" | "details" | "project") => (e: React.PointerEvent) => {
+		(side: "sidebar" | "right") => (e: React.PointerEvent) => {
 			e.preventDefault();
-			setDragging(side);
 			const startX = e.clientX;
-			const startW = side === "sidebar" ? sidebarWidth : side === "project" ? projectWidth : detailsWidth;
+			const startW = side === "sidebar" ? sidebarWidth : rightWidth;
+			const [min, max] = side === "sidebar" ? [SIDEBAR_MIN, SIDEBAR_MAX] : [RIGHT_MIN, RIGHT_MAX];
+			// 最右一列:左缘往左拖是变宽(与原来的详情栏、抽屉同向)
+			const sign = side === "right" ? -1 : 1;
+			const commit = side === "sidebar" ? setSidebarWidth : setRightWidth;
+			let frame = 0;
+			let latest = startW;
 			const move = (ev: PointerEvent) => {
-				if (side === "sidebar") {
-					const w = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, startW + (ev.clientX - startX)));
-					setSidebarWidth(w);
-				} else if (side === "project") {
-					const w = Math.max(PROJECT_MIN, Math.min(PROJECT_MAX, startW + (ev.clientX - startX)));
-					setProjectWidth(w);
-				} else {
-					const w = Math.max(DETAILS_MIN, Math.min(DETAILS_MAX, startW - (ev.clientX - startX)));
-					setDetailsWidth(w);
+				latest = Math.max(min, Math.min(max, startW + sign * (ev.clientX - startX)));
+				if (!frame) {
+					frame = requestAnimationFrame(() => {
+						frame = 0;
+						commit(latest);
+					});
 				}
 			};
 			const up = () => {
-				setDragging(null);
+				if (frame) cancelAnimationFrame(frame);
+				commit(latest);
+				persist(side === "sidebar" ? "piweb.sidebarW" : "piweb.drawerW", latest);
 				window.removeEventListener("pointermove", move);
 				window.removeEventListener("pointerup", up);
 				window.removeEventListener("pointercancel", up);
@@ -280,15 +322,9 @@ export function AppShell() {
 			// 触摸/笔输入被系统手势打断时只触发 pointercancel，不处理会永久泄漏监听器
 			window.addEventListener("pointercancel", up);
 		},
-		[sidebarWidth, detailsWidth, projectWidth],
+		[sidebarWidth, rightWidth],
 	);
 
-	useEffect(() => {
-		if (dragging === "sidebar") persist("piweb.sidebarW", sidebarWidth);
-		if (dragging === "details") persist("piweb.detailsW", detailsWidth);
-		if (dragging === "project") persist("piweb.projectW", projectWidth);
-	}, [dragging, sidebarWidth, detailsWidth, projectWidth]);
-
 	const toggleSidebar = () => {
 		const next = !sidebarCollapsed;
 		setSidebarCollapsed(next);
@@ -304,7 +340,7 @@ export function AppShell() {
 	const openToolTrajectory = useCallback((toolCallId: string) => {
 		const entry = trajectoryRef.current.find((item) => item.toolCallId === toolCallId);
 		if (!entry) return;
-		setGitDetailsOpen(false);
+		// 最右一列与抽屉互斥:选中轨迹详情即接管这一列,关掉后回落回抽屉的当前入口
 		setSelected(entry);
 	}, []);
 
@@ -541,16 +577,20 @@ export function AppShell() {
 		prevStreamingRef.current = isStreaming;
 	}, [isStreaming]);
 
+	/**
+	 * 「引用到输入框」:引用存成草稿里的独立数组,输入框渲染成 @ 前缀的 chip
+	 * (不再直接把路径混进正文——正文和引用在视觉上要能分开,发送时才拼成 @路径)。
+	 */
 	const insertIntoComposer = useCallback((text: string) => {
-		const textarea = document.querySelector<HTMLTextAreaElement>('[data-testid="composer"] textarea');
-		const cursor = textarea?.selectionStart;
+		// 存的是"裸路径"(不带 @):发送时统一拼 @路径,避免调用方已经带了 @ 就变成 @@
+		const path = text.trim().replace(/^@+/, "");
+		if (!path) return;
 		updateDraft(draftKey, (previous) => {
-			const position = Math.min(cursor ?? previous.text.length, previous.text.length);
-			const before = previous.text.slice(0, position);
-			const after = previous.text.slice(position);
-			return { ...previous, text: `${before}${before && !/\s$/.test(before) ? " " : ""}${text}${after}` };
+			const references = previous.references ?? [];
+			if (references.includes(path)) return previous;
+			return { ...previous, references: [...references, path] };
 		});
-		requestAnimationFrame(() => textarea?.focus());
+		requestAnimationFrame(() => document.querySelector<HTMLTextAreaElement>('[data-testid="composer"] textarea')?.focus());
 	}, [draftKey, updateDraft]);
 	const openInEditor = useCallback(
 		async (filePath: string) => {
@@ -579,11 +619,27 @@ export function AppShell() {
 		sessionPath: currentPath,
 		liveRounds: state.growth.rounds,
 		runtimeError: state.growth.error,
-		active: projectOpen || viewer.state.open,
+		active: drawerOpen || viewer.state.open,
 		watchRounds: Boolean(currentPath),
 		connected: state.connected,
 	});
 	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy }), [viewer]);
+	// 打开面板时落在最新轮:useGrowth 活在 AppShell 里、不随抽屉卸载,state 不会自己回到最新,
+	// 所以每次从「关」变「开」(或换了工作区)都显式选一次最新轮。
+	// 新轮次出现时不再自动跳——用户打开面板后停在哪一轮就是哪一轮。
+	growthSelectLatest.current = growth.selectLatest;
+	useEffect(() => {
+		if (!drawerOpen) {
+			// 关掉时清掉标记:否则"抽屉已经开着时点 badge"留下的标记会吞掉下一次打开
+			skipLatestOnce.current = false;
+			return;
+		}
+		if (skipLatestOnce.current) {
+			skipLatestOnce.current = false;
+			return;
+		}
+		growthSelectLatest.current();
+	}, [drawerOpen, panelCwd]);
 	const roundBadges = useMemo(() => {
 		const map = new Map<string, RoundBadge>();
 		for (const round of growth.rounds) {
@@ -593,11 +649,16 @@ export function AppShell() {
 		}
 		return map;
 	}, [growth.rounds]);
+	// 点对话里的轮次 badge:打开抽屉、切到「项目」入口,并选中**那一轮**(不是最新轮)。
+	// skipLatestOnce 让下面「打开即落最新轮」的 effect 放这一拍过去,不要覆盖掉刚选中的那轮。
 	const growthSelect = growth.select;
 	const showRound = useCallback((commit: string) => {
-		toggleProject(true);
+		skipLatestOnce.current = true;
+		setDrawerSection("project");
+		setSelected(null);
+		toggleDrawer(true);
 		growthSelect(commit);
-	}, [toggleProject, growthSelect]);
+	}, [toggleDrawer, growthSelect]);
 	const jumpToChat = useCallback((messageId: string) => {
 		requestAnimationFrame(() => {
 			const node = document.querySelector<HTMLElement>(`[data-role="user"][data-message-id="${CSS.escape(messageId)}"]`);
@@ -612,37 +673,54 @@ export function AppShell() {
 		document.title = currentId && title && title !== "pi" ? `${title} · pi` : "pi";
 	}, [currentId, title]);
 
-	// 三栏网格
-	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px ${projectOpen ? `${projectWidth}px` : "0px"} minmax(0,1fr) ${
-		selected || gitDetailsOpen || promptsOpen ? `${detailsWidth}px` : "0px"
-	}`;
-	const projectColumn = projectOpen && (
+	// 网格列(宽屏):侧栏 | 对话区 | 最右一列(轨迹详情 ⇄ 抽屉)。项目栏已降级成
+	// 抽屉里的一个入口,不再单独占一列,所以是 3 列而不是 4 列。
+	// JSX 里各列的渲染顺序必须与这里严格一致,否则网格会把内容摆错列。
+	// 最右一列只有一条宽度(rightWidth):详情栏与抽屉合并后不再各占一列。
+	const rightColumnVisible = Boolean(selected) || drawerOpen;
+	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px minmax(0,1fr) ${
+		rightColumnVisible ? `${rightWidth}px` : "0px"}`;
+
+	// 最右一列(宽屏是网格列,窄屏是贴左右的 fixed 覆盖层):轨迹详情 ⇄ 抽屉互斥。
+	// selected(点对话里的工具行)优先——它临时接管这一列;关掉后自动回落回抽屉,
+	// 并回到抽屉原本选中的入口(入口状态在 drawerSection,不随锁定/解锁重置)。
+	const rightColumn = (
 		<div
-			className="min-h-0 overflow-hidden"
+			className="flex min-h-0 flex-col overflow-hidden"
 			style={isNarrow ? {
 				position: "fixed",
-				inset: "0 auto 0 0",
-				width: "min(88vw, 420px)",
-				zIndex: 88,
+				inset: "0 0 0 auto",
+				width: "min(92vw, 640px)",
+				zIndex: 90,
+				background: "var(--dsw-sidebar-fill)",
 				boxShadow: "var(--dsw-elevation-prominent)",
-			} : undefined}
+			} : { background: "var(--dsw-sidebar-fill)", borderLeft: "0.5px solid var(--dsw-border-l2)" }}
 		>
-			<ProjectPanel
-				growth={growth}
-				workspaceName={panelCwd ? getWorkspaceName(panelCwd) : ""}
-				cwd={panelCwd}
-				hasSession={Boolean(currentPath)}
-				running={isStreaming}
-				onJumpToChat={jumpToChat}
-				onOpenFile={openFileNode}
-				onReference={insertIntoComposer}
-				onOpenEditor={openInEditor}
-				gitRefreshKey={panelRefreshKey}
-				onAskCommit={() => insertIntoComposer(t.gitAskCommitPrompt)}
-				onOpenGit={() => { setSelected(null); setGitDetailsOpen(true); }}
-				onClose={() => toggleProject(false)}
-				onError={setError}
-			/>
+			{selected ? (
+				<TrajInspector entry={selected} onClose={() => setSelected(null)} />
+			) : (
+				<DrawerPanel
+					cwd={panelCwd}
+					section={drawerSection}
+					onSectionChange={setDrawerSection}
+					onClose={() => toggleDrawer(false)}
+					sessionId={currentId}
+					promptRefreshKey={currentId}
+					gitRefreshKey={panelRefreshKey}
+					growth={growth}
+					workspaceName={panelCwd ? getWorkspaceName(panelCwd) : ""}
+					hasSession={Boolean(currentPath)}
+					running={isStreaming}
+					onOpenFileNode={openFileNode}
+					onReference={insertIntoComposer}
+					onOpenEditor={openInEditor}
+					onJumpToChat={jumpToChat}
+					onError={setError}
+					onOpenContent={(path, content) => viewer.openStatic(path, content)}
+					onAskCommit={() => insertIntoComposer(t.gitAskCommitPrompt)}
+					onOpenFile={openInEditor}
+				/>
+			)}
 		</div>
 	);
 
@@ -651,7 +729,9 @@ export function AppShell() {
 			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)",
+				// 收起/展开不做过渡：grid-template-columns 是布局属性，动画它会让浏览器逐帧
+				// 重排整棵布局树，而聊天列 minmax(0,1fr) 的宽度逐帧变化，正文/代码块每帧
+				// 重新折行，长对话必然掉帧。瞬时切换只付一次重排；拖动改宽原本也是 none。
 				background: "var(--dsw-bg-base)",
 			}}
 		>
@@ -716,8 +796,7 @@ export function AppShell() {
 				/>
 			</div>
 
-			{/* 四列网格中始终保留项目列，否则关闭项目栏时会话区会落进 0px 列。 */}
-			{!isNarrow && (projectColumn || <div aria-hidden="true" />)}
+			{/* 三列网格:侧栏 | 会话区 | 最右一列(项目栏已进抽屉,不再有独立的项目列) */}
 
 			{/* 会话区 */}
 			<div className="pi-main flex min-h-0 min-w-0 flex-col">
@@ -776,33 +855,28 @@ export function AppShell() {
 									<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14.5, fontWeight: 600 }}>
 										{title}
 									</span>
-									{/* 项目生长入口；轨迹详情由对话内工具行点击唤起 */}
+									{/* 项目与提示词原来是两个平级图标,现已合并进右侧抽屉:
+									    抽屉顶部那条横向图标栏就是它们的新位置,顶栏只留一个抽屉开关。
+									    Ctrl/⌘+Shift+E 仍然直达项目入口(见快捷键绑定)。 */}
+									{/* 右侧抽屉:项目 / 提示词 / Git 详情 / 会话导入 四个入口都在里面 */}
 									<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"
+										style={{ width: 30, height: 30, background: drawerOpen && !selected ? "var(--dsw-active)" : undefined }}
+										title={t.drawerPanel}
+										aria-label={t.drawerPanel}
+										data-testid="drawer-toggle"
 										onClick={() => {
-											setPromptsOpen((open) => !open);
-											setSelected(null);
-											setGitDetailsOpen(false);
+											// 轨迹详情占着这一列时,这个按钮是把抽屉叫回来(否则点了像没反应)
+											if (selected) {
+												setSelected(null);
+												toggleDrawer(true);
+												return;
+											}
+											toggleDrawer();
 										}}
 									>
-										<IconAgentPresetOutline16 size={15} />
+										<IconPanelRightOutline16 size={15} />
 									</button>
 								</div>
 							{projectTrust?.required && !projectTrust.trusted && (
@@ -916,36 +990,9 @@ export function AppShell() {
 				)}
 			</div>
 
-			{/* 提示词来源 / 轨迹 / 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>
-			)}
+			{/* 宽屏:最右一列(轨迹详情优先,否则抽屉);关闭时补占位列。
+			    网格列数与顺序是固定的三列,少一个 item 会让后面的元素落错列。 */}
+			{!isNarrow && (rightColumnVisible ? rightColumn : <div aria-hidden="true" />)}
 
 			{/* 拖拽手柄 */}
 			{!isNarrow && !sidebarCollapsed && (
@@ -955,24 +1002,18 @@ export function AppShell() {
 					onPointerDown={onDrag("sidebar")}
 				/>
 			)}
-			{!isNarrow && (selected || gitDetailsOpen || promptsOpen) && (
+			{!isNarrow && rightColumnVisible && (
 				<div
 					className="fixed top-0 h-full w-2 cursor-col-resize"
-					style={{ left: `calc(100vw - ${detailsWidth}px - 4px)`, zIndex: 40 }}
-					onPointerDown={onDrag("details")}
+					style={{ left: `calc(100vw - ${rightWidth}px - 4px)`, zIndex: 40 }}
+					onPointerDown={onDrag("right")}
 				/>
 			)}
-			{!isNarrow && projectOpen && (
-				<div
-					className="fixed top-0 h-full w-2 cursor-col-resize"
-					style={{ left: (sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth) + projectWidth - 4, zIndex: 40 }}
-					onPointerDown={onDrag("project")}
-				/>
-			)}
-			{isNarrow && projectOpen && (
+			{/* 窄屏最右一列:贴右边滑出(轨迹详情与抽屉共用,遮罩关闭回到对话) */}
+			{isNarrow && rightColumnVisible && (
 				<>
-					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => toggleProject(false)} aria-label={t.close} />
-					{projectColumn}
+					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : toggleDrawer(false))} aria-label={t.close} />
+					{rightColumn}
 				</>
 			)}
 			{viewer.state.open && (
@@ -990,6 +1031,12 @@ export function AppShell() {
 			)}
 
 			<ExtensionDialogHost dialog={state.extensionDialogs[0] ?? null} onAnswer={(id, response) => void answerExtensionDialog(id, response)} />
+			{/* 扩展对话框优先：它在阻塞 pi，建仓库的询问可以等 */}
+			{state.growth.consent && !state.extensionDialogs.length && (
+				<GrowthConsentDialog request={state.growth.consent} onAnswer={(allow) => void answerGrowthConsent(allow)} />
+			)}
+			{/* 只有远程设备（手机走 tailnet）会走到这里：本机仍然用系统原生对话框 */}
+			<DirectoryPicker open={dirPickerOpen} onConfirm={(path) => void confirmDirPicker(path)} onCancel={cancelDirPicker} />
 			<ExtensionNotices notices={state.extensionNotices} onDismiss={dismissExtensionNotice} />
 			<SettingsPanel
 				open={settingsOpen}