@agimon-ai/po-artifact 0.0.0-alpha.21 → 0.0.0-alpha.23

package/dist/extensions/native.mjs

@@ -1,9 +1,9 @@
-import { createApiClient, defineActivityGroup, defineChannelFile, defineFill, defineGlobalStore, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { createApiClient, defineActivityGroup, defineChannelFile, defineFileLinks, defineFill, defineGlobalStore, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { Button, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, CopyButton, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FileIcon, FolderIcon, ImageIcon, Input, Markdown, SearchIcon, SegmentedControl, SlidersIcon, fontOf } from "@agimon-ai/po-native-components";
+import { createElement, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
 import { Image } from "react-native-unistyles/components/native/Image";
-import { Button, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FileIcon, FolderIcon, ImageIcon, Input, Markdown, SearchIcon, SegmentedControl, SlidersIcon, fontOf } from "@agimon-ai/po-native-components";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { FlatList } from "react-native-unistyles/components/native/FlatList";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -126,6 +126,14 @@ function artifactTree(items, isOpen) {
 	walk(root, 0);
 	return rows;
 }
+/** `Modified today` on the same calendar day, otherwise the short date. */
+function modifiedLabel(modifiedAt, now) {
+	const date = new Date(modifiedAt);
+	return date.toDateString() === new Date(now).toDateString() ? "Modified today" : `Modified ${date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	})}`;
+}
 function sizeLabel(size) {
 	return size < 1024 ? `${size} B` : size < 1048576 ? `${Math.ceil(size / 1024)} KB` : `${(size / 1048576).toFixed(1)} MB`;
 }
@@ -381,19 +389,19 @@ function ArtifactList({ items, onOpen, loading, error, grid = false, browser })
 				testID: `artifact-${item.path}`,
 				onPress: () => onOpen(item.path),
 				style: styles$3.item,
-				children: [/* @__PURE__ */ jsx(FolderIcon, {
+				children: [/* @__PURE__ */ jsx(FileIcon, {
 					size: 18,
 					color: "dim"
 				}), /* @__PURE__ */ jsxs(View, {
 					style: styles$3.label,
 					children: [
 						/* @__PURE__ */ jsx(Text, {
-							numberOfLines: 2,
+							numberOfLines: 1,
 							style: styles$3.name,
 							children: item.name
 						}),
 						grid || item.path !== item.name ? /* @__PURE__ */ jsx(Text, {
-							numberOfLines: 2,
+							numberOfLines: 1,
 							style: styles$3.path,
 							children: item.path
 						}) : null,
@@ -799,9 +807,10 @@ const styles$3 = StyleSheet.create((theme) => ({
 	},
 	item: {
 		minHeight: 44,
+		flexDirection: "row",
 		justifyContent: "flex-start",
 		alignItems: "center",
-		gap: theme.spacing(2),
+		gap: theme.spacing(3),
 		uni__dependencies: [0]
 	},
 	label: {
@@ -926,6 +935,7 @@ const styles$2 = StyleSheet.create((theme) => ({
 }));
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/ArtifactPanel.native.tsx
+const HostCopyButton = CopyButton;
 function ArtifactPanel({ path, scope = "artifacts", ...props }) {
 	const item = useArtifacts(props.sessionId).items.find((item) => item.path === path);
 	const version = `${item?.modifiedAt ?? ""}:${item?.size ?? ""}`;
@@ -1008,67 +1018,166 @@ function ArtifactPanel({ path, scope = "artifacts", ...props }) {
 			if (downloadController.current === controller) downloadController.current = void 0;
 		}
 	};
-	return /* @__PURE__ */ jsxs(ScrollView, {
-		contentContainerStyle: styles$1.content,
+	const cancel = () => {
+		downloadController.current?.abort();
+		downloadController.current = void 0;
+		setDownload({
+			key: downloadKey,
+			note: "Download cancelled."
+		});
+	};
+	const handlers = useRef({
+		save,
+		cancel
+	});
+	useEffect(() => {
+		handlers.current = {
+			save,
+			cancel
+		};
+	});
+	const { setTabHeader } = props;
+	const canSave = props.nativeSaveFile !== void 0;
+	const media = artifactPreviewMode(path) === "media" && props.renderMediaPreview !== void 0 && current?.media !== void 0;
+	const subtitle = `${artifactKind(path)}${item ? ` · ${sizeLabel(item.size)}` : ""}`;
+	const offline = props.sessionId === null;
+	useEffect(() => {
+		if (!setTabHeader || media) return;
+		setTabHeader({
+			subtitle,
+			action: canSave ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				disabled: offline,
+				accessibilityLabel: saving ? "Cancel download" : "Download",
+				onPress: () => saving ? handlers.current.cancel() : void handlers.current.save(),
+				children: saving ? /* @__PURE__ */ jsx(CloseIcon, { color: "hi" }) : /* @__PURE__ */ jsx(DownloadIcon, { color: "hi" })
+			}) : void 0
+		});
+	}, [
+		setTabHeader,
+		media,
+		subtitle,
+		canSave,
+		saving,
+		offline
+	]);
+	const note = download?.key === downloadKey && download.note ? /* @__PURE__ */ jsx(Text, {
+		accessibilityLiveRegion: "polite",
+		style: styles$1.meta,
+		children: download.note
+	}) : null;
+	const body = props.sessionId === null ? /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "alert",
+		style: styles$1.error,
+		children: "The session is unavailable."
+	}) : current?.error ? /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "alert",
+		style: styles$1.error,
+		children: current.error
+	}) : current?.preview ? /* @__PURE__ */ jsx(ArtifactPreview, {
+		preview: current.preview,
+		sessionId: props.sessionId,
+		renderFilePreview: props.renderFilePreview,
+		renderMediaPreview: props.renderMediaPreview,
+		media: current.media,
+		mediaError: current.mediaError,
+		onOpen: (path) => {
+			if (props.sessionId !== null) props.openTransientTab(artifactTab(props.sessionId, path, scope));
+		}
+	}) : /* @__PURE__ */ jsx(Text, {
+		style: styles$1.meta,
+		children: "Reading this artifact..."
+	});
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.screen,
+		children: [media ? /* @__PURE__ */ jsx(View, {
+			style: styles$1.stage,
+			children: body
+		}) : /* @__PURE__ */ jsxs(ScrollView, {
+			style: styles$1.stage,
+			contentContainerStyle: styles$1.content,
+			children: [
+				setTabHeader ? null : /* @__PURE__ */ jsx(ArtifactPanelHeader, {
+					path,
+					size: item?.size,
+					saving,
+					canSave,
+					disabled: offline,
+					onDownload: () => void save(),
+					onCancel: cancel
+				}),
+				note,
+				body
+			]
+		}), /* @__PURE__ */ jsx(ArtifactPathStrip, {
+			path,
+			modifiedAt: item?.modifiedAt
+		})]
+	});
+}
+/** Where the file lives and when it last changed, pinned under the preview. */
+function ArtifactPathStrip({ path, modifiedAt }) {
+	const [now] = useState(Date.now);
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.strip,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
 				selectable: true,
-				style: styles$1.path,
+				numberOfLines: 1,
+				ellipsizeMode: "middle",
+				style: [styles$1.path, styles$1.stripPath],
 				children: path
 			}),
-			props.nativeSaveFile ? /* @__PURE__ */ jsxs(View, {
-				style: styles$1.actions,
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					disabled: saving || props.sessionId === null,
-					onPress: () => void save(),
-					children: "Download"
-				}), saving ? /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					onPress: () => {
-						downloadController.current?.abort();
-						downloadController.current = void 0;
-						setDownload({
-							key: downloadKey,
-							note: "Download cancelled."
-						});
-					},
-					children: "Cancel download"
-				}) : null]
-			}) : /* @__PURE__ */ jsx(Text, {
-				style: styles$1.meta,
-				children: "This host cannot save artifact downloads."
-			}),
-			download?.key === downloadKey && download.note ? /* @__PURE__ */ jsx(Text, {
-				accessibilityLiveRegion: "polite",
-				style: styles$1.meta,
-				children: download.note
+			HostCopyButton ? /* @__PURE__ */ jsx(HostCopyButton, {
+				text: path,
+				label: "path"
 			}) : null,
-			props.sessionId === null ? /* @__PURE__ */ jsx(Text, {
-				accessibilityRole: "alert",
-				style: styles$1.error,
-				children: "The session is unavailable."
-			}) : current?.error ? /* @__PURE__ */ jsx(Text, {
-				accessibilityRole: "alert",
-				style: styles$1.error,
-				children: current.error
-			}) : current?.preview ? /* @__PURE__ */ jsx(ArtifactPreview, {
-				preview: current.preview,
-				sessionId: props.sessionId,
-				renderFilePreview: props.renderFilePreview,
-				renderMediaPreview: props.renderMediaPreview,
-				media: current.media,
-				mediaError: current.mediaError,
-				onOpen: (path) => {
-					if (props.sessionId !== null) props.openTransientTab(artifactTab(props.sessionId, path, scope));
-				}
-			}) : /* @__PURE__ */ jsx(Text, {
+			modifiedAt === void 0 ? null : /* @__PURE__ */ jsx(Text, {
 				style: styles$1.meta,
-				children: "Reading this artifact..."
+				children: modifiedLabel(modifiedAt, now)
 			})
 		]
 	});
 }
