@agimon-ai/po-file-edit 0.0.0-alpha.34 → 0.0.0-alpha.35

package/dist/extensions/native.mjs

@@ -1,9 +1,9 @@
-import { createApiClient, defineChannelFile, defineFileLinks, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { createApiClient, defineChannelFile, defineFileLinks, defineNativePlugin, defineSessionStore, encodeBase64, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
 import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
 import { Button, CloseIcon, CodeBlock, CopyButton, DownloadIcon, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, KebabIcon, Label, Markdown, SegmentedControl, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Textarea, fontOf } from "@agimon-ai/po-native-components";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/types/webFiles.ts
@@ -294,6 +294,107 @@ async function prepareFileSave(sessionId, path, signal) {
 	};
 }
 //#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/FileDiff.native.tsx
+const ROW_STEP = 200;
+/** Mount only the disclosed prefix; source line numbers and single-line comment anchors stay intact. */
+function FileDiff({ hunks, comment, initialRows = ROW_STEP, label = "file-diff" }) {
+	const [limit, setLimit] = useState(initialRows);
+	const total = useMemo(() => hunks.reduce((count, hunk) => count + hunk.rows.length, 0), [hunks]);
+	const visible = useMemo(() => {
+		const result = [];
+		let remaining = limit;
+		for (const hunk of hunks) {
+			if (remaining <= 0) break;
+			result.push({
+				...hunk,
+				rows: hunk.rows.slice(0, remaining)
+			});
+			remaining -= hunk.rows.length;
+		}
+		return result;
+	}, [hunks, limit]);
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.diff,
+		testID: label,
+		children: [visible.map((hunk, index) => {
+			return hunk.rows.length ? /* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsxs(Text, {
+				style: styles$3.meta,
+				children: ["line ", hunk.start]
+			}), hunk.rows.map((row, position) => /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				accessibilityLabel: `comment on ${row.marker === "-" ? "removed" : "new"} line ${row.line}`,
+				onPress: () => comment({
+					snippet: row.content,
+					side: row.marker === "-" ? "old" : "new",
+					startLine: row.line,
+					endLine: row.line
+				}),
+				children: /* @__PURE__ */ jsxs(Text, {
+					selectable: true,
+					style: row.marker === "+" ? styles$3.added : row.marker === "-" ? styles$3.removed : styles$3.code,
+					children: [
+						row.marker,
+						" ",
+						row.line,
+						" ",
+						row.content
+					]
+				})
+			}, `${row.line}-${position}`))] }, `${hunk.start}-${index}`) : null;
+		}), total ? /* @__PURE__ */ jsxs(View, {
+			style: styles$3.diff,
+			children: [/* @__PURE__ */ jsxs(Text, {
+				accessibilityLiveRegion: "polite",
+				style: styles$3.meta,
+				children: [
+					"Showing ",
+					Math.min(limit, total).toLocaleString("en-US"),
+					" of ",
+					total.toLocaleString("en-US"),
+					" rows"
+				]
+			}), limit < total ? /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				onPress: () => setLimit((value) => Math.min(total, value + ROW_STEP)),
+				children: [
+					"Show ",
+					Math.min(ROW_STEP, total - limit),
+					" more rows"
+				]
+			}) : null]
+		}) : null]
+	});
+}
+const styles$3 = StyleSheet.create((theme) => ({
+	diff: {
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	code: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	},
+	added: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		color: theme.colors.green,
+		uni__dependencies: [0]
+	},
+	removed: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		color: theme.colors.red,
+		uni__dependencies: [0]
+	},
+	meta: {
+		fontSize: theme.fontSize.sm,
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	}
+}));
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/FilePreview.native.tsx
 const MEDIA = /\.(?:png|jpe?g|gif|webp|bmp|svg|ico|mp3|wav|m4a|ogg|mp4|mov|webm|pdf)$/iu;
 const MAX_MEDIA_BYTES = 5242880;
