hop2 0.11.13 → 0.11.14

package/README.md

@@ -240,6 +240,37 @@ Agents working inside hop terminals can render formulas for the humans watching
 
 `hop math` renders a **2D Unicode layout** — fractions, roots, sums/limits, sub/superscripts, Greek + operators, and accents — with no dependencies. Inline-image rendering (Kitty/iTerm) is deferred until graphics support lands in the web client (xterm.js): the real payoff is math that renders *inside* a shared hop session, which the re-rendering clients can't show yet, so until then it's Unicode everywhere.
 
+### Show something a terminal cannot draw (`hop view`, `hop port`)
+
+A terminal can only print text, which makes it the wrong surface for the
+thing you most often want back from a long-running job: a plot, a report, a
+rendered write-up. `hop view` publishes a file behind hop's auth and prints a
+link — the web client and the phone app both open it in place, with the
+session's cookie, so nothing has to be public.
+
+```bash
+hop view --title "ROC curve: new model vs baseline" results/roc_curve.png
+hop view --title "Q3 analysis" report.html analysis.pdf
+generate_summary | hop view --name findings.md --title "What the profiler found" -
+hop view --list          # what this session published
+hop view --rm x.png      # unpublish
+```
+
+HTML, PDF, images, video and markdown all render (markdown is converted at
+serve time — headings, tables, fenced code). `--title` is what a human sees
+in the session's Views list, so it is worth writing properly. Published files
+are grouped **by session**: a result belongs to the conversation that
+produced it.
+
+For something live rather than a file, `hop port 5173` proxies a local web
+server through the same auth (WebSocket-safe, so dev-server hot reload
+works), attached to the current session — `--standalone` makes it a room of
+its own instead.
+
+Agents do this for you when the bundled skill is installed (`hop agent-skill
+install`): the convention is to hand over a titled view rather than describe
+a result in prose.
+
 ## Operations
 
 ### Logging and History

package/hay/apps/web/src/App.tsx

@@ -15,10 +15,12 @@ import { attachScrollFlywheel } from "./utils/scrollFlywheel";
 import { collectTerminalMatches, selectTerminalMatch } from "./utils/terminalSearch";
 import { createVoiceHold, speechRecognitionCtor } from "./utils/voiceHold";
 import { scanKeyboardProtocol } from "./utils/keyboardProtocol";
-import { originalPathHint } from "./utils/fileDrop";
+import { originalPathHint, pasteableUploadPaths } from "./utils/fileDrop";
 import { MobileKeyboard } from "./components/MobileKeyboard";
 import { SessionSwitcher } from "./components/SessionSwitcher";
 import { SecondaryPane } from "./components/SecondaryPane";
+import { ViewsPanel, hasUnseenViews, loadViewsSeen } from "./components/ViewsPanel";
+import type { ViewsSummary } from "./utils/switcherModel";
 
 const createRoomId = () => `room-${Math.random().toString(36).slice(2, 7)}`;
 
@@ -260,6 +262,7 @@ type SessionInfo = {
   tagline?: string;
   parked?: boolean;
   archived?: boolean;
+  views?: ViewsSummary;
 };
 
 // Check if embedded in Hop
