hop2 0.11.16 → 0.11.17

package/hay/apps/web/src/components/ViewsPanel.tsx

@@ -1,12 +1,19 @@
-import { useEffect, useMemo, useState } from "react";
+import { MouseEvent, useEffect, useMemo, useRef, useState } from "react";
 import { relativeTime } from "../utils/switcherModel";
 
 // Views: the results an agent hands a human that a terminal cannot draw — a
 // PDF, a rendered write-up, a screenshot, a proxied dev server. The daemon has
 // published them since `hop view` shipped, but the only way to reach one from
 // this client was to catch the printed URL before it scrolled out of the
-// viewport. This panel is the index that was missing: one fetch of the
-// manifest the daemon already maintains, grouped by session, newest first.
+// viewport.
+//
+// The panel is a reading surface, not just an index: on a desk-sized window
+// it is two panes, list and PREVIEW, and a plain click renders the result in
+// place. The iframe is what makes that safe — navigating would tear down the
+// WebSocket attached to the live terminal, and reading a result must never
+// disconnect the session that produced it. Narrow windows keep the old
+// contract (rows are anchors to a new tab), because a preview pane the width
+// of a phone is worse than the browser's own viewer.
 
 type ViewItem = {
   // The session's internalName — the same key /api/sessions reports views
@@ -23,7 +30,7 @@ type ViewItem = {
   kind?: "file" | "server";
   // For a server, the proxy itself. The manifest scan can only see the
   // redirect page `hop port` leaves behind; going straight to the proxy skips
-  // a visible flash and a round trip on a phone link.
+  // a visible flash and a round trip.
   target?: string;
 };
 
@@ -81,6 +88,10 @@ const kindOf = (name: string, kind?: string) => {
   return "FILE";
 };
 
+const isImage = (name: string) =>
+  ["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(
+    (name.split(".").pop() || "").toLowerCase());
+
 const formatBytes = (n?: number) => {
   if (typeof n !== "number" || !Number.isFinite(n) || n < 0) return "";
   if (n < 1024) return `${n} B`;
@@ -88,15 +99,29 @@ const formatBytes = (n?: number) => {
   return `${(n / (1024 * 1024)).toFixed(1)} MB`;
 };
 
+const hrefFor = (item: ViewItem) =>
+  item.kind === "server" && item.target ? item.target : item.path;
+
 export const ViewsPanel = ({ session, sessions = [], onClose }: Props) => {
   const [items, setItems] = useState<ViewItem[] | null>(null);
   const [failed, setFailed] = useState(false);
+  const [preview, setPreview] = useState<ViewItem | null>(null);
+  // Two-step delete, disarmed by leaving the row: a browser confirm() dialog
+  // over a floating panel reads as a different app interrupting.
+  const [armedDelete, setArmedDelete] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
   // Frozen at open. The mark-seen effect below fires the moment the list
   // lands, so reading live storage during render would clear every "new" dot
   // in the same frame that exists to show them.
   const [seenAtOpen] = useState(loadViewsSeen);
+  const listRef = useRef<HTMLDivElement | null>(null);
   const now = Date.now();
 
+  // The preview pane only exists where it has room to be useful. Checked at
+  // interaction time, not render time, so a resized window behaves like what
+  // it currently is rather than what it was at open.
+  const wideEnoughForPreview = () => window.innerWidth >= 760;
+
   useEffect(() => {
     let cancelled = false;
     fetch("/api/views", { cache: "no-store", credentials: "same-origin" })
@@ -108,20 +133,6 @@ export const ViewsPanel = ({ session, sessions = [], onClose }: Props) => {
     return () => { cancelled = true; };
   }, []);
 
-  // Capture phase + stopPropagation: the switcher listens for Escape on window
-  // too, so without this one press closed the panel AND dismissed the wall
-  // behind it, dumping the reader into a terminal they never asked for.
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      event.stopPropagation();
-      onClose();
-    };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, [onClose]);
-
   const groups = useMemo(() => {
     // The daemon folds case when a name addresses a session; match it here so
     // a scoped open from a differently-cased key still finds its rows.
@@ -140,6 +151,36 @@ export const ViewsPanel = ({ session, sessions = [], onClose }: Props) => {
     return [...by.entries()];
   }, [items, session]);
 
+  const flatRows = useMemo(() => groups.flatMap(([, rows]) => rows), [groups]);
+
+  // Escape backs OUT one layer — preview first, then the panel — and arrows
+  // read the list like a mail client. Capture phase + stopPropagation: the
+  // switcher listens for Escape on window too, and without this one press
+  // closed the panel AND dismissed the wall behind it.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (preview) setPreview(null);
+        else onClose();
+        return;
+      }
+      if ((event.key === "ArrowDown" || event.key === "ArrowUp") && flatRows.length
+          && wideEnoughForPreview()) {
+        event.preventDefault();
+        event.stopPropagation();
+        const at = preview ? flatRows.findIndex((r) => r.path === preview.path) : -1;
+        const next = event.key === "ArrowDown"
+          ? Math.min(flatRows.length - 1, at + 1)
+          : Math.max(0, at < 0 ? 0 : at - 1);
+        setPreview(flatRows[next]);
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose, preview, flatRows]);
+
   // Opening the panel IS the act of seeing what it shows.
   useEffect(() => {
     if (!items) return;
@@ -167,76 +208,161 @@ export const ViewsPanel = ({ session, sessions = [], onClose }: Props) => {
     return hit ? (hit.displayName || hit.name) : internalName;
   };
 
+  // Rows stay real anchors so ⌘-click, middle-click and "copy link address"
+  // keep their browser meaning; only a PLAIN left click is intercepted, and
+  // only where the preview pane exists to receive it.
+  const onRowClick = (event: MouseEvent, item: ViewItem) => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (!wideEnoughForPreview()) return;   // narrow: the anchor's new tab is right
+    event.preventDefault();
+    setPreview(item);
+  };
+
+  const copyLink = (item: ViewItem) => {
+    const url = location.origin + hrefFor(item);
+    navigator.clipboard?.writeText(url).then(() => {
+      setCopied(item.path);
+      window.setTimeout(() => setCopied((c) => (c === item.path ? null : c)), 1400);
+    }).catch(() => { /* clipboard denied — the ↗ anchor still carries the URL */ });
+  };
+
+  const deleteItem = (item: ViewItem) => {
+    if (armedDelete !== item.path) { setArmedDelete(item.path); return; }
+    setArmedDelete(null);
+    fetch("/api/views", {
+      method: "DELETE",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ session: item.session, name: item.name })
+    }).then((r) => {
+      if (!r.ok) return;
+      setItems((cur) => (cur || []).filter((i) => i.path !== item.path));
+      setPreview((p) => (p?.path === item.path ? null : p));
+    }).catch(() => { /* row stays; nothing lied about being deleted */ });
+  };
+
+  const showPreview = preview !== null;
+
   return (
     <>
       <div className="views-backdrop" onClick={onClose} />
-      <div className="views-panel" role="dialog" aria-label="Published views">
+      <div className={"views-panel" + (showPreview ? " with-preview" : "")}
+           role="dialog" aria-label="Published views">
         <div className="views-head">
           <span className="views-badge">◧ Views</span>
           {session && <span className="views-scope">{label(session)}</span>}
           <span className="views-head-spacer" />
           <button type="button" className="views-close" aria-label="Close views" onClick={onClose}>×</button>
         </div>
-        {failed ? (
-          <p className="views-empty">Couldn't reach the view index.</p>
-        ) : !items ? (
-          <p className="views-empty">Loading…</p>
-        ) : groups.length === 0 ? (
-          <p className="views-empty">
-            Nothing published yet — agents publish results with <code>hop view &lt;file&gt;</code>.
-            PDFs, images, HTML and markdown write-ups land here instead of scrolling
-            past as text.
-          </p>
-        ) : (
-          <div className="views-list">
-            {groups.map(([key, rows]) => (
-              <div className="views-group" key={key}>
-                <div className="views-dateline">{label(key)}</div>
-                {rows.map((item) => {
-                  const fresh = (item.mtime || 0) > (seenAtOpen[key] || 0);
-                  const isServer = item.kind === "server";
-                  // A server has no meaningful size and its filename is an
-                  // implementation detail (the redirect page) — it is a door,
-                  // not a document, so say what it is instead.
-                  const meta = isServer
-                    ? "live server · opens the running app"
-                    : [
-                        // The filename is only worth a line of its own when
-                        // the title isn't already showing it.
-                        item.title ? item.name : "",
-                        relativeTime((item.mtime || 0) * 1000, now),
-                        formatBytes(item.bytes)
-                      ].filter(Boolean).join(" · ");
-                  return (
-                    // A real anchor to a new tab, not an in-app overlay or a
-                    // button: these are PDFs, videos and whole HTML pages, and
-                    // the browser's own viewers already do zoom/scrub/print far
-                    // better than an iframe would. Decisively, navigating in
-                    // place would tear down the WebSocket attached to the live
-                    // terminal — reading a result must not disconnect the
-                    // session that produced it. The tunnel_session cookie is
-                    // same-origin, so the new tab authenticates itself, and
-                    // being an anchor keeps ⌘-click and "copy link" working.
-                    <a
-                      key={item.path}
-                      className={"views-row" + (fresh ? " fresh" : "") + (isServer ? " server" : "")}
-                      href={isServer && item.target ? item.target : item.path}
-                      target="_blank"
-                      rel="noopener"
-                    >
-                      <span className="views-kind" aria-hidden="true">{kindOf(item.name, item.kind)}</span>
-                      <span className="views-row-text">
-                        <span className="views-title">{item.title || item.name}</span>
-                        {meta && <span className="views-meta">{meta}</span>}
-                      </span>
-                      {fresh && <span className="views-dot" aria-label="New" />}
-                    </a>
-                  );
-                })}
+        <div className="views-body">
+          <div className="views-list" ref={listRef}>
+            {failed ? (
+              <p className="views-empty">Couldn't reach the view index.</p>
+            ) : !items ? (
+              <p className="views-empty">Loading…</p>
+            ) : groups.length === 0 ? (
+              <div className="views-empty">
+                <p>Nothing published yet. Agents hand over results a terminal
+                can't draw — plots, PDFs, rendered write-ups, live dev servers —
+                and they land here, grouped by the session that produced them.</p>
+                <pre className="views-empty-cmds">{"hop view --title \"ROC curve\" plot.png\nhop port 5173"}</pre>
               </div>
-            ))}
+            ) : (
+              groups.map(([key, rows]) => (
+                <div className="views-group" key={key}>
+                  <div className="views-dateline">{label(key)}</div>
+                  {rows.map((item) => {
+                    const fresh = (item.mtime || 0) > (seenAtOpen[key] || 0);
+                    const isServer = item.kind === "server";
+                    const selected = preview?.path === item.path;
+                    // A server has no meaningful size and its filename is an
+                    // implementation detail (the redirect page) — it is a
+                    // door, not a document, so say what it is instead.
+                    const meta = isServer
+                      ? "live server"
+                      : [
+                          // The filename is only worth a line of its own when
+                          // the title isn't already showing it.
+                          item.title ? item.name : "",
+                          relativeTime((item.mtime || 0) * 1000, now),
+                          formatBytes(item.bytes)
+                        ].filter(Boolean).join(" · ");
+                    return (
+                      <a
+                        key={item.path}
+                        className={"views-row" + (fresh ? " fresh" : "")
+                          + (isServer ? " server" : "") + (selected ? " selected" : "")}
+                        href={hrefFor(item)}
+                        target="_blank"
+                        rel="noopener"
+                        onClick={(e) => onRowClick(e, item)}
+                        onMouseLeave={() => setArmedDelete((a) => (a === item.path ? null : a))}
+                      >
+                        {isImage(item.name)
+                          // The file is its own thumbnail — one lazy request,
+                          // and a list of plots becomes scannable at a glance.
+                          ? <img className="views-thumb" src={item.path} loading="lazy" alt="" />
+                          : <span className="views-kind" aria-hidden="true">{kindOf(item.name, item.kind)}</span>}
+                        <span className="views-row-text">
+                          <span className="views-title">{item.title || item.name}</span>
+                          {meta && <span className="views-meta">{meta}</span>}
+                        </span>
+                        {fresh && <span className="views-dot" aria-label="New" />}
+                        <span className="views-acts" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+                          {/* A button, not an <a>: anchors cannot nest, and
+                              the row itself is already the real link. */}
+                          <button type="button" className="views-act"
+                                  title="Open in a new tab" aria-label="Open in a new tab"
+                                  onClick={() => window.open(hrefFor(item), "_blank", "noopener")}>↗</button>
+                          <button type="button" className="views-act"
+                                  title={copied === item.path ? "Copied" : "Copy link"}
+                                  aria-label="Copy link"
+                                  onClick={() => copyLink(item)}>{copied === item.path ? "✓" : "⧉"}</button>
+                          {!isServer && (
+                            <button type="button"
+                                    className={"views-act danger" + (armedDelete === item.path ? " armed" : "")}
+                                    title={armedDelete === item.path ? "Click again to delete" : "Delete"}
+                                    aria-label={armedDelete === item.path ? "Click again to delete" : "Delete"}
+                                    onClick={() => deleteItem(item)}>
+                              {armedDelete === item.path ? "sure?" : "🗑"}
+                            </button>
+                          )}
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              ))
+            )}
           </div>
-        )}
+          {showPreview && (
+            <div className="views-preview">
+              <div className="views-preview-head">
+                <span className="views-preview-title" title={preview.title || preview.name}>
+                  {preview.title || preview.name}
+                </span>
+                <span className="views-head-spacer" />
+                <a className="views-act" href={hrefFor(preview)} target="_blank" rel="noopener"
+                   title="Open in a new tab" aria-label="Open preview in a new tab">↗</a>
+                <button type="button" className="views-act" aria-label="Close preview"
+                        onClick={() => setPreview(null)}>×</button>
+              </div>
+              {/* Sandboxed only for LIVE servers: an arbitrary dev app must not
+                  be able to navigate the wall out from under its own terminal
+                  (frame-busting). Our own files skip the sandbox, because a
+                  sandboxed iframe disables the browser's PDF viewer. */}
+              <iframe
+                className="views-frame"
+                key={preview.path}
+                src={hrefFor(preview)}
+                title={preview.title || preview.name}
+                sandbox={preview.kind === "server"
+                  ? "allow-scripts allow-same-origin allow-forms allow-popups allow-downloads allow-modals"
+                  : undefined}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

package/hay/apps/web/src/styles.css

@@ -4048,6 +4048,35 @@ button.primary {
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
   padding: 14px 16px;
 }
+/* With a preview open the dialog becomes a reading surface: list + pane,
+   sized like a mail client rather than a popover. The transition is not
+   animated — a width tween on an iframe re-lays the document per frame. */
+.views-panel.with-preview {
+  width: min(1080px, 94vw);
+  max-height: min(84vh, 820px);
+  height: min(84vh, 820px);
+}
+.views-body { display: flex; min-height: 0; flex: 1; gap: 0; }
+.views-panel.with-preview .views-list {
+  flex: 0 0 300px;
+  border-right: 1px solid var(--line);
+  padding-right: 10px;
+  margin-right: 12px;
+}
+.views-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.views-preview-head {
+  display: flex; align-items: center; gap: 6px;
+  padding: 0 0 8px 2px;
+}
+.views-preview-title {
+  font-size: 12.5px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.views-frame {
+  flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 8px;
+  background: #fff;   /* PDFs and pages assume a paper ground before they load */
+}
+
 .views-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
 .views-head-spacer { flex: 1; }
 .views-badge {
@@ -4106,6 +4135,38 @@ button.primary {
   width: 6px; height: 6px; border-radius: 3px;
   background: var(--accent, #7c5cff);
 }
+.views-row.selected {
+  background: color-mix(in srgb, var(--accent, #7c5cff) 12%, transparent);
+}
+/* The image IS its own thumbnail — one lazy request per visible row. */
+.views-thumb {
+  flex: 0 0 34px; width: 34px; height: 26px;
+  object-fit: cover; border-radius: 4px;
+  background: var(--bg-alt);
+}
+/* Row actions surface on hover; on touch (no hover) they stay visible,
+   because an affordance you cannot discover does not exist. */
+.views-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+@media (hover: hover) {
+  .views-row .views-acts { opacity: 0; }
+  .views-row:hover .views-acts, .views-row.selected .views-acts { opacity: 1; }
+}
+.views-act {
+  border: none; background: none; cursor: pointer;
+  color: var(--ink-muted); text-decoration: none;
+  font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 5px;
+  font-family: inherit;
+}
+.views-act:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
+.views-act.danger.armed {
+  color: #ff6b6b; font-size: 10.5px; font-weight: 700;
+}
+.views-empty-cmds {
+  margin: 8px 0 2px; padding: 8px 10px;
+  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
+  color: var(--ink); background: var(--bg-alt);
+  border-radius: 8px; white-space: pre;
+}
 
 /* The affordances that open it: a topbar/switcher button and a card chip,
    each carrying the same unseen dot. */

package/hay/apps/web/src/utils/voiceHold.ts

@@ -11,6 +11,14 @@
 // - releasing stops; the transcript is TYPED, never submitted
 // - auto-repeat spaces are swallowed; any other key cancels a pending hold
 // - while listening, every space is eaten
+//
+// Swallowing a key here means handling THREE event types, not one. xterm
+// consults this handler from _keyDown AND from _keyPress, and when we refuse
+// a keydown it returns before setting its own _keyDownHandled flag — so the
+// browser still fires keypress, xterm still asks us, and an `undefined`
+// answer there let every auto-repeat land a real space in the composer. That
+// was "holding space keeps typing actual spaces". preventDefault goes with
+// it, so the character never reaches the hidden textarea either.
 
 type RecognitionLike = {
   lang: string;
@@ -41,6 +49,8 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
   const threshold = opts.thresholdMs ?? 550;
   let timer = 0;
   let active = false;
+  /** A hold has begun (space is down) but dictation has not started yet. */
+  let pending = false;
   let spacesTyped = 0;
   let finalText = "";
   let interimText = "";
@@ -58,11 +68,14 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
   };
 
   const start = () => {
+    pending = false;
     if (active) return;
     const Ctor = speechRecognitionCtor();
-    if (!Ctor) return;
+    // Silence here read as "voice randomly does nothing": the space vanished
+    // (or didn't) and no overlay ever appeared, with no reason given.
+    if (!Ctor) { opts.notify("Voice input is not supported in this browser"); return; }
     let r: RecognitionLike;
-    try { r = new Ctor(); } catch { return; }
+    try { r = new Ctor(); } catch { opts.notify("Voice input could not start"); return; }
     active = true;
     finalText = "";
     interimText = "";
@@ -101,7 +114,7 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
     r.onend = () => finish(true);
     rec = r;
     opts.setOverlay("");
-    try { r.start(); } catch { finish(false); }
+    try { r.start(); } catch { opts.notify("Voice input could not start"); finish(false); }
   };
 
   const stop = () => {
@@ -115,7 +128,16 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
    *  false — consumed (swallow), true — let the terminal process it,
    *  undefined — not a voice-relevant event; continue with other branches.
    */
-  const handleKey = (ev: { type: string; code: string; key: string; repeat?: boolean; metaKey?: boolean; ctrlKey?: boolean; altKey?: boolean; shiftKey?: boolean }): boolean | undefined => {
+  const handleKey = (ev: {
+    type: string; code: string; key: string; repeat?: boolean;
+    metaKey?: boolean; ctrlKey?: boolean; altKey?: boolean; shiftKey?: boolean;
+    preventDefault?: () => void;
+  }): boolean | undefined => {
+    /** Refuse the key AND stop the browser acting on it. */
+    const swallow = () => {
+      try { ev.preventDefault?.(); } catch { /* synthetic event in a test */ }
+      return false;
+    };
     // Return, mid-dictation, ENDS it and keeps the words (Jian). Without
     // this the Enter fell through to the terminal while the recogniser was
     // still running: a bare newline hit the composer, and the transcript
@@ -125,30 +147,44 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
     if (active && ev.type === "keydown" && (ev.key === "Enter" || ev.code === "Enter"
                                             || ev.code === "NumpadEnter")) {
       stop();
-      return false;
+      return swallow();
     }
-    if (ev.code === "Space" && !ev.metaKey && !ev.ctrlKey && !ev.altKey && !ev.shiftKey
-        && !!speechRecognitionCtor() && (active || opts.eligible())) {
+    // A keypress carries no `code` in some engines; fall back to the key.
+    const isSpace = ev.code === "Space" || (ev.type === "keypress" && ev.key === " ");
+    if (isSpace && !ev.metaKey && !ev.ctrlKey && !ev.altKey && !ev.shiftKey
+        && !!speechRecognitionCtor() && (active || pending || opts.eligible())) {
       if (ev.type === "keydown") {
-        if (active) return false; // listening: eat every space
+        if (active) return swallow(); // listening: eat every space
         if (!ev.repeat) {
           window.clearTimeout(timer);
+          pending = true;
           spacesTyped = 1; // this one goes through, for zero latency
           timer = window.setTimeout(start, threshold);
           return true;
         }
-        return false; // swallow auto-repeat while held
+        return swallow(); // swallow auto-repeat while held
+      }
+      // The one that was missing. xterm asks again here, and its own
+      // _keyDownHandled guard is not set for a keydown we refused — so an
+      // `undefined` answer types a space per auto-repeat. The first space is
+      // already emitted by the keydown xterm DID process, so nothing is lost.
+      if (ev.type === "keypress") {
+        return (active || pending) ? swallow() : undefined;
       }
       if (ev.type === "keyup") {
         window.clearTimeout(timer);
+        pending = false;
         spacesTyped = 0;
-        if (active) { stop(); return false; }
+        if (active) { stop(); return swallow(); }
         return true;
       }
       return undefined;
     }
     // Any other keydown cancels a pending (not yet active) hold.
-    if (ev.type === "keydown" && ev.code !== "Space") window.clearTimeout(timer);
+    if (ev.type === "keydown" && ev.code !== "Space") {
+      window.clearTimeout(timer);
+      pending = false;
+    }
     return undefined;
   };
 
@@ -156,6 +192,7 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
     window.clearTimeout(timer);
     if (active) { try { rec?.stop(); } catch { /* gone */ } }
     active = false;
+    pending = false;
     rec = null;
     opts.setOverlay(null);
   };

package/hay/apps/web/test/ViewsPanel.test.tsx

@@ -28,6 +28,45 @@ beforeEach(() => {
 afterEach(() => { cleanup(); vi.clearAllMocks(); vi.unstubAllGlobals(); });
 
 describe("ViewsPanel", () => {
+  it("a plain click previews IN PLACE; the row stays a real link for modified clicks", async () => {
+    render(<ViewsPanel onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    const row = screen.getByText("Views end-to-end").closest("a") as HTMLAnchorElement;
+    // jsdom's window is 1024 wide — the desk case, where the pane exists.
+    fireEvent.click(row);
+    const frame = document.querySelector("iframe.views-frame") as HTMLIFrameElement;
+    expect(frame).toBeTruthy();
+    expect(frame.getAttribute("src")).toBe("/view/Orion/agent-result.md/inline");
+    // Our own files must NOT be sandboxed — a sandboxed iframe disables the
+    // browser's PDF viewer, which is half of what the pane is for.
+    expect(frame.hasAttribute("sandbox")).toBe(false);
+    // The row keeps its browser meaning: href + target survive for ⌘-click.
+    expect(row.getAttribute("target")).toBe("_blank");
+    // Escape backs out ONE layer — the preview goes, the panel stays.
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(document.querySelector("iframe.views-frame")).toBeNull();
+    expect(screen.getByText("Views end-to-end")).toBeTruthy();
+  });
+
+  it("delete is two-step, and only the second click calls the API", async () => {
+    render(<ViewsPanel onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    const del = screen.getAllByLabelText("Delete")[0];
+    fireEvent.click(del);
+    // Armed, not deleted: nothing left the browser yet.
+    expect((fetch as ReturnType<typeof vi.fn>).mock.calls.filter(
+      (c) => c[1]?.method === "DELETE").length).toBe(0);
+    fireEvent.click(screen.getAllByLabelText("Click again to delete")[0]);
+    await waitFor(() => {
+      const calls = (fetch as ReturnType<typeof vi.fn>).mock.calls.filter(
+        (c) => c[1]?.method === "DELETE");
+      expect(calls.length).toBe(1);
+      expect(JSON.parse(calls[0][1].body)).toEqual({ session: "Orion", name: "agent-result.md" });
+    });
+    // The row leaves the list only because the server said ok.
+    await waitFor(() => expect(screen.queryByText("Views end-to-end")).toBeNull());
+  });
+
   it("groups by session, leads with the title, falls back to the filename", async () => {
     render(<ViewsPanel sessions={[{ name: "Orion", displayName: "orion-worker", internalName: "Orion" }]} onClose={() => {}} />);
     await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
@@ -36,7 +75,11 @@ describe("ViewsPanel", () => {
     expect(screen.getByText("Nebula")).toBeTruthy();
     expect(screen.getByText("views-test.html")).toBeTruthy();
     expect(screen.getByText("MD")).toBeTruthy();
-    expect(screen.getByText("IMG")).toBeTruthy();
+    // Images render as their own thumbnail, not a type tag — the file is the
+    // most honest icon it could have.
+    const thumb = document.querySelector("img.views-thumb") as HTMLImageElement;
+    expect(thumb).toBeTruthy();
+    expect(thumb.getAttribute("loading")).toBe("lazy");
 
     const link = screen.getByText("Views end-to-end").closest("a") as HTMLAnchorElement;
     expect(link.getAttribute("href")).toBe("/view/Orion/agent-result.md/inline");