privateboard 0.1.9 → 0.1.11

package/public/index.html

@@ -158,6 +158,7 @@
   }
   .brand-mark .bg { fill: var(--lime); }
   .brand-mark .fg { fill: var(--bg); }
+
   @keyframes pulse { 0%, 60% { opacity: 1; } 80% { opacity: 0.4; } }
 
   /* ═══════════════════════════════════════════
@@ -568,19 +569,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  /* Time tag · same register as `.row-time` in the rooms list
-     (10.5px mono, text-dim) so both lists read as one consistent
-     "title · time" rhythm. Earlier this was 9px uppercase faint —
-     visually a different "kind of metadata" from the rooms time. */
-  .agent-row .agent-row-time {
-    color: var(--text-dim);
-    font-size: 10.5px;
-    font-family: var(--mono);
-    letter-spacing: 0;
-    text-transform: none;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
+  /* Time tag removed · the agent-row no longer surfaces creation
+     time. The space is given back to the title (which can now use
+     the full row width minus the hover-revealed pin button). */
   .agent-row .agent-row-subtitle {
     font-family: var(--mono);
     font-size: 9.5px;
@@ -934,13 +925,10 @@
   .agents-section-header.pinned { color: var(--text-soft); }
 
   /* ─── Pin toggle (per-row · hover-revealed for non-pinned) ───
-     Positioned absolutely so the in-flow time tag (.agent-row-time /
-     .row-time) sits flush against the right edge — same as the rooms
-     list. Earlier the pin took 22px (18 + 4 margin) of in-flow width
-     even when invisible (opacity:0 still occupies space), which shoved
-     the agent's "7h" tag inward compared to the rooms list and made
-     the two columns of timestamps look mis-aligned. The row-shell
-     ancestor needs `position: relative` for this to anchor correctly. */
+     Positioned absolutely so it overlays the right edge of the row
+     without taking in-flow width (opacity:0 alone would still
+     reserve 22px and shrink the title). The row-shell ancestor
+     needs `position: relative` for this to anchor correctly. */
   .agent-row-shell, .session-row-shell { position: relative; }
   .row-top-line .pin-toggle,
   .agent-row-top-line .pin-toggle {
@@ -968,23 +956,12 @@
   }
   .session-row:hover .pin-toggle,
   .agent-row:hover .pin-toggle { opacity: 0.55; }
-  /* Hover · hide the in-flow time so the absolutely-positioned pin
-     button has the right edge to itself. Same pattern as the rooms
-     list (`.session-row-shell:hover .row-time { visibility: hidden }`). */
-  .agent-row-shell:hover .agent-row-time { visibility: hidden; }
   .pin-toggle:hover { opacity: 1 !important; color: var(--lime); }
   .session-row.pinned .pin-toggle,
   .agent-row.pinned .pin-toggle {
     opacity: 1;
     color: var(--lime);
   }
-  /* Pinned · the lime pin glyph stays visible permanently, so the
-     in-flow time tag has to hide too — otherwise the two stack on
-     the right edge (pin + "7h" overlapping in the same 18px slot).
-     The hover rule above only handles hover; pinned rows live in
-     "always visible" state and need their own hide. */
-  .agent-row.pinned .agent-row-time,
-  .session-row.pinned .row-time { visibility: hidden; }
 
   /* The shell wraps the link + delete button as siblings so the click on
      the X button doesn't get absorbed by the anchor's navigation.
@@ -1038,10 +1015,8 @@
     z-index: 2;
   }
   .session-row-shell:hover .row-delete { display: flex; }
-  /* On hover the timestamp hides so the delete button doesn't double
-     up. The subtitle reserves right padding so its ellipsis stops
-     before the X. */
-  .session-row-shell:hover .row-time { visibility: hidden; }
+  /* Subtitle reserves right padding so its ellipsis stops before
+     the absolutely-positioned X delete button on hover. */
   .session-row-shell .row-subtitle { padding-right: 26px; }
   .row-delete:hover {
     border-color: var(--red);
@@ -1130,17 +1105,14 @@
     font-family: var(--sans);
     letter-spacing: -0.005em;
   }
-  .row-time {
-    font-size: 10.5px;
-    color: var(--text-dim);
-    flex-shrink: 0;
-    font-family: var(--mono);
-  }
-  .session-row-shell[data-status="live"] .row-time {
+  /* Live indicator · was a `● ` prefix on the (now-removed) .row-time
+     tag. Migrated to a title prefix so live rooms still read at a
+     glance. The rest of the title stays its usual colour. */
+  .session-row-shell[data-status="live"] .row-title::before {
+    content: "● ";
     color: var(--lime);
     font-weight: 700;
   }
-  .session-row-shell[data-status="live"] .row-time::before { content: "● "; }
 
   .row-subtitle {
     font-size: 11.5px;
@@ -1845,8 +1817,7 @@
   .notes-item-passage { padding-right: 30px; }
   /* On hover · hide the trailing time tag so the delete button
      occupies the right-edge slot cleanly. visibility:hidden keeps
-     the layout box (the meta row doesn't reflow either). Same
-     pattern as `.session-row-shell:hover .row-time` in rooms. */
+     the layout box (the meta row doesn't reflow either). */
   .notes-item:hover .notes-item-time { visibility: hidden; }
   .notes-item-link {
     display: block;
@@ -2841,6 +2812,11 @@
     text-transform: uppercase;
     margin-bottom: 4px;
   }
+  .brief-kicker-sep {
+    color: var(--text-faint);
+    opacity: 0.5;
+    margin: 0 2px;
+  }
   .brief-title {
     font-family: var(--font-human);
     font-size: 15px;
@@ -2896,6 +2872,25 @@
   .brief-meta-words.is-long     { color: var(--red); opacity: 0.85; }
   .brief-meta-words.is-too-long { color: var(--red); font-weight: 700; }
 
+  /* Mode chip · folded into the brief-meta-row alongside the
+     authors / word-count pieces. The standalone .brief-banner
+     strip that used to host this was retired (too tall for the
+     info it carried). Renders as a tiny mono pill so the report
+     type ("REPORT" / "MAGAZINE" / "NEWSPAPER" / "SLIDES") is
+     visible at a glance without competing for emphasis with the
+     title or kicker. */
+  .brief-meta-type {
+    font-family: var(--mono);
+    font-size: 8.5px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-soft);
+    border: 0.5px solid var(--line-bright, var(--line));
+    padding: 1px 6px;
+    white-space: nowrap;
+  }
+
   /* Signatures · folded into the meta line, no top border */
   .brief-signed {
     display: inline-flex;
@@ -3206,6 +3201,98 @@
   }
   .brief-stat-fact.brief-stat-live { color: var(--lime); }
 
+  .brief-llm-trace {
+    border-top: 1px solid var(--line);
+    padding-top: 10px;
+  }
+  .brief-llm-toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 0;
+    border: 0;
+    background: transparent;
+    color: var(--text-soft);
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-align: left;
+    cursor: pointer;
+  }
+  .brief-llm-toggle:hover { color: var(--lime); }
+  .brief-llm-toggle-mark {
+    color: var(--lime);
+    font-weight: 700;
+  }
+  .brief-llm-toggle-meta {
+    margin-left: auto;
+    color: var(--text-faint);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    text-transform: none;
+  }
+  .brief-llm-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 8px;
+  }
+  .brief-llm-row {
+    padding: 10px 0;
+    border-top: 1px solid var(--line-bright);
+  }
+  .brief-llm-row:first-child { border-top: 0; }
+  .brief-llm-row-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 7px;
+  }
+  .brief-llm-row-title {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text);
+  }
+  .brief-llm-row.is-running .brief-llm-row-title { color: var(--lime); }
+  .brief-llm-row.is-failed .brief-llm-row-title { color: var(--red); }
+  .brief-llm-row-meta {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    white-space: nowrap;
+  }
+  .brief-llm-error {
+    margin-bottom: 8px;
+    color: var(--red);
+    font-family: var(--mono);
+    font-size: 10px;
+    line-height: 1.5;
+  }
+  .brief-llm-output {
+    max-height: 220px;
+    overflow: auto;
+    margin: 0;
+    padding: 10px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    color: var(--text-soft);
+    font-family: var(--mono);
+    font-size: 11px;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .brief-llm-empty {
+    color: var(--text-faint);
+    font-style: italic;
+  }
+
   /* Brief error / interrupted state · retry button matches the
      supplement-row treatment but uses red accent for "something went
      wrong, click to retry" affordance. */
@@ -7558,6 +7645,12 @@
     border-color: var(--lime-dim);
   }
 
+  /* Voice mode toggle now reuses `.ap-skill-row-toggle .cmp-ws-toggle`
+     vocabulary (see agent-profile.css). The previous `.cmp-voice-
+     switch` rules are gone — the toolbar fitting in `.cmp-toolbar
+     .cmp-ws-toggle` above already covers the voice toggle since
+     they share the same class set. */
+
   .cmp-go {
     flex-shrink: 0;
     width: 36px; height: 36px;
@@ -7575,6 +7668,17 @@
     transform: translateX(1px);
   }
   .cmp-go.busy { opacity: 0.55; pointer-events: none; }
+  /* SVG icon · both the room composer's "Convene" button and the
+     agent composer's "Generate director" button use the same
+     Lucide `arrow-right` (clean stroke, consistent across fonts).
+     Stroke colour inherits from the button's `color` (var(--bg)),
+     so the icon reads as ink on the lime fill. The legacy
+     `.cmp-go-arrow` text-glyph rule below stays for the `…` busy
+     state and any other text fallbacks. */
+  .cmp-go-icon {
+    display: block;
+    flex-shrink: 0;
+  }
   .cmp-go-arrow {
     font-size: 16px;
     line-height: 1;
@@ -8119,6 +8223,25 @@
     text-transform: uppercase;
     color: var(--text-faint);
   }
+  /* Stop button · sits at the right edge of the generating header.
+     Shares the bracketed mono register the rest of the composer
+     uses ([ Generate ] / [ Cancel ]) so it reads as a peer action.
+     Clicking aborts the in-flight controller via discardAgentSpec. */
+  .ag-gen-stop {
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: var(--text-soft);
+    background: transparent;
+    border: 0;
+    padding: 4px 8px;
+    cursor: pointer;
+    align-self: center;
+    transition: color 0.12s;
+  }
+  .ag-gen-stop:hover { color: var(--red, #C85A5A); }
+  .ag-gen-stop:active { color: var(--red, #C85A5A); }
   .ag-gen-stages {
     list-style: none;
     margin: 0;
@@ -9291,6 +9414,7 @@
 <link rel="stylesheet" href="agent-overlay.css">
 <!-- Shared /api/models cache · loads first so every picker reads the
      same source. See models-cache.js for the API surface. -->
+<script src="i18n.js" defer></script>
 <script src="models-cache.js" defer></script>
 <script src="agent-overlay.js" defer></script>
 <link rel="stylesheet" href="room-settings.css">
@@ -9303,7 +9427,10 @@
 <link rel="stylesheet" href="new-agent.css">
 <script src="new-agent.js" defer></script>
 <link rel="stylesheet" href="user-settings.css">
+<script type="module" src="keys-store.js"></script>
 <script src="user-settings.js" defer></script>
+<link rel="stylesheet" href="voice-replay.css">
+<script src="voice-replay.js" defer></script>
 <script src="auto-hide-scroll.js" defer></script>
 <link rel="stylesheet" href="onboarding.css">
 <script src="onboarding.js" defer></script>
@@ -9336,7 +9463,7 @@
 <div class="sys-notice" data-sys-notice hidden>
   <span class="sys-notice-mark">▸</span>
   <span class="sys-notice-text" data-sys-notice-text></span>
-  <button type="button" class="sys-notice-close" data-sys-notice-close aria-label="Dismiss">✕</button>
+  <button type="button" class="sys-notice-close" data-sys-notice-close data-i18n-aria="sys_notice_dismiss" aria-label="Dismiss">✕</button>
 </div>
 
 <div class="control">
@@ -9364,20 +9491,20 @@
             <rect class="fg" x="2"  y="10" width="1"  height="4"/>
             <rect class="fg" x="13" y="10" width="1"  height="4"/>
           </svg>
-          <span class="sidebar-brand-name">PRIVATEBOARD</span>
+          <span class="sidebar-brand-name" data-i18n="brand_privateboard">PRIVATEBOARD</span>
         </a>
-        <button type="button" class="sidebar-collapse-btn" data-sidebar-collapse aria-label="Collapse sidebar" title="Collapse sidebar"></button>
+        <button type="button" class="sidebar-collapse-btn" data-sidebar-collapse data-i18n-title="sidebar_collapse" aria-label="Collapse sidebar" title="Collapse sidebar"></button>
       </div>
 
       <div class="sidebar-tabs" role="tablist">
         <a href="#" class="sidebar-tab active" data-sidebar-tab="rooms" role="tab" aria-selected="true">
           <i class="ic ic-rooms ico"></i>
-          <span>Rooms</span>
+          <span data-i18n="sidebar_tab_rooms">Rooms</span>
           <span class="count" data-sidebar-tab-count="rooms">0</span>
         </a>
         <a href="#" class="sidebar-tab" data-sidebar-tab="agents" role="tab" aria-selected="false">
           <i class="ic ic-agents ico"></i>
-          <span>Agents</span>
+          <span data-i18n="sidebar_tab_agents">Agents</span>
           <span class="count" data-sidebar-tab-count="agents">0</span>
         </a>
       </div>
@@ -9385,14 +9512,14 @@
       <!-- ─── ROOMS PANEL ─── -->
       <div class="sidebar-panel" data-sidebar-panel="rooms">
 
-      <a href="#convene" class="new-btn" data-convene-trigger>New room</a>
+      <a href="#convene" class="new-btn" data-convene-trigger data-i18n="sidebar_new_room">New room</a>
       <!-- "All Reports" cross-room index · opens a Perplexity-Discover-
            style grid of every brief any room has produced. Sits below
            "New room" so it reads as a peer destination, not a list
            item, with a square glyph echoing the dashboard glyphs
            elsewhere in the sidebar. -->
       <a href="#" class="new-btn nav-reports" data-reports-trigger>
-        <span class="nav-label">All Reports</span>
+        <span class="nav-label" data-i18n="sidebar_all_reports">All Reports</span>
         <span class="nav-count" data-reports-count hidden></span>
       </a>
       <!-- "All Notes" · chairman's-notes index. Sits directly below
@@ -9402,7 +9529,7 @@
            Reports' FileText glyph. The data-notes-count badge updates
            live as new notes are saved or deleted. -->
       <a href="#" class="new-btn nav-notes" data-notes-trigger>
-        <span class="nav-label">All Notes</span>
+        <span class="nav-label" data-i18n="sidebar_all_notes">All Notes</span>
         <span class="nav-count" data-notes-count hidden></span>
       </a>
 
@@ -9415,7 +9542,7 @@
       <!-- ─── AGENTS PANEL ─── -->
       <div class="sidebar-panel" data-sidebar-panel="agents" hidden>
 
-        <a href="#" class="new-btn" data-agent-composer-trigger>New agent</a>
+        <a href="#" class="new-btn" data-agent-composer-trigger data-i18n="sidebar_new_agent">New agent</a>
 
         <div class="agents-scroll">
           <!-- Rendered dynamically by app.renderSidebarAgents() from
@@ -9429,16 +9556,16 @@
           <div class="user-av" data-user-avatar>K</div>
           <div class="user-info">
             <div class="user-name" data-user-name>—</div>
-            <div class="user-meta" data-user-meta>// host</div>
+            <div class="user-meta" data-user-meta data-i18n="sidebar_host">// host</div>
           </div>
         </a>
-        <a href="#" class="icon-btn" title="Settings" data-user-settings-trigger>⚙</a>
+        <a href="#" class="icon-btn" data-i18n-title="settings_title" data-user-settings-trigger>⚙</a>
       </div>
 
     </aside>
 
     <!-- Resizable handle: sidebar | main -->
-    <div class="col-resizer" data-resize data-var="--sidebar-w" data-side="left" data-min="220" data-max="480" title="drag to resize"></div>
+    <div class="col-resizer" data-resize data-var="--sidebar-w" data-side="left" data-min="220" data-max="480" data-i18n-title="col_resize"></div>
 
     <!-- ═══════════════ MAIN: room view + agent profile view ═══════════════ -->
     <main class="main">
@@ -9461,20 +9588,20 @@
           <div class="speaking-queue" id="speaking-queue">
             <div class="queue-head">
               <div class="queue-head-expanded">
-                <span class="label">speaking queue</span>
-                <span class="mode-tag">mode: <span class="v">constructive</span></span>
+                <span class="label" data-i18n="queue_speaking_queue">speaking queue</span>
+                <span class="mode-tag"><span data-i18n="queue_mode">mode:</span> <span class="v">constructive</span></span>
               </div>
               <div class="queue-head-collapsed" data-queue-collapsed>
                 <!-- populated by app.renderQueue() · summary follows
                      the real queue: speaking, pending, or idle. -->
               </div>
-              <button type="button" class="queue-toggle" title="collapse / expand" aria-expanded="true">
+              <button type="button" class="queue-toggle" data-i18n-title="queue_toggle" aria-expanded="true">
                 <span class="chev">▼</span>
               </button>
             </div>
             <ul class="queue-list" data-queue-list></ul>
             <div class="queue-foot" data-queue-foot>
-              <span class="queue-foot-hint" data-queue-foot-hint>type to interject · <kbd>@</kbd> to direct · the chair files the round-end vote in chat</span>
+              <span class="queue-foot-hint" data-queue-foot-hint data-i18n-html="queue_foot_hint">type to interject · <kbd>@</kbd> to direct · the chair files the round-end vote in chat</span>
             </div>
           </div>
 
@@ -9487,12 +9614,12 @@
                  brackets) but at a tighter scale. Adjourn turns warn
                  on hover to flag its destructiveness. -->
             <div class="input-bar-actions">
-              <button type="button" class="ib-action ib-pause" data-pause aria-label="Pause discussion" data-tip="Pause · you can resume later"></button>
-              <button type="button" class="ib-action ib-adjourn" data-adjourn aria-label="Adjourn the room" data-tip="Adjourn · file the report and end"></button>
+              <button type="button" class="ib-action ib-pause" data-pause data-i18n-title="ib_pause_tip" data-i18n-aria="ib_pause_label" data-i18n-tip="ib_pause_tip"></button>
+              <button type="button" class="ib-action ib-adjourn" data-adjourn data-i18n-title="ib_adjourn_tip" data-i18n-aria="ib_adjourn_label" data-i18n-tip="ib_adjourn_tip"></button>
             </div>
             <div class="input-wrap">
-              <input type="text" placeholder="interject anytime · @first_p to direct a director..." data-send-input>
-              <button class="send-btn" data-send-button>[ Send ]</button>
+              <input type="text" data-i18n-placeholder="send_placeholder" placeholder="interject anytime · @first_p to direct a director..." data-send-input>
+              <button class="send-btn" data-send-button data-i18n="send_button">[ Send ]</button>
             </div>
           </footer>
 
@@ -9512,6 +9639,7 @@
             </div>
             <div class="adjourned-bar-actions">
               <a href="#" class="ghost-btn" data-room-export>[↓] Export</a>
+              <a href="#" class="ghost-btn" data-room-replay>[♪] Voice Replay</a>
               <a href="#" class="ghost-btn" data-room-followup>[→] Convene Follow-up</a>
             </div>
           </footer>
@@ -9546,7 +9674,7 @@
          below the topbar / brand logo, where the sidebar's own header
          sat before collapse. Frosted black glass with a 3-line
          hamburger glyph. -->
-    <button type="button" class="sidebar-expand-btn" data-sidebar-expand aria-label="Expand sidebar" title="Expand sidebar">
+    <button type="button" class="sidebar-expand-btn" data-sidebar-expand data-i18n-title="sidebar_expand">
       <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
         <line x1="2.5" y1="4.25"  x2="13.5" y2="4.25"/>
         <line x1="2.5" y1="8"     x2="13.5" y2="8"/>
@@ -9795,17 +9923,37 @@
     const lsGet = (k) => { try { return localStorage.getItem(k); } catch (_) { return null; } };
     const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch (_) {} };
 
-    /* Fall back to the first session row in the sidebar when we have
-       no explicit user choice. Ordering matches DOM order (live first,
-       then paused, then adjourned), which is the same ordering the user
-       sees — picking [0] always means "the one at the top." Returns null
-       when the sidebar has no rooms at all. */
-    function firstRoomId() {
-      const row = document.querySelector(".session-row-shell[data-room-id]");
-      return row ? row.dataset.roomId : null;
+    /* Truth source for "does this room exist?" is `window.app.rooms`,
+       not the DOM. The sidebar may not have rendered yet on first
+       restore (app.init's loadInitial is async and runs concurrently
+       with our DOMContentLoaded restore), and a DOM-empty sidebar
+       does NOT mean "user has no rooms." Querying the in-memory
+       array avoids the race entirely. Returns null until app data is
+       loaded, in which case the caller defers. */
+    function appRoomsLoaded() {
+      return !!(window.app && Array.isArray(window.app.rooms));
+    }
+    function appRoomExists(id) {
+      return appRoomsLoaded() && window.app.rooms.some((r) => r && r.id === id);
+    }
+    function appFirstRoomId() {
+      if (!appRoomsLoaded()) return null;
+      const live   = window.app.rooms.filter((r) => r.status === "live");
+      const paused = window.app.rooms.filter((r) => r.status === "paused");
+      const adj    = window.app.rooms.filter((r) => r.status === "adjourned");
+      const ordered = [...live, ...paused, ...adj];
+      return ordered.length > 0 ? ordered[0].id : null;
     }
 
+    /* applyRoomsSubState may run BEFORE app.init's loadInitial fetch
+       completes — in that case window.app.rooms is undefined and any
+       existence check is a lie. Defer with a short retry until data
+       lands; only then apply the sub-state. The retry is gated by a
+       generation token so a later applyRoomsSubState call cancels
+       any in-flight retry from an earlier one. */
+    let _applyGen = 0;
     function applyRoomsSubState(sub) {
+      const gen = ++_applyGen;
       // Make sure the room main view is visible (in case the agent
       // profile main view was up). setComposerMode also does this when
       // sub === "new"; doing it here covers the roomId branch too.
@@ -9833,22 +9981,30 @@
         }
         return;
       }
-      // Navigate to the saved room — but only if it still exists in
-      // the sidebar list. A stale id (deleted room, never-existed)
-      // falls back to the most-recently-viewed room, then the first
-      // row, before resorting to the composer. Without the fallback,
-      // a deleted-room id would land the user on a blank composer
-      // every tab-switch even when other rooms are available.
-      let exists = !!document.querySelector(`.session-row-shell[data-room-id="${sub}"]`);
-      if (!exists) {
+      // Saved sub is a roomId. We must consult the in-memory data
+      // (not DOM); if it isn't loaded yet, defer rather than blow
+      // away ROOMS_KEY with "new" — that's the bug that was eating
+      // the user's last selection on every refresh.
+      if (!appRoomsLoaded()) {
+        let attempts = 0;
+        const tick = () => {
+          if (gen !== _applyGen) return; // a newer call superseded us
+          if (appRoomsLoaded()) { applyRoomsSubState(sub); return; }
+          if (++attempts < 40) setTimeout(tick, 100); // up to ~4s
+        };
+        setTimeout(tick, 100);
+        return;
+      }
+      // Data loaded · resolve existence against window.app.rooms.
+      // Stale id (deleted, never-existed) falls back to last-opened,
+      // then first row, before resorting to the composer.
+      let resolved = sub;
+      if (!appRoomExists(resolved)) {
         const last = lsGet(ROOMS_LAST_KEY);
-        const candidate = (last && document.querySelector(`.session-row-shell[data-room-id="${last}"]`))
-          ? last
-          : firstRoomId();
+        const candidate = (last && appRoomExists(last)) ? last : appFirstRoomId();
         if (candidate) {
-          sub = candidate;
+          resolved = candidate;
           lsSet(ROOMS_KEY, candidate);
-          exists = true;
         } else {
           lsSet(ROOMS_KEY, "new");
           if (window.app && typeof window.app.setComposerMode === "function") {
@@ -9857,17 +10013,17 @@
           return;
         }
       }
-      const want = "#/r/" + sub;
+      const want = "#/r/" + resolved;
       if (location.hash !== want) {
         location.hash = want;
-      } else if (window.app && window.app.currentRoomId !== sub && typeof window.app.openRoom === "function") {
-        window.app.openRoom(sub);
+      } else if (window.app && window.app.currentRoomId !== resolved && typeof window.app.openRoom === "function") {
+        window.app.openRoom(resolved);
       } else if (window.app && typeof window.app.markActiveRoom === "function") {
         // Both hash and currentRoomId already match — but the sidebar
         // session-row .active highlight may have been cleared by an
         // intervening agent-profile open (markActiveAgent wipes it).
         // Re-apply so the row reads as selected on tab return.
-        window.app.markActiveRoom(sub);
+        window.app.markActiveRoom(resolved);
       }
     }
 
@@ -9928,12 +10084,13 @@
         } else if (fromTabClick) {
           // No saved sub-state · fresh user clicking the tab. Prefer
           // the last actually-opened room so the tab feels populated
-          // instead of bouncing them to a blank composer.
+          // instead of bouncing them to a blank composer. Truth source
+          // is window.app.rooms (DOM may not have rendered yet).
           const last = lsGet(ROOMS_LAST_KEY);
-          if (last && document.querySelector(`.session-row-shell[data-room-id="${last}"]`)) {
+          if (last && appRoomExists(last)) {
             target = last;
           } else {
-            target = firstRoomId() || "new";
+            target = appFirstRoomId() || "new";
           }
         } else {
           target = "new"; // initial load with no history → composer

package/public/keys-store.js

@@ -0,0 +1,63 @@
+/**
+ * keys-store.js · canonical key-state module
+ *
+ * Loaded as <script type="module"> so it can be imported by vitest
+ * directly for unit-testing without a browser. The module also writes
+ * itself onto window.keysStore so the non-module user-settings.js IIFE
+ * can delegate to it at runtime.
+ *
+ * State lives HERE — user-settings.js must not maintain a parallel copy.
+ */
+
+export let keysMeta = {};
+
+/** Rebuild keysMeta from the server.  Replaces the whole object so callers
+ *  that hold a reference to the old snapshot see stale data — always read
+ *  via the exported binding, not a captured variable. */
+export async function fetchKeyMeta() {
+  try {
+    const r = await fetch("/api/keys");
+    if (!r.ok) return;
+    const data = await r.json();
+    const next = {};
+    for (const row of (data.keys || [])) next[row.provider] = row;
+    keysMeta = next;
+  } catch { /* keep last snapshot on network failure */ }
+}
+
+/** PUT (non-empty value) or DELETE (empty/whitespace) a single key.
+ *  Mirrors the resulting meta into keysMeta and returns it, or null on
+ *  error. */
+export async function setProviderKey(provider, value) {
+  try {
+    const trimmed = (value || "").trim();
+    const r = await fetch("/api/keys/" + encodeURIComponent(provider), {
+      method: trimmed ? "PUT" : "DELETE",
+      headers: trimmed ? { "content-type": "application/json" } : undefined,
+      body: trimmed ? JSON.stringify({ key: trimmed }) : undefined,
+    });
+    if (!r.ok) return null;
+    const meta = await r.json();
+    keysMeta[provider] = meta;
+    return meta;
+  } catch { return null; }
+}
+
+/** Returns only the configured providers (existence-check safe). */
+export function getConfiguredKeys() {
+  const out = {};
+  for (const [p, m] of Object.entries(keysMeta)) {
+    if (m && m.configured) out[p] = m;
+  }
+  return out;
+}
+
+// Expose globally for non-module scripts (user-settings.js IIFE).
+if (typeof window !== "undefined") {
+  window.keysStore = {
+    get keysMeta() { return keysMeta; },
+    fetchKeyMeta,
+    setProviderKey,
+    getConfiguredKeys,
+  };
+}