@rexvane/piweb 0.3.10 → 0.3.12

package/src/components/AppShell.tsx

@@ -11,6 +11,7 @@ import { ChatWindow, SessionStatsBar } from "@/components/ChatWindow";
 import { ExtensionDialogHost, ExtensionNotices } from "@/components/ExtensionUI";
 import dynamic from "next/dynamic";
 import { SessionSidebar } from "@/components/SessionSidebar";
+import { PromptPanel } from "@/components/PromptPanel";
 
 // 首屏不需要的重组件按需加载（设置面板含供应商配置与代码高亮，轨迹/文件只在打开时才用）
 const SettingsPanel = dynamic(() => import("@/components/SettingsPanel").then((m) => m.SettingsPanel), { ssr: false });
@@ -23,6 +24,7 @@ const ProjectPanel = dynamic(() => import("@/components/ProjectPanel").then((m)
 const FileViewer = dynamic(() => import("@/components/FileViewer").then((m) => m.FileViewer), { ssr: false });
 const GitPanel = dynamic(() => import("@/components/GitPanel").then((m) => m.GitPanel), { ssr: false });
 import {
+	IconAgentPresetOutline16,
 	IconCheckOutline14,
 	IconChevronDown14,
 	IconFolderClose16,
@@ -137,6 +139,8 @@ export function AppShell() {
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [selected, setSelected] = useState<TrajEntry | null>(null);
 	const [gitDetailsOpen, setGitDetailsOpen] = useState(false);
+	/** 提示词来源面板（右侧详情列） */
+	const [promptsOpen, setPromptsOpen] = useState(false);
 	const [heroCwd, setHeroCwd] = useState("");
 	const [heroModel, setHeroModel] = useState<{ provider: string; id: string } | null>(null);
 	const [heroThinking, setHeroThinking] = useState("");
@@ -200,6 +204,7 @@ export function AppShell() {
 	useEffect(() => {
 		setSelected(null);
 		setGitDetailsOpen(false);
+		setPromptsOpen(false);
 	}, [currentPath]);
 
 	// 已知工作区列表（给 Hero 建议）；启动不预选任何工作区，
@@ -345,28 +350,22 @@ export function AppShell() {
 	);
 
 	/**
-	 * 原地编辑用户消息后重新发送：服务端在同一会话文件内回到该消息（navigateTree），
-	 * 再用新文本重新提问——被编辑消息之后的分支作废，模型从这里重新回答。
-	 * 旧的插话（steering）撤回/编辑/发送不变。
+	 * 原地编辑用户消息后重新发送：服务端先停在跑的回合（用户改口即表示不要这一轮），
+	 * 再在同一会话文件内回到该消息之前（navigateTree），用新文本重新提问——
+	 * 被编辑消息之后的分支作废，模型从这里重新回答。旧的插话（steering）撤回/编辑/发送不变。
 	 */
 	const doEditMessage = useCallback(
 		async (entryId: string, text: string) => {
 			if (!currentId) return;
-			if (isStreaming) {
-				setError(t.editWhileRunning);
+			const done = await sendCommand({ cmd: "editAndResend", entryId, text });
+			if (!done?.success) {
+				setError(done?.error ?? t.editMessageFailed);
 				return;
 			}
-			const moved = await sendCommand({ cmd: "navigate", entryId });
-			if (!moved?.success || moved.data?.cancelled) {
-				setError(moved?.error ?? t.editMessageFailed);
-				return;
-			}
-			// 被编辑消息之后的尾部要立刻从视图里消失，再发新提问
+			// 被编辑消息之后的尾部要从视图里消失（服务端已切断该分支）
 			resync();
-			const sent = await sendCommand({ cmd: "prompt", text });
-			if (!sent?.success) setError(sent?.error ?? t.editMessageFailed);
 		},
-		[currentId, isStreaming, resync, sendCommand, setError, t.editMessageFailed, t.editWhileRunning],
+		[currentId, resync, sendCommand, setError, t.editMessageFailed],
 	);
 
 	const doArchiveSession = useCallback(
@@ -605,7 +604,7 @@ export function AppShell() {
 
 	// 三栏网格
 	const gridCols = isNarrow ? "minmax(0,1fr)" : `${sidebarCollapsed ? SIDEBAR_COLLAPSED : sidebarWidth}px ${projectOpen ? `${projectWidth}px` : "0px"} minmax(0,1fr) ${
-		selected || gitDetailsOpen ? `${detailsWidth}px` : "0px"
+		selected || gitDetailsOpen || promptsOpen ? `${detailsWidth}px` : "0px"
 	}`;
 	const projectColumn = projectOpen && (
 		<div
@@ -777,6 +776,22 @@ export function AppShell() {
 									>
 										<IconFolderOpenOutline16 size={15} />
 									</button>
+									{/* 提示词来源：系统提示词 / 记忆 / 技能 / 模板 / 工具提示词集中列出，点开即看 */}
+									<button
+										type="button"
+										className="icon-btn"
+										style={{ width: 30, height: 30, background: promptsOpen ? "var(--dsw-active)" : undefined }}
+										title={t.promptPanel}
+										aria-label={t.promptPanel}
+										data-testid="prompt-panel-toggle"
+										onClick={() => {
+											setPromptsOpen((open) => !open);
+											setSelected(null);
+											setGitDetailsOpen(false);
+										}}
+									>
+										<IconAgentPresetOutline16 size={15} />
+									</button>
 								</div>
 							{projectTrust?.required && !projectTrust.trusted && (
 								<div className="mt-2 flex flex-wrap items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", border: "0.5px solid var(--dsw-border-l2)" }} role="status">
@@ -887,8 +902,8 @@ export function AppShell() {
 				)}
 			</div>
 
-			{/* 轨迹或 Git 详情栏 */}
-			{(selected || gitDetailsOpen) && (
+			{/* 提示词来源 / 轨迹 / Git 详情栏 */}
+			{(selected || gitDetailsOpen || promptsOpen) && (
 				<div
 					className="flex min-h-0 flex-col overflow-hidden"
 					style={isNarrow ? {
@@ -901,7 +916,15 @@ export function AppShell() {
 					} : { background: "var(--dsw-sidebar-fill)", borderLeft: "0.5px solid var(--dsw-border-l2)" }}
 				>
 					<div className="min-h-0 flex-1">
-						{selected ? (
+						{promptsOpen ? (
+							<PromptPanel
+								cwd={panelCwd}
+								sessionId={currentId}
+								refreshKey={currentId}
+								onOpenContent={(path, content) => viewer.openStatic(path, content)}
+								onClose={() => setPromptsOpen(false)}
+							/>
+						) : selected ? (
 							<TrajInspector entry={selected} onClose={() => setSelected(null)} />
 						) : (
 							<GitPanel cwd={panelCwd} refreshKey={panelRefreshKey} onClose={() => setGitDetailsOpen(false)} onAskCommit={() => insertIntoComposer(t.gitAskCommitPrompt)} onOpenFile={openInEditor} />
@@ -918,7 +941,7 @@ export function AppShell() {
 					onPointerDown={onDrag("sidebar")}
 				/>
 			)}
-			{!isNarrow && (selected || gitDetailsOpen) && (
+			{!isNarrow && (selected || gitDetailsOpen || promptsOpen) && (
 				<div
 					className="fixed top-0 h-full w-2 cursor-col-resize"
 					style={{ left: `calc(100vw - ${detailsWidth}px - 4px)`, zIndex: 40 }}

package/src/components/ChatWindow.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/components/icons";
 import { DiffView, type DiffLine, parseUnifiedDiff } from "@/components/DiffView";
 import { languageForPath } from "@/lib/highlight";
+import { copyText } from "@/lib/clipboard";
 import { OutlineRail } from "@/components/OutlineRail";
 import { useI18n } from "@/i18n";
 import type { ToolCardState } from "@/hooks/usePiWeb";
@@ -53,29 +54,6 @@ import {
 type Dict = Record<string, string>;
 type ToolCallContent = Extract<WebContent, { type: "toolCall" }>;
 
-async function copyText(text: string): Promise<boolean> {
-	try {
-		if (navigator.clipboard?.writeText) {
-			await navigator.clipboard.writeText(text);
-			return true;
-		}
-	} catch {
-		// Non-secure local-network contexts need the legacy fallback below.
-	}
-	const field = document.createElement("textarea");
-	field.value = text;
-	field.style.position = "fixed";
-	field.style.opacity = "0";
-	document.body.appendChild(field);
-	field.select();
-	try {
-		return document.execCommand("copy");
-	} catch {
-		return false;
-	} finally {
-		field.remove();
-	}
-}
 
 /** dsh message-chrome formatRunDuration：整秒，分钟档秒数补零 */
 function formatRunDuration(ms: number, t: Dict): string {
@@ -112,17 +90,24 @@ const Markdown = memo(function Markdown({ text }: { text: string }) {
 	);
 });
 
-/** 流式中的最后一段正文：纯文本逐字追加 + 闪烁光标，结束后再切 Markdown（避免每个 delta 重解析整段） */
-function StreamingText({ text }: { text: string }) {
-	return (
-		<div className="md">
-			<p style={{ whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0 }}>
-				{text}
-				<span className="stream-cursor" aria-hidden />
-			</p>
-		</div>
-	);
-}
+
+/**
+ * 流式正文：边流边按 Markdown 渲染（标题/列表/代码块在生成过程中就成形）。
+ *
+ * 不是每个 delta 都重解析整段——那样会随回答变长线性变慢；这里按 ~100ms 节流，
+ * 只在最新文本稳定下来时才交给 Markdown，回合结束时外层会切到精确的最终渲染。
+ */
+const STREAM_MARKDOWN_THROTTLE_MS = 100;
+
+const StreamingMarkdown = memo(function StreamingMarkdown({ text }: { text: string }) {
+	const [shown, setShown] = useState(text);
+	useEffect(() => {
+		if (text === shown) return;
+		const timer = setTimeout(() => setShown(text), STREAM_MARKDOWN_THROTTLE_MS);
+		return () => clearTimeout(timer);
+	}, [text, shown]);
+	return <Markdown text={shown} />;
+});
 
 /** dsh TurnTimePanel 的简化版：耗时胶囊常驻，点击弹层看本回合 token 用量 */
 function TurnMetaPill({ durationMs, usage, t }: { durationMs: number; usage?: TrajTokens & { cost?: { total?: number } }; t: Dict }) {
@@ -642,7 +627,7 @@ const ThinkStep = memo(function ThinkStep({ text, live, startedAt }: { text: str
 const NarrationBlock = memo(function NarrationBlock({ text, live, error }: { text: string; live?: boolean; error?: boolean }) {
 	return (
 		<div className="pw-narr" data-error={error || undefined}>
-			{live ? <StreamingText text={text} /> : <Markdown text={text} />}
+			{live ? <StreamingMarkdown text={text} /> : <Markdown text={text} />}
 		</div>
 	);
 });
@@ -1014,7 +999,7 @@ function isFinalAnswer(m: WebMessage): boolean {
 	return hasText && !hasTool && sr !== "toolUse" && sr !== "pending" && sr !== "error" && sr !== "aborted";
 }
 
-function TurnBlock({
+function TurnBlockView({
 	turn,
 	messages,
 	tools,
@@ -1195,6 +1180,48 @@ export function SessionStatsBar({
 	);
 }
 
+type TurnBlockProps = Parameters<typeof TurnBlockView>[0];
+
+/**
+ * 回合级跳过：流式期间只有正在变的那条消息身份会变（foldPiWebEvent 只替换被改动的消息），
+ * 历史回合用到的数据全部保持身份，于是 200 条消息的会话里历史回合可以整体跳过重渲染。
+ */
+function turnBlockPropsEqual(prev: TurnBlockProps, next: TurnBlockProps): boolean {
+	if (
+		prev.cwd !== next.cwd ||
+		prev.isStreaming !== next.isStreaming ||
+		prev.isLast !== next.isLast ||
+		prev.lastAssistantIndex !== next.lastAssistantIndex ||
+		prev.retryNotice !== next.retryNotice ||
+		prev.streamStartedAt !== next.streamStartedAt ||
+		prev.runningTool !== next.runningTool ||
+		prev.outputTokens !== next.outputTokens ||
+		prev.workingMessage !== next.workingMessage ||
+		prev.contextFiles !== next.contextFiles ||
+		prev.onFork !== next.onFork ||
+		prev.onEditMessage !== next.onEditMessage ||
+		prev.onInspectTool !== next.onInspectTool ||
+		prev.onOpenFile !== next.onOpenFile
+	) return false;
+	// buildTurns 每次重建回合对象：比较内容而不是引用
+	if (prev.turn.key !== next.turn.key || prev.turn.userIndex !== next.turn.userIndex) return false;
+	if (prev.turn.assistantIndexes.length !== next.turn.assistantIndexes.length) return false;
+	if (!prev.turn.assistantIndexes.every((value, index) => value === next.turn.assistantIndexes[index])) return false;
+	const indexes = [prev.turn.userIndex, ...prev.turn.assistantIndexes].filter((index) => index >= 0);
+	if (!indexes.every((index) => prev.messages[index] === next.messages[index])) return false;
+	// 只比较本回合引用到的工具条目：tools 外层容器每次工具事件都会换身份
+	const toolIds: string[] = [];
+	for (const index of indexes) {
+		for (const part of prev.messages[index]?.content ?? []) {
+			const call = part as { type?: string; id?: string };
+			if (call.type === "toolCall" && call.id) toolIds.push(call.id);
+		}
+	}
+	return toolIds.every((id) => prev.tools[id] === next.tools[id]);
+}
+
+const TurnBlock = memo(TurnBlockView, turnBlockPropsEqual);
+
 export function ChatWindow({
 	messages,
 	tools,

package/src/components/PromptPanel.tsx

@@ -0,0 +1,257 @@
+"use client";
+/**
+ * 提示词面板：把"发给模型的提示词从哪来"集中列出来，点某一项查看原文。
+ *
+ * 只读：文件类来源的路径来自 Pi 资源加载器（项目记忆 / 系统提示词覆盖 / 追加提示词 /
+ * 技能 / 提示模板，含扩展与 npm 包提供的那些）；热会话额外给出"组装后的系统提示词"
+ * 与每个工具的定义，它们不是文件、没有路径，直接在本面板内展开查看。
+ */
+import { useCallback, useEffect, useState } from "react";
+import { useI18n } from "@/i18n";
+import { IconCopyOutline16, IconCheckOutline14, IconRefreshOutline14, IconCloseOutline14 } from "@/components/icons";
+import { copyText } from "@/lib/clipboard";
+
+export type PromptSourceKind = "system" | "append" | "agents" | "skill" | "template" | "tool" | "assembled";
+
+export interface PromptSourceOrigin {
+	scope: "project" | "agent" | "package" | "extension";
+	name?: string;
+}
+
+export interface PromptSource {
+	kind: PromptSourceKind;
+	name: string;
+	path?: string;
+	origin: PromptSourceOrigin;
+	bytes?: number;
+}
+
+export interface PromptToolView {
+	name: string;
+	description?: string;
+	parameters?: unknown;
+	promptGuidelines?: string[];
+	source: "builtin" | "extension";
+}
+
+export interface PromptSourcesData {
+	sources: PromptSource[];
+	assembledSystemPrompt?: string;
+	tools?: PromptToolView[];
+	sessionReady: boolean;
+}
+
+const GROUP_KINDS: PromptSourceKind[] = ["system", "append", "agents", "skill", "template", "tool", "assembled"];
+
+function formatBytes(bytes: number | undefined): string {
+	if (!bytes) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function PromptPanel({
+	cwd,
+	sessionId,
+	refreshKey,
+	onOpenContent,
+	onClose,
+}: {
+	cwd: string;
+	sessionId: string | null;
+	/** 变化即重新拉取（例如切换会话） */
+	refreshKey?: string | number | null;
+	/** 打开查看器显示内容（复用应用现有的文件查看器） */
+	onOpenContent?: (path: string, content: string) => void;
+	onClose: () => void;
+}) {
+	const { t } = useI18n();
+	const [data, setData] = useState<PromptSourcesData | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const [opening, setOpening] = useState<string | null>(null);
+	const [inline, setInline] = useState<{ title: string; content: string } | null>(null);
+	const [copied, setCopied] = useState(false);
+
+	const load = useCallback(async () => {
+		setBusy(true);
+		setError(null);
+		try {
+			const query = new URLSearchParams({ cwd });
+			if (sessionId) query.set("session", sessionId);
+			const response = await fetch(`/api/prompts?${query.toString()}`);
+			const body = await response.json();
+			if (!response.ok || !body.success) throw new Error(body.error || `request failed (${response.status})`);
+			setData(body.data as PromptSourcesData);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setBusy(false);
+		}
+	}, [cwd, sessionId]);
+
+	useEffect(() => {
+		void load();
+	}, [load, refreshKey]);
+
+	const originLabel = (origin: PromptSourceOrigin): string => {
+		if (origin.scope === "project") return t.promptOriginProject;
+		if (origin.scope === "agent") return t.promptOriginAgent;
+		if (origin.scope === "package") return `${t.promptOriginPackage} ${origin.name ?? ""}`.trim();
+		return `${t.promptOriginExtension} ${origin.name ?? ""}`.trim();
+	};
+
+	const kindLabel = (kind: PromptSourceKind): string => {
+		switch (kind) {
+			case "system": return t.promptKindSystem;
+			case "append": return t.promptKindAppend;
+			case "agents": return t.promptKindAgents;
+			case "skill": return t.promptKindSkill;
+			case "template": return t.promptKindTemplate;
+			case "tool": return t.promptKindTool;
+			case "assembled": return t.promptKindAssembled;
+		}
+	};
+
+	/** 文件类：按需读内容，交给外部查看器 */
+	const openFile = async (source: PromptSource) => {
+		if (!source.path || !onOpenContent) return;
+		setOpening(source.path);
+		setError(null);
+		try {
+			const response = await fetch("/api/prompts", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ action: "read", filePath: source.path, cwd }),
+			});
+			const body = await response.json();
+			if (!response.ok || !body.success) throw new Error(body.error || "read failed");
+			onOpenContent(source.path, body.data.content as string);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setOpening(null);
+		}
+	};
+
+	const groups = GROUP_KINDS.map((kind) => ({ kind, items: (data?.sources ?? []).filter((source) => source.kind === kind) })).filter(
+		(group) => group.items.length > 0,
+	);
+	const hasTools = (data?.tools?.length ?? 0) > 0;
+
+	return (
+		<div className="flex min-h-0 flex-1 flex-col">
+			<div className="hairline-b flex items-center gap-2 px-4 py-2.5">
+				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13.5, fontWeight: 600 }}>{t.promptPanel}</span>
+				<button type="button" className="icon-btn" style={{ width: 26, height: 26 }} title={t.promptRefresh} aria-label={t.promptRefresh} onClick={() => void load()}>
+					<span className={busy ? "piweb-spin" : undefined} style={{ display: "inline-flex" }}>
+						<IconRefreshOutline14 size={14} />
+					</span>
+				</button>
+				<button type="button" className="icon-btn" style={{ width: 26, height: 26 }} title={t.close} aria-label={t.close} onClick={onClose}>
+					<IconCloseOutline14 size={14} />
+				</button>
+			</div>
+			<div className="min-h-0 flex-1 overflow-auto px-3 py-3" style={{ fontSize: 12.5 }}>
+				{error && (
+					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-danger)" }} role="alert">
+						{error}
+					</div>
+				)}
+				{!data && busy && <div style={{ color: "var(--dsw-label-tertiary)" }}>{t.promptLoading}</div>}
+				{data && !data.sessionReady && (
+					<div className="mb-2 rounded-lg px-2 py-1.5" style={{ background: "var(--dsw-hover)", color: "var(--dsw-label-caption)" }} role="status">
+						{t.promptColdHint}
+					</div>
+				)}
+
+				{groups.map((group) => (
+					<section key={group.kind} className="mb-3">
+						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{kindLabel(group.kind)}</div>
+						<div className="flex flex-col gap-1">
+							{group.items.map((source) => (
+								<button
+									key={`${source.kind}:${source.path ?? source.name}`}
+									type="button"
+									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
+									style={{ background: opening === source.path ? "var(--dsw-active)" : "transparent", border: "0.5px solid var(--dsw-border-l2)" }}
+									title={source.path ?? source.name}
+									onClick={() => void openFile(source)}
+								>
+									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{source.name}</span>
+									<span className="flex-none" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)" }}>{formatBytes(source.bytes)}</span>
+									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
+										{originLabel(source.origin)}
+									</span>
+								</button>
+							))}
+						</div>
+					</section>
+				))}
+
+				{hasTools && (
+					<section className="mb-3">
+						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindTool}</div>
+						<div className="flex flex-col gap-1">
+							{data!.tools!.map((tool) => (
+								<button
+									key={`tool:${tool.name}`}
+									type="button"
+									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
+									style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+									onClick={() => setInline({ title: `${tool.name}`, content: [tool.description ?? "", tool.promptGuidelines?.join("\n") ?? "", tool.parameters ? JSON.stringify(tool.parameters, null, 2) : ""].filter(Boolean).join("\n\n") })}
+								>
+									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{tool.name}</span>
+									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
+										{tool.source === "builtin" ? t.promptToolBuiltin : t.promptToolExtension}
+									</span>
+								</button>
+							))}
+						</div>
+					</section>
+				)}
+
+				{data?.assembledSystemPrompt && (
+					<section className="mb-3">
+						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindAssembled}</div>
+						<button
+							type="button"
+							className="w-full rounded-lg px-2 py-1.5 text-left"
+							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+							onClick={() => setInline({ title: t.promptKindAssembled, content: data.assembledSystemPrompt ?? "" })}
+						>
+							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptAssembledKey}</span>
+						</button>
+					</section>
+				)}
+
+				{inline && (
+					<div className="mt-2">
+						<div className="mb-1 flex items-center gap-2">
+							<span className="min-w-0 flex-1 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{inline.title}</span>
+							<button
+								type="button"
+								className="icon-btn"
+								style={{ width: 24, height: 24 }}
+								title={copied ? t.copySuccess : t.copy}
+								aria-label={t.copy}
+								onClick={() => {
+									void copyText(inline.content).then((ok) => {
+										setCopied(ok);
+										setTimeout(() => setCopied(false), 1200);
+									});
+								}}
+							>
+								{copied ? <IconCheckOutline14 size={13} /> : <IconCopyOutline16 size={13} />}
+							</button>
+							<button type="button" className="icon-btn" style={{ width: 24, height: 24 }} title={t.close} aria-label={t.close} onClick={() => setInline(null)}>
+								<IconCloseOutline14 size={13} />
+							</button>
+						</div>
+						<pre className="pw-output" style={{ maxHeight: 420, overflow: "auto", margin: 0 }}>{inline.content}</pre>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}