@rexvane/piweb 0.3.25 → 0.3.26

package/src/components/GrowthTree.tsx

@@ -276,7 +276,9 @@ const TreeRow = memo(function TreeRow({
 				{node.status === "R" && node.from && <span className="pw-tree-from">← {node.from.split("/").pop()}</span>}
 			</span>
 			{node.pending && <span className="pw-tree-pulse" aria-label={pendingLabel} />}
-			{!node.lazy && (onReference || (!isDir && onOpenEditor) || isDir) && (
+			{/* 只有「磁盘上才有、快照里没有」的节点不给按钮。不能按 lazy 判断：快照里的目录只要磁盘上也有，
+			    graftLazy 就会给它标 lazy（为了能展开读磁盘），根目录又总会被列出，顶层目录的按钮就全没了 */}
+			{!diskOnly && (onReference || (!isDir && onOpenEditor) || isDir) && (
 				<span className="pw-tree-actions">
 					{isDir && (
 						<button

package/src/components/ImageViewer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useI18n } from "@/i18n";
+import type { ImageAttachment } from "@/lib/types";
+
+export type PreviewImageSource = ImageAttachment | string;
+export const imageSource = (image: PreviewImageSource) => typeof image === "string" ? image : `data:${image.mimeType};base64,${image.data}`;
+
+/** 只读图集；删除只提供给尚未发送的输入附件（发出去的消息图片不可删） */
+export function ImageViewer({ images, index, disabled, onIndex, onRemove, onClose }: {
+	images: PreviewImageSource[];
+	index: number;
+	disabled?: boolean;
+	onIndex: (index: number) => void;
+	onRemove?: (index: number) => void;
+	onClose: () => void;
+}) {
+	const { t } = useI18n();
+	const dialogRef = useRef<HTMLDivElement>(null);
+	const closeRef = useRef<HTMLButtonElement>(null);
+	const count = images.length;
+	const go = (delta: number) => onIndex((index + delta + count) % count);
+
+	// 打开时把焦点移进来、锁住页面滚动，关掉时把焦点还给原来那个元素（还在页面上的话）
+	useEffect(() => {
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const overflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		closeRef.current?.focus();
+		return () => {
+			document.body.style.overflow = overflow;
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+
+	// 捕获阶段处理：Esc / 方向键不再传给页面上其它监听 document 的面板；Tab 只在预览里转
+	useEffect(() => {
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+			else if (event.key === "ArrowLeft" && count > 1) go(-1);
+			else if (event.key === "ArrowRight" && count > 1) go(1);
+			else if (event.key === "Tab") {
+				const focusable = [...(dialogRef.current?.querySelectorAll<HTMLElement>("button:not(:disabled)") ?? [])];
+				if (!focusable.length) return;
+				const at = focusable.indexOf(document.activeElement as HTMLElement);
+				const next = event.shiftKey ? (at <= 0 ? focusable.length - 1 : at - 1) : at === focusable.length - 1 ? 0 : at + 1;
+				focusable[next].focus();
+			} else return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		document.addEventListener("keydown", onKey, true);
+		return () => document.removeEventListener("keydown", onKey, true);
+	}, [count, index, onClose, onIndex]);
+
+	if (!images[index]) return null;
+	return (
+		<div ref={dialogRef} className="pw-lightbox" role="dialog" aria-modal="true" aria-label={t.imageViewer} onClick={onClose}>
+			<div className="pw-lightbox-bar" onClick={(event) => event.stopPropagation()}>
+				<span className="pw-lightbox-count">{count > 1 ? `${index + 1} / ${count}` : ""}</span>
+				{onRemove && <button type="button" className="pw-lightbox-btn" disabled={disabled} onClick={() => onRemove(index)}>{t.delete}</button>}
+				<button ref={closeRef} type="button" className="pw-lightbox-btn" aria-label={t.close} onClick={onClose}>✕</button>
+			</div>
+			<img src={imageSource(images[index])} alt={t.imageViewer} className="pw-lightbox-image" onClick={(event) => event.stopPropagation()} />
+			{count > 1 && <>
+				<button type="button" className="pw-lightbox-nav" data-side="prev" aria-label={t.imagePrev} onClick={(event) => { event.stopPropagation(); go(-1); }}>‹</button>
+				<button type="button" className="pw-lightbox-nav" data-side="next" aria-label={t.imageNext} onClick={(event) => { event.stopPropagation(); go(1); }}>›</button>
+			</>}
+		</div>
+	);
+}

package/src/components/MarkdownBlock.tsx

@@ -22,6 +22,7 @@ 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";
@@ -82,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;
@@ -145,8 +146,10 @@ const MarkdownContent = memo(function MarkdownContent({ text }: { text: string }
 				code: ({ node: _node, className, children }) => {
 					const raw = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
 					const path = raw.trim();
-					// 带 className 的是代码块里的 code（交给 highlight.js），不参与路径识别
-					if (actions.openFile && !className && looksLikeFilePath(path)) {
+					// 代码块里的 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}

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 的一轮按主要改动类型（删除为主红、新增为主绿、否则黄） */
@@ -430,7 +432,8 @@ export function ProjectPanel({
 						</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"
@@ -449,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}