@rexvane/piweb 0.3.21 → 0.3.23

package/src/components/AppShell.tsx

@@ -13,6 +13,9 @@ 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";
 
 // 首屏不需要的重组件按需加载（设置面板含供应商配置与代码高亮，轨迹/文件只在打开时才用）
@@ -41,6 +44,9 @@ 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 { 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";
 
 // dsh ui-layout columns.ts 几何常量
@@ -154,16 +160,28 @@ 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 里、不随抽屉卸载,所以必须显式调用 */
 	const growthSelectLatest = useRef<() => void>(() => {});
 	const [heroCwd, setHeroCwd] = useState("");
 	const [heroModel, setHeroModel] = useState<{ provider: string; id: string } | null>(null);
+	/** 当前工作区的新会话默认值（pi 的初始模型规则 + 设置里的思考档位），切换工作区时重新取 */
+	const [heroDefaults, setHeroDefaults] = useState<NewSessionDefaults | null>(null);
 	const [heroThinking, setHeroThinking] = useState("");
 	const [isNarrow, setIsNarrow] = useState(false);
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
@@ -172,23 +190,51 @@ export function AppShell() {
 		setRightWidth(restoreRightWidth());
 		setSidebarCollapsed(localStorage.getItem("piweb.sidebarCollapsed") === "1");
 		setDrawerOpen(localStorage.getItem("piweb.drawerOpen") === "1");
+		const section = localStorage.getItem("piweb.drawerSection");
+		if (["project", "prompts", "git", "import"].includes(section ?? "")) setDrawerSection(section as DrawerSection);
 	}, []);
+	/** 新会话时加载用户之前的选择，或使用系统建议（第一个认证的） */
+	useEffect(() => {
+		if (!heroCwd) {
+			setHeroModel(null);
+			return;
+		}
+		// 只认这个工作区自己记住的模型；没有就不预选，输入框等用户在新会话页选
+		setHeroModel(readRememberedHeroModel(localStorage, heroCwd));
+	}, [heroCwd]);
+	useEffect(() => {
+		setHeroDefaults(null);
+		if (!heroCwd) return;
+		let stale = false;
+		fetch(`/api/models/defaults?cwd=${encodeURIComponent(heroCwd)}`)
+			.then((r) => r.json() as Promise<{ success?: boolean; data?: NewSessionDefaults }>)
+			.then((json) => {
+				if (!stale && json.success && json.data) setHeroDefaults(json.data);
+			})
+			.catch(() => undefined);
+		return () => {
+			stale = true;
+		};
+	}, [heroCwd]);
 	/** 右侧抽屉开关(项目栏降级成抽屉入口后,它是"最右一列是否打开"唯一的开关) */
 	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;
 		});
 	}, []);
 	/** 切到某个抽屉入口并打开抽屉(顶栏图标 / 点 badge 都用这条) */
 	const openDrawerSection = useCallback(
 		(section: DrawerSection) => {
-			setDrawerSection(section);
+			chooseDrawerSection(section);
 			setSelected(null);
 			toggleDrawer(true);
 		},
-		[toggleDrawer],
+		[toggleDrawer, chooseDrawerSection],
 	);
 	// Ctrl/⌘+Shift+E：打开抽屉并切到「项目」入口；已经停在该入口时再按收起。
 	// 轨迹详情占着这一列时，这个快捷键把抽屉叫回来（而不是切到轨迹详情）。
@@ -280,11 +326,28 @@ export function AppShell() {
 			})),
 		[models],
 	);
-	const defaultModel = useMemo(() => modelChoices.find((m) => authByProvider[m.provider]), [modelChoices, authByProvider]);
+	// 新会话页当前选中的模型：只有在这个工作区选过（或记住过）才有；没有就是 undefined，输入框保持禁用
+	const heroChoice = useMemo(
+		() => (heroModel ? modelChoices.find((m) => m.provider === heroModel.provider && m.id === heroModel.id) : undefined),
+		[heroModel, modelChoices],
+	);
 	const heroModelLevels = useMemo(
-		() => (heroModel ? modelChoices.find((m) => m.provider === heroModel.provider && m.id === heroModel.id) : defaultModel)?.thinkingLevels ?? ["off", "minimal", "low", "medium", "high", "xhigh", "max"],
-		[heroModel, modelChoices, defaultModel],
+		() => heroChoice?.thinkingLevels ?? ["off", "minimal", "low", "medium", "high", "xhigh", "max"],
+		[heroChoice],
 	);
+	/**
+	 * 新会话实际会用的思考档位：用户显式选过才算选择（下发时才带上）；界面平时只显示这里算出的生效值，
+	 * 不把它当作选择发给服务端。
+	 */
+	const heroEffectiveThinking = useMemo(() => {
+		const choice = heroChoice;
+		return newSessionThinkingLevel({
+			supported: heroModelLevels,
+			requested: heroThinking,
+			modelOverride: choice ? heroDefaults?.modelThinkingLevels[`${choice.provider}/${choice.id}`] : undefined,
+			defaultLevel: heroDefaults?.defaultThinkingLevel,
+		});
+	}, [heroChoice, heroModelLevels, heroThinking, heroDefaults]);
 
 
 	// ---------- 拖拽 ----------
