@timqi/pier 0.0.29 → 0.1.1

package/dist/web/public/index.html

@@ -7,17 +7,19 @@
        workbench zoomed by a stray gesture has no visible way back — said again
        as `touch-action` (style.css) for the engines that ignore this pair. -->
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
-  <meta name="theme-color" content="#fafafa" />
+  <meta name="theme-color" content="#f1f4f3" />
   <!-- Ahead of the stylesheet, because a workbench that flashes white and then
        goes dark reads as a bug. This is the only place "system" is resolved
        before the bundle exists; theme.ts owns the choice from there on. -->
   <script>
-    try {
-      var t = localStorage.getItem("pier.theme");
-      document.documentElement.dataset.theme =
-        t === "light" || t === "dark" ? t
-          : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    } catch (e) { /* storage denied (private mode, blocked cookies): light it is */ }
+    var t;
+    try { t = localStorage.getItem("pier.theme"); }
+    catch (e) { /* storage denied: follow the system for this visit */ }
+    var mode = t === "light" || t === "dark" ? t
+      : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    document.documentElement.dataset.theme = mode;
+    // Before CSS loads, mirror its canvas token so installed chrome never flashes.
+    document.querySelector('meta[name="theme-color"]').content = mode === "dark" ? "#14171a" : "#f1f4f3";
   </script>
   <!-- Installed as a home-screen app: standalone window, own icon. The
        manifest shares the workbench's cookie boundary. -->
@@ -35,8 +37,8 @@
        which style.css pays for with the safe-area inset. -->
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <title>Pier</title>
-  <script type="module" crossorigin src="/assets/index-uFsZkKOQ.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-CX3fYZY5.css">
+  <script type="module" crossorigin src="/assets/index-DzXDXra_.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-eqQLVS8Q.css">
 </head>
 <!-- The document never scrolls: this is a fixed-viewport workbench, and every
      scrollable region is an inner pane. h-dvh, not h-screen, because 100vh can
@@ -52,11 +54,9 @@
        control in the same band. -->
   <button type="button" id="rail-toggle" aria-label="Toggle sidebar"
     class="fixed top-1.5 z-40 hidden h-7 w-7 cursor-pointer items-center justify-center rounded-md text-neutral-400 hover:bg-neutral-200 hover:text-neutral-700 md:flex">
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5">
-      <path d="M9.5 4 5.5 8l4 4" stroke-linecap="round" stroke-linejoin="round" />
-    </svg>
+    <span data-icon="ChevronLeft" class="h-3.5 w-3.5"></span>
   </button>
-  <aside id="sidebar" class="flex flex-col overflow-hidden border-r border-neutral-200 bg-neutral-50">
+  <aside id="sidebar" class="flex flex-col overflow-hidden border-r border-neutral-200 bg-neutral-50 font-sans">
     <header class="flex h-12 flex-none items-center gap-2 px-3">
       <!-- The same mark as the tab and the home-screen icon, so an installed
            Pier looks like the thing you installed. -->
@@ -76,72 +76,59 @@
       <button type="button" id="theme-toggle" aria-label="Theme"
         class="icon-btn text-[13px]"></button>
     </header>
+    <div class="flex flex-none items-center gap-1.5 px-3 pb-1">
+      <button type="button" id="new-session" aria-label="New session"
+        class="btn btn-primary flex min-w-0 flex-1 items-center justify-center gap-2 whitespace-nowrap px-3">
+        <span data-icon="Plus" aria-hidden="true" class="h-3.5 w-3.5"></span> New session
+      </button>
+      <button type="button" id="open-palette" aria-label="Search sessions, messages and Console"
+        class="btn flex h-8 w-8 flex-none items-center justify-center bg-neutral-100 p-0 text-neutral-600 hover:bg-neutral-200 active:bg-neutral-300">
+        <span data-icon="Search" class="h-5 w-5 flex-none"></span>
+        <span class="sr-only">Search</span>
+      </button>
+    </div>
     <details id="console-section" open class="flex-none border-b border-neutral-200/70">
-      <summary class="flex cursor-pointer select-none items-center gap-1 px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-500 hover:bg-neutral-100">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="chev h-3 w-3"><path d="m6 4 4 4-4 4" stroke-linecap="round" stroke-linejoin="round" /></svg>Console
+      <summary class="flex cursor-pointer select-none items-center gap-1 px-3 py-1 text-xs font-semibold leading-5 text-neutral-500 hover:bg-neutral-100">
+        <span data-icon="ChevronRight" class="chev h-3 w-3"></span>Console
       </summary>