@@ -301,23 +402,6 @@ const URL_OR_ANCHOR = /^(?:[a-z][a-z\d+.-]*:|\/\/|#|\?)/iu;
 function isMediaPath(path) {
 	return MEDIA.test(path);
 }
-function base64(bytes) {
-	const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-	const parts = [];
-	let chunk = "";
-	for (let offset = 0; offset < bytes.length; offset += 3) {
-		const first = bytes[offset];
-		const second = bytes[offset + 1];
-		const third = bytes[offset + 2];
-		chunk += alphabet[first >> 2] + alphabet[(first & 3) << 4 | (second ?? 0) >> 4] + (second === void 0 ? "=" : alphabet[(second & 15) << 2 | (third ?? 0) >> 6]) + (third === void 0 ? "=" : alphabet[third & 63]);
-		if (chunk.length >= 8192) {
-			parts.push(chunk);
-			chunk = "";
-		}
-	}
-	parts.push(chunk);
-	return parts.join("");
-}
 /** One media file's bytes through the package's guarded file route, as base64 with its content type. */
 async function fetchMedia(sessionId, path, signal) {
 	const result = await api.session(sessionId).file({
@@ -331,7 +415,7 @@ async function fetchMedia(sessionId, path, signal) {
 	const type = result.response.headers.get("content-type")?.split(";")[0]?.trim().toLowerCase() ?? "";
 	if (!/^(?:image\/[a-z0-9.+-]+|audio\/[a-z0-9.+-]+|video\/[a-z0-9.+-]+|application\/pdf)$/u.test(type)) throw new Error("This media type cannot be previewed.");
 	return {
-		data: base64(bytes),
+		data: encodeBase64(bytes),
 		type
 	};
 }
@@ -382,6 +466,73 @@ function SessionMedia({ sessionId, path, renderMediaPreview }) {
 		children: "This host cannot display this media preview."
 	});
 }
+/** One document's requested images, invalidated only by their own file revisions. */
+function markdownImages(sessionId, documentPath) {
+	const loaded = /* @__PURE__ */ new Map();
+	const stamp = (imagePath) => {
+		const session = files.select(files.store.state, sessionId);
+		const item = session.items.find((entry) => entry.path === imagePath || entry.relPath === imagePath);
+		return JSON.stringify([
+			item?.count,
+			item?.at,
+			session.detail[imagePath]?.working.hash
+		]);
+	};
+	const load = async (source) => {
+		if (sessionId === null || URL_OR_ANCHOR.test(source)) throw new Error("This image cannot be loaded.");
+		const imagePath = documentRelative(documentPath, source);
+		let image = loaded.get(imagePath);
+		if (!image) {
+			image = { stamp: stamp(imagePath) };
+			loaded.set(imagePath, image);
+		}
+		const cached = image;
+		cached.asset ??= fetchMedia(sessionId, imagePath, new AbortController().signal).then((media) => {
+			if (!media.type.startsWith("image/")) throw new Error("This file is not an image.");
+			return {
+				url: `data:${media.type};base64,${media.data}`,
+				dispose: () => {}
+			};
+		}).catch((error) => {
+			cached.asset = void 0;
+			throw error;
+		});
+		return cached.asset;
+	};
+	let snapshot = load;
+	const subscribe = (listener) => {
+		const subscription = files.store.subscribe(() => {
+			let changed = false;
+			for (const [imagePath, image] of loaded) {
+				const next = stamp(imagePath);
+				if (next === image.stamp) continue;
+				loaded.set(imagePath, { stamp: next });
+				changed = true;
+			}
+			if (changed) {
+				snapshot = (source) => load(source);
+				listener();
+			}
+		});
+		return () => subscription.unsubscribe();
+	};
+	return {
+		subscribe,
+		snapshot: () => snapshot
+	};
+}
+function MarkdownPreview({ path, working, sessionId, fileTabFor, openTransientTab }) {
+	const images = useMemo(() => markdownImages(sessionId, path), [sessionId, path]);
+	const loadImage = useSyncExternalStore(images.subscribe, images.snapshot);
+	return /* @__PURE__ */ jsx(Markdown, {
+		text: working.content,
+		onFileLink: (file) => {
+			const tab = fileTabFor(file);
+			return tab ? () => openTransientTab(tab) : void 0;
+		},
+		loadImage
+	});
+}
 /** Rendering is separate from reading: only the guarded package API supplies file content or bytes. */
 function FilePreview({ path, working, ...props }) {
 	if (MEDIA.test(path)) return /* @__PURE__ */ jsx(SessionMedia, {
@@ -404,25 +555,11 @@ function FilePreview({ path, working, ...props }) {
 		style: styles$2.error,
 		children: "This host cannot display HTML previews."
 	});
-	if (/\.(?:md|markdown)$/iu.test(path)) {
-		const { sessionId } = props;
-		return /* @__PURE__ */ jsx(Markdown, {
-			text: working.content,
-			onFileLink: (file) => {
-				const tab = props.fileTabFor(file);
-				return tab ? () => props.openTransientTab(tab) : void 0;
-			},
-			loadImage: async (source) => {
-				if (sessionId === null || URL_OR_ANCHOR.test(source)) throw new Error("This image cannot be loaded.");
-				const media = await fetchMedia(sessionId, documentRelative(path, source), new AbortController().signal);
-				if (!media.type.startsWith("image/")) throw new Error("This file is not an image.");
-				return {
-					url: `data:${media.type};base64,${media.data}`,
-					dispose: () => {}
-				};
-			}
-		});
-	}
+	if (/\.(?:md|markdown)$/iu.test(path)) return /* @__PURE__ */ jsx(MarkdownPreview, {
+		...props,
+		path,
+		working
+	}, working.hash);
 	return /* @__PURE__ */ jsx(CodeBlock, {
 		text: working.content,
 		language: path.split(".").at(-1)
@@ -446,35 +583,6 @@ const styles$2 = StyleSheet.create((theme) => ({
 }));
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/FilePanel.native.tsx
-function Diff({ hunks, comment }) {
-	return /* @__PURE__ */ jsx(View, {
-		style: styles$1.diff,
-		children: hunks.map((hunk, index) => /* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsxs(Text, {
-			style: styles$1.meta,
-			children: ["line ", hunk.start]
-		}), hunk.rows.map((row, position) => /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			accessibilityLabel: `comment on ${row.marker === "-" ? "removed" : "new"} line ${row.line}`,
-			onPress: () => comment({
-				snippet: row.content,
-				side: row.marker === "-" ? "old" : "new",
-				startLine: row.line,
-				endLine: row.line
-			}),
-			children: /* @__PURE__ */ jsxs(Text, {
-				selectable: true,
-				style: row.marker === "+" ? styles$1.added : row.marker === "-" ? styles$1.removed : styles$1.code,
-				children: [
-					row.marker,
-					" ",
-					row.line,
-					" ",
-					row.content
-				]
-			})
-		}, `${row.line}-${position}`))] }, `${hunk.start}-${index}`))
-	});
-}
 function ReviewSheet({ selection, close, submit }) {
 	const [body, setBody] = useState("");
 	const [snippet, setSnippet] = useState(selection.snippet);
@@ -514,6 +622,23 @@ function ReviewSheet({ selection, close, submit }) {
 		] })] })
 	});
 }
