@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/AppShell.tsx

@@ -13,8 +13,6 @@ import { UpdateNotice } from "@/components/update/UpdateNotice";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
 import type { DrawerSection } from "@/components/DrawerPanel";
-import { SideChatPanel } from "@/components/side-chat/SideChatPanel";
-import { SideChatIcon } from "@/components/side-chat/icons";
 import { preserveChatReadingPosition } from "@/components/chat/reading-anchor";
 import { DirectoryPicker } from "@/components/DirectoryPicker";
 
@@ -47,7 +45,11 @@ import type { ModelChoice } from "@/components/ModelSelector";
 import type { NewSessionDefaults } from "@/lib/model-defaults";
 import { readRememberedHeroModel, writeRememberedHeroModel } from "@/lib/hero-model-memory";
 import { newSessionThinkingLevel } from "@/lib/thinking-level";
-import type { ImageAttachment, TrajEntry } from "@/lib/types";
+import { promptTitleText } from "@/lib/chat/skill-expansion";
+import type { ImageAttachment, TrajEntry, WebSnapshot } from "@/lib/types";
+
+/** 补全需要的资源清单；新会话页与冷会话都能从服务端单独发现，不必等快照 */
+type WorkspaceCommands = Pick<WebSnapshot, "skills" | "promptTemplates" | "extensionCommands">;
 
 // dsh ui-layout columns.ts 几何常量
 const SIDEBAR_MIN = 264;