-      <ul class="pb-2 text-[13.5px]">
+      <ul class="pb-1">
         <!-- One row for the tasks area: Tasks, Runs and Activity are tabs of
              the Automation page (views.ts), not three sidebar entries. -->
         <li><button type="button" id="open-tasks"
-          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5 flex-none text-neutral-400">
-            <path d="M6 3h8M6 8h8M6 13h8M2 3h1M2 8h1M2 13h1" />
-          </svg>Automation</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 pr-3 text-left hover:bg-neutral-100">
+          <span data-icon="ListTodo" class="h-3.5 w-3.5 flex-none text-neutral-400"></span>Automation</button></li>
         <li><button type="button" id="open-boards"
-          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5 flex-none text-neutral-400">
-            <rect x="2" y="2" width="12" height="12" rx="1.5" /><path d="M2 6.5h12M6.5 6.5V14" />
-          </svg>Boards</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 pr-3 text-left hover:bg-neutral-100">
+          <span data-icon="LayoutDashboard" class="h-3.5 w-3.5 flex-none text-neutral-400"></span>Boards</button></li>
         <li><button type="button" id="open-settings"
-          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" class="h-3.5 w-3.5 flex-none text-neutral-400">
-            <!-- Teeth every 60° about (8,8); the hub is that same centre. -->
-            <path d="M6.8 2.2h2.4l.32 1.6a4.9 4.9 0 0 1 1.36.79l1.55-.53 1.2 2.08-1.23 1.07a4.9 4.9 0 0 1 0 1.58l1.23 1.07-1.2 2.08-1.55-.53a4.9 4.9 0 0 1-1.36.79l-.32 1.6H6.8l-.32-1.6a4.9 4.9 0 0 1-1.36-.79l-1.55.53-1.2-2.08 1.23-1.07a4.9 4.9 0 0 1 0-1.58L2.37 6.14l1.2-2.08 1.55.53a4.9 4.9 0 0 1 1.36-.79z" stroke-linejoin="round" />
-            <circle cx="8" cy="8" r="1.9" />
-          </svg>Settings</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 pr-3 text-left hover:bg-neutral-100">
+          <span data-icon="Settings" class="h-3.5 w-3.5 flex-none text-neutral-400"></span>Settings</button></li>
       </ul>
     </details>
-    <div class="flex items-center gap-1 px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
-      Sessions
-      <button type="button" id="open-archive"
-        class="icon-btn ml-auto" aria-label="Search sessions and Console">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5">
-          <circle cx="7" cy="7" r="4.25" /><path d="M10.2 10.2 14 14" stroke-linecap="round" />
-        </svg>
-      </button>
-      <button type="button" id="new-session" title="New session"
-        class="icon-btn" aria-label="New session">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5">
-          <rect x="2.25" y="2.25" width="11.5" height="11.5" rx="2.5" />
-          <path d="M8 5.5v5M5.5 8h5" stroke-linecap="round" />
-        </svg>
-      </button>
-    </div>
-    <div id="session-list" class="flex-1 overflow-y-auto text-[13.5px]"></div>
+    <div class="flex-none px-3 pb-1 pt-2 text-xs font-semibold leading-5 text-neutral-500">Sessions</div>
+    <div id="session-list" class="min-h-0 flex-1 overflow-y-auto"></div>
   </aside>
 
-  <main class="flex min-w-0 flex-col overflow-hidden">
+  <main class="min-w-0 overflow-hidden">
     <!-- Mobile top bar: replaces the chat header below md (which hides), so a
          Console view keeps the same way back to the drawer as a chat does. -->
-    <header id="mobile-bar" class="flex h-12 flex-none items-center gap-1 border-b border-neutral-200 px-1.5 md:hidden">
+    <header id="mobile-bar" class="flex flex-none items-center gap-1 px-1.5 md:hidden">
       <button type="button" id="drawer-toggle" aria-label="Open sidebar"
