reflet-sdk 0.7.3 → 0.7.4

package/dist/{devtools-layer-CsIcpepI.js → devtools-layer-CcTmlikp.js}

@@ -1,9 +1,134 @@
-import { $ as shortenSourcePath, G as describeElement, Q as resolveComponentStack, R as DEFAULT_WIDGET_LABELS, U as buildElementSelection, V as collectPageContext, X as getFiberFromNode, a as uploadBlob, f as listenOnPageAndWidget, g as isSubmitEnter, it as releaseCapture, nt as capturedFromCanvas, o as ElementPicker, p as listenToKeydown, r as deriveTitle, rt as capturedViewportSize, s as isWidgetOwned, tt as captureViewport, z as SDK_VERSION } from "./submit-Dl0rm6TV.js";
+import { $ as shortenSourcePath, G as describeElement, M as TargetIcon, Q as resolveComponentStack, R as DEFAULT_WIDGET_LABELS, U as buildElementSelection, V as collectPageContext, X as getFiberFromNode, a as uploadBlob, f as listenOnPageAndWidget, g as isSubmitEnter, it as releaseCapture, nt as capturedFromCanvas, o as ElementPicker, p as listenToKeydown, r as deriveTitle, rt as capturedViewportSize, s as isWidgetOwned, tt as captureViewport, z as SDK_VERSION } from "./submit-CG4LXioK.js";
 import { t as SelectionOutline } from "./selection-outline-NzAAAZXR.js";
-import { A as Notices, C as searchCode, D as openDatabase, E as describeStorageFailure, M as reportFailure, O as settle, S as probeDevRoute, T as committed, a as DevtoolsBar, b as fetchBoardFeedback, c as copyToClipboard, f as SessionWorkspaceProvider, g as devtoolsTransport, j as announce, l as SESSIONS_STYLES, m as useWorkspaceLoader, n as DEVTOOLS_STYLES, o as DevtoolsBarButtons, r as DevtoolsSheet, t as SessionsPanel, u as RecordingLayer, v as callReflet, w as startBoardConnect, x as fetchSourceFile, y as disconnectBoard } from "./sessions-panel-BYM0UUgT.js";
+import { A as searchCode, C as devtoolsTransport, D as fetchBoardFeedback, E as disconnectBoard, F as settle, L as Notices, M as committed, N as describeStorageFailure, O as fetchSourceFile, P as openDatabase, R as announce, T as callReflet, _ as RecordingLayer, a as SHEET_TABS, c as AccountNote, d as sessionSheetPlace, f as useSessionNavigation, g as copyToClipboard, h as ViewOptionsIcon, i as DevtoolsBarButtons, j as startBoardConnect, k as probeDevRoute, l as SESSIONS_STYLES, m as RefreshIcon, n as DevtoolsSheet, p as Menu, r as DevtoolsBar, s as AccountFooter, t as DEVTOOLS_STYLES, u as SessionsPanel, v as countLabel, x as useWorkspaceLoader, y as SessionWorkspaceProvider, z as reportFailure } from "./devtools-styles-teRMfSzW.js";
 import * as G$1 from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/devtools/client/route/route-hint.tsx
