reflet-sdk 0.7.7 → 0.7.9

package/dist/{use-sheet-tab-CacYFVjI.js → use-sheet-tab-B-q4G0Hn.js}

@@ -1,5 +1,5 @@
-import { a as EDITORS, n as DEVTOOLS_REQUEST_HEADER, r as DEVTOOLS_ROUTE_BASE, t as DEVTOOLS_ENDPOINTS } from "./protocol-BnurX0CF.js";
-import { $ as inspectReactElement, A as PencilIcon, B as DEFAULT_WIDGET_LABELS, C as CheckIcon, D as GripIcon, E as CodeIcon, G as buildElementSelection, H as clip, J as getElementRect, K as buildSelector, N as Svg, P as TargetIcon, Q as getFiberFromNode, T as CloseIcon, U as collectPageContext, V as SDK_VERSION, Y as REDACT_ATTRIBUTE, Z as redactUrl, _ as isSubmitEnter, a as uploadBlob, at as capturedViewportSize, c as useFloatingPosition, d as SelectionOutline, et as resolveComponentStack, h as startsInWidget, it as capturedFromCanvas, k as MoreIcon, l as onViewportChange, m as listenToKeydown, o as ElementPicker, ot as releaseCapture, p as listenOnPageAndWidget, q as describeElement, r as deriveTitle, rt as captureViewport, s as isWidgetOwned, tt as shortenSourcePath, u as visibleViewport, v as matchesHotkey } from "./submit-r3_M1ITo.js";
+import { a as EDITORS, n as DEVTOOLS_REQUEST_HEADER, r as DEVTOOLS_ROUTE_BASE, t as DEVTOOLS_ENDPOINTS } from "./protocol-ClxYWmhu.js";
+import { $ as inspectReactElement, A as PencilIcon, B as DEFAULT_WIDGET_LABELS, C as CheckIcon, D as GripIcon, E as CodeIcon, G as buildElementSelection, H as clip, I as TrashIcon, J as getElementRect, K as buildSelector, N as Svg, P as TargetIcon, Q as getFiberFromNode, T as CloseIcon, U as collectPageContext, V as SDK_VERSION, Y as REDACT_ATTRIBUTE, Z as redactUrl, _ as isSubmitEnter, a as uploadBlob, at as capturedViewportSize, c as useFloatingPosition, d as SelectionOutline, et as resolveComponentStack, h as startsInWidget, it as capturedFromCanvas, k as MoreIcon, l as onViewportChange, m as listenToKeydown, o as ElementPicker, ot as releaseCapture, p as listenOnPageAndWidget, q as describeElement, r as deriveTitle, rt as captureViewport, s as isWidgetOwned, tt as shortenSourcePath, u as visibleViewport, v as matchesHotkey } from "./submit-CQ5nAuwm.js";
 import { t as REFLET_Z_INDEX } from "./z-index-CwokqVq_.js";
 import { z } from "zod";
 import * as G$1 from "react";
@@ -630,7 +630,6 @@ function createProposalEndpoints(requests) {
 			files: z.array(handoffFileSchema),
 			handoff: sessionHandoffSchema
 		})),
-		createProposal: (body) => postProposal("/api/v1/sessions/proposals/create", body),
 		decideProposal: (body) => postProposal("/api/v1/sessions/proposals/decide", body),
 		editProposal: (body) => postProposal("/api/v1/sessions/proposals/edit", body),
 		markHandoffDelivered: async (body) => (await post("/api/v1/sessions/handoffs/delivered", body, z.object({ handoff: sessionHandoffSchema }))).handoff,
@@ -920,6 +919,21 @@ function operationMethods(database) {
 				id: request.result
 			};
 		},
+		cancelDraft: async (deletion) => {
+			const row = await packOperation(deletion);
+			await database.write([DRAFTS, OPERATIONS], (transaction) => {
+				const drafts = transaction.objectStore(DRAFTS);
+				const request = drafts.get(deletion.sessionKey);
+				request.onsuccess = () => {
+					const current = request.result;
+					if (current) drafts.put({
+						...current,
+						state: "cancelled"
+					});
+				};
+				transaction.objectStore(OPERATIONS).add(row);
+			});
+		},
 		deleteOperations: (ids) => database.write([OPERATIONS], (transaction) => {
 			for (const id of ids) transaction.objectStore(OPERATIONS).delete(id);
 		}),
@@ -1231,6 +1245,10 @@ async function sendOperation(context) {
 		kind: "started",
 		sessionId: (await context.api.start(payload.body)).id
 	};
+	if (payload.kind === "delete") {
+		if (context.sessionId !== null) await context.api.deleteSession(context.sessionId);
+		return { kind: "done" };
+	}
 	if (context.sessionId === null) return {
 		kind: "drop",
 		message: "This session was never created on Reflet."
@@ -1297,6 +1315,17 @@ var SessionOutbox = class {
 			}
 		});
 	};
