@agimon-ai/po-author 0.0.0-alpha.67 → 0.0.0-alpha.69

package/dist/extensions/native.mjs

@@ -1,7 +1,7 @@
 import { apiResponse, createApiClient, decodeBase64, defineChannelFile, defineFileLinks, defineFill, defineGlobalStore, defineNativePlugin, defineSessionStore, defineSlotFile, defineToolRenderer, defineWebLifecycle, encodeBase64, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
 import { Store } from "@tanstack/store";
 import { Image } from "react-native-unistyles/components/native/Image";
-import { AnnotationSurface, Badge, Button, EmptyState, Markdown, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, SectionLabel, SegmentedControl, Spinner, Textarea, TrashIcon, collapseLines, fontOf, resultTextLines, toolTone } from "@agimon-ai/po-native-components";
+import { AnnotationSurface, Badge, Button, EmptyState, Markdown, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, SectionLabel, SegmentedControl, Sheet, SheetBody, SheetContent, SheetDescription, SheetHeader, SheetTitle, Spinner, Textarea, TrashIcon, collapseLines, fontOf, resultTextLines, selectionTick, toolTone } from "@agimon-ai/po-native-components";
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { AppState } from "react-native";
 import { View } from "react-native-unistyles/components/native/View";
@@ -656,7 +656,7 @@ const authorPreviewActionSlot = {
 };
 /** Keep freehand evidence small and source-relative. Reject malformed geometry rather than degrading it into a crop. */
 function validAuthorStroke(value) {
-	return Array.isArray(value) && value.length >= 2 && value.length <= 128 && value.some((point) => point.x !== value[0]?.x || point.y !== value[0]?.y) && value.every((point) => typeof point === "object" && point !== null && Number.isFinite(point.x) && Number.isFinite(point.y) && point.x >= 0 && point.x <= 1 && point.y >= 0 && point.y <= 1);
+	return Array.isArray(value) && value.length >= 2 && value.length <= 128 && value.every((point) => typeof point === "object" && point !== null && Number.isFinite(point.x) && Number.isFinite(point.y) && point.x >= 0 && point.x <= 1 && point.y >= 0 && point.y <= 1) && value.some((point) => point.x !== value[0]?.x || point.y !== value[0]?.y);
 }
 function authorStrokeBounds(points) {
 	if (!validAuthorStroke(points)) return null;
@@ -690,6 +690,64 @@ function normalizedAuthorRectangle(bounds, drag) {
 		height: (bottom - top) / height
 	};
 }
+/** Shapes share the existing bounded stroke contract, including reverse drags and image aspect ratios. */
+function authorAnnotationStroke(tool, points, aspectRatio) {
+	if (!validAuthorStroke(points) || !Number.isFinite(aspectRatio) || aspectRatio <= 0) return void 0;
+	const first = points[0];
+	const last = points.at(-1);
+	if (tool === "rectangle") {
+		const rect = normalizedAuthorRectangle({
+			left: 0,
+			top: 0,
+			right: 1,
+			bottom: 1
+		}, {
+			left: first.x,
+			top: first.y,
+			right: last.x,
+			bottom: last.y
+		});
+		return rect ? [
+			{
+				x: rect.x,
+				y: rect.y
+			},
+			{
+				x: rect.x + rect.width,
+				y: rect.y
+			},
+			{
+				x: rect.x + rect.width,
+				y: rect.y + rect.height
+			},
+			{
+				x: rect.x,
+				y: rect.y + rect.height
+			},
+			{
+				x: rect.x,
+				y: rect.y
+			}
+		] : void 0;
+	}
+	if (tool !== "arrow") return points.map((point) => ({ ...point }));
+	const dx = (last.x - first.x) * aspectRatio;
+	const dy = last.y - first.y;
+	const length = Math.hypot(dx, dy);
+	if (length === 0) return void 0;
+	const head = Math.min(.04, length / 3);
+	const wing = (side) => ({
+		x: Math.max(0, Math.min(1, last.x - (dx + side * dy * .6) / length * head / aspectRatio)),
+		y: Math.max(0, Math.min(1, last.y - (dy - side * dx * .6) / length * head))
+	});
+	return [
+		{ ...first },
+		{ ...last },
+		wing(1),
+		{ ...last },
+		wing(-1)
+	];
+}
 const AUTHOR_QUOTE_MAX_BYTES = 4096;
 function bytes$1(value) {
 	let length = 0;
@@ -901,10 +959,14 @@ const IMAGE_SAVE_MAX_BYTES = 33554432;
 const PDF_MAX_BYTES = 33554432;
 const VIDEO_MAX_BYTES = 134217728;
 const extensionOf = (path) => path.toLowerCase().split("/").at(-1)?.split(".").slice(1).at(-1) ?? "";
+/** Reuse the native decoder's supported image paths for canvas-specific host layout. */
+function authorNativeIsImage(path) {
+	return IMAGE_EXTENSIONS.has(extensionOf(path));
+}
 /** Whether the phone's canvas can mark this path up; anything else stays with its own viewer. */
 function authorNativeCanOpen(path) {
 	const extension = extensionOf(path);
-	return extension === "pdf" || VIDEO_MIMES[extension] !== void 0 || structuredFormat(path) !== void 0 || IMAGE_EXTENSIONS.has(extension) || TEXT_EXTENSIONS.has(extension);
+	return extension === "pdf" || VIDEO_MIMES[extension] !== void 0 || structuredFormat(path) !== void 0 || authorNativeIsImage(path) || TEXT_EXTENSIONS.has(extension);
 }
 /**
 * The raw reads Author's canvas already uses, restated for the native transport:
@@ -1438,6 +1500,10 @@ function note(value) {
 			};
 		});
 	}
+	if (record.highlight !== void 0) {
+		if (typeof record.highlight !== "boolean") throw new Error("Invalid stored Author highlight.");
+		result.highlight = record.highlight;
+	}
 	if (record.page !== void 0) {
 		if (typeof record.page !== "number" || !Number.isSafeInteger(record.page) || record.page < 1) throw new Error("Invalid stored Author page.");
 		result.page = record.page;
@@ -1624,6 +1690,671 @@ function startNativeAuthorRequests(runtime) {
 	};
 }
 //#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorCanvasWorkspace.native.tsx
+const TOOLS = [
+	{
+		id: "move",
+		label: "Move",
+		hint: "Drag to move. Pinch to zoom."
+	},
+	{
+		id: "pin",
+		label: "Pin",
+		hint: "Tap to mark. Keep going, explain later."
+	},
+	{
+		id: "rectangle",
+		label: "Box",
+		hint: "Drag around a region. Keep going, explain later."
+	},
+	{
+		id: "arrow",
+		label: "Arrow",
+		hint: "Drag toward what should change."
+	},
+	{
+		id: "draw",
+		label: "Draw",
+		hint: "Draw freely. Each stroke becomes a mark."
+	},
+	{
+		id: "highlight",
+		label: "Highlight",
+		hint: "Draw over a detail. The original stays unchanged."
+	},
+	{
+		id: "erase",
+		label: "Erase",
+		hint: "Tap a numbered mark to remove it, not image pixels."
+	}
+];
+const FIT = {
+	width: 0,
+	height: 0,
+	zoom: 1,
+	originX: 0,
+	originY: 0
+};
+const SEND_LIMIT = 16;
+/** Image feedback is a canvas first. Explanations and delivery live in the review sheet. */
+function AuthorCanvasWorkspace(props) {
+	const { body, notes, draft, status } = props;
+	const [tool, setTool] = useState("move");
+	const [reviewOpen, setReviewOpen] = useState(!!draft || !!props.selectedId);
+	const [reviewId, setReviewId] = useState(props.selectedId ?? notes[0]?.id);
+	const [area, setArea] = useState({
+		width: 0,
+		height: 0
+	});
+	const [viewport, setViewport] = useState(FIT);
+	const sending = status.state === "sending";
+	const sendAfterFit = useRef(false);
+	useEffect(() => {
+		if (sendAfterFit.current && viewport.zoom === 1 && viewport.originX === 0 && viewport.originY === 0) {
+			sendAfterFit.current = false;
+			props.onSend?.();
+		}
+	}, [viewport, props.onSend]);
+	const send = () => {
+		if (viewport.zoom === 1 && viewport.originX === 0 && viewport.originY === 0) props.onSend?.();
+		else {
+			sendAfterFit.current = true;
+			setViewport((current) => ({
+				...current,
+				zoom: 1,
+				originX: 0,
+				originY: 0
+			}));
+		}
+	};
+	const onViewportChange = useCallback((next) => {
+		setViewport((previous) => previous.width === next.width && previous.height === next.height && previous.zoom === next.zoom && previous.originX === next.originX && previous.originY === next.originY ? previous : next);
+		props.onViewportChange?.(next);
+	}, [props.onViewportChange]);
+	const ratio = Number.isFinite(body.aspectRatio) && body.aspectRatio > 0 ? body.aspectRatio : 1;
+	const width = Math.min(area.width, area.height * ratio);
+	const height = width / ratio;
+	const overviewWidth = 64 * Math.min(1, ratio);
+	const overviewHeight = 64 / Math.max(1, ratio);
+	const zoomTo = (zoom) => {
+		const next = Math.min(4, Math.max(1, zoom));
+		setViewport((current) => ({
+			...current,
+			zoom: next,
+			originX: current.width / 2 - (current.width / 2 - current.originX) / current.zoom * next,
+			originY: current.height / 2 - (current.height / 2 - current.originY) / current.zoom * next
+		}));
+	};
+	const focus = (note) => {
+		setReviewId(note.id);
+		props.onSelect?.(note.id);
+		setViewport((current) => ({
+			...current,
+			zoom: 2,
+			originX: current.width / 2 - note.x * current.width * 2,
+			originY: current.height / 2 - note.y * current.height * 2
+		}));
+	};
+	const batch = notes.slice(0, SEND_LIMIT);
+	const needsExplanation = batch.some((note) => !note.text.trim());
+	const stale = batch.some((note) => note.sourceSha256 !== void 0 && note.sourceSha256 !== props.sourceSha256);
+	const selected = notes.find((note) => note.id === reviewId);
+	const marks = notes.flatMap((note, index) => note.sourceSha256 !== void 0 && note.sourceSha256 !== props.sourceSha256 ? [] : [{
+		...note,
+		label: String(index + 1),
+		description: note.text || "Needs an explanation"
+	}]);
+	if (draft) marks.push({
+		...draft,
+		id: "draft",
+		label: String(notes.length + 1),
+		description: "Unfinished note"
+	});
+	const annotation = /* @__PURE__ */ jsx(AnnotationSurface, {
+		accessibilityLabel: props.name,
+		zoomable: !sending,
+		navigation: tool === "move" && !sending,
+		viewport,
+		onViewportChange,
+		marks,
+		selectedId: selected?.id ?? props.selectedId,
+		drawingHighlight: tool === "highlight",
+		onPlace: !sending && tool === "pin" ? (point) => {
+			if (props.onAddMark) props.onAddMark({
+				...point,
+				text: ""
+			});
+			else props.onPlace?.(point);
+		} : void 0,
+		onDraw: !sending && props.onAddMark && tool !== "move" && tool !== "pin" && tool !== "erase" ? (points) => {
+			const stroke = authorAnnotationStroke(tool, points, ratio);
+			const point = tool === "arrow" ? points.at(-1) : stroke?.at(-1);
+			if (stroke && point) props.onAddMark?.({
+				...point,
+				points: stroke,
+				text: "",
+				...tool === "highlight" ? { highlight: true } : {}
+			});
+		} : void 0,
+		onSelectMark: sending ? void 0 : (id) => {
+			if (id === "draft") {
+				setReviewOpen(true);
+				return;
+			}
+			if (tool === "erase") {
+				props.onDelete?.(id);
+				return;
+			}
+			const note = notes.find((note) => note.id === id);
+			if (note) focus(note);
+			setReviewOpen(true);
+		},
+		children: /* @__PURE__ */ jsx(Image, {
+			source: { uri: body.uri },
+			style: {
+				width,
+				height
+			},
+			resizeMode: "contain"
+		})
+	});
+	const sendMessage = status.state === "failed" ? `Couldn't send: ${status.message} Your notes are still here.` : status.state === "sent" ? "Sent to the agent. You can keep marking." : void 0;
+	return /* @__PURE__ */ jsxs(View, {
+		style: s$1.screen,
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				style: s$1.header,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						style: s$1.meta,
+						children: "Image feedback"
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						style: s$1.title,
+						numberOfLines: 1,
+						children: props.name
+					}),
+					props.ownedElsewhere ? /* @__PURE__ */ jsx(Badge, {
+						tone: "magenta",
+						children: "Also open on another device"
+					}) : null,
+					props.storageMessage ? /* @__PURE__ */ jsx(Text, {
+						style: s$1.meta,
+						accessibilityLiveRegion: "polite",
+						children: props.storageMessage
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: s$1.navigation,
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						size: "card",
+						variant: "ghost",
+						accessibilityLabel: "Zoom out",
+						disabled: sending || viewport.zoom <= 1,
+						onPress: () => zoomTo(viewport.zoom / 1.5),
+						children: "-"
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						style: s$1.zoom,
+						accessibilityLabel: `Zoom ${Math.round(viewport.zoom * 100)} percent`,
+						children: [Math.round(viewport.zoom * 100), "%"]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "card",
+						variant: "ghost",
+						accessibilityLabel: "Zoom in",
+						disabled: sending || viewport.zoom >= 4,
+						onPress: () => zoomTo(viewport.zoom * 1.5),
+						children: "+"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "card",
+						variant: "outline",
+						disabled: sending,
+						onPress: () => setViewport((current) => ({
+							...current,
+							zoom: 1,
+							originX: 0,
+							originY: 0
+						})),
+						children: "Fit"
+					}),
+					/* @__PURE__ */ jsx(View, { style: s$1.grow }),
+					/* @__PURE__ */ jsx(Button, {
+						size: "card",
+						variant: "ghost",
+						disabled: sending || !props.canUndo,
+						onPress: props.onUndo,
+						children: "Undo"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "card",
+						variant: "ghost",
+						disabled: sending || !props.canRedo,
+						onPress: props.onRedo,
+						children: "Redo"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: s$1.canvas,
+				onLayout: (event) => {
+					const { width, height } = event.nativeEvent.layout;
+					if (Number.isFinite(width) && Number.isFinite(height)) setArea({
+						width: Math.max(0, width),
+						height: Math.max(0, height)
+					});
+				},
+				children: [width > 0 && height > 0 ? /* @__PURE__ */ jsx(View, {
+					style: {
+						width,
+						height
+					},
+					children: props.captureContent ? props.captureContent(annotation) : annotation
+				}) : null, viewport.zoom > 1 && width > 0 ? /* @__PURE__ */ jsxs(View, {
+					pointerEvents: "none",
+					accessible: false,
+					style: s$1.overview,
+					children: [/* @__PURE__ */ jsx(Image, {
+						source: { uri: body.uri },
+						style: {
+							width: overviewWidth,
+							height: overviewHeight
+						},
+						resizeMode: "contain"
+					}), /* @__PURE__ */ jsx(View, { style: [s$1.overviewWindow, {
+						left: -viewport.originX / (viewport.zoom * width) * overviewWidth,
+						top: -viewport.originY / (viewport.zoom * height) * overviewHeight,
+						width: overviewWidth / viewport.zoom,
+						height: overviewHeight / viewport.zoom
+					}] })]
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: s$1.dock,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						style: s$1.hint,
+						accessibilityLiveRegion: "polite",
+						children: TOOLS.find((item) => item.id === tool)?.hint
+					}),
+					/* @__PURE__ */ jsx(View, {
+						style: s$1.tools,
+						children: TOOLS.map((item) => /* @__PURE__ */ jsx(Button, {
+							size: "card",
+							variant: "ghost",
+							style: [s$1.tool, tool === item.id && s$1.toolSelected],
+							accessibilityLabel: `${item.label} tool`,
+							accessibilityState: { selected: tool === item.id },
+							disabled: sending || item.id !== "move" && !props.onAddMark,
+							onPress: () => {
+								selectionTick();
+								setTool(item.id);
+							},
+							children: /* @__PURE__ */ jsx(Text, {
+								style: [s$1.toolLabel, tool === item.id && s$1.toolLabelSelected],
+								children: item.label
+							})
+						}, item.id))
+					}),
+					sendMessage ? /* @__PURE__ */ jsx(Text, {
+						style: status.state === "failed" ? s$1.failed : s$1.meta,
+						accessibilityLiveRegion: "polite",
+						children: sendMessage
+					}) : null,
+					/* @__PURE__ */ jsxs(View, {
+						style: s$1.summary,
+						children: [/* @__PURE__ */ jsxs(View, {
+							style: s$1.grow,
+							children: [/* @__PURE__ */ jsxs(Text, {
+								style: s$1.title,
+								children: [
+									notes.length,
+									" mark",
+									notes.length === 1 ? "" : "s"
+								]
+							}), /* @__PURE__ */ jsx(Text, {
+								style: s$1.meta,
+								children: "Original stays unchanged"
+							})]
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "card",
+							variant: reviewOpen ? "outline" : "primary",
+							disabled: sending || !notes.length && !draft && !props.requests?.length,
+							onPress: () => setReviewOpen(true),
+							children: "Review & send"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: reviewOpen,
+				onOpenChange: (open) => {
+					if (!sending) setReviewOpen(open);
+				},
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					keep: true,
+					footer: /* @__PURE__ */ jsxs(View, {
+						style: s$1.sheetActions,
+						children: [
+							sendMessage ? /* @__PURE__ */ jsx(Text, {
+								style: status.state === "failed" ? s$1.failed : s$1.meta,
+								accessibilityLiveRegion: "polite",
+								children: sendMessage
+							}) : null,
+							/* @__PURE__ */ jsx(Text, {
+								style: s$1.meta,
+								children: stale ? "Some notes refer to an earlier image. Keep them and reopen that version before sending." : needsExplanation ? "Add an explanation to each mark before sending." : notes.length > SEND_LIMIT ? `Sends the first ${SEND_LIMIT} notes. The rest stay here for the next batch.` : "Sends the annotated image and your explanations together."
+							}),
+							/* @__PURE__ */ jsxs(View, {
+								style: s$1.row,
+								children: [/* @__PURE__ */ jsx(Button, {
+									size: "card",
+									variant: "ghost",
+									style: s$1.grow,
+									disabled: sending,
+									onPress: () => setReviewOpen(false),
+									children: "Keep marking"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "card",
+									variant: "primary",
+									style: s$1.grow,
+									loading: sending,
+									loadingLabel: "Sending feedback",
+									disabled: !batch.length || needsExplanation || stale || !!draft || !props.onSend,
+									onPress: send,
+									children: status.state === "failed" ? "Try again" : `Send ${batch.length} note${batch.length === 1 ? "" : "s"}`
+								})]
+							})
+						]
+					}),
+					children: [/* @__PURE__ */ jsx(SheetHeader, {
+						closeLabel: "Close review",
+						dismissible: !sending,
+						children: /* @__PURE__ */ jsx(SheetTitle, { children: "Review your marks" })
+					}), /* @__PURE__ */ jsxs(SheetBody, { children: [
+						/* @__PURE__ */ jsx(SheetDescription, { children: "Mark first, explain here. Tap a note to find its place." }),
+						draft ? /* @__PURE__ */ jsxs(View, {
+							style: s$1.note,
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									style: s$1.title,
+									children: "Unfinished note"
+								}),
+								/* @__PURE__ */ jsx(Textarea, {
+									rows: 3,
+									maxLength: 2048,
+									accessibilityLabel: "Unfinished note explanation",
+									value: draft.text,
+									disabled: sending,
+									onChangeText: props.onDraftChange
+								}),
+								/* @__PURE__ */ jsxs(View, {
+									style: s$1.row,
+									children: [/* @__PURE__ */ jsx(Button, {
+										size: "card",
+										variant: "danger-outline",
+										disabled: sending,
+										onPress: props.onDraftCancel,
+										children: "Discard draft"
+									}), /* @__PURE__ */ jsx(Button, {
+										size: "card",
+										disabled: sending || !draft.text.trim(),
+										onPress: props.onDraftSave,
+										children: "Keep note"
+									})]
+								})
+							]
+						}) : null,
+						!notes.length && !draft ? /* @__PURE__ */ jsx(Text, {
+							style: s$1.meta,
+							children: "No marks yet. Keep marking whenever you are ready."
+						}) : null,
+						notes.map((note, index) => /* @__PURE__ */ jsxs(View, {
+							style: [s$1.note, selected?.id === note.id && s$1.noteSelected],
+							children: [
+								/* @__PURE__ */ jsxs(Button, {
+									size: "card",
+									variant: "ghost",
+									accessibilityLabel: `Review mark ${index + 1}`,
+									accessibilityState: { selected: selected?.id === note.id },
+									disabled: sending,
+									onPress: () => focus(note),
+									children: [/* @__PURE__ */ jsx(Text, {
+										style: s$1.noteNumber,
+										children: index + 1
+									}), /* @__PURE__ */ jsx(Text, {
+										style: s$1.noteText,
+										children: note.text || "Add an explanation"
+									})]
+								}),
+								note.sourceSha256 !== void 0 && note.sourceSha256 !== props.sourceSha256 ? /* @__PURE__ */ jsx(Text, {
+									style: s$1.meta,
+									children: "Earlier image version"
+								}) : null,
+								selected?.id === note.id ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Textarea, {
+									rows: 3,
+									maxLength: 2048,
+									accessibilityLabel: `Mark ${index + 1} explanation`,
+									placeholder: "What should change here?",
+									value: note.text,
+									disabled: sending,
+									onChangeText: (text) => props.onNoteChange?.(note.id, text)
+								}), /* @__PURE__ */ jsxs(View, {
+									style: s$1.row,
+									children: [/* @__PURE__ */ jsx(Button, {
+										size: "card",
+										variant: "danger-outline",
+										disabled: sending || !props.onDelete,
+										onPress: () => props.onDelete?.(note.id),
+										children: "Remove mark"
+									}), note.points && props.onCrop ? /* @__PURE__ */ jsx(Button, {
+										size: "card",
+										loading: props.cropping,
+										disabled: sending,
+										onPress: () => {
+											setReviewOpen(false);
+											props.onCrop?.();
+										},
+										children: "Preview crop"
+									}) : null]
+								})] }) : null
+							]
+						}, note.id)),
+						props.requests?.map((request, index) => /* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsxs(Text, {
+							style: request.status === "FAILED" ? s$1.failed : s$1.meta,
+							children: [
+								"Request ",
+								index + 1,
+								": ",
+								request.status.toLowerCase()
+							]
+						}), request.error ? /* @__PURE__ */ jsx(Text, {
+							style: s$1.failed,
+							children: request.error
+						}) : null] }, request.id))
+					] })]
+				})
+			})
+		]
+	});
+}
+const s$1 = StyleSheet.create((theme, rt) => ({
+	screen: {
+		flex: 1,
+		backgroundColor: theme.colors.bg,
+		uni__dependencies: [0]
+	},
+	header: {
+		paddingHorizontal: theme.spacing(4),
+		paddingTop: theme.spacing(3),
+		gap: theme.spacing(1),
+		alignItems: "flex-start",
+		uni__dependencies: [0]
+	},
+	title: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.lg,
+		lineHeight: theme.lineHeight.lg,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	meta: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	navigation: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		paddingHorizontal: theme.spacing(2),
+		gap: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	zoom: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		minWidth: 40,
+		textAlign: "center",
+		uni__dependencies: [0]
+	},
+	canvas: {
+		flex: 1,
+		minHeight: 44,
+		alignItems: "center",
+		justifyContent: "center",
+		marginHorizontal: theme.spacing(4),
+		marginBottom: theme.spacing(3),
+		backgroundColor: theme.colors.deep,
+		overflow: "hidden",
+		borderRadius: theme.borderRadius.md,
+		uni__dependencies: [0]
+	},
+	overview: {
+		position: "absolute",
+		right: theme.spacing(2),
+		top: theme.spacing(2),
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		backgroundColor: theme.colors.rail,
+		overflow: "hidden",
+		uni__dependencies: [0]
+	},
+	overviewWindow: {
+		position: "absolute",
+		borderWidth: 2,
+		borderColor: theme.colors.green,
+		uni__dependencies: [0]
+	},
+	dock: {
+		padding: theme.spacing(3),
+		paddingBottom: Math.max(theme.spacing(3), rt.insets.bottom),
+		gap: theme.spacing(3),
+		borderTopWidth: 1,
+		borderTopColor: theme.colors.border,
+		backgroundColor: theme.colors.rail,
+		uni__dependencies: [0, 9]
+	},
+	hint: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		minHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	tools: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	tool: {
+		flexBasis: "22%",
+		flexGrow: 1,
+		minHeight: 48,
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		uni__dependencies: [0]
+	},
+	toolSelected: {
+		borderColor: theme.colors["edge-green"],
+		backgroundColor: theme.colors["tint-green"],
+		uni__dependencies: [0]
+	},
+	toolLabel: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		uni__dependencies: [0]
+	},
+	toolLabelSelected: {
+		color: theme.colors.green,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	summary: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	row: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	grow: { flex: 1 },
+	sheetActions: {
+		gap: theme.spacing(3),
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	note: {
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		borderRadius: theme.borderRadius.md,
+		padding: theme.spacing(2),
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	noteSelected: {
+		borderColor: theme.colors["edge-magenta"],
+		uni__dependencies: [0]
+	},
+	noteNumber: {
+		color: theme.colors.magenta,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	noteText: {
+		flex: 1,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	failed: {
+		color: theme.colors.red,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	}
+}));
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorDocumentView.native.tsx
 const DRAFT_ID = "draft";
 /** One open document on the phone: the content to mark up, its notes, and one way to hand them to the agent. */
@@ -1638,6 +2369,10 @@ function AuthorDocumentView(props) {
 	const [sourceSelection, setSourceSelection] = useState();
 	const sourceKey = `${props.name}\n${props.sourceSha256 ?? ""}`;
 	const selectedRange = body.kind === "text" && sourceSelection?.key === sourceKey ? nativeAuthorTextRange(body.text, sourceSelection) : void 0;
+	if (body.kind === "image" && !props.edit) return /* @__PURE__ */ jsx(AuthorCanvasWorkspace, {
+		...props,
+		body
+	}, sourceKey);
 	const canInspectSource = body.kind === "text" && props.nativeContent === void 0;
 	const markdown = body.kind === "text" && /\.(?:md|markdown)$/iu.test(props.name);
 	const rangeLabel = (note) => {
@@ -2386,7 +3121,21 @@ function AuthorDocumentPanel({ path, ...props }) {
 	const setDraft = (value) => setForm(key, value);
 	const [storageState, setStorageState] = useState();
 	const [selectedId, setSelectedId] = useState();
-	const [status, setStatus] = useState({ state: "idle" });
+	const [sendState, setSendState] = useState({
+		key,
+		status: { state: "idle" }
+	});
+	const status = sendState.key === key ? sendState.status : { state: "idle" };
+	const setStatus = (status) => setSendState({
+		key,
+		status
+	});
+	const history = useRef({
+		key,
+		past: [],
+		future: []
+	});
+	const noteSequence = useRef(0);
 	const requests = useSyncExternalStore(subscribeRequests, () => nativeAuthorRequests.select(nativeAuthorRequests.store.state, sessionId));
 	const sending = useRef(false);
 	const [mediaPage, setMediaPage] = useState(1);
@@ -2411,6 +3160,41 @@ function AuthorDocumentPanel({ path, ...props }) {
 		};
 		else if (captureRef.current?.key === key) captureRef.current = void 0;
 	}, [key]);
+	const changeNotes = (change, group) => {
+		if (sending.current === "submitting") return;
+		const current = notesStore.store.state[key] ?? EMPTY;
+		const next = change(current);
+		if (next === current) return;
+		const previous = history.current;
+		const valid = previous.key === key && previous.present === current;
+		history.current = {
+			key,
+			present: next,
+			group,
+			future: [],
+			past: valid && group !== void 0 && previous.group === group ? previous.past : [...valid ? previous.past : [], current].slice(-50)
+		};
+		setNotes(key, () => next);
+		setStatus({ state: "idle" });
+	};
+	const travelHistory = (direction) => {
+		const timeline = history.current;
+		const current = notesStore.store.state[key] ?? EMPTY;
+		if (sending.current || timeline.key !== key || timeline.present !== current) return;
+		const target = timeline[direction].at(-1);
+		if (!target) return;
+		const opposite = direction === "past" ? "future" : "past";
+		history.current = {
+			...timeline,
+			present: target,
+			group: void 0,
+			[direction]: timeline[direction].slice(0, -1),
+			[opposite]: [...timeline[opposite], current].slice(-50)
+		};
+		setNotes(key, () => target);
+		setSelectedId(void 0);
+		setStatus({ state: "idle" });
+	};
 	useEffect(() => {
 		if (sessionId === null) return;
 		const controller = new AbortController();
@@ -2591,17 +3375,21 @@ function AuthorDocumentPanel({ path, ...props }) {
 	const visibleNotes = nativeAuthorVisibleNotes(notes, current.file.kind, mediaPage, videoFrame?.timeSeconds);
 	const send = async () => {
 		if (sending.current) return;
-		sending.current = true;
-		const sent = visibleNotes.slice(0, 16);
+		sending.current = "capturing";
+		const sourceNotes = notesStore.store.state[key] ?? EMPTY;
+		const sent = nativeAuthorVisibleNotes(sourceNotes, current.file.kind, mediaPage, videoFrame?.timeSeconds).slice(0, 16);
 		const capturedAt = Date.now();
 		const captureId = `native-author-${String(capturedAt)}-${sent[0]?.id ?? "notes"}`;
 		let recorded = false;
 		try {
 			if (!sent.length) throw new Error("Open a marked page or capture its video frame before sending notes.");
+			if (sent.some((note) => !note.text.trim())) throw new Error("Add an explanation to each mark before sending.");
 			if (!props.submitCapture) throw new Error("This host cannot confirm feedback delivery. Your notes have not been sent.");
 			const provider = captureRef.current;
 			if (provider?.key !== key) throw new Error("The document is not ready to capture. Try again when it has finished opening.");
 			const { capture, viewport } = await captureNativeAuthorViewport(provider.capture, () => geometry.current?.key === key ? geometry.current.viewport : void 0);
+			if ((notesStore.store.state[key] ?? EMPTY) !== sourceNotes) throw new Error("The notes changed during capture. Keep them still and try again.");
+			sending.current = "submitting";
 			setStatus({ state: "sending" });
 			if (capture.bytes.byteLength > 2097152 || Math.max(capture.width, capture.height) > 1600) throw new Error("This capture exceeds the Author evidence budget.");
 			const { file, body } = current;
@@ -2624,13 +3412,18 @@ function AuthorDocumentPanel({ path, ...props }) {
 				mimeType: capture.mimeType,
 				context: authorCaptureContext(packet)
 			});
+			if (history.current.key === key) history.current = {
+				key,
+				past: [],
+				future: []
+			};
 			setNotes(key, (notes) => notes.filter((note) => !sent.includes(note)));
 			setSelectedId(void 0);
-			setStatus({ state: "sent" });
 			await persistNativeDraft(key, path, props.nativeAuthor).catch((error) => setStorageState({
 				key,
 				message: `Sent, but couldn't update the stored draft: ${String(error)} It may reappear after restart.`
 			}));
+			setStatus({ state: "sent" });
 		} catch (error) {
 			if (recorded) failNativeAuthorRequest(sessionId, captureId, error);
 			setStatus({
@@ -2904,17 +3697,56 @@ function AuthorDocumentPanel({ path, ...props }) {
 				points
 			});
 		},
+		onAddMark: current.file.kind === "image" ? (mark) => {
+			if (sending.current === "submitting") return;
+			if ((notesStore.store.state[key]?.length ?? 0) >= 100) {
+				setStorageState({
+					key,
+					message: "This draft has 100 marks. Send or remove some before adding more."
+				});
+				return;
+			}
+			try {
+				noteSequence.current += 1;
+				const note = parseNativeAuthorDraft({
+					version: 1,
+					notes: [{
+						...mark,
+						id: `note-${Date.now()}-${noteSequence.current}`,
+						sourceSha256: current.file.sourceSha256
+					}]
+				}).notes[0];
+				changeNotes((notes) => [...notes, note]);
+			} catch (error) {
+				setStorageState({
+					key,
+					message: `Couldn't add this mark: ${error instanceof Error ? error.message : String(error)} Your other notes are still here.`
+				});
+			}
+		} : void 0,
+		onNoteChange: (id, text) => {
+			if (text.length > 2048) return;
+			changeNotes((notes) => notes.map((note) => note.id === id ? {
+				...note,
+				text
+			} : note), id);
+		},
+		canUndo: history.current.key === key && history.current.present === notes && history.current.past.length > 0,
+		canRedo: history.current.key === key && history.current.present === notes && history.current.future.length > 0,
+		onUndo: () => travelHistory("past"),
+		onRedo: () => travelHistory("future"),
 		onSelect: (id) => {
+			history.current.group = void 0;
 			const note = notes.find((note) => note.id === id);
 			if (note?.page !== void 0) setMediaPage(note.page);
 			if (note?.timeSeconds !== void 0) {
 				setVideoFrame(void 0);
 				setSeekSeconds(note.timeSeconds);
 			}
-			setSelectedId((value) => value === id ? void 0 : id);
+			setSelectedId((value) => current.file.kind === "image" ? id : value === id ? void 0 : id);
 		},
 		onDelete: (id) => {
-			setNotes(key, (notes) => notes.filter((note) => note.id !== id));
+			changeNotes((notes) => notes.filter((note) => note.id !== id));
 			if (selectedId === id) setSelectedId(void 0);
 		},
 		onDraftChange: (text) => {
@@ -2926,9 +3758,18 @@ function AuthorDocumentPanel({ path, ...props }) {
 		onDraftCancel: () => setDraft(void 0),
 		onDraftSave: () => {
 			if (draft === void 0 || draft.text.trim() === "") return;
-			setNotes(key, (notes) => [...notes, {
-				id: `note-${String(Date.now())}-${String(notes.length)}`,
-				...draft
+			if (sending.current) return;
+			if (notes.length >= 100) {
+				setStorageState({
+					key,
+					message: "This draft has 100 marks. Send or remove some before adding more."
+				});
+				return;
+			}
+			noteSequence.current += 1;
+			changeNotes((notes) => [...notes, {
+				...draft,
+				id: `note-${Date.now()}-${noteSequence.current}`
 			}]);
 			setDraft(void 0);
 			if (status.state !== "sending") setStatus({ state: "idle" });
@@ -2952,7 +3793,7 @@ const authorNativeOpenSourceAction = {
 		return {
 			id: tabId(sessionId, valid),
 			label: fileName(valid),
-			retainComposer: true,
+			retainComposer: !authorNativeIsImage(valid),
 			panel: (props) => {
 				if (/\.stories\.(?:jsx?|tsx?)$/iu.test(valid)) {
 					const source = {