@agimon-ai/po-author 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/extensions/web.mjs

@@ -1,13 +1,16 @@
 import { apiResponse, createApiClient, defineApiRoutes, defineChannelFile, defineDockFace, defineFileLinks, defineFill, defineGlobalStore, defineLeaderBinding, defineMinorModeFile, defineSessionStore, defineSlotFile, defineToolRenderer, defineWebLifecycle, defineWebPlugin, sessionApiAddress, toolResultTextLines } from "@agimon-ai/po-core/web";
 import { Store } from "@tanstack/store";
 import { useStore } from "@tanstack/react-store";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, CodeEditor, Markdown, MediaPreview, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, MessageLines, collapseLines, toolTone } from "@agimon-ai/po-web-components";
+import { Button, CodeEditor, Dot, FileIcon, Markdown, MediaPreview, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, MessageLines, SparklesIcon, StatusBadge, TrashIcon, collapseLines, toolTone } from "@agimon-ai/po-web-components";
 import { sealedTransport } from "@agimon-ai/po-web-security/browser";
 //#region src/types/webAuthor.ts
 const authorChannelType = "author_webmcp";
 //#endregion
+//#region src/types/author.ts
+const AUTHOR_MODE_ID = "author";
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_lib/authorRuntime.ts
 const AUTHOR_RUNTIME_BINDING_IDS = {
 	text: "author.viewport.text",
@@ -157,7 +160,9 @@ const documentProfiles = (profiles) => profiles.map((profile) => ({
 var AuthorBrowserBridge = class {
 	#host;
 	#canvases = /* @__PURE__ */ new Map();
+	#parked = /* @__PURE__ */ new Map();
 	#opening = /* @__PURE__ */ new Map();
+	#modeWatches = /* @__PURE__ */ new Map();
 	#generation = 0;
 	#disposed = false;
 	#releaseConnected;
@@ -173,27 +178,61 @@ var AuthorBrowserBridge = class {
 	}
 	async open(sessionId, alias, profiles) {
 		if (this.#disposed) throw new Error("Author browser bridge is disposed");
+		this.#watch(sessionId);
 		const key = canvasKey(sessionId, alias);
 		if (this.#canvases.has(key)) return;
+		const parkedCanvas = this.#parked.get(key);
+		if (parkedCanvas !== void 0) {
+			if (this.#agentEnabled(sessionId)) await this.#openLive(parkedCanvas);
+			return;
+		}
+		const pending = this.#opening.get(key);
+		if (pending !== void 0) return await pending.promise;
+		const parked = {
+			sessionId,
+			alias,
+			profiles: documentProfiles(profiles)
+		};
+		if (!this.#agentEnabled(sessionId)) {
+			this.#parked.set(key, parked);
+			return;
+		}
+		await this.#openLive(parked);
+	}
+	async #openLive(parked) {
+		const { sessionId, alias, profiles } = parked;
+		const key = canvasKey(sessionId, alias);
+		if (this.#disposed || this.#canvases.has(key)) return;
 		const pending = this.#opening.get(key);
 		if (pending !== void 0) return await pending.promise;
+		if (!this.#agentEnabled(sessionId)) {
+			this.#parked.set(key, parked);
+			return;
+		}
+		this.#parked.delete(key);
 		const runtime = new AuthorRuntime(this.#host);
 		const generation = ++this.#generation;
-		const base = documentProfiles(profiles);
 		let opening;
 		opening = (async () => {
-			const release = await runtime.replaceProfiles(base);
-			if (this.#disposed || this.#canvases.has(key) || this.#opening.get(key)?.promise !== opening) {
+			let release;
+			try {
+				release = await runtime.replaceProfiles(profiles);
+			} catch (error) {
+				if (this.#disposed || !this.#agentEnabled(sessionId) || this.#opening.get(key)?.promise !== opening) return;
+				throw error;
+			}
+			if (this.#disposed || !this.#agentEnabled(sessionId) || this.#canvases.has(key) || this.#opening.get(key)?.promise !== opening) {
 				release();
 				runtime.dispose();
+				if (!this.#disposed && !this.#agentEnabled(sessionId)) this.#parked.set(key, parked);
 				return;
 			}
 			const canvas = {
 				sessionId,
 				alias,
 				generation,
-				profiles: base,
-				documentProfiles: base,
+				profiles,
+				documentProfiles: profiles,
 				runtime,
 				release,
 				pending: /* @__PURE__ */ new Map(),
@@ -206,7 +245,8 @@ var AuthorBrowserBridge = class {
 		})();
 		this.#opening.set(key, {
 			promise: opening,
-			runtime
+			runtime,
+			parked
 		});
 		try {
 			await opening;
@@ -216,6 +256,7 @@ var AuthorBrowserBridge = class {
 	}
 	async focus(sessionId, alias, profiles) {
 		await this.open(sessionId, alias, profiles);
+		if (!this.#agentEnabled(sessionId)) return () => void 0;
 		const canvas = this.#canvases.get(canvasKey(sessionId, alias));
 		if (canvas === void 0) return () => void 0;
 		canvas.visible = true;
@@ -229,21 +270,28 @@ var AuthorBrowserBridge = class {
 		};
 	}
 	drop(sessionId, alias) {
-		for (const [key, entry] of this.#opening) if (key.startsWith(`${sessionId}\n`) && (alias === void 0 || key === canvasKey(sessionId, alias))) {
+		for (const [key, entry] of this.#opening) {
+			if (entry.parked.sessionId !== sessionId || alias !== void 0 && entry.parked.alias !== alias) continue;
 			this.#opening.delete(key);
 			entry.runtime.dispose();
 		}
+		for (const [key, parked] of this.#parked) {
+			if (parked.sessionId !== sessionId || alias !== void 0 && parked.alias !== alias) continue;
+			this.#parked.delete(key);
+		}
 		for (const canvas of this.#canvases.values()) {
 			if (canvas.sessionId !== sessionId || alias !== void 0 && canvas.alias !== alias) continue;
-			this.#canvases.delete(canvasKey(sessionId, canvas.alias));
-			this.#release(canvas);
-			canvas.runtime.dispose();
+			this.#dropLive(canvas);
 		}
 	}
 	apply(sessionId, message) {
-		if (message.alias === void 0) return;
+		if (!this.#agentEnabled(sessionId) || message.alias === void 0) return;
 		const canvas = this.#canvases.get(canvasKey(sessionId, message.alias));
-		if (canvas === void 0 || message.kind === "rejected") return;
+		if (canvas === void 0) return;
+		if (message.kind === "rejected") {
+			console.warn(`Author canvas '${canvas.alias}' was rejected: ${message.reason}`);
+			return;
+		}
 		if (message.generation !== canvas.generation || message.ownerToken !== canvas.ownerToken && canvas.ownerToken !== void 0) return;
 		if (message.kind === "accepted") {
 			canvas.ownerToken = message.ownerToken;
@@ -310,17 +358,54 @@ var AuthorBrowserBridge = class {
 		if (this.#disposed) return;
 		this.#disposed = true;
 		this.#releaseConnected();
-		for (const canvas of this.#canvases.values()) {
-			this.#release(canvas);
-			canvas.runtime.dispose();
-		}
-		this.#canvases.clear();
+		for (const release of this.#modeWatches.values()) release();
+		this.#modeWatches.clear();
+		for (const canvas of this.#canvases.values()) this.#dropLive(canvas);
+		this.#parked.clear();
 		for (const entry of this.#opening.values()) entry.runtime.dispose();
 		this.#opening.clear();
 	}
+	#agentEnabled(sessionId) {
+		return this.#host.minorModes?.active(sessionId).includes(AUTHOR_MODE_ID) === true;
+	}
+	#watch(sessionId) {
+		if (this.#modeWatches.has(sessionId) || this.#host.minorModes === void 0) return;
+		const release = this.#host.minorModes.subscribe(sessionId, () => this.#modeChanged(sessionId));
+		this.#modeWatches.set(sessionId, release);
+	}
+	#modeChanged(sessionId) {
+		if (this.#disposed) return;
+		if (this.#agentEnabled(sessionId)) {
+			for (const parked of this.#parked.values()) {
+				if (parked.sessionId !== sessionId) continue;
+				this.#openLive(parked).catch((error) => console.warn(`Author canvas '${parked.alias}' could not enable browser tools: ${error instanceof Error ? error.message : String(error)}`));
+			}
+			return;
+		}
+		for (const [key, entry] of this.#opening) {
+			if (entry.parked.sessionId !== sessionId) continue;
+			this.#opening.delete(key);
+			this.#parked.set(key, entry.parked);
+			entry.runtime.dispose();
+		}
+		for (const canvas of this.#canvases.values()) {
+			if (canvas.sessionId !== sessionId) continue;
+			this.#parked.set(canvasKey(canvas.sessionId, canvas.alias), {
+				sessionId: canvas.sessionId,
+				alias: canvas.alias,
+				profiles: canvas.documentProfiles
+			});
+			this.#dropLive(canvas);
+		}
+	}
+	#dropLive(canvas) {
+		this.#canvases.delete(canvasKey(canvas.sessionId, canvas.alias));
+		this.#release(canvas);
+		canvas.runtime.dispose();
+	}
 	async #replace(canvas, profiles) {
 		const key = canvasKey(canvas.sessionId, canvas.alias);
-		if (this.#disposed || this.#canvases.get(key) !== canvas) return;
+		if (this.#disposed || !this.#agentEnabled(canvas.sessionId) || this.#canvases.get(key) !== canvas) return;
 		this.#release(canvas);
 		const generation = canvas.generation;
 		const replacementId = ++canvas.replacementId;
@@ -340,7 +425,7 @@ var AuthorBrowserBridge = class {
 		this.#register(canvas);
 	}
 	#register(canvas) {
-		if (this.#canvases.get(canvasKey(canvas.sessionId, canvas.alias)) === canvas) this.#send(canvas, {
+		if (this.#agentEnabled(canvas.sessionId) && this.#canvases.get(canvasKey(canvas.sessionId, canvas.alias)) === canvas) this.#send(canvas, {
 			kind: "register",
 			alias: canvas.alias,
 			generation: canvas.generation
@@ -384,7 +469,7 @@ var AuthorBrowserBridge = class {
 				sessionId: canvas.sessionId,
 				message: payload
 			}
-		}).catch(() => void 0);
+		}).catch((error) => console.warn(`Author canvas '${canvas.alias}' could not send '${payload.kind}': ${error instanceof Error ? error.message : String(error)}`));
 	}
 	#current(canvas, requestId, controller) {
 		return this.#canvases.get(canvasKey(canvas.sessionId, canvas.alias)) === canvas && canvas.pending.get(requestId) === controller;
@@ -526,7 +611,8 @@ function resolveAuthorGridCell(sessionId, cell, expectedGeometryToken) {
 const TERMINAL_REQUEST_STATUSES = /* @__PURE__ */ new Set([
 	"COMPLETE",
 	"FAILED",
-	"CANCELLED"
+	"CANCELLED",
+	"UNTRACKED"
 ]);
 const EMPTY_SESSION = {
 	generation: 0,
@@ -1133,9 +1219,12 @@ var author_webmcp_web_default = defineChannelFile({
 	}
 });
 //#endregion
+//#region src/constants/author.ts
+const AUTHOR_FILE_TAB_PREFIX = "author-file-";
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorGridOverlay.tsx
 function autonomousVoiceGridVisible(statuses) {
-	return statuses["doom-voice"]?.trimStart().startsWith("voice auto:") === true;
+	return statuses["po-voice"]?.trimStart().startsWith("voice auto:") === true;
 }
 function AuthorGridOverlay({ sessionId, document, visible }) {
 	const host = useRef(null);
@@ -1193,9 +1282,9 @@ function AuthorGridOverlay({ sessionId, document, visible }) {
 			const column = index % 8;
 			const row = Math.floor(index / 8);
 			return /* @__PURE__ */ jsx("div", {
-				className: "relative border border-doom-red/25",
+				className: "relative border border-po-red/25",
 				children: /* @__PURE__ */ jsxs("span", {
-					className: "absolute left-1 top-0.5 rounded bg-doom-deep/80 px-1 text-2xs font-semibold text-doom-red",
+					className: "absolute left-1 top-0.5 rounded bg-po-deep/80 px-1 text-2xs font-semibold text-po-red",
 					children: [AUTHOR_GRID_COLUMNS[column], row + 1]
 				})
 			}, index);
@@ -1308,7 +1397,8 @@ function createAuthorCapturePacket(captureId, capturedAt, document, regions, ali
 			kind: document.kind,
 			revision: document.version,
 			...document.sourceSha256 === void 0 ? {} : { sourceSha256: document.sourceSha256 },
-			...document.storyPreview === void 0 ? {} : { storyPreview: structuredClone(document.storyPreview) }
+			...document.storyPreview === void 0 ? {} : { storyPreview: structuredClone(document.storyPreview) },
+			...document.imageArtifact === void 0 ? {} : { imageArtifact: { ...document.imageArtifact } }
 		},
 		regions: regions.map((region, index) => {
 			if (region.documentPath !== document.path || region.revision !== document.version || region.sourceSha256 !== document.sourceSha256) throw new Error(`Region ${String(index + 1)} is stale for the focused document.`);
@@ -1378,7 +1468,14 @@ function authorCaptureContext(packet) {
 	const metadata = JSON.stringify(packet);
 	if (bytes(metadata) > 65536) throw new Error("Author capture packet exceeds 64 KiB.");
 	const annotations = packet.regions.map((region) => `(${String(region.ordinal)}) ${region.comment} [${anchorLocation(region.anchor)}]${region.quote ? `\nQuoted text: ${region.quote}` : ""}`).join("\n\n");
-	const provenance = storyPreviewProvenance(packet);
+	const artifact = packet.document.imageArtifact;
+	const provenance = artifact === void 0 ? storyPreviewProvenance(packet) : [
+		"Generated image feedback: preserve the original image; generate a new refinement only when requested.",
+		`Original artifact: ${artifact.id} (session ${artifact.sessionId})`,
+		`Original canonical path: ${artifact.originalPath}`,
+		`Original SHA-256: ${artifact.sourceSha256}`,
+		`For imagegen refinement use referenced_image_paths: ${JSON.stringify([artifact.originalPath])}`
+	].join("\n");
 	const content = provenance === void 0 ? annotations : `${provenance}\n\nAnnotations:\n${annotations}`;
 	return {
 		kind: "author-capture",
@@ -1562,11 +1659,11 @@ function AuthorRegionDrafts({ sessionId, path, drafts }) {
 		children: [
 			drafts.candidate ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs("h3", {
-					className: "text-base font-semibold text-doom-text",
+					className: "text-base font-semibold text-po-hi",
 					children: ["Current ", candidateKind]
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "text-base text-doom-dim sm:text-sm",
+					className: "text-base text-po-dim sm:text-sm",
 					children: [
 						"Add feedback to keep this ",
 						candidateKind,
@@ -1574,7 +1671,7 @@ function AuthorRegionDrafts({ sessionId, path, drafts }) {
 					]
 				}),
 				drafts.candidate.anchor.kind === "video-time-rect" || drafts.candidate.anchor.kind === "video-time-point" ? /* @__PURE__ */ jsxs("p", {
-					className: "text-base text-doom-dim sm:text-sm",
+					className: "text-base text-po-dim sm:text-sm",
 					children: [
 						"Frame at ",
 						drafts.candidate.anchor.timeSeconds.toFixed(3),
@@ -1587,32 +1684,34 @@ function AuthorRegionDrafts({ sessionId, path, drafts }) {
 					onChange: (event) => setAuthorCandidateText(sessionId, path, event.target.value),
 					placeholder: "What should change here?",
 					rows: 3,
-					className: "min-h-11 w-full resize-y rounded border border-doom-border bg-doom-deep p-2 text-lg leading-normal text-doom-text focus:border-doom-red focus:outline-none sm:text-sm"
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					className: "min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
-					variant: "outline",
-					onClick: add,
-					disabled: !drafts.candidate || !drafts.candidateText.trim() || drafts.annotations.length >= 16,
-					children: "add annotation"
+					className: "min-h-24 w-full resize-y rounded-md border border-po-border-soft bg-po-panel p-3 text-lg leading-normal text-po-text placeholder:text-po-dim focus:border-po-green focus:outline-none sm:text-base"
 				}),
-				/* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					className: "min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
-					onClick: () => {
-						setAuthorRegionCandidate(sessionId, path, void 0);
-						setAuthorCandidateText(sessionId, path, "");
-						setError(void 0);
-					},
-					children: "Discard annotation"
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						className: "min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
+						variant: "outline",
+						onClick: add,
+						disabled: !drafts.candidate || !drafts.candidateText.trim() || drafts.annotations.length >= 16,
+						children: "add annotation"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
+						onClick: () => {
+							setAuthorRegionCandidate(sessionId, path, void 0);
+							setAuthorCandidateText(sessionId, path, "");
+							setError(void 0);
+						},
+						children: "Discard annotation"
+					})]
 				})
 			] }) : null,
 			error ? /* @__PURE__ */ jsx("output", {
-				className: "block text-base text-doom-red",
+				className: "block text-base text-po-red",
 				children: error
 			}) : null,
 			drafts.annotations.length > 0 ? /* @__PURE__ */ jsxs("h3", {
-				className: "text-base font-semibold text-doom-text",
+				className: "text-sm text-po-dim",
 				children: [
 					"Unsent annotations (",
 					drafts.annotations.length,
@@ -1622,16 +1721,31 @@ function AuthorRegionDrafts({ sessionId, path, drafts }) {
 			/* @__PURE__ */ jsx("ol", {
 				className: "space-y-2",
 				children: drafts.annotations.map((region, index) => /* @__PURE__ */ jsxs("li", {
-					className: "rounded border border-doom-border bg-doom-panel p-2 text-base leading-normal text-doom-text sm:text-sm",
+					className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-md border border-po-border-soft bg-po-panel py-1 pl-3 pr-1 text-base leading-normal text-po-text",
 					children: [
-						/* @__PURE__ */ jsxs("span", { children: [
-							"(",
-							index + 1,
-							") ",
-							region.mode === "point" ? "Point" : "Region",
-							": ",
-							region.comment
-						] }),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full bg-po-magenta px-1 text-sm font-semibold text-po-rail",
+							children: index + 1
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 flex-1 break-words py-1",
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [
+										"(",
+										index + 1,
+										") "
+									]
+								}),
+								region.comment,
+								/* @__PURE__ */ jsx("span", {
+									className: "block text-sm text-po-dim",
+									children: region.mode === "point" ? "Point" : "Region"
+								})
+							]
+						}),
 						region.anchor.kind === "video-time-rect" || region.anchor.kind === "video-time-point" ? /* @__PURE__ */ jsxs(Button, {
 							variant: "outline",
 							className: "min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
@@ -1650,7 +1764,10 @@ function AuthorRegionDrafts({ sessionId, path, drafts }) {
 							variant: "ghost",
 							"aria-label": `Remove annotation ${index + 1}`,
 							onClick: () => removeAuthorRegion(sessionId, path, region.id),
-							children: "remove"
+							children: /* @__PURE__ */ jsx(TrashIcon, {
+								"aria-hidden": "true",
+								className: "size-4"
+							})
 						})
 					]
 				}, region.id))
@@ -1664,7 +1781,7 @@ function AuthorFeedbackControls({ sessionId, document, drafts, submitCapture })
 	const [status, setStatus] = useState();
 	const [capturing, setCapturing] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
+		className: "space-y-3",
 		children: [
 			/* @__PURE__ */ jsx(AuthorRegionDrafts, {
 				sessionId,
@@ -1672,8 +1789,9 @@ function AuthorFeedbackControls({ sessionId, document, drafts, submitCapture })
 				drafts
 			}),
 			drafts.annotations.length > 0 ? /* @__PURE__ */ jsx(Button, {
-				className: "min-h-11 min-w-11 w-full text-base [@media(pointer:fine)]:min-h-8 sm:text-sm",
-				variant: "outline",
+				className: "min-h-11 min-w-11 w-full text-base",
+				size: "lg",
+				variant: "primary",
 				"data-testid": "author-attach-capture",
 				disabled: capturing || drafts.candidate !== void 0 || submitCapture === void 0,
 				onClick: async () => {
@@ -1696,11 +1814,11 @@ function AuthorFeedbackControls({ sessionId, document, drafts, submitCapture })
 				children: capturing ? "Submitting…" : `Submit ${drafts.annotations.length} annotation${drafts.annotations.length === 1 ? "" : "s"}`
 			}) : null,
 			submitCapture === void 0 ? /* @__PURE__ */ jsx("output", {
-				className: "text-sm text-doom-red",
+				className: "text-sm text-po-red",
 				children: "Submission unavailable. Reload to update the app."
 			}) : null,
 			status ? /* @__PURE__ */ jsx("output", {
-				className: "block text-sm text-doom-dim",
+				className: "block text-sm text-po-dim",
 				children: status
 			}) : null
 		]
@@ -1714,15 +1832,26 @@ const STATUS_LABELS = {
 	CHANGED: "Change ready",
 	COMPLETE: "Request completed",
 	FAILED: "Request failed",
-	CANCELLED: "Request cancelled"
+	CANCELLED: "Request cancelled",
+	UNTRACKED: "Sent, not tracked"
 };
 const STATUS_STYLES = {
-	REQUESTED: "border-doom-yellow/35 bg-doom-yellow/5 text-doom-yellow",
-	CHANGING: "border-doom-magenta/45 bg-doom-magenta/10 text-doom-yellow",
-	CHANGED: "border-doom-cyan/40 bg-doom-cyan/5 text-doom-cyan",
-	COMPLETE: "border-doom-green/40 bg-doom-green/5 text-doom-green",
-	FAILED: "border-doom-red/45 bg-doom-red/10 text-doom-red",
-	CANCELLED: "border-doom-border bg-doom-panel text-doom-dim"
+	REQUESTED: "border-po-border-soft bg-po-bg text-po-dim",
+	CHANGING: "border-po-edge-green bg-po-tint-green text-po-green",
+	CHANGED: "border-po-edge-green bg-po-tint-green text-po-green",
+	COMPLETE: "border-po-edge-green bg-po-tint-green text-po-green",
+	FAILED: "border-po-edge-red bg-po-tint-red text-po-red",
+	CANCELLED: "border-po-border-soft bg-po-bg text-po-dim",
+	UNTRACKED: "border-po-border-soft bg-po-bg text-po-dim"
+};
+const STATUS_TONES = {
+	REQUESTED: "neutral",
+	CHANGING: "ok",
+	CHANGED: "ok",
+	COMPLETE: "ok",
+	FAILED: "error",
+	CANCELLED: "neutral",
+	UNTRACKED: "neutral"
 };
 function requestInstruction(requestText) {
 	const referencedContext = requestText.search(/(?:^|\s+)Referenced context "/u);
@@ -1755,38 +1884,49 @@ function progressLabel(request) {
 	if (request.status === "COMPLETE") return "Agent finished processing this request";
 	if (request.status === "FAILED") return "Stopped with an error";
 	if (request.status === "CANCELLED") return "Stopped before completion";
+	if (request.status === "UNTRACKED") return "Sent to the agent · see its session for the outcome";
 	return `${total} annotation${total === 1 ? "" : "s"} queued`;
 }
 function RequestRecord({ request, prominent = false }) {
 	const instruction = requestInstruction(request.requestText);
 	return /* @__PURE__ */ jsxs("article", {
 		"data-testid": prominent ? "author-active-request" : void 0,
-		className: "space-y-3",
+		className: "space-y-3 rounded-md border border-po-border-soft bg-po-panel p-3",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "border-b border-doom-border-soft pb-3",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-lg font-semibold text-doom-hi",
-					children: "Document context"
-				}), /* @__PURE__ */ jsxs("p", {
-					className: "mt-2 flex items-center gap-2 truncate text-base font-semibold text-doom-hi",
-					children: [/* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: "text-doom-magenta",
-						children: "↗"
-					}), documentName(request.documentPath)]
+				className: "flex gap-3 border-b border-po-border-soft pb-3",
+				children: [/* @__PURE__ */ jsx(SparklesIcon, {
+					"aria-hidden": "true",
+					className: "mt-1 size-4 shrink-0 text-po-green"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-lg font-semibold text-po-hi",
+							children: "Document context"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-1 truncate text-base font-semibold text-po-hi",
+							children: documentName(request.documentPath)
+						}),
+						/* @__PURE__ */ jsx(StatusBadge, {
+							tone: STATUS_TONES[request.status],
+							className: "mt-2 whitespace-normal",
+							children: progressLabel(request)
+						})
+					]
 				})]
 			}),
 			/* @__PURE__ */ jsx("section", {
 				"aria-label": "Request locations",
-				className: "rounded border border-doom-border bg-doom-panel p-3",
+				className: "rounded-md border border-po-border-soft bg-po-bg p-3",
 				children: /* @__PURE__ */ jsx("ol", {
 					className: "space-y-3",
 					children: request.regions.map((region, index) => /* @__PURE__ */ jsxs("li", {
 						className: "space-y-2",
 						children: [
 							/* @__PURE__ */ jsxs("p", {
-								className: "text-sm font-medium text-doom-yellow",
+								className: "text-sm font-medium text-po-magenta",
 								children: [
 									"Where · ",
 									request.regions.length > 1 ? `${index + 1} · ` : "",
@@ -1798,7 +1938,7 @@ function RequestRecord({ request, prominent = false }) {
 								]
 							}),
 							region.quote ? /* @__PURE__ */ jsxs("blockquote", {
-								className: "line-clamp-3 text-base italic leading-relaxed text-doom-text",
+								className: "line-clamp-3 text-base italic leading-relaxed text-po-text",
 								children: [
 									"“",
 									region.quote,
@@ -1806,7 +1946,7 @@ function RequestRecord({ request, prominent = false }) {
 								]
 							}) : null,
 							/* @__PURE__ */ jsx("p", {
-								className: "text-base leading-relaxed text-doom-dim",
+								className: "text-base leading-relaxed text-po-dim",
 								children: region.comment
 							})
 						]
@@ -1815,7 +1955,7 @@ function RequestRecord({ request, prominent = false }) {
 			}),
 			/* @__PURE__ */ jsxs("section", {
 				"data-testid": prominent ? "author-operation-card" : void 0,
-				className: `rounded border p-3 ${STATUS_STYLES[request.status]}`,
+				className: `rounded-md border p-3 ${STATUS_STYLES[request.status]}`,
 				children: [
 					/* @__PURE__ */ jsxs("p", {
 						className: "text-sm font-semibold",
@@ -1826,15 +1966,15 @@ function RequestRecord({ request, prominent = false }) {
 						]
 					}),
 					/* @__PURE__ */ jsx("p", {
-						className: "mt-2 text-base leading-relaxed text-doom-hi",
+						className: "mt-2 text-base leading-relaxed text-po-hi",
 						children: request.currentOperation || STATUS_LABELS[request.status]
 					}),
 					request.error ? /* @__PURE__ */ jsx("p", {
-						className: "mt-2 text-sm leading-relaxed text-doom-red",
+						className: "mt-2 text-sm leading-relaxed text-po-red",
 						children: request.error
 					}) : null,
 					request.before !== void 0 || request.after !== void 0 ? /* @__PURE__ */ jsxs("details", {
-						className: "mt-2 border-t border-current/20 pt-2 text-base text-doom-dim",
+						className: "mt-2 border-t border-current/20 pt-2 text-base text-po-dim",
 						children: [
 							/* @__PURE__ */ jsx("summary", {
 								className: "cursor-pointer select-none",
@@ -1855,19 +1995,15 @@ function RequestRecord({ request, prominent = false }) {
 			/* @__PURE__ */ jsxs("section", {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-lg font-semibold text-doom-hi",
+					className: "text-base font-semibold text-po-hi",
 					children: "Request · how to change"
 				}), /* @__PURE__ */ jsx("div", {
-					className: "rounded border border-doom-border bg-doom-deep p-3",
+					className: "rounded-md border border-po-border-soft bg-po-bg p-3",
 					children: /* @__PURE__ */ jsx("p", {
-						className: "whitespace-pre-wrap text-base leading-relaxed text-doom-text",
+						className: "whitespace-pre-wrap text-base leading-relaxed text-po-text",
 						children: instruction || "No additional instruction."
 					})
 				})]
-			}),
-			/* @__PURE__ */ jsx("footer", {
-				className: "text-sm text-doom-dim",
-				children: progressLabel(request)
 			})
 		]
 	});
@@ -1880,21 +2016,21 @@ function AuthorRequestLog({ requests }) {
 		className: "space-y-3",
 		children: [
 			/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold text-doom-hi",
-				children: "Authoring"
+				className: "text-lg font-semibold text-po-hi",
+				children: "Author"
 			}),
 			latest === void 0 ? /* @__PURE__ */ jsx("p", {
-				className: "text-sm leading-relaxed text-doom-dim",
+				className: "text-sm leading-relaxed text-po-dim",
 				children: "No requests or changes yet."
 			}) : /* @__PURE__ */ jsx(RequestRecord, {
 				request: latest,
 				prominent: true
 			}),
 			earlier.length > 0 ? /* @__PURE__ */ jsxs("details", {
-				className: "border-t border-doom-border-soft pt-3",
+				className: "border-t border-po-border-soft pt-3",
 				"data-testid": "author-earlier-requests",
 				children: [/* @__PURE__ */ jsxs("summary", {
-					className: "cursor-pointer select-none text-base font-medium text-doom-dim",
+					className: "cursor-pointer select-none text-base font-medium text-po-dim",
 					children: [
 						"Earlier requests (",
 						earlier.length,
@@ -1910,6 +2046,10 @@ function AuthorRequestLog({ requests }) {
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/dock/_components/AuthorToolPalette.tsx
+/** One tool tile. An active annotation tool is the person's mark (rose); an active view tool is Po's jade. */
+function authorToolClassName(active, annotates) {
+	return `h-auto min-h-11 min-w-11 flex-col gap-1 rounded-md px-1 py-2 text-base [@media(pointer:fine)]:min-h-8 ${!active ? "border-po-border-soft bg-po-panel text-po-dim" : annotates ? "border-po-edge-magenta bg-po-tint-magenta font-semibold text-po-magenta hover:text-po-magenta" : "border-po-edge-green bg-po-tint-green font-semibold text-po-green hover:text-po-green"}`;
+}
 function AuthorToolPalette({ sessionId, path, kind, activeTool }) {
 	const [error, setError] = useState();
 	const format = (style) => {
@@ -1937,18 +2077,21 @@ function AuthorToolPalette({ sessionId, path, kind, activeTool }) {
 			label: "Pan",
 			glyph: "✋",
 			action: () => setAuthorToolMode(sessionId, path, activeTool === "pan" ? "select" : "pan"),
-			active: activeTool === "pan"
+			active: activeTool === "pan",
+			annotates: false
 		}, {
 			label: "Draw",
 			glyph: "✎",
 			action: () => setAuthorToolMode(sessionId, path, activeTool === "draw" ? "select" : "draw"),
-			active: activeTool === "draw"
+			active: activeTool === "draw",
+			annotates: true
 		}] : [],
 		{
 			label: "Region",
 			glyph: "⌗",
 			action: () => setAuthorToolMode(sessionId, path, activeTool === "mark" ? "select" : "mark"),
-			active: activeTool === "mark"
+			active: activeTool === "mark",
+			annotates: true
 		},
 		...kind === "markdown" ? [
 			{
@@ -1976,41 +2119,43 @@ function AuthorToolPalette({ sessionId, path, kind, activeTool }) {
 			label: "Comment",
 			glyph: "●",
 			action: () => setAuthorToolMode(sessionId, path, activeTool === "comment" ? "select" : "comment"),
-			active: activeTool === "comment"
+			active: activeTool === "comment",
+			annotates: true
 		}
 	];
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "author-tool-palette",
-		className: "space-y-2 border-b border-doom-border-soft pb-3",
+		className: "space-y-2",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between text-sm text-doom-dim",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-lg font-semibold text-doom-hi",
-					children: "Tools"
-				}), /* @__PURE__ */ jsx("span", { children: "focused tab" })]
+			/* @__PURE__ */ jsx("h3", {
+				className: "sr-only",
+				children: "Tools"
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-3 gap-1.5",
+				className: "grid grid-cols-4 gap-1.5",
 				children: tools.map((tool) => /* @__PURE__ */ jsxs(Button, {
 					size: "md",
 					variant: "outline",
 					"aria-label": tool.label === "Region" ? "mark region" : tool.label,
 					"aria-pressed": tool.active,
 					onClick: tool.action,
-					className: `min-h-11 min-w-11 gap-1.5 rounded border text-base [@media(pointer:fine)]:min-h-8 ${tool.active ? "border-doom-red bg-doom-red/10 text-doom-hi hover:bg-doom-red/15" : "border-doom-border bg-doom-panel text-doom-dim"}`,
+					className: authorToolClassName(tool.active === true, tool.annotates === true),
 					children: [/* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
+						className: "text-lg leading-none",
 						children: tool.glyph
-					}), tool.label]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm",
+						children: tool.label
+					})]
 				}, tool.label))
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-base leading-normal text-doom-dim",
+				className: "text-base leading-normal text-po-dim sm:text-sm",
 				children: activeTool === "draw" ? "Draw a location mark, then enter feedback text. Marks never edit the source." : activeTool === "pan" ? "Drag to pan; pinch to zoom. Use Fit to reset the view." : activeTool === "mark" ? "Drag over the document to mark a region." : activeTool === "comment" ? "Click the document to place a comment pin." : "Choose Region to drag an area, or Comment to place a point."
 			}),
 			error ? /* @__PURE__ */ jsx("output", {
-				className: "block text-base text-doom-red",
+				className: "block text-base text-po-red",
 				children: error
 			}) : null
 		]
@@ -2018,7 +2163,7 @@ function AuthorToolPalette({ sessionId, path, kind, activeTool }) {
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/dock/_components/AuthorPanel.tsx
-function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses, renderSlot, renderSessionActivity }) {
+function AuthorPanel({ sessionId, submitCapture, statuses, renderSlot, renderSessionActivity }) {
 	const documents = useStore(authorWorkspace.store, (state) => {
 		if (sessionId === null) return [];
 		const prefix = `${sessionId}\n`;
@@ -2031,43 +2176,43 @@ function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses, ren
 	const requests = (workspace?.requests ?? []).filter((request) => focusedPath === void 0 || request.documentPath === focusedPath);
 	const drafts = useStore(authorWorkspace.store, (state) => authorDocumentAnnotations(sessionId, focusedPath ?? "", state));
 	const activity = sessionId !== null && focusedPath !== void 0 && requests.some((request) => request.status === "REQUESTED" || request.status === "CHANGING") ? renderSessionActivity?.() ?? null : null;
-	if (!activeMinorModes?.includes("author")) return null;
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "author-panel",
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "min-h-0 flex-1 overflow-y-auto p-3",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-2",
+				className: "flex flex-col gap-3",
 				children: [
 					/* @__PURE__ */ jsx("div", {
 						"data-testid": "author-preview-providers",
+						className: "empty:hidden",
 						children: renderSlot("author.preview-provider")
 					}),
 					sessionId !== null && workspace !== void 0 && focused !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(AuthorToolPalette, {
+							sessionId,
+							path: focused.path,
+							kind: focused.kind,
+							activeTool: workspace.toolsByDocument[normalizeAuthorPath(focused.path)] ?? "select"
+						}),
 						/* @__PURE__ */ jsx("h2", {
-							className: "text-base font-semibold text-doom-text",
+							className: "border-t border-po-border-soft pt-3 text-lg font-semibold text-po-hi",
 							children: "Annotations"
 						}),
 						/* @__PURE__ */ jsx("p", {
-							className: "text-base leading-normal text-doom-dim sm:text-sm",
+							className: "text-base leading-normal text-po-dim sm:text-sm",
 							children: "Drag a region or place a point, add feedback, then submit here. Requests queue while the agent is working."
 						}),
 						focused.kind === "video" ? /* @__PURE__ */ jsx("p", {
-							className: "text-base text-doom-dim sm:text-sm",
+							className: "text-base text-po-dim sm:text-sm",
 							children: "Annotations reference video frames. They do not save changes to the source video."
 						}) : null,
-						/* @__PURE__ */ jsx(AuthorToolPalette, {
-							sessionId,
-							path: focused.path,
-							kind: focused.kind,
-							activeTool: workspace.toolsByDocument[normalizeAuthorPath(focused.path)] ?? "select"
-						}),
 						autonomousVoiceGridVisible(statuses) && grid !== void 0 ? /* @__PURE__ */ jsxs("div", {
 							"data-testid": "author-grid-snapshot",
-							className: "rounded border border-doom-red/40 bg-doom-red/5 p-2 text-base text-doom-dim",
+							className: "rounded border border-po-red/40 bg-po-red/5 p-2 text-base text-po-dim",
 							children: [/* @__PURE__ */ jsx("strong", {
-								className: "text-doom-red",
+								className: "text-po-red",
 								children: "VOICE GRID A1–H8"
 							}), /* @__PURE__ */ jsxs("p", {
 								className: "mt-1 truncate",
@@ -2075,7 +2220,7 @@ function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses, ren
 							})]
 						}) : null,
 						/* @__PURE__ */ jsx("div", {
-							className: "hidden sm:block",
+							className: "max-sm:hidden",
 							children: /* @__PURE__ */ jsx(AuthorFeedbackControls, {
 								sessionId,
 								document: focused,
@@ -2084,12 +2229,15 @@ function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses, ren
 							}, focused.path)
 						})
 					] }) : null,
-					/* @__PURE__ */ jsx(AuthorRequestLog, { requests })
+					/* @__PURE__ */ jsx("div", {
+						className: focused === void 0 ? void 0 : "border-t border-po-border-soft pt-3",
+						children: /* @__PURE__ */ jsx(AuthorRequestLog, { requests })
+					})
 				]
 			})
 		}), activity === null ? null : /* @__PURE__ */ jsx("footer", {
 			"data-testid": "author-session-activity",
-			className: "shrink-0 border-t border-doom-border bg-doom-rail p-3",
+			className: "shrink-0 border-t border-po-border bg-po-rail p-3",
 			children: activity
 		})]
 	});
@@ -2098,17 +2246,17 @@ function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses, ren
 //#region src/extensions/workspaces/sessions/(frontend)/dock/authoring.web.tsx
 var authoring_web_default = defineDockFace({
 	id: "authoring",
-	label: "authoring",
+	label: "Author",
 	order: 30,
-	autoSelect: true,
+	autoSelect: ({ tabId }) => tabId?.startsWith(AUTHOR_FILE_TAB_PREFIX) === true,
 	panel: AuthorPanel,
-	requiredMinorMode: "author",
 	visibility: {
-		subscribe() {
-			return () => void 0;
+		subscribe(listener) {
+			const subscription = authorWorkspace.store.subscribe(listener);
+			return () => subscription.unsubscribe();
 		},
 		isVisible(sessionId) {
-			return sessionId !== null;
+			return sessionId !== null && authorWorkspace.store.state.sessions[sessionId]?.focusedDocument !== void 0;
 		}
 	}
 });
@@ -2307,8 +2455,29 @@ function authorKindForPath(path) {
 * itself, and the digest travels in a header on both legs.
 */
 function authorSessionFileUrl(sessionId, path) {
+	if (path.startsWith("artifact:")) return artifactApi.session(sessionId).content.url({ query: { path: path.slice(9) } });
 	return api.session(sessionId).file.url({ query: { path } });
 }
+/** The file name a person sees: the last path segment, without the `artifact:` scheme. */
+function authorFileName(path) {
+	const local = path.startsWith("artifact:") ? path.slice(9) : path;
+	return local.split("/").at(-1) ?? local;
+}
+/**
+* po-artifact's read route, which owns the session artifact folder's guards.
+* Browser code cannot import that package, so its one raw route is restated.
+*/
+const artifactApi = createApiClient({ content: {
+	method: "GET",
+	path: "/content",
+	query: ["path"],
+	raw: true
+} }, {
+	scopes: ["session"],
+	basePath: "artifacts",
+	transport: (input, init) => sealedTransport.fetch(input, init),
+	sessionAddress: sessionApiAddress
+});
 /** One document route, with the refusal the reader is shown: the route's own words, or its status. */
 async function documentRequest(method, sessionId, body, signal) {
 	const result = await method({
@@ -2338,7 +2507,7 @@ async function loadAuthorDocument(sessionId, path, signal) {
 		return {
 			path,
 			kind,
-			title: path.split("/").at(-1) ?? path,
+			title: authorFileName(path),
 			structuredFormat: format,
 			fragments: parsed.fragments,
 			...csvDialect === void 0 ? {} : { csvDialect },
@@ -2351,7 +2520,7 @@ async function loadAuthorDocument(sessionId, path, signal) {
 	return {
 		path,
 		kind,
-		title: path.split("/").at(-1) ?? path,
+		title: authorFileName(path),
 		...content === void 0 ? {} : { content },
 		...mediaUrl === void 0 ? {} : { mediaUrl },
 		...sourceSha256 === void 0 ? {} : { sourceSha256 }
@@ -2427,6 +2596,7 @@ async function bytesToSave(sessionId, document, signal) {
 	return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
 }
 async function saveAuthorDocument(sessionId, document, signal) {
+	if (document.path.startsWith("artifact:")) throw new Error("Artifacts are read-only.");
 	if (document.sourceSha256 === void 0) throw new Error("This Author view has no source digest.");
 	const response = await sealedTransport.fetch(authorSessionFileUrl(sessionId, document.path), {
 		method: "PUT",
@@ -2865,13 +3035,17 @@ function authorProfilesForDocument(sessionId, path, kind) {
 * own. The transport stays raw because what comes back is a blob, and a call
 * through the generated client reads the body as JSON to report a refusal.
 */
-async function loadAuthorMedia(source, signal) {
-	const response = await sealedTransport.fetch(source, {
-		signal,
-		cache: "no-store"
-	});
-	if (!response.ok) throw new Error(`Author media could not be loaded (${response.status}).`);
-	const blob = await response.blob();
+async function loadAuthorMedia(source, signal, imageData) {
+	let blob;
+	if (imageData !== void 0) blob = new Blob([Uint8Array.from(atob(imageData), (character) => character.charCodeAt(0))], { type: "image/png" });
+	else {
+		const response = await sealedTransport.fetch(source, {
+			signal,
+			cache: "no-store"
+		});
+		if (!response.ok) throw new Error(`Author media could not be loaded (${response.status}).`);
+		blob = await response.blob();
+	}
 	signal.throwIfAborted();
 	const url = URL.createObjectURL(blob);
 	let disposed = false;
@@ -2897,7 +3071,7 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 	const buttonClass = "min-h-11 px-3 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm";
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": "Video annotation controls",
-		className: "mt-2 space-y-2 rounded border border-doom-border bg-doom-panel p-2.5 text-base text-doom-text sm:text-sm",
+		className: "mt-2 space-y-2 rounded border border-po-border bg-po-panel p-2.5 text-base text-po-text sm:text-sm",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center justify-between gap-3",
@@ -2910,7 +3084,7 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 						videoTimeLabel(duration)
 					]
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-doom-dim",
+					className: "text-po-dim",
 					children: locked ? "Annotation draft: add or discard it before seeking." : marking ? "Frame paused. Drag a region on the video." : "Seek to a moment, then choose Annotate this frame."
 				})]
 			}),
@@ -2923,7 +3097,7 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 				value: Math.min(playback.currentTime, duration),
 				disabled: locked || duration <= 0,
 				onChange: (event) => onSeek(Number(event.target.value)),
-				className: "h-11 w-full cursor-pointer accent-doom-blue [@media(pointer:fine)]:h-6"
+				className: "h-11 w-full cursor-pointer accent-po-blue [@media(pointer:fine)]:h-6"
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2",
@@ -2964,7 +3138,7 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 						children: [
 							/* @__PURE__ */ jsx("label", {
 								htmlFor: "author-video-seconds",
-								className: "text-doom-dim",
+								className: "text-po-dim",
 								children: "Go to seconds"
 							}),
 							/* @__PURE__ */ jsx("input", {
@@ -2977,7 +3151,7 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 								onChange: (event) => setSeconds(event.target.value),
 								disabled: locked || duration <= 0,
 								placeholder: "1.250",
-								className: "h-11 w-24 rounded border border-doom-border bg-doom-deep px-2 text-lg [@media(pointer:fine)]:h-8 sm:text-sm"
+								className: "h-11 w-24 rounded border border-po-border bg-po-deep px-2 text-lg [@media(pointer:fine)]:h-8 sm:text-sm"
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								type: "submit",
@@ -2994,6 +3168,8 @@ function AuthorVideoControls({ playback, ready, locked, marking, onSeek, onToggl
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorMediaView.tsx
+const REGION_FRAME = "pointer-events-none absolute border-2 border-po-magenta bg-po-magenta/10";
+const ORDINAL_BADGE = "absolute -left-3 -top-3 flex h-6 min-w-6 items-center justify-center rounded-full border-2 border-po-panel bg-po-magenta px-1 text-sm font-semibold text-po-rail";
 /** Marks source media. Native playback and page controls remain usable in select mode. */
 function AuthorMediaView({ sessionId, document: source, activeTool, displayedRegions, pendingCandidate = false, seekRequest }) {
 	const host = useRef(null);
@@ -3004,7 +3180,35 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 	const pointers = useRef(/* @__PURE__ */ new Map());
 	const pan = useRef(void 0);
 	const pinch = useRef(void 0);
+	const frame = useRef(null);
+	const zoomAnchor = useRef(void 0);
 	const [zoom, setZoom] = useState(1);
+	const zoomTo = (requested, at) => {
+		const next = Math.min(8, Math.max(.25, requested));
+		if (next === zoom) return;
+		const view = host.current?.getBoundingClientRect();
+		const bounds = frame.current?.getBoundingClientRect();
+		if (view && bounds && bounds.width > 0 && bounds.height > 0) {
+			const x = at?.x ?? view.left + view.width / 2;
+			const y = at?.y ?? view.top + view.height / 2;
+			zoomAnchor.current = {
+				x,
+				y,
+				fx: (x - bounds.left) / bounds.width,
+				fy: (y - bounds.top) / bounds.height
+			};
+		}
+		setZoom(next);
+	};
+	useLayoutEffect(() => {
+		const anchor = zoomAnchor.current;
+		zoomAnchor.current = void 0;
+		const container = host.current;
+		const bounds = frame.current?.getBoundingClientRect();
+		if (!anchor || !container || !bounds) return;
+		container.scrollLeft += bounds.left + anchor.fx * bounds.width - anchor.x;
+		container.scrollTop += bounds.top + anchor.fy * bounds.height - anchor.y;
+	}, [zoom]);
 	const [stroke, setStroke] = useState();
 	const [pdfPlane, setPdfPlane] = useState();
 	const [playback, setPlayback] = useState({
@@ -3023,6 +3227,7 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 		pan.current = void 0;
 		setStroke(void 0);
 		setSelection(void 0);
+		zoomAnchor.current = void 0;
 		setZoom(1);
 	}, [
 		source.path,
@@ -3084,7 +3289,7 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 		const controller = new AbortController();
 		let dispose;
 		setError(void 0);
-		loadAuthorMedia(input, controller.signal).then((asset) => {
+		loadAuthorMedia(input, controller.signal, source.imageData).then((asset) => {
 			if (controller.signal.aborted) {
 				asset.dispose();
 				return;
@@ -3101,7 +3306,7 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 			controller.abort();
 			dispose?.();
 		};
-	}, [source.mediaUrl]);
+	}, [source.mediaUrl, source.imageData]);
 	const seek = (seconds) => {
 		if (authorDocumentAnnotations(sessionId, source.path).candidate || !Number.isFinite(seconds)) return;
 		const player = video.current;
@@ -3277,14 +3482,14 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 			strokeWidth: "5",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
-			className: ordinal === void 0 ? "text-doom-red" : "text-doom-yellow"
+			className: "text-po-magenta"
 		})
 	});
 	const selected = selection?.path === source.path ? selection.rect : void 0;
 	const selectedPoint = selection?.path === source.path ? selection.point : void 0;
 	const selectionOverlay = selected === void 0 ? null : /* @__PURE__ */ jsx("div", {
 		"data-testid": "author-media-selection",
-		className: "pointer-events-none absolute border-2 border-doom-red bg-doom-red/10",
+		className: "pointer-events-none absolute border-2 border-dashed border-po-magenta bg-po-magenta/10",
 		style: {
 			left: `${selected.x * 100}%`,
 			top: `${selected.y * 100}%`,
@@ -3295,7 +3500,7 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 	const pointPin = (ordinal, point, key) => /* @__PURE__ */ jsx("span", {
 		"data-author-point": ordinal,
 		"data-testid": ordinal === void 0 ? "author-media-point-selection" : void 0,
-		className: `pointer-events-none absolute z-10 flex h-5 min-w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 px-1 text-2xs font-semibold ${ordinal === void 0 ? "border-white bg-doom-red text-white" : "border-doom-deep bg-doom-yellow text-doom-deep"}`,
+		className: `pointer-events-none absolute z-10 flex h-6 min-w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 px-1 text-sm font-semibold ${ordinal === void 0 ? "border-po-magenta bg-po-panel text-po-magenta" : "border-po-panel bg-po-magenta text-po-rail"}`,
 		style: {
 			left: `${String(point.x * 100)}%`,
 			top: `${String(point.y * 100)}%`
@@ -3304,8 +3509,7 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 	}, key);
 	const pointSelectionOverlay = selectedPoint === void 0 ? null : pointPin(void 0, selectedPoint, "selection");
 	return /* @__PURE__ */ jsxs("div", {
-		ref: host,
-		className: "min-h-0 flex-1 overflow-auto p-4",
+		className: "flex min-h-0 flex-1 flex-col",
 		style: { cursor: activeTool === "draw" || activeTool === "mark" ? "crosshair" : void 0 },
 		onPointerMove: (event) => {
 			if (pointers.current.has(event.pointerId)) pointers.current.set(event.pointerId, {
@@ -3315,7 +3519,10 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 			if (pinch.current !== void 0 && pointers.current.size >= 2) {
 				const [a, b] = [...pointers.current.values()];
 				const distance = Math.hypot(a.x - b.x, a.y - b.y);
-				if (pinch.current.distance > 0) setZoom(Math.min(8, Math.max(1, pinch.current.zoom * distance / pinch.current.distance)));
+				if (pinch.current.distance > 0) zoomTo(pinch.current.zoom * distance / pinch.current.distance, {
+					x: (a.x + b.x) / 2,
+					y: (a.y + b.y) / 2
+				});
 				return;
 			}
 			if (pan.current !== void 0 && activeTool === "pan") {
@@ -3425,141 +3632,44 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 			pan.current = void 0;
 			setStroke(void 0);
 		},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "sticky top-0 z-20 mb-2 flex items-center gap-2 bg-doom-bg py-1",
-				role: "group",
-				"aria-label": "Canvas zoom",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: host,
+			className: "@container flex min-h-0 flex-1 flex-col overflow-auto bg-po-deep/50 p-6",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "m-auto flex max-w-full flex-col items-center-safe gap-3",
 				children: [
-					/* @__PURE__ */ jsx(Button, {
-						size: "md",
-						variant: "outline",
-						"aria-label": "Zoom out",
-						className: "min-h-11 min-w-11",
-						onClick: () => setZoom((current) => Math.max(1, current / 1.5)),
-						children: "−"
-					}),
-					/* @__PURE__ */ jsxs("output", {
-						className: "text-sm text-doom-dim",
-						children: [Math.round(zoom * 100), "%"]
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "md",
-						variant: "outline",
-						"aria-label": "Zoom in",
-						className: "min-h-11 min-w-11",
-						onClick: () => setZoom((current) => Math.min(8, current * 1.5)),
-						children: "+"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "md",
-						variant: "outline",
-						"aria-label": "Fit canvas",
-						className: "min-h-11",
-						onClick: () => {
-							setZoom(1);
-							if (host.current) {
-								host.current.scrollLeft = 0;
-								host.current.scrollTop = 0;
-							}
+					mediaUrl === void 0 ? /* @__PURE__ */ jsx("p", {
+						className: "text-po-dim",
+						children: error === void 0 ? "Loading media..." : "Media unavailable."
+					}) : source.kind === "image" ? /* @__PURE__ */ jsxs("div", {
+						ref: frame,
+						className: "relative w-max max-w-[100cqw] shadow-sm ring-1 ring-po-border-soft",
+						style: {
+							zoom,
+							touchAction: activeTool === "select" ? "auto" : "none"
 						},
-						children: "Fit"
-					})
-				]
-			}),
-			mediaUrl === void 0 ? /* @__PURE__ */ jsx("p", {
-				className: "text-doom-dim",
-				children: error === void 0 ? "Loading media..." : "Media unavailable."
-			}) : source.kind === "image" ? /* @__PURE__ */ jsxs("div", {
-				className: "relative inline-block max-w-full",
-				style: {
-					zoom,
-					touchAction: activeTool === "select" ? "auto" : "none"
-				},
-				children: [
-					/* @__PURE__ */ jsx("img", {
-						ref: image,
-						src: mediaUrl,
-						alt: source.path,
-						draggable: false,
-						className: "block max-w-full"
-					}),
-					selectionOverlay,
-					pointSelectionOverlay,
-					strokeOverlay(stroke),
-					displayedRegions.flatMap(({ ordinal, region }) => {
-						if (region.stroke !== void 0) return [/* @__PURE__ */ jsxs("div", {
-							className: "pointer-events-none absolute inset-0",
-							children: [strokeOverlay(region.stroke, ordinal), pointPin(ordinal, region.stroke[0], `label:${region.id}`)]
-						}, region.id)];
-						if (region.anchor.kind === "image-point") return [pointPin(ordinal, region.anchor.point, region.id)];
-						if (region.anchor.kind !== "image-rect") return [];
-						const { rect } = region.anchor;
-						return [/* @__PURE__ */ jsx("div", {
-							"data-author-region": ordinal,
-							className: "pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10",
-							style: {
-								left: `${String(rect.x * 100)}%`,
-								top: `${String(rect.y * 100)}%`,
-								width: `${String(rect.width * 100)}%`,
-								height: `${String(rect.height * 100)}%`
-							},
-							children: /* @__PURE__ */ jsx("span", {
-								className: "absolute -left-2 -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-semibold text-doom-deep",
-								children: ordinal
-							})
-						}, region.id)];
-					})
-				]
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "relative w-fit max-w-full",
-				style: {
-					zoom,
-					touchAction: activeTool === "select" ? "auto" : "none"
-				},
-				children: [/* @__PURE__ */ jsx(MediaPreview, {
-					src: mediaUrl,
-					path: source.path,
-					kind: source.kind === "pdf" ? "pdf" : source.kind === "video" ? "video" : "download",
-					controllerRef: video,
-					pdfControllerRef: pdf,
-					"data-testid": "author-media",
-					videoControls: false,
-					onPlaybackStateChange: (state) => {
-						setPlayback(state);
-						setFrameReady(video.current?.isFrameReady() ?? false);
-						if (state.playing) setSelection(void 0);
-					}
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "pointer-events-none absolute",
-					style: source.kind === "pdf" ? pdfPlane === void 0 ? { display: "none" } : {
-						left: pdfPlane.left,
-						top: pdfPlane.top,
-						width: pdfPlane.width,
-						height: pdfPlane.height
-					} : { inset: 0 },
-					children: [
-						selectionOverlay,
-						pointSelectionOverlay,
-						strokeOverlay(stroke),
-						displayedRegions.map(({ ordinal, region }) => {
-							if (region.stroke !== void 0) {
-								const anchor = region.anchor;
-								if (source.kind === "pdf" && (anchor.kind !== "pdf-page-rect" || anchor.page !== pdf.current?.getState().page)) return null;
-								if (source.kind === "video" && (anchor.kind !== "video-time-rect" || playback.playing || Math.abs(anchor.timeSeconds - playback.currentTime) > .1)) return null;
-								return /* @__PURE__ */ jsxs("div", {
+						children: [
+							/* @__PURE__ */ jsx("img", {
+								ref: image,
+								src: mediaUrl,
+								alt: source.path,
+								draggable: false,
+								className: "block max-w-full"
+							}),
+							selectionOverlay,
+							pointSelectionOverlay,
+							strokeOverlay(stroke),
+							displayedRegions.flatMap(({ ordinal, region }) => {
+								if (region.stroke !== void 0) return [/* @__PURE__ */ jsxs("div", {
 									className: "pointer-events-none absolute inset-0",
 									children: [strokeOverlay(region.stroke, ordinal), pointPin(ordinal, region.stroke[0], `label:${region.id}`)]
-								}, region.id);
-							}
-							if (source.kind === "pdf") {
-								if (region.anchor.kind !== "pdf-page-point" && region.anchor.kind !== "pdf-page-rect") return null;
-								if (region.anchor.page !== pdf.current?.getState().page) return null;
-								if (region.anchor.kind === "pdf-page-point") return pointPin(ordinal, region.anchor.point, region.id);
+								}, region.id)];
+								if (region.anchor.kind === "image-point") return [pointPin(ordinal, region.anchor.point, region.id)];
+								if (region.anchor.kind !== "image-rect") return [];
 								const { rect } = region.anchor;
-								return /* @__PURE__ */ jsx("div", {
+								return [/* @__PURE__ */ jsx("div", {
 									"data-author-region": ordinal,
-									className: "pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10",
+									className: REGION_FRAME,
 									style: {
 										left: `${String(rect.x * 100)}%`,
 										top: `${String(rect.y * 100)}%`,
@@ -3567,55 +3677,169 @@ function AuthorMediaView({ sessionId, document: source, activeTool, displayedReg
 										height: `${String(rect.height * 100)}%`
 									},
 									children: /* @__PURE__ */ jsx("span", {
-										className: "bg-doom-yellow text-doom-deep",
+										className: ORDINAL_BADGE,
 										children: ordinal
 									})
-								}, region.id);
+								}, region.id)];
+							})
+						]
+					}) : /* @__PURE__ */ jsxs("div", {
+						ref: frame,
+						className: "relative w-max max-w-[100cqw] shadow-sm ring-1 ring-po-border-soft",
+						style: {
+							zoom,
+							touchAction: activeTool === "select" ? "auto" : "none"
+						},
+						children: [/* @__PURE__ */ jsx(MediaPreview, {
+							src: mediaUrl,
+							path: source.path,
+							kind: source.kind === "pdf" ? "pdf" : source.kind === "video" ? "video" : "download",
+							controllerRef: video,
+							pdfControllerRef: pdf,
+							"data-testid": "author-media",
+							videoControls: false,
+							onPlaybackStateChange: (state) => {
+								setPlayback(state);
+								setFrameReady(video.current?.isFrameReady() ?? false);
+								if (state.playing) setSelection(void 0);
 							}
-							if (source.kind !== "video" || playback.playing) return null;
-							if (region.anchor.kind === "video-time-point" && Math.abs(region.anchor.timeSeconds - playback.currentTime) <= .1) return pointPin(ordinal, region.anchor.point, region.id);
-							if (region.anchor.kind !== "video-time-rect" || Math.abs(region.anchor.timeSeconds - playback.currentTime) > .1) return null;
-							const { rect } = region.anchor;
-							return /* @__PURE__ */ jsx("div", {
-								"data-author-region": ordinal,
-								className: "pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10",
-								style: {
-									left: `${rect.x * 100}%`,
-									top: `${rect.y * 100}%`,
-									width: `${rect.width * 100}%`,
-									height: `${rect.height * 100}%`
-								},
-								children: /* @__PURE__ */ jsx("span", {
-									className: "bg-doom-yellow text-doom-deep",
-									children: ordinal
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "pointer-events-none absolute",
+							style: source.kind === "pdf" ? pdfPlane === void 0 ? { display: "none" } : {
+								left: pdfPlane.left,
+								top: pdfPlane.top,
+								width: pdfPlane.width,
+								height: pdfPlane.height
+							} : { inset: 0 },
+							children: [
+								selectionOverlay,
+								pointSelectionOverlay,
+								strokeOverlay(stroke),
+								displayedRegions.map(({ ordinal, region }) => {
+									if (region.stroke !== void 0) {
+										const anchor = region.anchor;
+										if (source.kind === "pdf" && (anchor.kind !== "pdf-page-rect" || anchor.page !== pdf.current?.getState().page)) return null;
+										if (source.kind === "video" && (anchor.kind !== "video-time-rect" || playback.playing || Math.abs(anchor.timeSeconds - playback.currentTime) > .1)) return null;
+										return /* @__PURE__ */ jsxs("div", {
+											className: "pointer-events-none absolute inset-0",
+											children: [strokeOverlay(region.stroke, ordinal), pointPin(ordinal, region.stroke[0], `label:${region.id}`)]
+										}, region.id);
+									}
+									if (source.kind === "pdf") {
+										if (region.anchor.kind !== "pdf-page-point" && region.anchor.kind !== "pdf-page-rect") return null;
+										if (region.anchor.page !== pdf.current?.getState().page) return null;
+										if (region.anchor.kind === "pdf-page-point") return pointPin(ordinal, region.anchor.point, region.id);
+										const { rect } = region.anchor;
+										return /* @__PURE__ */ jsx("div", {
+											"data-author-region": ordinal,
+											className: REGION_FRAME,
+											style: {
+												left: `${String(rect.x * 100)}%`,
+												top: `${String(rect.y * 100)}%`,
+												width: `${String(rect.width * 100)}%`,
+												height: `${String(rect.height * 100)}%`
+											},
+											children: /* @__PURE__ */ jsx("span", {
+												className: ORDINAL_BADGE,
+												children: ordinal
+											})
+										}, region.id);
+									}
+									if (source.kind !== "video" || playback.playing) return null;
+									if (region.anchor.kind === "video-time-point" && Math.abs(region.anchor.timeSeconds - playback.currentTime) <= .1) return pointPin(ordinal, region.anchor.point, region.id);
+									if (region.anchor.kind !== "video-time-rect" || Math.abs(region.anchor.timeSeconds - playback.currentTime) > .1) return null;
+									const { rect } = region.anchor;
+									return /* @__PURE__ */ jsx("div", {
+										"data-author-region": ordinal,
+										className: REGION_FRAME,
+										style: {
+											left: `${rect.x * 100}%`,
+											top: `${rect.y * 100}%`,
+											width: `${rect.width * 100}%`,
+											height: `${rect.height * 100}%`
+										},
+										children: /* @__PURE__ */ jsx("span", {
+											className: ORDINAL_BADGE,
+											children: ordinal
+										})
+									}, region.id);
 								})
-							}, region.id);
+							]
+						})]
+					}),
+					source.kind === "video" ? /* @__PURE__ */ jsx(AuthorVideoControls, {
+						playback,
+						ready: frameReady,
+						locked: pendingCandidate,
+						marking: activeTool === "mark",
+						onSeek: seek,
+						onToggle: () => {
+							setAuthorToolMode(sessionId, source.path, "select");
+							setSelection(void 0);
+							if (playback.playing) video.current?.pause();
+							else video.current?.play().catch((reason) => setError(String(reason)));
+						},
+						onAnnotate: () => {
+							video.current?.pause();
+							setAuthorToolMode(sessionId, source.path, "mark");
+						}
+					}) : null,
+					error ? /* @__PURE__ */ jsx("output", {
+						className: "text-base text-po-red",
+						children: error
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ jsxs("footer", {
+			className: "flex shrink-0 items-center gap-2 border-t border-po-border bg-po-bg px-3 py-1.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": "Canvas zoom",
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center rounded-md border border-po-border",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							size: "md",
+							variant: "ghost",
+							"aria-label": "Zoom out",
+							className: "min-h-11 min-w-11 rounded-r-none [@media(pointer:fine)]:min-h-8",
+							onClick: () => zoomTo(zoom / 1.5),
+							children: "−"
+						}),
+						/* @__PURE__ */ jsxs("output", {
+							className: "flex min-w-14 items-center justify-center self-stretch border-x border-po-border-soft text-sm tabular-nums text-po-text",
+							children: [Math.round(zoom * 100), "%"]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "md",
+							variant: "ghost",
+							"aria-label": "Zoom in",
+							className: "min-h-11 min-w-11 rounded-l-none [@media(pointer:fine)]:min-h-8",
+							onClick: () => zoomTo(zoom * 1.5),
+							children: "+"
 						})
 					]
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "md",
+					variant: "outline",
+					"aria-label": "Fit canvas",
+					className: "min-h-11 [@media(pointer:fine)]:min-h-8",
+					onClick: () => {
+						zoomAnchor.current = void 0;
+						setZoom(1);
+						if (host.current) {
+							host.current.scrollLeft = 0;
+							host.current.scrollTop = 0;
+						}
+					},
+					children: "Fit"
 				})]
-			}),
-			source.kind === "video" ? /* @__PURE__ */ jsx(AuthorVideoControls, {
-				playback,
-				ready: frameReady,
-				locked: pendingCandidate,
-				marking: activeTool === "mark",
-				onSeek: seek,
-				onToggle: () => {
-					setAuthorToolMode(sessionId, source.path, "select");
-					setSelection(void 0);
-					if (playback.playing) video.current?.pause();
-					else video.current?.play().catch((reason) => setError(String(reason)));
-				},
-				onAnnotate: () => {
-					video.current?.pause();
-					setAuthorToolMode(sessionId, source.path, "mark");
-				}
-			}) : null,
-			error ? /* @__PURE__ */ jsx("output", {
-				className: "text-base text-doom-red",
-				children: error
-			}) : null
-		]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "ml-auto text-sm text-po-dim first-letter:uppercase",
+				children: source.kind
+			})]
+		})]
 	});
 }
 //#endregion
@@ -3664,22 +3888,22 @@ function AuthorStructuredView({ sessionId, document, displayedRegions }) {
 		"data-testid": "author-structured",
 		className: "min-h-0 flex-1 space-y-3 overflow-auto p-4",
 		children: [!cells ? /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-doom-dim",
+			className: "text-sm text-po-dim",
 			children: "Slide text view, not a layout-faithful rendering."
 		}) : null, [...groups].map(([location, fragments]) => /* @__PURE__ */ jsxs("section", {
 			className: "space-y-1",
 			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: location
 			}), /* @__PURE__ */ jsx("div", {
 				className: cells ? "flex gap-1" : "space-y-2",
 				children: fragments.map((fragment) => /* @__PURE__ */ jsxs("div", {
 					"data-author-fragment": fragment.id,
 					"data-author-region": displayedByFragment.get(fragment.id),
-					className: `${cells ? "w-40 shrink-0" : ""} relative rounded ${displayedByFragment.has(fragment.id) ? "ring-1 ring-doom-yellow" : ""}`,
+					className: `${cells ? "w-40 shrink-0" : ""} relative rounded ${displayedByFragment.has(fragment.id) ? "ring-1 ring-po-yellow" : ""}`,
 					children: [
 						displayedByFragment.has(fragment.id) ? /* @__PURE__ */ jsx("span", {
-							className: "absolute -left-1 -top-1 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-semibold text-doom-deep",
+							className: "absolute -left-1 -top-1 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-po-yellow px-1 text-2xs font-semibold text-po-deep",
 							children: displayedByFragment.get(fragment.id)
 						}) : null,
 						/* @__PURE__ */ jsxs(Button, {
@@ -3717,7 +3941,7 @@ function AuthorStructuredView({ sessionId, document, displayedRegions }) {
 							"aria-label": fragment.location,
 							value: fragment.text,
 							readOnly: fragment.readOnly === true,
-							className: "w-full rounded border border-doom-border bg-doom-deep p-2 text-base text-doom-text",
+							className: "w-full rounded border border-po-border bg-po-deep p-2 text-base text-po-text",
 							onChange: (event) => reviseAuthorFragment(sessionId, document.path, fragment.id, event.target.value)
 						})
 					]
@@ -3759,13 +3983,17 @@ function AuthorTextView({ sessionId, document, preview, displayedRegions }) {
 			label: String(ordinal)
 		}] : []));
 	}, [displayedRegions]);
-	return /* @__PURE__ */ jsx("div", {
+	const lines = (document.content ?? "").split("\n").length;
+	return /* @__PURE__ */ jsxs("div", {
 		ref: host,
 		className: "flex min-h-0 flex-1 flex-col",
-		children: preview ? /* @__PURE__ */ jsx("div", {
+		children: [preview ? /* @__PURE__ */ jsx("div", {
 			"data-testid": "author-markdown",
-			className: "min-h-0 flex-1 overflow-auto p-4 text-base text-doom-text",
-			children: /* @__PURE__ */ jsx(Markdown, { text: document.content ?? "" })
+			className: "min-h-0 flex-1 overflow-auto bg-po-deep/50 p-6",
+			children: /* @__PURE__ */ jsx("article", {
+				className: "mx-auto min-h-full max-w-3xl rounded-md bg-po-panel px-6 py-8 sm:px-10 text-lg leading-relaxed text-po-text shadow-sm ring-1 ring-po-border-soft",
+				children: /* @__PURE__ */ jsx(Markdown, { text: document.content ?? "" })
+			})
 		}) : /* @__PURE__ */ jsx(CodeEditor, {
 			value: document.content ?? "",
 			path: document.path,
@@ -3796,17 +4024,41 @@ function AuthorTextView({ sessionId, document, preview, displayedRegions }) {
 					createdAt: Date.now()
 				});
 			}
-		})
+		}), /* @__PURE__ */ jsxs("footer", {
+			className: "flex shrink-0 items-center gap-2 border-t border-po-border bg-po-bg px-4 py-1.5 text-sm text-po-dim",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "first-letter:uppercase",
+					children: document.kind
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [
+					lines,
+					" line",
+					lines === 1 ? "" : "s"
+				] })
+			]
+		})]
 	});
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorDocumentPanel.tsx
+const MOBILE_TOOL_GLYPHS = {
+	select: "↖",
+	pan: "✋",
+	mark: "⌗",
+	comment: "●",
+	draw: "✎"
+};
 const pendingCanvases = /* @__PURE__ */ new Map();
 const canvasOwners = /* @__PURE__ */ new Map();
 function tabId(path) {
 	let hash = 2166136261;
 	for (const char of normalizeAuthorPath(path)) hash = Math.imul(hash ^ char.charCodeAt(0), 16777619);
-	return `author-file-${(hash >>> 0).toString(36)}`;
+	return `${AUTHOR_FILE_TAB_PREFIX}${(hash >>> 0).toString(36)}`;
 }
 /** Unsent annotations only. Sent ones live in the request log, not on the canvas. */
 function displayedAuthorRegions(workspace) {
@@ -3816,19 +4068,8 @@ function displayedAuthorRegions(workspace) {
 	}));
 }
 function AuthorDocumentPanel(props) {
-	if (!props.activeMinorModes?.includes("author")) {
-		const fallback = props.fileTabFor(props.path);
-		if (fallback !== void 0 && fallback.id !== tabId(props.path)) return /* @__PURE__ */ jsx(fallback.panel, { ...props });
-		return /* @__PURE__ */ jsx("p", {
-			"data-testid": "author-mode-inactive",
-			className: "p-3 text-sm text-doom-dim",
-			children: "No file viewer is available for this path."
-		});
-	}
-	return /* @__PURE__ */ jsx(ActiveAuthorDocumentPanel, { ...props });
-}
-function ActiveAuthorDocumentPanel(props) {
 	const { sessionId, statuses } = props;
+	const agentEnabled = props.activeMinorModes?.includes(AUTHOR_MODE_ID) === true;
 	const path = useStore(canvasPaths, (state) => sessionId === null ? props.path : state[authorDocumentKey(sessionId, props.path)] ?? props.path);
 	const alias = useStore(canvasAliases, (state) => props.alias ?? (sessionId === null ? void 0 : state[authorDocumentKey(sessionId, props.path)]));
 	const loadFailure = useStore(canvasFailures, (state) => sessionId === null ? void 0 : state[authorDocumentKey(sessionId, props.path)]);
@@ -3859,7 +4100,7 @@ function ActiveAuthorDocumentPanel(props) {
 		return () => releaseAuthorDocumentFocus(sessionId, generation);
 	}, [path, sessionId]);
 	useEffect(() => {
-		if (kind === void 0 || sessionId === null || alias === void 0) return;
+		if (!agentEnabled || kind === void 0 || sessionId === null || alias === void 0) return;
 		const profiles = authorProfilesForDocument(sessionId, path, kind);
 		let release;
 		let cancelled = false;
@@ -3872,13 +4113,14 @@ function ActiveAuthorDocumentPanel(props) {
 			release?.();
 		};
 	}, [
+		agentEnabled,
 		alias,
 		kind,
 		path,
 		sessionId
 	]);
 	if (document === void 0 || sessionId === null) return /* @__PURE__ */ jsx("p", {
-		className: "p-4 text-sm text-doom-dim",
+		className: "p-4 text-sm text-po-dim",
 		children: loadFailure ?? status ?? "Loading document..."
 	});
 	const save = async () => {
@@ -3935,11 +4177,28 @@ function ActiveAuthorDocumentPanel(props) {
 		className: "flex min-h-0 flex-1 flex-col",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "flex items-center gap-2 border-b border-doom-border px-4 py-2",
+				className: "flex items-center gap-2 border-b border-po-border bg-po-bg px-4 py-2",
 				children: [
+					/* @__PURE__ */ jsx(FileIcon, {
+						"aria-hidden": "true",
+						className: "size-4 shrink-0 text-po-dim"
+					}),
 					/* @__PURE__ */ jsxs("strong", {
-						className: "min-w-0 flex-1 truncate text-base text-doom-hi",
-						children: [alias === void 0 ? "" : `${alias} · `, document.title ?? document.path]
+						className: "min-w-0 truncate text-base font-medium text-po-hi",
+						children: [alias === void 0 ? "" : `${alias} · `, document.title ?? /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: document.path
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1",
+						children: document.version === document.savedVersion ? null : /* @__PURE__ */ jsxs("span", {
+							className: "inline-flex items-center gap-1.5 text-sm text-po-dim",
+							children: [/* @__PURE__ */ jsx(Dot, {
+								tone: "green",
+								size: "md"
+							}), "unsaved"]
+						})
 					}),
 					PreviewPanel !== void 0 && previewSource !== void 0 ? /* @__PURE__ */ jsx(Button, {
 						size: "xs",
@@ -3951,17 +4210,21 @@ function ActiveAuthorDocumentPanel(props) {
 						children: previewOpen ? "Source" : "Preview"
 					}) : null,
 					document.kind === "markdown" ? /* @__PURE__ */ jsx(Button, {
-						size: "xs",
-						variant: "ghost",
+						size: "sm",
+						variant: "outline",
+						className: "min-h-11 [@media(pointer:fine)]:min-h-8",
 						"data-testid": "author-markdown-toggle",
 						onClick: () => setMarkdownPreview(!markdownPreview),
-						children: markdownPreview ? "edit" : "preview"
+						children: /* @__PURE__ */ jsx("span", {
+							className: "first-letter:uppercase",
+							children: markdownPreview ? "edit" : "preview"
+						})
 					}) : null,
 					document.kind === "video" ? /* @__PURE__ */ jsx("span", {
-						className: "text-base text-doom-dim",
+						className: "text-base text-po-dim",
 						children: "Video feedback"
 					}) : /* @__PURE__ */ jsx(Button, {
-						className: "min-h-11 px-4 text-base",
+						className: "min-h-11 px-4 text-base [@media(pointer:fine)]:min-h-8",
 						variant: "outline",
 						"data-testid": "author-save",
 						disabled: document.revisions.length === 0 || document.savingVersion !== void 0,
@@ -3971,7 +4234,7 @@ function ActiveAuthorDocumentPanel(props) {
 				]
 			}),
 			status === void 0 ? null : /* @__PURE__ */ jsx("output", {
-				className: "px-4 py-1 text-sm text-doom-dim",
+				className: "px-4 py-1 text-sm text-po-dim",
 				children: status
 			}),
 			[
@@ -3981,21 +4244,28 @@ function ActiveAuthorDocumentPanel(props) {
 				"story-preview"
 			].includes(document.kind) ? /* @__PURE__ */ jsx("nav", {
 				"aria-label": "Author canvas tools",
-				className: "flex shrink-0 gap-1 overflow-x-auto border-b border-doom-border px-2 py-1 sm:hidden",
+				className: "flex shrink-0 gap-1.5 overflow-x-auto border-b border-po-border bg-po-bg px-3 py-2 sm:hidden",
 				children: [
 					"select",
 					"pan",
 					"mark",
 					"comment",
 					"draw"
-				].map((mode) => /* @__PURE__ */ jsx(Button, {
-					size: "xs",
-					variant: activeTool === mode ? "primary" : "outline",
-					className: "min-h-11 min-w-11 shrink-0",
+				].map((mode) => /* @__PURE__ */ jsxs(Button, {
+					size: "md",
+					variant: "outline",
+					className: `min-w-16 shrink-0 ${authorToolClassName(activeTool === mode, mode !== "select" && mode !== "pan")}`,
 					"aria-label": `${mode} tool`,
 					"aria-pressed": activeTool === mode,
 					onClick: () => setAuthorToolMode(sessionId, document.path, mode),
-					children: mode
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-lg leading-none",
+						children: MOBILE_TOOL_GLYPHS[mode]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm first-letter:uppercase",
+						children: mode
+					})]
 				}, mode))
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
@@ -4041,7 +4311,7 @@ function ActiveAuthorDocumentPanel(props) {
 				"video",
 				"story-preview"
 			].includes(document.kind) ? /* @__PURE__ */ jsx("div", {
-				className: "max-h-56 shrink-0 overflow-y-auto border-t border-doom-border p-2 sm:hidden",
+				className: "max-h-56 shrink-0 overflow-y-auto border-t border-po-border bg-po-bg p-3 sm:hidden",
 				children: /* @__PURE__ */ jsx(AuthorFeedbackControls, {
 					sessionId,
 					document,
@@ -4070,13 +4340,13 @@ function authorFileTab(path, preferredAlias) {
 	const normalized = normalizeAuthorPath(path);
 	return {
 		id: tabId(normalized),
-		label: preferredAlias === void 0 ? normalized.split("/").at(-1) ?? normalized : `${preferredAlias} · ${normalized.split("/").at(-1) ?? normalized}`,
+		label: preferredAlias === void 0 ? authorFileName(normalized) : `${preferredAlias} · ${authorFileName(normalized)}`,
 		retainComposer: true,
 		composerContext(sessionId) {
 			const key = authorDocumentKey(sessionId, normalized);
 			const documentPath = canvasPaths.state[key] ?? normalized;
 			const alias = canvasAliases.state[key];
-			const name = documentPath.split("/").at(-1) ?? documentPath;
+			const name = authorFileName(documentPath);
 			return {
 				kind: "author-document",
 				source: "author",
@@ -4221,6 +4491,130 @@ var Author_author_open_source_web_default = defineFill({
 	data: authorOpenSourceAction
 });
 //#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_lib/authorImageFeedback.ts
+const MAX_IMAGE_BYTES = 20971520;
+const PNG_SIGNATURE = [
+	137,
+	80,
+	78,
+	71,
+	13,
+	10,
+	26,
+	10
+];
+/** Recheck caller identity and bytes before adapting an immutable image to author tools. */
+async function authorImageFeedbackDocument(target, sessionId, signal) {
+	if (target.sessionId !== sessionId || target.mimeType !== "image/png" || !/^[a-zA-Z0-9_-]+$/u.test(sessionId) || target.id.length === 0 || target.originalPath.length === 0 || !/^[a-f0-9]{64}$/u.test(target.sourceSha256)) throw new Error("Image feedback requires a verified artifact from the active session.");
+	if (target.data.length > Math.ceil(MAX_IMAGE_BYTES / 3) * 4 || !/^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/u.test(target.data)) throw new Error("Image feedback PNG exceeds the size limit or is invalid.");
+	const binary = atob(target.data);
+	const data = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+	if (data.length > MAX_IMAGE_BYTES || PNG_SIGNATURE.some((byte, index) => data[index] !== byte)) throw new Error("Image feedback requires PNG bytes.");
+	signal.throwIfAborted();
+	const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", data));
+	const sha256 = Array.from(digest, (byte) => byte.toString(16).padStart(2, "0")).join("");
+	signal.throwIfAborted();
+	if (sha256 !== target.sourceSha256) throw new Error("Image feedback source digest does not match.");
+	return {
+		path: `image-artifact/${encodeURIComponent(target.id)}/${sha256}.png`,
+		kind: "image",
+		title: "Generated image feedback",
+		sourceSha256: sha256,
+		imageData: target.data,
+		mediaUrl: `image-artifact:${sha256}`,
+		imageArtifact: {
+			id: target.id,
+			sessionId,
+			originalPath: target.originalPath,
+			sourceSha256: sha256
+		}
+	};
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/AuthorImageFeedbackPanel.tsx
+/** Optional author controls for immutable session image artifacts. */
+function AuthorImageFeedbackPanel({ target, sessionId, submitCapture }) {
+	const enabled = sessionId === target.sessionId;
+	const [document, setDocument] = useState();
+	const [error, setError] = useState();
+	useEffect(() => {
+		setDocument(void 0);
+		setError(void 0);
+		if (!enabled || sessionId === null) return;
+		const controller = new AbortController();
+		let generation;
+		authorImageFeedbackDocument(target, sessionId, controller.signal).then((input) => {
+			if (controller.signal.aborted) return;
+			setDocument(putAuthorDocument(sessionId, input));
+			generation = focusAuthorDocument(sessionId, input.path);
+		}).catch((reason) => {
+			if (!controller.signal.aborted) setError(reason instanceof Error ? reason.message : String(reason));
+		});
+		return () => {
+			controller.abort();
+			if (generation !== void 0) releaseAuthorDocumentFocus(sessionId, generation);
+		};
+	}, [
+		enabled,
+		sessionId,
+		target
+	]);
+	const drafts = useStore(authorWorkspace.store, (state) => authorDocumentAnnotations(sessionId, document?.path ?? "", state));
+	const tool = useStore(authorWorkspace.store, (state) => sessionId === null ? "select" : state.sessions[sessionId]?.toolsByDocument[document?.path ?? ""] ?? "select");
+	if (!enabled || sessionId === null) return null;
+	if (error) return /* @__PURE__ */ jsx("output", { children: error });
+	if (!document || document.imageArtifact?.id !== target.id || document.sourceSha256 !== target.sourceSha256) return /* @__PURE__ */ jsx("output", { children: "Loading image feedback…" });
+	const displayedRegions = drafts.annotations.map((region, index) => ({
+		ordinal: index + 1,
+		region
+	}));
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex min-h-0 flex-col gap-3",
+		"data-testid": "author-image-feedback",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-po-dim",
+				children: "Original preserved. Submit annotations to request a new refinement."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sm:hidden",
+				children: /* @__PURE__ */ jsx(AuthorToolPalette, {
+					sessionId,
+					path: document.path,
+					kind: "image",
+					activeTool: tool
+				})
+			}),
+			/* @__PURE__ */ jsx(AuthorMediaView, {
+				sessionId,
+				document,
+				activeTool: tool,
+				displayedRegions,
+				pendingCandidate: drafts.candidate !== void 0
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sm:hidden",
+				children: /* @__PURE__ */ jsx(AuthorFeedbackControls, {
+					sessionId,
+					document,
+					drafts,
+					submitCapture
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/fill/ImageFeedback.author.image-feedback.web.ts
+var ImageFeedback_author_image_feedback_web_default = defineFill({
+	slot: "author.image-feedback",
+	id: "image-feedback",
+	data: {
+		version: 1,
+		panel: AuthorImageFeedbackPanel
+	}
+});
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/leader/author-toggle.web.ts
 var author_toggle_web_default = defineLeaderBinding({
 	id: "author.toggle",
@@ -4443,12 +4837,13 @@ function recordAuthorCaptureStatus(event) {
 	if (request === void 0 || [
 		"COMPLETE",
 		"FAILED",
-		"CANCELLED"
+		"CANCELLED",
+		"UNTRACKED"
 	].includes(request.status)) return;
 	if (event.status === "queued") return;
 	updateAuthorRequest(event.sessionId, request.id, (record) => ({
 		...record,
-		status: event.status === "working" ? "CHANGING" : event.status === "completed" ? "COMPLETE" : "FAILED",
+		status: event.status === "working" ? "CHANGING" : event.status === "completed" ? "COMPLETE" : event.status === "untracked" ? "UNTRACKED" : "FAILED",
 		currentOperation: event.status === "working" ? "Agent is working on this request" : void 0,
 		pendingRegions: event.status === "completed" ? [] : record.pendingRegions,
 		error: event.status === "error" ? event.error || "Request execution failed." : void 0,
@@ -4480,6 +4875,19 @@ var mode_web_default = defineMinorModeFile({
 	order: 45
 });
 //#endregion
+//#region src/types/imageFeedback.ts
+function parseAuthorImageFeedbackContribution(input) {
+	if (input === null || typeof input !== "object") return null;
+	const value = input;
+	return value.version === 1 && typeof value.panel === "function" ? value : null;
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/slot/image-feedback.web.ts
+var image_feedback_web_default = defineSlotFile({
+	slot: "author.image-feedback",
+	parse: parseAuthorImageFeedbackContribution
+});
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/slot/open-source.web.ts
 var open_source_web_default = defineSlotFile({
 	slot: "author.open-source",
@@ -4539,7 +4947,7 @@ function DescribeAuthorToolsToolCard({ toolName, args, result, running, isError
 				title: toolName,
 				children: /* @__PURE__ */ jsx("span", {
 					"data-testid": `tool-call-${toolName}`,
-					className: "min-w-0 flex-1 truncate text-doom-text",
+					className: "min-w-0 flex-1 truncate text-po-text",
 					children: describeAuthorToolsCallSummary(args)
 				})
 			}), view.shown.length > 0 || running || isError ? /* @__PURE__ */ jsxs(MessageItemBody, {
@@ -4599,7 +5007,7 @@ function OpenAuthoringFileToolCard({ args, result, running, isError, output, ope
 			title: "open_authoring_file",
 			children: /* @__PURE__ */ jsx("span", {
 				"data-testid": "tool-call-open_authoring_file",
-				className: "min-w-0 flex-1 truncate text-doom-text",
+				className: "min-w-0 flex-1 truncate text-po-text",
 				children: alias === void 0 ? requestedPath : `${alias} · ${requestedPath}`
 			})
 		}), /* @__PURE__ */ jsxs(MessageItemBody, {
@@ -4672,7 +5080,7 @@ function UseAuthorToolsToolCard({ toolName, args, result, running, isError }) {
 				title: toolName,
 				children: /* @__PURE__ */ jsx("span", {
 					"data-testid": `tool-call-${toolName}`,
-					className: "min-w-0 flex-1 truncate text-doom-text",
+					className: "min-w-0 flex-1 truncate text-po-text",
 					children: useAuthorToolsCallSummary(args)
 				})
 			}), view.shown.length > 0 || running || isError ? /* @__PURE__ */ jsxs(MessageItemBody, {
@@ -4725,7 +5133,10 @@ const webPlugin = defineWebPlugin({
 			return [via({
 				slot: "author.open-source",
 				id: "author"
-			}, Author_author_open_source_web_default)];
+			}, Author_author_open_source_web_default), via({
+				slot: "author.image-feedback",
+				id: "image-feedback"
+			}, ImageFeedback_author_image_feedback_web_default)];
 		},
 		get leaderBindings() {
 			return [via({ id: "author.author-toggle" }, author_toggle_web_default)];
@@ -4735,6 +5146,7 @@ const webPlugin = defineWebPlugin({
 		},
 		get slots() {
 			return [
+				via({ slot: "author.image-feedback" }, image_feedback_web_default),
 				via({ slot: "author.open-source" }, open_source_web_default),
 				via({ slot: "author.preview-action" }, preview_action_web_default),
 				via({ slot: "author.preview-provider" }, preview_provider_web_default)