+	async cancelSession(sessionKey) {
+		const payload = { kind: "delete" };
+		await this.options.store.cancelDraft({
+			accountKey: this.options.accountKey,
+			bytes: operationBytes(payload),
+			payload,
+			sessionKey
+		});
+		this.options.onDraftsChanged();
+		this.drain();
+	}
 	async enqueue(sessionKey, payload) {
 		const bytes = operationBytes(payload);
 		if (this.snapshot.pendingBytes + bytes > this.options.maxLocalBufferBytes) this.failStorage(BUFFER_FULL);
@@ -1357,11 +1386,12 @@ var SessionOutbox = class {
 	}
 	async drainPass() {
 		const { accountKey, store } = this.options;
+		const drafts = await store.readDrafts(accountKey);
 		const pass = {
 			outcomes: /* @__PURE__ */ new Map(),
-			sessionIds: sessionIdsOf(await store.readDrafts(accountKey))
+			sessionIds: sessionIdsOf(drafts)
 		};
-		for (const operation of await store.readOperations(accountKey)) {
+		for (const operation of await this.dropAbandonedUploads(drafts)) {
 			if (this.isHalted()) return;
 			if (pass.outcomes.get(operation.sessionKey)?.kind !== "retry") await this.runOperation(operation, pass);
 		}
@@ -1373,6 +1403,16 @@ var SessionOutbox = class {
 		await this.forgetFinishedDrafts(remaining);
 		this.afterPass(pass);
 	}
+	async dropAbandonedUploads(drafts) {
+		const { accountKey, store } = this.options;
+		const cancelledSessionKeys = new Set(drafts.filter((draft) => draft.state === "cancelled").map((draft) => draft.sessionKey));
+		const abandonedIds = [];
+		const toSend = [];
+		for (const operation of await store.readOperations(accountKey)) if (cancelledSessionKeys.has(operation.sessionKey) && operation.payload.kind !== "delete") abandonedIds.push(operation.id);
+		else toSend.push(operation);
+		await store.deleteOperations(abandonedIds);
+		return toSend;
+	}
 	afterPass(pass) {
 		if (![...pass.outcomes.values()].some((outcome) => outcome.kind === "retry")) {
 			this.failedPasses = 0;
@@ -1442,7 +1482,7 @@ var SessionOutbox = class {
 	async forgetFinishedDrafts(operations) {
 		const { accountKey, store } = this.options;
 		const waiting = new Set(operations.map((operation) => operation.sessionKey));
-		const finished = (await store.readDrafts(accountKey)).filter((draft) => draft.state === "ended" && !waiting.has(draft.sessionKey));
+		const finished = (await store.readDrafts(accountKey)).filter((draft) => (draft.state === "ended" || draft.state === "cancelled") && !waiting.has(draft.sessionKey));
 		await Promise.all(finished.map((draft) => store.deleteDraft(draft.sessionKey)));
 		if (finished.length > 0) this.options.onDraftsChanged();
 	}
@@ -1463,15 +1503,16 @@ const IDLE_SYNC = {
 	pendingOperations: 0
 };
 function visibleDraft(stored, isLive) {
+	if (stored.state === "cancelled") return [];
 	const leftOpen = stored.state === "recording" || stored.state === "paused";
-	return {
+	return [{
 		lastActiveAt: stored.lastActiveAt,
 		sessionId: stored.sessionId,
 		sessionKey: stored.sessionKey,
 		startedAt: stored.startedAt,
 		state: leftOpen && !isLive ? "interrupted" : stored.state,
 		title: stored.title
-	};
+	}];
 }
 var LocalSessionsRegistry = class {
 	accounts = /* @__PURE__ */ new Map();
@@ -1508,7 +1549,8 @@ var LocalSessionsRegistry = class {
 	async discardDraft(options) {
 		const { accountKey, sessionKey } = options;
 		const stored = (await this.store.readDrafts(accountKey)).find((candidate) => candidate.sessionKey === sessionKey);
-		if (!stored || this.live.has(sessionKey) || stored.state === "ended") return;
+		const isClosed = stored?.state === "ended" || stored?.state === "cancelled";
+		if (!stored || this.live.has(sessionKey) || isClosed) return;
 		const { outbox } = this.ensureOutbox({
 			...options,
 			maxLocalBufferBytes: null
@@ -1544,7 +1586,7 @@ var LocalSessionsRegistry = class {
 	}
 	refreshDrafts(accountKey) {
 		this.store.readDrafts(accountKey).then((stored) => {
-			const visible = stored.map((item) => visibleDraft(item, this.live.has(item.sessionKey))).sort((a, b) => b.startedAt - a.startedAt);
+			const visible = stored.flatMap((item) => visibleDraft(item, this.live.has(item.sessionKey))).sort((a, b) => b.startedAt - a.startedAt);
 			this.drafts.set(accountKey, visible);
 			this.notify();
 		}).catch(() => {
@@ -2866,6 +2908,13 @@ var RecordingController = class {
 	annotateMark(key, note) {
 		this.live?.annotate(key, cleanText(note, MAX_NOTE_CHARS));
 	}
+	async cancel() {
+		const live = this.live;
+		if (!live) return;
+		const cancelling = this.account.outbox.cancelSession(live.sessionKey);
+		this.close(live, IDLE);
+		await cancelling;
+	}
 	dispose() {
 		this.interrupt();
 		this.stopIssues();
@@ -2921,7 +2970,7 @@ var RecordingController = class {
 		});
 	}
 	async resumeDraft(sessionKey) {
-		const draft = (await this.account.store.readDrafts(this.options.account.key)).find((candidate) => candidate.sessionKey === sessionKey && candidate.state !== "ended");
+		const draft = (await this.account.store.readDrafts(this.options.account.key)).find((candidate) => candidate.sessionKey === sessionKey && candidate.state !== "ended" && candidate.state !== "cancelled");
 		if (!draft || this.isBusy()) return;
 		const voice = await this.requestVoice();
 		if (!voice) return;
@@ -3349,6 +3398,191 @@ function isDetailProcessing(detail) {
 	return transcribing || refining || comparing || isAnalysisBusy(detail.session) || detail.session.collection !== "ended";
 }
 //#endregion
+//#region src/sessions/ui/review/use-session-detail.ts
+const POLL_INTERVAL_MS = 2e3;
+function nextRequest(current) {
+	return {
+		...current,
+		count: current.count + 1
+	};
+}
+function withProposal(detail, proposal) {
+	const isKnown = detail.proposals.some((item) => item.id === proposal.id);
+	return {
+		...detail,
+		proposals: isKnown ? detail.proposals.map((item) => item.id === proposal.id ? proposal : item) : [...detail.proposals, proposal]
+	};
+}
+function withSegment(detail, segment) {
+	const others = detail.segments.filter((item) => item.id !== segment.id);
+	return {
+		...detail,
+		segments: [...others, segment].sort((a, b) => a.startMs - b.startMs)
+	};
+}
+function withEvidence(detail, evidence) {
+	return {
+		...detail,
+		evidence: detail.evidence.map((item) => item.id === evidence.id ? evidence : item)
+	};
+}
+function isHidden() {
+	return typeof document !== "undefined" && document.visibilityState === "hidden";
+}
+function usePollTick(lastAnswer) {
+	const [tick, setTick] = useState(0);
+	useEffect(() => {
+		if (lastAnswer.kind !== "ready" || !isDetailProcessing(lastAnswer.detail)) return;
+		let timer = 0;
+		const schedule = () => {
+			window.clearTimeout(timer);
+			if (!isHidden()) timer = window.setTimeout(() => setTick((current) => current + 1), POLL_INTERVAL_MS);
+		};
+		schedule();
+		document.addEventListener("visibilitychange", schedule);
+		return () => {
+			window.clearTimeout(timer);
+			document.removeEventListener("visibilitychange", schedule);
+		};
+	}, [lastAnswer]);
+	return tick;
+}
+function failedState(error, current) {
+	if (error instanceof SessionApiError && error.status === 404) return { kind: "missing" };
+	if (current.kind === "ready") return current;
+	return {
+		kind: "failed",
+		message: failureMessage(error)
+	};
+}
+function useLandedUploadTick() {
+	const { account } = useSessionWorkspace();
+	const { pendingOperations } = useSyncStatus(account.key);
+	const [seen, setSeen] = useState({
+		pending: pendingOperations,
+		tick: 0
+	});
+	if (seen.pending !== pendingOperations) setSeen({
+		pending: pendingOperations,
+		tick: pendingOperations < seen.pending ? seen.tick + 1 : seen.tick
+	});
+	return seen.tick;
+}
+function useSessionDetail(sessionId) {
+	const { api, onUnauthorized } = useSessionWorkspace();
+	const [state, setState] = useState({ kind: "loading" });
+	const [request, setRequest] = useState({
+		count: 0,
+		sessionId
+	});
+	const pollTick = usePollTick(state);
+	const uploadTick = useLandedUploadTick();
+	useEffect(() => {
+		let isCurrent = true;
+		api.detail(request.sessionId).then((detail) => isCurrent && setState({
+			detail,
+			kind: "ready"
+		}), (error) => {
+			if (isUnauthorized(error)) {
+				onUnauthorized();
+				return;
+			}
+			if (isCurrent) setState((current) => failedState(error, current));
+			const isRefresh = request.count + pollTick + uploadTick > 0;
+			if (isCurrent && isRefresh) reportFailure("The session did not refresh", error);
+		});
+		return () => {
+			isCurrent = false;
+		};
+	}, [
+		api,
+		onUnauthorized,
+		request,
+		pollTick,
+		uploadTick
+	]);
+	return {
+		patch: (update) => setState((current) => current.kind === "ready" ? {
+			detail: update(current.detail),
+			kind: "ready"
+		} : current),
+		reload: () => setRequest(nextRequest),
+		state
+	};
+}
+//#endregion
+//#region src/sessions/ui/review/transcript/remove-evidence.tsx
+const REMOVE_COPY = "Remove this screenshot? The image is deleted for good. Briefs you already downloaded keep their copy.";
+function useFocusWhen(shouldFocus) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (shouldFocus) ref.current?.focus();
+	}, [shouldFocus]);
+	return ref;
+}
+function RemoveConfirmation({ evidence, onCancel, removal }) {
+	const { api } = useSessionWorkspace();
+	const run = useSessionAction();
+	const cancelRef = useFocusWhen(true);
+	const remove = async () => {
+		const removed = await run("The screenshot was not removed", () => api.removeEvidence(evidence.id));
+		if (removed !== null) {
+			removal.review.patch((detail) => withEvidence(detail, removed));
+			removal.review.reload();
+			removal.onRemoved(removed.id);
+			announce("Screenshot removed");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-ses-banner",
+		children: [/* @__PURE__ */ jsx("p", { children: REMOVE_COPY }), /* @__PURE__ */ jsxs("div", {
+			className: "dt-actions",
+			children: [/* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				"data-variant": "danger",
+				onClick: remove,
+				type: "button",
+				children: "Remove"
+			}), /* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				onClick: onCancel,
+				ref: cancelRef,
+				type: "button",
+				children: "Cancel"
+			})]
+		})]
+	});
+}
+function RemoveEvidence({ evidence, removal }) {
+	const [isConfirming, setIsConfirming] = useState(false);
+	const [hasCancelled, setHasCancelled] = useState(false);
+	const triggerRef = useFocusWhen(hasCancelled);
+	if (isConfirming) return /* @__PURE__ */ jsx(RemoveConfirmation, {
+		evidence,
+		onCancel: () => {
+			setIsConfirming(false);
+			setHasCancelled(true);
+		},
+		removal
+	});
+	const label = `Remove screenshot at ${formatClock(evidence.atMs)}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: "dt-hover-actions",
+		children: /* @__PURE__ */ jsx("button", {
+			"aria-label": label,
+			className: "icon-btn glass",
+			onClick: () => {
+				setIsConfirming(true);
+				setHasCancelled(false);
+			},
+			ref: triggerRef,
+			title: label,
+			type: "button",
+			children: /* @__PURE__ */ jsx(TrashIcon, {})
+		})
+	});
+}
+//#endregion
 //#region src/sessions/ui/session-icons.tsx
 function MicIcon() {
 	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("rect", {
@@ -3375,6 +3609,22 @@ function ClockIcon() {
 		r: "8.5"
 	}), /* @__PURE__ */ jsx("path", { d: "M12 7.5V12l3 2" })] });
 }
+function LockIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("rect", {
+		height: "10",
+		rx: "2.5",
+		width: "15",
+		x: "4.5",
+		y: "10.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M8 10.5V8a4 4 0 0 1 8 0v2.5" })] });
+}
+function TeamIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "9",
+		cy: "8.5",
+		r: "3.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M2.5 20a6.5 6.5 0 0 1 13 0M16 5.2a3.5 3.5 0 0 1 0 6.6M18.5 14.4a6.5 6.5 0 0 1 3 5.6" })] });
+}
 function IntentionIcon() {
 	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1.1 1.3 1.1 2.2h5c0-.9.5-1.7 1.1-2.2A6 6 0 0 0 12 3z" }) });
 }
@@ -3399,6 +3649,50 @@ function ImageIcon() {
 	] });
 }
 //#endregion
+//#region src/sessions/ui/recording/cancel-confirmation.tsx
+function CancelConfirmation({ onCancelRecording, onKeepRecording }) {
+	const confirmationRef = useRef(null);
+	const keepRef = useFocusWhen(true);
+	useEffect(() => {
+		const confirmation = confirmationRef.current;
+		if (!confirmation) return;
+		const keepOnEscape = (event) => {
+			if (event.key === "Escape" && !event.isComposing) {
+				event.stopPropagation();
+				onKeepRecording();
+			}
+		};
+		confirmation.addEventListener("keydown", keepOnEscape);
+		return () => confirmation.removeEventListener("keydown", keepOnEscape);
+	}, [onKeepRecording]);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-labelledby": "rf-rec-cancel-copy",
+		className: "dt-rec-note",
+		ref: confirmationRef,
+		role: "alertdialog",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: "rf-rec-cancel-copy",
+				children: "Cancel this recording? Nothing from it is kept."
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				"data-variant": "danger",
+				onClick: onCancelRecording,
+				type: "button",
+				children: "Discard"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				onClick: onKeepRecording,
+				ref: keepRef,
+				type: "button",
+				children: "Keep recording"
+			})
+		]
+	});
+}
+//#endregion
 //#region src/sessions/ui/recording/level-meter.tsx
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 /** The level changes many times a second: it goes straight to a CSS variable, never through React state. */
@@ -3461,25 +3755,19 @@ function MarkNote({ focusOnOpen, onClose }) {
 //#endregion
 //#region src/sessions/ui/recording/recording-bar.tsx
 const MARK_HOTKEY = "alt+shift+m";
-function SyncChip() {
-	const { account } = useSessionWorkspace();
-	const sync = useSyncStatus(account.key);
-	let label = "Saved";
-	if (sync.blockedBy === "storage") label = "Not saved on this device";
-	else if (!sync.isOnline) label = "Offline — kept on this device";
-	else if (sync.pendingOperations > 0) label = `${sync.pendingOperations} waiting to upload`;
-	return /* @__PURE__ */ jsx("span", {
-		className: "dt-chip",
-		children: label
-	});
+function syncProblem(sync) {
+	if (sync.blockedBy === "storage") return "Not saved on this device";
+	if (!sync.isOnline) return "Offline — kept on this device";
+	return null;
 }
-function statusText(snapshot, maxDurationMs) {
+function statusText(snapshot, sync, maxDurationMs) {
 	if (snapshot.phase === "failed") return snapshot.failure?.message ?? "Recording stopped.";
 	if (snapshot.phase === "finishing") return "Finishing…";
 	if (snapshot.pauseReason === "limit") return "Time limit reached · Finish to review the session";
 	if (snapshot.pauseReason === "hidden") return "Paused because the tab was hidden";
-	if (snapshot.phase === "paused") return "Paused · nothing is recorded";
 	if (snapshot.limitsReached.length > 0) return `Limit reached for ${snapshot.limitsReached.join(", ")}`;
+	const problem = syncProblem(sync);
+	if (problem) return problem;
 	return snapshot.nearLimit ? `${minutesLeft(maxDurationMs - snapshot.activeMs)} min left` : "";
 }
 function markMoment(recorder, focus, setOpenMark) {
@@ -3513,42 +3801,67 @@ function useMarkMoment(snapshot, barRef) {
 	};
 }
 function CaptureButtons({ canCapture, onMark, onPointAt }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		"aria-keyshortcuts": "Alt+Shift+M",
+		"aria-label": "Mark moment",
 		className: "dt-btn",
+		"data-icon-only": true,
 		disabled: !canCapture,
 		onClick: onMark,
 		title: "Mark moment (Alt+Shift+M)",
 		type: "button",
-		children: [/* @__PURE__ */ jsx(MarkIcon, {}), "Mark moment"]
+		children: /* @__PURE__ */ jsx(MarkIcon, {})
 	}), /* @__PURE__ */ jsx("button", {
+		"aria-label": "Point at element",
 		className: "dt-btn",
+		"data-icon-only": true,
 		disabled: !canCapture,
 		onClick: onPointAt,
+		title: "Point at element",
 		type: "button",
-		children: "Point at element"
+		children: /* @__PURE__ */ jsx(TargetIcon, {})
 	})] });
 }
 function PauseToggle({ snapshot }) {
 	const { recorder } = useSessionWorkspace();
-	if (snapshot.phase === "recording") return /* @__PURE__ */ jsxs("button", {
+	if (snapshot.phase === "recording") return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Pause",
 		className: "dt-btn",
+		"data-icon-only": true,
 		onClick: () => recorder.pause("paused"),
+		title: "Pause",
 		type: "button",
-		children: [/* @__PURE__ */ jsx(PauseIcon, {}), "Pause"]
+		children: /* @__PURE__ */ jsx(PauseIcon, {})
 	});
-	if (snapshot.phase === "paused" && snapshot.pauseReason !== "limit") return /* @__PURE__ */ jsxs("button", {
+	if (snapshot.phase === "paused" && snapshot.pauseReason !== "limit") return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Resume",
 		className: "dt-btn",
+		"data-icon-only": true,
 		onClick: () => recorder.resume(),
+		title: "Resume",
 		type: "button",
-		children: [/* @__PURE__ */ jsx(PlayIcon, {}), "Resume"]
+		children: /* @__PURE__ */ jsx(PlayIcon, {})
 	});
 	return null;
 }
-function RecordingControls({ onFinish, onMark, onPointAt, snapshot }) {
+function CancelButton({ hasKeptRecording, onAskToCancel }) {
+	const buttonRef = useFocusWhen(hasKeptRecording);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Cancel recording",
+		className: "dt-btn",
+		"data-icon-only": true,
+		onClick: onAskToCancel,
+		ref: buttonRef,
+		title: "Cancel recording",
+		type: "button",
+		children: /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+}
+function RecordingControls({ hasKeptRecording, onAskToCancel, onFinish, onMark, onPointAt, snapshot }) {
 	const { phase } = snapshot;
+	const isActive = phase === "recording" || phase === "paused";
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		(phase === "recording" || phase === "paused") && /* @__PURE__ */ jsx(CaptureButtons, {
+		isActive && /* @__PURE__ */ jsx(CaptureButtons, {
 			canCapture: phase === "recording",
 			onMark,
 			onPointAt
@@ -3561,6 +3874,10 @@ function RecordingControls({ onFinish, onMark, onPointAt, snapshot }) {
 			onClick: onFinish,
 			type: "button",
 			children: "Finish"
+		}),
+		isActive && /* @__PURE__ */ jsx(CancelButton, {
+			hasKeptRecording,
+			onAskToCancel
 		})
 	] });
 }
@@ -3573,10 +3890,14 @@ function RecordingClock({ activeMs }) {
 		children: formatClock(activeMs)
 	});
 }
-function RecordingBar({ onFinish, onPointAt, snapshot }) {
-	const { identity, recorder } = useSessionWorkspace();
+function RecordingBar({ onCancel, onFinish, onPointAt, snapshot }) {
+	const { account, identity, recorder } = useSessionWorkspace();
+	const sync = useSyncStatus(account.key);
 	const barRef = useRef(null);
 	const { markWithNote, openMark } = useMarkMoment(snapshot, barRef);
+	const [cancelStep, setCancelStep] = useState("idle");
+	const keepRecording = useCallback(() => setCancelStep("kept"), []);
+	const showsMeter = snapshot.phase === "recording" || snapshot.phase === "paused";
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": "Session recording",
 		className: "dt-rec glass",
@@ -3588,24 +3909,29 @@ function RecordingBar({ onFinish, onPointAt, snapshot }) {
 				"aria-hidden": "true",
 				className: "dt-rec-dot"
 			}),
-			snapshot.phase === "recording" && /* @__PURE__ */ jsx(LevelMeter, { recorder }),
+			showsMeter && /* @__PURE__ */ jsx(LevelMeter, { recorder }),
 			/* @__PURE__ */ jsx(RecordingClock, { activeMs: snapshot.activeMs }),
 			/* @__PURE__ */ jsx("span", {
 				"aria-live": "polite",
 				className: "dt-rec-status",
-				children: statusText(snapshot, identity.limits.maxDurationMs)
+				children: statusText(snapshot, sync, identity.limits.maxDurationMs)
 			}),
 			/* @__PURE__ */ jsx(RecordingControls, {
+				hasKeptRecording: cancelStep === "kept",
+				onAskToCancel: () => setCancelStep("confirming"),
 				onFinish,
 				onMark: markWithNote,
 				onPointAt,
 				snapshot
 			}),
-			/* @__PURE__ */ jsx(SyncChip, {}),
 			openMark && /* @__PURE__ */ jsx(MarkNote, {
 				focusOnOpen: openMark.focus,
 				onClose: openMark.closeNote
-			}, openMark.key)
+			}, openMark.key),
+			cancelStep === "confirming" && /* @__PURE__ */ jsx(CancelConfirmation, {
+				onCancelRecording: onCancel,
+				onKeepRecording: keepRecording
+			})
 		]
 	});
 }
@@ -3641,7 +3967,16 @@ function RecordingLayer({ onFinished }) {
 			reportFailure("The session did not finish", error, finish);
 		}
 	};
+	const cancel = async () => {
+		setIsPointing(false);
+		try {
+			await recorder.cancel();
+		} catch (error) {
+			reportFailure("The recording was not deleted", error);
+		}
+	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RecordingBar, {
+		onCancel: cancel,
 		onFinish: finish,
 		onPointAt: () => setIsPointing(true),
 		snapshot
@@ -3824,6 +4159,15 @@ function evidenceCaption(evidence) {
 	const element = evidence.element ? ` · ${evidence.element.label}` : "";
 	return `${TRIGGER_LABELS[evidence.trigger]}${element}`;
 }
+function ShotCaption({ atMs, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "dt-ses-caption",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "dt-ses-caption-time",
+			children: [/* @__PURE__ */ jsx(ClockIcon, {}), formatClock(atMs)]
+		}), children]
+	});
+}
 const hasViewport = (frame) => frame.viewportWidth > 0 && frame.viewportHeight > 0;
 const percent = (value, total) => `${value / total * 100}%`;
 function percentBox(rect, frame) {
@@ -3931,12 +4275,18 @@ function HistoryEntry({ context, entry }) {
 	const evidenceIds = new Set(entry.evidenceIds);
 	const evidence = context.detail.contributedEvidence.filter((item) => evidenceIds.has(item.id));
 	return /* @__PURE__ */ jsxs("li", {
-		className: "dt-ses-history",
+		className: "dt-ses-history dt-openable",
 		"data-removed": entry.detachedAt !== null,
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "dt-ses-subhead",
-				children: entryTitle(entry)
+				children: entry.session.canOpen ? /* @__PURE__ */ jsx("button", {
+					className: "dt-open",
+					onClick: () => context.navigation.onOpenSession(entry.session.id),
+					title: "Open session",
+					type: "button",
+					children: entryTitle(entry)
+				}) : entryTitle(entry)
 			}),
 			entry.detachedAt !== null && /* @__PURE__ */ jsxs("p", {
 				className: "dt-meta",
@@ -3953,12 +4303,6 @@ function HistoryEntry({ context, entry }) {
 			}) : /* @__PURE__ */ jsx(HistoryExtracts, {
 				evidence,
 				quotes: entry.quotes
-			}),
-			entry.session.canOpen && /* @__PURE__ */ jsx("button", {
-				className: "dt-ses-link",
-				onClick: () => context.navigation.onOpenSession(entry.session.id),
-				type: "button",
-				children: "Open session"
 			})
 		]
 	});
@@ -4363,119 +4707,6 @@ function SaveProblemMessage({ onReload, problem }) {
 	});
 }
 //#endregion
-//#region src/sessions/ui/review/use-session-detail.ts
-const POLL_INTERVAL_MS = 2e3;
-function nextRequest(current) {
-	return {
-		...current,
-		count: current.count + 1
-	};
-}
-function withProposal(detail, proposal) {
-	const isKnown = detail.proposals.some((item) => item.id === proposal.id);
-	return {
-		...detail,
-		proposals: isKnown ? detail.proposals.map((item) => item.id === proposal.id ? proposal : item) : [...detail.proposals, proposal]
-	};
-}
-function withSegment(detail, segment) {
-	const others = detail.segments.filter((item) => item.id !== segment.id);
-	return {
-		...detail,
-		segments: [...others, segment].sort((a, b) => a.startMs - b.startMs)
-	};
-}
-function withEvidence(detail, evidence) {
-	return {
-		...detail,
-		evidence: detail.evidence.map((item) => item.id === evidence.id ? evidence : item)
-	};
-}
-function isHidden() {
-	return typeof document !== "undefined" && document.visibilityState === "hidden";
-}
-function usePollTick(lastAnswer) {
-	const [tick, setTick] = useState(0);
-	useEffect(() => {
-		if (lastAnswer.kind !== "ready" || !isDetailProcessing(lastAnswer.detail)) return;
-		let timer = 0;
-		const schedule = () => {
-			window.clearTimeout(timer);
-			if (!isHidden()) timer = window.setTimeout(() => setTick((current) => current + 1), POLL_INTERVAL_MS);
-		};
-		schedule();
-		document.addEventListener("visibilitychange", schedule);
-		return () => {
-			window.clearTimeout(timer);
-			document.removeEventListener("visibilitychange", schedule);
-		};
-	}, [lastAnswer]);
-	return tick;
-}
-function failedState(error, current) {
-	if (error instanceof SessionApiError && error.status === 404) return { kind: "missing" };
-	if (current.kind === "ready") return current;
-	return {
-		kind: "failed",
-		message: failureMessage(error)
-	};
-}
-function useLandedUploadTick() {
-	const { account } = useSessionWorkspace();
-	const { pendingOperations } = useSyncStatus(account.key);
-	const [seen, setSeen] = useState({
-		pending: pendingOperations,
-		tick: 0
-	});
-	if (seen.pending !== pendingOperations) setSeen({
-		pending: pendingOperations,
-		tick: pendingOperations < seen.pending ? seen.tick + 1 : seen.tick
-	});
-	return seen.tick;
-}
-function useSessionDetail(sessionId) {
-	const { api, onUnauthorized } = useSessionWorkspace();
-	const [state, setState] = useState({ kind: "loading" });
-	const [request, setRequest] = useState({
-		count: 0,
-		sessionId
-	});
-	const pollTick = usePollTick(state);
-	const uploadTick = useLandedUploadTick();
-	useEffect(() => {
-		let isCurrent = true;
-		api.detail(request.sessionId).then((detail) => isCurrent && setState({
-			detail,
-			kind: "ready"
-		}), (error) => {
-			if (isUnauthorized(error)) {
-				onUnauthorized();
-				return;
-			}
-			if (isCurrent) setState((current) => failedState(error, current));
-			const isRefresh = request.count + pollTick + uploadTick > 0;
-			if (isCurrent && isRefresh) reportFailure("The session did not refresh", error);
-		});
-		return () => {
-			isCurrent = false;
-		};
-	}, [
-		api,
-		onUnauthorized,
-		request,
-		pollTick,
-		uploadTick
-	]);
-	return {
-		patch: (update) => setState((current) => current.kind === "ready" ? {
-			detail: update(current.detail),
-			kind: "ready"
-		} : current),
-		reload: () => setRequest(nextRequest),
-		state
-	};
-}
-//#endregion
 //#region src/sessions/ui/review/proposals/proposal-editor.tsx
 const MAX_LIST_ITEMS = 8;
 function lines(text) {
@@ -5252,73 +5483,6 @@ function UpdateCard({ context, continuation }) {
 	});
 }
 //#endregion
-//#region src/sessions/ui/review/transcript/remove-evidence.tsx
-const REMOVE_COPY = "Remove this screenshot? The image is deleted for good. Briefs you already downloaded keep their copy.";
-function useFocusWhen(shouldFocus) {
-	const ref = useRef(null);
-	useEffect(() => {
-		if (shouldFocus) ref.current?.focus();
-	}, [shouldFocus]);
-	return ref;
-}
-function RemoveConfirmation({ evidence, onCancel, removal }) {
-	const { api } = useSessionWorkspace();
-	const run = useSessionAction();
-	const cancelRef = useFocusWhen(true);
-	const remove = async () => {
-		const removed = await run("The screenshot was not removed", () => api.removeEvidence(evidence.id));
-		if (removed !== null) {
-			removal.review.patch((detail) => withEvidence(detail, removed));
-			removal.review.reload();
-			removal.onRemoved(removed.id);
-			announce("Screenshot removed");
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-ses-banner",
-		children: [/* @__PURE__ */ jsx("p", { children: REMOVE_COPY }), /* @__PURE__ */ jsxs("div", {
-			className: "dt-actions",
-			children: [/* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				"data-variant": "danger",
-				onClick: remove,
-				type: "button",
-				children: "Remove"
-			}), /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: onCancel,
-				ref: cancelRef,
-				type: "button",
-				children: "Cancel"
-			})]
-		})]
-	});
-}
-function RemoveEvidence({ evidence, removal }) {
-	const [isConfirming, setIsConfirming] = useState(false);
-	const [hasCancelled, setHasCancelled] = useState(false);
-	const triggerRef = useFocusWhen(hasCancelled);
-	if (isConfirming) return /* @__PURE__ */ jsx(RemoveConfirmation, {
-		evidence,
-		onCancel: () => {
-			setIsConfirming(false);
-			setHasCancelled(true);
-		},
-		removal
-	});
-	return /* @__PURE__ */ jsx("button", {
-		"aria-label": `Remove screenshot at ${formatClock(evidence.atMs)}`,
-		className: "dt-ses-link",
-		onClick: () => {
-			setIsConfirming(true);
-			setHasCancelled(false);
-		},
-		ref: triggerRef,
-		type: "button",
-		children: "Remove"
-	});
-}
-//#endregion
 //#region src/sessions/ui/review/moment/moment-labels.ts
 const URL_PATH = /^[a-z][a-z\d+.-]*:\/\/[^/?#]*([^?#]*)/i;
 const KIND_LABELS = {
@@ -5338,7 +5502,7 @@ function contextKindLabel(item) {
 	return KIND_LABELS[item.kind];
 }
 function pagePath(url) {
-	if (!url) return null;
+	if (!url || url.startsWith("file:")) return null;
 	return URL_PATH.exec(url)?.[1] || "/";
 }
 function contextLine$1(item) {
@@ -5852,69 +6016,262 @@ function MomentView({ handlers, segmentId, session }) {
 	});
 }
 //#endregion
-//#region src/sessions/ui/review/screens/callout-report.ts
-const clampFraction = (value) => Math.min(1, Math.max(0, value));
-function visibleFraction(rect, frame) {
-	if (frame.viewportWidth <= 0 || frame.viewportHeight <= 0) return null;
-	const left = clampFraction(rect.x / frame.viewportWidth);
-	const top = clampFraction(rect.y / frame.viewportHeight);
-	const right = clampFraction((rect.x + rect.width) / frame.viewportWidth);
-	const bottom = clampFraction((rect.y + rect.height) / frame.viewportHeight);
-	if (right <= left || bottom <= top) return null;
-	return {
-		height: bottom - top,
-		width: right - left,
-		x: left,
-		y: top
+//#region src/sessions/ui/review/processing-steps.ts
+function uploadStep(pendingUploads) {
+	return pendingUploads > 0 ? {
+		analyzeLabel: null,
+		key: "upload",
+		label: "Uploading",
+		state: "active"
+	} : {
+		analyzeLabel: null,
+		key: "upload",
+		label: "Uploaded",
+		state: "done"
 	};
 }
-function shownScreenshots(detail) {
-	const shots = /* @__PURE__ */ new Map();
-	for (const evidence of detail.evidence) {
-		const url = evidence.status === "available" ? evidence.image?.url : null;
-		if (evidence.image && url) shots.set(evidence.id, {
-			evidence,
-			image: {
-				...evidence.image,
-				url
-			}
-		});
-	}
-	return shots;
-}
-const readingOrderY = (callout) => callout.outline?.y ?? 0;
-function calloutReport(detail) {
-	const shots = shownScreenshots(detail);
-	const screensById = /* @__PURE__ */ new Map();
-	const unplaced = [];
-	const reported = detail.proposals.filter((proposal) => proposal.mergedIntoId === null && proposal.attachment === null);
-	for (const proposal of reported) {
-		const label = proposal.callout ?? proposal.need;
-		const target = proposal.calloutTarget;
-		const shot = target ? shots.get(target.evidenceId) : void 0;
-		if (!(target && shot)) {
-			unplaced.push({
-				label,
-				outline: null,
-				proposal
-			});
-			continue;
-		}
-		const { frame } = shot.evidence;
-		const outline = target.element && frame ? visibleFraction(target.element.rect, frame) : null;
-		const screen = screensById.get(shot.evidence.id) ?? {
-			...shot,
-			callouts: []
+function transcriptionStep(detail, isAnalysisQueued) {
+	const voice = detail.segments.filter((segment) => segment.source === "voice");
+	const transcribing = voice.filter(({ transcription }) => transcription.state === "pending" || transcription.state === "running").length;
+	const step = {
+		analyzeLabel: null,
+		key: "transcription"
+	};
+	if (transcribing > 0) {
+		const transcribed = voice.length - transcribing;
+		return {
+			...step,
+			label: "Transcribing your voice",
+			progress: {
+				done: transcribed,
+				total: voice.length,
+				valueText: `${transcribed} of ${countLabel(voice.length, "passage")}`
+			},
+			state: "active"
 		};
-		screen.callouts.push({
-			label,
-			outline,
-			proposal
-		});
-		screensById.set(shot.evidence.id, screen);
 	}
-	let number = 0;
-	const numbered = (callout) => {
+	if (voice.length > 0) return {
+		...step,
+		label: "Voice transcribed",
+		state: "done"
+	};
+	return isAnalysisQueued ? {
+		...step,
+		label: "Transcribe your voice",
+		state: "waiting"
+	} : null;
+}
+function comparedRevision(detail) {
+	const { continuation } = detail;
+	return continuation?.intention && continuation.contribution.detachedAt === null ? continuation.contribution.baseRevision : null;
+}
+function intentionStep(detail, isAnalysisQueued) {
+	const { session } = detail;
+	const { analysis } = session;
+	const revision = comparedRevision(detail);
+	const isComparing = revision !== null;
+	const step = {
+		analyzeLabel: null,
+		key: "intentions"
+	};
+	if (analysis.state === "running") {
+		const label = isComparing ? `Comparing with revision ${revision}…` : "Finding intentions with AI…";
+		return {
+			...step,
+			label,
+			state: "active"
+		};
+	}
+	if (analysis.state === "waiting" || isAnalysisQueued) {
+		const label = isComparing ? `Compare with revision ${revision}` : "Find intentions with AI";
+		return {
+			...step,
+			label,
+			state: "waiting"
+		};
+	}
+	if (analysis.state === "failed") {
+		const failure = isComparing ? "The comparison failed" : "Analysis failed";
+		const reason = analysis.error ?? "Unknown error.";
+		return {
+			...step,
+			analyzeLabel: "Try again",
+			label: `${failure}: ${reason}`,
+			state: "failed"
+		};
+	}
+	if (isAnalysisOutdated(session)) return {
+		...step,
+		analyzeLabel: "Analyze again",
+		label: "The transcript changed since the analysis.",
+		state: "waiting"
+	};
+	if (analysis.state === "idle") return detail.segments.length > 0 ? {
+		...step,
+		analyzeLabel: "Analyze",
+		label: "Not analyzed yet.",
+		state: "waiting"
+	} : null;
+	const label = isComparing ? `Compared with revision ${revision}` : `Found ${countLabel(analysis.proposalCount ?? 0, "intention")}`;
+	return {
+		...step,
+		label,
+		state: "done"
+	};
+}
+function processingSteps(detail, pendingUploads) {
+	if (detail.session.collection !== "ended") return [];
+	const isAnalysisQueued = pendingUploads > 0 && detail.session.analysis.state === "idle";
+	return [
+		detail.session.isMine ? uploadStep(pendingUploads) : null,
+		transcriptionStep(detail, isAnalysisQueued),
+		intentionStep(detail, isAnalysisQueued)
+	].filter((step) => step !== null);
+}
+//#endregion
+//#region src/sessions/ui/review/processing-progress.tsx
+function useProcessingSteps(detail) {
+	const { account } = useSessionWorkspace();
+	const sync = useSyncStatus(account.key);
+	return processingSteps(detail, detail.session.isMine ? sync.pendingOperations : 0);
+}
+function AnalyzeButton({ detail, label, review }) {
+	const { api } = useSessionWorkspace();
+	const run = useSessionAction();
+	const analyze = async () => {
+		const status = await run("The analysis did not start", () => api.analyze(detail.session.id));
+		if (status) review.patch((current) => ({
+			...current,
+			session: {
+				...current.session,
+				analysis: status
+			}
+		}));
+	};
+	return /* @__PURE__ */ jsx("button", {
+		className: "dt-btn",
+		onClick: analyze,
+		type: "button",
+		children: label
+	});
+}
+function ProgressBar({ label, progress }) {
+	if (!progress) return /* @__PURE__ */ jsx("span", {
+		"aria-label": label,
+		className: "dt-ses-bar",
+		role: "progressbar",
+		children: /* @__PURE__ */ jsx("span", { "data-indeterminate": "true" })
+	});
+	const { done, total, valueText } = progress;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": label,
+		"aria-valuemax": total,
+		"aria-valuemin": 0,
+		"aria-valuenow": done,
+		"aria-valuetext": valueText,
+		className: "dt-ses-bar",
+		role: "progressbar",
+		title: valueText,
+		children: /* @__PURE__ */ jsx("span", { style: { width: `${done / total * 100}%` } })
+	});
+}
+function StepRow({ detail, review, step }) {
+	return /* @__PURE__ */ jsxs("li", {
+		"data-state": step.state,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: step.label }),
+			step.analyzeLabel && detail.session.canEdit && /* @__PURE__ */ jsx(AnalyzeButton, {
+				detail,
+				label: step.analyzeLabel,
+				review
+			}),
+			step.state === "active" && /* @__PURE__ */ jsx(ProgressBar, {
+				label: step.label,
+				progress: step.progress
+			})
+		]
+	});
+}
+function ProcessingProgress({ detail, fillsPanel, isProcessing, review, steps }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: "dt-ses-progress",
+		"data-fills-panel": fillsPanel,
+		children: isProcessing && /* @__PURE__ */ jsx("ol", {
+			"aria-label": "Processing",
+			className: "dt-ses-steps",
+			children: steps.map((step) => /* @__PURE__ */ jsx(StepRow, {
+				detail,
+				review,
+				step
+			}, step.key))
+		})
+	});
+}
+//#endregion
+//#region src/sessions/ui/review/screens/callout-report.ts
+const clampFraction = (value) => Math.min(1, Math.max(0, value));
+function visibleFraction(rect, frame) {
+	if (frame.viewportWidth <= 0 || frame.viewportHeight <= 0) return null;
+	const left = clampFraction(rect.x / frame.viewportWidth);
+	const top = clampFraction(rect.y / frame.viewportHeight);
+	const right = clampFraction((rect.x + rect.width) / frame.viewportWidth);
+	const bottom = clampFraction((rect.y + rect.height) / frame.viewportHeight);
+	if (right <= left || bottom <= top) return null;
+	return {
+		height: bottom - top,
+		width: right - left,
+		x: left,
+		y: top
+	};
+}
+function shownScreenshots(detail) {
+	const shots = /* @__PURE__ */ new Map();
+	for (const evidence of detail.evidence) {
+		const url = evidence.status === "available" ? evidence.image?.url : null;
+		if (evidence.image && url) shots.set(evidence.id, {
+			evidence,
+			image: {
+				...evidence.image,
+				url
+			}
+		});
+	}
+	return shots;
+}
+const readingOrderY = (callout) => callout.outline?.y ?? 0;
+function calloutReport(detail) {
+	const shots = shownScreenshots(detail);
+	const screensById = /* @__PURE__ */ new Map();
+	const unplaced = [];
+	const reported = detail.proposals.filter((proposal) => proposal.mergedIntoId === null && proposal.attachment === null);
+	for (const proposal of reported) {
+		const label = proposal.callout ?? proposal.need;
+		const target = proposal.calloutTarget;
+		const shot = target ? shots.get(target.evidenceId) : void 0;
+		if (!(target && shot)) {
+			unplaced.push({
+				label,
+				outline: null,
+				proposal
+			});
+			continue;
+		}
+		const { frame } = shot.evidence;
+		const outline = target.element && frame ? visibleFraction(target.element.rect, frame) : null;
+		const screen = screensById.get(shot.evidence.id) ?? {
+			...shot,
+			callouts: []
+		};
+		screen.callouts.push({
+			label,
+			outline,
+			proposal
+		});
+		screensById.set(shot.evidence.id, screen);
+	}
+	let number = 0;
+	const numbered = (callout) => {
 		number += 1;
 		return {
 			...callout,
@@ -6036,6 +6393,150 @@ function layoutCallouts(options) {
 	};
 }
 //#endregion
+//#region src/sessions/ui/review/optimistic-change.ts
+function useOptimisticChange(review) {
+	const run = useSessionAction();
+	const applyChange = async (change) => {
+		review.patch(change.show);
+		const saved = await run(change.failureLabel, change.request, () => {
+			applyChange(change);
+		});
+		if (saved === null) {
+			review.patch(change.rollback);
+			return null;
+		}
+		review.patch((detail) => change.settle(detail, saved));
+		return saved;
+	};
+	return applyChange;
+}
+//#endregion
+//#region src/sessions/ui/review/proposals/use-proposal-actions.ts
+const NOTICE_NEED_LENGTH = 60;
+const DECISION_NOTICE = {
+	dismissed: "Dismissed",
+	kept: "Confirmed",
+	later: "Saved for later",
+	pending: "Back to undecided"
+};
+function quotedNeed(need) {
+	return `“${need.length > NOTICE_NEED_LENGTH ? `${need.slice(0, 59)}…` : need}”`;
+}
+function decisionToggle(actions, proposal, decision) {
+	return (event) => {
+		if (event.detail > 1) return;
+		actions.decide([proposal], proposal.decision === decision ? "pending" : decision);
+	};
+}
+function useProposalSave(review) {
+	const { api } = useSessionWorkspace();
+	const run = useSessionAction();
+	return async (failureLabel, request) => {
+		const proposal = await run(failureLabel, () => request(api));
+		if (proposal) review.patch((detail) => withProposal(detail, proposal));
+		return proposal;
+	};
+}
+function withDecisions(decisions) {
+	return (detail) => ({
+		...detail,
+		proposals: detail.proposals.map((item) => {
+			const decision = decisions.get(item.id);
+			return decision ? {
+				...item,
+				decision
+			} : item;
+		})
+	});
+}
+function decisionNotice(proposals, decision) {
+	const [only] = proposals;
+	const subject = proposals.length === 1 && only ? quotedNeed(only.need) : countLabel(proposals.length, "intention");
+	return `${DECISION_NOTICE[decision]} ${subject}`;
+}
+function useDecide(review) {
+	const { api } = useSessionWorkspace();
+	const applyChange = useOptimisticChange(review);
+	const changeDecisions = async (failureLabel, from, to) => {
+		const saved = await applyChange({
+			failureLabel,
+			request: () => Promise.all([...to].map(([proposalId, decision]) => api.decideProposal({
+				decision,
+				proposalId
+			}))),
+			rollback: withDecisions(from),
+			settle: (detail, proposals) => proposals.reduce(withProposal, detail),
+			show: withDecisions(to)
+		});
+		if (!saved && to.size > 1) review.reload();
+		return saved;
+	};
+	return async (proposals, decision) => {
+		const previous = new Map(proposals.map((proposal) => [proposal.id, proposal.decision]));
+		const next = new Map(proposals.map((proposal) => [proposal.id, decision]));
+		if (!await changeDecisions("The decision was not saved", previous, next)) return;
+		announce(decisionNotice(proposals, decision), {
+			label: "Undo",
+			run: async () => {
+				if (await changeDecisions("The decision was not undone", next, previous)) announce("Decision undone");
+			}
+		});
+	};
+}
+function withFeedbackIds(feedbackIds) {
+	return (detail) => ({
+		...detail,
+		proposals: detail.proposals.map((item) => {
+			const feedbackId = feedbackIds.get(item.id);
+			return feedbackId ? {
+				...item,
+				feedbackId
+			} : item;
+		})
+	});
+}
+function useAddToBoard(review) {
+	const { api } = useSessionWorkspace();
+	const run = useSessionAction();
+	return async (proposals) => {
+		const created = await Promise.all(proposals.map(async (proposal) => {
+			const result = await run(`${quotedNeed(proposal.need)} was not added to the board`, () => api.createFeedback(proposal.id));
+			return result ? [proposal.id, result.feedbackId] : null;
+		}));
+		const added = new Map(created.flatMap((entry) => entry ? [entry] : []));
+		if (added.size === 0) return;
+		review.patch(withFeedbackIds(added));
+		const onlyAdded = added.size === 1 ? proposals.find((proposal) => added.has(proposal.id)) : void 0;
+		announce(onlyAdded ? `Added ${quotedNeed(onlyAdded.need)} to the board` : `Added ${countLabel(added.size, "intention")} to the board`);
+	};
+}
+function useProposalActions(review) {
+	const save = useProposalSave(review);
+	const decide = useDecide(review);
+	return {
+		addToBoard: useAddToBoard(review),
+		clarify: (proposal, text) => save("The precision was not sent", (client) => client.clarifyProposal({
+			expectedRevision: proposal.revision,
+			proposalId: proposal.id,
+			text
+		})),
+		decide,
+		merge: async (targetId, sourceIds) => {
+			if (await save("The intentions were not merged", (client) => client.mergeProposals({
+				sourceIds,
+				targetId
+			}))) review.reload();
+		},
+		save,
+		separate: (proposalId) => save("The suggestion was not cleared", (client) => client.separateProposal(proposalId)),
+		verify: (proposalId, { note, status }) => save("The check was not saved", (client) => client.verifyProposal({
+			note: note || void 0,
+			proposalId,
+			status
+		}))
+	};
+}
+//#endregion
 //#region src/sessions/ui/review/screens/callout-pill.tsx
 const TOGGLES = [{
 	decision: "kept",
@@ -6065,22 +6566,16 @@ function CalloutPill({ callout, context, pillRef, style }) {
 				type: "button",
 				children: label
 			}),
-			context.canEdit && TOGGLES.map(({ decision, icon, verb }) => {
-				const isOn = proposal.decision === decision;
-				return /* @__PURE__ */ jsx("button", {
-					"aria-disabled": isOn,
-					"aria-label": `${verb} “${label}”`,
-					"aria-pressed": isOn,
-					className: "dt-ses-callout-btn",
-					"data-decision": decision,
-					onClick: () => {
-						if (!isOn) context.actions.decide(proposal, decision);
-					},
-					title: verb,
-					type: "button",
-					children: icon
-				}, decision);
-			})
+			context.canEdit && TOGGLES.map(({ decision, icon, verb }) => /* @__PURE__ */ jsx("button", {
+				"aria-label": `${verb} “${label}”`,
+				"aria-pressed": proposal.decision === decision,
+				className: "dt-ses-callout-btn",
+				"data-decision": decision,
+				onClick: decisionToggle(context.actions, proposal, decision),
+				title: verb,
+				type: "button",
+				children: icon
+			}, decision))
 		]
 	});
 }
@@ -6121,12 +6616,6 @@ function useMeasuredPills(measureKey) {
 		pillRef
 	};
 }
-function screenCaption(screen) {
-	const { evidence } = screen;
-	const time = formatClock(evidence.capturedAtMs ?? evidence.atMs);
-	const page = pagePath(evidence.frame?.url ?? null);
-	return page ? `${time} · ${page}` : time;
-}
 function CalloutMark({ callout, imageSize, imageTop }) {
 	const { outline, proposal } = callout;
 	if (!outline) return null;
@@ -6142,7 +6631,8 @@ function CalloutMark({ callout, imageSize, imageTop }) {
 		}
 	});
 }
-function ScreenFigure({ context, screen }) {
+function ScreenFigure({ context, newPage, screen }) {
+	const atMs = screen.evidence.capturedAtMs ?? screen.evidence.atMs;
 	const { callouts, image } = screen;
 	const { canvasRef, measured, pillRef } = useMeasuredPills(callouts.map(({ label, proposal }) => `${proposal.id}:${label}`).join("|"));
 	const width = measured?.width ?? 0;
@@ -6162,7 +6652,10 @@ function ScreenFigure({ context, screen }) {
 	const belowImage = layout ? layout.height - imageTop - imageSize.height : 0;
 	return /* @__PURE__ */ jsxs("figure", {
 		className: "dt-ses-report",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx("figcaption", { children: /* @__PURE__ */ jsx(ShotCaption, {
+			atMs,
+			children: newPage
+		}) }), /* @__PURE__ */ jsxs("div", {
 			className: "dt-ses-report-canvas",
 			"data-measured": layout !== null,
 			ref: canvasRef,
@@ -6172,7 +6665,7 @@ function ScreenFigure({ context, screen }) {
 			},
 			children: [
 				/* @__PURE__ */ jsx("img", {
-					alt: `Screenshot at ${screenCaption(screen)}`,
+					alt: `Screenshot at ${formatClock(atMs)}`,
 					height: image.height,
 					src: image.url,
 					width: image.width
@@ -6220,15 +6713,17 @@ function ScreenFigure({ context, screen }) {
 					})
 				})
 			]
-		}), /* @__PURE__ */ jsx("figcaption", {
-			className: "dt-meta",
-			children: screenCaption(screen)
 		})]
 	});
 }
 function ScreenReport({ context, report }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [report.screens.map((screen) => /* @__PURE__ */ jsx(ScreenFigure, {
+	const figures = report.screens.map((screen) => ({
+		page: pagePath(screen.evidence.frame?.url ?? null),
+		screen
+	}));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [figures.map(({ page, screen }, index) => /* @__PURE__ */ jsx(ScreenFigure, {
 		context,
+		newPage: figures[index - 1]?.page === page ? null : page,
 		screen
 	}, screen.evidence.id)), report.unplaced.length > 0 && /* @__PURE__ */ jsxs("section", {
 		className: "dt-ses-block",
@@ -6439,141 +6934,6 @@ function StartSession({ onStarted, onWriteNote }) {
 	] });
 }
 //#endregion
-//#region src/sessions/ui/review/optimistic-change.ts
-function useOptimisticChange(review) {
-	const run = useSessionAction();
-	const applyChange = async (change) => {
-		review.patch(change.show);
-		const saved = await run(change.failureLabel, change.request, () => {
-			applyChange(change);
-		});
-		if (saved === null) {
-			review.patch(change.rollback);
-			return null;
-		}
-		review.patch((detail) => change.settle(detail, saved));
-		return saved;
-	};
-	return applyChange;
-}
-//#endregion
-//#region src/sessions/ui/review/proposals/use-proposal-actions.ts
-const NOTICE_NEED_LENGTH = 60;
-const DECISION_NOTICE = {
-	dismissed: "Dismissed",
-	kept: "Confirmed",
-	later: "Saved for later",
-	pending: "Back to undecided"
-};
-function quotedNeed(need) {
-	return `“${need.length > NOTICE_NEED_LENGTH ? `${need.slice(0, 59)}…` : need}”`;
-}
-function useProposalSave(review) {
-	const { api } = useSessionWorkspace();
-	const run = useSessionAction();
-	return async (failureLabel, request) => {
-		const proposal = await run(failureLabel, () => request(api));
-		if (proposal) review.patch((detail) => withProposal(detail, proposal));
-		return proposal;
-	};
-}
-function withDecision(proposalId, decision) {
-	return (detail) => ({
-		...detail,
-		proposals: detail.proposals.map((item) => item.id === proposalId ? {
-			...item,
-			decision
-		} : item)
-	});
-}
-function useDecide(review) {
-	const { api } = useSessionWorkspace();
-	const applyChange = useOptimisticChange(review);
-	const changeDecision = (options) => applyChange({
-		failureLabel: options.failureLabel,
-		request: () => api.decideProposal({
-			decision: options.to,
-			proposalId: options.proposalId
-		}),
-		rollback: withDecision(options.proposalId, options.from),
-		settle: withProposal,
-		show: withDecision(options.proposalId, options.to)
-	});
-	return async (proposal, decision) => {
-		const previous = proposal.decision;
-		if (!await changeDecision({
-			failureLabel: "The decision was not saved",
-			from: previous,
-			proposalId: proposal.id,
-			to: decision
-		})) return;
-		announce(`${DECISION_NOTICE[decision]} ${quotedNeed(proposal.need)}`, {
-			label: "Undo",
-			run: async () => {
-				if (await changeDecision({
-					failureLabel: "The decision was not undone",
-					from: decision,
-					proposalId: proposal.id,
-					to: previous
-				})) announce("Decision undone");
-			}
-		});
-	};
-}
-function withFeedbackIds(feedbackIds) {
-	return (detail) => ({
-		...detail,
-		proposals: detail.proposals.map((item) => {
-			const feedbackId = feedbackIds.get(item.id);
-			return feedbackId ? {
-				...item,
-				feedbackId
-			} : item;
-		})
-	});
-}
-function useAddToBoard(review) {
-	const { api } = useSessionWorkspace();
-	const run = useSessionAction();
-	return async (proposals) => {
-		const created = await Promise.all(proposals.map(async (proposal) => {
-			const result = await run(`${quotedNeed(proposal.need)} was not added to the board`, () => api.createFeedback(proposal.id));
-			return result ? [proposal.id, result.feedbackId] : null;
-		}));
-		const added = new Map(created.flatMap((entry) => entry ? [entry] : []));
-		if (added.size === 0) return;
-		review.patch(withFeedbackIds(added));
-		const onlyAdded = added.size === 1 ? proposals.find((proposal) => added.has(proposal.id)) : void 0;
-		announce(onlyAdded ? `Added ${quotedNeed(onlyAdded.need)} to the board` : `Added ${countLabel(added.size, "intention")} to the board`);
-	};
-}
-function useProposalActions(review) {
-	const save = useProposalSave(review);
-	const decide = useDecide(review);
-	return {
-		addToBoard: useAddToBoard(review),
-		clarify: (proposal, text) => save("The precision was not sent", (client) => client.clarifyProposal({
-			expectedRevision: proposal.revision,
-			proposalId: proposal.id,
-			text
-		})),
-		decide,
-		merge: async (targetId, sourceIds) => {
-			if (await save("The intentions were not merged", (client) => client.mergeProposals({
-				sourceIds,
-				targetId
-			}))) review.reload();
-		},
-		save,
-		separate: (proposalId) => save("The suggestion was not cleared", (client) => client.separateProposal(proposalId)),
-		verify: (proposalId, { note, status }) => save("The check was not saved", (client) => client.verifyProposal({
-			note: note || void 0,
-			proposalId,
-			status
-		}))
-	};
-}
-//#endregion
 //#region src/sessions/ui/review/proposals/delete-intention.tsx
 const DELETE_INTENTION_COPY = "Delete this intention? What later sessions added to it goes too, and so do the briefs Reflet saved that include it. Briefs you already copied or downloaded keep their text.";
 function DeleteConfirmation$1({ context, onCancel, proposal }) {
@@ -6884,32 +7244,26 @@ function IntentionSource({ context, proposal }) {
 	if (!segment) return null;
 	const [firstContext] = segment.context;
 	const range = `${formatClock(segment.startMs)}–${formatClock(segment.endMs)}`;
-	return /* @__PURE__ */ jsxs("section", {
-		className: "dt-ses-block",
-		children: [
-			/* @__PURE__ */ jsxs("p", {
-				className: "dt-ses-source",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "dt-ses-time",
-						children: range
-					}),
-					" “",
-					segment.text,
-					"”"
-				]
-			}),
-			firstContext && /* @__PURE__ */ jsx("p", {
-				className: "dt-meta",
-				children: contextLine$1(firstContext)
-			}),
-			/* @__PURE__ */ jsx("button", {
-				className: "dt-ses-link",
-				onClick: (event) => context.navigation.onShowMoment(segment.id, event.currentTarget),
-				type: "button",
-				children: "Show context"
-			})
-		]
+	return /* @__PURE__ */ jsxs("button", {
+		className: "dt-ses-source-btn",
+		onClick: (event) => context.navigation.onShowMoment(segment.id, event.currentTarget),
+		title: "Show the moment",
+		type: "button",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "dt-ses-source",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "dt-ses-time",
+					children: range
+				}),
+				" “",
+				segment.text,
+				"”"
+			]
+		}), firstContext && /* @__PURE__ */ jsx("span", {
+			className: "dt-meta",
+			children: contextLine$1(firstContext)
+		})]
 	});
 }
 //#endregion
@@ -7156,29 +7510,25 @@ function MergeSuggestion({ context, proposal }) {
 	});
 }
 function DecisionButtons({ context, onEdit, proposal }) {
-	const decide = (decision) => () => {
-		if (proposal.decision !== decision) context.actions.decide(proposal, decision);
-	};
+	const toggle = (decision) => decisionToggle(context.actions, proposal, decision);
 	const isKept = proposal.decision === "kept";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dt-actions",
 		children: [
 			/* @__PURE__ */ jsxs("button", {
-				"aria-disabled": isKept,
 				"aria-pressed": isKept,
 				className: "dt-btn",
 				"data-variant": "primary",
-				onClick: decide("kept"),
+				onClick: toggle("kept"),
 				type: "button",
 				children: [/* @__PURE__ */ jsx(CheckIcon, { size: 14 }), "Confirm"]
 			}),
 			ICON_DECISIONS.map(({ decision, icon, label }) => /* @__PURE__ */ jsx("button", {
-				"aria-disabled": proposal.decision === decision,
 				"aria-label": label,
 				"aria-pressed": proposal.decision === decision,
 				className: "dt-btn",
 				"data-icon-only": true,
-				onClick: decide(decision),
+				onClick: toggle(decision),
 				title: label,
 				type: "button",
 				children: icon
@@ -7356,87 +7706,57 @@ function ProposalCard({ context, proposal }) {
 //#endregion
 //#region src/sessions/ui/review/proposals/proposals-tab.tsx
 function emptyCopy(detail) {
-	const { session } = detail;
-	if (session.collection !== "ended") return "Intentions appear here once the recording has uploaded and Reflet has read it.";
+	if (detail.session.collection !== "ended") return "Intentions appear here once the recording has uploaded and Reflet has read it.";
 	if (detail.segments.length === 0 && detail.marks.length === 0) return "Nothing was said or marked in this session.";
-	if (isAnalysisBusy(session)) return "Intentions appear here once Reflet has read the session.";
-	if (session.analysis.state === "failed") return "The transcript is kept. Read it, or write the intention yourself.";
-	if (session.analysis.state === "succeeded") return "No request stood out in this session. Read the transcript or write the intention yourself.";
-	return "Intentions appear here once the session is analyzed.";
-}
-function useAddProposal(context, onDone) {
-	const [need, setNeed] = useState("");
-	const [observed, setObserved] = useState("");
-	const [clientKey] = useState(() => crypto.randomUUID());
-	const [isSaving, setIsSaving] = useState(false);
-	const sessionId = context.detail.session.id;
-	const add = async () => {
-		setIsSaving(true);
-		try {
-			if (await context.actions.save("The intention was not added", (api) => api.createProposal({
-				clientKey,
-				need: need.trim(),
-				observed: observed.trim() || void 0,
-				sessionId
-			}))) onDone();
-		} finally {
-			setIsSaving(false);
-		}
-	};
-	return {
-		add,
-		isSaving,
-		need,
-		observed,
-		setNeed,
-		setObserved
-	};
-}
-function AddProposalForm({ context, onDone }) {
-	const { add, isSaving, need, observed, setNeed, setObserved } = useAddProposal(context, onDone);
-	return /* @__PURE__ */ jsxs("form", {
-		className: "dt-card dt-ses-form",
-		onSubmit: (event) => {
-			event.preventDefault();
-			add();
-		},
-		children: [
-			/* @__PURE__ */ jsx(TextField, {
-				label: "Need",
-				maxLength: 300,
-				onChange: setNeed,
-				rows: 2,
-				value: need
-			}),
-			/* @__PURE__ */ jsx(TextField, {
-				label: "What you observed (optional)",
-				maxLength: 2e3,
-				onChange: setObserved,
-				rows: 3,
-				value: observed
-			}),
-			/* @__PURE__ */ jsx(FormActions, {
-				isSubmitDisabled: isSaving || need.trim() === "",
-				onCancel: onDone,
-				submitLabel: "Add intention"
-			})
-		]
+	return "No request stood out in this session.";
+}
+function ConfirmAll({ context, undecided }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "dt-actions",
+		children: /* @__PURE__ */ jsxs("button", {
+			className: "dt-btn",
+			onClick: () => context.actions.decide(undecided, "kept"),
+			type: "button",
+			children: [
+				/* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
+				"Confirm all",
+				/* @__PURE__ */ jsx("span", {
+					className: "dt-btn-count",
+					children: undecided.length
+				})
+			]
+		})
 	});
 }
 function ProposalsTab({ context, view }) {
-	const [isAdding, setIsAdding] = useState(false);
-	const proposals = context.detail.proposals.filter((proposal) => proposal.mergedIntoId === null);
-	const { continuation } = context.detail;
-	const report = calloutReport(context.detail);
+	const { detail, review } = context;
+	const steps = useProcessingSteps(detail);
+	const isProcessing = steps.some((step) => step.state !== "done");
+	const proposals = detail.proposals.filter((proposal) => proposal.mergedIntoId === null);
+	const undecided = proposals.filter((proposal) => proposal.decision === "pending" && proposal.attachment === null);
+	const { continuation } = detail;
+	const hasNothingToReview = proposals.length === 0 && !continuation;
+	const report = calloutReport(detail);
 	const showsScreens = report.screens.length > 0 && view === "screens";
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ProcessingProgress, {
+			detail,
+			fillsPanel: hasNothingToReview,
+			isProcessing,
+			review,
+			steps
+		}),
 		continuation && /* @__PURE__ */ jsx(UpdateCard, {
 			context,
 			continuation
 		}),
-		proposals.length === 0 && !continuation && /* @__PURE__ */ jsx("p", {
+		hasNothingToReview && !isProcessing && /* @__PURE__ */ jsx("p", {
 			className: "dt-empty",
-			children: emptyCopy(context.detail)
+			children: emptyCopy(detail)
+		}),
+		context.canEdit && undecided.length > 1 && /* @__PURE__ */ jsx(ConfirmAll, {
+			context,
+			undecided
 		}),
 		showsScreens && /* @__PURE__ */ jsx(ScreenReport, {
 			context,
@@ -7445,57 +7765,41 @@ function ProposalsTab({ context, view }) {
 		proposals.filter((proposal) => !showsScreens || proposal.attachment !== null).map((proposal) => /* @__PURE__ */ jsx(ProposalCard, {
 			context,
 			proposal
-		}, proposal.id)),
-		context.canEdit && (isAdding ? /* @__PURE__ */ jsx(AddProposalForm, {
-			context,
-			onDone: () => setIsAdding(false)
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "dt-actions",
-			children: /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: () => setIsAdding(true),
-				type: "button",
-				children: "Add an intention"
-			})
-		}))
+		}, proposal.id))
 	] });
 }
 //#endregion
 //#region src/sessions/ui/review/review-footer.tsx
+const NOTHING_CONFIRMED = "Confirm an intention first";
 function ReviewFooter({ context, onOpenBrief }) {
 	const confirmed = keptProposals(context.detail);
 	const offBoard = confirmed.filter((proposal) => proposal.feedbackId === null);
+	const hasConfirmed = confirmed.length > 0;
+	const boardBlocker = hasConfirmed ? "Every confirmed intention is on the board" : NOTHING_CONFIRMED;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-sheet-foot",
-		children: [
-			/* @__PURE__ */ jsxs("button", {
-				"aria-describedby": confirmed.length === 0 ? "rf-brief-hint" : void 0,
-				className: "dt-btn",
-				"data-variant": "primary",
-				disabled: confirmed.length === 0,
-				onClick: onOpenBrief,
-				type: "button",
-				children: ["Prepare brief", confirmed.length > 0 && /* @__PURE__ */ jsx("span", {
-					className: "dt-btn-count",
-					children: confirmed.length
-				})]
-			}),
-			offBoard.length > 0 && /* @__PURE__ */ jsxs("button", {
-				className: "dt-btn",
-				onClick: () => context.actions.addToBoard(offBoard),
-				type: "button",
-				children: [
-					"Add ",
-					offBoard.length,
-					" to board"
-				]
-			}),
-			confirmed.length === 0 && /* @__PURE__ */ jsx("span", {
-				className: "dt-status",
-				id: "rf-brief-hint",
-				children: "Confirm an intention to brief your agent or add it to the board"
-			})
-		]
+		className: "dt-sheet-foot dt-ses-foot",
+		children: [/* @__PURE__ */ jsxs("button", {
+			className: "dt-btn",
+			"data-variant": "primary",
+			disabled: !hasConfirmed,
+			onClick: onOpenBrief,
+			title: hasConfirmed ? void 0 : NOTHING_CONFIRMED,
+			type: "button",
+			children: ["Prepare brief", hasConfirmed && /* @__PURE__ */ jsx("span", {
+				className: "dt-btn-count",
+				children: confirmed.length
+			})]
+		}), /* @__PURE__ */ jsxs("button", {
+			className: "dt-btn",
+			disabled: offBoard.length === 0,
+			onClick: () => context.actions.addToBoard(offBoard),
+			title: offBoard.length === 0 ? boardBlocker : void 0,
+			type: "button",
+			children: ["Add to board", offBoard.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "dt-btn-count",
+				children: offBoard.length
+			})]
+		})]
 	});
 }
 //#endregion
@@ -7750,6 +8054,24 @@ function DeleteConfirmation({ onCancel, onDeleted, sessionId }) {
 		})]
 	});
 }
+function SessionFacts({ session }) {
+	const isShared = session.visibility === "team";
+	const sharing = isShared ? "Shared with team" : "Private";
+	return /* @__PURE__ */ jsxs("p", {
+		className: "dt-ses-facts",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: formatDate(session.startedAt) }),
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(ClockIcon, {}), shortDuration(session.durationMs)] }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-label": sharing,
+				role: "img",
+				title: sharing,
+				children: isShared ? /* @__PURE__ */ jsx(TeamIcon, {}) : /* @__PURE__ */ jsx(LockIcon, {})
+			}),
+			!session.isMine && /* @__PURE__ */ jsx("span", { children: session.authorName ?? "A teammate" })
+		]
+	});
+}
 function ReviewHeader({ onDeleted, review, session }) {
 	const [isRenaming, setIsRenaming] = useState(false);
 	const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
@@ -7772,44 +8094,34 @@ function ReviewHeader({ onDeleted, review, session }) {
 	];
 	return /* @__PURE__ */ jsxs("header", {
 		className: "dt-ses-head",
-		children: [
-			isRenaming ? /* @__PURE__ */ jsx(TitleEditor, {
-				onDone: () => setIsRenaming(false),
-				review,
-				session
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "dt-card-head",
-				children: [/* @__PURE__ */ jsx("h2", {
+		children: [isRenaming ? /* @__PURE__ */ jsx(TitleEditor, {
+			onDone: () => setIsRenaming(false),
+			review,
+			session
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "dt-card-head",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
 					className: "dt-ses-title",
 					tabIndex: -1,
+					title: session.title,
 					children: session.title
-				}), session.canEdit && /* @__PURE__ */ jsx(Menu, {
+				}),
+				/* @__PURE__ */ jsx(SessionFacts, { session }),
+				session.canEdit && /* @__PURE__ */ jsx(Menu, {
 					items: menuItems,
 					trigger: {
 						className: "icon-btn",
 						content: /* @__PURE__ */ jsx(MoreIcon, {}),
 						label: "Session options"
 					}
-				})]
-			}),
-			/* @__PURE__ */ jsxs("p", {
-				className: "dt-meta",
-				children: [
-					formatDate(session.startedAt),
-					" · ",
-					shortDuration(session.durationMs),
-					" ·",
-					" ",
-					isShared ? "Shared with team" : "Private",
-					session.isMine ? "" : ` · ${session.authorName ?? "A teammate"}`
-				]
-			}),
-			isConfirmingDelete && session.canEdit && /* @__PURE__ */ jsx(DeleteConfirmation, {
-				onCancel: () => setIsConfirmingDelete(false),
-				onDeleted,
-				sessionId: session.id
-			})
-		]
+				})
+			]
+		}), isConfirmingDelete && session.canEdit && /* @__PURE__ */ jsx(DeleteConfirmation, {
+			onCancel: () => setIsConfirmingDelete(false),
+			onDeleted,
+			sessionId: session.id
+		})]
 	});
 }
 //#endregion
@@ -7835,210 +8147,51 @@ function IntentionViewMenu({ place }) {
 		}
 	});
 }
-function tabOptions(detail) {
-	return [
-		{
-			count: detail.proposals.filter((proposal) => proposal.mergedIntoId === null && proposal.attachment === null).length,
-			icon: /* @__PURE__ */ jsx(IntentionIcon, {}),
-			label: "Intentions",
-			value: "proposals"
-		},
-		{
-			count: null,
-			icon: /* @__PURE__ */ jsx(TranscriptIcon, {}),
-			label: "Transcript",
-			value: "transcript"
-		},
-		{
-			count: detail.evidence.length,
-			icon: /* @__PURE__ */ jsx(ImageIcon, {}),
-			label: "Evidence",
-			value: "evidence"
-		}
-	];
-}
-function ReviewTabs({ detail, place }) {
-	const canPickView = place.tab === "proposals" && calloutReport(detail).screens.length > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-toolbar",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "dt-tabs",
-			role: "tablist",
-			children: tabOptions(detail).map((option) => /* @__PURE__ */ jsxs("button", {
-				"aria-selected": option.value === place.tab,
-				className: "dt-tab",
-				onClick: () => place.selectTab(option.value),
-				role: "tab",
-				type: "button",
-				children: [
-					option.icon,
-					option.label,
-					option.count !== null && /* @__PURE__ */ jsx("span", {
-						className: "dt-tab-count",
-						children: option.count
-					})
-				]
-			}, option.value))
-		}), canPickView && /* @__PURE__ */ jsx(IntentionViewMenu, { place })]
-	});
-}
-//#endregion
-//#region src/sessions/ui/review/processing-steps.ts
-function uploadStep(pendingUploads) {
-	return pendingUploads > 0 ? {
-		analyzeLabel: null,
-		key: "upload",
-		label: `Uploading · ${pendingUploads} waiting`,
-		state: "active"
-	} : {
-		analyzeLabel: null,
-		key: "upload",
-		label: "Uploaded",
-		state: "done"
-	};
-}
-function transcriptionStep(detail, isAnalysisQueued) {
-	const voice = detail.segments.filter((segment) => segment.source === "voice");
-	const transcribing = voice.filter(({ transcription }) => transcription.state === "pending" || transcription.state === "running").length;
-	const step = {
-		analyzeLabel: null,
-		key: "transcription"
-	};
-	if (transcribing > 0) {
-		const transcribed = voice.length - transcribing;
-		return {
-			...step,
-			label: `Transcribing your voice · ${transcribed} of ${voice.length}`,
-			state: "active"
-		};
-	}
-	if (voice.length > 0) return {
-		...step,
-		label: "Voice transcribed",
-		state: "done"
-	};
-	return isAnalysisQueued ? {
-		...step,
-		label: "Transcribe your voice",
-		state: "waiting"
-	} : null;
-}
-function comparedRevision(detail) {
-	const { continuation } = detail;
-	return continuation?.intention && continuation.contribution.detachedAt === null ? continuation.contribution.baseRevision : null;
-}
-function intentionStep(detail, isAnalysisQueued) {
-	const { session } = detail;
-	const { analysis } = session;
-	const revision = comparedRevision(detail);
-	const isComparing = revision !== null;
-	const step = {
-		analyzeLabel: null,
-		key: "intentions"
-	};
-	if (analysis.state === "running") {
-		const label = isComparing ? `Comparing with revision ${revision}…` : "Finding intentions with AI…";
-		return {
-			...step,
-			label,
-			state: "active"
-		};
-	}
-	if (analysis.state === "waiting" || isAnalysisQueued) {
-		const label = isComparing ? `Compare with revision ${revision}` : "Find intentions with AI";
-		return {
-			...step,
-			label,
-			state: "waiting"
-		};
-	}
-	if (analysis.state === "failed") {
-		const failure = isComparing ? "The comparison failed" : "Analysis failed";
-		const reason = analysis.error ?? "Unknown error.";
-		return {
-			...step,
-			analyzeLabel: "Try again",
-			label: `${failure}: ${reason}`,
-			state: "failed"
-		};
-	}
-	if (isAnalysisOutdated(session)) return {
-		...step,
-		analyzeLabel: "Analyze again",
-		label: "The transcript changed since the analysis.",
-		state: "waiting"
-	};
-	if (analysis.state === "idle") return detail.segments.length > 0 ? {
-		...step,
-		analyzeLabel: "Analyze",
-		label: "Not analyzed yet.",
-		state: "waiting"
-	} : null;
-	const label = isComparing ? `Compared with revision ${revision}` : `Found ${countLabel(analysis.proposalCount ?? 0, "intention")}`;
-	return {
-		...step,
-		label,
-		state: "done"
-	};
-}
-function processingSteps(detail, pendingUploads) {
-	if (detail.session.collection !== "ended") return [];
-	const isAnalysisQueued = pendingUploads > 0 && detail.session.analysis.state === "idle";
-	return [
-		detail.session.isMine ? uploadStep(pendingUploads) : null,
-		transcriptionStep(detail, isAnalysisQueued),
-		intentionStep(detail, isAnalysisQueued)
-	].filter((step) => step !== null);
-}
-//#endregion
-//#region src/sessions/ui/review/status-strip.tsx
-function AnalyzeButton({ detail, label, review }) {
-	const { api } = useSessionWorkspace();
-	const run = useSessionAction();
-	const analyze = async () => {
-		const status = await run("The analysis did not start", () => api.analyze(detail.session.id));
-		if (status) review.patch((current) => ({
-			...current,
-			session: {
-				...current.session,
-				analysis: status
-			}
-		}));
-	};
-	return /* @__PURE__ */ jsx("button", {
-		className: "dt-btn",
-		onClick: analyze,
-		type: "button",
-		children: label
-	});
-}
-function StepRow({ detail, review, step }) {
-	return /* @__PURE__ */ jsxs("li", {
-		"data-state": step.state,
-		children: [/* @__PURE__ */ jsx("span", { children: step.label }), step.analyzeLabel && detail.session.canEdit && /* @__PURE__ */ jsx(AnalyzeButton, {
-			detail,
-			label: step.analyzeLabel,
-			review
-		})]
-	});
+function tabOptions(detail) {
+	return [
+		{
+			count: detail.proposals.filter((proposal) => proposal.mergedIntoId === null && proposal.attachment === null).length,
+			icon: /* @__PURE__ */ jsx(IntentionIcon, {}),
+			label: "Intentions",
+			value: "proposals"
+		},
+		{
+			count: null,
+			icon: /* @__PURE__ */ jsx(TranscriptIcon, {}),
+			label: "Transcript",
+			value: "transcript"
+		},
+		{
+			count: detail.evidence.length,
+			icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+			label: "Screenshots",
+			value: "evidence"
+		}
+	];
 }
-function StatusStrip({ detail, review }) {
-	const { account } = useSessionWorkspace();
-	const sync = useSyncStatus(account.key);
-	const steps = processingSteps(detail, detail.session.isMine ? sync.pendingOperations : 0);
-	const isProcessed = steps.every((step) => step.state === "done");
-	return /* @__PURE__ */ jsx("div", {
-		"aria-live": "polite",
-		className: "dt-ses-strip",
-		children: !isProcessed && /* @__PURE__ */ jsx("ol", {
-			"aria-label": "Processing",
-			className: "dt-ses-steps",
-			children: steps.map((step) => /* @__PURE__ */ jsx(StepRow, {
-				detail,
-				review,
-				step
-			}, step.key))
-		})
+function ReviewTabs({ detail, place }) {
+	const canPickView = place.tab === "proposals" && calloutReport(detail).screens.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-toolbar",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "dt-tabs",
+			role: "tablist",
+			children: tabOptions(detail).map((option) => /* @__PURE__ */ jsxs("button", {
+				"aria-selected": option.value === place.tab,
+				className: "dt-tab",
+				onClick: () => place.selectTab(option.value),
+				role: "tab",
+				type: "button",
+				children: [
+					option.icon,
+					option.label,
+					option.count !== null && /* @__PURE__ */ jsx("span", {
+						className: "dt-tab-count",
+						children: option.count
+					})
+				]
+			}, option.value))
+		}), canPickView && /* @__PURE__ */ jsx(IntentionViewMenu, { place })]
 	});
 }
 //#endregion
@@ -8190,17 +8343,16 @@ function LinkEvidenceItem({ link }) {
 		]
 	});
 }
-function MomentLink({ atMs, onShowMoment }) {
-	if (!onShowMoment) return null;
-	return /* @__PURE__ */ jsx("button", {
-		"aria-label": `Show the moment at ${formatClock(atMs)}`,
-		className: "dt-ses-link",
-		onClick: (event) => onShowMoment(event.currentTarget),
-		type: "button",
-		children: "Show moment"
-	});
+function EvidenceFace({ evidence }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ShotCaption, {
+		atMs: evidence.atMs,
+		children: evidenceCaption(evidence)
+	}), /* @__PURE__ */ jsx(EvidenceThumb, {
+		evidence,
+		isLarge: true
+	})] });
 }
-function EvidenceItem({ evidence, openers, removal }) {
+function EvidenceItem({ evidence, onShowMoment, removal }) {
 	const caption = `${formatClock(evidence.atMs)} · ${evidenceCaption(evidence)}`;
 	if (evidence.link) return /* @__PURE__ */ jsx(LinkEvidenceItem, { link: evidence.link });
 	if (!isViewable(evidence)) return /* @__PURE__ */ jsx(MissingEvidenceItem, {
@@ -8209,27 +8361,22 @@ function EvidenceItem({ evidence, openers, removal }) {
 		isJustRemoved: evidence.id === removal.removedId
 	});
 	return /* @__PURE__ */ jsxs("li", {
-		className: "dt-card",
+		className: "dt-card dt-openable",
 		children: [
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": `Enlarge: ${caption}`,
-				className: "dt-ses-shot-btn",
-				onClick: openers.onEnlarge,
+			onShowMoment ? /* @__PURE__ */ jsx("button", {
+				"aria-label": `Show the moment at ${caption}`,
+				className: "dt-open dt-ses-shot-face",
+				onClick: (event) => onShowMoment(event.currentTarget),
 				type: "button",
-				children: /* @__PURE__ */ jsx(EvidenceThumb, { evidence })
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "dt-meta",
-				children: caption
+				children: /* @__PURE__ */ jsx(EvidenceFace, { evidence })
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "dt-ses-shot-face",
+				children: /* @__PURE__ */ jsx(EvidenceFace, { evidence })
 			}),
 			evidence.note && /* @__PURE__ */ jsx("p", {
 				className: "dt-note-text",
 				children: evidence.note
 			}),
-			/* @__PURE__ */ jsx(MomentLink, {
-				atMs: evidence.atMs,
-				onShowMoment: openers.onShowMoment
-			}),
 			removal.canRemove && /* @__PURE__ */ jsx(RemoveEvidence, {
 				evidence,
 				removal
@@ -8237,54 +8384,6 @@ function EvidenceItem({ evidence, openers, removal }) {
 		]
 	});
 }
-function EnlargedEvidence({ evidence, onBack, removal }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("button", {
-			className: "dt-ses-link",
-			onClick: onBack,
-			type: "button",
-			children: "← All evidence"
-		}),
-		/* @__PURE__ */ jsx(EvidenceThumb, {
-			evidence,
-			isLarge: true
-		}),
-		/* @__PURE__ */ jsxs("p", {
-			className: "dt-meta",
-			children: [
-				formatClock(evidence.atMs),
-				" · ",
-				evidenceCaption(evidence)
-			]
-		}),
-		removal.canRemove && /* @__PURE__ */ jsx(RemoveEvidence, {
-			evidence,
-			removal
-		})
-	] });
-}
-function EvidenceList({ detail, openers, removal }) {
-	const { onEnlarge, onShowMoment } = openers;
-	const { evidence } = detail;
-	const momentOpener = (atMs) => {
-		const segmentId = nearestSegmentId(detail.segments, atMs);
-		return segmentId ? (opener) => onShowMoment(segmentId, opener) : null;
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [evidence.length === 0 && /* @__PURE__ */ jsx("p", {
-		className: "dt-empty",
-		children: "No screenshots or links in this session."
-	}), /* @__PURE__ */ jsx("ul", {
-		className: "dt-ses-rows",
-		children: evidence.map((item) => /* @__PURE__ */ jsx(EvidenceItem, {
-			evidence: item,
-			openers: {
-				onEnlarge: () => onEnlarge(item.id),
-				onShowMoment: momentOpener(item.atMs)
-			},
-			removal
-		}, item.id))
-	})] });
-}
 function AttachLinkAction({ detail, review }) {
 	const [isAttaching, setIsAttaching] = useState(false);
 	if (isAttaching) return /* @__PURE__ */ jsx(AttachLink, {
@@ -8303,34 +8402,34 @@ function AttachLinkAction({ detail, review }) {
 	});
 }
 function EvidenceTab({ detail, onShowMoment, review }) {
-	const [enlargedId, setEnlargedId] = useState(null);
 	const [removedId, setRemovedId] = useState(null);
-	const enlarged = detail.evidence.find((item) => item.id === enlargedId && isViewable(item));
+	const { canEdit } = detail.session;
 	const removal = {
-		canRemove: detail.session.canEdit,
-		onRemoved: (evidenceId) => {
-			setEnlargedId(null);
-			setRemovedId(evidenceId);
-		},
+		canRemove: canEdit,
+		onRemoved: setRemovedId,
 		removedId,
 		review
 	};
-	if (enlarged) return /* @__PURE__ */ jsx(EnlargedEvidence, {
-		evidence: enlarged,
-		onBack: () => setEnlargedId(null),
-		removal
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EvidenceList, {
-		detail,
-		openers: {
-			onEnlarge: setEnlargedId,
-			onShowMoment
-		},
-		removal
-	}), detail.session.canEdit && /* @__PURE__ */ jsx(AttachLinkAction, {
+	const momentOpener = (atMs) => {
+		const segmentId = nearestSegmentId(detail.segments, atMs);
+		return segmentId ? (opener) => onShowMoment(segmentId, opener) : null;
+	};
+	const attachLink = canEdit && /* @__PURE__ */ jsx(AttachLinkAction, {
 		detail,
 		review
-	})] });
+	});
+	if (detail.evidence.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		children: [/* @__PURE__ */ jsx("p", { children: "No screenshots or links in this session." }), attachLink]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+		className: "dt-ses-rows",
+		children: detail.evidence.map((item) => /* @__PURE__ */ jsx(EvidenceItem, {
+			evidence: item,
+			onShowMoment: momentOpener(item.atMs),
+			removal
+		}, item.id))
+	}), attachLink] });
 }
 //#endregion
 //#region src/sessions/ui/review/transcript/segment-row.tsx
@@ -8444,38 +8543,57 @@ function ContextChips({ segment }) {
 		}, `${item.kind}:${item.atMs}:${item.label}`))]
 	});
 }
-function SegmentLinks({ onEdit, onShowMoment, time }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-actions",
-		children: [/* @__PURE__ */ jsx("button", {
-			"aria-label": `Show context at ${time}`,
-			className: "dt-ses-link",
-			onClick: (event) => onShowMoment(event.currentTarget),
-			type: "button",
-			children: "Show context"
-		}), onEdit && /* @__PURE__ */ jsx("button", {
-			"aria-label": `Edit passage at ${time}`,
-			className: "dt-ses-link",
-			onClick: onEdit,
-			type: "button",
-			children: "Edit"
-		})]
+function MomentTime({ onShowMoment, time }) {
+	if (!onShowMoment) return /* @__PURE__ */ jsx("span", {
+		className: "dt-ses-time",
+		children: time
+	});
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Show the moment at ${time}`,
+		className: "dt-ses-time dt-open",
+		onClick: (event) => onShowMoment(event.currentTarget),
+		type: "button",
+		children: time
 	});
 }
+const TEXT_DRAG_THRESHOLD_PX = 4;
+function useOpenMomentOnRowClick() {
+	const pressedAt = useRef(null);
+	return {
+		onClick(event) {
+			const start = pressedAt.current;
+			const isTextDrag = start !== null && Math.hypot(event.clientX - start.x, event.clientY - start.y) > TEXT_DRAG_THRESHOLD_PX;
+			const isOnControl = event.target instanceof Element && event.target.closest("a, button, input, select, textarea") !== null;
+			if (isTextDrag || isOnControl) return;
+			event.currentTarget.querySelector(":scope > .dt-open")?.click();
+		},
+		onMouseDown(event) {
+			pressedAt.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		}
+	};
+}
 function SegmentRow({ editing, onShowMoment, segment }) {
 	const { canEdit, review } = editing;
 	const [isEditing, setIsEditing] = useState(false);
 	const time = formatClock(segment.startMs);
 	const isSettled = ["done", "empty"].includes(segment.transcription.state);
+	const canStartEditing = canEdit && isSettled && !isEditing;
+	const rowClick = useOpenMomentOnRowClick();
 	return /* @__PURE__ */ jsxs("li", {
-		className: "dt-ses-seg",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "dt-ses-time",
-			children: time
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "dt-ses-seg-body",
-			children: [
-				isEditing ? /* @__PURE__ */ jsx(SegmentEditor, {
+		className: "dt-ses-seg dt-openable",
+		onClick: rowClick.onClick,
+		onMouseDown: rowClick.onMouseDown,
+		children: [
+			/* @__PURE__ */ jsx(MomentTime, {
+				onShowMoment: isEditing ? null : onShowMoment,
+				time
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dt-ses-seg-body",
+				children: [isEditing ? /* @__PURE__ */ jsx(SegmentEditor, {
 					onDone: () => setIsEditing(false),
 					review,
 					segment
@@ -8483,15 +8601,20 @@ function SegmentRow({ editing, onShowMoment, segment }) {
 					onType: canEdit ? () => setIsEditing(true) : void 0,
 					review,
 					segment
-				}),
-				/* @__PURE__ */ jsx(ContextChips, { segment }),
-				/* @__PURE__ */ jsx(SegmentLinks, {
-					onEdit: canEdit && isSettled && !isEditing ? () => setIsEditing(true) : null,
-					onShowMoment,
-					time
+				}), /* @__PURE__ */ jsx(ContextChips, { segment })]
+			}),
+			canStartEditing && /* @__PURE__ */ jsx("div", {
+				className: "dt-hover-actions",
+				children: /* @__PURE__ */ jsx("button", {
+					"aria-label": `Edit passage at ${time}`,
+					className: "icon-btn glass",
+					onClick: () => setIsEditing(true),
+					title: "Edit",
+					type: "button",
+					children: /* @__PURE__ */ jsx(PencilIcon, {})
 				})
-			]
-		})]
+			})
+		]
 	});
 }
 //#endregion
@@ -8573,25 +8696,21 @@ function transcriptForAgent(detail) {
 //#endregion
 //#region src/sessions/ui/review/transcript/transcript-tab.tsx
 function TimelineNote({ atMs, children, onShowMoment }) {
-	const time = formatClock(atMs);
+	const rowClick = useOpenMomentOnRowClick();
 	return /* @__PURE__ */ jsxs("li", {
-		className: "dt-ses-seg",
+		className: "dt-ses-seg dt-openable",
 		"data-kind": "note",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "dt-ses-time",
-			children: time
-		}), /* @__PURE__ */ jsxs("div", {
+		onClick: rowClick.onClick,
+		onMouseDown: rowClick.onMouseDown,
+		children: [/* @__PURE__ */ jsx(MomentTime, {
+			onShowMoment,
+			time: formatClock(atMs)
+		}), /* @__PURE__ */ jsx("div", {
 			className: "dt-ses-seg-body",
-			children: [/* @__PURE__ */ jsx("p", {
+			children: /* @__PURE__ */ jsx("p", {
 				className: "dt-meta",
 				children
-			}), onShowMoment && /* @__PURE__ */ jsx("button", {
-				"aria-label": `Show the moment at ${time}`,
-				className: "dt-ses-link",
-				onClick: (event) => onShowMoment(event.currentTarget),
-				type: "button",
-				children: "Show moment"
-			})]
+			})
 		})]
 	});
 }
@@ -8786,21 +8905,14 @@ function ReviewPanels({ context, place }) {
 }
 function ReviewTop({ context, links }) {
 	const { detail, review } = context;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(ReviewHeader, {
-			onDeleted: links.onDeleted,
-			review,
-			session: detail.session
-		}),
-		/* @__PURE__ */ jsx(StatusStrip, {
-			detail,
-			review
-		}),
-		detail.continuation && /* @__PURE__ */ jsx(ContinuationHeader, {
-			continuation: detail.continuation,
-			onOpenSession: links.onOpenSession
-		})
-	] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ReviewHeader, {
+		onDeleted: links.onDeleted,
+		review,
+		session: detail.session
+	}), detail.continuation && /* @__PURE__ */ jsx(ContinuationHeader, {
+		continuation: detail.continuation,
+		onOpenSession: links.onOpenSession
+	})] });
 }
 function ReviewScreen({ detail, isBriefOpen, links, review }) {
 	const place = useReviewPlace();
@@ -9159,6 +9271,7 @@ const INTENTION_STYLES = `
 .dt-ses-attached { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
 .dt-ses-attached p { margin: 0; }
 .dt-ses-history[data-removed="true"] > .dt-ses-subhead { color: var(--rf-text-muted); text-decoration: line-through; }
+.dt-ses-history:has(.dt-open) { margin-inline: -8px; padding: 6px 8px; border-radius: var(--dt-radius-field); }
 .dt-ses-change { padding: 8px 10px; border-radius: var(--dt-radius-card); background: var(--rf-bg-subtle); list-style: none; }
 .dt-ses-change[data-decision="rejected"] .dt-ses-diff { color: var(--rf-text-muted); text-decoration: line-through; }
 .dt-ses-diff { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; overflow-wrap: anywhere; }
@@ -9169,7 +9282,8 @@ p.dt-ses-diff { display: block; }
 //#endregion
 //#region src/sessions/ui/review/screens/report-styles.ts
 const REPORT_STYLES = `
-.dt-ses-report { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; margin: 0; }
+.dt-ses-report { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; margin: 0; }
+.dt-ses-report + .dt-ses-report { margin-top: 12px; }
 .dt-ses-report-canvas { position: relative; width: 100%; }
 .dt-ses-report-canvas img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; box-shadow: var(--rf-shadow-inset); }
 .dt-ses-report-canvas[data-measured="false"] .dt-ses-callout { visibility: hidden; }
@@ -9183,21 +9297,25 @@ const REPORT_STYLES = `
 .dt-ses-callouts { margin: 0; padding: 0; list-style: none; }
 .dt-ses-callouts[data-flow="list"] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
 .dt-ses-callout {
-  display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px; border-radius: var(--rf-pill);
-  background: var(--rf-bg); box-shadow: var(--rf-shadow-inset), var(--rf-shadow-low); font-size: 12px; line-height: 1.3;
+  --dt-callout-control: 22px; --dt-callout-inset: 3px;
+  display: flex; align-items: flex-start; gap: 2px; max-width: 100%; padding: var(--dt-callout-inset);
+  border-radius: calc(var(--dt-callout-control) / 2 + var(--dt-callout-inset));
+  background: var(--rf-bg); box-shadow: var(--rf-shadow-inset), var(--rf-shadow-low); font-size: 12px; line-height: 16px;
 }
 .dt-ses-report-canvas .dt-ses-callout { position: absolute; top: 0; left: 0; width: max-content; max-width: min(280px, 100%); }
 .dt-ses-callout-number {
-  display: grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rf-pill);
-  background: var(--rf-accent); color: var(--rf-accent-text, #fff); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
+  display: grid; place-items: center; flex: none; min-width: var(--dt-callout-control); height: var(--dt-callout-control); padding: 0 6px;
+  border-radius: calc(var(--dt-callout-control) / 2); background: var(--rf-accent); color: var(--rf-accent-text, #fff);
+  font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
 }
 .dt-ses-callout[data-decision="kept"] .dt-ses-callout-number { background: var(--rf-success); }
 .dt-ses-callout[data-decision="dismissed"] .dt-ses-callout-number { background: var(--rf-text-muted); }
-.dt-ses-callout-label { min-width: 0; padding: 0 4px; font-weight: 550; text-align: left; overflow-wrap: anywhere; }
+.dt-ses-callout-label { flex: 1 1 auto; min-width: 0; padding: 3px 4px; font-weight: 550; text-align: left; overflow-wrap: anywhere; }
 .dt-ses-callout-label:hover { color: var(--rf-accent); }
 .dt-ses-callout[data-decision="dismissed"] .dt-ses-callout-label { color: var(--rf-text-muted); text-decoration: line-through; }
 .dt-ses-callout-btn {
-  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--rf-text-muted);
+  display: grid; place-items: center; flex: none; width: var(--dt-callout-control); height: var(--dt-callout-control);
+  border-radius: calc(var(--dt-callout-control) / 2); color: var(--rf-text-muted);
   transition: background-color 120ms var(--rf-ease), color 120ms var(--rf-ease);
 }
 .dt-ses-callout-btn svg { width: 13px; height: 13px; }
@@ -9239,21 +9357,33 @@ const SESSIONS_STYLES = `${`
 .dt-ses-list li + li { margin-top: 3px; }
 .dt-ses-link { align-self: flex-start; padding: 0; color: var(--rf-accent); font-size: 12px; text-align: left; }
 .dt-ses-link:hover { text-decoration: underline; }
-.dt-ses-problem, .dt-ses-banner, .dt-ses-form, .dt-ses-head, .dt-ses-strip, .dt-ses-handoff { display: flex; flex-direction: column; gap: 6px; }
+.dt-ses-problem, .dt-ses-banner, .dt-ses-form, .dt-ses-head, .dt-ses-handoff { display: flex; flex-direction: column; gap: 6px; }
 .dt-ses-banner { padding: 8px 10px; border-radius: var(--dt-radius-card); background: color-mix(in srgb, var(--rf-accent) 10%, transparent); }
 .dt-ses-banner p { margin: 0; overflow-wrap: anywhere; }
-.dt-ses-strip:empty { display: none; }
-.dt-ses-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--rf-text-muted); font-size: 12px; }
-.dt-ses-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
-.dt-ses-steps li > span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
+.dt-ses-progress:empty { display: none; }
+.dt-ses-progress[data-fills-panel="true"] { align-self: center; width: min(100%, 280px); margin: auto; padding: 24px 0; }
+.dt-sheet-body:has(.dt-ses-progress[data-fills-panel="true"]) > .dt-sheet-foot { margin-top: 0; }
+.dt-ses-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--rf-text-muted); font-size: 12.5px; }
+.dt-ses-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
+.dt-ses-steps li > span:first-child { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
 .dt-ses-steps li::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
 .dt-ses-steps li[data-state="done"]::before { border-color: var(--rf-accent); background: var(--rf-accent); }
 .dt-ses-steps li[data-state="active"] { color: var(--rf-text); }
 .dt-ses-steps li[data-state="active"]::before { border-color: var(--rf-accent); border-right-color: transparent; animation: dt-step-spin 800ms linear infinite; }
 .dt-ses-steps li[data-state="failed"] { color: var(--rf-danger); }
 .dt-ses-steps li[data-state="failed"]::before { background: currentColor; }
+.dt-ses-bar { position: relative; flex: 1 1 100%; height: 4px; margin-left: 18px; overflow: hidden; border-radius: var(--rf-pill); background: var(--rf-bg-hover); }
+.dt-ses-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--rf-accent); transition: width 300ms var(--rf-ease); }
+.dt-ses-bar > span[data-indeterminate="true"] { width: 35%; animation: dt-bar-slide 1.3s ease-in-out infinite; }
 @keyframes dt-step-spin { to { rotate: 360deg; } }
-@media (prefers-reduced-motion: reduce) { .dt-ses-steps li::before { animation: none; } }
+@keyframes dt-bar-slide { from { translate: -100% 0; } to { translate: 300% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .dt-ses-steps li::before { animation: none; }
+  .dt-ses-bar > span[data-indeterminate="true"] { width: 100%; opacity: .4; animation: none; }
+}
+.dt-ses-seg:has(> .dt-open) { cursor: pointer; }
+.dt-ses-seg:has(> .dt-open) > .dt-ses-seg-body { position: relative; z-index: 1; }
+@media (hover: none) { .dt-ses-seg:has(> .dt-hover-actions) { padding-right: 40px; } }
 .dt-ses-rows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
 .dt-ses-row {
   display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
@@ -9263,8 +9393,17 @@ button.dt-ses-row:hover { background: var(--rf-bg-hover); }
 .dt-ses-row .dt-card-title { max-width: 100%; }
 ${`
 .dt-ses-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
+.dt-ses-head > .dt-card-head { gap: 10px; }
+.dt-ses-head .dt-ses-title { flex: 0 1 auto; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
 .dt-ses-head .dt-menu > .icon-btn { width: 30px; height: 30px; }
+.dt-ses-facts { display: flex; flex: 1 0 auto; align-items: center; gap: 10px; margin: 0; color: var(--rf-text-muted); font-size: 12px; white-space: nowrap; }
+.dt-ses-facts > span { display: inline-flex; align-items: center; gap: 4px; }
+.dt-ses-facts svg { width: 13px; height: 13px; }
+.dt-ses-foot { flex-wrap: nowrap; }
+.dt-ses-foot > .dt-btn { flex: 1 1 0; justify-content: center; height: 32px; }
 .dt-btn[data-icon-only] { justify-content: center; width: 28px; padding: 0; }
+.dt-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--rf-text) 16%, transparent); }
+.dt-btn[data-variant="primary"][aria-pressed="true"] { background: var(--rf-success); color: #fff; }
 .dt-ses-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--rf-text-muted); }
 .dt-ses-need {
   margin: 0; font-weight: 600; overflow-wrap: anywhere;
@@ -9279,7 +9418,7 @@ ${`
 .dt-ses-details section { display: flex; flex-direction: column; gap: 2px; }
 .dt-ses-quote { padding: 2px 0; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
 .dt-ses-quote:hover { color: var(--rf-accent); }
-.dt-ses-time { flex: none; color: var(--rf-text-muted); font: 11.5px ${MONO_FONT$1}; font-variant-numeric: tabular-nums; }
+.dt-ses-time { flex: none; align-self: flex-start; color: var(--rf-text-muted); font: 11.5px ${MONO_FONT$1}; font-variant-numeric: tabular-nums; }
 .dt-ses-verify { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--rf-border); }
 .dt-ses-timeline { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
 .dt-ses-seg { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--dt-radius-field); }
@@ -9289,10 +9428,18 @@ ${`
 `}${`
 .dt-ses-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
 .dt-ses-shot { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
-.dt-ses-shot img { display: block; max-width: 100%; height: auto; max-height: 132px; border-radius: var(--dt-radius-field); box-shadow: var(--rf-shadow-inset); }
+.dt-ses-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 132px; border-radius: var(--dt-radius-field); box-shadow: var(--rf-shadow-inset); }
 .dt-ses-shot[data-large="true"] img { max-height: none; }
 .dt-ses-shot-mark { position: absolute; border: 2px solid var(--rf-accent); border-radius: var(--dt-radius-tiny); pointer-events: none; }
-.dt-ses-shot-btn { align-self: flex-start; padding: 0; border-radius: var(--dt-radius-field); }
+.dt-ses-shot-face { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
+.dt-ses-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; color: var(--rf-text-muted); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
+.dt-ses-caption-time { display: inline-flex; align-items: center; gap: 4px; color: var(--rf-text); font-weight: 550; font-variant-numeric: tabular-nums; }
+.dt-ses-caption-time svg { width: 12px; height: 12px; color: var(--rf-text-muted); }
+.dt-ses-source-btn {
+  display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--dt-radius-field);
+  text-align: left; transition: background-color 120ms var(--rf-ease);
+}
+.dt-ses-source-btn:hover { background: var(--rf-bg-hover); }
 .dt-ses-start { display: flex; flex-direction: column; gap: 8px; }
 .dt-ses-brief-entry > summary { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--dt-radius-card); background: var(--rf-bg-subtle); cursor: pointer; list-style: none; }
 .dt-ses-brief-entry > summary::-webkit-details-marker { display: none; }
@@ -9584,55 +9731,59 @@ function SelectionRow({ onOpenCode, onShowSelector, selection }) {
 		request,
 		title: selection.label
 	}) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("p", {
-			className: "dt-meta",
-			children: [/* @__PURE__ */ jsx("strong", { children: selection.label }), selection.region && ` · ${selection.region}`]
-		}),
-		selection.comment && /* @__PURE__ */ jsx("p", {
-			className: "dt-note-text",
-			children: selection.comment
-		}),
-		selection.sourceLocation && openSource && /* @__PURE__ */ jsx("button", {
-			className: "dt-source",
-			onClick: openSource,
-			type: "button",
-			children: selection.sourceLocation
-		}),
-		selection.sourceLocation && !onOpenCode && /* @__PURE__ */ jsx("p", {
-			className: "dt-meta",
-			children: selection.sourceLocation
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "dt-actions",
-			children: [/* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: () => setIsOffPage(!onShowSelector(selection.selector)),
-				type: "button",
-				children: "Show on page"
-			}), onOpenCode && !(request || isSearching) && /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: () => setIsSearching(true),
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-selection dt-openable",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "dt-meta",
+				children: /* @__PURE__ */ jsxs("button", {
+					className: "dt-open",
+					onClick: () => setIsOffPage(!onShowSelector(selection.selector)),
+					title: "Show on page",
+					type: "button",
+					children: [/* @__PURE__ */ jsx("strong", { children: selection.label }), selection.region && ` · ${selection.region}`]
+				})
+			}),
+			selection.comment && /* @__PURE__ */ jsx("p", {
+				className: "dt-note-text",
+				children: selection.comment
+			}),
+			selection.sourceLocation && openSource && /* @__PURE__ */ jsx("button", {
+				className: "dt-source",
+				onClick: openSource,
 				type: "button",
-				children: "Find in code"
-			})]
-		}),
-		isOffPage && /* @__PURE__ */ jsx("p", {
-			className: "dt-meta",
-			children: "This element is not on the page right now. Open the state the reporter was in, then try again."
-		}),
-		isSearching && onOpenCode && /* @__PURE__ */ jsx(CodeSearch, {
-			initialQuery: suggestedSearch(selection),
-			onOpenMatch: (match) => onOpenCode({
-				request: {
-					column: null,
-					fileName: match.absolutePath,
-					line: match.line
-				},
-				title: selection.label
+				children: selection.sourceLocation
+			}),
+			selection.sourceLocation && !onOpenCode && /* @__PURE__ */ jsx("p", {
+				className: "dt-meta",
+				children: selection.sourceLocation
+			}),
+			onOpenCode && !(request || isSearching) && /* @__PURE__ */ jsx("div", {
+				className: "dt-actions",
+				children: /* @__PURE__ */ jsx("button", {
+					className: "dt-btn",
+					onClick: () => setIsSearching(true),
+					type: "button",
+					children: "Find in code"
+				})
+			}),
+			isOffPage && /* @__PURE__ */ jsx("p", {
+				className: "dt-meta",
+				children: "This element is not on the page right now. Open the state the reporter was in, then try again."
+			}),
+			isSearching && onOpenCode && /* @__PURE__ */ jsx(CodeSearch, {
+				initialQuery: suggestedSearch(selection),
+				onOpenMatch: (match) => onOpenCode({
+					request: {
+						column: null,
+						fileName: match.absolutePath,
+						line: match.line
+					},
+					title: selection.label
+				})
 			})
-		})
-	] });
+		]
+	});
 }
 function FeedbackCard({ item, onOpenCode, onShowSelector }) {
 	const selections = item.context?.selections ?? [];
@@ -12271,6 +12422,7 @@ const DEVTOOLS_STYLES = `
   position: sticky; bottom: -10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
   margin: auto -10px -10px; padding: 10px; border-top: 1px solid var(--rf-border); background: var(--rf-bg);
 }
+.dt-sheet-body:has(.dt-empty) > .dt-sheet-foot { margin-top: 0; }
 .dt-archived { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--rf-border); border-radius: var(--dt-radius-card); }
 .dt-archived .dt-meta { flex: 1 1 100%; }
 .dt-group { margin: 6px 2px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rf-text-muted); }
@@ -12286,6 +12438,25 @@ const DEVTOOLS_STYLES = `
 .dt-source:hover { text-decoration: underline; }
 .dt-thumb { display: block; align-self: flex-start; max-width: 100%; height: auto; max-height: 132px; object-fit: contain; border-radius: var(--dt-radius-field); box-shadow: var(--rf-shadow-inset); }
 .dt-actions { display: flex; flex-wrap: wrap; gap: 4px; }
+.dt-openable { position: relative; transition: background-color 120ms var(--rf-ease); }
+.dt-openable:has(.dt-open):hover { background: var(--rf-bg-hover); }
+.dt-open { padding: 0; text-align: left; }
+a.dt-open { color: inherit; text-decoration: none; }
+.dt-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+.dt-open:focus-visible { outline: none; }
+.dt-open:focus-visible::after { outline: 2px solid var(--rf-accent); outline-offset: -2px; }
+.dt-card-title > .dt-open { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dt-selection { display: flex; flex-direction: column; gap: 4px; margin-inline: -6px; padding: 6px; border-radius: var(--dt-radius-field); }
+.dt-openable :is(a, button, input, select, textarea):not(.dt-open) { position: relative; z-index: 1; }
+.dt-hover-actions {
+  position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0;
+  transition: opacity 120ms var(--rf-ease);
+}
+.dt-hover-actions > .icon-btn { width: 28px; height: 28px; }
+.dt-hover-actions svg { width: 14px; height: 14px; }
+.dt-openable:hover > .dt-hover-actions, .dt-hover-actions:focus-within { opacity: 1; }
+.dt-card:has(> .dt-hover-actions):not(:has(> .dt-thumb)) > .dt-card-head { padding-right: 66px; }
+@media (hover: none) { .dt-hover-actions { opacity: 1; } }
 .dt-btn {
   display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
   border-radius: var(--rf-pill); background: var(--rf-bg-hover); color: var(--rf-text);
@@ -12843,9 +13014,26 @@ function NoteEditor({ initialText, noteId, onDone }) {
 		})]
 	})] });
 }
