@rexvane/piweb 0.3.20 → 0.3.22

package/src/components/AppShell.tsx

@@ -9,6 +9,7 @@ import { PiMark } from "@/components/PiMark";
 import { ChatInput, EMPTY_CHAT_DRAFT, type ChatDraft, type ChatDraftUpdate } from "@/components/ChatInput";
 import { ChatWindow, SessionStatsBar, type RoundBadge } from "@/components/ChatWindow";
 import { ExtensionDialogHost, ExtensionNotices } from "@/components/ExtensionUI";
+import { UpdateNotice } from "@/components/update/UpdateNotice";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
 import type { DrawerSection } from "@/components/DrawerPanel";
@@ -40,6 +41,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 几何常量
@@ -163,6 +167,8 @@ export function 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,6 +178,29 @@ export function AppShell() {
 		setSidebarCollapsed(localStorage.getItem("piweb.sidebarCollapsed") === "1");
 		setDrawerOpen(localStorage.getItem("piweb.drawerOpen") === "1");
 	}, []);
+	/** 新会话时加载用户之前的选择，或使用系统建议（第一个认证的） */
+	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) => {
 		setDrawerOpen((cur) => {
@@ -279,11 +308,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]);
 
 
 	// ---------- 拖拽 ----------
@@ -461,12 +507,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 };
@@ -518,7 +566,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],
@@ -587,7 +635,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());
@@ -726,7 +776,7 @@ export function AppShell() {
 
 	return (
 		<div
-			className="grid h-screen w-screen overflow-hidden"
+			className="pw-app-shell grid w-screen overflow-hidden"
 			style={{
 				gridTemplateColumns: gridCols,
 				// 收起/展开不做过渡：grid-template-columns 是布局属性，动画它会让浏览器逐帧
@@ -822,15 +872,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}
 						/>
 						{/* 草稿阶段的错误行内显示（不再弹右下角） */}
@@ -951,7 +1003,7 @@ export function AppShell() {
 											contextPercent={snapshot?.contextUsage?.percent ?? null}
 											contextTokens={snapshot?.contextUsage?.tokens ?? null}
 											contextWindow={snapshot?.contextUsage?.contextWindow ?? null}
-											contextSource={{ systemChars: contextSystemChars, messages: state.messages, breakdown: snapshot?.contextBreakdown }}
+											contextSource={{ systemChars: contextSystemChars, messages: state.messages, breakdown: snapshot?.contextBreakdown, loadFull: () => sendCommand({ cmd: "prepare" }) }}
 											contextVisible={(snapshot?.messages?.length ?? 0) > 0}
 											model={snapshot?.model}
 											thinkingLevel={snapshot?.thinkingLevel}
@@ -961,6 +1013,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" })}
@@ -1037,7 +1090,10 @@ export function AppShell() {
 			)}
 			{/* 只有远程设备（手机走 tailnet）会走到这里：本机仍然用系统原生对话框 */}
 			<DirectoryPicker open={dirPickerOpen} onConfirm={(path) => void confirmDirPicker(path)} onCancel={cancelDirPicker} />
-			<ExtensionNotices notices={state.extensionNotices} onDismiss={dismissExtensionNotice} />
+			<ExtensionNotices notices={state.extensionNotices} onDismiss={dismissExtensionNotice}>
+				{/* 每次启动提醒一次有没有新版本（PiWeb / pi），和扩展通知摞在同一处 */}
+				<UpdateNotice />
+			</ExtensionNotices>
 			<SettingsPanel
 				open={settingsOpen}
 				onClose={() => {
@@ -1109,11 +1165,10 @@ function Hero({
 	providerNames,
 	authByProvider,
 	addWorkspaceByPicker,
-	heroModel,
+	heroChoice,
 	onSelectHeroModel,
-	defaultModel,
 	heroModelLevels,
-	heroThinking,
+	heroEffectiveThinking,
 	onSelectHeroThinking,
 }: {
 	draft: ChatDraft;
@@ -1135,11 +1190,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();
@@ -1233,14 +1287,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}
@@ -1248,8 +1304,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}

package/src/components/ChatInput.tsx

@@ -6,18 +6,23 @@
  * 运行中：Enter 按设置插话 / 排队，Ctrl(⌘)+Enter 用另一种；停止按钮会把排队消息取回输入框（pi 终端同款）；
  * 排队中的消息列在输入卡上方，↑（空输入框时）取回编辑。Enter 发送 / Shift+Enter 换行。
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
 	IconAtOutline16,
 	IconFileOutline16,
+	IconFolderClose16,
 	IconSendArrowUp14,
 	IconStopFill16,
 	IconTerminalOutline14,
 } from "@/components/icons";
 import { ContextMeter } from "@/components/ContextMeter";
+import { COLLAPSE_AT, ComposerImages } from "@/components/composer/ComposerImages";
 import { ModelSelector, type ModelChoice } from "@/components/ModelSelector";
 import { useI18n } from "@/i18n";
+import { useWorkspaceFiles } from "@/hooks/useWorkspaceFiles";
+import { fmtBytes } from "@/lib/format";
 import { otherBehavior, useEnterBehavior } from "@/lib/enter-behavior";
+import { atToken, candidateText, suggestPaths, type PathCandidate } from "@/lib/workspace-index";
 import type { ImageAttachment } from "@/lib/types";
 
 export interface SlashCommand {
@@ -55,6 +60,7 @@ export function ChatInput({
 	contextWindow,
 	contextSource,
 	contextVisible = true,
+	cwd,
 	model,
 	thinkingLevel,
 	thinkingLevels,
@@ -89,11 +95,14 @@ export function ChatInput({
 	/** 上下文分段数据源：ContextMeter 弹窗打开时才做字符统计 */
 	contextSource?: {
 		systemChars: number;
-		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string }> }[];
+		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: import("@/lib/types").TrajTokens; stopReason?: string }[];
 		breakdown?: import("@/lib/types").ContextBreakdown;
+		loadFull?: () => Promise<unknown> | unknown;
 	};
 	/** 还没有对话时隐藏上下文计量 */
 	contextVisible?: boolean;
+	/** 工作区根：@ 引用的候选清单从这里取（不传就不启用 @ 引用） */
+	cwd?: string;
 	model?: { provider: string; id: string; name: string };
 	thinkingLevel?: string;
 	thinkingLevels: string[];
@@ -148,10 +157,18 @@ export function ChatInput({
 	const uploadBusy = uploadCount > 0 || pendingUploadCount > 0;
 	const sendBusy = sending || pendingSend;
 	const [dragActive, setDragActive] = useState(false);
+	/** 引用 chip 超过 COLLAPSE_AT 就先折叠：手机上折行会把输入框顶掉（图片的折叠在 ComposerImages 里） */
+	const [refsExpanded, setRefsExpanded] = useState(false);
 	const dragDepth = useRef(0);
 	const [modelOpen, setModelOpen] = useState(false);
 	const [cmdIdx, setCmdIdx] = useState(0);
 	const [cmdDismissed, setCmdDismissed] = useState(false);
+	// @ 引用：打字触发候选，选中后落成引用 chip（发送时统一拼成 `@路径` 行）
+	const [mention, setMention] = useState<{ query: string; start: number; tokenEnd: number } | null>(null);
+	const [mentionIdx, setMentionIdx] = useState(0);
+	/** 被 Esc 关掉的那个 token（位置 + 原文）；光标在它里面移动不再弹，改了字、或换成别的 token 重新弹 */
+	const mentionDismissed = useRef<string | null>(null);
+	const mentionMenuRef = useRef<HTMLDivElement>(null);
 	const taRef = useRef<HTMLTextAreaElement>(null);
 	const wrapRef = useRef<HTMLDivElement>(null);
 	const { t } = useI18n();
@@ -178,6 +195,79 @@ export function ChatInput({
 	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.split(" ")[0].toLowerCase()));
 	const visibleCommands = filteredCommands;
 	const commandMode = typedCommandMode;
+
+	// ---------- @ 引用：输入 @ 弹候选，选中落成引用 chip ----------
+	// 候选清单一次拉全量（工作区 git 可见文件），之后每个字符都在本地匹配；规则与 pi 终端的 @ 补全一致（见 workspace-index）。
+	const mentionMode = mention !== null;
+	const mentionQuery = mention?.query ?? null;
+	const files = useWorkspaceFiles(cwd ?? "", mentionMode);
+	// 只在候选清单或查询变了时重算：光标移动、其它状态变化引起的重渲染不该每次扫一遍全量清单
+	const suggestions = useMemo(
+		() => (mentionQuery === null ? [] : suggestPaths(files.candidates, mentionQuery)),
+		[files.candidates, mentionQuery],
+	);
+	const effectiveMentionIdx = Math.min(mentionIdx, Math.max(0, suggestions.length - 1));
+
+	useEffect(() => {
+		mentionMenuRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+	}, [mentionIdx, suggestions.length]);
+
+	/**
+	 * 文本 / 光标变了就重新判是否在 @ token 里（Esc 关过的同一个 token 不再弹）。
+	 * 没有工作区就不弹：没有候选来源，菜单只会空转还拦着方向键和 Esc。
+	 */
+	const syncMention = (value: string, caret: number | null) => {
+		const token = caret === null || !cwd ? null : atToken(value, caret);
+		if (!token) {
+			// 离开 token 就忘掉 Esc：之后在同一位置打新的 @ 照常弹
+			mentionDismissed.current = null;
+			setMention(null);
+			return;
+		}
+		if (mentionDismissed.current === `${token.start}:${value.slice(token.start, token.tokenEnd)}`) {
+			setMention(null);
+			return;
+		}
+		if (!mention || mention.start !== token.start || mention.query !== token.query) setMentionIdx(0);
+		if (!mention || mention.start !== token.start || mention.query !== token.query || mention.tokenEnd !== token.tokenEnd) {
+			setMention({ query: token.query, start: token.start, tokenEnd: token.tokenEnd });
+		}
+	};
+
+	const closeMention = (dismiss: boolean) => {
+		if (dismiss && mention) mentionDismissed.current = `${mention.start}:${text.slice(mention.start, mention.tokenEnd)}`;
+		setMention(null);
+		setMentionIdx(0);
+	};
+
+	/** 选中候选：目录引用文件夹本身（要往下钻就继续打 `@src/lib/`），token 从正文里播掉 */
+	const applyMention = (candidate: PathCandidate) => {
+		if (!mention) return;
+		const { start, tokenEnd } = mention;
+		// 目录存成 `src/lib/`：chip 靠尾斜杠判断文件夹（去重会把尾斜杠归一化掉）
+		const path = candidate.dir ? `${candidate.path}/` : candidate.path;
+		changeDraft((previous) => {
+			const refs = previous.references ?? [];
+			// 目录带尾斜杠、文件不带：去重按去掉尾斜杠比较，
+			// 否则「文件面板引用的 src/lib」与「@ 选的 src/lib/」会变成两个 chip
+			const samePath = (a: string, b: string) => a.replace(/[\\/]+$/, "") === b.replace(/[\\/]+$/, "");
+			return {
+				...previous,
+				text: previous.text.slice(0, start) + previous.text.slice(tokenEnd),
+				references: refs.some((existing) => samePath(existing, path)) ? refs : [...refs, path],
+			};
+		});
+		setMention(null);
+		setMentionIdx(0);
+		requestAnimationFrame(() => {
+			autoSize();
+			const ta = taRef.current;
+			if (ta) {
+				ta.focus();
+				ta.setSelectionRange(start, start);
+			}
+		});
+	};
 	// 命令菜单滚动：.popover 的 overflow:hidden 会压掉 overflow-y-auto（unlayered CSS 优先），
 	// 内联 overflowY 强制可滚；键盘导航时把选中项滚进视野
 	const cmdMenuRef = useRef<HTMLDivElement>(null);
@@ -444,6 +534,63 @@ export function ChatInput({
 					{attachmentError}
 				</div>
 			)}
+			{/* @ 引用候选（与斜杠菜单同一处锚点：输入卡上方） */}
+			{mentionMode && (
+				<div
+					ref={mentionMenuRef}
+					data-testid="mention-menu"
+					className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5"
+					role="listbox"
+					aria-label={t.mentionFiles}
+					style={{ overflowY: "auto" }}
+				>
+					<div className="flex items-center gap-2 px-4 pb-1 pt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+						<span>{t.mentionFiles}</span>
+						{files.truncated && <span style={{ color: "var(--dsw-warn)" }}>{t.mentionTruncated}</span>}
+						{files.source === "disk" && <span title={t.mentionDiskSourceHint}>{t.mentionDiskSource}</span>}
+						<span className="flex-1" />
+						<span>{t.mentionHint}</span>
+					</div>
+					{files.status === "loading" && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.panelLoading}</div>
+					)}
+					{files.status === "error" && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-danger)" }} role="alert">{files.error}</div>
+					)}
+					{files.status === "ready" && suggestions.length === 0 && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.mentionNoMatch}</div>
+					)}
+					{suggestions.map(({ candidate, label, description }, i) => (
+						<button
+							key={`${candidate.dir ? "d" : "f"}:${candidate.path}`}
+							type="button"
+							role="option"
+							aria-selected={i === effectiveMentionIdx}
+							className="flex w-full items-center gap-2 px-4 py-1.5 text-left transition-colors"
+							style={{ background: i === effectiveMentionIdx ? "var(--dsw-hover)" : "transparent" }}
+							onMouseEnter={() => setMentionIdx(i)}
+							onClick={() => applyMention(candidate)}
+							title={candidateText(candidate)}
+						>
+							{candidate.dir ? (
+								<IconFolderClose16 size={13} style={{ flex: "none", color: "var(--dsw-warn)" }} />
+							) : (
+								<IconFileOutline16 size={13} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
+							)}
+							{/* 和 pi 终端一样：名字在前，路径在后；根目录下的条目两者相同，不重复显示 */}
+							<span className="flex-none truncate" style={{ maxWidth: "55%", fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-primary)" }}>
+								{label}
+							</span>
+							{description.replace(/\/$/, "") !== label.replace(/\/$/, "") && (
+								<span className="min-w-0 flex-1 truncate" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
+									{description}
+								</span>
+							)}
+						</button>
+					))}
+				</div>
+			)}
+
 			{/* 斜杠命令菜单（dsh：悬浮于输入卡上方，同宽） */}
 			{commandMode && visibleCommands.length > 0 && (
 				<div ref={cmdMenuRef} className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5" role="listbox" aria-label={t.slashCatalog} style={{ overflowY: "auto" }}>
@@ -477,65 +624,62 @@ export function ChatInput({
 				</div>
 			)}
 
-			{/* 附件轨：图片 */}
+			{/* 附件轨：图片（超过 4 张折叠成牌堆，展开沿弧线扇开；点开可放大、切换、删除） */}
 			{images.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-2 px-1">
-					{images.map((img, i) => (
-						<div key={i} className="relative">
-							<img
-								src={`data:${img.mimeType};base64,${img.data}`}
-								alt=""
-								className="h-14 w-14 rounded-lg object-cover"
-								style={{ border: "0.5px solid var(--dsw-border-l2)" }}
-							/>
-							<button
-								className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-[10px]"
-								style={{ background: "var(--dsw-label-primary)", color: "var(--dsw-bg-base)" }}
-								disabled={sendBusy}
-								onClick={() => changeDraft((previous) => ({ ...previous, images: previous.images.filter((_, index) => index !== i) }))}
-							>
-								✕
-							</button>
-						</div>
-					))}
-				</div>
+				<ComposerImages
+					images={images}
+					disabled={sendBusy}
+					onRemove={(index) => changeDraft((previous) => ({ ...previous, images: previous.images.filter((_, at) => at !== index) }))}
+				/>
 			)}
 
-			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用） */}
 			{/* 路径引用(项目结构图/文件面板的「引用到输入框」):独立于正文,发送时拼成 @路径 */}
 			{references.length > 0 && (
 				<div className="mb-2 flex flex-wrap gap-1.5 px-1" data-testid="composer-references">
-					{references.map((path) => (
-						<span
-							key={path}
-							className="flex items-center gap-1 rounded-md px-2 py-1"
-							style={{
-								maxWidth: 240,
-								fontSize: 12,
-								fontFamily: "var(--font-mono)",
-								color: "var(--dsw-label-secondary)",
-								background: "var(--dsw-selector)",
-								border: "0.5px solid var(--dsw-border-l3)",
-							}}
-							title={path}
-						>
-							<IconAtOutline16 size={11} style={{ flex: "none", color: "var(--dsw-accent)" }} />
-							<span className="truncate">{referenceLabelOf(path)}</span>
-							<button
-								type="button"
-								className="flex h-4 w-4 flex-none items-center justify-center rounded-full text-[10px]"
-								style={{ color: "var(--dsw-label-caption)" }}
-								disabled={sendBusy}
-								onClick={() => changeDraft((previous) => ({ ...previous, references: (previous.references ?? []).filter((p) => p !== path) }))}
-								aria-label={`${t.delete} ${path}`}
+					{(refsExpanded ? references : references.slice(0, COLLAPSE_AT)).map((path) => {
+						const chip = referenceChipOf(path);
+						return (
+							<span
+								key={path}
+								className="flex items-center gap-1 rounded-md px-2 py-1"
+								style={{
+									maxWidth: 260,
+									fontSize: 12,
+									fontFamily: "var(--font-mono)",
+									color: "var(--dsw-label-secondary)",
+									background: "var(--dsw-selector)",
+									border: "0.5px solid var(--dsw-border-l3)",
+								}}
+								title={path}
 							>
-								✕
-							</button>
-						</span>
-					))}
+								{chip.dir ? (
+									<IconFolderClose16 size={12} style={{ flex: "none", color: "var(--dsw-warn)" }} />
+								) : (
+									<IconFileOutline16 size={12} style={{ flex: "none", color: "var(--dsw-accent)" }} />
+								)}
+								<span className="truncate">{chip.text}</span>
+								<button
+									type="button"
+									className="flex h-4 w-4 flex-none items-center justify-center rounded-full text-[10px]"
+									style={{ color: "var(--dsw-label-caption)" }}
+									disabled={sendBusy}
+									onClick={() => changeDraft((previous) => ({ ...previous, references: (previous.references ?? []).filter((p) => p !== path) }))}
+									aria-label={`${t.delete} ${path}`}
+								>
+									✕
+								</button>
+							</span>
+						);
+					})}
+					{references.length > COLLAPSE_AT ? (
+						<button type="button" className="pw-chip" data-testid="references-toggle" onClick={() => setRefsExpanded((open) => !open)}>
+							{refsExpanded ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(references.length - COLLAPSE_AT))}
+						</button>
+					) : null}
 				</div>
 			)}
 
+			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用） */}
 			{uploads.length > 0 && (
 				<div className="mb-2 flex flex-wrap gap-2 px-1">
 					{uploads.map((f, i) => (
@@ -604,12 +748,19 @@ export function ChatInput({
 						suppressHydrationWarning
 						className="min-w-0 flex-1 resize-none"
 						style={{ fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))", lineHeight: 1.55 }}
-							onChange={(e) => {
-							setText(e.target.value);
-									setCmdDismissed(false);
+						onChange={(e) => {
+							const value = e.target.value;
+							setText(value);
+							setCmdDismissed(false);
 							setCmdIdx(0);
+							syncMention(value, e.target.selectionStart);
 							autoSize();
 						}}
+						onSelect={(e) => {
+							// 选中了一段文字时不弹：那时 Enter / Tab 应该照常工作
+							const ta = e.target as HTMLTextAreaElement;
+							syncMention(ta.value, ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null);
+						}}
 						onPaste={(e) => {
 							const files = Array.from(e.clipboardData.files);
 							if (files.length) {
@@ -618,6 +769,34 @@ export function ChatInput({
 							}
 						}}
 						onKeyDown={(e) => {
+							// 输入法组字时的按键归输入法（Esc 取消组字、↑↓ 选字、Enter 上屏），一律不当候选操作
+							if (mentionMode && !e.nativeEvent.isComposing) {
+								// 候选开着时优先于发送：Esc 关掉、↑↓ 选、Enter / Tab 采纳。
+								// 没有候选时不拦 Enter——`@某人` 这种不成候选的文字要能直接发出去。
+								if (e.key === "Escape") {
+									e.preventDefault();
+									closeMention(true);
+									return;
+								}
+								if (suggestions.length > 0) {
+									if (e.key === "ArrowDown") {
+										e.preventDefault();
+										setMentionIdx((i) => Math.min(i + 1, suggestions.length - 1));
+										return;
+									}
+									if (e.key === "ArrowUp") {
+										e.preventDefault();
+										setMentionIdx((i) => Math.max(i - 1, 0));
+										return;
+									}
+									if (e.key === "Enter" || e.key === "Tab") {
+										e.preventDefault();
+										const picked = suggestions[effectiveMentionIdx];
+										if (picked) applyMention(picked.candidate);
+										return;
+									}
+								}
+							}
 							if (adopted && text === "" && (e.key === "Backspace" || e.key === "Escape")) {
 								// 空参数时退格/Esc：摘掉命令胶囊
 								e.preventDefault();
@@ -710,6 +889,7 @@ export function ChatInput({
 							percent={contextPercent}
 							tokens={contextTokens}
 							contextWindow={contextWindow}
+							model={model}
 							source={contextSource}
 						/>
 					)}
@@ -772,17 +952,19 @@ export function ChatInput({
 }
 
 function fmtUploadSize(bytes: number): string {
-	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-	if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
-	return `${bytes}B`;
+	return fmtBytes(bytes).replace(/ /g, "");
 }
 
 /**
- * 引用 chip 上的显示文本:只要最后一段(文件名/目录名),太挤就靠 CSS 截断。
- * 目录引用带尾斜杠,和文件区分开(与项目结构图里的展示一致)。
+ * 引用 chip 上显示的短标签。只取 basename 会分不清两件事：目录与同名文件
+ * （`src/lib` 与 `src/lib.ts` 都显示 `lib`；`a/index.ts` 与 `b/index.ts` 都显示 `index.ts`）。
+ * 规则：目录带尾斜杠（`lib/`，配文件夹图标）；其余最多保留**尾部两段**
+ * （`src/lib/index.ts` → `…/lib/index.ts`）。完整路径仍在 title 里。
  */
-function referenceLabelOf(path: string): string {
-	const trimmed = path.replace(/[\\/]+$/, "");
-	const base = trimmed.split(/[\\/]/).filter(Boolean).pop() ?? path;
-	return /[\\/]$/.test(path) ? `${base}/` : base;
+function referenceChipOf(path: string): { text: string; dir: boolean } {
+	const dir = /[\\/]$/.test(path);
+	const parts = path.replace(/[\\/]+$/, "").split(/[\\/]/).filter(Boolean);
+	if (!parts.length) return { text: path, dir };
+	const tail = parts.slice(-2).join("/");
+	return { text: dir ? `${tail}/` : parts.length > 2 ? `…/${tail}` : tail, dir };
 }