+function MissingRouteHint({ purpose }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		children: [
+			/* @__PURE__ */ jsxs("p", { children: [
+				"Add the Reflet dev route to ",
+				purpose,
+				"."
+			] }),
+			/* @__PURE__ */ jsxs("p", { children: [
+				"Next.js: ",
+				/* @__PURE__ */ jsx("code", { children: "app/api/reflet-devtools/[...path]/route.ts" }),
+				/* @__PURE__ */ jsx("br", {}),
+				/* @__PURE__ */ jsxs("code", { children: [
+					"export ",
+					"{ GET, POST }",
+					" from \"reflet-sdk/devtools/next\";"
+				] })
+			] }),
+			/* @__PURE__ */ jsxs("p", { children: [
+				"Vite: ",
+				/* @__PURE__ */ jsx("code", { children: "plugins: [refletDevtools()]" }),
+				" from",
+				" ",
+				/* @__PURE__ */ jsx("code", { children: "reflet-sdk/devtools/vite" })
+			] })
+		]
+	});
+}
+const CONNECT_REQUIREMENT = "Connecting to Reflet needs a public key and a local address (localhost, *.localhost or *.test).";
+const MISSING_SECRET_KEY_HINT = `${CONNECT_REQUIREMENT} Or set REFLET_SECRET_KEY (your fb_sec_ key) in the dev server environment to reach your board.`;
+//#endregion
+//#region src/devtools/client/account/connect-footer.tsx
+function useBoardConnect(publicKey) {
+	const [state, setState] = useState({ kind: "idle" });
+	const connect = async () => {
+		const tab = window.open("", "_blank");
+		if (tab) tab.opener = null;
+		setState({ kind: "starting" });
+		try {
+			const { authorizeUrl } = await startBoardConnect(publicKey);
+			if (tab) tab.location.href = authorizeUrl;
+			else window.open(authorizeUrl, "_blank", "noopener");
+			setState({
+				authorizeUrl,
+				kind: "waiting"
+			});
+		} catch (error) {
+			tab?.close();
+			setState({ kind: "idle" });
+			reportFailure("Could not connect to Reflet", error);
+		}
+	};
+	return {
+		connect,
+		state
+	};
+}
+function ConnectFooter({ publicKey }) {
+	const { connect, state } = useBoardConnect(publicKey);
+	if (state.kind === "waiting") return /* @__PURE__ */ jsxs("div", {
+		className: "dt-sheet-account",
+		role: "status",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "dt-meta",
+			children: "Finish connecting in the Reflet tab. This panel updates when you come back."
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "dt-actions",
+			children: [/* @__PURE__ */ jsx("a", {
+				className: "dt-btn",
+				href: state.authorizeUrl,
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children: "Open Reflet again"
+			}), /* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				onClick: connect,
+				type: "button",
+				children: "Start again"
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-sheet-account",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "dt-meta",
+			children: "Not connected"
+		}), /* @__PURE__ */ jsx("button", {
+			className: "dt-btn",
+			"data-variant": "primary",
+			disabled: state.kind === "starting",
+			onClick: connect,
+			type: "button",
+			children: "Connect to Reflet"
+		})]
+	});
+}
+//#endregion
+//#region src/devtools/client/account/devtools-account.tsx
+async function disconnect(refresh) {
+	try {
+		const { revoked } = await disconnectBoard();
+		if (!revoked) reportFailure("The Reflet token was not revoked", /* @__PURE__ */ new Error("Disconnected here, but Reflet could not be reached. Revoke it from Account → Devtools on reflet.app."));
+	} catch (error) {
+		reportFailure("The dev server did not disconnect", error);
+	}
+	refresh();
+}
+function DevtoolsAccount({ connectKey, refresh, route, workspace }) {
+	if (route.kind !== "ready") return null;
+	const { board } = route.status;
+	if (board.kind === "secretKey") return /* @__PURE__ */ jsx(AccountNote, { children: "Reaching the board with REFLET_SECRET_KEY" });
+	if (board.kind === "disconnected") return connectKey === null ? /* @__PURE__ */ jsxs(AccountNote, { children: ["Not connected. ", CONNECT_REQUIREMENT] }) : /* @__PURE__ */ jsx(ConnectFooter, { publicKey: connectKey });
+	return /* @__PURE__ */ jsx(AccountFooter, {
+		actions: [{
+			label: "Disconnect",
+			onSelect: () => disconnect(refresh),
+			variant: "danger"
+		}],
+		organizationName: board.organizationName,
+		person: workspace.kind === "ready" ? workspace.workspace.identity.user : null
+	});
+}
+//#endregion
 //#region src/devtools/client/copy-button.tsx
 const COPIED_FEEDBACK_MS = 1600;
 function CopyButton({ label, text, variant }) {
@@ -281,24 +406,29 @@ const SCOPE_LABELS = {
 	board: "Whole board",
 	page: "This page"
 };
+const SCOPE_PLACES = {
+	board: "on the board",
+	page: "on this page"
+};
 const EMPTY_SCOPE_MESSAGES = {
 	board: "The board has no feedback yet.",
 	page: "Nothing on the board points at this page yet."
 };
 function useBoardFeedback(scope) {
 	const [state, setState] = useState({ kind: "loading" });
+	const latestRequest = useRef(0);
 	const load = useCallback(async () => {
-		const pagePath = scope === "page" ? window.location.pathname : null;
+		latestRequest.current += 1;
+		const request = latestRequest.current;
 		setState({ kind: "loading" });
 		try {
-			const page = await fetchBoardFeedback(pagePath);
-			setState({
+			const page = await fetchBoardFeedback(scope === "page" ? window.location.pathname : null);
+			if (request === latestRequest.current) setState({
 				kind: "ready",
-				page,
-				place: pagePath ?? "the board"
+				page
 			});
 		} catch (error) {
-			setState({
+			if (request === latestRequest.current) setState({
 				kind: "failed",
 				message: error instanceof Error ? error.message : "Could not reach the board."
 			});
@@ -312,21 +442,46 @@ function useBoardFeedback(scope) {
 		state
 	};
 }
-function BoardFeedbackList({ onOpenCode, onShowSelector, onShowWholeBoard, scope }) {
-	const { load, state } = useBoardFeedback(scope);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "dt-card-head",
-			children: [/* @__PURE__ */ jsx("p", {
+function InboxToolbar({ onRefresh, onSelectScope, scope, state }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-toolbar",
+		children: [
+			/* @__PURE__ */ jsx("span", {
 				className: "dt-status",
-				children: state.kind === "ready" ? `${state.page.total} on ${state.place}` : "Board feedback"
-			}), /* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
+				children: state.kind === "ready" ? `${state.page.total} ${SCOPE_PLACES[scope]}` : SCOPE_LABELS[scope]
+			}),
+			/* @__PURE__ */ jsx(Menu, {
+				items: INBOX_SCOPES.map((option) => ({
+					checked: option === scope,
+					label: SCOPE_LABELS[option],
+					onSelect: () => onSelectScope(option)
+				})),
+				trigger: {
+					className: "icon-btn",
+					content: /* @__PURE__ */ jsx(ViewOptionsIcon, {}),
+					label: "Show feedback from"
+				}
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Refresh",
+				className: "icon-btn",
 				disabled: state.kind === "loading",
-				onClick: load,
+				onClick: onRefresh,
+				title: "Refresh",
 				type: "button",
-				children: "Refresh"
-			})]
+				children: /* @__PURE__ */ jsx(RefreshIcon, {})
+			})
+		]
+	});
+}
+function BoardFeedbackList({ onOpenCode, onSelectScope, onShowSelector, scope }) {
+	const { load, state } = useBoardFeedback(scope);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(InboxToolbar, {
+			onRefresh: load,
+			onSelectScope,
+			scope,
+			state
 		}),
 		state.kind === "loading" && /* @__PURE__ */ jsx("p", {
 			className: "dt-status",
@@ -334,13 +489,14 @@ function BoardFeedbackList({ onOpenCode, onShowSelector, onShowWholeBoard, scope
 		}),
 		state.kind === "failed" && /* @__PURE__ */ jsx("p", {
 			className: "dt-error",
+			role: "alert",
 			children: state.message
 		}),
 		state.kind === "ready" && state.page.items.length === 0 && /* @__PURE__ */ jsxs("div", {
 			className: "dt-empty",
 			children: [/* @__PURE__ */ jsx("p", { children: EMPTY_SCOPE_MESSAGES[scope] }), scope === "page" && /* @__PURE__ */ jsx("button", {
 				className: "dt-btn",
-				onClick: onShowWholeBoard,
+				onClick: () => onSelectScope("board"),
 				type: "button",
 				children: "Show the whole board"
 			})]
@@ -354,157 +510,26 @@ function BoardFeedbackList({ onOpenCode, onShowSelector, onShowWholeBoard, scope
 }
 function InboxPanel({ onOpenCode, onShowSelector }) {
 	const [scope, setScope] = useState("page");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "dt-tabs",
-		children: INBOX_SCOPES.map((option) => /* @__PURE__ */ jsx("button", {
-			"aria-pressed": option === scope,
-			className: "dt-tab",
-			onClick: () => setScope(option),
-			type: "button",
-			children: SCOPE_LABELS[option]
-		}, option))
-	}), /* @__PURE__ */ jsx(BoardFeedbackList, {
+	return /* @__PURE__ */ jsx(BoardFeedbackList, {
 		onOpenCode,
+		onSelectScope: setScope,
 		onShowSelector,
-		onShowWholeBoard: () => setScope("board"),
 		scope
-	}, scope)] });
-}
-//#endregion
-//#region src/devtools/client/route/connect-prompt.tsx
-function ConnectPrompt({ publicKey, purpose }) {
-	const [prompt, setPrompt] = useState({ kind: "idle" });
-	const connect = async () => {
-		const tab = window.open("", "_blank");
-		if (tab) tab.opener = null;
-		setPrompt({ kind: "starting" });
-		try {
-			const { authorizeUrl } = await startBoardConnect(publicKey);
-			if (tab) tab.location.href = authorizeUrl;
-			else window.open(authorizeUrl, "_blank", "noopener");
-			setPrompt({
-				authorizeUrl,
-				kind: "waiting"
-			});
-		} catch (error) {
-			tab?.close();
-			setPrompt({ kind: "idle" });
-			reportFailure("Could not connect to Reflet", error);
-		}
-	};
-	if (prompt.kind === "waiting") return /* @__PURE__ */ jsxs("div", {
-		className: "dt-empty",
-		children: [
-			/* @__PURE__ */ jsx("p", { children: "Finish connecting in the Reflet tab. This panel updates when you come back." }),
-			/* @__PURE__ */ jsx("a", {
-				className: "dt-btn",
-				href: prompt.authorizeUrl,
-				rel: "noopener noreferrer",
-				target: "_blank",
-				children: "Open Reflet again"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				className: "dt-btn",
-				onClick: connect,
-				type: "button",
-				children: "Start again"
-			})
-		]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-empty",
-		children: [/* @__PURE__ */ jsx("p", { children: purpose }), /* @__PURE__ */ jsx("button", {
-			className: "dt-btn",
-			"data-variant": "primary",
-			disabled: prompt.kind === "starting",
-			onClick: connect,
-			type: "button",
-			children: "Connect to Reflet"
-		})]
 	});
 }
 //#endregion
-//#region src/devtools/client/route/route-hint.tsx
-function MissingRouteHint({ purpose }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-empty",
-		children: [
-			/* @__PURE__ */ jsxs("p", { children: [
-				"Add the Reflet dev route to ",
-				purpose,
-				"."
-			] }),
-			/* @__PURE__ */ jsxs("p", { children: [
-				"Next.js: ",
-				/* @__PURE__ */ jsx("code", { children: "app/api/reflet-devtools/[...path]/route.ts" }),
-				/* @__PURE__ */ jsx("br", {}),
-				/* @__PURE__ */ jsxs("code", { children: [
-					"export ",
-					"{ GET, POST }",
-					" from \"reflet-sdk/devtools/next\";"
-				] })
-			] }),
-			/* @__PURE__ */ jsxs("p", { children: [
-				"Vite: ",
-				/* @__PURE__ */ jsx("code", { children: "plugins: [refletDevtools()]" }),
-				" from",
-				" ",
-				/* @__PURE__ */ jsx("code", { children: "reflet-sdk/devtools/vite" })
-			] })
-		]
-	});
-}
-const MISSING_SECRET_KEY_HINT = "Set REFLET_SECRET_KEY (your fb_sec_ key) in the dev server environment to reach your board.";
-//#endregion
 //#region src/devtools/client/board/board-tab.tsx
-function ConnectionBar({ organizationName, refresh }) {
-	const [isDisconnecting, setIsDisconnecting] = useState(false);
-	const disconnect = async () => {
-		setIsDisconnecting(true);
-		try {
-			const { revoked } = await disconnectBoard();
-			if (!revoked) reportFailure("The Reflet token was not revoked", /* @__PURE__ */ new Error("Disconnected here, but Reflet could not be reached. Revoke it from Account → Devtools on reflet.app."));
-		} catch (error) {
-			reportFailure("The dev server did not disconnect", error);
-		}
-		setIsDisconnecting(false);
-		refresh();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dt-actions",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "dt-status",
-			children: ["Connected to ", organizationName]
-		}), /* @__PURE__ */ jsx("button", {
-			className: "dt-btn",
-			"data-variant": "danger",
-			disabled: isDisconnecting,
-			onClick: disconnect,
-			type: "button",
-			children: "Disconnect"
-		})]
-	});
-}
-function BoardTab({ canConnect, onOpenCode, onShowSelector, publicKey, refresh, route }) {
+function BoardTab({ canConnect, onOpenCode, onShowSelector, route }) {
 	if (route.kind === "missing") return /* @__PURE__ */ jsx(MissingRouteHint, { purpose: "see your board's feedback for this page" });
 	if (route.kind === "checking") return null;
-	const { board } = route.status;
-	if (board.kind === "disconnected") return canConnect && publicKey !== null ? /* @__PURE__ */ jsx(ConnectPrompt, {
-		publicKey,
-		purpose: "See this page's feedback and send notes to your board."
-	}) : /* @__PURE__ */ jsx("p", {
-		className: "dt-hint",
-		children: MISSING_SECRET_KEY_HINT
+	if (route.status.board.kind === "disconnected") return /* @__PURE__ */ jsx("p", {
+		className: "dt-empty",
+		children: canConnect ? "Connect to Reflet below to see this page's feedback and add notes to your board." : MISSING_SECRET_KEY_HINT
 	});
-	const inbox = /* @__PURE__ */ jsx(InboxPanel, {
+	return /* @__PURE__ */ jsx(InboxPanel, {
 		onOpenCode,
 		onShowSelector
 	});
-	if (board.kind === "secretKey") return inbox;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ConnectionBar, {
-		organizationName: board.organizationName,
-		refresh
-	}), inbox] });
 }
 /**
 * @license bippy
@@ -3189,36 +3214,78 @@ function SendToBoard({ activity, sendBlockedReason, unsent }) {
 			disabled: sendBlockedReason !== null || ready.length === 0,
 			onClick: () => sendNotesToBoard(ready),
 			type: "button",
-			children: [ready.length > 0 && `Send ${ready.length} to board`, ready.length === 0 && (unsent.some((note) => activity[note.id] === "locating") ? "Locating…" : "Sending…")]
+			children: [ready.length > 0 && `Add ${ready.length} to board`, ready.length === 0 && (unsent.some((note) => activity[note.id] === "locating") ? "Locating…" : "Adding…")]
 		}),
 		busyCount > 0 && ready.length > 0 && /* @__PURE__ */ jsxs("span", {
 			className: "dt-status",
-			children: [busyCount, " still locating or sending"]
+			children: [busyCount, " still locating or adding"]
 		})
 	] });
 }
-function NotesPanel({ notes: snapshot, onOpenCode, onShowSelector, sendBlockedReason }) {
-	const { activity, error, notes: allNotes, status } = snapshot;
-	if (status === "failed") return /* @__PURE__ */ jsxs("p", {
-		className: "dt-error",
-		children: ["Notes cannot be stored: ", error]
+function NotesEmpty({ onPick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "dt-empty-title",
+				children: "No notes yet"
+			}),
+			/* @__PURE__ */ jsx("p", { children: "Pick an element on the page and write what should change. Shift-click it to open its code instead." }),
+			/* @__PURE__ */ jsxs("button", {
+				className: "dt-btn",
+				"data-variant": "primary",
+				onClick: onPick,
+				type: "button",
+				children: [/* @__PURE__ */ jsx(TargetIcon, {}), "Pick an element"]
+			})
+		]
 	});
-	if (status === "loading") return /* @__PURE__ */ jsx("p", {
-		className: "dt-status",
-		children: "Loading notes…"
+}
+function NotesToolbar({ count, onPick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-toolbar",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "dt-status",
+			children: countLabel(count, "note")
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": "Pick an element to note",
+			className: "icon-btn",
+			onClick: onPick,
+			title: "Pick an element to note",
+			type: "button",
+			children: /* @__PURE__ */ jsx(TargetIcon, {})
+		})]
 	});