-        class="relative flex h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-md text-neutral-500 active:bg-neutral-200">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" class="h-5 w-5">
-          <path d="M2.5 4h11M2.5 8h11M2.5 12h11" />
-        </svg>
+        class="icon-btn relative h-11 w-11 text-neutral-500">
+        <span data-icon="Menu" class="h-4.5 w-4.5"></span>
       </button>
       <span id="mobile-title" class="min-w-0 flex-1 truncate text-[16px] font-medium"></span>
+      <!-- Both bar controls are the shared round icon button at a thumb's size
+           (44px), with the chat header's own 14px ⋯ glyph — not a row of
+           oversized dots. -->
       <button type="button" id="mobile-menu" aria-label="Session actions"
-        class="hidden h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-md text-[20px] leading-none text-neutral-500 active:bg-neutral-200">⋯</button>
+        class="icon-btn hidden h-11 w-11"><span data-icon="Ellipsis" class="h-3.5 w-3.5"></span></button>
     </header>
-    <!-- Automation hosts three views under one title and tab strip; the
-         strip's active pill tracks the route (#/tasks, #/runs, #/activity). -->
+    <!-- Automation hosts three views under one head — title, tabs and the
+         page's primary action on one strip, drawn by views.ts; its active pill
+         tracks the route (#/tasks, #/runs, #/activity). -->
     <section id="automation-view" class="hidden min-h-0 flex-1 flex-col">
-      <header class="flex h-10 flex-none items-center gap-3 border-b border-neutral-200 bg-white px-4 max-md:hidden">
-        <span class="font-medium">Automation</span>
-      </header>
-      <div id="automation-tabs" class="tabstrip bg-white"></div>
+      <header id="automation-tabs" class="pagehead"></header>
       <section id="tasks-view" class="hidden min-h-0 flex-1 flex-col"></section>
       <section id="runs-view" class="hidden min-h-0 flex-1 flex-col"></section>
       <section id="activity-view" class="hidden min-h-0 flex-1 flex-col"></section>
@@ -157,7 +144,7 @@
         <!-- Inline session meta: model · reasoning · current context size. -->
         <div id="session-meta" class="hidden flex-none items-center gap-1 text-[11px]"></div>
         <button type="button" id="chat-menu" title="Session actions" aria-label="Session actions"
-          class="icon-btn">⋯</button>
+          class="icon-btn"><span data-icon="Ellipsis" class="h-3.5 w-3.5"></span></button>
       </div>
     </header>
     <!-- The transcript's own type scale, inherited by rows, chips and markdown. -->
@@ -166,36 +153,21 @@
     <div id="turns" data-gallery class="flex-1 overflow-y-auto pb-5 pt-2 text-[15px] leading-[1.55]"></div>
     <!-- Pi's queue primitives are whole-queue (steer / clear), so the actions
          live on the header row and read as "the queue", never per message. -->
-    <div id="queue-panel" class="hidden flex-col border-t border-neutral-200 px-3 py-1.5">
+    <div id="queue-panel" class="hidden flex-col border-t border-neutral-200 px-4 pb-3 pt-2">
       <div class="flex h-7 items-center gap-2">
         <span id="queue-label" class="text-[11px] font-semibold uppercase tracking-wide text-amber-700">Queued</span>
         <div class="ml-auto flex items-center gap-0.5 text-amber-700">
           <button type="button" id="queue-steer" title="Send the whole queue now into the running turn" aria-label="Send queue now"
             class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-amber-100 active:bg-amber-200">
-            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"
-              stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
-              <path d="M14.5 1.5 7 9m7.5-7.5-4.2 12.6L7 9 1.7 6.7l12.8-5.2z" />
-            </svg>
+            <span data-icon="ArrowUp" class="h-3.5 w-3.5"></span>
           </button>
           <button type="button" id="queue-restart" title="Stop the running turn and send the whole queue as a new prompt" aria-label="Stop and send queue"
             class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-amber-100 active:bg-amber-200">
-            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"
-              stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
-              <!-- The arc's ink sits high-right of the box; centre it so the
-                   three icons share one baseline. -->
-              <g transform="translate(-0.8 1.9)">
-                <path d="M13 5.2V1.8m0 0H9.6M13 1.8A6 6 0 1 0 14 9" />
-                <path d="M6.2 8h4M8.5 5.7 10.8 8l-2.3 2.3" />
-              </g>
-            </svg>
+            <span data-icon="RotateCw" class="h-3.5 w-3.5"></span>
           </button>
           <button type="button" id="queue-recall" title="Return queued messages to the composer" aria-label="Recall queued messages"
             class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-amber-100 active:bg-amber-200">
-            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"
-              stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
-              <!-- Ink centred on the 16×16 box, or the glyph sits low next to its neighbours. -->
-              <path d="M5 3 2 6l3 3M2.5 6H10a3.5 3.5 0 0 1 0 7H8" />
-            </svg>
+            <span data-icon="Undo2" class="h-3.5 w-3.5"></span>
           </button>
         </div>
       </div>
@@ -203,75 +175,60 @@
            (18px leading) rather than shrinking the turns pane any further. -->
       <ul id="queue-rows" class="flex max-h-[6rem] flex-col gap-1 overflow-y-auto overscroll-contain"></ul>
     </div>
-    <form id="composer" class="flex-none px-4 pb-3 pt-2">
+    <form id="composer" class="flex-none px-4 pb-4 pt-2">
       <div class="glass rounded-[1.75rem] border border-neutral-200 px-3 py-2.5 transition-shadow focus-within:border-indigo-400">
         <div id="image-strip" data-gallery class="hidden flex-wrap gap-2 px-1 pb-1.5 pt-1"></div>
         <!-- items-end keeps the icons on the bottom row while the textarea grows upward -->
         <div class="flex items-end gap-1.5">
           <button type="button" id="attach" title="Attach file (or paste / drop)"
-            class="flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-lg text-[17px] leading-none text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600">+</button>
+            class="flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-lg text-[17px] leading-none text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600" aria-label="Attach file"><span data-icon="Plus" class="h-3.5 w-3.5"></span></button>
           <input id="attach-input" type="file" multiple class="hidden" />
           <textarea id="input" rows="1"
             class="block max-h-48 min-w-0 flex-1 resize-none bg-transparent px-1 py-0.5 focus:outline-none"
             placeholder="Message…"></textarea>
-          <button type="button" id="stop" title="Stop the running turn"
+          <button type="button" id="stop" title="Stop the running turn" aria-label="Stop the running turn"
             class="hidden h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-lg bg-red-50 text-red-600 hover:bg-red-100">
-            <svg viewBox="0 0 16 16" fill="currentColor" class="h-3.5 w-3.5">
-              <rect x="3.5" y="3.5" width="9" height="9" rx="1.5" />
-            </svg>
+            <span data-icon="Square" class="h-3.5 w-3.5"></span>
           </button>
-          <!-- Style + icon double as the state display: indigo plane = send, amber clock = queue -->
+          <!-- Style + icon double as the state display: indigo arrow = send, amber clock = queue -->
           <button type="submit" id="send" title="Send">
-            <svg id="send-plane" viewBox="0 0 16 16" fill="none" stroke="currentColor"
-              stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
-              <path d="M14.5 1.5 7 9m7.5-7.5-4.2 12.6L7 9 1.7 6.7l12.8-5.2z" />
-            </svg>
-            <svg id="send-queue" viewBox="0 0 16 16" fill="none" stroke="currentColor"
-              stroke-width="1.5" stroke-linecap="round" class="hidden h-3.5 w-3.5">
-              <circle cx="8" cy="8" r="6" />
-              <path d="M8 4.75V8l2.4 1.5" />
-            </svg>
+            <span id="send-arrow" data-icon="ArrowUp" class="h-3.5 w-3.5"></span>
+            <span id="send-queue" data-icon="Clock" class="hidden h-3.5 w-3.5"></span>
           </button>
         </div>
       </div>
     </form>
   </main>
 
-  <dialog id="new-dialog" class="m-auto w-[min(24rem,92vw)] rounded-3xl border border-neutral-200 p-5 shadow-xl backdrop:bg-black/20">
-    <form id="new-form" method="dialog" class="flex flex-col gap-3">
-      <h3 class="font-semibold">New session</h3>
-      <label class="flex flex-col gap-1 text-[13px] text-neutral-600">
-        Working directory
-        <input id="new-cwd" type="text" required placeholder="/path/to/project"
-          class="w-full rounded-md border border-neutral-300 px-2 py-1.5 font-mono text-[13px] focus:border-indigo-400 focus:outline-none" />
-      </label>
-      <div class="flex justify-end gap-2">
-        <button type="button" id="new-cancel" class="btn text-[13px]">Cancel</button>
-        <button type="submit" class="btn btn-primary text-[13px]">Create</button>
-      </div>
-    </form>
-  </dialog>
-
   <!-- Not m-auto: a palette that grows downward as you type should not also
        drift upward to stay centred. Pinned near the top instead, which is
-       where the eye already is and where every other ⌘K lives. -->
-  <dialog id="archive-dialog" class="mx-auto mb-auto mt-[12vh] w-[35rem] max-w-[90vw] rounded-3xl border border-neutral-200 p-0 shadow-xl backdrop:bg-black/20">
-    <div class="flex items-center gap-2 border-b border-neutral-200 px-3 py-2">
-      <input id="archive-search" type="text" placeholder="Search sessions and Console…"
-        class="w-full bg-transparent text-[14px] focus:outline-none" />
-      <span id="archive-count" class="flex-none rounded bg-neutral-100 px-1.5 text-[11px] text-neutral-500"></span>
-      <button type="button" id="archive-close" class="btn flex-none text-[12px]">Close</button>
+       where the eye already is and where every other ⌘K lives. A solid
+       surface (docs/design/06-ui-ux.md): glass is for chrome, and this is
+       something you read. The edge and shadow tokens are set in style.css;
+       a click on the backdrop lands on the dialog element itself and closes
+       it (palette.ts). -->
+  <dialog id="palette" class="mx-auto mb-auto mt-[12vh] w-[36rem] max-w-[92vw] rounded-3xl border p-0 backdrop:bg-black/25">
+    <div class="flex h-[3.25rem] items-center gap-3 border-b border-neutral-200/70 px-4">
+      <span data-icon="Search" aria-hidden="true" class="h-[1.125rem] w-[1.125rem] flex-none text-neutral-400"></span>
+      <input id="palette-input" type="text" placeholder="Search sessions, messages and Console…" autocomplete="off" spellcheck="false"
+        class="min-w-0 flex-1 bg-transparent text-[1.0625rem] leading-6 placeholder:text-neutral-400 focus:outline-none" />
+      <kbd class="flex-none rounded-md border border-neutral-200 px-1.5 font-sans text-[0.6875rem] leading-5 text-neutral-500">esc</kbd>
+    </div>
+    <ul id="palette-list" role="listbox" aria-label="Results" class="max-h-[60vh] overflow-y-auto px-2 pb-2 text-[0.9375rem]"></ul>
+    <div class="flex items-center justify-between border-t border-neutral-200/70 px-4 py-1.5 text-[0.75rem] leading-4 text-neutral-500">
+      <span id="palette-keys">↑↓ navigate · ↵ open</span>
+      <span id="palette-count"></span>
     </div>
-    <ul id="archive-list" class="max-h-[60vh] overflow-y-auto py-1 text-[13.5px]"></ul>
   </dialog>
 
-  <!-- Full-size view of a thumbnail; a single click (or Esc) closes, a double
-       one zooms about the point. The arrows page through the gallery it was
-       opened from, as do ← / →; they hide when there is only one image to look
-       at. The dialog fills the viewport rather than hugging the image, so the
-       arrows sit at the screen's edges and a tall shot and a wide one don't
-       move the control under your thumb; #image-stage is the box a zoomed
-       image scrolls inside (ui/attachments.ts). -->
+  <!-- Full-size view of a thumbnail; a click on the image zooms about the
+       point and a second one fits it again, dragging pans what is magnified, a
+       click beside it — or the ✕, or Esc — closes. The arrows page through the
+       gallery it was opened from, as do ← / →; they hide when there is only one
+       image to look at. The dialog fills the viewport rather than hugging the
+       image, so the controls sit at the screen's edges and a tall shot and a
+       wide one don't move the one under your thumb; #image-stage is the box a
+       zoomed image scrolls inside (ui/attachments.ts). -->
   <!-- The size is written out, not left to `inset-0`: a dialog is `width:
        fit-content` in the UA sheet, and an inset pair does not stretch a box
        that already has a width — it sized itself to the image and sat in the
@@ -279,12 +236,25 @@
        of on #image-stage. -->
   <dialog id="image-dialog" class="fixed inset-0 m-0 h-[100dvh] w-full max-h-none max-w-none bg-transparent p-0 backdrop:bg-black/70">
     <div id="image-stage" class="flex h-full w-full items-center justify-center overflow-hidden">
-      <img id="image-full" alt="" class="max-h-[92dvh] max-w-[92vw] cursor-zoom-in rounded-xl object-contain" />
+      <!-- The width leaves the arrows their gutters wherever there is room for
+           them: a wide shot at 92vw ran under both, which is what "the buttons
+           are gone" was. Below md there is no such room — taking 9rem off a
+           390px screen would shrink every portrait screenshot to fit controls
+           that are only sometimes there — so the arrows overlay the image and
+           the rim in style.css is what keeps them legible over it.
+           draggable=false: the browser's own image drag would race the pan. -->
+      <img id="image-full" alt="" draggable="false"
+        class="max-h-[92dvh] max-w-[92vw] cursor-zoom-in rounded-xl object-contain md:max-w-[calc(100vw-9rem)]" />
     </div>
     <!-- Siblings of the stage, not children of it: the stage is what scrolls
-         when zoomed, and an arrow inside it would scroll away with the image. -->
-    <button type="button" id="image-prev" aria-label="Previous image" class="lightbox-nav left-2">‹</button>
-    <button type="button" id="image-next" aria-label="Next image" class="lightbox-nav right-2">›</button>
+         when zoomed, and a control inside it would scroll away with the image.
+         .lightbox-btn is the round scrim button; where each one sits is a
+         utility beside it, so no two of them set the same property. -->
+    <button type="button" id="image-prev" aria-label="Previous image" class="lightbox-btn left-2 top-1/2 -translate-y-1/2"><span data-icon="ChevronLeft" class="h-6 w-6"></span></button>
+    <button type="button" id="image-next" aria-label="Next image" class="lightbox-btn right-2 top-1/2 -translate-y-1/2"><span data-icon="ChevronRight" class="h-6 w-6"></span></button>
+    <!-- The way out on a touch screen: tapping the image now zooms it, and the
+         scrim beside a fitted shot is a 4vw strip — not a thumb's target. -->
+    <button type="button" id="image-close" aria-label="Close" class="lightbox-btn right-2 top-2"><span data-icon="X" class="h-6 w-6"></span></button>
   </dialog>
 
   <!-- Text preview of an agent attachment — the Files view's code pane fills

package/dist/web/public/manifest.webmanifest

@@ -8,8 +8,8 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#fafafa",
-  "theme_color": "#fafafa",
+  "background_color": "#f1f4f3",
+  "theme_color": "#f1f4f3",
   "categories": ["developer", "productivity", "utilities"],
   "launch_handler": { "client_mode": "focus-existing" },
   "icons": [

package/dist/web/public/sw.js

@@ -18,6 +18,18 @@ button{margin-top:1rem;padding:.5rem 1rem;border:1px solid light-dark(#d4d4d4,#3
 <p class="dim">This device is offline, or the server is not answering.</p>
 <button onclick="location.reload()">Try again</button></main></body></html>`;
 
+/** A payload URL is data: resolved against this origin, and replaced by the
+ *  root if it lands anywhere else — a notification may not open a foreign page. */
+const here = (url) => {
+  const root = new URL("/", self.location.origin);
+  try {
+    const target = new URL(url || "/", self.location.origin);
+    return target.origin === root.origin ? target : root;
+  } catch {
+    return root;
+  }
+};
+
 self.addEventListener("install", () => self.skipWaiting());
 
 self.addEventListener("activate", (event) => {
@@ -66,7 +78,7 @@ self.addEventListener("push", (event) => {
       icon: "/icon-192.png",
       badge: "/icon-32.png",
       timestamp: Date.now(),
-      data: { url: data.url || "/" },
+      data: { url: here(data.url).href },
     });
     // The home-screen badge is the only trace left once a notification is
     // dismissed; the page recomputes it from the session list when it opens.
@@ -76,7 +88,7 @@ self.addEventListener("push", (event) => {
 
 self.addEventListener("notificationclick", (event) => {
   event.notification.close();
-  const target = new URL(event.notification.data?.url || "/", self.location.origin);
+  const target = here(event.notification.data?.url);
   event.waitUntil((async () => {
     const clients = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
     // An open workbench is focused and pointed at the session, rather than