+/** The preview's quiet header: where the file lives, what it is, and the one action on it. */
+function ArtifactPanelHeader({ path, size, saving, canSave, disabled, onDownload, onCancel }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.header,
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				style: styles$1.label,
+				children: [/* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					numberOfLines: 1,
+					ellipsizeMode: "middle",
+					style: styles$1.path,
+					children: path
+				}), /* @__PURE__ */ jsxs(Text, {
+					style: styles$1.meta,
+					children: [
+						artifactKind(path),
+						size === void 0 ? "" : ` · ${sizeLabel(size)}`,
+						canSave ? "" : " · This host cannot save artifact downloads."
+					]
+				})]
+			}),
+			canSave && saving ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onPress: onCancel,
+				children: "Cancel"
+			}) : null,
+			canSave ? /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				disabled: saving || disabled,
+				onPress: onDownload,
+				children: "Download"
+			}) : null
+		]
+	});
+}
 function artifactTab(sessionId, path, scope = "artifacts") {
 	return {
 		id: `${scope === "temporary" ? "temporary:" : ""}${artifactTabId(sessionId, path)}`,
@@ -1081,16 +1190,40 @@ function artifactTab(sessionId, path, scope = "artifacts") {
 		})
 	};
 }
-const styles$1 = StyleSheet.create((theme) => ({
+const styles$1 = StyleSheet.create((theme, rt) => ({
+	screen: { flex: 1 },
+	stage: { flex: 1 },
 	content: {
 		padding: theme.spacing(4),
 		gap: theme.spacing(3),
 		uni__dependencies: [0]
 	},
-	actions: {
+	strip: {
 		flexDirection: "row",
-		flexWrap: "wrap",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		paddingHorizontal: theme.spacing(4),
+		paddingTop: theme.spacing(2),
+		paddingBottom: theme.spacing(2) + rt.insets.bottom,
+		borderTopWidth: 1,
+		borderTopColor: theme.colors["border-soft"],
+		backgroundColor: theme.colors.bg,
+		uni__dependencies: [0, 9]
+	},
+	stripPath: { flexShrink: 1 },
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
 		gap: theme.spacing(2),
+		paddingBottom: theme.spacing(3),
+		borderBottomWidth: 1,
+		borderBottomColor: theme.colors["border-soft"],
+		uni__dependencies: [0]
+	},
+	label: {
+		flex: 1,
+		minWidth: 0,
+		gap: theme.spacing(.5),
 		uni__dependencies: [0]
 	},
 	path: {
@@ -1261,9 +1394,10 @@ const styles = StyleSheet.create((theme) => ({
 }));
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/activity-group/artifacts.native.ts
-var artifacts_native_default$1 = defineActivityGroup({
+var artifacts_native_default$2 = defineActivityGroup({
 	name: "artifacts",
 	keys: "",
+	icon: () => createElement(FileIcon),
 	activeSource: artifactActivitySource,
 	marksBackgroundWork: false,
 	transientTab: artifactsTab,
@@ -1271,7 +1405,42 @@ var artifacts_native_default$1 = defineActivityGroup({
 });
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/channel/artifacts.native.ts
-var artifacts_native_default = defineChannelFile(artifactsChannel);
+var artifacts_native_default$1 = defineChannelFile(artifactsChannel);
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_lib/temporaryFiles.ts
+/** Matching links is presentation only. The server independently selects and guards the root. */
+function temporaryFileReference(reference, root) {
+	const value = reference.trim();
+	const prefix = "temporary:";
+	let relative;
+	if (value.startsWith(prefix)) relative = value.slice(10);
+	else {
+		if (!root || !root.startsWith("/")) return void 0;
+		const base = root.replace(/\/+$/u, "");
+		if (!value.startsWith(`${base}/`)) return void 0;
+		relative = value.slice(base.length + 1);
+	}
+	if (!relative || relative.includes("\\") || relative.includes("\0") || relative.split("/").some((part) => !part || part === "." || part === "..")) return void 0;
+	return relative;
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/file-links/artifacts.native.ts
+var artifacts_native_default = defineFileLinks({
+	subscribe(listener) {
+		const subscription = artifacts.store.subscribe(listener);
+		return () => subscription.unsubscribe();
+	},
+	fingerprint: (sessionId) => artifacts.select(artifacts.store.state, sessionId).temporaryRoot ?? "",
+	resolve(sessionId, path) {
+		if (sessionId === null) return void 0;
+		const reference = path.trim();
+		const temporary = temporaryFileReference(reference, artifacts.select(artifacts.store.state, sessionId).temporaryRoot);
+		if (temporary) return artifactTab(sessionId, temporary, "temporary");
+		if (!reference.startsWith("artifact:")) return void 0;
+		const relative = reference.slice(9);
+		return relative ? artifactTab(sessionId, relative) : void 0;
+	}
+});
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/fill/Artifacts.activity.artifacts.native.tsx
 var Artifacts_activity_artifacts_native_default = defineFill({
@@ -1289,10 +1458,13 @@ const nativePlugin = defineNativePlugin({
 	id: "artifacts",
 	session: {
 		get activityGroups() {
-			return [via({ name: "artifacts" }, artifacts_native_default$1)];
+			return [via({ name: "artifacts" }, artifacts_native_default$2)];
 		},
 		get channels() {
-			return [via({ channel: "artifacts" }, artifacts_native_default)];
+			return [via({ channel: "artifacts" }, artifacts_native_default$1)];
+		},
+		get fileLinks() {
+			return artifacts_native_default;
 		},
 		get fills() {
 			return [via({