-	const notes = allNotes.filter(isActiveNote);
-	const archived = allNotes.filter((note) => !isActiveNote(note));
-	if (notes.length === 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "dt-empty",
-		children: [/* @__PURE__ */ jsx("p", { children: "No notes yet." }), /* @__PURE__ */ jsx("p", { children: "Use the pick button, then click an element to write one — or Shift+click it to open its code." })]
-	}), /* @__PURE__ */ jsx(ArchivedNotes, { archived })] });
+}
+function NotesFooter({ activity, notes, sendBlockedReason }) {
+	const clearable = notes.filter((note) => activity[note.id] !== "sending").map((note) => note.id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-sheet-foot",
+		children: [
+			/* @__PURE__ */ jsx(CopyButton, {
+				label: `Copy ${notes.length} as prompt`,
+				text: notesToPrompt(notes),
+				variant: "primary"
+			}),
+			/* @__PURE__ */ jsx(SendToBoard, {
+				activity,
+				sendBlockedReason,
+				unsent: notes.filter((note) => !note.sent)
+			}),
+			clearable.length > 0 && /* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				onClick: () => archiveNotes(clearable),
+				type: "button",
+				children: "Clear notes"
+			})
+		]
+	});
+}
+function NoteGroups({ activity, notes, onOpenCode, onShowSelector }) {
 	const { pathname } = window.location;
 	const numbers = pinNumbers(notes, pathname);
 	const onThisPage = notes.filter((note) => isNoteOnPage(note, pathname));
 	const elsewhere = notes.filter((note) => !isNoteOnPage(note, pathname));
-	const unsent = notes.filter((note) => !note.sent);
-	const clearable = notes.filter((note) => activity[note.id] !== "sending").map((note) => note.id);
 	const renderNote = (note, isHere) => /* @__PURE__ */ jsx(NoteCard, {
 		isLocating: activity[note.id] === "locating",
 		isSending: activity[note.id] === "sending",
@@ -3238,28 +3305,38 @@ function NotesPanel({ notes: snapshot, onOpenCode, onShowSelector, sendBlockedRe
 			className: "dt-group",
 			children: "Other pages"
 		}),
-		elsewhere.map((note) => renderNote(note, false)),
+		elsewhere.map((note) => renderNote(note, false))
+	] });
+}
+function NotesPanel({ notes: snapshot, onOpenCode, onPick, onShowSelector, sendBlockedReason }) {
+	const { activity, error, notes: allNotes, status } = snapshot;
+	if (status === "failed") return /* @__PURE__ */ jsxs("p", {
+		className: "dt-error",
+		children: ["Notes cannot be stored: ", error]
+	});
+	if (status === "loading") return /* @__PURE__ */ jsx("p", {
+		className: "dt-status",
+		children: "Loading notes…"
+	});
+	const notes = allNotes.filter(isActiveNote);
+	const archived = allNotes.filter((note) => !isActiveNote(note));
+	if (notes.length === 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NotesEmpty, { onPick }), /* @__PURE__ */ jsx(ArchivedNotes, { archived })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(NotesToolbar, {
+			count: notes.length,
+			onPick
+		}),
+		/* @__PURE__ */ jsx(NoteGroups, {
+			activity,
+			notes,
+			onOpenCode,
+			onShowSelector
+		}),
 		/* @__PURE__ */ jsx(ArchivedNotes, { archived }),
-		/* @__PURE__ */ jsxs("div", {
-			className: "dt-sheet-foot",
-			children: [
-				/* @__PURE__ */ jsx(CopyButton, {
-					label: `Copy ${notes.length} as prompt`,
-					text: notesToPrompt(notes),
-					variant: "primary"
-				}),
-				/* @__PURE__ */ jsx(SendToBoard, {
-					activity,
-					sendBlockedReason,
-					unsent
-				}),
-				clearable.length > 0 && /* @__PURE__ */ jsx("button", {
-					className: "dt-btn",
-					onClick: () => archiveNotes(clearable),
-					type: "button",
-					children: "Clear notes"
-				})
-			]
+		/* @__PURE__ */ jsx(NotesFooter, {
+			activity,
+			notes,
+			sendBlockedReason
 		})
 	] });
 }
