@timqi/pier 0.0.29 → 0.1.0

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-Dqdb-Eqt.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-DzmMzvi_.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="Send" 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,66 +175,50 @@
            (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 -->
           <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-plane" data-icon="Send" 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
@@ -283,8 +239,8 @@
     </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>
+    <button type="button" id="image-prev" aria-label="Previous image" class="lightbox-nav left-2"><span data-icon="ChevronLeft" class="h-6 w-6"></span></button>
+    <button type="button" id="image-next" aria-label="Next image" class="lightbox-nav right-2"><span data-icon="ChevronRight" 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/server.js

@@ -76,6 +76,15 @@ export function createServer({ factory, router, hub, sessions: state, config, pr
     // every client shows the same attention state. Streaming → idle is the
     // trigger — same transition the client notification uses — and it needs a
     // start we witnessed, so a session that boots idle stays untouched.
+    //
+    // Only for the workbench's own sessions: an IM turn was already delivered to
+    // the chat it came from and a subagent's to its supervisor by callback, so no
+    // look here is owed for either — and none could clear the mark either, since
+    // the ack needs the session on screen. Marked anyway, they were a flag that
+    // only ever accumulated, and every reader had to subtract them again. The two
+    // facts are the ones the list already draws a row from (`present` below): no
+    // durable conversation row, and not a session a run made for itself.
+    const workbenchOwn = (id) => (channelOf?.(id) ?? "web") === "web" && !(taskSessions?.().has(id) ?? false);
     const runningNow = new Set();
     hub.subscribeWorkspace((e) => {
         if (e.type !== "session-state")
@@ -86,6 +95,8 @@ export function createServer({ factory, router, hub, sessions: state, config, pr
         }
         if (!runningNow.delete(e.sessionId))
             return;
+        if (!workbenchOwn(e.sessionId))
+            return;
         state.setUnread(e.sessionId, true);
         hub.emitWorkspace({ type: "sessions-changed" });
     });
@@ -135,10 +146,14 @@ export function createServer({ factory, router, hub, sessions: state, config, pr
         const sessions = await listSessions();
         for (const s of sessions)
             nascent.delete(s.id);
-        // A session created but never prompted would otherwise be listed forever.
-        for (const [id, n] of nascent)
-            if (Date.now() - n.createdAt > 86_400_000)
+        // A session created but never prompted would otherwise be listed forever —
+        // and, since creation ranks it, hold a working-set slot forever too.
+        for (const [id, n] of nascent) {
+            if (Date.now() - n.createdAt > 86_400_000) {
                 nascent.delete(id);
+                state.forget(id);
+            }
+        }
         const owned = taskSessions?.() ?? new Set();
         return [
             ...[...nascent].map(([id, n]) => ({ id, ...n })),
@@ -158,9 +173,9 @@ export function createServer({ factory, router, hub, sessions: state, config, pr
         activeRuns: active.get(s.id) ?? 0,
     });
     // The rail's top rows are maintained here and nowhere else: a session a
-    // human speaks to and that is not in the working set already takes the front
-    // slot (web/session-state.ts). No route — there is no gesture to make, and
-    // an IM message has no browser to make it from.
+    // human speaks to — or creates, below — and that is not in the working set
+    // already takes the front slot (web/session-state.ts). No route — there is no
+    // gesture to make, and an IM message has no browser to make it from.
     router.onSpokenTo((id) => {
         if (state.promote(id))
             hub.emitWorkspace({ type: "sessions-changed" });
@@ -170,15 +185,32 @@ export function createServer({ factory, router, hub, sessions: state, config, pr
         const active = activeRuns();
         return c.json((await allSessions()).map((s) => present(s, flags.get(s.id), active)));
     });
+    // What was said, across every session: the palette's Messages section. The
+    // factory owns the index and the ranking; an empty query is an empty answer,
+    // not a listing of everything.
+    app.get("/api/search", async (c) => {
+        const q = (c.req.query("q") ?? "").trim();
+        return c.json({ hits: q ? await factory.search(q) : [] });
+    });
     app.post("/api/sessions", async (c) => {
         const body = await c.req.json().catch(() => ({}));
         // A session always starts in its project directory — never in pier's own.
         if (typeof body.cwd !== "string" || !body.cwd)
             return c.json({ error: "cwd required" }, 400);
-        const session = await factory.create({ cwd: body.cwd });
+        // The seam records the real path (agent/pi.ts), and the row below stands in
+        // for a listing until Pi persists the session — up to a day for one never
+        // prompted. Resolved here too, or that row is the one place a directory
+        // reached through a symlink still looks like a project of its own.
+        const cwd = await realpath(body.cwd).catch(() => body.cwd);
+        const session = await factory.create({ cwd });
         const createdAt = Date.now();
-        nascent.set(session.id, { cwd: body.cwd, createdAt });
+        nascent.set(session.id, { cwd, createdAt });
         router.attach({ channelId: "web", conversationId: session.id }, session);
+        // Created is as good as spoken to: the person who clicked New is about to
+        // type into it, and a row born below the working set would jump on the
+        // first message. Ghosts give the slot back (`ensureLoadable`, the expiry
+        // above).
+        state.promote(session.id);
         hub.emitWorkspace({ type: "sessions-changed" });
         return c.json({ id: session.id }, 201);
     });

package/dist/web/session-state.js

@@ -33,11 +33,11 @@
 // loses the entire set when the process dies mid-write — a truncated file reads
 // back as "nothing on top", which is indistinguishable from a fresh install.
 import { pierDb, transact } from "../db.js";
-/** How many rows the rail keeps on top. Larger than the handful anybody
- *  switches between (3–6), and small enough that every member is somewhere a
- *  hand can see: a set as deep as the page (20) would count a row nobody has
- *  scrolled to as "already up there" and never bring it back. */
-export const WORKING_SET = 8;
+/** How many rows the rail keeps on top. The handful anybody actually switches
+ *  between, and small enough that every member is somewhere a hand can see: a
+ *  set as deep as the page (20) would count a row nobody has scrolled to as
+ *  "already up there" and never bring it back. */
+export const WORKING_SET = 5;
 export class SessionStateStore {
     #db;
     constructor(db = pierDb()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timqi/pier",
-  "version": "0.0.29",
+  "version": "0.1.0",
   "description": "A self-hosted workspace for coding agents: web workbench and IM channels in front of Pi sessions",
   "license": "AGPL-3.0-only",
   "repository": "github:timqi/pier",
@@ -50,6 +50,7 @@
     "dompurify": "^3.4.14",
     "highlight.js": "^11.12.0",
     "hono": "^4.13.3",
+    "lucide": "1.43.0",
     "marked": "^18.0.10",
     "typebox": "^1.3.7"
   }