@@ -592,6 +595,9 @@ const App = () => {
   // layer calls through this ref to avoid declaration-order coupling.
   const switchSessionRef = useRef<((s: SessionInfo) => void) | null>(null);
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
+  // Published views (`hop view`). `session` scopes the panel to one session;
+  // an object with none open it fleet-wide. Null = closed.
+  const [viewsOpen, setViewsOpen] = useState<{ session?: string } | null>(null);
   const sessionsRef = useRef(sessions);
   sessionsRef.current = sessions;
   // Claude Code titles its process with a bare version number; hop's session
@@ -1017,13 +1023,51 @@ const App = () => {
   };
 
   // ── Drag-and-drop onto the terminal ──
-  // A browser never reveals a dropped file's real path, so a file drop can't
-  // paste one. Catch the drop and teach the working gesture instead: the
-  // OS-specific copy-path hotkey (⌘⌥C in Finder / Ctrl+Shift+C in Explorer).
-  // Dragged TEXT (a path string from anywhere) pastes normally.
+  // A browser never reveals a dropped file's real path — but it does hand
+  // over the BYTES, and hop's host is the machine the session runs on. So a
+  // drop uploads: the file lands in a per-session staging dir on the host
+  // and the terminal receives the path it can actually open. Dragged TEXT (a
+  // path string from anywhere) still pastes as text. The old copy-path hint
+  // remains the fallback for a host too old to have the upload endpoint.
   const [dropActive, setDropActive] = useState(false);
+  const [uploading, setUploading] = useState<{ done: number; total: number } | null>(null);
   const dragDepthRef = useRef(0);
   const platformString = `${navigator.platform || ""} ${navigator.userAgent || ""}`;
+
+  const uploadDroppedFiles = async (files: File[]) => {
+    const room = activeSessionRoomRef.current;
+    if (!room) return;
+    setUploading({ done: 0, total: files.length });
+    const landed: string[] = [];
+    try {
+      for (const file of files) {
+        const res = await fetch(
+          `/api/sessions/upload?name=${encodeURIComponent(room)}&filename=${encodeURIComponent(file.name)}`,
+          { method: "POST", body: file }
+        );
+        if (!res.ok) {
+          // 404 means this host predates uploads: fall back to teaching the
+          // OS copy-path gesture rather than failing silently.
+          const detail = await res.json().catch(() => null);
+          pushNotice(res.status === 404 ? originalPathHint(platformString) : (detail?.error || `Upload failed (${res.status})`));
+          return;
+        }
+        const data = await res.json();
+        if (data?.path) landed.push(String(data.path));
+        setUploading((u) => (u ? { ...u, done: u.done + 1 } : u));
+      }
+      if (landed.length > 0) {
+        termRef.current?.paste(pasteableUploadPaths(landed));
+        pushNotice(landed.length === 1
+          ? `Uploaded to ${landed[0]}`
+          : `Uploaded ${landed.length} files — paths pasted`);
+      }
+    } catch {
+      pushNotice(originalPathHint(platformString));
+    } finally {
+      setUploading(null);
+    }
+  };
   // Without these guards a drop that misses the target navigates the whole
   // page to the file, killing the session view.
   useEffect(() => {
@@ -2882,7 +2926,12 @@ const App = () => {
           parked: s.parked === true,
           archived: s.archived === true,
           hasLocalCli: s.hasLocalCli === true,
-          folderId: typeof s.folderId === "string" ? s.folderId : null
+          folderId: typeof s.folderId === "string" ? s.folderId : null,
+          // Only present when the session has published — the switcher chip
+          // and the Views dot both key off its absence meaning "nothing here".
+          views: s.views && Number(s.views.count) > 0
+            ? { ...s.views, count: Number(s.views.count), latestAt: Number(s.views.latestAt) || 0 }
+            : undefined
         });
       }
 
@@ -3612,6 +3661,15 @@ const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session]);
 
+  // How many sessions have published something this browser hasn't opened.
+  // Rides the 5s /api/sessions poll rather than fetching the manifest again;
+  // `viewsOpen` is a dep because closing the panel is what rewrites the
+  // seen-markers this reads — without it the dot stayed lit after a read.
+  const unseenViewSessions = useMemo(() => {
+    const seen = loadViewsSeen();
+    return sessions.filter((s) => hasUnseenViews(s.internalName || s.name, s.views?.latestAt, seen)).length;
+  }, [sessions, viewsOpen]);
+
   const sessionStyle = isMobile
     ? ({ "--mobile-keyboard-height": `${keyboardVisible ? keyboardHeight : 0}px` } as CSSProperties)
     : undefined;