@@ -3441,12 +3518,8 @@ function useDevtoolsSessions(options) {
 		surface: "devtools",
 		transport: isConnected ? DEVTOOLS_TRANSPORT : null
 	});
-	const [open, setOpen] = useState(null);
 	return {
-		navigation: {
-			onOpen: setOpen,
-			open
-		},
+		navigation: useSessionNavigation(),
 		state
 	};
 }
@@ -3457,16 +3530,7 @@ function SessionsScope({ children, sessions }) {
 		children
 	});
 }
-function SessionsConnect({ connectKey }) {
-	if (connectKey === null) return /* @__PURE__ */ jsx("p", {
-		className: "dt-empty",
-		children: "Sessions are recorded under your Reflet account. Connecting needs this app on localhost with a Reflet public key."
-	});
-	return /* @__PURE__ */ jsx(ConnectPrompt, {
-		publicKey: connectKey,
-		purpose: "Sessions are recorded under your Reflet account."
-	});
-}
+const SESSIONS_NEED_ACCOUNT = "Sessions are recorded under your Reflet account.";
 function WorkspaceGate({ actions, sessions }) {
 	const { state } = sessions;
 	if (state.kind === "ready") return /* @__PURE__ */ jsx(SessionsPanel, {
@@ -3489,17 +3553,24 @@ function WorkspaceGate({ actions, sessions }) {
 		children: "Opening your sessions…"
 	});
 }
-function SessionsTab({ actions, connectKey, route, sessions }) {
+function SessionsTab({ actions, canConnect, route, sessions }) {
 	if (route.kind === "checking") return /* @__PURE__ */ jsx("p", {
 		className: "dt-status",
 		children: "Connecting to the Reflet dev route…"
 	});
 	if (route.kind === "missing") return /* @__PURE__ */ jsx(MissingRouteHint, { purpose: "record sessions under your Reflet account" });
 	const { board } = route.status;
-	if (board.kind === "disconnected") return /* @__PURE__ */ jsx(SessionsConnect, { connectKey });
-	if (board.kind === "secretKey") return /* @__PURE__ */ jsx("p", {
+	if (board.kind === "disconnected") return /* @__PURE__ */ jsxs("p", {
 		className: "dt-empty",
-		children: "Sessions are recorded under your own name, so they need Connect in the Board tab rather than REFLET_SECRET_KEY."
+		children: [
+			SESSIONS_NEED_ACCOUNT,
+			" ",
+			canConnect ? "Connect to Reflet below to start one." : CONNECT_REQUIREMENT
+		]
+	});
+	if (board.kind === "secretKey") return /* @__PURE__ */ jsxs("p", {
+		className: "dt-empty",
+		children: [SESSIONS_NEED_ACCOUNT, " REFLET_SECRET_KEY can't stand for you: remove it from the dev server environment, then connect to Reflet."]
 	});
 	return /* @__PURE__ */ jsx(WorkspaceGate, {
 		actions,
@@ -3507,6 +3578,38 @@ function SessionsTab({ actions, connectKey, route, sessions }) {
 	});
 }
 //#endregion
+//#region src/devtools/client/use-sheet-tab.ts
+const TAB_KEY = "reflet-devtools-sheet-tab";
+const FIRST_SHEET_TAB = "inbox";
+function readStoredTab() {
+	try {
+		const stored = localStorage.getItem(TAB_KEY);
+		return SHEET_TABS.find((tab) => tab === stored) ?? "inbox";
+	} catch {
+		return FIRST_SHEET_TAB;
+	}
+}
+function storeTab(tab) {
+	try {
+		localStorage.setItem(TAB_KEY, tab);
+	} catch {}
+}
+/** The panel reopens where it was left, across reloads. */
+function useSheetTab() {
+	const [openTab, setOpenTab] = useState(null);
+	const [lastTab, setLastTab] = useState(readStoredTab);
+	return {
+		close: () => setOpenTab(null),
+		lastTab,
+		openTab,
+		select: (tab) => {
+			setOpenTab(tab);
+			setLastTab(tab);
+			storeTab(tab);
+		}
+	};
+}
+//#endregion
 //#region src/devtools/client/devtools-layer.tsx
 const PICKER_LABELS = {
 	...DEFAULT_WIDGET_LABELS,
@@ -3517,9 +3620,9 @@ const PICKER_LABELS = {
 };
 function sendBlockedReason(route, canConnect) {
 	if (route.kind === "checking") return "Connecting to the Reflet dev route…";
-	if (route.kind === "missing") return "Add the Reflet dev route to send notes to your board.";
+	if (route.kind === "missing") return "Add the Reflet dev route to add notes to your board.";
 	if (route.status.board.kind !== "disconnected") return null;
-	return canConnect ? "Connect to Reflet in the Board tab to send notes." : MISSING_SECRET_KEY_HINT;
+	return canConnect ? "Connect to Reflet below to add notes to your board." : MISSING_SECRET_KEY_HINT;
 }
 function canConnectBoard(route, publicKey) {
 	return route.kind === "ready" && route.status.board.kind === "disconnected" && route.status.board.canConnect && publicKey !== null;
@@ -3551,6 +3654,37 @@ function useResumeLocating(notes, route) {
 		}
 	}, [notes, route.kind]);
 }
+function SheetPanel({ canConnect, codeLookup, handlers, notes, openTab, route, sessions }) {
+	if (openTab === "notes") return /* @__PURE__ */ jsx(NotesPanel, {
+		notes,
+		onOpenCode: handlers.onOpenCode,
+		onPick: handlers.onPick,
+		onShowSelector: handlers.onShowSelector,
+		sendBlockedReason: sendBlockedReason(route, canConnect)
+	});
+	if (openTab === "inbox") return /* @__PURE__ */ jsx(BoardTab, {
+		canConnect,
+		onOpenCode: handlers.onOpenCode,
+		onShowSelector: handlers.onShowSelector,
+		route
+	});
+	if (openTab === "sessions") return /* @__PURE__ */ jsx(SessionsTab, {
+		actions: {
+			onStarted: handlers.onClose,
+			onWriteNote: () => {
+				handlers.onClose();
+				handlers.onPick();
+			}
+		},
+		canConnect,
+		route,
+		sessions
+	});
+	return codeLookup && /* @__PURE__ */ jsx(CodeTab, {
+		lookup: codeLookup,
+		route
+	});
+}
 function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 	const { refresh, route } = useDevRoute();
 	const notes = useNotes();
@@ -3560,18 +3694,19 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 		route
 	});
 	const [isPicking, setIsPicking] = useState(false);
-	const [openTab, setOpenTab] = useState(null);
+	const sheet = useSheetTab();
+	const { openTab } = sheet;
 	const [highlighted, setHighlighted] = useState(null);
-	const { codeLookup, inspectElement, openCode } = useCodeLookup(setOpenTab);
+	const { codeLookup, inspectElement, openCode } = useCodeLookup(sheet.select);
 	const edge = position.startsWith("top") ? "top" : "bottom";
 	const side = position.endsWith("right") ? "right" : "left";
 	const canReadSource = route.kind === "ready";
 	const canConnect = canConnectBoard(route, publicKey);
 	const isRecessed = isWidgetOpen || isPicking;
-	const closeSheet = useCallback(() => {
-		setOpenTab(null);
+	const closeSheet = () => {
+		sheet.close();
 		setHighlighted(null);
-	}, []);
+	};
 	const startPick = useCallback(() => setIsPicking(true), []);
 	const cancelPick = useCallback(() => setIsPicking(false), []);
 	const showSelector = useCallback((selector) => {
@@ -3602,20 +3737,9 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 			copyToClipboard(draftLocatedNote(element, text, canReadSource).then(noteAsContext)).then(() => announce(`Copied ${title}`)).catch((error) => reportFailure(`${title} was not copied`, error));
 		}
 	}), [canReadSource]);
