@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/MarkdownBlock.tsx

@@ -8,32 +8,25 @@
  * 而 Hero 页（还没开会话）根本用不到它。ChatWindow 用 next/dynamic 引用本模块，
  * 首屏不再下载这 472KB；AppShell 在空闲时预取，真正打开会话时通常已经就绪。
  *
- * 流式输出版（v7）：
- * - 显示样式可配（见 lib/chat/stream-settings）：平滑 / 打字机 / 渐显 / 即时，速度五档、可选打字光标；
- *   设置里改完下一帧生效，正在流的那条回答不用重开。
- * - 逐帧推进：把「已到达的完整文本」和「已显示的文本」分开，每帧只把显示进度往前推一小步，
- *   服务端 token 再来得快、再成串到达，界面也是匀速长出来的，不再一跳一跳。
+ * 流式输出版（v8）：
+ * - 文本到达即整段显示：模型吐字速度由上游与网络决定，本地不再加一层追赶节奏（原先的
+ *   平滑 / 打字机 / 渐显 / 即时四样式与五档速度、打字光标已随设置项一并移除）。
  * - 增量切分 + 分块记忆化：「已稳定的完整块」按 key 记忆化，扫描进度也复用上一帧，
- *   每帧代价只与「新增的那几个字」成正比（旧版每帧重扫全文才是长回答的卡顿来源）。
+ *   每次更新代价只与「新增的那几个字」成正比（旧版每帧重扫全文才是长回答的卡顿来源）。
  * - 代码围栏内的 tail 用纯文本渲染，等闭合后再交给 highlight.js 高亮一次，
  *   避免流式代码块每帧重新高亮。
- * - 贴底听对话区的（见 chat/chat-scroll）；回答结束后先把还没放出来的字放完，再换成整段渲染。
+ * - 贴底听对话区的（见 chat/chat-scroll）；回答结束后换成整段渲染。
  */
