A picture clicked in the chat shows over the window as a board does

The overlay becomes Present, shared by the canvas and the chat. A click
beside what it shows closes it as well.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/src/CanvasPresent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import type { Editor } from "tldraw";
 import { asCanvasTarget, type CanvasTarget } from "./canvasClicks";
@@ -9,33 +9,18 @@ import { useCanvasFileHtml } from "./canvasLibrary";
 const INSET = 32;
 
 /**
- * Space on a selected board or picture shows it alone over the whole window, the window dimmed
- * round the board, which is scaled to fit it. Space again, or Esc, comes back to the canvas
- * as 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). Taken from tldraw on the key going down, so
- * with one of them selected Space is this and not the hand. Heard in both documents: clicking the
- * shown board moves the focus out of the frame.
+ * 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) return;
+    if (!editor || shown) return;
     const onDown = (e: KeyboardEvent) => {
-      if (shown) {
-        if (e.code !== "Space" && e.key !== "Escape") return;
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.repeat) return;
-        setShown(undefined);
-        editor.focus();
-        return;
-      }
       if (e.code !== "Space" || e.repeat) return;
       const typing =
         e.target instanceof HTMLElement &&
@@ -50,20 +35,66 @@ export function CanvasPresent({ editor }: { editor: Editor | null }) {
       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 beside it 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);
-    top.addEventListener("resize", resized);
     return () => {
       for (const w of windows) w.removeEventListener("keydown", onDown, true);
-      top.removeEventListener("resize", resized);
     };
-  }, [editor, shown, top]);
-
-  if (!editor || !shown) return null;
+  }, [close, top]);
   return createPortal(
-    <div className="sp-present">
-      <Presented editor={editor} shape={shown} view={view} />
+    <div
+      className="sp-present"
+      onClick={(e) => e.target === e.currentTarget && close()}
+    >
+      {children}
     </div>,
     top.document.body,
   );

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";
@@ -331,6 +332,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
@@ -1084,6 +1091,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"
@@ -1267,6 +1279,7 @@ export function ChatPanel(props: {
                           href={`/__sp/agent/run/${t.runId}/image/${g.n}`}
                           target="_blank"
                           rel="noreferrer"
+                          onClick={show}
                           title={g.name}
                         >
                           <img
@@ -1324,6 +1337,7 @@ export function ChatPanel(props: {
                               href={`/__sp/agent/run/${t.runId}/shot/${s.k}`}
                               target="_blank"
                               rel="noreferrer"
+                              onClick={show}
                               title={b.detail}
                             >
                               <img