-	const tabs = codeLookup ? [
-		"notes",
-		"sessions",
-		"inbox",
-		"code"
-	] : [
-		"notes",
-		"sessions",
-		"inbox"
-	];
-	const writeNoteInstead = () => {
-		closeSheet();
-		startPick();
-	};
+	const tabs = SHEET_TABS.filter((tab) => tab !== "code" || codeLookup);
+	const openPanel = (tab) => sheet.select(tab ?? (tabs.includes(sheet.lastTab) ? sheet.lastTab : "inbox"));
+	const sheetPlace = openTab === "sessions" && sessions.state.kind === "ready" ? sessionSheetPlace(sessions.navigation) : null;
 	return /* @__PURE__ */ jsx(SessionsScope, {
 		sessions,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -3629,58 +3753,53 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 					notes,
 					onOpenCode: openCode
 				}),
-				openTab && /* @__PURE__ */ jsxs(DevtoolsSheet, {
+				openTab && /* @__PURE__ */ jsx(DevtoolsSheet, {
+					footer: sheetPlace === null && /* @__PURE__ */ jsx(DevtoolsAccount, {
+						connectKey: canConnect ? publicKey : null,
+						refresh,
+						route,
+						workspace: sessions.state
+					}),
+					navigation: {
+						onSelectTab: sheet.select,
+						place: sheetPlace,
+						tab: openTab,
+						tabs
+					},
 					onClose: closeSheet,
-					onPick: startPick,
-					onSelectTab: setOpenTab,
 					side,
-					tab: openTab,
-					tabs,
-					children: [
-						openTab === "notes" && /* @__PURE__ */ jsx(NotesPanel, {
-							notes,
+					children: /* @__PURE__ */ jsx(SheetPanel, {
+						canConnect,
+						codeLookup,
+						handlers: {
+							onClose: closeSheet,
 							onOpenCode: openCode,
-							onShowSelector: showSelector,
-							sendBlockedReason: sendBlockedReason(route, canConnect)
-						}),
-						openTab === "inbox" && /* @__PURE__ */ jsx(BoardTab, {
-							canConnect,
-							onOpenCode: openCode,
-							onShowSelector: showSelector,
-							publicKey,
-							refresh,
-							route
-						}),
-						openTab === "sessions" && /* @__PURE__ */ jsx(SessionsTab, {
-							actions: {
-								onStarted: closeSheet,
-								onWriteNote: writeNoteInstead
-							},
-							connectKey: canConnect ? publicKey : null,
-							route,
-							sessions
-						}),
-						openTab === "code" && codeLookup && /* @__PURE__ */ jsx(CodeTab, {
-							lookup: codeLookup,
-							route
-						})
-					]
+							onPick: startPick,
+							onShowSelector: showSelector
+						},
+						notes,
+						openTab,
+						route,
+						sessions
+					})
 				}),
 				/* @__PURE__ */ jsx(DevtoolsBar, {
 					edge,
 					side,
 					children: /* @__PURE__ */ jsx(DevtoolsBarButtons, {
-						noteCount: unsentNoteCount(notes),
+						onOpen: openPanel,
 						onPick: startPick,
-						onToggleSheet: (tab) => setOpenTab((current) => current === tab ? null : tab),
-						openTab
+						unsentNoteCount: unsentNoteCount(notes)
 					})
 				}),
 				openTab && /* @__PURE__ */ jsx(SelectionOutline, { node: highlighted }),
 				/* @__PURE__ */ jsx(Notices, {}),
 				sessions.state.kind === "ready" && /* @__PURE__ */ jsx(RecordingLayer, { onFinished: (target) => {
-					sessions.navigation.onOpen(target);
-					setOpenTab("sessions");
+					sessions.navigation.go({
+						target,
+						view: "review"
+					});
+					sheet.select("sessions");
 				} }),
 				isPicking && /* @__PURE__ */ jsx(ElementPicker, {
 					copy,
@@ -3696,4 +3815,4 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 //#endregion
 export { DevtoolsLayer };
 
-//# sourceMappingURL=devtools-layer-CsIcpepI.js.map
+//# sourceMappingURL=devtools-layer-CcTmlikp.js.map