-import { memo, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { memo, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
 import { ChatScrollContext } from "@/components/chat/chat-scroll";
+import { PreviewImage } from "@/components/PreviewImage";
+import { useMarkdownActions } from "@/components/chat/markdown-actions";
+import { looksLikeFilePath } from "@/lib/chat/file-path";
 import { IconCheckOutline14, IconCopyOutline16 } from "@/components/icons";
 import { copyText } from "@/lib/clipboard";
-import {
-	getServerStreamSettings,
-	getStreamSettings,
-	nextRevealEnd,
-	streamStepMs,
-	subscribeStreamSettings,
-	type StreamSettings,
-} from "@/lib/chat/stream-settings";
 import { useI18n } from "@/i18n";
 
 type MarkdownTextNode = { value?: unknown; children?: MarkdownTextNode[] };
@@ -90,7 +83,7 @@ function SafeImage({ src, alt, title }: { src?: unknown; alt?: string; title?: s
 	const { t } = useI18n();
 	const source = typeof src === "string" ? src : "";
 	if (!source) return null;
-	if (allowed || isInlineImage(source)) return <img src={source} alt={alt ?? ""} title={title} />;
+	if (allowed || isInlineImage(source)) return <PreviewImage image={source} alt={alt ?? ""} title={title} />;
 	let host = source;
 	try {
 		host = new URL(source).host || source;
@@ -109,13 +102,39 @@ function SafeImage({ src, alt, title }: { src?: unknown; alt?: string; title?: s
  * 流式分块时，多个块共用同一个 .md 容器（外边距规则因此照旧生效），
  * 每块各自记忆化：只要 text 没变就不会重新解析。
  */
+/**
+ * 链接：外部链接加一个 ↗ 标记，让「点了会离开本站」一眼可见。
+ * 站内链接（同源）不加标记，避免到处都是符号。
+ */
+function MarkdownLink({ href, children, ...props }: { href?: string; children?: React.ReactNode } & Record<string, unknown>) {
+	let external = false;
+	if (typeof href === "string" && href) {
+		if (/^https?:\/\//i.test(href)) {
+			external = true;
+			try {
+				external = typeof window === "undefined" || new URL(href).origin !== window.location.origin;
+			} catch {
+				/* 解析不了就当外链 */
+			}
+		}
+	}
+	if (!external) return <a href={href} {...props}>{children}</a>;
+	return (
+		<a href={href} target="_blank" rel="noopener noreferrer" className="md-external" {...props}>
+			{children}
+			<span className="md-external-mark" aria-hidden="true">↗</span>
+		</a>
+	);
+}
+
 const MarkdownContent = memo(function MarkdownContent({ text }: { text: string }) {
+	const actions = useMarkdownActions();
 	return (
 		<ReactMarkdown
 			remarkPlugins={[remarkGfm]}
 			rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
 			components={{
-				a: ({ node: _node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+				a: ({ node: _node, ...props }) => <MarkdownLink {...props} />,
 				img: ({ src, alt, title }) => <SafeImage src={src} alt={alt} title={title} />,
 				pre: ({ node, children, ...props }) => (
 					<div className="md-code-block">
@@ -123,6 +142,22 @@ const MarkdownContent = memo(function MarkdownContent({ text }: { text: string }
 						<pre {...props}>{children}</pre>
 					</div>
 				),
+				// 行内代码里常是文件路径：能认出来且能打开时，变成可点（只变色，不加下划线）
+				code: ({ node: _node, className, children }) => {
+					const raw = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+					const path = raw.trim();
+					// 代码块里的 code 不参与路径识别。只看 className 不够：不写语言的围栏和缩进代码块也没有 className，
+					// 只有一行路径时整个代码块会变成按钮。代码块的文本总以换行结尾，行内代码不会
+					const block = Boolean(className) || raw.endsWith("\n");
+					if (actions.openFile && !block && looksLikeFilePath(path)) {
+						return (
+							<button type="button" className="md-file-path" title={path} onClick={() => actions.openFile!(path)}>
+								{children}
+							</button>
+						);
+					}
+					return <code className={className}>{children}</code>;
+				},
 			}}
 		>
 			{text}
@@ -298,103 +333,43 @@ export function splitStreamingMarkdown(text: string): StreamingSplit {
 	return createStreamingSplitter().update(text);
 }
 
-/** 流式偏好：设置面板一改，这里立刻换样式（正在流的那条回答不用重开） */
-function useStreamSettings(): StreamSettings {
-	return useSyncExternalStore(subscribeStreamSettings, getStreamSettings, getServerStreamSettings);
-}
-
 interface StreamView extends StreamingSplit {
 	/** 当前显示出来的部分（始终是目标文本的前缀） */
 	shown: string;
 }
 
 /**
- * live：回答还在流。结束后（live 变 false）组件不急着换掉——先按原节奏把还没放出来的字放完，
- * 追平后再渲染成整段 Markdown（和历史消息同一种渲染，脚注、引用式链接这类跨块语法也就对了）。
- * 一结束就整段替换的话，打字机这类慢样式积压的一两百字会一口吐出来。
+ * live：回答还在流。结束后（live 变 false）换成整段 Markdown 渲染（和历史消息同一种渲染，
+ * 脚注、引用式链接这类跨块语法也就对了）。
+ *
+ * 文本到达即整段显示，不做逐帧平滑：模型吐字的速度由上游与网络决定，本地再加一层追赶节奏
+ * 只会让显示落后于实际到达的内容。切分器仍然保留——它让「已稳定的完整块」按 key 记忆化，
+ * 每次新增只重解析变化的那一块，而不是整篇重扫。
  */
 export const StreamingMarkdownBlock = memo(function StreamingMarkdownBlock({ text, live = true }: { text: string; live?: boolean }) {
-	const settings = useStreamSettings();
 	const scroll = useContext(ChatScrollContext);
 	const splitterRef = useRef<{ update: (text: string) => StreamingSplit } | null>(null);
 	if (!splitterRef.current) splitterRef.current = createStreamingSplitter();
 	const [view, setView] = useState<StreamView>(() => ({ shown: text, ...splitterRef.current!.update(text) }));
-	const viewRef = useRef(view);
-	const targetRef = useRef(text);
-	const settingsRef = useRef(settings);
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	const commit = (shown: string) => {
-		const next: StreamView = { shown, ...splitterRef.current!.update(shown) };
-		viewRef.current = next;
-		setView(next);
-	};
-
-	const stopTimer = () => {
-		if (timerRef.current !== null) clearTimeout(timerRef.current);
-		timerRef.current = null;
-	};
-
-	/** 一帧：只把显示进度往前推一点。用 setTimeout 而非 rAF：后台标签页 / 测试环境同样确定。 */
-	const step = () => {
-		timerRef.current = null;
-		const target = targetRef.current;
-		const shown = viewRef.current.shown;
-		if (shown === target) return; // 追平，收工（下次文本变化再启动）
-		if (!target.startsWith(shown)) {
-			commit(target); // 目标被整体替换（编辑重发）：直接跟上，不再逐帧
-			return;
-		}
-		const current = settingsRef.current;
-		commit(target.slice(0, nextRevealEnd(target, shown.length, current)));
-		timerRef.current = setTimeout(step, streamStepMs(current.speed));
-	};
 
-	/** 起节拍（已经在跑就不动）；「即时」不排队，直接追平 */
-	const start = () => {
-		if (timerRef.current !== null) return;
-		const current = settingsRef.current;
-		if (current.style === "instant") {
-			if (viewRef.current.shown !== targetRef.current) commit(targetRef.current);
-			return;
-		}
-		timerRef.current = setTimeout(step, streamStepMs(current.speed));
-	};
-
-	// 目标变化：更新目标，节拍没在跑就起一个。已有节拍时不重置计时器（防抖会让正文冻住）
+	// 目标变化：整段跟上，不再排队
 	useEffect(() => {
-		targetRef.current = text;
-		if (text !== viewRef.current.shown) start();
+		const next: StreamView = { shown: text, ...splitterRef.current!.update(text) };
+		setView(next);
 	}, [text]);
 
-	// 偏好变化即时生效：切成「即时」就停表追平，切回别的样式就继续起节拍
-	useEffect(() => {
-		settingsRef.current = settings;
-		if (viewRef.current.shown === targetRef.current) return;
-		if (settings.style === "instant") {
-			stopTimer();
-			commit(targetRef.current);
-			return;
-		}
-		start();
-	}, [settings]);
-
-	useEffect(() => () => stopTimer(), []);
-
 	const settled = !live && view.shown === text;
 
-	// 逐帧推进会让内容往下长：提交后（绘制前）跟着贴底，界面不再跳动。
-	// 贴不贴听对话区的（往上翻过、大纲正在跳转都会松开），这里不另量距离、不另设阈值；
-	// 追平那一帧和换成整段渲染那一帧同样会变高，也要贴。
+	// 内容变高会让正文往下长：提交后（绘制前）跟着贴底，界面不再跳动。
+	// 贴不贴听对话区的（往上翻过、大纲正在跳转都会松开），这里不另量距离、不另设阈值。
 	useLayoutEffect(() => {
 		if (scroll?.shouldPin()) scroll.pin();
 	}, [view, settled, scroll]);
 
 	if (settled) return <MarkdownBlock text={text} />;
 
-	const { shown, blocks, tail, tailInFence } = view;
-	// 尾巴常驻同一个 key 的容器：块升级时尾巴原地更新而不是整棵重挂——
-	// 重挂会让渐显动画在「已经显示过的内容」上重播一遍，正是输出时闪烁几下的来源。
+	const { blocks, tail, tailInFence } = view;
+	// 尾巴常驻同一个 key 的容器：块升级时尾巴原地更新而不是整棵重挂。
 	// 围栏未闭合时用与最终渲染相同的结构（md-code-block > pre > code，含复制按钮，同样不折行），
 	// 闭合升级只有语法着色的差别，没有布局跳变；开头的 ``` 行不进代码。
 	let tailNode: React.ReactNode;
@@ -414,11 +389,7 @@ export const StreamingMarkdownBlock = memo(function StreamingMarkdownBlock({ tex
 	}
 
 	return (
-		<div
-			className={settings.caret ? "md pw-stream pw-stream-caret" : "md pw-stream"}
-			data-stream-style={settings.style}
-			data-stream-pending={shown === text ? undefined : ""}
-		>
+		<div className="md pw-stream">
 			{blocks.map((block, i) => <MarkdownContent key={i} text={block} />)}
 			{tail
 				? <div className="pw-stream-tail" key="tail">{tailNode}</div>

package/src/components/ModelSelector.tsx

@@ -158,13 +158,11 @@ export function ModelSelector({
 						<div className="py-1">
 							<button
 								type="button"
-								className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors"
+								className="isx-menu-item flex w-full items-center gap-2 px-3 py-2 text-left"
 								style={{ color: "var(--dsw-label-secondary)" }}
-								onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-								onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 								onClick={() => setPane("model")}
 							>
-								<IconChevronLeft14 size={14} /> {t.thinking}
+								<IconChevronLeft14 size={14} /> <span className="isx-menu-shift">{t.thinking}</span>
 							</button>
 							{thinkingLevels.length === 0 && (
 								<div className="px-4 py-3" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
@@ -179,21 +177,16 @@ export function ModelSelector({
 										type="button"
 										role="menuitemradio"
 										aria-checked={selected}
-										className="flex w-full items-center justify-between px-4 py-2 text-left transition-colors"
-										onMouseEnter={(e) => {
-											if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
-										}}
-										onMouseLeave={(e) => {
-											if (!selected) e.currentTarget.style.background = "transparent";
-										}}
+										data-active={selected ? "true" : undefined}
+										className="isx-menu-item flex w-full items-center justify-between px-4 py-2 text-left"
 										onClick={() => {
 											onSelectLevel(lv);
 											setOpen(false);
 										}}
 									>
-										<span style={{ fontSize: 14, color: "var(--dsw-label-primary)" }}>{lv}</span>
+										<span className="isx-menu-shift" style={{ fontSize: 14 }}>{lv}</span>
 										{selected && (
-											<span style={{ display: "inline-flex", color: "var(--dsw-label-primary)" }}>
+											<span className="pr-2" style={{ display: "inline-flex" }}>
 												<IconCheckOutline14 size={14} />
 											</span>
 										)}
@@ -205,13 +198,23 @@ export function ModelSelector({
 
 					{pane === "model" && (
 						<div className="flex min-h-0 flex-col">
-							<div ref={listRef} className="max-h-[340px] overflow-y-auto py-1">
+							{/* overflow-y-auto 会把 overflow-x 一并提升成 auto：Iconsax 悬停位移（.isx-menu-shift
+							    translateX(4px)）加上全局 10px 高的横向滚动条，会在列表底部露出一条横杠。
+							   显式锁掉横向，去掉那条横条。 */}
+							<div ref={listRef} className="max-h-[340px] overflow-x-hidden overflow-y-auto py-1">
 								{defaultOption && (
-									<button type="button" role="menuitemradio" aria-checked={defaultOption.selected} data-selected={defaultOption.selected}
-										className="flex min-h-10 w-full items-center justify-between gap-3 rounded-[10px] px-3 py-2 text-left"
-										style={{ fontSize: 13, background: defaultOption.selected ? "var(--dsw-active)" : undefined }}
-										onClick={() => { defaultOption.onSelect(); setOpen(false); }}>
-										{defaultOption.label}{defaultOption.selected && <IconCheckOutline14 size={14} />}
+									<button
+										type="button"
+										role="menuitemradio"
+										aria-checked={defaultOption.selected}
+										data-selected={defaultOption.selected}
+										data-active={defaultOption.selected ? "true" : undefined}
+										className="isx-menu-item flex min-h-10 w-full items-center justify-between gap-3 rounded-[12px] px-3 py-2 text-left"
+										style={{ fontSize: 13 }}
+										onClick={() => { defaultOption.onSelect(); setOpen(false); }}
+									>
+										<span className="isx-menu-shift">{defaultOption.label}</span>
+										{defaultOption.selected && <span className="pr-2" style={{ display: "inline-flex" }}><IconCheckOutline14 size={14} /></span>}
 									</button>
 								)}
 								{groups.length === 0 && (
@@ -223,8 +226,9 @@ export function ModelSelector({
 									<section key={g.provider} role="group" aria-label={g.label}>
 										{/* 提供商名不吸顶：吸顶会在滚动时钉住并被下一组顶出成半截文字（"卡住"观感） */}
 										<div
-											className="px-3 pb-1 pt-2"
+											className="truncate px-3 pb-1 pt-2"
 											style={{ fontSize: 12, fontWeight: 500, color: "var(--dsw-label-caption)" }}
+											title={g.label}
 										>
 											{g.label}
 										</div>
@@ -235,26 +239,21 @@ export function ModelSelector({
 													key={`${m.provider}/${m.id}`}
 													type="button"
 													role="menuitemradio"
-											aria-checked={selected}
-											data-selected={selected}
-											className="flex min-h-10 w-full items-center justify-between gap-3 rounded-[10px] px-3 py-2 text-left transition-colors"
-											style={{ background: selected ? "var(--dsw-active)" : "transparent" }}
-											onMouseEnter={(e) => {
-												if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
-											}}
-											onMouseLeave={(e) => {
-												if (!selected) e.currentTarget.style.background = "transparent";
-											}}
+													aria-checked={selected}
+													data-selected={selected}
+													data-active={selected ? "true" : undefined}
+													className="isx-menu-item flex min-h-10 w-full items-center justify-between gap-3 rounded-[12px] px-3 py-2 text-left"
+													title={m.name || m.id}
 													onClick={() => {
 														onSelectModel(m.provider, m.id);
 														setOpen(false);
 													}}
 												>
-													<span className="min-w-0 flex-1 truncate" style={{ fontSize: 14, fontWeight: 500, color: "var(--dsw-label-primary)" }}>
+													<span className="isx-menu-shift min-w-0 flex-1 truncate" style={{ fontSize: 14, fontWeight: 500 }}>
 														{m.name}
 													</span>
 													{selected && (
-														<span style={{ display: "inline-flex", color: "var(--dsw-label-primary)", flex: "none" }}>
+														<span className="pr-2" style={{ display: "inline-flex", flex: "none" }}>
 															<IconCheckOutline14 size={16} />
 														</span>
 													)}
@@ -269,18 +268,16 @@ export function ModelSelector({
 							{hasModel && !modelOnly && (thinkingLevels.length > 1 ? (
 								<button
 									type="button"
-									className="mt-1 flex w-full items-center justify-between gap-3 border-t px-3 pb-1 pt-2 text-left transition-colors"
-									style={{ borderColor: "var(--dsw-border-l1)" }}
-									onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-									onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+									className="isx-menu-item mt-1 flex w-full items-center justify-between gap-3 border-t px-3 pb-1.5 pt-2 text-left"
+									style={{ borderColor: "var(--dsw-border-l2)" }}
 									onClick={() => setPane("effort")}
 								>
-									<span style={{ fontSize: 13.5, color: "var(--dsw-label-secondary)" }}>{t.thinking}</span>
-									<span className="flex min-w-0 items-center gap-1">
+									<span className="isx-menu-shift" style={{ fontSize: 13.5 }}>{t.thinking}</span>
+									<span className="isx-menu-sub flex min-w-0 items-center gap-1 pr-2">
 										<span className="truncate" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
 											{thinkingLevel ?? t.thinkingOff}
 										</span>
-										<IconChevronRight14 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
+										<IconChevronRight14 size={14} style={{ flex: "none" }} />
 									</span>
 								</button>
 							) : (

package/src/components/PiMark.tsx

@@ -1,10 +1,10 @@
 /**
- * 官方 π mark（取自 pi.dev favicon，currentColor 化）+ dsh BrandWordmark 式品牌簇。
+ * Iconsax 风格 PiMark（微曲圆角矢量 π 徽标）+ 现代品牌簇（PiWeb）
  */
 "use client";
 
 export function PiMark({
-	size = 18,
+	size = 20,
 	className,
 	style,
 }: {
@@ -16,64 +16,99 @@ export function PiMark({
 		<svg
 			width={size}
 			height={size}
-			viewBox="165.29 165.29 469.43 469.43"
+			viewBox="0 0 24 24"
+			fill="none"
 			aria-hidden
 			className={className}
-			style={{ color: "var(--dsw-label-primary)", display: "block", flex: "none", ...style }}
+			style={{ display: "block", flex: "none", ...style }}
 		>
+			<defs>
+				<linearGradient id="isx-pi-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+					<stop offset="0%" stopColor="#02defc" />
+					<stop offset="50%" stopColor="#7ffe00" />
+					<stop offset="100%" stopColor="#fc0197" />
+				</linearGradient>
+			</defs>
+			{/* 现代圆角 π 字符造型：水平顶梁与双流线支腿 */}
 			<path
+				d="M3.75 6.75C3.75 5.92 4.42 5.25 5.25 5.25H18.75C19.58 5.25 20.25 5.92 20.25 6.75C20.25 7.58 19.58 8.25 18.75 8.25H5.25C4.42 8.25 3.75 7.58 3.75 6.75Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M8.25 7.5V15.5C8.25 17.16 6.91 18.5 5.25 18.5C4.42 18.5 3.75 17.83 3.75 17C3.75 16.17 4.42 15.5 5.25 15.5C5.66 15.5 6 15.16 6 14.75V7.5H8.25Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M15 7.5V14.5C15 15.88 16.12 17 17.5 17C18.33 17 19 17.67 19 18.5C19 19.33 18.33 20 17.5 20C14.46 20 12.75 17.54 12.75 14.5V7.5H15Z"
 				fill="currentColor"
-				fillRule="evenodd"
-				d="M165.29 165.29 H517.36 V400 H400 V517.36 H282.65 V634.72 H165.29 Z M282.65 282.65 V400 H400 V282.65 Z"
 			/>
-			<path fill="currentColor" d="M517.36 400 H634.72 V634.72 H517.36 Z" />
 		</svg>
 	);
 }
 
-/** 品牌簇：对齐 dsh 品牌模板 [Logo] [Name] [BADGE] */
+/** 品牌簇：Iconsax 风格 Squircle 徽标 + 渐变品牌字 */
 export function BrandPi({ compact = false }: { compact?: boolean }) {
 	if (compact) {
-		return <PiMark size={18} />;
+		return (
+			<div
+				className="flex items-center justify-center rounded-[10px] border border-white/10 transition-transform duration-200 hover:scale-105"
+				style={{
+					width: 32,
+					height: 32,
+					background: "var(--dsw-bg-elevated)",
+					boxShadow: "0 2px 8px rgba(0,0,0,0.18)",
+				}}
+			>
+				<PiMark size={18} style={{ color: "var(--dsw-label-primary)" }} />
+			</div>
+		);
 	}
 	return (
 		<div
-			className="inline-flex items-center select-none"
-			style={{
-				color: "var(--dsw-label-primary)",
-				gap: 6,
-			}}
+			className="group inline-flex cursor-pointer select-none items-center gap-2.5 transition-transform duration-200"
+			style={{ color: "var(--dsw-label-primary)" }}
 		>
-			<PiMark size={17} />
-			<span
-				className="inline-flex items-center"
-				style={{
-					fontSize: 16.5,
-					fontWeight: 600,
-					letterSpacing: "-0.02em",
-					color: "var(--dsw-label-primary)",
-					lineHeight: 1,
-				}}
-			>
-				pi
-			</span>
-			<span
-				className="inline-flex items-center justify-center font-bold"
+			{/* Iconsax 风格圆角微光徽标盒 */}
+			<div
+				className="relative flex items-center justify-center rounded-[9px] border transition-all duration-300 group-hover:scale-105"
 				style={{
-					fontSize: 9.5,
-					letterSpacing: "0.06em",
-					height: 15,
-					paddingLeft: 4.5,
-					paddingRight: 4.5,
-					borderRadius: 4,
-					background: "var(--dsw-label-primary)",
-					color: "var(--dsw-bg-base)",
-					lineHeight: 1,
-					textTransform: "uppercase",
+					width: 28,
+					height: 28,
+					background: "var(--dsw-bg-elevated)",
+					borderColor: "var(--dsw-border-l3)",
+					boxShadow: "0 2px 10px rgba(0,0,0,0.12)",
 				}}
 			>
-				HARNESS
-			</span>
+				<PiMark size={16} style={{ color: "var(--dsw-label-primary)" }} />
+			</div>
+
+			{/* 品牌名称：Pi (高反差主色) + Web (Iconsax 彩虹渐变字) */}
+			<div className="flex items-baseline gap-0.5">
+				<span
+					style={{
+						fontSize: 16.5,
+						fontWeight: 700,
+						letterSpacing: "-0.03em",
+						color: "var(--dsw-label-primary)",
+						lineHeight: 1,
+					}}
+				>
+					Pi
+				</span>
+				<span
+					style={{
+						fontSize: 16.5,
+						fontWeight: 600,
+						letterSpacing: "-0.02em",
+						background: "var(--isx-line-gradient)",
+						WebkitBackgroundClip: "text",
+						WebkitTextFillColor: "transparent",
+						lineHeight: 1,
+					}}
+				>
+					Web
+				</span>
+			</div>
 		</div>
 	);
 }

package/src/components/PreviewImage.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState, type CSSProperties } from "react";
+import { createPortal } from "react-dom";
+import { ImageViewer, imageSource, type PreviewImageSource } from "@/components/ImageViewer";
+import { useI18n } from "@/i18n";
+
+/** 聊天/正文里的图片点开只读图集：不改动、不删除已经落盘的消息内容 */
+export function PreviewImage({ image, images = [image], index = 0, alt = "", title, className, style }: {
+	image: PreviewImageSource;
+	images?: PreviewImageSource[];
+	index?: number;
+	alt?: string;
+	title?: string;
+	className?: string;
+	style?: CSSProperties;
+}) {
+	const { t } = useI18n();
+	const [preview, setPreview] = useState<number | null>(null);
+	return <>
+		<button type="button" className="pw-chat-image-preview" title={title ?? t.imagePreview} aria-label={alt ? `${t.imagePreview}: ${alt}` : t.imagePreview} onClick={(event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			setPreview(index);
+		}}>
+			<img src={imageSource(image)} alt={alt} title={title} className={className} style={style} draggable={false} />
+		</button>
+		{preview !== null && images[preview] && createPortal(
+			<ImageViewer images={images} index={preview} onIndex={setPreview} onClose={() => setPreview(null)} />,
+			document.body,
+		)}
+	</>;
+}

package/src/components/ProjectPanel.tsx

@@ -71,7 +71,9 @@ export function GrowthConsentDialog({ request, onAnswer }: { request: GrowthCons
 export function roundTitle(round: GrowthEntry, t: Record<string, string>): string {
 	if (round.kind !== "round") return t.growthKindUser;
 	const label = t.growthRoundLabel.replace("{n}", String(round.n ?? ""));
-	return round.title ? `${label} · ${round.title}` : label;
+	// 修好之前记下的轮次，标题是技能展开的首行 `<skill name="x" location="…">`：显示成 /skill:x
+	const title = round.title?.replace(/^<skill\s[^>]*?\bname="([^"]+)"[^>]*>$/, "/skill:$1");
+	return title ? `${label} · ${title}` : label;
 }
 
 /** 柱的颜色：你的修改为灰；pi 的一轮按主要改动类型（删除为主红、新增为主绿、否则黄） */
@@ -413,6 +415,7 @@ export function ProjectPanel({
 										data-active={selected?.commit === round.commit || undefined}
 										style={{ height: h, background: roundColor(round) }}
 										title={`${roundTitle(round, tt)} · ${fmtTime(round.ts)} · ${t.growthRoundFiles.replace("{n}", String(round.stats.added + round.stats.modified + round.stats.deleted + round.stats.renamed))} +${round.stats.add} −${round.stats.del}`}
+										aria-label={`${roundTitle(round, tt)} · ${t.growthRoundFiles.replace("{n}", String(round.stats.added + round.stats.modified + round.stats.deleted + round.stats.renamed))} +${round.stats.add} −${round.stats.del}`}
 										onClick={() => growth.select(round.commit)}
 									/>
 								);
@@ -421,15 +424,16 @@ export function ProjectPanel({
 						</div>
 					)}
 					<div className="flex items-center gap-1 px-2 pb-2 pt-1" style={{ fontSize: 11.5 }}>
-						<button className="icon-btn" style={{ width: 20, height: 20 }} title={t.growthPrev} onClick={growth.prev} disabled={selectedIdx <= 0}>
+						<button className="icon-btn" style={{ width: 20, height: 20 }} title={t.growthPrev} aria-label={t.growthPrev} onClick={growth.prev} disabled={selectedIdx <= 0}>
 							<IconChevronLeft14 size={12} />
 						</button>
-						<button className="icon-btn" style={{ width: 20, height: 20 }} title={t.growthNext} onClick={growth.next} disabled={selectedIdx < 0 || selectedIdx >= rounds.length - 1}>
+						<button className="icon-btn" style={{ width: 20, height: 20 }} title={t.growthNext} aria-label={t.growthNext} onClick={growth.next} disabled={selectedIdx < 0 || selectedIdx >= rounds.length - 1}>
 							<IconChevronRight14 size={12} />
 						</button>
 						{/* 计数可点开轮数列表:单击直接弹列表(不做双击变输入框,避免 250ms 单双击
 						    判定拖慢弹出);「输入轮号」是列表里一个固定入口,选中后当场变数字输入框 */}
-						<div className="relative min-w-0 flex-1">
+						{/* ref 包住按钮和列表：按在计数按钮上不算「点在外面」，否则 mousedown 先关、click 又打开，再点一下关不掉 */}
+						<div className="relative min-w-0 flex-1" ref={roundPickerRef}>
 							<button
 								type="button"
 								className="w-full truncate rounded px-1 text-left"
@@ -448,7 +452,6 @@ export function ProjectPanel({
 							</button>
 							{roundPickerOpen && (
 								<div
-									ref={roundPickerRef}
 									className="popover absolute bottom-7 left-0 z-50 flex w-[268px] max-w-[calc(100vw-24px)] flex-col"
 									role="listbox"
 									aria-label={t.growthPickRound}