@@ -306,12 +369,14 @@ export function AppShell() {
 				if (!frame) {
 					frame = requestAnimationFrame(() => {
 						frame = 0;
+						preserveChatReadingPosition();
 						commit(latest);
 					});
 				}
 			};
 			const up = () => {
 				if (frame) cancelAnimationFrame(frame);
+				preserveChatReadingPosition();
 				commit(latest);
 				persist(side === "sidebar" ? "piweb.sidebarW" : "piweb.drawerW", latest);
 				window.removeEventListener("pointermove", move);
@@ -327,6 +392,7 @@ export function AppShell() {
 	);
 
 	const toggleSidebar = () => {
+		preserveChatReadingPosition();
 		const next = !sidebarCollapsed;
 		setSidebarCollapsed(next);
 		localStorage.setItem("piweb.sidebarCollapsed", next ? "1" : "0");
@@ -341,6 +407,7 @@ export function AppShell() {
 	const openToolTrajectory = useCallback((toolCallId: string) => {
 		const entry = trajectoryRef.current.find((item) => item.toolCallId === toolCallId);
 		if (!entry) return;
+		preserveChatReadingPosition();
 		// 最右一列与抽屉互斥:选中轨迹详情即接管这一列,关掉后回落回抽屉的当前入口
 		setSelected(entry);
 	}, []);
@@ -462,12 +529,14 @@ export function AppShell() {
 			setError(t.pickWorkspaceFirst);
 			return { success: false };
 		}
-		// 用户没手动选过模型时也要把界面显示的默认模型显式下发，
-		// 否则后端不 setModel、SDK 自选的默认与界面显示不一致。
-		const effective = heroModel ?? (defaultModel ? { provider: defaultModel.provider, id: defaultModel.id } : null);
+		// 没选模型不建会话：输入框本来就禁用，这里再拦一次；模型一律显式下发，不让 SDK 自选
+		if (!heroChoice) {
+			setError(t.blockedComposer);
+			return { success: false };
+		}
 		const p = await newSession(cwd, {
-			provider: effective?.provider,
-			modelId: effective?.id,
+			provider: heroChoice.provider,
+			modelId: heroChoice.id,
 			thinking: heroThinking || undefined,
 		});
 		if (!p) return { success: false };
@@ -519,7 +588,7 @@ 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" });
+			} else if (name === "reload") void sendCommand({ cmd: "reload" }).then(() => refreshModels());
 			else setError(t.cmdUnknown.replace("{name}", name));
 		},
 		[sendCommand, currentId, closeSession, openSession, setError, t],
@@ -588,7 +657,9 @@ export function AppShell() {
 		if (!path) return;
 		updateDraft(draftKey, (previous) => {
 			const references = previous.references ?? [];
-			if (references.includes(path)) return previous;
+			// 目录在 @ 选择器里存成 `src/lib/`：去重按去掉尾斜杠比较，避免同一目录两条
+			const samePath = (a: string, b: string) => a.replace(/[\\/]+$/, "") === b.replace(/[\\/]+$/, "");
+			if (references.some((existing) => samePath(existing, path))) return previous;
 			return { ...previous, references: [...references, path] };
 		});
 		requestAnimationFrame(() => document.querySelector<HTMLTextAreaElement>('[data-testid="composer"] textarea')?.focus());
@@ -624,7 +695,7 @@ export function AppShell() {
 		watchRounds: Boolean(currentPath),
 		connected: state.connected,
 	});
-	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy }), [viewer]);
+	const openFileNode = useCallback((node: TreeNode) => viewer.open(node.path, { from: node.from, lazy: node.lazy, kind: node.kind }), [viewer]);
 	// 打开面板时落在最新轮:useGrowth 活在 AppShell 里、不随抽屉卸载,state 不会自己回到最新,
 	// 所以每次从「关」变「开」(或换了工作区)都显式选一次最新轮。
 	// 新轮次出现时不再自动跳——用户打开面板后停在哪一轮就是哪一轮。