@@ -160,20 +162,14 @@ export function AppShell() {
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [selected, setSelected] = useState<TrajEntry | null>(null);
 	/** 抽屉当前入口(由这里持有:轨迹详情关掉后要回到同一个入口) */
-	/** 抽屉入口保存在浏览器；新用户先看到旁聊。 */
+	/** 抽屉入口保存在浏览器 */
 	const [drawerSection, setDrawerSection] = useState<DrawerSection>("project");
 	const chooseDrawerSection = useCallback((section: DrawerSection) => {
 		setDrawerSection(section);
 		localStorage.setItem("piweb.drawerSection", section);
-		setSideChatOpen(false);
 	}, []);
 	/** 右侧抽屉(最右一列):入口列表 + 内容 */
 	const [drawerOpen, setDrawerOpen] = useState(false);
-	/**
-	 * 右侧旁聊面板：和抽屉共用最右一列，所以两者互斥（开一个就关另一个）。
-	 * 旁聊不再作为抽屉的一个入口 —— 它是独立面板，入口是会话头部那个图标按钮。
-	 */
-	const [sideChatOpen, setSideChatOpen] = useState(false);
 	/** 打开抽屉时「落到最新轮」只跳过这一次(点 badge 指定轮次时用) */
 	const skipLatestOnce = useRef(false);
 	/** useGrowth 的"落到最新轮":它在 AppShell 里、不随抽屉卸载,所以必须显式调用 */
@@ -182,6 +178,9 @@ export function AppShell() {
 	const [heroModel, setHeroModel] = useState<{ provider: string; id: string } | null>(null);
 	/** 当前工作区的新会话默认值（pi 的初始模型规则 + 设置里的思考档位），切换工作区时重新取 */
 	const [heroDefaults, setHeroDefaults] = useState<NewSessionDefaults | null>(null);
+	/** 按工作区缓存的命令清单：切会话时先用着，再后台刷新 */
+	const [workspaceResources, setWorkspaceResources] = useState<Record<string, WorkspaceCommands>>({});
+	const [resourcesVersion, setResourcesVersion] = useState(0);
 	const [heroThinking, setHeroThinking] = useState("");
 	const [isNarrow, setIsNarrow] = useState(false);
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
@@ -193,15 +192,25 @@ export function AppShell() {
 		const section = localStorage.getItem("piweb.drawerSection");
 		if (["project", "prompts", "git", "import"].includes(section ?? "")) setDrawerSection(section as DrawerSection);
 	}, []);
-	/** 新会话时加载用户之前的选择，或使用系统建议（第一个认证的） */
+	/** 新会话时加载用户之前的选择；没有记住的，等 /api/models/defaults 回来用 pi 设置里的建议模型兜底 */
 	useEffect(() => {
 		if (!heroCwd) {
 			setHeroModel(null);
 			return;
 		}
-		// 只认这个工作区自己记住的模型；没有就不预选，输入框等用户在新会话页选
+		// 优先这个工作区自己记住的模型；没有就先留空，交给下面的建议模型兜底
 		setHeroModel(readRememberedHeroModel(localStorage, heroCwd));
 	}, [heroCwd]);
+	/**
+	 * 兜底：这个工作区没记住过选择时，用 pi 设置里的建议模型（defaults.model，服务端按
+	 * enabledModels + 认证状态挑出来的）。否则点「新会话」永远是「当前模型不可用，请先选择模型」，
+	 * 明明有可用模型却要先手动选一次。用户显式选过（记住的）就不覆盖。
+	 */
+	useEffect(() => {
+		const suggested = heroDefaults?.model;
+		if (!heroCwd || !suggested) return;
+		setHeroModel((current) => current ?? suggested);
+	}, [heroCwd, heroDefaults]);
 	useEffect(() => {
 		setHeroDefaults(null);
 		if (!heroCwd) return;
@@ -216,14 +225,36 @@ export function AppShell() {
 			stale = true;
 		};
 	}, [heroCwd]);
+	/** 补全数据归属的工作区：有会话看会话的 cwd，新会话看 Hero 选中的工作区 */
+	const resourceCwd = currentId
+		? sessions.find((session) => samePath(session.path, currentPath ?? ""))?.cwd ??
+			(state.snapshot?.sessionPath && samePath(state.snapshot.sessionPath, currentPath ?? "") ? state.snapshot.cwd : "")
+		: heroCwd;
+	// 补全不能等历史快照或 session_start/MCP：按工作区单独发现并缓存，切会话/改设置时后台刷新。
+	useEffect(() => {
+		if (!resourceCwd) return;
+		let stale = false;
+		fetch(`/api/agent/resources?cwd=${encodeURIComponent(resourceCwd)}`, { cache: "no-store" })
+			.then((r) => r.json() as Promise<{ success?: boolean; data?: WorkspaceCommands; error?: string }>)
+			.then((json) => {
+				if (stale) return;
+				if (!json.success || !json.data) throw new Error(json.error || "Failed to load workspace resources");
+				const data = json.data;
+				setWorkspaceResources((previous) => ({ ...previous, [resourceCwd]: data }));
+			})
+			.catch((error) => {
+				if (!stale) setError(error instanceof Error ? error.message : String(error));
+			});
+		return () => {
+			stale = true;
+		};
+	}, [currentId, resourceCwd, settingsOpen, resourcesVersion, setError]);
 	/** 右侧抽屉开关(项目栏降级成抽屉入口后,它是"最右一列是否打开"唯一的开关) */
 	const toggleDrawer = useCallback((next?: boolean) => {
 		preserveChatReadingPosition();
 		setDrawerOpen((cur) => {
 			const v = next ?? !cur;
 			localStorage.setItem("piweb.drawerOpen", v ? "1" : "0");
-			// 最右一列只有一个：开抽屉就收起旁聊
-			if (v) setSideChatOpen(false);
 			return v;
 		});
 	}, []);
@@ -248,7 +279,8 @@ export function AppShell() {
 		};
 		document.addEventListener("keydown", h);
 		return () => document.removeEventListener("keydown", h);
-	}, [drawerOpen, drawerSection, toggleDrawer, openDrawerSection]);
+		// selected 必须在依赖里：漏了它，打开轨迹详情后闭包里仍是旧的 null，第一下被当成「收起」，要按两次
+	}, [drawerOpen, drawerSection, selected, toggleDrawer, openDrawerSection]);
 
 	useEffect(() => {
 		const query = window.matchMedia("(max-width: 840px)");
@@ -391,12 +423,12 @@ export function AppShell() {
 		[sidebarWidth, rightWidth],
 	);
 
-	const toggleSidebar = () => {
+	const toggleSidebar = useCallback(() => {
 		preserveChatReadingPosition();
 		const next = !sidebarCollapsed;
 		setSidebarCollapsed(next);
 		localStorage.setItem("piweb.sidebarCollapsed", next ? "1" : "0");
-	};
+	}, [sidebarCollapsed]);
 
 	// ---------- 会话操作 ----------
 	const snapshot = state.snapshot;
@@ -412,6 +444,13 @@ export function AppShell() {
 		setSelected(entry);
 	}, []);
 
+	// 轨迹 context 条目的全文回查：快照只在轨迹里带资源头部（全文在 contextResources 一处）
+	const contextResourcesRef = useRef(snapshot?.contextResources ?? []);
+	useEffect(() => {
+		contextResourcesRef.current = snapshot?.contextResources ?? [];
+	}, [snapshot?.contextResources]);
+	const contextLookup = useCallback((path: string) => contextResourcesRef.current.find((r) => r.path === path)?.content, []);
+
 	// 上下文分段的数据源：系统提示词按注入资源字符数（很便宜）；
 	// 消息字符统计交给 ContextMeter 弹窗打开时再算，避免每次 token 增量全量扫描
 	const contextSystemChars = useMemo(
@@ -426,20 +465,19 @@ export function AppShell() {
 		return () => clearTimeout(timer);
 	}, [state.error, clearError]);
 
-	const doRename = async (path: string, newName: string) => {
+	const doRename = useCallback(async (path: string, newName: string) => {
 		if (!newName.trim()) return;
-		const result = path === currentPath
+		// 冷会话：临时走命令路由（会按需打开，不启动 agent 的 rename 走 appendSessionInfo）
+		const result = currentPath && samePath(path, currentPath)
 			? await sendCommand({ cmd: "rename", text: newName.trim() })
 			: await sendCommand({ cmd: "rename", text: newName.trim() }, encodeURIComponent(b64url(path)));
 		if (!result?.success) {
 			throw new Error(result?.error || "failed to rename session");
 		}
+		// 侧栏就地改名即可。不要 resync：它重连的是「当前」会话的事件流，与被改名的冷会话无关，
+		// 正在流式输出时还会把眼前的对话整页重载一遍
 		patchSessionName(path, newName.trim());
-		if (path !== currentPath) {
-			// 冷会话：临时走命令路由（会按需打开，不启动 agent 的 rename 走 appendSessionInfo）
-			resync();
-		}
-	};
+	}, [currentPath, sendCommand, patchSessionName]);
 
 	const doForkSession = useCallback(
 		async (path: string, _cwd: string) => {
@@ -494,15 +532,42 @@ export function AppShell() {
 	const doUnarchiveSession = useCallback(
 		async (path: string) => {
 			try {
+				// 归档列表由 unarchiveSession 按服务端返回更新；不 resync 当前会话（同 doRename）
 				await unarchiveSession(path);
-				resync();
 			} catch {
 				// usePiWeb exposes the request failure in the shared error banner.
 			}
 		},
-		[unarchiveSession, resync],
+		[unarchiveSession],
 	);
 
+	// ---------- 侧栏回调：全部 useCallback，配合 SessionSidebar 的 memo ——
+	// 流式期间 state.messages 每 16ms 换引用，AppShell 整树重渲染时侧栏不再跟着空转
+	const openSessionAndCloseMobileNav = useCallback((path: string) => {
+		openSession(path);
+		setMobileSidebarOpen(false);
+	}, [openSession]);
+	const closeMobileNav = useCallback(() => setMobileSidebarOpen(false), []);
+	const startNewSessionInCurrentWorkspace = useCallback(() => {
+		// 对齐 dsh startSession：新会话默认落在当前会话的工作区（无则取最近工作区）
+		const cur = sessions.find((s) => s.path === currentPath)?.cwd;
+		setHeroCwd(cur || heroCwd || knownCwds[0] || "");
+		closeSession();
+	}, [sessions, currentPath, heroCwd, knownCwds, closeSession]);
+	const startNewSessionInWorkspace = useCallback((cwd: string) => {
+		// dsh 惰性新建：只预选工作区进草稿态，发送第一条消息才真正创建会话
+		setHeroCwd(cwd);
+		closeSession();
+	}, [closeSession]);
+	const exportSessionFile = useCallback((path: string) => {
+		window.open(`/api/sessions/${encodeURIComponent(b64url(path))}/export?format=jsonl`, "_blank");
+	}, []);
+	const openSettingsFromSidebar = useCallback(() => {
+		setSettingsOpen(true);
+		setMobileSidebarOpen(false);
+	}, []);
+	const addWorkspaceFromSidebar = useCallback(() => void addWorkspaceByPicker(), [addWorkspaceByPicker]);
+
 	const doRenameWorkspace = useCallback(
 		async (cwd: string, newName: string) => {
 			await renameWorkspace(cwd, newName);
@@ -512,13 +577,13 @@ export function AppShell() {
 
 	const doDeleteWorkspace = useCallback(
 		async (cwd: string) => {
+			// 工作区列表由 removeWorkspace 按服务端返回更新；不 resync 当前会话（同 doRename）
 			await removeWorkspace(cwd);
-			if (heroCwd === cwd) {
+			if (heroCwd && samePath(heroCwd, cwd)) {
 				setHeroCwd("");
 			}
-			resync();
 		},
-		[removeWorkspace, heroCwd, resync],
+		[removeWorkspace, heroCwd],
 	);
 
 	// Hero 发送：先完整应用新会话预设，再发第一条消息。
@@ -562,6 +627,9 @@ export function AppShell() {
 		[sendCommand, openSession, resync],
 	);
 
+	const commandResources = currentId && snapshot?.sessionPath && samePath(snapshot.sessionPath, currentPath ?? "")
+		? snapshot
+		: workspaceResources[resourceCwd];
 	// 斜杠命令：Web 内置 + pi 的技能 / 提示模板 / 扩展命令（后三类原样交给 SDK 展开或执行）
 	const slashCommands = useMemo(() => {
 		const list: { name: string; desc: string; kind: "builtin" | "skill" | "template" | "extension"; argumentHint?: string }[] = [
@@ -571,12 +639,12 @@ export function AppShell() {
 			{ name: "new", desc: t.cmdNew, kind: "builtin" },
 			{ name: "fork", desc: t.cmdFork, kind: "builtin" },
 			{ name: "reload", desc: t.cmdReload, kind: "builtin" },
-			...(snapshot?.promptTemplates ?? []).map((p) => ({ name: p.name, desc: p.description, kind: "template" as const, argumentHint: p.argumentHint })),
-			...(snapshot?.extensionCommands ?? []).map((c) => ({ name: c.name, desc: c.description || c.source, kind: "extension" as const })),
-			...(snapshot?.skills ?? []).map((s) => ({ name: `skill:${s.name}`, desc: s.description, kind: "skill" as const })),
+			...(commandResources?.promptTemplates ?? []).map((p) => ({ name: p.name, desc: p.description, kind: "template" as const, argumentHint: p.argumentHint })),
+			...(commandResources?.extensionCommands ?? []).map((c) => ({ name: c.name, desc: c.description || c.source, kind: "extension" as const })),
+			...(commandResources?.skills ?? []).map((s) => ({ name: `skill:${s.name}`, desc: s.description, kind: "skill" as const })),
 		];
 		return list.sort((a, b) => a.name.localeCompare(b.name));
-	}, [snapshot, t]);
+	}, [commandResources, t]);
 
 	const runSlashCommand = useCallback(
 		(name: string, args: string) => {
@@ -588,10 +656,16 @@ export function AppShell() {
 				void sendCommand({ cmd: "fork" }).then((r) => {
 					if (r.success && r.data?.sessionPath) openSession(r.data.sessionPath);
 				});
-			} else if (name === "reload") void sendCommand({ cmd: "reload" }).then(() => refreshModels());
-			else setError(t.cmdUnknown.replace("{name}", name));
+			} else if (name === "reload") {
+				// 新会话页没有会话可重载：重新发现命令并刷模型目录即可
+				if (currentId) void sendCommand({ cmd: "reload" }).then(() => refreshModels());
+				else {
+					setResourcesVersion((version) => version + 1);
+					void refreshModels();
+				}
+			} else setError(t.cmdUnknown.replace("{name}", name));
 		},
-		[sendCommand, currentId, closeSession, openSession, setError, t],
+		[sendCommand, currentId, closeSession, openSession, refreshModels, setError, t],
 	);
 
 	const projectTrust = snapshot?.projectTrust;
@@ -612,11 +686,13 @@ export function AppShell() {
 
 	// 当前会话名 / 工作区标题
 	const currentSession = sessions.find((s) => s.path === currentPath);
-	const firstUserMsgText = (
+	const firstUserText = (
 		state.messages
 			.find((m) => m.role === "user")
 			?.content?.find((c: any) => c.type === "text" && c.text?.trim()) as any
 	)?.text?.trim();
+	// 技能展开的消息不能原样当标题（会露出 <skill name=…> 和 SKILL.md 正文）
+	const firstUserMsgText = firstUserText ? promptTitleText(firstUserText) : firstUserText;
 	const title =
 		snapshot?.name ||
 		currentSession?.name ||
@@ -696,6 +772,8 @@ export function AppShell() {
 		connected: state.connected,
 	});
 	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy, kind: node.kind }), [viewer]);
+	// 正文行内代码里的路径走页内查看器；工具行上那个按钮仍然是本机编辑器（openInEditor）
+	const openPathInViewer = useCallback((filePath: string) => viewer.open(filePath), [viewer.open]);
 	// 打开面板时落在最新轮:useGrowth 活在 AppShell 里、不随抽屉卸载,state 不会自己回到最新,
 	// 所以每次从「关」变「开」(或换了工作区)都显式选一次最新轮。
 	// 新轮次出现时不再自动跳——用户打开面板后停在哪一轮就是哪一轮。
@@ -749,7 +827,7 @@ export function AppShell() {
 	// 抽屉里的一个入口,不再单独占一列,所以是 3 列而不是 4 列。
 	// JSX 里各列的渲染顺序必须与这里严格一致,否则网格会把内容摆错列。
 	// 最右一列只有一条宽度(rightWidth):详情栏与抽屉合并后不再各占一列。
-	const rightColumnVisible = Boolean(selected) || drawerOpen || sideChatOpen;
+	const rightColumnVisible = Boolean(selected) || drawerOpen;
 	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px minmax(0,1fr) ${
 		rightColumnVisible ? `${rightWidth}px` : "0px"}`;
 
@@ -769,17 +847,7 @@ export function AppShell() {
 			} : { background: "var(--dsw-sidebar-fill)", borderLeft: "0.5px solid var(--dsw-border-l2)" }}
 		>
 			{selected ? (
-				<TrajInspector entry={selected} onClose={() => setSelected(null)} />
-			) : sideChatOpen ? (
-				<SideChatPanel
-					sessionId={currentId}
-					ready={Boolean(snapshot)}
-					mainModel={snapshot?.model}
-					models={modelChoices}
-					providerNames={providerNames}
-					authByProvider={authByProvider}
-					onClose={() => setSideChatOpen(false)}
-				/>
+				<TrajInspector entry={selected} onClose={() => setSelected(null)} contextLookup={contextLookup} />
 			) : (
 				<DrawerPanel
 					cwd={panelCwd}
@@ -845,35 +913,20 @@ export function AppShell() {
 					setGroupBy={setGroupBy}
 					setOrderBy={setOrderBy}
 					collapsed={isNarrow ? false : sidebarCollapsed}
-					onToggleCollapse={isNarrow ? () => setMobileSidebarOpen(false) : toggleSidebar}
-					onOpen={(path) => {
-						openSession(path);
-						setMobileSidebarOpen(false);
-					}}
-					onNew={() => {
-						// 对齐 dsh startSession：新会话默认落在当前会话的工作区（无则取最近工作区）
-						const cur = sessions.find((s) => s.path === currentPath)?.cwd;
-						setHeroCwd(cur || heroCwd || knownCwds[0] || "");
-						closeSession();
-					}}
-					onNewInWorkspace={(cwd) => {
-						// dsh 惰性新建：只预选工作区进草稿态，发送第一条消息才真正创建会话
-						setHeroCwd(cwd);
-						closeSession();
-					}}
+					onToggleCollapse={isNarrow ? closeMobileNav : toggleSidebar}
+					onOpen={openSessionAndCloseMobileNav}
+					onNew={startNewSessionInCurrentWorkspace}
+					onNewInWorkspace={startNewSessionInWorkspace}
 					onRename={doRename}
 					onFork={doForkSession}
 					onArchive={doArchiveSession}
 					onUnarchive={doUnarchiveSession}
-					onExport={(path) => window.open(`/api/sessions/${encodeURIComponent(b64url(path))}/export?format=jsonl`, "_blank")}
+					onExport={exportSessionFile}
 					getWorkspaceName={getWorkspaceName}
 					onRenameWorkspace={doRenameWorkspace}
 					onDeleteWorkspace={doDeleteWorkspace}
-					onOpenSettings={() => {
-						setSettingsOpen(true);
-						setMobileSidebarOpen(false);
-					}}
-					onAddWorkspace={() => void addWorkspaceByPicker()}
+					onOpenSettings={openSettingsFromSidebar}
+					onAddWorkspace={addWorkspaceFromSidebar}
 					draftCwd={!currentId ? heroCwd || null : null}
 				/>
 			</div>
@@ -939,27 +992,6 @@ export function AppShell() {
 									<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14.5, fontWeight: 600 }}>
 										{title}
 									</span>
-									{/* 旁聊直达按钮；旁聊与其他入口共用右侧抽屉。 */}
-									<button
-										type="button"
-										className="icon-btn"
-										style={{ width: 26, height: 26, color: sideChatOpen ? "var(--dsw-accent)" : "var(--dsw-label-secondary)" }}
-										aria-label={t.sideChat}
-										title={t.sideChat}
-										aria-pressed={sideChatOpen}
-										data-testid="side-chat-toggle"
-										onClick={() => {
-											preserveChatReadingPosition();
-											setSelected(null);
-											setSideChatOpen((open) => {
-												// 最右一列只有一个：开旁聊就收起抽屉
-												if (!open) toggleDrawer(false);
-												return !open;
-											});
-										}}
-									>
-										<SideChatIcon size={16} />
-									</button>
 									{/* 右侧抽屉的入口与开关 */}
 									<button
 										type="button"
@@ -1031,6 +1063,7 @@ export function AppShell() {
 									cwd={panelCwd}
 									onOpenTrajectory={openToolTrajectory}
 									onOpenFile={openInEditor}
+									onOpenPath={openPathInViewer}
 									onFork={handleFork}
 									onEditMessage={doEditMessage}
 									roundBadges={roundBadges}
@@ -1115,7 +1148,7 @@ export function AppShell() {
 			{/* 窄屏最右一列:贴右边滑出(轨迹详情与抽屉共用,遮罩关闭回到对话) */}
 			{isNarrow && rightColumnVisible && (
 				<>
-					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : sideChatOpen ? setSideChatOpen(false) : toggleDrawer(false))} aria-label={t.close} />
+					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : toggleDrawer(false))} aria-label={t.close} />
 					{rightColumn}
 				</>
 			)}
@@ -1345,6 +1378,8 @@ function Hero({
 					pendingUploadCount={pendingUploadCount}
 					pendingSend={pendingSend}
 					onSendPendingChange={onSendPendingChange}
+					// Hero 的附件占位，避免 @ 引用和图片盖住上方工作区选择器
+					attachmentLayout="flow"
 					// 新会话也能 @ 引用：候选来自上面选中的工作区
 					cwd={cwd}
 					commands={commands}