-function NoteCardHead({ isSending, note, pinNumber }) {
+function NoteTitle({ note, onShowOnPage, pageLink }) {
 	const { selection } = note;
 	const owner = selection.componentStack[0];
+	const title = owner ? `<${owner}> ${selection.label}` : selection.label;
+	if (onShowOnPage) return /* @__PURE__ */ jsx("button", {
+		className: "dt-open",
+		onClick: onShowOnPage,
+		title: "Show on page",
+		type: "button",
+		children: title
+	});
+	if (pageLink) return /* @__PURE__ */ jsx("a", {
+		className: "dt-open",
+		href: note.capturedContext.url,
+		title: "Open page",
+		children: title
+	});
+	return title;
+}
+function NoteCardHead({ isSending, note, onShowOnPage, pageLink, pinNumber }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dt-card-head",
 		children: [
@@ -12856,7 +13044,11 @@ function NoteCardHead({ isSending, note, pinNumber }) {
 			}),
 			/* @__PURE__ */ jsx("h3", {
 				className: "dt-card-title",
-				children: owner ? `<${owner}> ${selection.label}` : selection.label
+				children: /* @__PURE__ */ jsx(NoteTitle, {
+					note,
+					onShowOnPage,
+					pageLink
+				})
 			}),
 			isSending && /* @__PURE__ */ jsx("span", {
 				className: "dt-chip",
@@ -12893,36 +13085,25 @@ function NoteSourceLine({ isLocating, note, onOpenCode }) {
 		children: selection.region ?? selection.selector
 	});
 }
-function NoteActions({ isSending, note, onEdit, onShowSelector, pageLink }) {
+function NoteHoverActions({ isSending, note, onEdit }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-actions",
-		children: [
-			onShowSelector && /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: onShowSelector,
-				type: "button",
-				children: "Show on page"
-			}),
-			pageLink && /* @__PURE__ */ jsx("a", {
-				className: "dt-btn",
-				href: note.capturedContext.url,
-				children: "Open page"
-			}),
-			!(note.sent || isSending) && /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: onEdit,
-				type: "button",
-				children: "Edit"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				"data-variant": "danger",
-				disabled: isSending,
-				onClick: () => deleteNote(note),
-				type: "button",
-				children: "Delete"
-			})
-		]
+		className: "dt-hover-actions",
+		children: [!(note.sent || isSending) && /* @__PURE__ */ jsx("button", {
+			"aria-label": "Edit note",
+			className: "icon-btn glass",
+			onClick: onEdit,
+			title: "Edit note",
+			type: "button",
+			children: /* @__PURE__ */ jsx(PencilIcon, {})
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": "Delete note",
+			className: "icon-btn glass",
+			disabled: isSending,
+			onClick: () => deleteNote(note),
+			title: "Delete note",
+			type: "button",
+			children: /* @__PURE__ */ jsx(TrashIcon, {})
+		})]
 	});
 }
 function NoteCard({ isLocating, isSending = false, note, onOpenCode, onShowSelector, pageLink, pinNumber }) {
@@ -12931,7 +13112,7 @@ function NoteCard({ isLocating, isSending = false, note, onOpenCode, onShowSelec
 	const closeUp = useCloseUpPreview(note.id, isLocating);
 	const showOnPage = onShowSelector ? () => setIsOffPage(!onShowSelector(note.selection.selector)) : void 0;
 	return /* @__PURE__ */ jsxs("article", {
-		className: "dt-card",
+		className: "dt-card dt-openable",
 		"data-sent": Boolean(note.sent),
 		children: [
 			closeUp && /* @__PURE__ */ jsx("img", {
@@ -12944,6 +13125,8 @@ function NoteCard({ isLocating, isSending = false, note, onOpenCode, onShowSelec
 			/* @__PURE__ */ jsx(NoteCardHead, {
 				isSending,
 				note,
+				onShowOnPage: showOnPage,
+				pageLink,
 				pinNumber
 			}),
 			/* @__PURE__ */ jsx(NoteSourceLine, {
@@ -12963,12 +13146,10 @@ function NoteCard({ isLocating, isSending = false, note, onOpenCode, onShowSelec
 				className: "dt-meta",
 				children: "The element is not on the page right now."
 			}),
-			!isEditing && /* @__PURE__ */ jsx(NoteActions, {
+			!isEditing && /* @__PURE__ */ jsx(NoteHoverActions, {
 				isSending,
 				note,
-				onEdit: () => setIsEditing(true),
-				onShowSelector: showOnPage,
-				pageLink
+				onEdit: () => setIsEditing(true)
 			})
 		]
 	});
@@ -13414,4 +13595,4 @@ function useSheetTab() {
 //#endregion
 export { sessionSheetPlace as A, teamTransport as B, AccountFooter as C, MissingRouteHint as D, MISSING_SECRET_KEY_HINT as E, useWorkspaceLoader as F, SessionApiError as G, disconnectBoard as H, purgeAccount as I, reportFailure as J, sessionApiErrorSchema as K, bridgeBoardCall as L, RecordingLayer as M, SessionWorkspaceProvider as N, SESSIONS_STYLES as O, failureMessage as P, bridgeTransport as R, InboxPanel as S, CONNECT_REQUIREMENT as T, probeDevRoute as U, callReflet as V, startBoardConnect as W, DevtoolsBarButtons as _, NotePicker as a, CodeTab as b, isActiveNote as c, useNotes as d, findOnPage as f, DevtoolsBar as g, DevtoolsSheet as h, NotesPanel as i, useSessionNavigation as j, SessionsPanel as k, isNoteOnPage as l, DEVTOOLS_STYLES as m, useSheetTab as n, enrichNote as o, usePageHighlight as p, Notices as q, NotePins as r, hasTriedToLocate as s, FIRST_SHEET_TAB as t, unsentNoteCount as u, SHEET_TABS as v, AccountNote as w, useCodeLookup as x, SessionsBarButton as y, devtoolsTransport as z };
 
-//# sourceMappingURL=use-sheet-tab-CacYFVjI.js.map
+//# sourceMappingURL=use-sheet-tab-B-q4G0Hn.js.map