+/** Cache the selected file snapshot, not the session record or a freshly filtered comments array. */
+function fileSnapshot(sessionId, filePath) {
+	let previous;
+	return () => {
+		const session = files.select(files.store.state, sessionId);
+		const next = {
+			detail: session.detail[filePath],
+			loading: session.loading.includes(filePath),
+			error: session.errors[filePath],
+			revision: session.items.find((item) => item.path === filePath)?.count ?? 0,
+			comments: session.comments.filter((comment) => comment.path === filePath)
+		};
+		if (previous && previous.detail === next.detail && previous.loading === next.loading && previous.error === next.error && previous.revision === next.revision && previous.comments.length === next.comments.length && previous.comments.every((comment, index) => comment === next.comments[index])) return previous;
+		previous = next;
+		return next;
+	};
+}
 /** File writes retain the existing containment and stale-hash guards; deletion always asks first. */
 function FilePanel({ filePath, relPath, ...props }) {
 	const { sessionId, sendSessionFrame, closeTransientTab } = props;
@@ -521,10 +646,9 @@ function FilePanel({ filePath, relPath, ...props }) {
 		const subscription = files.store.subscribe(listener);
 		return () => subscription.unsubscribe();
 	}, []);
-	const session = useSyncExternalStore(subscribe, () => files.select(files.store.state, sessionId));
-	const detail = session.detail[filePath];
+	const snapshot = useMemo(() => fileSnapshot(sessionId, filePath), [sessionId, filePath]);
+	const { detail, loading, error, revision, comments } = useSyncExternalStore(subscribe, snapshot);
 	const working = detail?.working;