@@ -3660,6 +3718,15 @@ const App = () => {
               Sessions
               <kbd>{isMacPlatform ? "⌘K" : "⌃⇧K"}</kbd>
             </button>
+            <button
+              type="button"
+              className="topbar-sessions-btn"
+              title="Files agents published with hop view"
+              onClick={() => setViewsOpen({})}
+            >
+              Views
+              {unseenViewSessions > 0 && <span className="views-chip-dot" aria-label="New views" />}
+            </button>
             <button
               type="button"
               className="topbar-sessions-btn"
@@ -3695,7 +3762,7 @@ const App = () => {
             onRefresh={() => fetchSessions({ showLoading: false })}
             onNotice={showToast}
             tileWsBase={resolveWsUrl()}
-            
+            onOpenViews={(scope) => setViewsOpen({ session: scope })}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
           />
@@ -3872,6 +3939,13 @@ const App = () => {
                 }}>
                   Fit
                 </button>
+                {/* The drawer is the only menu on mobile, where the topbar's
+                    Views button is hidden — without this entry the phone had
+                    to go through the switcher to reach a published result. */}
+                <button type="button" className="quick-btn" onClick={() => { setDrawerOpen(false); setViewsOpen({}); }}>
+                  Views
+                  {unseenViewSessions > 0 && <span className="views-chip-dot" aria-label="New views" />}
+                </button>
                 {/* Mobile gets the in-app switcher; desktop keeps the manager page */}
                 {isMobile && isEmbeddedInHop() ? (
                   <button type="button" className="quick-btn" onClick={() => { setDrawerOpen(false); setSwitcherOpen(true); }}>
@@ -4108,8 +4182,9 @@ const App = () => {
                     e.preventDefault();
                     dragDepthRef.current = 0;
                     setDropActive(false);
-                    if ((e.dataTransfer?.files?.length || 0) > 0) {
-                      pushNotice(originalPathHint(platformString));
+                    const files = Array.from(e.dataTransfer?.files || []);
+                    if (files.length > 0) {
+                      void uploadDroppedFiles(files);
                       return;
                     }
                     // A dragged text snippet (e.g. a path string) pastes like
@@ -4134,9 +4209,13 @@ const App = () => {
                       </span>
                     </div>
                   )}
-                  {dropActive && (
+                  {(dropActive || uploading) && (
                     <div className="terminal-drop-overlay" aria-hidden="true">
-                      <span>{originalPathHint(platformString)}</span>
+                      <span>
+                        {uploading
+                          ? `Uploading ${uploading.total > 1 ? `${uploading.done + 1} of ${uploading.total}` : "file"}…`
+                          : "Drop to upload — the path pastes into this session"}
+                      </span>
                     </div>
                   )}
                   {isMobile && status === "connecting" && (
@@ -4370,6 +4449,7 @@ const App = () => {
             tileWsBase={resolveWsUrl()}
             onFocusSession={focusSessionInPlace}
             folders={folders}
+            onOpenViews={(scope) => setViewsOpen({ session: scope })}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
             onOpenSettings={() => {
@@ -4504,6 +4584,11 @@ const App = () => {
           {toast && <div className="terminal-toast" role="status" aria-live="polite">{toast}</div>}
         </main>
       )}
+      {/* Outside the mode ternary on purpose: Views opens from the hub, from a
+          session, and from over the switcher, and it must outlive a switch. */}
+      {viewsOpen && (
+        <ViewsPanel session={viewsOpen.session} sessions={sessions} onClose={() => setViewsOpen(null)} />
+      )}
     </div>
   );
 };

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

@@ -28,6 +28,7 @@ import {
 } from "../utils/switcherModel";
 import { scanKeyboardProtocol } from "../utils/keyboardProtocol";
 import { DigestCard } from "./DigestCard";
+import { hasUnseenViews, loadViewsSeen } from "./ViewsPanel";
 
 // Full-screen, in-app session switcher (mobile-first). Hot sessions — current,
 // attention, most recent — are preview cards; the tail is compact rows grouped
@@ -103,6 +104,9 @@ type Props = {
   onOpenSettings?: () => void;
   onToggleKeyboard?: () => void;
   onFind?: () => void;
+  // Open the Views panel. No argument = the whole fleet (header button); an
+  // internalName = just that session (a card's chip).
+  onOpenViews?: (session?: string) => void;
 };
 
 type Sheet = {
@@ -1130,7 +1134,8 @@ export const SessionSwitcher = ({
   terminalTheme,
   onOpenSettings,
   onToggleKeyboard,
-  onFind
+  onFind,
+  onOpenViews
 }: Props) => {
   // View state survives a REFRESH but not a new tab: sessionStorage, not
   // localStorage. Reloading the page (or hop reconnecting) used to dump the
@@ -1480,6 +1485,15 @@ export const SessionSwitcher = ({
     () => filterSessionsByOrigin(sessions, originScope),
     [sessions, originScope]
   );
+  // Read once per session-list refresh rather than per card: every tile on a
+  // 30-session wall hitting localStorage on each of the wall's frequent
+  // re-renders is a synchronous cost the tile previews cannot absorb. The
+  // 5s poll's new array is also what re-reads markers the panel just wrote.
+  const viewsSeen = useMemo(() => loadViewsSeen(), [sessions]);
+  const unseenViewSessions = useMemo(
+    () => visibleSessions.filter((s) => hasUnseenViews(sessionKey(s), s.views?.latestAt, viewsSeen)).length,
+    [visibleSessions, viewsSeen]
+  );
   // Parked sessions leave the wall but stay one glance away in a collapsed
   // section — and the FILTER still searches them, so a parked session is
   // never more than ⌘K + a few letters from coming back.
@@ -1793,15 +1807,20 @@ export const SessionSwitcher = ({
       if (document.activeElement?.closest?.(".switcher-live-tile, .switcher-focus-tile")) return;
       if (event.key === "Escape") {
         event.preventDefault();
+        // Escape unwinds one layer at a time, innermost first. A typed query
+        // is a layer: Escape clears it and leaves you on the full wall.
+        // Dismissing the whole switcher out from under a search meant losing
+        // your place to undo one word.
         if (sheet) setSheet(null);
         else if (focusedKey) setFocusedKey(null);
+        else if (filter) setFilter("");
         else if (dismissable) onClose();
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, sheet, focusedKey]);
+  }, [open, sheet, focusedKey, filter]);
 
   // Tile previews: EVERY session gets a preview tile. Hot tiles (the
   // attention/recency heroes) refresh each tick; the long tail refreshes at a
@@ -2498,6 +2517,22 @@ export const SessionSwitcher = ({
             </span>
           )}
           {!current && s.starting && !s.active && <span className="switcher-chip starting">STARTING</span>}
+          {/* A result waiting on this session is worth as much as its status:
+              a published PDF or write-up was otherwise invisible from the wall.
+              stopPropagation on pointerdown keeps the long-press sheet out of
+              it, the same way the inline action buttons do. */}
+          {onOpenViews && s.views && s.views.count > 0 && (
+            <button
+              type="button"
+              className={"switcher-chip views" + (hasUnseenViews(key, s.views.latestAt, viewsSeen) ? " fresh" : "")}
+              title={s.views.latestTitle || s.views.latestName || "Published views"}
+              aria-label={`${s.views.count} published view${s.views.count === 1 ? "" : "s"} in ${s.displayName}`}
+              onClick={(e) => { e.stopPropagation(); onOpenViews(key); }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              ◧ {s.views.count}
+            </button>
+          )}
           {waitingOnUser(preview) && (
             <span className="switcher-chip waiting" title="Claude is asking how to resume this conversation — open it and choose">
               NEEDS YOU
@@ -2700,6 +2735,16 @@ export const SessionSwitcher = ({
               </svg>
             </button>
           )}
+          {/* The hub renders this wall as the whole page, so this is the only
+              fleet-wide way in to Views when no session is open. */}
+          {onOpenViews && (
+            <button type="button" className="switcher-action" aria-label="Published views" title="Files agents published with hop view" onClick={() => onOpenViews()}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="4" width="18" height="16" rx="2"/><path d="M10 4v16"/>
+              </svg>
+              {unseenViewSessions > 0 && <span className="views-chip-dot" aria-label="New views" />}
+            </button>
+          )}
           {onOpenSettings && (
             <button type="button" className="switcher-action" aria-label="Settings" title="Settings" onClick={onOpenSettings}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

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

@@ -0,0 +1,243 @@
+import { useEffect, useMemo, 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.
+
+type ViewItem = {
+  // The session's internalName — the same key /api/sessions reports views
+  // under, so seen-markers written here line up with the switcher's counts.
+  session: string;
+  name: string;
+  title?: string;
+  path: string;
+  bytes?: number;
+  // Epoch SECONDS (the manifest stores unix time, not ms).
+  mtime?: number;
+  // "server" is a LIVE proxied localhost server (`hop port`), not a stored
+  // file: it stops working when the server does, which a file never does.
+  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.
+  target?: string;
+};
+
+type Props = {
+  // Scope to one session — set when opened from that session's own affordance.
+  // Absent means the whole fleet, which is the default reading.
+  session?: string;
+  // Only used to translate internalName into the name the user renamed it to;
+  // the manifest has no idea a session was ever renamed.
+  sessions?: { name: string; displayName?: string; internalName?: string }[];
+  onClose: () => void;
+};
+
+// Per-session high-water mark: the newest mtime this browser has looked at.
+const SEEN_KEY = "hop_views_seen";
+
+export const loadViewsSeen = (): Record<string, number> => {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(SEEN_KEY) || "{}");
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    return parsed as Record<string, number>;
+  } catch { return {}; }  // private mode, or a half-written value
+};
+
+const saveViewsSeen = (seen: Record<string, number>) => {
+  try { localStorage.setItem(SEEN_KEY, JSON.stringify(seen)); } catch { /* private mode */ }
+};
+
+/**
+ * Whether a session has published something since this browser last looked.
+ * A session with no marker at all counts as unseen — a first-time reader HAS
+ * results waiting, and silently baselining them would hide the whole feature
+ * behind an affordance that never lights up.
+ */
+export const hasUnseenViews = (
+  key: string,
+  latestAt: number | undefined,
+  seen: Record<string, number>
+) => (latestAt || 0) > (seen[key] || 0);
+
+// A short type tag instead of an emoji: this sits at ~9px on a phone, and
+// emoji coverage for document glyphs differs enough between iOS and Android
+// that the column stops lining up. The tag also survives a monospace column.
+const kindOf = (name: string, kind?: string) => {
+  if (kind === "server") return "LIVE";
+  const ext = (name.split(".").pop() || "").toLowerCase();
+  if (["csv", "tsv"].includes(ext)) return "TBL";
+  if (["mp3", "m4a", "wav", "flac", "aac", "ogg", "opus"].includes(ext)) return "AUD";
+  if (ext === "pdf") return "PDF";
+  if (["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"].includes(ext)) return "IMG";
+  if (["mp4", "mov", "webm"].includes(ext)) return "VID";
+  if (["md", "markdown"].includes(ext)) return "MD";
+  if (["html", "htm"].includes(ext)) return "WEB";
+  if (["txt", "log", "json", "csv"].includes(ext)) return "TXT";
+  return "FILE";
+};
+
+const formatBytes = (n?: number) => {
+  if (typeof n !== "number" || !Number.isFinite(n) || n < 0) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export const ViewsPanel = ({ session, sessions = [], onClose }: Props) => {
+  const [items, setItems] = useState<ViewItem[] | null>(null);
+  const [failed, setFailed] = useState(false);
+  // 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 now = Date.now();
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/views", { cache: "no-store", credentials: "same-origin" })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
+      .then((d: { items?: ViewItem[] }) => {
+        if (!cancelled) setItems(Array.isArray(d?.items) ? d.items : []);
+      })
+      .catch(() => { if (!cancelled) setFailed(true); });
+    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.
+    const scope = session?.toLowerCase();
+    const by = new Map<string, ViewItem[]>();
+    // /api/views is already newest-first, so plain insertion order gives both
+    // newest-first rows inside a session and newest-first sessions.
+    for (const item of items || []) {
+      if (!item?.path || !item?.name) continue;
+      const key = String(item.session || "");
+      if (scope && key.toLowerCase() !== scope) continue;
+      const rows = by.get(key);
+      if (rows) rows.push(item);
+      else by.set(key, [item]);
+    }
+    return [...by.entries()];
+  }, [items, session]);
+
+  // Opening the panel IS the act of seeing what it shows.
+  useEffect(() => {
+    if (!items) return;
+    const seen = loadViewsSeen();
+    let dirty = false;
+    for (const [key, rows] of groups) {
+      const newest = rows[0]?.mtime || 0;
+      if (newest > (seen[key] || 0)) { seen[key] = newest; dirty = true; }
+    }
+    // Only a fleet-wide open knows the full population. Pruning from a scoped
+    // open would delete every other session's marker, and their long-read
+    // views would announce themselves as new all over again.
+    if (!session) {
+      const live = new Set(groups.map(([key]) => key));
+      for (const key of Object.keys(seen)) {
+        if (!live.has(key)) { delete seen[key]; dirty = true; }
+      }
+    }
+    if (dirty) saveViewsSeen(seen);
+  }, [items, groups, session]);
+
+  const label = (internalName: string) => {
+    const hit = sessions.find((s) => (s.internalName || s.name) === internalName)
+      || sessions.find((s) => (s.internalName || s.name).toLowerCase() === internalName.toLowerCase());
+    return hit ? (hit.displayName || hit.name) : internalName;
+  };
+
+  return (
+    <>
+      <div className="views-backdrop" onClick={onClose} />
+      <div className="views-panel" 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>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};