@rexvane/piweb 0.3.21 → 0.3.23

package/src/components/SettingsPanel.tsx

@@ -23,6 +23,7 @@ import {
 	IconShieldOutline16,
 	IconSkillOutline16,
 	IconTrashOutline16,
+	IconWarningOutline16,
 } from "@/components/icons";
 import { ProviderBrand } from "@/components/ProviderBrand";
 import {
@@ -35,6 +36,7 @@ import { RemoteSection } from "@/components/RemoteSection";
 import { CopyCommand } from "@/components/update/CopyCommand";
 import { checkUpdate, loadUpdates, runUpdate, useUpdates, type UpdateTarget } from "@/components/update/update-store";
 import { useI18n } from "@/i18n";
+import { fmtTokens } from "@/lib/format";
 import { applyPebrelTheme, loadPebrelTheme, loadThemeMode, type PebrelTheme, type ThemeMode } from "@/lib/theme";
 import { applyFontChoice, CUSTOM_PREFIX, FONT_PRESETS, loadFontChoice } from "@/lib/font";
 import {
@@ -47,7 +49,22 @@ import {
 	type StreamSettings,
 	type StreamStyle,
 } from "@/lib/chat/stream-settings";
-import { modelDraftFromConfig, serializeProviderDraft, validateModelDrafts, type ModelDraft } from "@/lib/model-draft";
+import {
+	customModelGaps,
+	fillModelFields,
+	formatCapacity,
+	isInertProviderConfig,
+	modelDraftFromCatalog,
+	modelDraftFromConfig,
+	modelDraftsFromProviderConfig,
+	parseCapacity,
+	PI_MODEL_FALLBACKS,
+	serializeProviderDraft,
+	validateModelDrafts,
+	type CustomModelGap,
+	type ModelDraft,
+	type ModelFieldFill,
+} from "@/lib/model-draft";
 import { customApiOptions } from "@/lib/provider-display";
 import { quotaWindowKind, supportsUsageProbe, type BalanceAmount, type BalanceDetailKey, type ProviderUsage, type QuotaWindow, type XaiUsage } from "@/lib/provider-usage";
 import type { ProviderView } from "@/lib/models-service";
@@ -871,12 +888,167 @@ function FontFamilyPicker({ scope }: { scope: "ui" | "mono" }) {
 
 // ---------- Models ----------
 
+type AuditRow = { contextWindow: string; maxTokens: string; vision: "" | "image" | "text" };
+const EMPTY_AUDIT_ROW: AuditRow = { contextWindow: "", maxTokens: "", vision: "" };
+
+/**
+ * 模型配置体检：models[] 里有字段没写的模型，pi 会按 PI_MODEL_FALLBACKS / 纯文本处理。
+ * 不替用户猜——空着的格子由用户填（支持 256K / 1M 写法），保存时只补空字段，已写的值不改。
+ */
+function ModelFieldAudit({ gaps, providerLabel, busy, onSave }: {
+	gaps: CustomModelGap[];
+	providerLabel: (id: string) => string;
+	busy: boolean;
+	/** 保存成功返回 true（之后清空填写） */
+	onSave: (fills: ModelFieldFill[]) => Promise<boolean>;
+}) {
+	const { t } = useI18n();
+	const [rows, setRows] = useState<Record<string, AuditRow>>({});
+	const keyOf = (gap: CustomModelGap) => `${gap.provider}\u0000${gap.index}`;
+	const rowOf = (gap: CustomModelGap) => rows[keyOf(gap)] ?? EMPTY_AUDIT_ROW;
+	const edit = (gap: CustomModelGap, patch: Partial<AuditRow>) =>
+		setRows((current) => ({ ...current, [keyOf(gap)]: { ...(current[keyOf(gap)] ?? EMPTY_AUDIT_ROW), ...patch } }));
+	const visionGaps = gaps.filter((gap) => gap.missing.includes("input"));
+	const markVision = (vision: "image" | "text") =>
+		setRows((current) => {
+			const next = { ...current };
+			for (const gap of visionGaps) next[keyOf(gap)] = { ...(next[keyOf(gap)] ?? EMPTY_AUDIT_ROW), vision };
+			return next;
+		});
+
+	// 每行填的文本 → 要写的值；有一格格式不对就不让保存（那一格标红）
+	let invalid = false;
+	const fills: ModelFieldFill[] = [];
+	for (const gap of gaps) {
+		const row = rows[keyOf(gap)];
+		if (!row) continue;
+		const contextWindow = gap.missing.includes("contextWindow") ? parseCapacity(row.contextWindow) : undefined;
+		const maxTokens = gap.missing.includes("maxTokens") ? parseCapacity(row.maxTokens) : undefined;
+		if (Number.isNaN(contextWindow) || Number.isNaN(maxTokens)) {
+			invalid = true;
+			continue;
+		}
+		const vision = gap.missing.includes("input") && row.vision ? row.vision === "image" : undefined;
+		if (contextWindow === undefined && maxTokens === undefined && vision === undefined) continue;
+		fills.push({ provider: gap.provider, index: gap.index, id: gap.id, contextWindow, maxTokens, vision });
+	}
+
+	const save = async () => {
+		if (await onSave(fills)) setRows({});
+	};
+
+	const capacityCell = (gap: CustomModelGap, field: "contextWindow" | "maxTokens", label: string) => {
+		if (!gap.missing.includes(field)) {
+			return (
+				<span className="truncate" style={{ fontFamily: "var(--font-mono)", color: "var(--dsw-label-secondary)" }}>
+					<span className="sm:hidden" style={{ color: "var(--dsw-label-caption)" }}>{label} </span>
+					{formatCapacity(gap[field]) || "—"}
+				</span>
+			);
+		}
+		const text = rowOf(gap)[field];
+		return (
+			<input
+				className="pw-audit-field"
+				style={{ fontFamily: "var(--font-mono)" }}
+				value={text}
+				onChange={(event) => edit(gap, { [field]: event.target.value })}
+				placeholder={label}
+				aria-label={`${gap.id} ${label}`}
+				aria-invalid={Number.isNaN(parseCapacity(text)) || undefined}
+				disabled={busy}
+			/>
+		);
+	};
+
+	return (
+		<section className="flex flex-col gap-3 rounded-2xl p-4" style={{ border: "0.5px solid var(--dsw-border-l3)", background: "var(--dsw-hover)" }} data-testid="model-audit">
+			<div className="flex items-start gap-2.5">
+				<IconWarningOutline16 size={16} style={{ flex: "none", marginTop: 1, color: "var(--dsw-warn)" }} />
+				<div className="min-w-0 flex-1">
+					<div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.modelAuditTitle.replace("{n}", String(gaps.length))}</div>
+					<div className="mt-1" style={{ fontSize: 12, color: "var(--dsw-label-caption)", lineHeight: 1.65 }}>
+						{t.modelAuditDesc
+							.replace("{ctx}", formatCapacity(PI_MODEL_FALLBACKS.contextWindow))
+							.replace("{out}", formatCapacity(PI_MODEL_FALLBACKS.maxTokens))}
+					</div>
+				</div>
+			</div>
+
+			<div style={{ fontSize: 12.5 }} role="table" aria-label={t.modelAuditTitle.replace("{n}", String(gaps.length))}>
+				<div role="row" className="hidden gap-x-2 px-1 pb-1.5 sm:grid sm:grid-cols-[minmax(0,1fr)_92px_92px_108px]" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+					<span role="columnheader">{t.modelAuditColModel}</span>
+					<span role="columnheader">{t.modelAuditColContext}</span>
+					<span role="columnheader">{t.modelAuditColOutput}</span>
+					<span role="columnheader">{t.modelAuditColVision}</span>
+				</div>
+				<div className="max-h-[320px] overflow-y-auto" style={{ borderTop: "0.5px solid var(--dsw-border-l2)" }}>
+					{gaps.map((gap) => (
+						<div
+							key={keyOf(gap)}
+							role="row"
+							className="grid grid-cols-3 items-center gap-x-2 gap-y-1.5 px-1 py-2 sm:grid-cols-[minmax(0,1fr)_92px_92px_108px]"
+							style={{ borderBottom: "0.5px solid var(--dsw-border-l1)" }}
+						>
+							<div role="cell" className="col-span-3 min-w-0 sm:col-span-1" title={`${gap.provider} / ${gap.id}`}>
+								<div className="truncate" style={{ fontWeight: 500 }}>{gap.name ?? gap.id}</div>
+								<div className="truncate" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
+									{providerLabel(gap.provider)} / {gap.id}
+								</div>
+							</div>
+							<div role="cell" className="min-w-0">{capacityCell(gap, "contextWindow", t.modelAuditColContext)}</div>
+							<div role="cell" className="min-w-0">{capacityCell(gap, "maxTokens", t.modelAuditColOutput)}</div>
+							<div role="cell" className="min-w-0">
+								{/* 输入类型：文本 pi 总是接受（勾上不可点），图片这一勾就是 models.json 的 input 里加 image */}
+								{gap.missing.includes("input") || true ? (
+									<div className="flex items-center gap-3" role="group" aria-label={`${gap.id} ${t.modelAuditColVision}`}>
+										<label className="flex cursor-default items-center gap-1" style={{ color: "var(--dsw-label-tertiary)" }} title={t.visionInputTextHint}>
+											<input type="checkbox" checked disabled readOnly />
+											{t.visionInputText}
+										</label>
+										<label className="flex items-center gap-1" style={{ color: "var(--dsw-label-secondary)" }} title={t.visionInputImageHint}>
+											<input
+												type="checkbox"
+												checked={gap.missing.includes("input") ? rowOf(gap).vision === "image" : gap.vision === true}
+												disabled={busy || !gap.missing.includes("input")}
+												onChange={(event) => edit(gap, { vision: event.target.checked ? "image" : "text" })}
+												aria-label={`${gap.id} ${t.visionInputImage}`}
+											/>
+											{t.visionInputImage}
+										</label>
+									</div>
+								) : null}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<div className="flex flex-wrap items-center gap-2">
+				{visionGaps.length > 0 ? (
+					<>
+						<span style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.modelAuditVisionQuick}</span>
+						<button className="btn-outline" style={{ height: 28, padding: "0 11px", fontSize: 12.5 }} disabled={busy} onClick={() => markVision("image")}>{t.modelAuditVisionOn}</button>
+						<button className="btn-outline" style={{ height: 28, padding: "0 11px", fontSize: 12.5 }} disabled={busy} onClick={() => markVision("text")}>{t.modelAuditVisionOff}</button>
+					</>
+				) : null}
+				<span className="flex-1" />
+				<button className="btn-primary-white" style={{ height: 32 }} disabled={busy || invalid || fills.length === 0} onClick={() => void save()}>
+					{busy ? t.saving : fills.length ? t.modelAuditSave.replace("{n}", String(fills.length)) : t.modelAuditSaveIdle}
+				</button>
+			</div>
+		</section>
+	);
+}
+
 function ModelsSection() {
 	const { t } = useI18n();
 	const [providers, setProviders] = useState<ProviderView[]>([]);
 	const [custom, setCustom] = useState<{ providers: Record<string, any>; [key: string]: unknown }>({ providers: {} });
 	const [customRevision, setCustomRevision] = useState<string | null>(null);
 	const [secretProviderIds, setSecretProviderIds] = useState<Set<string>>(new Set());
+	// 内置 provider → 目录里的模型 ID：编辑时同 ID 的行写 modelOverrides，「获取可用模型」里不再可选
+	const [catalogModelIds, setCatalogModelIds] = useState<Record<string, string[]>>({});
 	const [editing, setEditing] = useState<string | null>(null);
 	const [keyDraft, setKeyDraft] = useState("");
 	const [adding, setAdding] = useState<"builtin" | "custom" | null>(null);
@@ -955,6 +1127,7 @@ function ModelsSection() {
 				throw new Error("invalid model configuration");
 			}
 			setProviders(j.data.providers);
+			setCatalogModelIds(j.data.catalogModelIds ?? {});
 			setSecretProviderIds(new Set(j.data.customProviders?.secretProviderIds ?? []));
 			setCustom({ ...parsed, providers: parsed.providers ?? {} });
 			setCustomRevision(typeof j.data.customProviders?.revision === "string" ? j.data.customProviders.revision : null);
@@ -1137,6 +1310,10 @@ function ModelsSection() {
 		}
 	};
 
+	// 体检：直接从已载入的配置算（不另发请求），每次保存后 load() 重新载入就自动刷新
+	const gaps = useMemo(() => customModelGaps(custom.providers ?? {}), [custom]);
+	const [auditBusy, setAuditBusy] = useState(false);
+
 	const call = async (body: Record<string, unknown>) => {
 		const j = await request(body);
 		notify(j.success, j.success && j.data?.requiresSessionReopen ? t.modelConfigReopen : j.error);
@@ -1181,6 +1358,23 @@ function ModelsSection() {
 		return call({ action: "saveCustomProviders", revision: customRevision, content: JSON.stringify({ ...custom, providers: content }, null, 2) });
 	};
 
+	/** 体检卡片的保存：只补空字段，走与编辑 provider 同一条写入（revision 乐观锁、密钥由服务端从原文件恢复） */
+	const saveAuditFills = async (fills: ModelFieldFill[]): Promise<boolean> => {
+		const { providers: next, filled } = fillModelFields(custom.providers ?? {}, fills);
+		if (!filled) return true;
+		setAuditBusy(true);
+		try {
+			const result = await saveCustom(next);
+			// 失败（典型是 revision 冲突：写入期间 pi 自己动过 models.json）也必须刷新本地副本与 revision。
+			// 否则本地一直拿着旧 revision，之后每次保存都撞同一个 409——用户看到的就是「反复填、永远不成」。
+			// call() 只在成功时 load()，这里把失败那一半补上。
+			if (!result.success) await load();
+			return Boolean(result.success);
+		} finally {
+			setAuditBusy(false);
+		}
+	};
+
 	const providerName = (id: string) => providers.find((p) => p.id === id)?.name ?? id;
 	const credentialSource = (provider: ProviderView) => {
 		const source = provider.authSource;
@@ -1210,10 +1404,28 @@ function ModelsSection() {
 			setCName(typeof override?.name === "string" ? override.name : "");
 			setCModels((override?.models ?? []).map(modelDraftFromConfig));
 		} else {
-			// 内置 provider：从 models.json 覆盖层初始化（若有）
+			// 内置 provider：从 models.json 覆盖层初始化（若有），models[] 定义和 modelOverrides 覆盖都作为行
 			setBBaseUrl(typeof override?.baseUrl === "string" ? override.baseUrl : "");
-			setBModels((override?.models ?? []).map(modelDraftFromConfig));
+			setBModels(modelDraftsFromProviderConfig(override));
+		}
+	};
+
+	const catalogIdsOf = (providerId: string): ReadonlySet<string> => new Set(catalogModelIds[providerId] ?? []);
+
+	/**
+	 * 内置 provider 的条目写回：什么都没覆盖时删掉条目（SDK 不认空条目，会让整份 models.json 存不进去）。
+	 * 前端拿到的配置不含 apiKey，存了密钥的条目不能当成空的删掉。
+	 * 返回 null = models.json 不用动（原本就没有条目、这次也没覆盖任何东西，比如只填了密钥）。
+	 */
+	const withBuiltinEntry = (providerId: string, config: Record<string, unknown>): Record<string, any> | null => {
+		const next = { ...custom.providers };
+		if (isInertProviderConfig(config) && !secretProviderIds.has(providerId)) {
+			if (!Object.prototype.hasOwnProperty.call(next, providerId)) return null;
+			delete next[providerId];
+		} else {
+			next[providerId] = config;
 		}
+		return next;
 	};
 
 	const saveCustomEdit = async () => {
@@ -1247,12 +1459,12 @@ function ModelsSection() {
 		if (invalid) return;
 		setEditBusy(true);
 		try {
-			const next = { ...custom.providers };
-			next[provider.id] = serializeProviderDraft(next[provider.id] ?? {}, {
+			const config = serializeProviderDraft(custom.providers[provider.id] ?? {}, {
 				baseUrl: bBaseUrl,
 				models: bModels,
-			}, provider.apis[0] ?? "openai-completions");
-			const j = await saveCustom(next);
+			}, provider.apis[0] ?? "openai-completions", catalogIdsOf(provider.id));
+			const next = withBuiltinEntry(provider.id, config);
+			const j = next ? await saveCustom(next) : { success: true };
 			if (j.success && keyDraft.trim()) {
 				void call({ action: "setKey", providerId: provider.id, apiKey: keyDraft.trim() });
 				setOauthDone(null);
@@ -1283,8 +1495,9 @@ function ModelsSection() {
 	};
 
 	const saveBuiltinSetup = async ({ providerId, apiKey, config }: BuiltinProviderSetup) => {
-		const next = { ...custom.providers, [providerId]: { ...custom.providers[providerId], ...config } };
-		const result = await saveCustom(next);
+		const next = withBuiltinEntry(providerId, { ...custom.providers[providerId], ...config });
+		// 只填了密钥：models.json 不需要条目，直接去存密钥
+		const result = next ? await saveCustom(next) : { success: true };
 		if (result.success && apiKey) {
 			// 多步认证（Vertex/Bedrock/Cloudflare 等）的后续提示经登录弹窗应答；
 			// 不能 await setKey —— 它会挂起到全部提示答完。
@@ -1467,7 +1680,7 @@ function ModelsSection() {
 													});
 													const result = await response.json();
 													if (!result.success) throw new Error(result.error || t.toastError);
-													return (result.data.models ?? []).map((model: { id: string; name?: string }) => ({ id: model.id, name: model.name ?? "" }));
+													return (result.data.models ?? []).map(modelDraftFromCatalog);
 												}}
 												discoverDisabled={!cBaseUrl.trim()}
 											/>
@@ -1514,6 +1727,7 @@ function ModelsSection() {
 															setModels={setBModels}
 															updateModel={(index, patch) => setBModels((current) => current.map((model, at) => (at === index ? { ...model, ...patch } : model)))}
 															inheritedCount={p.modelCount}
+															catalogIds={catalogIdsOf(p.id)}
 															discover={async (allowPrivate) => {
 																const response = await fetch("/api/models", {
 																	method: "POST",
@@ -1523,7 +1737,7 @@ function ModelsSection() {
 																});
 																const result = await response.json();
 																if (!result.success) throw new Error(result.error || t.toastError);
-																return (result.data.models ?? []).map((model: { id: string; name?: string }) => ({ id: model.id, name: model.name ?? "" }));
+																return (result.data.models ?? []).map(modelDraftFromCatalog);
 															}}
 															discoverDisabled={!(bBaseUrl.trim() || p.baseUrl)}
 														/>
@@ -1566,6 +1780,11 @@ function ModelsSection() {
 				})}
 			</div>
 
+			{/* 模型配置体检：没写的字段 pi 会按缺省处理；由用户填，不替他猜 */}
+			{gaps.length > 0 ? (
+				<ModelFieldAudit gaps={gaps} providerLabel={providerName} busy={auditBusy || customRevision === null} onSave={saveAuditFills} />
+			) : null}
+
 			{/* 两个添加按钮 */}
 			<div className="flex gap-3">
 				<button
@@ -1594,6 +1813,7 @@ function ModelsSection() {
 				<ProviderSetupModal
 					mode={adding}
 					providers={addable}
+					catalogModelIds={catalogModelIds}
 					existingIds={providers.map((provider) => provider.id)}
 					onClose={() => setAdding(null)}
 					onSaveBuiltin={saveBuiltinSetup}
@@ -1720,12 +1940,13 @@ function ModelsSection() {
 
 		</div>
 	);
-}const fieldCls = "w-full rounded-xl px-3 py-2";
+}
+
+const fieldCls = "w-full rounded-xl px-3 py-2";
 
-/** 配额展示：token 数转 M（53,000,000 → 53M），小数值原样 */
+/** 配额展示：token 数转换单位（53,000,000 → 53.00M），与统计条 / 上下文弹窗口径一致 */
 function fmtQuotaTokens(value: number): string {
-	if (value >= 1_000_000) return `${Math.round(value / 100_000) / 10}M`;
-	return value.toLocaleString();
+	return fmtTokens(value);
 }
 
 /** 套餐值来自服务端声明（如 "pro"/"plus"），首字母大写后直接跟在标签后显示。 */
@@ -1994,7 +2215,8 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 
 // ---------- Plugins ----------
 
-function PluginsSection({ cwd }: { cwd: string }) {
+/** 导出仅供测试（其余 section 不导出） */
+export function PluginsSection({ cwd }: { cwd: string }) {
 	const { t, lang } = useI18n();
 	const confirmUninstall = (source: string) => window.confirm(t.confirmUninstallPackage.replace("{source}", source));
 	const [tab, setTab] = useState<"config" | "list">("config");
@@ -2111,13 +2333,19 @@ function PluginsSection({ cwd }: { cwd: string }) {
 		})),
 	].filter((x) => !query || x.name.toLowerCase().includes(query));
 
-	const badge = (
+	/** 扩展卡片的启用状态：每张卡只在头部显示这一处，展开区不重复 */
+	const stateBadge = (disabled: boolean) => (
 		<span
 			className="flex flex-none items-center gap-1.5 rounded-md px-1.5 py-0.5"
-			style={{ fontSize: 10.5, background: "rgba(34,197,94,.12)", color: "var(--dsw-success)" }}
+			style={{
+				fontSize: 10.5,
+				...(disabled
+					? { background: "var(--dsw-selector)", color: "var(--dsw-label-tertiary)" }
+					: { background: "rgba(34,197,94,.12)", color: "var(--dsw-success)" }),
+			}}
 		>
-			<span className="h-1.5 w-1.5 rounded-full" style={{ background: "var(--dsw-success)" }} />
-			{t.enabled}
+			<span className="h-1.5 w-1.5 rounded-full" style={{ background: disabled ? "var(--dsw-label-tertiary)" : "var(--dsw-success)" }} />
+			{disabled ? t.disabled : t.enabled}
 		</span>
 	);
 
@@ -2234,9 +2462,7 @@ function PluginsSection({ cwd }: { cwd: string }) {
 											{e.error && (
 												<span className="rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-danger)", background: "var(--pw-danger-soft, rgba(236,19,19,.12))" }}>{t.extensionLoadError}</span>
 											)}
-											{e.disabled && !e.error && (
-												<span className="rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)", background: "var(--dsw-selector)" }}>{t.disabled}</span>
-											)}
+											{!e.error && stateBadge(e.disabled === true)}
 										</div>
 										<div className="truncate" style={{ fontSize: 12, color: e.error ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }} title={e.error ?? e.path}>
 											{e.error ?? e.path}
@@ -2258,7 +2484,6 @@ function PluginsSection({ cwd }: { cwd: string }) {
 											>
 												{scopeLabel(scope)}
 											</span>
-											{badge}
 										</div>
 										<div className="break-all" style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 											{e.path}
@@ -2341,7 +2566,7 @@ function PluginsSection({ cwd }: { cwd: string }) {
 														<span className="h-3 w-3 flex-none animate-spin rounded-full border border-[var(--dsw-label-tertiary)] border-t-transparent" />
 													) : !isDisabled ? (
 														<span
-																	className="h-2 w-2 flex-none rounded-full"
+															className="h-2 w-2 flex-none rounded-full"
 															style={{ background: "#22c55e", boxShadow: "0 0 5px rgba(34, 197, 94, 0.4)" }}
 														/>
 													) : null}
@@ -2355,8 +2580,8 @@ function PluginsSection({ cwd }: { cwd: string }) {
 													>
 														{isDisabled ? t.disabled : t.enabled}
 													</span>
-														<IconChevronDown14
-															size={13}
+													<IconChevronDown14
+														size={13}
 														style={{
 															color: "var(--dsw-label-tertiary)",
 															transform: isMenuOpen ? "rotate(180deg)" : "none",

package/src/components/TrajectoryView.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from "react";
 import { IconCloseOutline14, IconSearchOutline16 } from "@/components/icons";
 import { useI18n } from "@/i18n";
+import { fmtTokens } from "@/lib/format";
 import type { TrajEntry, TrajTokens } from "@/lib/types";
 import styles from "./TrajectoryAnalyzer.module.css";
 
@@ -26,10 +27,7 @@ const KIND_NAME: Record<TrajEntry["kind"], string> = {
 };
 
 function fmtTok(value?: number): string {
-	if (value == null) return "—";
-	if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-	if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
-	return String(value);
+	return value == null ? "—" : fmtTokens(value);
 }
 
 function fmtTime(ts: number): string {
@@ -45,8 +43,8 @@ function durationOf(entry: TrajEntry): number | undefined {
 
 function fmtDur(ms?: number): string {
 	if (ms == null) return "—";
-	if (ms >= 60_000) return `${(ms / 60_000).toFixed(1)}m`;
-	if (ms >= 1_000) return `${(ms / 1_000).toFixed(ms >= 10_000 ? 0 : 1)}s`;
+	if (ms >= 60_000) return `${(ms / 60_000).toFixed(2)}m`;
+	if (ms >= 1_000) return `${(ms / 1_000).toFixed(2)}s`;
 	return `${Math.round(ms)}ms`;
 }
 

package/src/components/chat/reading-anchor.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useRef, type RefObject } from "react";
+
+const BEFORE_LAYOUT = "piweb:before-chat-layout";
+
+/** Call before changing the columns, while the currently visible text still has its old geometry. */
+export function preserveChatReadingPosition(): void {
+	window.dispatchEvent(new Event(BEFORE_LAYOUT));
+}
+
+interface ReadingAnchor {
+	element?: Element;
+	range?: Range;
+	top: number;
+	bottom: boolean;
+	width: number;
+	capturedAt: number;
+}
+
+export function useChatReadingAnchor(rootRef: RefObject<HTMLElement | null>, scrollRef: RefObject<HTMLElement | null>, shouldPin: () => boolean): void {
+	const anchor = useRef<ReadingAnchor | null>(null);
+	useEffect(() => {
+		const root = rootRef.current;
+		const scroller = scrollRef.current;
+		if (!root || !scroller) return;
+		let frame = 0;
+		const restore = () => {
+			const saved = anchor.current;
+			anchor.current = null;
+			if (!saved || Date.now() - saved.capturedAt > 500 || root.getBoundingClientRect().width === saved.width) return;
+			if (saved.bottom) {
+				scroller.scrollTop = scroller.scrollHeight;
+				return;
+			}
+			const rect = saved.range?.startContainer.isConnected ? saved.range.getBoundingClientRect() : saved.element?.isConnected ? saved.element.getBoundingClientRect() : null;
+			if (rect) scroller.scrollTop += rect.top - scroller.getBoundingClientRect().top - saved.top;
+		};
+		const capture = () => {
+			if (frame) cancelAnimationFrame(frame);
+			// A new drag frame may arrive before the previous restore frame. Finish it first.
+			restore();
+			const geometry = { width: root.getBoundingClientRect().width, capturedAt: Date.now() };
+			if (shouldPin()) {
+				anchor.current = { top: 0, bottom: true, ...geometry };
+				return;
+			}
+			const viewport = scroller.getBoundingClientRect();
+			const element = [...scroller.querySelectorAll("p, pre, li, h1, h2, h3, h4, table, [data-role='user']")].find((node) => {
+				const rect = node.getBoundingClientRect();
+				return rect.bottom > viewport.top + 8 && rect.top < viewport.bottom;
+			});
+			if (!element) return;
+			const rect = element.getBoundingClientRect();
+			const x = Math.max(viewport.left + 8, rect.left + 8);
+			const y = Math.max(viewport.top + 8, rect.top + 4);
+			const range = document.caretRangeFromPoint?.(x, y);
+			if (range && scroller.contains(range.startContainer) && range.startContainer.nodeType === Node.TEXT_NODE && range.startOffset < (range.startContainer.textContent?.length ?? 0)) {
+				range.setEnd(range.startContainer, range.startOffset + 1);
+				anchor.current = { element, range, top: range.getBoundingClientRect().top - viewport.top, bottom: false, ...geometry };
+			} else {
+				anchor.current = { element, top: rect.top - viewport.top, bottom: false, ...geometry };
+			}
+		};
+		const observer = new ResizeObserver(() => {
+			if (!anchor.current) return;
+			if (frame) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				restore();
+			});
+		});
+		observer.observe(root);
+		window.addEventListener(BEFORE_LAYOUT, capture);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener(BEFORE_LAYOUT, capture);
+			if (frame) cancelAnimationFrame(frame);
+		};
+	}, [rootRef, scrollRef, shouldPin]);
+}