@@ -655,11 +726,11 @@ export function AppShell() {
 	const growthSelect = growth.select;
 	const showRound = useCallback((commit: string) => {
 		skipLatestOnce.current = true;
-		setDrawerSection("project");
+		chooseDrawerSection("project");
 		setSelected(null);
 		toggleDrawer(true);
 		growthSelect(commit);
-	}, [toggleDrawer, growthSelect]);
+	}, [toggleDrawer, growthSelect, chooseDrawerSection]);
 	const jumpToChat = useCallback((messageId: string) => {
 		requestAnimationFrame(() => {
 			const node = document.querySelector<HTMLElement>(`[data-role="user"][data-message-id="${CSS.escape(messageId)}"]`);
@@ -678,7 +749,7 @@ export function AppShell() {
 	// 抽屉里的一个入口,不再单独占一列,所以是 3 列而不是 4 列。
 	// JSX 里各列的渲染顺序必须与这里严格一致,否则网格会把内容摆错列。
 	// 最右一列只有一条宽度(rightWidth):详情栏与抽屉合并后不再各占一列。
-	const rightColumnVisible = Boolean(selected) || drawerOpen;
+	const rightColumnVisible = Boolean(selected) || drawerOpen || sideChatOpen;
 	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px minmax(0,1fr) ${
 		rightColumnVisible ? `${rightWidth}px` : "0px"}`;
 
@@ -699,11 +770,21 @@ export function AppShell() {
 		>
 			{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)}
+				/>
 			) : (
 				<DrawerPanel
 					cwd={panelCwd}
 					section={drawerSection}
-					onSectionChange={setDrawerSection}
+					onSectionChange={chooseDrawerSection}
 					onClose={() => toggleDrawer(false)}
 					sessionId={currentId}
 					promptRefreshKey={currentId}
@@ -823,15 +904,17 @@ export function AppShell() {
 							providerNames={providerNames}
 							authByProvider={authByProvider}
 							addWorkspaceByPicker={addWorkspaceByPicker}
-							heroModel={heroModel}
+							heroChoice={heroChoice}
 							onSelectHeroModel={(provider, id) => {
-								setHeroModel({ provider, id });
+								const choice = { provider, id };
+								setHeroModel(choice);
+								// 只记在当前工作区名下
+								if (heroCwd) writeRememberedHeroModel(localStorage, heroCwd, choice);
 								const levels = modelChoices.find((model) => model.provider === provider && model.id === id)?.thinkingLevels ?? [];
 								if (heroThinking && !levels.includes(heroThinking)) setHeroThinking("");
 							}}
-							defaultModel={defaultModel}
 							heroModelLevels={heroModelLevels}
-							heroThinking={heroThinking}
+							heroEffectiveThinking={heroEffectiveThinking}
 							onSelectHeroThinking={setHeroThinking}
 						/>
 						{/* 草稿阶段的错误行内显示（不再弹右下角） */}
@@ -856,10 +939,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: 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"
 										className="icon-btn"
@@ -962,6 +1063,7 @@ export function AppShell() {
 											authByProvider={authByProvider}
 											queue={snapshot?.queue ?? { steering: [], followUp: [] }}
 											commands={slashCommands}
+											cwd={panelCwd}
 											onCommand={runSlashCommand}
 											onSend={sendPrompt}
 											onSteer={(text, images) => sendCommand({ cmd: "prompt", text, images, behavior: "steer" })}
@@ -1013,7 +1115,7 @@ export function AppShell() {
 			{/* 窄屏最右一列:贴右边滑出(轨迹详情与抽屉共用,遮罩关闭回到对话) */}
 			{isNarrow && rightColumnVisible && (
 				<>
-					<button className="fixed inset-0 z-[85]" style={{ background: "var(--dsw-mask)" }} onClick={() => (selected ? setSelected(null) : toggleDrawer(false))} aria-label={t.close} />
+					<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} />
 					{rightColumn}
 				</>
 			)}
@@ -1113,11 +1215,10 @@ function Hero({
 	providerNames,
 	authByProvider,
 	addWorkspaceByPicker,
-	heroModel,
+	heroChoice,
 	onSelectHeroModel,
-	defaultModel,
 	heroModelLevels,
-	heroThinking,
+	heroEffectiveThinking,
 	onSelectHeroThinking,
 }: {
 	draft: ChatDraft;
@@ -1139,11 +1240,10 @@ function Hero({
 	providerNames: Record<string, string>;
 	authByProvider: Record<string, boolean>;
 	addWorkspaceByPicker: () => Promise<string | null>;
-	heroModel: { provider: string; id: string } | null;
+	heroChoice?: ModelChoice;
 	onSelectHeroModel: (provider: string, id: string) => void;
-	defaultModel?: ModelChoice;
 	heroModelLevels: string[];
-	heroThinking: string;
+	heroEffectiveThinking: string;
 	onSelectHeroThinking: (level: string) => void;
 }) {
 	const { t } = useI18n();
@@ -1237,14 +1337,16 @@ function Hero({
 
 				{/* 输入卡 */}
 				<ChatInput
-						draft={draft}
-						onDraftChange={onDraftChange}
-						onUploadError={onUploadError}
-						onUploadProgress={onUploadProgress}
-						uploadFailure={uploadFailure}
-						pendingUploadCount={pendingUploadCount}
-						pendingSend={pendingSend}
-						onSendPendingChange={onSendPendingChange}
+					draft={draft}
+					onDraftChange={onDraftChange}
+					onUploadError={onUploadError}
+					onUploadProgress={onUploadProgress}
+					uploadFailure={uploadFailure}
+					pendingUploadCount={pendingUploadCount}
+					pendingSend={pendingSend}
+					onSendPendingChange={onSendPendingChange}
+					// 新会话也能 @ 引用：候选来自上面选中的工作区
+					cwd={cwd}
 					commands={commands}
 					onCommand={onCommand}
 					isStreaming={false}
@@ -1252,8 +1354,8 @@ function Hero({
 					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}
+					model={heroChoice}
+					thinkingLevel={heroEffectiveThinking}
 					thinkingLevels={heroModelLevels}
 					models={models}
 					providerNames={providerNames}