-	const comments = session.comments.filter((comment) => comment.path === filePath);
 	const [view, setView] = useState("preview");
 	const [source, setSource] = useState();
 	const [expanded, setExpanded] = useState();
@@ -536,7 +660,6 @@ function FilePanel({ filePath, relPath, ...props }) {
 	const [reviewError, setReviewError] = useState();
 	const outside = relPath === ".." || relPath.startsWith("../") || relPath.startsWith("/") || relPath.startsWith("..\\") || /^[a-z]:[\\/]/iu.test(relPath);
 	const writable = sessionId !== null && !outside && working !== void 0 && !working.unavailable;
-	const revision = session.items.find((item) => item.path === filePath)?.count ?? 0;
 	useEffect(() => {
 		if (sessionId === null) return;
 		let cancelled = false;
@@ -693,14 +816,14 @@ function FilePanel({ filePath, relPath, ...props }) {
 				style: styles$1.meta,
 				children: "editing"
 			}) : null,
-			session.loading.includes(filePath) && !detail ? /* @__PURE__ */ jsx(Text, {
+			loading && !detail ? /* @__PURE__ */ jsx(Text, {
 				style: styles$1.meta,
 				children: "reading this file's history…"
 			}) : null,
-			session.errors[filePath] ? /* @__PURE__ */ jsx(Text, {
+			error ? /* @__PURE__ */ jsx(Text, {
 				accessibilityRole: "alert",
 				style: styles$1.error,
-				children: session.errors[filePath]
+				children: error
 			}) : null,
 			detail ? view === "diff" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs(Text, {
@@ -716,10 +839,10 @@ function FilePanel({ filePath, relPath, ...props }) {
 					style: styles$1.meta,
 					children: detail.cumulative.note
 				}) : null,
-				detail.cumulative.hunks ? /* @__PURE__ */ jsx(Diff, {
+				detail.cumulative.hunks ? /* @__PURE__ */ jsx(FileDiff, {
 					hunks: detail.cumulative.hunks,
 					comment: setDraft
-				}) : null,
+				}, `${sessionId}:${filePath}`) : null,
 				/* @__PURE__ */ jsxs(Text, {
 					style: styles$1.title,
 					children: [detail.versions.length, " changes this session"]
@@ -739,10 +862,10 @@ function FilePanel({ filePath, relPath, ...props }) {
 						version.removals,
 						version.origin === "scan" ? " · no baseline" : ""
 					]
-				}), expanded === version.index ? version.hunks ? /* @__PURE__ */ jsx(Diff, {
+				}), expanded === version.index ? version.hunks ? /* @__PURE__ */ jsx(FileDiff, {
 					hunks: version.hunks,
 					comment: setDraft
-				}) : /* @__PURE__ */ jsx(Text, {
+				}, `${sessionId}:${filePath}`) : /* @__PURE__ */ jsx(Text, {
 					style: styles$1.meta,
 					children: version.note ?? "nothing to show"
 				}) : null] }, version.index))
@@ -926,24 +1049,6 @@ const styles$1 = StyleSheet.create((theme) => ({
 		color: theme.colors.hi,
 		uni__dependencies: [0]
 	},
-	code: {
-		fontFamily: fontOf(theme.fontFamily.mono),
-		fontSize: theme.fontSize.sm,
-		color: theme.colors.text,
-		uni__dependencies: [0]
-	},
-	added: {
-		fontFamily: fontOf(theme.fontFamily.mono),
-		fontSize: theme.fontSize.sm,
-		color: theme.colors.green,
-		uni__dependencies: [0]
-	},
-	removed: {
-		fontFamily: fontOf(theme.fontFamily.mono),
-		fontSize: theme.fontSize.sm,
-		color: theme.colors.red,
-		uni__dependencies: [0]
-	},
 	meta: {
 		fontSize: theme.fontSize.sm,
 		color: theme.colors.dim,