@rexvane/piweb 0.3.1

package/src/components/ContextMeter.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+/**
+ * 上下文占用（对齐 dsh ContextMeter）：
+ * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与分段占用条
+ * （系统提示词 / 对话消息 / 工具，mac 磁盘存储条式的多色分段）。
+ * 无对话时不渲染（由父组件经 contextVisible 控制）。
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "@/i18n";
+
+function fmtTok(n: number): string {
+	return n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(Math.round(n));
+}
+
+export function ContextMeter({
+	percent,
+	tokens,
+	contextWindow,
+	source,
+}: {
+	percent: number | null;
+	tokens: number | null;
+	contextWindow: number | null;
+	/** 分段数据源：字符统计只在弹窗打开时执行（流式期间消息每 token 都变，不能常驻扫描） */
+	source?: { systemChars: number; messages: { content: Array<{ type: string; text?: string; thinking?: string }> }[] };
+}) {
+	const [open, setOpen] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+	const { t } = useI18n();
+
+	useEffect(() => {
+		if (!open) return;
+		const h = (e: MouseEvent) => {
+			if (!ref.current?.contains(e.target as Node)) setOpen(false);
+		};
+		document.addEventListener("mousedown", h);
+		return () => document.removeEventListener("mousedown", h);
+	}, [open]);
+
+	// 分段估算只在弹窗打开时计算（≈3.5 字符/token）
+	const segments = useMemo(() => {
+		if (!open) return { system: 0, messages: 0 };
+		let chars = 0;
+		for (const message of source?.messages ?? []) {
+			for (const content of message.content) {
+				chars += content.type === "text" ? (content.text?.length ?? 0) : content.type === "thinking" ? (content.thinking?.length ?? 0) : 0;
+			}
+		}
+		return { system: Math.round((source?.systemChars ?? 0) / 3.5), messages: Math.round(chars / 3.5) };
+	}, [open, source]);
+
+	const p = percent ?? 0;
+	const usageLabel = percent === null ? t.contextUnknown : `${Math.round(p)}% ${t.contextUsed}`;
+	const r = 5.5;
+	const c = 2 * Math.PI * r;
+	const shown = Math.max(0, Math.min(100, p));
+	const used = tokens ?? 0;
+	const window_ = contextWindow ?? 0;
+
+	// 分段估算：系统提示词 / 对话消息；工具与基底取余量，保证各段之和等于总量
+	const systemTokens = Math.max(0, Math.round(segments?.system ?? 0));
+	const messageTokens = Math.max(0, Math.round(segments?.messages ?? 0));
+	const toolTokens = Math.max(0, used - systemTokens - messageTokens);
+	const segTotal = systemTokens + messageTokens + toolTokens || 1;
+	const bar = (n: number) => `${(n / segTotal) * 100}%`;
+
+	return (
+		<div ref={ref} className="relative">
+			<button
+				className="icon-btn"
+				style={{ width: 28, height: 28 }}
+				title={usageLabel}
+				onClick={() => setOpen((o) => !o)}
+			>
+				<svg width="14" height="14" viewBox="0 0 14 14">
+					<circle cx="7" cy="7" r={r} fill="none" stroke="var(--dsw-border-l3)" strokeWidth="2" />
+					<circle
+						cx="7" cy="7" r={r}
+						fill="none"
+						stroke={p != null && p > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"}
+						strokeWidth="2"
+						strokeDasharray={`${(c * shown) / 100} ${c}`}
+						transform="rotate(-90 7 7)"
+						strokeLinecap="round"
+					/>
+				</svg>
+			</button>
+			{open && (
+				<div
+					className="popover absolute bottom-9 right-0 z-50 w-64 p-4"
+					style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}
+				>
+					<div className="font-medium" style={{ color: "var(--dsw-label-primary)" }}>
+						{usageLabel}
+					</div>
+					<div style={{ color: "var(--dsw-label-tertiary)" }} className="mt-1">
+						{tokens === null ? "—" : `~${fmtTok(used)}`} / {window_ > 0 ? fmtTok(window_) : "—"}
+					</div>
+
+					{/* 分段占用条（mac 磁盘存储条式多色分段） */}
+					{(systemTokens > 0 || messageTokens > 0 || toolTokens > 0) && (
+						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} aria-hidden>
+							{systemTokens > 0 && <span style={{ width: bar(systemTokens), background: "var(--dsw-accent)" }} />}
+							{messageTokens > 0 && <span style={{ width: bar(messageTokens), background: "var(--dsw-success)" }} />}
+							{toolTokens > 0 && <span style={{ width: bar(toolTokens), background: "var(--dsw-warn)" }} />}
+						</div>
+					)}
+					<div className="mt-2 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
+						<SegmentRow label={t.contextSystem} tokens={systemTokens} color="var(--dsw-accent)" />
+						<SegmentRow label={t.contextMessages} tokens={messageTokens} color="var(--dsw-success)" />
+						<SegmentRow label={t.contextTools} tokens={toolTokens} color="var(--dsw-warn)" />
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function SegmentRow({ label, tokens, color }: { label: string; tokens: number; color: string }) {
+	if (tokens <= 0) return null;
+	return (
+		<div className="flex items-center justify-between gap-2">
+			<span className="flex items-center gap-1.5">
+				<span className="inline-block rounded-full" style={{ width: 7, height: 7, background: color }} />
+				{label}
+			</span>
+			<span>~{fmtTok(tokens)}</span>
+		</div>
+	);
+}

package/src/components/DiffView.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+/**
+ * 统一 diff 视图：对话里 edit/write 的 patch、Git 面板的文件差异与提交内容共用。
+ * 解析 unified diff（含多文件 git diff / git show 输出），按行号渲染红绿；
+ * 每行按文件语言做语法高亮（highlight.js），多文件 diff 跟着 +++ 头切换语言。
+ */
+import { useMemo } from "react";
+import { highlightLine, languageForPath } from "@/lib/highlight";
+
+export interface DiffLine {
+	kind: "add" | "del" | "ctx" | "hunk" | "file";
+	old?: number;
+	new?: number;
+	text: string;
+}
+
+export function parseUnifiedDiff(text: string): DiffLine[] | null {
+	const out: DiffLine[] = [];
+	const rows = text.replace(/\r\n/g, "\n").split("\n");
+	let oldLine = 0;
+	let newLine = 0;
+	let oldLeft = 0;
+	let newLeft = 0;
+	let inHunk = false;
+	let pendingFile: string | undefined;
+	const headerPath = (row: string) => {
+		const value = row.slice(4).split("\t")[0];
+		if (!value.startsWith('"')) return value;
+		try { return JSON.parse(value) as string; } catch { return value.slice(1, -1); }
+	};
+	for (let index = 0; index < rows.length; index += 1) {
+		const raw = rows[index];
+		const hunk = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(?:.*)$/.exec(raw);
+		if (hunk) {
+			oldLine = Number(hunk[1]);
+			newLine = Number(hunk[3]);
+			oldLeft = hunk[2] === undefined ? 1 : Number(hunk[2]);
+			newLeft = hunk[4] === undefined ? 1 : Number(hunk[4]);
+			inHunk = oldLeft > 0 || newLeft > 0;
+			if (pendingFile !== undefined) {
+				out.push({ kind: "file", text: pendingFile });
+				pendingFile = undefined;
+			} else if (out.length && out[out.length - 1].kind !== "file") out.push({ kind: "hunk", text: "…" });
+			continue;
+		}
+		// Inside a hunk, ---/+++ are ordinary removed/added SQL or Lua comments.
+		// Only the declared old/new counts can end a well-formed hunk.
+		if (inHunk) {
+			if (raw.startsWith("\\")) continue; // no-newline marker consumes neither side
+			if (raw.startsWith("-") && oldLeft > 0) {
+				out.push({ kind: "del", old: oldLine++, text: raw.slice(1) });
+				oldLeft -= 1;
+			} else if (raw.startsWith("+") && newLeft > 0) {
+				out.push({ kind: "add", new: newLine++, text: raw.slice(1) });
+				newLeft -= 1;
+			} else if (raw.startsWith(" ") && oldLeft > 0 && newLeft > 0) {
+				out.push({ kind: "ctx", old: oldLine++, new: newLine++, text: raw.slice(1) });
+				oldLeft -= 1;
+				newLeft -= 1;
+			} else {
+				// Truncated/malformed input must not turn metadata into context lines.
+				inHunk = false;
+			}
+			if (oldLeft === 0 && newLeft === 0) inHunk = false;
+			if (raw[0] === "+" || raw[0] === "-" || raw[0] === " ") continue;
+		}
+		if (raw.startsWith("diff --git ")) pendingFile = undefined;
+		// A file header is a pair, outside a hunk. Deleted files use the old path.
+		if (raw.startsWith("--- ") && rows[index + 1]?.startsWith("+++ ")) {
+			const oldPath = headerPath(raw);
+			const newPath = headerPath(rows[++index]);
+			pendingFile = newPath === "/dev/null" ? oldPath.replace(/^a\//, "") : newPath.replace(/^b\//, "");
+		}
+	}
+	return out.some((line) => line.kind === "add" || line.kind === "del" || line.kind === "ctx") ? out : null;
+}
+
+export function diffStats(lines: DiffLine[]): { add: number; del: number } {
+	let add = 0;
+	let del = 0;
+	for (const l of lines) {
+		if (l.kind === "add") add += 1;
+		else if (l.kind === "del") del += 1;
+	}
+	return { add, del };
+}
+
+export function DiffView({ lines, language }: { lines: DiffLine[]; language?: string }) {
+	let maxNo = 1;
+	for (const l of lines) {
+		const n = l.new ?? l.old ?? 0;
+		if (n > maxNo) maxNo = n;
+	}
+	const width = String(maxNo).length;
+	// 逐行高亮：语言来自 prop（单文件）或 diff 里的 +++ 文件头（多文件 git show）
+	const html = useMemo(() => {
+		let lang = language;
+		return lines.map((l) => {
+			if (l.kind === "file") {
+				lang = languageForPath(l.text) ?? language;
+				return null;
+			}
+			if (l.kind === "hunk" || !lang || !l.text.trim()) return null;
+			return highlightLine(l.text, lang);
+		});
+	}, [lines, language]);
+	return (
+		<pre className="hljs whitespace-pre-wrap" style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: "18px", margin: 0, background: "transparent" }}>
+			{lines.map((l, i) => {
+				if (l.kind === "file") {
+					return (
+						<div
+							key={i}
+							className="truncate"
+							style={{ margin: i === 0 ? "0 -8px 2px" : "8px -8px 2px", padding: "2px 8px", fontSize: 11.5, fontWeight: 600, color: "var(--dsw-label-secondary)", borderBottom: "0.5px solid var(--dsw-border-l2)" }}
+							title={l.text}
+						>
+							{l.text}
+						</div>
+					);
+				}
+				const num = l.kind === "hunk" ? "" : String(l.kind === "del" ? l.old : l.new).padStart(width);
+				const signColor = l.kind === "add" ? "var(--dsw-success)" : l.kind === "del" ? "var(--dsw-danger)" : "var(--dsw-label-caption)";
+				// 新增绿、删除红：底色 + 左侧 2px 色条；正文按语言着色（未高亮时用次级文字色）
+				const bg = l.kind === "add" ? "rgba(34,197,94,.14)" : l.kind === "del" ? "rgba(236,19,19,.12)" : "transparent";
+				const bar = l.kind === "add" ? "inset 2px 0 0 var(--dsw-success)" : l.kind === "del" ? "inset 2px 0 0 var(--dsw-danger)" : undefined;
+				const sign = l.kind === "add" ? "+" : l.kind === "del" ? "-" : " ";
+				const h = html[i];
+				return (
+					<div key={i} style={{ background: bg, boxShadow: bar, color: l.kind === "hunk" ? "var(--dsw-label-caption)" : "var(--dsw-label-secondary)", padding: "0 8px", margin: "0 -8px" }}>
+						<span style={{ color: signColor, userSelect: "none" }}>{num} {sign} </span>
+						{h ? <span dangerouslySetInnerHTML={{ __html: h }} /> : l.text}
+					</div>
+				);
+			})}
+		</pre>
+	);
+}

package/src/components/ExtensionUI.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+/**
+ * 扩展界面桥的浏览器端：对话框（select / confirm / input）、通知条、页脚状态。
+ * 对应 pi RPC 模式的 extension_ui_request；没有页面应答时服务端按超时/取消处理。
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconShieldOutline16 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+import type { ExtensionDialog } from "@/hooks/usePiWeb";
+
+/** message 若全是 "key : value" 行（权限对话框的常见形态），解析成键值表渲染 */
+function parseKeyValueRows(message: string): { key: string; value: string }[] | null {
+	const lines = message.split("\n").map((l) => l.trim()).filter(Boolean);
+	if (!lines.length) return null;
+	const rows: { key: string; value: string }[] = [];
+	for (const line of lines) {
+		const m = /^([^:\s]{1,20})\s*:\s(.+)$/.exec(line);
+		if (!m) return null;
+		rows.push({ key: m[1], value: m[2] });
+	}
+	return rows;
+}
+
+export function ExtensionDialogHost({
+	dialog,
+	onAnswer,
+}: {
+	dialog: ExtensionDialog | null;
+	onAnswer: (id: string, response: { value?: string; confirmed?: boolean; cancelled?: boolean }) => void;
+}) {
+	const { t } = useI18n();
+	const [text, setText] = useState("");
+	const [idx, setIdx] = useState(0);
+	const dialogRef = useRef<HTMLDivElement>(null);
+	const isPermission = /permission|approve|allow/i.test(dialog?.title ?? "");
+	const kvRows = useMemo(() => (dialog?.message ? parseKeyValueRows(dialog.message) : null), [dialog?.message, dialog?.id]);
+	useEffect(() => {
+		setText("");
+		setIdx(0);
+	}, [dialog?.id]);
+	useEffect(() => {
+		if (!dialog) return;
+		const previous = document.activeElement;
+		if (dialog.method !== "input") dialogRef.current?.focus();
+		return () => {
+			if (previous instanceof HTMLElement && previous.isConnected) previous.focus();
+		};
+	}, [dialog?.id, dialog?.method]);
+	if (!dialog) return null;
+	return (
+		<div
+			ref={dialogRef}
+			tabIndex={-1}
+			className="fixed inset-0 z-[120] flex items-center justify-center"
+			style={{ background: "var(--dsw-mask)" }}
+			role="dialog"
+			aria-modal="true"
+			aria-label={dialog.title}
+			onKeyDown={(event) => {
+				event.stopPropagation();
+				if (event.key === "Escape") {
+					event.preventDefault();
+					onAnswer(dialog.id, { cancelled: true });
+				} else if (dialog.method === "select" && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+					event.preventDefault();
+					setIdx((current) => Math.max(0, Math.min(current + (event.key === "ArrowDown" ? 1 : -1), (dialog.options?.length ?? 1) - 1)));
+				} else if (dialog.method === "select" && event.key === "Enter" && event.target === event.currentTarget) {
+					event.preventDefault();
+					onAnswer(dialog.id, { value: dialog.options?.[idx] });
+				}
+			}}
+		>
+			<div className="popover flex w-[min(92vw,480px)] flex-col gap-3 p-5" style={{ background: "var(--dsw-glass-modal)" }}>
+				<div className="flex items-start gap-2.5">
+					{isPermission && (
+						<span className="flex-none flex items-center justify-center rounded-lg" style={{ width: 30, height: 30, background: "color-mix(in srgb, var(--dsw-warn) 15%, transparent)" }}>
+							<IconShieldOutline16 size={16} style={{ color: "var(--dsw-warn)" }} />
+						</span>
+					)}
+					<div className="min-w-0 flex-1">
+						<div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.4 }}>{dialog.title}</div>
+						<div className="mt-0.5" style={{ fontSize: 10.5, color: "var(--dsw-label-caption)" }}>{t.extensionDialogTag}</div>
+					</div>
+				</div>
+				{kvRows ? (
+					<div className="flex flex-col gap-1.5 rounded-xl px-3 py-2.5" style={{ background: "var(--dsw-hover)" }}>
+						{kvRows.map(({ key, value }) => (
+							<div key={key} className="flex items-baseline gap-2">
+								<span className="flex-none" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)", width: 72 }}>{key}</span>
+								<span className="min-w-0 flex-1 break-all" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--dsw-label-primary)" }}>{value}</span>
+							</div>
+						))}
+					</div>
+				) : dialog.message ? (
+					<div className="whitespace-pre-wrap rounded-xl px-3 py-2.5" style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)", lineHeight: 1.55, background: "var(--dsw-hover)" }}>{dialog.message}</div>
+				) : null}
+				{dialog.method === "select" && (
+					<div className="flex max-h-72 flex-col overflow-y-auto rounded-xl" style={{ border: "0.5px solid var(--dsw-border-l2)" }} role="listbox">
+						{(dialog.options ?? []).map((opt, i) => {
+							const affirmative = /^(yes|allow|always)/i.test(opt.trim());
+							const negative = /^(no|deny|never)/i.test(opt.trim());
+							return (
+								<button
+									key={`${i}-${opt}`}
+									role="option"
+									aria-selected={i === idx}
+									className="px-3 py-2 text-left transition-colors"
+									style={{
+										fontSize: 13,
+										fontWeight: affirmative || negative ? 550 : 400,
+										color: affirmative ? "var(--dsw-accent)" : negative ? "var(--dsw-danger)" : "var(--dsw-label-primary)",
+										background: i === idx ? "var(--dsw-hover)" : "transparent",
+										borderLeft: i === idx ? "2px solid var(--dsw-accent)" : "2px solid transparent",
+									}}
+									onMouseEnter={() => setIdx(i)}
+									onClick={() => onAnswer(dialog.id, { value: opt })}
+								>
+									{opt}
+								</button>
+							);
+						})}
+					</div>
+				)}
+				{dialog.method === "input" && (
+					<input
+						autoFocus
+						value={text}
+						placeholder={dialog.placeholder}
+						onChange={(e) => setText(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !e.nativeEvent.isComposing) onAnswer(dialog.id, { value: text });
+						}}
+						className="rounded-xl px-3 py-2"
+						style={{ fontSize: 13, background: "var(--dsw-hover)", border: "0.5px solid var(--dsw-border-l2)" }}
+					/>
+				)}
+				<div className="flex justify-end gap-2">
+					<button className="btn-outline" style={{ height: 32 }} onClick={() => onAnswer(dialog.id, { cancelled: true })}>{t.cancel}</button>
+					{dialog.method === "confirm" && (
+						<button className="btn-primary-white" style={{ height: 32 }} onClick={() => onAnswer(dialog.id, { confirmed: true })}>{t.confirm}</button>
+					)}
+					{dialog.method === "input" && (
+						<button className="btn-primary-white" style={{ height: 32 }} onClick={() => onAnswer(dialog.id, { value: text })}>{t.confirm}</button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function ExtensionNotices({
+	notices,
+	onDismiss,
+}: {
+	notices: { id: string; message: string; type: "info" | "warning" | "error"; ts: number }[];
+	onDismiss: (id: string) => void;
+}) {
+	// 通知 6 秒后自动消失
+	useEffect(() => {
+		if (!notices.length) return;
+		const timers = notices.map((n) => setTimeout(() => onDismiss(n.id), Math.max(500, 6000 - (Date.now() - n.ts))));
+		return () => timers.forEach(clearTimeout);
+	}, [notices, onDismiss]);
+	if (!notices.length) return null;
+	const color = (type: string) => (type === "error" ? "var(--dsw-danger)" : type === "warning" ? "var(--dsw-warn)" : "var(--dsw-accent)");
+	return (
+		<div className="pointer-events-none fixed bottom-24 right-4 z-[110] flex w-[min(92vw,360px)] flex-col gap-2">
+			{notices.map((n) => (
+				<button
+					key={n.id}
+					className="pointer-events-auto rounded-xl px-3 py-2 text-left"
+					style={{ fontSize: 12.5, background: "var(--dsw-glass-popover)", border: "0.5px solid var(--dsw-border-l2)", boxShadow: "var(--dsw-elevation-soft)", borderLeft: `3px solid ${color(n.type)}` }}
+					onClick={() => onDismiss(n.id)}
+				>
+					{n.message}
+				</button>
+			))}
+		</div>
+	);
+}