diff --git a/README.md b/README.md
index a264b01e..acf2dca7 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ them all. Each is a real `sp-clone-prototype` run, rebuilt
 from measured samples with the evidence recorded for every token. Open any
 of them with `?canvas=<slug>`, and one board of it with
 `?canvas=<slug>#<file>`. The address follows whatever is open, the page and
-the board in the inspector, so the URL in the bar is always the link to share.
+the selected board, so the URL in the bar is always the link to share.
 
 ### `duolingo-ios`, eight screens that are mostly picture
 
@@ -163,8 +163,9 @@ they say. `sp paths` lists the two directories it writes, and
 `sp clean` removes them.
 
 Deep-link a page with `?canvas=<slug>`, and one board of it with
-`?canvas=<slug>#<file>`: it opens in the inspector with the camera on it, and
-clicking any board writes that link into the address bar. Right-clicking the
+`?canvas=<slug>#<file>`: it opens selected, zoomed to fill the window, and
+clicking any board writes that link into the address bar. Double-click a
+board or an image to zoom it to fill the window. Right-clicking the
 canvas offers Force refresh; choose it after editing a `layout.json`. A board
 folder added after boot appears on its own.
 
diff --git a/canvas/src/App.tsx b/canvas/src/App.tsx
index 299612ae..458cb004 100644
--- a/canvas/src/App.tsx
+++ b/canvas/src/App.tsx
@@ -1,7 +1,6 @@
 import {
   useCallback,
   useEffect,
-  useLayoutEffect,
   useReducer,
   useRef,
   useState,
@@ -34,6 +33,7 @@ import {
   type TLTextShape,
   useEditor,
   useLocalStore,
+  useValue,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import "@tldraw/commenting/commenting.css";
@@ -60,12 +60,13 @@ import {
   CanvasFileShapeUtil,
 } from "./CanvasFileShapeUtil";
 import {
-  ImagePanel,
-  InspectorClicks,
-  InspectorPanel,
-  type CanvasImagePick,
-} from "./InspectorPanel";
-import { asCanvasTarget, type InspectorTarget } from "./inspectorClicks";
+  asCanvasTarget,
+  installBoardHover,
+  installDoubleClickZoom,
+  zoomToFill,
+} from "./canvasClicks";
+import { CanvasPresent } from "./CanvasPresent";
+import { ImagePanel, InspectorPanel } from "./InspectorPanel";
 import { attachToChat } from "./canvasAttach";
 import { CanvasStatusBannerShapeUtil } from "./CanvasStatusBannerShapeUtil";
 import {
@@ -116,8 +117,8 @@ import {
 
 /**
  * A picture is the whole of its box. tldraw hit-tests an image that can carry transparency against
- * its own pixels, so a mockup drawn on nothing answers nothing where it is nothing: the inspector
- * stays shut and the attach buttons never appear except over the drawing itself. Here a picture is
+ * its own pixels, so a mockup drawn on nothing answers nothing where it is nothing: a double-click
+ * does not zoom and the attach buttons never appear except over the drawing itself. Here a picture is
  * a tile in a row of tiles, and the empty part of a tile is still that tile.
  */
 class CanvasImageShapeUtil extends ImageShapeUtil {
@@ -955,44 +956,54 @@ function relayoutCanvasLibrary(editor: Editor) {
 }
 
 /**
- * Opens what the address names (canvasUrl.ts): the tab, `?canvas=<slug>` or the bare URL for the
- * project's own view and `?brand=<slug>` for a brand kit, and after the hash a board of that page,
- * `#<file>`, which opens in the inspector. So a specific round, or one board in it, can be
- * linked to or scripted against instead of relying on whichever page tldraw last persisted, and
- * the bare URL is always the way in, so keep a board open across reloads by deep-linking it, not
- * by leaving it on screen. A board the address names that is not on that page closes the
- * inspector, so what is on screen never contradicts the address. Returns the board opened, if any.
+ * The shape the hash of an address names on a page: a board by its file name, a picture by its
+ * path inside the folder, or one of the person's own shapes by id (canvasContent.ts). Every
+ * picture is under assets/brand and a board is one file at the folder's root, so the kinds of name
+ * cannot collide and the hash does not have to say which it is.
  */
-/** What the inspector has open, as the address spells it: the page it belongs to, and either a
- * board's file name or a picture's path inside that folder. */
-type CanvasAddress = { slug: string; name: string };
+function namedShape(editor: Editor, slug: string, name: string) {
+  if (name.startsWith("shape:")) return editor.getShape(name as TLShapeId);
+  const file = readCanvasLibrary()
+    .flatMap((c) => c.files)
+    .find((c) => c.pageSlug === slug && c.fileName === name);
+  return editor.getShape(
+    file
+      ? boardShapeId(editor, file.path, projectPages(editor).get(slug))
+      : imageShapeId(slug, name),
+  );
+}
 
-function applyCanvasFromUrl(
-  editor: Editor,
-  open: (tab: CanvasTab) => void,
-  show: {
-    board: (file: CanvasLibraryFile | null) => void;
-    image: (pick: CanvasImagePick) => void;
-  },
-) {
+/** The other way: how an address names the one shape selected, if it can name it. */
+function shapeName(editor: Editor, shape: TLShape | undefined) {
+  const target = asCanvasTarget(shape);
+  if (target?.type === CANVAS_FILE_SHAPE_TYPE)
+    return readCanvasLibrary()
+      .flatMap((c) => c.files)
+      .find((c) => c.path === target.props.path)?.fileName;
+  if (target) return canvasImageRef(target.id)?.file;
+  return shape && personsShape(editor, shape) ? shape.id : undefined;
+}
+
+/**
+ * Opens what the address names (canvasUrl.ts): the tab, `?canvas=<slug>` or the bare URL for the
+ * project's own view and `?brand=<slug>` for a brand kit, and after the hash a shape of that page,
+ * `#<file>`, selected with the camera filling the canvas with it. So a specific round, or one
+ * board in it, can be linked to or scripted against instead of relying on whichever page tldraw
+ * last persisted, and the bare URL is always the way in. Returns whether the hash named a shape.
+ */
+function applyCanvasFromUrl(editor: Editor, open: (tab: CanvasTab) => void) {
   // Resolved first, so the bare address sets the page of the canvas it lands on.
   const tab = resolveTab(tabFromUrl(window.location.href));
-  // Read before `open`, which writes the address from the inspector, and that is still empty.
+  // Read before `open`, which writes the address from the selection.
   const named = targetFromUrl(window.location.href);
   // A kit or a document is an overlay over the whole editor rather than a page of it, so there
-  // is no page to set and no board under the hash to go looking for. `open` shuts the inspector
-  // for it.
-  if (tab.kind !== "canvas") {
-    open(tab);
-    return false;
-  }
-  // A project with nothing in it yet, which shows no page (HOME_TAB), so nothing to set.
-  if (!tab.slug) {
+  // is no page to set and no shape under the hash to go looking for. Nor is there for a project
+  // with nothing in it yet, which shows no page (HOME_TAB).
+  if (tab.kind !== "canvas" || !tab.slug) {
     open(tab);
     return false;
   }
-  // The folder whose page the address shows. The board or picture the hash names is one of
-  // that folder's.
+  // The folder whose page the address shows. The shape the hash names is on that page.
   const slug = pageOf(tab);
   const page = editor.getPages().find((c) => c.meta.canvasSlug === slug);
   if (page) editor.setCurrentPage(page.id);
@@ -1002,46 +1013,24 @@ function applyCanvasFromUrl(
   const here = editor.getCurrentPage().meta.canvasSlug;
   if (page) open(tab);
   else if (typeof here === "string") open({ kind: "canvas", slug: here });
-  // One of the person's own shapes, by id (canvasContent.ts): selected, and the camera on it.
-  const own =
-    named?.startsWith("shape:") && editor.getShape(named as TLShapeId);
-  if (own) {
-    show.board(null);
-    editor.select(own);
-    requestAnimationFrame(() =>
-      editor.zoomToSelection({ animation: { duration: 0 } }),
-    );
-    return true;
-  }
-  const file =
-    readCanvasLibrary()
-      .flatMap((c) => c.files)
-      .find((c) => c.pageSlug === slug && c.fileName === named) ?? null;
-  // Then a picture of this page, which the address names by its path inside the folder. Every
-  // one of them is under assets/brand and a board is one file at the folder's root, so the two
-  // kinds of name cannot collide and the hash does not have to say which it is.
-  const found = !file && named ? readCanvasImage(slug, named) : undefined;
-  if (named && found) {
-    show.image({
-      shapeId: imageShapeId(slug, named),
-      slug,
-      file: named,
-      ...found,
-    });
-    return true;
+  const shape = named ? namedShape(editor, slug, named) : undefined;
+  if (!shape) {
+    editor.selectNone();
+    return false;
   }
-  show.board(file);
-  return Boolean(file);
+  // Selected now, so the address written after this names it; the camera once tldraw has
+  // measured the viewport.
+  editor.select(shape.id);
+  requestAnimationFrame(() => zoomToFill(editor, shape.id, false));
+  return true;
 }
 
 /**
  * Keeps the address on what is being looked at, so whatever is on screen can be shared by
- * copying the URL: the tab in front, and the board or picture open in the inspector when it is
- * one of that page's (an inspector left open across a page change names something of the other
- * page, which the address then leaves out). `write` derives the address from those two whenever
- * either changes, and never edits it in place, so the two writers cannot disagree. App calls
- * `write` through `tab.open` when a tab comes forward, and directly when the inspector opens or
- * closes.
+ * copying the URL: the tab in front, and the shape selected when it is the only one and the
+ * address can name it. `write` derives the address from those two whenever either changes, and
+ * never edits it in place, so the writers cannot disagree. App calls `write` through `tab.open`
+ * when a tab comes forward; the selection writes it here.
  *
  * This watches the page rather than writing from it, because the page is only one of the two
  * ways a canvas tab comes forward and the other is the bar. tldraw's own page changes, from a
@@ -1049,36 +1038,24 @@ function applyCanvasFromUrl(
  * tldraw persisted that no folder claims have no slug, and leave the bar and the address as they
  * are.
  *
- * Each change pushes a history entry, so Back returns to the previous one and, from there, to
- * its page; a popstate applies the entry it lands on. Applying an address
- * is the one time what is on screen changes without the address needing to follow, so the
- * watcher skips it and every write it provokes replaces instead of pushing, since an entry
- * there would be a second copy of the one just landed on.
+ * A change of tab pushes a history entry, so Back returns to the previous one; a change of
+ * selection replaces the entry, since it is not somewhere to go back to. A popstate applies the
+ * entry it lands on. Applying an address is the one time what is on screen changes without the
+ * address needing to follow, so the watchers skip it and every write it provokes replaces
+ * instead of pushing, since an entry there would be a second copy of the one just landed on.
  */
 function installCanvasUrlSync(
   editor: Editor,
   tab: { active: () => CanvasTab; open: (tab: CanvasTab) => void },
-  opened: () => CanvasAddress | null,
-  show: {
-    board: (file: CanvasLibraryFile | null) => void;
-    image: (pick: CanvasImagePick) => void;
-  },
 ) {
   let applying = false;
 
   const write = (push: boolean) => {
     const active = tab.active();
-    const open = opened();
-    // Else one of the person's shapes when it alone is selected, as its link opens it.
-    const selected = editor.getOnlySelectedShape();
     const named =
-      active.kind !== "canvas"
-        ? undefined
-        : open?.slug === pageOf(active)
-          ? open.name
-          : selected && personsShape(editor, selected)
-            ? selected.id
-            : undefined;
+      active.kind === "canvas"
+        ? shapeName(editor, editor.getOnlySelectedShape() ?? undefined)
+        : undefined;
     const href = urlForTab(window.location.href, active, named);
     // The window shows this address as its own, and the bar the tab it is on (AppShell.tsx).
     window.parent.spShell!.shown(tabFor(active), href);
@@ -1091,7 +1068,7 @@ function installCanvasUrlSync(
     applying = true;
     let named: boolean;
     try {
-      named = applyCanvasFromUrl(editor, tab.open, show);
+      named = applyCanvasFromUrl(editor, tab.open);
     } finally {
       applying = false;
     }
@@ -1114,12 +1091,24 @@ function installCanvasUrlSync(
     if (typeof slug !== "string" || !active || slug === active) return;
     tab.open({ kind: "canvas", slug });
   });
+  // `write` reads the selected shape's record, so this also runs as that shape is dragged or
+  // typed into. Only a different shape is a new address.
+  let selected: string | null | undefined;
+  const stopSelection = react("selection in the address", () => {
+    const id = editor.getOnlySelectedShapeId();
+    const first = selected === undefined;
+    if (id === selected) return;
+    selected = id;
+    if (first || applying) return;
+    write(false);
+  });
   window.addEventListener("popstate", apply);
   return {
     apply,
     write,
     uninstall: () => {
       stopSync();
+      stopSelection();
       window.removeEventListener("popstate", apply);
     },
   };
@@ -1146,17 +1135,13 @@ function initializeCanvas(editor: Editor) {
   editor.selectNone();
 }
 
-/** Distance from the viewport's edge to the board the address named, in screen px. */
-const BOARD_ZOOM_INSET = 80;
-
 export default function App() {
-  /** The board open in the inspector: click any board on the canvas to open it, Escape or × to close. */
-  const [inspecting, setInspecting] = useState<CanvasLibraryFile | null>(null);
-  /** The brand image open in the inspector instead, when a picture was the thing clicked. */
-  const [inspectingImage, setInspectingImage] =
-    useState<CanvasImagePick | null>(null);
   const [commentUser, setCommentUser] = useState(readCommentUser);
-  /** State rather than a ref: the inspector panel renders outside `<Tldraw>` and needs it. */
+  /** The inspector, off until the strip's button turns it on. */
+  const [inspectorOn, setInspectorOn] = useState(false);
+  /** That selected board's frame on the canvas: the panel reads its report and posts back there. */
+  const inspectorFrame = useRef<HTMLIFrameElement | null>(null);
+  /** State rather than a ref: the chrome context hands it to parts that render outside `<Tldraw>`. */
   const [editor, setEditor] = useState<Editor | null>(null);
   /**
    * The tab in front. State rather than something derived from the tldraw page, because a brand
@@ -1167,18 +1152,16 @@ export default function App() {
     resolveTab(tabFromUrl(window.location.href)),
   );
   const store = useLocalStore(storeOptions);
-  /** What the inspector has open, spelled the way the address spells it: a board by file name,
-   * a picture by its path inside the folder, each with the page it belongs to. For the address
-   * writer, which runs outside React. */
-  const opened = useRef<CanvasAddress | null>(null);
-  /** Writes the address from the tab in front and the inspector; installed with the editor. */
+  /** What the inspector shows while it is on: the one board or picture selected. */
+  const inspected = useValue(
+    "inspected",
+    () => asCanvasTarget(editor?.getOnlySelectedShape() ?? undefined),
+    [editor],
+  );
+  /** Writes the address from the tab in front and the selection; installed with the editor. */
   const writeUrl = useRef<(push: boolean) => void>(() => {});
   /** The tab in front as of this call rather than as of the last render, for that writer. */
   const active = useRef(activeTab);
-  /** What the address named, for the camera to go to once the inspector is beside it. */
-  const zoomTo = useRef<TLShapeId | null>(null);
-  /** That board's frame on the canvas: the panel reads its report and posts its selection there. */
-  const inspectorFrame = useRef<HTMLIFrameElement | null>(null);
 
   // A board rewritten in place is news as much as a new one: it rings green, where a new one
   // rings blue, until the pointer passes over it (canvasChrome.tsx). The server lists only the
@@ -1201,50 +1184,6 @@ export default function App() {
     return () => window.removeEventListener(BOARDS_CHANGED, changed);
   }, []);
 
-  /**
-   * Opens a board in the inspector, or closes it. A pick or a close is a new address; applying
-   * an address is not, and passes `push: false`.
-   */
-  const show = useCallback((file: CanvasLibraryFile | null, push: boolean) => {
-    opened.current = file ? { slug: file.pageSlug, name: file.fileName } : null;
-    setInspecting(file);
-    // One dock, one thing in it: a board opening takes the place of a picture and the other way.
-    setInspectingImage(null);
-    if (push) {
-      zoomTo.current = null; // the reader's own pick or close, so no address is left to zoom to
-      writeUrl.current(true);
-    }
-  }, []);
-  /** The same for a picture, which has an address of its own for the same reason a board does:
-   * it is a thing on the canvas someone will want to send to someone else. */
-  const showImage = useCallback((pick: CanvasImagePick, push: boolean) => {
-    opened.current = { slug: pick.slug, name: pick.file };
-    setInspecting(null);
-    setInspectingImage(pick);
-    if (push) {
-      zoomTo.current = null;
-      writeUrl.current(true);
-    }
-  }, []);
-  const onCloseInspector = useCallback(() => show(null, true), [show]);
-  const onPick = useCallback(
-    (shape: InspectorTarget) => {
-      if (shape.type === CANVAS_FILE_SHAPE_TYPE) {
-        const file = readCanvasLibrary()
-          .flatMap((c) => c.files)
-          .find((c) => c.path === shape.props.path);
-        if (file) show(file, true);
-        return;
-      }
-      // Brand material, addressed by the folder path its shape is keyed by.
-      const ref = canvasImageRef(shape.id);
-      const entry = ref && readCanvasImage(ref.slug, ref.file);
-      if (!ref || !entry) return;
-      showImage({ shapeId: shape.id, ...ref, ...entry }, true);
-    },
-    [show, showImage],
-  );
-
   /**
    * Brings a tab forward. That marks it the one in front and puts it in the address, which the
    * window mirrors and takes the bar's chip from. It is everything a tab is except the tldraw
@@ -1252,20 +1191,14 @@ export default function App() {
    *
    * Split in two because the address sync captures this one when the editor mounts and holds it
    * for the life of that editor, so it has to be a function whose behaviour does not depend on
-   * anything it closed over changing. It closes over `show` and nothing else.
+   * anything it closed over changing. It closes over nothing that does.
    */
-  const showTab = useCallback(
-    (tab: CanvasTab) => {
-      const open = resolveTab(tab);
-      // A kit or a document covers the canvas whole, and the inspector left open beside it would
-      // be a dock onto a board of a page that is no longer in front.
-      if (open.kind !== "canvas") show(null, false);
-      active.current = open;
-      setActiveTab(open);
-      writeUrl.current(true);
-    },
-    [show],
-  );
+  const showTab = useCallback((tab: CanvasTab) => {
+    const open = resolveTab(tab);
+    active.current = open;
+    setActiveTab(open);
+    writeUrl.current(true);
+  }, []);
 
   /**
    * From a chip, a row of the bar's "+" menu, or a link on a board.
@@ -1325,24 +1258,12 @@ export default function App() {
           const tab = tabFromUrl(href);
           const name = targetFromUrl(href);
           if (tab.kind !== "canvas" || !name) return undefined;
-          if (name.startsWith("shape:")) {
-            const shape = editor.getShape(name as TLShapeId);
-            return personsShape(editor, shape) ? shape : undefined;
-          }
-          const file = readCanvasLibrary()
-            .flatMap((c) => c.files)
-            .find((c) => c.pageSlug === tab.slug && c.fileName === name);
-          return asCanvasTarget(
-            editor.getShape(
-              file
-                ? boardShapeId(
-                    editor,
-                    file.path,
-                    projectPages(editor).get(tab.slug),
-                  )
-                : imageShapeId(tab.slug, name),
-            ),
-          );
+          const shape = namedShape(editor, tab.slug, name);
+          return name.startsWith("shape:")
+            ? personsShape(editor, shape)
+              ? shape
+              : undefined
+            : asCanvasTarget(shape);
         });
         if (!targets.every(Boolean)) return false;
         void attachToChat(editor, targets as TLShape[]);
@@ -1351,21 +1272,6 @@ export default function App() {
     };
   });
 
-  // The camera goes to what the address named, after the inspector has taken its share of the
-  // window: a layout effect, so the panel is in the DOM, and the viewport measured here because
-  // tldraw measures it on a throttled resize observer, up to 200ms behind, which would fit the
-  // board to the canvas width the panel just took. Every `show` from an address is a fresh
-  // object, so the effect runs even for the one already open.
-  useLayoutEffect(() => {
-    const id = zoomTo.current;
-    zoomTo.current = null;
-    if (!editor || !id) return;
-    const bounds = editor.getShapePageBounds(id);
-    if (!bounds) return;
-    editor.updateViewportScreenBounds(editor.getContainer());
-    editor.zoomToBounds(bounds, { inset: BOARD_ZOOM_INSET });
-  }, [inspecting, inspectingImage, editor]);
-
   function handleMount(editor: Editor) {
     setEditor(editor);
     // tldraw's own dark theme, to match the panel's. A dark rail against tldraw's near-white ground
@@ -1376,27 +1282,10 @@ export default function App() {
     // since a comment can be pinned to a shape the person put there.
     const disposeContent = installCanvasContent(editor);
     const disposeComments = installCanvasComments(editor);
-    const sync = installCanvasUrlSync(
-      editor,
-      { active: () => active.current, open: showTab },
-      () => opened.current,
-      {
-        board: (file) => {
-          zoomTo.current = file
-            ? boardShapeId(
-                editor,
-                file.path,
-                projectPages(editor).get(file.pageSlug),
-              )
-            : null;
-          show(file, false);
-        },
-        image: (pick) => {
-          zoomTo.current = pick.shapeId;
-          showImage(pick, false);
-        },
-      },
-    );
+    const sync = installCanvasUrlSync(editor, {
+      active: () => active.current,
+      open: showTab,
+    });
     writeUrl.current = sync.write;
     // The address names one of them, or the whole page is the view. Not on a reload, which is
     // mostly the server's answer to a board the agent just wrote: tldraw has already put back
@@ -1408,9 +1297,13 @@ export default function App() {
       )?.type === "reload";
     if (!sync.apply() && !reloaded)
       requestAnimationFrame(() => editor.zoomToFit());
+    const disposeZoom = installDoubleClickZoom(editor);
+    const disposeHover = installBoardHover(editor);
     return () => {
+      disposeHover();
       disposeContent();
       disposeComments();
+      disposeZoom();
       sync.uninstall();
     };
   }
@@ -1424,11 +1317,10 @@ export default function App() {
         editor,
         commentUser,
         setCommentUser,
-        inspectBoard: onPick,
-        inspectingPath: inspecting?.path ?? null,
-        inspectorOpen: Boolean(inspecting || inspectingImage),
         activeTab,
         openTab,
+        inspectorOn,
+        setInspectorOn,
         setInspectorFrame: (frame: HTMLIFrameElement | null) => {
           inspectorFrame.current = frame;
         },
@@ -1437,6 +1329,7 @@ export default function App() {
       {/* The project's side of the window: its canvases across the top, then the canvas. The bar
           above and the agent's panel beside are the window's (AppShell.tsx), outside this frame. */}
       <div className="canvas-project">
+        <CanvasPresent editor={editor} />
         <CanvasStrip />
         <div className="canvas-work">
           <div className="canvas-stage">
@@ -1457,8 +1350,7 @@ export default function App() {
                 tools={canvasCommentTools}
                 overrides={canvasUiOverrides}
                 // Every board and picture is locked (below, and the library's own placement) so a
-                // pan can't drag one and a click opens the inspector instead of tldraw's own
-                // selection — but by default tldraw also drops locked shapes from a marquee drag
+                // pan can't drag one — but by default tldraw also drops locked shapes from a marquee drag
                 // entirely, which is the one thing this option turns back on. The lock itself is
                 // what keeps them from moving: `updateShapes` skips a locked shape's own partial
                 // regardless of this flag, so a selected board still can't be dragged or resized.
@@ -1480,12 +1372,6 @@ export default function App() {
                 <AgentBridge />
                 <CanvasLinkPaste />
                 <LockedLinkClicks />
-                <InspectorClicks
-                  onPick={onPick}
-                  onDismiss={onCloseInspector}
-                  inspectingPath={inspecting?.path ?? null}
-                  frame={inspectorFrame}
-                />
                 <EmptyLibraryNotice />
               </Tldraw>
             </main>
@@ -1518,24 +1404,36 @@ export default function App() {
               </div>
             )}
           </div>
-          {inspecting ? (
-            // Keyed by path: a different board is a fresh panel, with its own selection and
-            // report, rather than one that resets its state in an effect.
-            <InspectorPanel
-              key={inspecting.path}
-              path={inspecting.path}
-              name={inspecting.title}
-              size={boardSize(inspecting)}
-              frame={inspectorFrame}
-              onClose={onCloseInspector}
-            />
-          ) : inspectingImage ? (
-            <ImagePanel
-              key={inspectingImage.shapeId}
-              pick={inspectingImage}
-              onClose={onCloseInspector}
-            />
-          ) : null}
+          {inspectorOn && activeTab.kind === "canvas" && inspected && editor
+            ? (() => {
+                if (inspected.type === CANVAS_FILE_SHAPE_TYPE) {
+                  const file = readCanvasLibrary()
+                    .flatMap((c) => c.files)
+                    .find((c) => c.path === inspected.props.path);
+                  // Keyed by path: a different board is a fresh panel, with its own selection
+                  // and report, rather than one that resets its state in an effect.
+                  return file ? (
+                    <InspectorPanel
+                      key={file.path}
+                      path={file.path}
+                      name={file.title}
+                      size={boardSize(file)}
+                      frame={inspectorFrame}
+                      onClose={() => editor.selectNone()}
+                    />
+                  ) : null;
+                }
+                const ref = canvasImageRef(inspected.id);
+                const entry = ref && readCanvasImage(ref.slug, ref.file);
+                return ref && entry ? (
+                  <ImagePanel
+                    key={inspected.id}
+                    pick={{ shapeId: inspected.id, ...ref, ...entry }}
+                    onClose={() => editor.selectNone()}
+                  />
+                ) : null;
+              })()
+            : null}
         </div>
       </div>
     </CanvasChromeContext.Provider>
diff --git a/canvas/src/CanvasFileShapeUtil.tsx b/canvas/src/CanvasFileShapeUtil.tsx
index 927efc6e..5d6d0b77 100644
--- a/canvas/src/CanvasFileShapeUtil.tsx
+++ b/canvas/src/CanvasFileShapeUtil.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo, type CSSProperties } from "react";
+import { useContext, type CSSProperties } from "react";
 import {
   BaseBoxShapeUtil,
   FileHelpers,
@@ -6,7 +6,9 @@ import {
   T,
   type RecordProps,
   type TLShape,
+  useEditor,
   useIsEditing,
+  useValue,
 } from "tldraw";
 import { CanvasChromeContext } from "./canvasChrome";
 import { local } from "./canvasIndex";
@@ -20,6 +22,22 @@ import { injectAgent } from "./inspectorAgent";
 
 export const CANVAS_FILE_SHAPE_TYPE = "canvas-file" as const;
 
+/**
+ * Outlines the element under the canvas's pointer, which installBoardHover (canvasClicks.ts)
+ * posts in board px as `sp:at`; a point off the board is (-1, -1) and clears it. A path is its
+ * icon's, so an svg outlines whole. ES5, since it runs in whatever the board is.
+ */
+const HOVER =
+  "<script>(function(){var d=document.createElement('div');" +
+  "d.style.cssText='position:fixed;pointer-events:none;z-index:2147483647;display:none;box-sizing:border-box;box-shadow:0 0 0 1px #006EFE';" +
+  "document.documentElement.appendChild(d);" +
+  "addEventListener('message',function(e){var m=e.data;if(!m||m.type!=='sp:at')return;" +
+  "var el=document.elementFromPoint(m.x,m.y);if(el&&el.closest&&el.closest('svg'))el=el.closest('svg');" +
+  "if(!el||el===document.body||el===document.documentElement){d.style.display='none';return;}" +
+  "var r=el.getBoundingClientRect(),s=d.style;s.display='block';s.left=r.left+'px';s.top=r.top+'px';s.width=r.width+'px';s.height=r.height+'px';});" +
+  "})();</" +
+  "script>";
+
 declare module "tldraw" {
   export interface TLGlobalShapePropsMap {
     [CANVAS_FILE_SHAPE_TYPE]: {
@@ -36,28 +54,19 @@ export type CanvasFileShape = TLShape<typeof CANVAS_FILE_SHAPE_TYPE>;
 // oxlint-disable-next-line react/only-export-components
 function CanvasFile({ shape }: { shape: CanvasFileShape }) {
   const isEditing = useIsEditing(shape.id);
-  const { inspectingPath, setInspectorFrame } = useContext(CanvasChromeContext);
   const html = useCanvasFileHtml(shape.props.path);
-
-  /**
-   * The board the inspector has open runs the agent (inspectorAgent.ts), so a click on the mockup
-   * out here picks the element under it. The panel used to load a second copy of the board to do
-   * that, which meant reading one mockup and clicking another.
-   *
-   * The frame still never takes the pointer: inspectorClicks.ts hands the agent the canvas's own
-   * pointer as a board coordinate, so panning, zooming and the comment tool go on working over
-   * the board being read.
-   */
-  const inspected = inspectingPath === shape.props.path;
-  const agentDoc = useMemo(
-    () => (html && inspected ? injectAgent(html) : null),
-    [html, inspected],
+  const { inspectorOn, setInspectorFrame } = useContext(CanvasChromeContext);
+  const editor = useEditor();
+  const selected = useValue(
+    "board selected",
+    () => editor.getOnlySelectedShapeId() === shape.id,
+    [editor, shape.id],
   );
 
-  // Behind the container, which is transparent, so the frames show through it. Safari routes a
+  // Behind the container, which is transparent, so the frame shows through it. Safari routes a
   // wheel to an iframe's own scrolling area whatever pointer-events says, so a two-finger pan
   // over a board did nothing there, and a horizontal one chained out to the browser's back
-  // gesture. Behind the container neither frame is a scroll target, and the pan reaches tldraw
+  // gesture. Behind the container the frame is no scroll target, and the pan reaches tldraw
   // wherever the cursor is. tldraw's own embed shape carries this same line:
   // <https://stackoverflow.com/a/49150908>.
   const frame: CSSProperties = {
@@ -94,31 +103,41 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
             sandbox=""
             style={{ ...frame, zIndex: isEditing ? undefined : -2 }}
           />
-          {/* The scripted board is a second document: srcdoc cannot be swapped on the frame above
-              (Chrome drops the second navigation while the first is still pending and leaves the
-              frame blank), and remounting it reloaded the mockup under the very click that opened
-              it, which is the flash. It loads over the board instead, pixel for pixel the same
-              one, so the swap is invisible — and the board underneath stays loaded, so closing
-              the inspector shows nothing either. */}
-          {agentDoc ? (
+          {/* The selected board outlines the element under the pointer: with the inspector on it
+              runs the inspect agent (inspectorAgent.ts), which also picks the element clicked and
+              reports the board to the panel, and otherwise only HOVER. It loads over the board
+              rather than into its frame: Chrome drops a second srcdoc navigation while the first
+              is pending and leaves the frame blank, and a remount reloads the mockup under the
+              click that selected it. Pixel for pixel the same board, so the swap is invisible.
+              `allow-scripts` and deliberately not `allow-same-origin`, which together would let
+              the board reach back out into the canvas. */}
+          {selected && inspectorOn ? (
             <iframe
               ref={(el) => {
                 setInspectorFrame(el);
                 return () => setInspectorFrame(null);
               }}
               title={shape.props.name}
-              srcDoc={agentDoc}
-              // `allow-scripts` and deliberately not `allow-same-origin`, which together would let
-              // the frame reach back out into the canvas.
+              srcDoc={injectAgent(html)}
               sandbox="allow-scripts"
+              data-sp-hover={shape.id}
               // The agent answers with its report; the frame's own load event may have fired
               // before the panel was listening.
               onLoad={(e) =>
-                e.currentTarget.contentWindow?.postMessage(
-                  { type: "sp:hello" },
-                  "*",
-                )
+                e.currentTarget.contentWindow?.postMessage({ type: "sp:hello" }, "*")
+              }
+              style={{ ...frame, zIndex: isEditing ? undefined : -1 }}
+            />
+          ) : selected ? (
+            <iframe
+              title={shape.props.name}
+              srcDoc={
+                /<\/body>/i.test(html)
+                  ? html.replace(/<\/body>/i, (tag) => HOVER + tag)
+                  : html + HOVER
               }
+              sandbox="allow-scripts"
+              data-sp-hover={shape.id}
               style={{ ...frame, zIndex: isEditing ? undefined : -1 }}
             />
           ) : null}
diff --git a/canvas/src/CanvasPresent.tsx b/canvas/src/CanvasPresent.tsx
new file mode 100644
index 00000000..593f299e
--- /dev/null
+++ b/canvas/src/CanvasPresent.tsx
@@ -0,0 +1,137 @@
+import { type ReactNode, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import type { Editor } from "tldraw";
+import { asCanvasTarget, type CanvasTarget } from "./canvasClicks";
+import { CANVAS_FILE_SHAPE_TYPE } from "./CanvasFileShapeUtil";
+import { useCanvasFileHtml } from "./canvasLibrary";
+
+/** Screen px between a presented board and the window's edge. */
+const INSET = 32;
+
+/**
+ * Space on a selected board or picture shows it alone over the whole window (`Present`), scaled
+ * to fit it. Taken from tldraw on the key going down, so with one of them selected Space is this
+ * and not the hand.
+ */
+export function CanvasPresent({ editor }: { editor: Editor | null }) {
+  const [shown, setShown] = useState<CanvasTarget>();
+  const top = window.top!;
+  const [view, setView] = useState({ w: top.innerWidth, h: top.innerHeight });
+
+  useEffect(() => {
+    if (!editor || shown) return;
+    const onDown = (e: KeyboardEvent) => {
+      if (e.code !== "Space" || e.repeat) return;
+      // Space on a focused control is that control's: typing, or pressing a button.
+      const control =
+        e.target instanceof HTMLElement &&
+        (e.target.isContentEditable ||
+          e.target.closest(
+            "input, textarea, select, button, a[href], [role=button], [role=menuitem], [role=tab]",
+          ));
+      if (control || editor.getEditingShapeId()) return;
+      const selected = editor.getSelectedShapes();
+      const target = selected.length === 1 && asCanvasTarget(selected[0]);
+      if (!target) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setShown(target);
+    };
+    addEventListener("keydown", onDown, true);
+    return () => removeEventListener("keydown", onDown, true);
+  }, [editor, shown]);
+
+  useEffect(() => {
+    const resized = () => setView({ w: top.innerWidth, h: top.innerHeight });
+    top.addEventListener("resize", resized);
+    return () => top.removeEventListener("resize", resized);
+  }, [top]);
+
+  if (!editor || !shown) return null;
+  return (
+    <Present
+      close={() => {
+        setShown(undefined);
+        editor.focus();
+      }}
+    >
+      <Presented editor={editor} shape={shown} view={view} />
+    </Present>
+  );
+}
+
+/**
+ * Something shown alone over the whole window, the window dimmed round it: a board or picture
+ * from the canvas, or a picture in the chat. Space, Esc or a click anywhere comes back to where
+ * it was. Inside the window rather than the browser's full screen, which on a Mac moves the window
+ * to a display of its own and back, slowly.
+ *
+ * In the window's document, not the canvas frame's, so it covers the tab bar and the chat as well
+ * (the window loads the same stylesheet, shell.tsx). The keys are heard in both documents: the
+ * focus can be in either.
+ */
+export function Present({
+  close,
+  children,
+}: {
+  close: () => void;
+  children: ReactNode;
+}) {
+  const top = window.top!;
+  useEffect(() => {
+    const onDown = (e: KeyboardEvent) => {
+      if (e.code !== "Space" && e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (!e.repeat) close();
+    };
+    const windows = top === window ? [window] : [window, top];
+    for (const w of windows) w.addEventListener("keydown", onDown, true);
+    return () => {
+      for (const w of windows) w.removeEventListener("keydown", onDown, true);
+    };
+  }, [close, top]);
+  return createPortal(
+    <div
+      className="sp-present"
+      onClick={close}
+    >
+      {children}
+    </div>,
+    top.document.body,
+  );
+}
+
+function Presented({
+  editor,
+  shape,
+  view,
+}: {
+  editor: Editor;
+  shape: CanvasTarget;
+  view: { w: number; h: number };
+}) {
+  const board = shape.type === CANVAS_FILE_SHAPE_TYPE ? shape : undefined;
+  const html = useCanvasFileHtml(board?.props.path ?? "");
+  const { w, h } = shape.props;
+  if (board)
+    return (
+      <iframe
+        title={board.props.name}
+        srcDoc={html}
+        sandbox=""
+        style={{
+          width: w,
+          height: h,
+          scale: String(
+            Math.min((view.w - 2 * INSET) / w, (view.h - 2 * INSET) / h),
+          ),
+        }}
+      />
+    );
+  const src =
+    shape.type === "image" && shape.props.assetId
+      ? editor.getAsset(shape.props.assetId)?.props.src
+      : undefined;
+  return src ? <img alt="" src={src} /> : null;
+}
diff --git a/canvas/src/CanvasStrip.tsx b/canvas/src/CanvasStrip.tsx
index 4b662f26..172cc7ae 100644
--- a/canvas/src/CanvasStrip.tsx
+++ b/canvas/src/CanvasStrip.tsx
@@ -15,7 +15,7 @@ import {
   TRASH,
 } from "./contextMenu";
 import { DocModeSwitch } from "./DocTab";
-import { FileText, LogoFigma, Plus } from "./geistIcons";
+import { FileText, Inspect, LogoFigma, Plus } from "./geistIcons";
 
 /**
  * The project's canvases, across the top of the project under the bar's tab for it, after its
@@ -28,14 +28,16 @@ import { FileText, LogoFigma, Plus } from "./geistIcons";
  * layout.json's, and the folder keeps its slug. An example is the app's, so it has no "+" and
  * no renaming, and a build has no server to make a canvas.
  *
- * At the far end are the controls of the tab in front: a canvas's ground colour, then Export to
- * Figma, the one place a canvas goes from here; a document's switch between reading and editing.
+ * At the far end are the controls of the tab in front: a canvas's ground colour, the inspector's
+ * switch, then Export to Figma, the one place a canvas goes from here; a document's switch
+ * between reading and editing.
  */
 /** The canvas whose tab is up for renaming, kept across the reload that brings a new one in. */
 const RENAME_KEY = "sp:rename-canvas";
 
 export function CanvasStrip() {
-  const { activeTab, openTab, editor } = useContext(CanvasChromeContext);
+  const { activeTab, openTab, editor, inspectorOn, setInspectorOn } =
+    useContext(CanvasChromeContext);
   const tab = tabFor(activeTab);
   const canvases = tab.kind === "example" ? [tab.slug] : ownCanvases();
   const here = activeTab.kind === "canvas" ? activeTab.slug : undefined;
@@ -213,6 +215,18 @@ export function CanvasStrip() {
           />
         </label>
       )}
+      {page && (
+        <button
+          type="button"
+          className="sp-canvas-tabs-inspector"
+          aria-pressed={inspectorOn}
+          aria-label="Inspector"
+          title={inspectorOn ? "Hide the inspector" : "Inspect the selected board"}
+          onClick={() => setInspectorOn(!inspectorOn)}
+        >
+          <Inspect />
+        </button>
+      )}
       {/* An anchor, not a button, because the sheet is a page of its own, and the page that
           walks through the import, so ⌘-click and copy-link have to work on it. */}
       {slug && (
diff --git a/canvas/src/ChatPanel.tsx b/canvas/src/ChatPanel.tsx
index b21e53a9..f41dedf4 100644
--- a/canvas/src/ChatPanel.tsx
+++ b/canvas/src/ChatPanel.tsx
@@ -66,6 +66,7 @@ import {
 import type { Session } from "./agentRun";
 import { namedPictures, readDraft, slashWord } from "./chatDraft";
 import { applyFrame, followRun, writingTo, type Turn } from "./chatTransport";
+import { Present } from "./CanvasPresent";
 import { ClaudeMark } from "./ClaudeMark";
 import { CodexMark } from "./CodexMark";
 import { Check, ClockRewind, Image, Plus } from "./geistIcons";
@@ -98,9 +99,9 @@ const OPEN_KEY = "sp-chat-open";
  * panel puts its tile and its number up at once and asks for the drawing itself — from here and
  * not from the canvas's frame, which a reload or a change of tab would take the answer away with.
  *
- * On `window`, because the panel is a sibling of `<Tldraw>` and the button renders inside it,
- * the same arrangement, and the same answer, as ASK_COMMENT_USER (canvasChrome.tsx). Here rather
- * than beside the button, so the home page, which has the panel and no canvas, has no tldraw.
+ * On `window`, because the panel is a sibling of `<Tldraw>` and the button renders inside it.
+ * Here rather than beside the button, so the home page, which has the panel and no canvas, has
+ * no tldraw.
  */
 export const CANVAS_ATTACH = "sp:canvas-attach";
 
@@ -337,6 +338,12 @@ export function ChatPanel(props: {
   /** Whether the composer is ringing, to say a half-written message is waiting in it. Off again
    *  when the ring has faded, so the next one rings too. */
   const [cued, setCued] = useState(false);
+  /** The picture shown over the window, clicked in the conversation. */
+  const [shown, setShown] = useState<string>();
+  const show = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    setShown(e.currentTarget.href);
+  };
   const abort = useRef(new AbortController());
   const log = useRef<HTMLDivElement>(null);
   /** Whether the log follows what arrives. Scrolling up to read stops it, so new output no longer
@@ -1094,6 +1101,11 @@ export function ChatPanel(props: {
 
   return (
     <>
+      {shown && (
+        <Present close={() => setShown(undefined)}>
+          <img src={shown} alt="" />
+        </Present>
+      )}
       <aside
         className={
           open ? "sp-panel sp-chat" : "sp-panel sp-chat sp-chat-collapsed"
@@ -1277,6 +1289,7 @@ export function ChatPanel(props: {
                           href={`/__sp/agent/run/${t.runId}/image/${g.n}`}
                           target="_blank"
                           rel="noreferrer"
+                          onClick={show}
                           title={g.name}
                         >
                           <img
@@ -1334,6 +1347,7 @@ export function ChatPanel(props: {
                               href={`/__sp/agent/run/${t.runId}/shot/${s.k}`}
                               target="_blank"
                               rel="noreferrer"
+                              onClick={show}
                               title={b.detail}
                             >
                               <img
diff --git a/canvas/src/InspectorPanel.tsx b/canvas/src/InspectorPanel.tsx
index 01decc45..7c6ea682 100644
--- a/canvas/src/InspectorPanel.tsx
+++ b/canvas/src/InspectorPanel.tsx
@@ -9,7 +9,6 @@ import {
 } from "react";
 import {
   createShapeId,
-  useEditor,
   useValue,
   type TLCommentThreadId,
   type TLShapeId,
@@ -31,10 +30,6 @@ import {
 import { CanvasChromeContext } from "./canvasChrome";
 import { boardShapeId, projectPages } from "./canvasContent";
 import { pointedElement } from "./cover";
-import {
-  installInspectorClicks,
-  type InspectorTarget,
-} from "./inspectorClicks";
 import {
   type CanvasLayoutImage,
   boardPageUrl,
@@ -227,27 +222,6 @@ function WidthGrip({
 type Tab = "inspect" | "assets" | "tokens";
 
 const fmt = (n: number) => String(Math.round(n * 100) / 100);
-/** Wiring component: lives inside <Tldraw> so it can reach the editor. */
-export function InspectorClicks({
-  onPick,
-  onDismiss,
-  inspectingPath,
-  frame,
-}: {
-  onPick: (shape: InspectorTarget) => void;
-  onDismiss: () => void;
-  inspectingPath: string | null;
-  frame: React.RefObject<HTMLIFrameElement | null>;
-}) {
-  const editor = useEditor();
-  useEffect(
-    () =>
-      installInspectorClicks(editor, onPick, onDismiss, inspectingPath, frame),
-    [editor, onPick, onDismiss, inspectingPath, frame],
-  );
-  return null;
-}
-
 export function InspectorPanel({
   path,
   name,
@@ -362,17 +336,21 @@ export function InspectorPanel({
     );
   }, [hidden, data, frame]);
 
-  // Escape clears the selection, and with nothing selected closes the panel. `defaultPrevented`
-  // skips the ones a tldraw menu or a Radix layer has already dismissed itself on.
+  // Escape clears the selection, and with nothing selected closes the panel. In the capture phase,
+  // ahead of tldraw, which would otherwise take the first Escape to deselect the board, and the
+  // panel follows that selection (App.tsx). Not while a menu is open: that Escape is the menu's.
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (event.key !== "Escape" || event.defaultPrevented) return;
-      if (sel !== null) setSel(null);
-      else onClose();
+      if (editor?.menus.hasAnyOpenMenus()) return;
+      if (sel === null) return onClose();
+      event.preventDefault();
+      event.stopPropagation();
+      setSel(null);
     };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [sel, onClose]);
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [sel, onClose, editor]);
 
   const assets = useMemo(
     () => (data ? assetRows(data.assets, names) : []),
diff --git a/canvas/src/canvasAttach.tsx b/canvas/src/canvasAttach.tsx
index dca53122..6b04e65d 100644
--- a/canvas/src/canvasAttach.tsx
+++ b/canvas/src/canvasAttach.tsx
@@ -19,10 +19,10 @@ import { Plus } from "./geistIcons";
 import {
   asCanvasTarget,
   shapeUnderPointer,
-} from "./inspectorClicks";
+} from "./canvasClicks";
 
 /** A board, a picture the library placed, or anything the person put on a project canvas: what
- *  the **+** answers for. The inspector answers only for the first two (asCanvasTarget). */
+ *  the **+** answers for. The canvas answers only for the first two (asCanvasTarget). */
 const addable = (editor: Editor, shape: TLShape | undefined): TLShape | null =>
   asCanvasTarget(shape) ?? (personsShape(editor, shape) ? shape! : null);
 
@@ -152,7 +152,7 @@ export function CanvasAttachButtons() {
       ) {
         return;
       }
-      // Under the select tool only, as with the inspector: with the comment tool up a board is
+      // Under the select tool only: with the comment tool up a board is
       // something to drop a pin on. Nothing while dragging either, since that is a pan.
       setTarget(
         editor.getCurrentToolId() === "select" &&
diff --git a/canvas/src/canvasChrome.tsx b/canvas/src/canvasChrome.tsx
index 70001e7e..06a04763 100644
--- a/canvas/src/canvasChrome.tsx
+++ b/canvas/src/canvasChrome.tsx
@@ -73,7 +73,7 @@ import {
   Message,
   RefreshCounterClockwise,
 } from "./geistIcons";
-import { asCanvasTarget, shapeUnderPointer } from "./inspectorClicks";
+import { asCanvasTarget, shapeUnderPointer, zoomToFill } from "./canvasClicks";
 import { shareUrl, urlForSlug, windowUrl, type CanvasTab } from "./canvasUrl";
 
 /** One dialog, whether the comment tool raised it or the inspector's composer did. */
@@ -93,15 +93,13 @@ export const CanvasChromeContext = createContext({
   /** Who this browser comments as, or null until they have typed a name. */
   commentUser: null as CommentUser | null,
   setCommentUser: (_user: CommentUser) => {},
-  /** Open a board in the inspector, for the parts of the canvas that link to one. */
-  inspectBoard: (_board: CanvasFileShape) => {},
   /**
-   * The board the inspector has open, by path. It is the one board on the canvas that runs the
-   * inspect agent and takes the pointer, so picking an element happens on the mockup itself.
+   * Whether the inspector is on, which the strip's button toggles and is off until it is. While
+   * on, the panel shows the one board or picture selected, and a selected board runs the inspect
+   * agent, so picking an element happens on the mockup itself.
    */
-  inspectingPath: null as string | null,
-  /** Whether the inspector is docked at all, over a board or over a piece of brand material. */
-  inspectorOpen: false,
+  inspectorOn: false,
+  setInspectorOn: (_on: boolean) => {},
   /**
    * The view in front and the way to show another of this project's. A view is a canvas, which is
    * a tldraw page, or a kit, which is an overlay over the whole editor. Held by App, which owns
@@ -117,7 +115,7 @@ export const CanvasChromeContext = createContext({
  * The comment tool, plus the one thing this canvas adds to a thread: the link it carries to the
  * mockup it is about. Every comment placed on a board, or in the margin beside one, is anchored
  * to that board's shape, which is what moves the note with the mockup when a layout.json edit
- * moves it. The header shows that link, and follows it: clicking opens the board in the inspector.
+ * moves it. The header shows that link, and follows it: clicking fills the canvas with the board.
  *
  * Everywhere, built canvas included. Where the comment goes differs, a dev server writes it into
  * the board's folder and a hosted canvas keeps it in the browser (canvasComments.ts), but the tool
@@ -127,7 +125,6 @@ export const canvasCommentTools = [
   CommentTool.configure({
     components: {
       ThreadActions: ({ thread }) => {
-        const chrome = useContext(CanvasChromeContext);
         const editor = useEditor();
         const board = useValue(
           "linked board",
@@ -140,7 +137,7 @@ export const canvasCommentTools = [
           <TldrawUiButton
             type="icon"
             title={`Linked to ${board.props.name}. Click to open it`}
-            onClick={() => chrome.inspectBoard(board)}
+            onClick={() => zoomToFill(editor, board.id)}
           >
             <TldrawUiButtonIcon icon="link" />
           </TldrawUiButton>
diff --git a/canvas/src/canvasClicks.ts b/canvas/src/canvasClicks.ts
new file mode 100644
index 00000000..fa05c93d
--- /dev/null
+++ b/canvas/src/canvasClicks.ts
@@ -0,0 +1,142 @@
+import type {
+  Editor,
+  StateNode,
+  TLEventInfo,
+  TLImageShape,
+  TLPageId,
+  TLShape,
+  TLShapeId,
+} from "tldraw";
+import {
+  CANVAS_FILE_SHAPE_TYPE,
+  type CanvasFileShape,
+} from "./CanvasFileShapeUtil";
+import { canvasImageRef } from "./canvasLibrary";
+
+/**
+ * What the canvas answers for as a thing of the project's: a board, or a piece of brand material,
+ * which the library lays out as an ordinary tldraw image shape rather than as a board (App.tsx,
+ * layoutImageRow).
+ */
+export type CanvasTarget = CanvasFileShape | TLImageShape;
+
+/**
+ * The topmost shape under the pointer, whatever it is, locked ones included. It must *be* a board
+ * or a brand image for the canvas to answer for it (asCanvasTarget below); a `filter` here instead
+ * would search past anything drawn over one, a note or an arrow sitting on a board.
+ */
+export const shapeUnderPointer = (editor: Editor) =>
+  editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), {
+    hitInside: true,
+    hitLocked: true,
+    renderingOnly: true,
+  });
+
+/** That shape when it is one the canvas answers for, and nothing when it is not. */
+export const asCanvasTarget = (
+  hit: TLShape | undefined,
+): CanvasTarget | undefined => {
+  if (hit?.type === CANVAS_FILE_SHAPE_TYPE) return hit as CanvasFileShape;
+  // An image the library placed, not one someone dropped on the canvas themselves: only the
+  // first has an entry in layout.json behind it.
+  return hit?.type === "image" && canvasImageRef(hit.id)
+    ? (hit as TLImageShape)
+    : undefined;
+};
+
+/** Distance from the viewport's edge to a shape zoomed to fill it, in screen px. */
+const FILL_INSET = 16;
+
+/** Selects a shape and puts the camera on it, as large as the viewport holds it. */
+export function zoomToFill(editor: Editor, id: TLShapeId, animate = true) {
+  const bounds = editor.getShapePageBounds(id);
+  if (!bounds) return;
+  editor.select(id);
+  editor.zoomToBounds(bounds, {
+    inset: FILL_INSET,
+    animation: { duration: animate ? editor.options.animationMediumMs : 0 },
+  });
+}
+
+/**
+ * A double-click on a mockup, a picture, or anything else whose double-click tldraw would not
+ * spend on editing its text zooms it to fill the canvas. tldraw's own double-click would crop a
+ * picture or, over a locked shape such as a board, drop a new text box on the canvas, so this takes the gesture over in the select tool's
+ * idle state, where tldraw handles it, rather than watching for it alongside. A note, a text or a
+ * label still edits its text. A second double-click on the shape it last zoomed to shows the whole
+ * page. Returns the uninstaller.
+ */
+export function installDoubleClickZoom(editor: Editor) {
+  const idle = editor.getStateDescendant<StateNode>("select.idle")!;
+  const own = idle.onDoubleClick!;
+  let zoomed: { id: TLShapeId; page: TLPageId } | undefined;
+  idle.onDoubleClick = (info) => {
+    const hit = info.phase === "down" && shapeUnderPointer(editor);
+    if (
+      hit &&
+      (hit.type === CANVAS_FILE_SHAPE_TYPE ||
+        hit.type === "image" ||
+        hit.type === "video" ||
+        !editor.canEditShape(hit))
+    ) {
+      const page = editor.getCurrentPageId();
+      if (zoomed?.id === hit.id && zoomed.page === page) {
+        zoomed = undefined;
+        return editor.zoomToFit({
+          animation: { duration: editor.options.animationMediumMs },
+        });
+      }
+      zoomed = { id: hit.id, page };
+      return zoomToFill(editor, hit.id);
+    }
+    own.call(idle, info);
+  };
+  return () => {
+    idle.onDoubleClick = own;
+  };
+}
+
+/**
+ * The selected board's frame never takes the pointer, so that panning, zooming and the comment
+ * tool keep working over it: the canvas's pointer goes in as a board coordinate instead, for its
+ * outline of the element under it (CanvasFileShapeUtil.tsx). A click on the board, once it is
+ * already selected, goes in too, which the inspect agent takes as a pick; the click that selects
+ * it picks nothing, since the frame that would hear it is only then loading. Returns the
+ * uninstaller.
+ */
+export function installBoardHover(editor: Editor) {
+  const frame = () =>
+    document.querySelector<HTMLIFrameElement>("iframe[data-sp-hover]");
+  const send = (at: { x: number; y: number }, click: boolean) =>
+    frame()?.contentWindow?.postMessage(
+      { type: "sp:at", x: at.x, y: at.y, click },
+      "*",
+    );
+  /** Where the board was pressed, when the press was on the selected board. */
+  let pressed: TLShapeId | undefined;
+  const onEvent = (info: TLEventInfo) => {
+    if (info.type !== "pointer") {
+      // Two fingers arriving, or a wheel, in the middle of a press: a zoom, not a click.
+      if (info.type === "pinch" || info.type === "wheel") pressed = undefined;
+      return;
+    }
+    const board = frame()?.dataset.spHover;
+    if (!board) return;
+    const hit = shapeUnderPointer(editor);
+    const on = hit?.id === board && editor.getCurrentToolId() === "select";
+    const at = () =>
+      editor.getPointInShapeSpace(hit!, editor.inputs.getCurrentPagePoint());
+    if (info.name === "pointer_move") send(on ? at() : { x: -1, y: -1 }, false);
+    else if (info.name === "pointer_down")
+      pressed = on && info.button === 0 ? hit!.id : undefined;
+    else if (info.name === "pointer_up") {
+      if (on && pressed === hit!.id && !editor.inputs.getIsDragging())
+        send(at(), true);
+      pressed = undefined;
+    }
+  };
+  editor.on("event", onEvent);
+  return () => {
+    editor.off("event", onEvent);
+  };
+}
diff --git a/canvas/src/geistIcons.tsx b/canvas/src/geistIcons.tsx
index 6b275b1c..b1d8ea32 100644
--- a/canvas/src/geistIcons.tsx
+++ b/canvas/src/geistIcons.tsx
@@ -37,6 +37,7 @@ import {
   Plus as GPlus,
   RefreshCounterClockwise as GRefreshCounterClockwise,
   SidebarLeft as GSidebarLeft,
+  Inspect as GInspect,
   Sparkles as GSparkles,
   TextTitle as GTextTitle,
   ArrowRight as GArrowRight,
@@ -84,6 +85,7 @@ export const Pen = at16(GPen);
 export const Plus = at16(GPlus);
 export const RefreshCounterClockwise = at16(GRefreshCounterClockwise);
 export const SidebarLeft = at16(GSidebarLeft);
+export const Inspect = at16(GInspect);
 export const Sparkles = at16(GSparkles);
 export const TextTitle = at16(GTextTitle);
 export const ArrowRight = at16(GArrowRight);
diff --git a/canvas/src/index.css b/canvas/src/index.css
index ad538805..37553cdd 100644
--- a/canvas/src/index.css
+++ b/canvas/src/index.css
@@ -470,7 +470,35 @@ button {
   cursor: pointer;
 }
 
-.sp-canvas-tabs-ground + .sp-canvas-tabs-figma {
+/* The inspector's switch, after the swatch when there is one, else starting the far end. */
+.sp-canvas-tabs-inspector {
+  display: grid;
+  place-items: center;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--ds-gray-900);
+  cursor: pointer;
+}
+
+.sp-canvas-tabs-inspector:hover {
+  background: var(--ds-gray-100);
+  color: var(--ds-gray-1000);
+}
+
+.sp-canvas-tabs-inspector[aria-pressed="true"] {
+  background: var(--ds-gray-200);
+  color: var(--ds-gray-1000);
+}
+
+.sp-canvas-tabs-ground + .sp-canvas-tabs-figma,
+.sp-canvas-tabs-ground + .sp-canvas-tabs-inspector,
+.sp-canvas-tabs-inspector + .sp-canvas-tabs-figma {
   margin-left: 4px;
 }
 
@@ -2804,3 +2832,43 @@ a.sp-menu-row {
 .sp-confirm button.sp-confirm-danger:hover {
   background: color-mix(in oklab, var(--ds-red-900) 88%, black);
 }
+
+/* A board or picture shown alone over the whole window (CanvasPresent.tsx): the window dimmed
+   round it, and scaled to fit by the component, which knows the board's size. */
+.sp-present {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding: 32px;
+  background: rgb(0 0 0 / 0.75);
+  animation: sp-present-in 160ms ease-out;
+}
+
+@keyframes sp-present-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.sp-present iframe {
+  /* Centred by hand: at its own size it can be taller than the window, and the grid would align
+     it to the top instead. */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  border: 0;
+  /* A click would focus the board's own document, which the keys that close this never leave. */
+  pointer-events: none;
+  /* The board's own scheme, as on the canvas (CanvasFileShapeUtil.tsx). */
+  color-scheme: light;
+}
+
+.sp-present img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
diff --git a/canvas/src/inspectorAgent.ts b/canvas/src/inspectorAgent.ts
index aae88d7b..4776f92d 100644
--- a/canvas/src/inspectorAgent.ts
+++ b/canvas/src/inspectorAgent.ts
@@ -447,7 +447,7 @@ addEventListener('message',function(e){var d=e.data;if(!d||typeof d!=='object')r
 
 /* The pointer is the canvas's, not this frame's. The board is drawn in an iframe out on the
    tldraw canvas with pointer-events off, so that panning, zooming and the comment tool keep
-   working over it, and inspectorClicks.ts posts the pointer in board pixels as sp:at. A point
+   working over it, and installBoardHover (canvasClicks.ts) posts the pointer in board pixels as sp:at. A point
    off the board comes as (-1,-1), which hits nothing and clears the hover.
    A click on a path is a click on its icon: the layers list shows the svg as one layer. */
 function nodeAt(x,y){var el=document.elementFromPoint(x,y);
diff --git a/canvas/src/inspectorClicks.ts b/canvas/src/inspectorClicks.ts
deleted file mode 100644
index d98ace1c..00000000
--- a/canvas/src/inspectorClicks.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { Editor, TLEventInfo, TLImageShape, TLShape } from "tldraw";
-import {
-  CANVAS_FILE_SHAPE_TYPE,
-  type CanvasFileShape,
-} from "./CanvasFileShapeUtil";
-import { canvasImageRef } from "./canvasLibrary";
-
-/**
- * What a click on the canvas can open: a board, or a piece of brand material, which the library
- * lays out as an ordinary tldraw image shape rather than as a board (App.tsx, layoutImageRow).
- */
-export type InspectorTarget = CanvasFileShape | TLImageShape;
-
-/**
- * The topmost shape under the pointer, whatever it is. It must *be* a board or a brand image for
- * the canvas to answer for it (asCanvasTarget below); a `filter` here instead would search past
- * anything drawn over one, so every click on an unlocked note or arrow sitting on a board would
- * also open the inspector and squeeze the canvas out from under the thing being edited.
- */
-export const shapeUnderPointer = (editor: Editor) =>
-  editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), {
-    hitInside: true,
-    hitLocked: true,
-    renderingOnly: true,
-  });
-
-/** That shape when it is one the canvas answers for, and nothing when it is not. */
-export const asCanvasTarget = (
-  hit: TLShape | undefined,
-): InspectorTarget | undefined => {
-  if (hit?.type === CANVAS_FILE_SHAPE_TYPE) return hit as CanvasFileShape;
-  // An image the library placed, not one someone dropped on the canvas themselves: only the
-  // first has an entry in layout.json behind it for the panel to read.
-  return hit?.type === "image" && canvasImageRef(hit.id)
-    ? (hit as TLImageShape)
-    : undefined;
-};
-
-/**
- * A locked board cannot be selected, so tldraw reports a click on one as a click on the canvas
- * and the shape util's own `onClick` never runs — the same problem a `canvas-link` card has,
- * solved the same way (installLockedLinkClicks in CanvasLinkShapeUtil.tsx): watch the editor's
- * pointer events and call a press and a release over one board, with no drag between them, a
- * click. Returns the uninstaller.
- *
- * The board the inspector has open takes its hovers and picks from here too, rather than by
- * holding the pointer itself. A frame that took the pointer would be the one thing on the canvas
- * that could not be panned across or zoomed over — the wheel never reached tldraw, so a zoom
- * gesture over the mockup zoomed the browser page. The canvas keeps every gesture, and the
- * pointer goes into the board as a board coordinate for the agent to hit-test (`sp:at`).
- */
-export function installInspectorClicks(
-  editor: Editor,
-  onPick: (shape: InspectorTarget) => void,
-  /** A click on the canvas itself, which closes the inspector the way it clears a selection. */
-  onDismiss: () => void,
-  /** The board the inspector has open, by path: the one mockup that answers the pointer. */
-  inspectingPath: string | null,
-  /** That board's frame out on the canvas, filled in by CanvasFileShapeUtil. */
-  frame: { current: HTMLIFrameElement | null },
-) {
-  /**
-   * Hands the agent the pointer in the inspected board's own pixels. Anywhere else on the canvas
-   * is (-1, -1): it hits nothing, which is how the highlight clears when the pointer leaves.
-   */
-  const sendPointer = (target: InspectorTarget | undefined, click: boolean) => {
-    const board =
-      target?.type === CANVAS_FILE_SHAPE_TYPE &&
-      target.props.path === inspectingPath
-        ? target
-        : undefined;
-    const at = board
-      ? editor.getPointInShapeSpace(board, editor.inputs.getCurrentPagePoint())
-      : { x: -1, y: -1 };
-    frame.current?.contentWindow?.postMessage(
-      { type: "sp:at", x: at.x, y: at.y, click },
-      "*",
-    );
-  };
-
-  // Wrapped, because "pressed on nothing" and "did not press" are different endings: the first
-  // is the click that closes the inspector, the second is a press this handler has no part in.
-  let pressed: { hit: TLShape | undefined } | undefined;
-  const onEvent = (info: TLEventInfo) => {
-    if (info.type !== "pointer") {
-      // Two fingers arriving, or a wheel, in the middle of a press: a zoom, not a click.
-      if (info.type === "pinch" || info.type === "wheel") pressed = undefined;
-      return;
-    }
-    if (info.name === "pointer_move") {
-      // Hover follows the canvas pointer, as in Figma: the agent outlines what is under it and
-      // names it back for the layers list. Under the select tool only — with the comment tool up
-      // the board is something to drop a pin on, not something to read.
-      if (inspectingPath) {
-        sendPointer(
-          editor.getCurrentToolId() === "select"
-            ? asCanvasTarget(shapeUnderPointer(editor))
-            : undefined,
-          false,
-        );
-      }
-      return;
-    }
-    if (info.name === "pointer_down") {
-      // Only the select tool opens the inspector; a click with the pen or the eraser over a
-      // board is a stroke or an erase.
-      pressed =
-        info.button === 0 &&
-        editor.getCurrentToolId() === "select" &&
-        !editor.menus.hasAnyOpenMenus()
-          ? { hit: shapeUnderPointer(editor) }
-          : undefined;
-      return;
-    }
-    if (info.name !== "pointer_up") return;
-    const press = pressed;
-    pressed = undefined;
-    if (!press || editor.inputs.getIsDragging()) return;
-    const hit = shapeUnderPointer(editor);
-    if (hit?.id !== press.hit?.id) return;
-    // Nothing under the pointer: a click on the canvas itself, which closes the inspector the
-    // same way it clears a selection. Anything else that is not a board or a picture — a note,
-    // an arrow, a comment pin — is a thing, so the panel stays where it is.
-    if (!hit) return onDismiss();
-    const target = asCanvasTarget(hit);
-    if (!target) return;
-    // A click on the board already open picks the element under it; a click on any other board,
-    // or on a brand image, opens that one.
-    if (
-      target.type === CANVAS_FILE_SHAPE_TYPE &&
-      target.props.path === inspectingPath
-    ) {
-      sendPointer(target, true);
-    } else onPick(target);
-  };
-
-  editor.on("event", onEvent);
-  return () => {
-    editor.off("event", onEvent);
-  };
-}
diff --git a/docs/2026-09-26-inspector-switch.md b/docs/2026-09-26-inspector-switch.md
new file mode 100644
index 00000000..2d74f02f
--- /dev/null
+++ b/docs/2026-09-26-inspector-switch.md
@@ -0,0 +1,23 @@
+# The inspector behind a switch; a double-click zooms to fill
+
+2026-09-26. The panel on the right of the canvas, the inspector, used to open on any board or
+picture clicked. It showed one at a time, larger, with its layers, styles, tokens, assets and
+comments. Showing it larger is what the canvas already does, so a double-click on a board, a
+picture, a video, or any shape tldraw would not edit now zooms the camera to fill the window with
+it (`installDoubleClickZoom` in `canvasClicks.ts`). A second double-click on it shows the whole
+page. Notes and text still edit on a double-click.
+
+The rest of the panel is kept, behind a switch on the canvas strip, right of the ground swatch,
+off until turned on. While on, it shows the one board or picture selected, rather than keeping a
+selection of its own: the address, Space to present, and the double-click all already follow the
+selection, so the inspector does too, and closing it clears the selection. The selected board
+then runs the inspect agent in place of the plain hover outline, and a click on it, once it is
+selected, picks the element under the pointer (`installBoardHover`).
+
+The address works as `docs/2026-09-08-board-links.md` describes, with the selection in place of
+the inspector. `#<file>` selects that board and zooms to it. Selecting a shape replaces the
+address and adds no history entry, so clicking around the canvas does not fill Back.
+
+tldraw's own double-click is taken over in the select tool's idle state, not watched alongside
+it. Over a locked shape (every board is locked), tldraw would otherwise drop a text box, and over
+a picture it would start a crop.
diff --git a/skills/sp-canvas/SKILL.md b/skills/sp-canvas/SKILL.md
index b30b459b..946cdbcc 100644
--- a/skills/sp-canvas/SKILL.md
+++ b/skills/sp-canvas/SKILL.md
@@ -77,12 +77,11 @@ than reusing it, and says so when that port is the app's.
 - Deep-link a page with `?canvas=<slug>`, e.g.
   `http://127.0.0.1:5173/?canvas=notion-ios`, and one board of it with
   `#<file>` after that, e.g. `?canvas=notion-ios#02-search-ask-ai`: it opens
-  in the inspector with the camera on it. Give the board link when pointing
+  selected, zoomed to fill the window. Give the board link when pointing
   at one screen.
 - **Read a board as a web page.** The "Export to Figma" button in the top bar
   opens every board of the page in one scrolling document, each at its own
-  size, at `sheet.html?canvas=<slug>`; the button in the bottom right of the
-  inspector's preview opens the one board it is showing, at
+  size, at `sheet.html?canvas=<slug>`, and one board is at
   `/board/<slug>/<file>.html`. Both are ordinary addresses serving the board's
   own HTML, so they can be linked, reloaded, and read by the browser
   extensions — a Figma importer, say — that refuse to work on a generated
@@ -304,8 +303,8 @@ bun run lint && bun run test && bun run build
 ```
 
 Then, in a fresh browser session: each board page loads with its frames,
-headings and captions; the frames stay independently selectable; the inspector
-opens on the board you click; Force refresh rebuilds a board cleanly.
+headings and captions; the frames stay independently selectable; double-clicking
+a board zooms it to fill the window; Force refresh rebuilds a board cleanly.
 
 Everything the canvas needs a server for lives in `canvas/server/`: `sp.ts`
 answers `/__sp` and `/board` for one project, `projects.ts` mounts one of it