@oddessentials/agent-guild 0.25.0 → 0.26.0

package/web/index.html

@@ -29,27 +29,34 @@
       </div>
       <span id="upgrade-note" class="upgrade-note" hidden></span>
       <button id="upgrade" class="btn upgrade" type="button" hidden></button>
-      <button id="appearance" class="btn appearance" type="button" popovertarget="appearance-menu" aria-haspopup="dialog">Appearance</button>
-      <div id="appearance-menu" class="appearance-menu" popover role="dialog" aria-label="Appearance">
-        <fieldset id="skin-choices"><legend>Skin</legend></fieldset>
-        <fieldset>
-          <legend>Mode</legend>
-          <label class="choice"><input type="radio" name="theme" value="light"><span class="mode-light">Light</span></label>
-          <label class="choice"><input type="radio" name="theme" value="dark"><span class="mode-dark">Dark</span></label>
-        </fieldset>
-        <fieldset>
-          <legend>Sound</legend>
-          <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
-        </fieldset>
-        <fieldset id="voice-choice" hidden>
-          <legend>Voice</legend>
-          <label class="choice"><input id="voice" type="checkbox" name="voice"><span class="voice-input">Voice input</span></label>
-          <p class="voice-note">Adds a Dictate button to terminals. Your browser may send the audio to its maker, such as Google or Microsoft, to turn it into text. Nothing is heard until you press Dictate, and Enter is never pressed for you.</p>
-        </fieldset>
+      <button id="menu-toggle" class="btn menu-toggle" type="button" popovertarget="topbar-menu" aria-label="Menu" title="Menu"></button>
+      <div id="topbar-menu" class="topbar-menu menu" popover>
+        <button id="github-toggle" class="btn github-toggle" type="button" aria-controls="dock" aria-pressed="false">GitHub</button>
+        <button id="notes-open" class="btn notes-open" type="button" aria-controls="dock" aria-pressed="false">Notes</button>
+        <button id="settings" class="btn settings menu-button" type="button" popovertarget="settings-menu" aria-haspopup="dialog">Settings</button>
+        <div id="settings-menu" class="settings-menu menu" popover role="dialog" aria-label="Settings">
+          <fieldset id="skin-choices"><legend>Skin</legend></fieldset>
+          <fieldset>
+            <legend>Mode</legend>
+            <label class="choice"><input type="radio" name="theme" value="light"><span class="mode-light">Light</span></label>
+            <label class="choice"><input type="radio" name="theme" value="dark"><span class="mode-dark">Dark</span></label>
+          </fieldset>
+          <fieldset>
+            <legend>Sound</legend>
+            <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
+          </fieldset>
+          <fieldset id="voice-choice" hidden>
+            <legend>Voice</legend>
+            <label class="choice"><input id="voice" type="checkbox" name="voice"><span class="voice-input">Voice input</span></label>
+            <p class="voice-note">Adds a Dictate button to terminals. Your browser may send the audio to its maker, such as Google or Microsoft, to turn it into text. Nothing is heard until you press Dictate, and Enter is never pressed for you.</p>
+          </fieldset>
+        </div>
+        <button id="manager" class="btn manager menu-button" type="button" popovertarget="manager-menu" aria-haspopup="menu" hidden>Manager</button>
+        <div id="manager-menu" class="manager-menu menu" popover role="menu" aria-label="Session manager">
+          <button id="restart-manager" class="menu-item restart-manager" type="button" role="menuitem" hidden>Restart manager</button>
+          <button id="stop-manager" class="menu-item danger stop-manager" type="button" role="menuitem" title="Stop the session manager. This ends every session.">Stop manager</button>
+        </div>
       </div>
-      <button id="notes-open" class="btn notes-open" type="button" aria-haspopup="dialog">Notes</button>
-      <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
-      <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
     </div>
   </header>
 
@@ -58,10 +65,25 @@
       <div class="section-head">
         <h2 id="launch-heading">Start a session</h2>
         <div class="launch-tools">
-          <label class="cwd">
-            <span>Working folder</span>
-            <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
-          </label>
+          <div class="cwd">
+            <label for="cwd">Working folder</label>
+            <div class="cwd-field">
+              <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
+              <div class="cwd-tools">
+                <button id="cwd-pick" class="cwd-tool" type="button" aria-label="Choose a folder…" title="Connect to the session manager to choose folders" disabled>
+                  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                    <path d="M3.5 9V6.5A1.5 1.5 0 0 1 5 5h4l2 2h7.5A1.5 1.5 0 0 1 20 8.5V10"/>
+                    <path d="M3.5 10.5H21l-2.5 8H5.5z"/>
+                  </svg>
+                </button>
+                <button id="cwd-open" class="cwd-tool" type="button" aria-label="Open working folder in file manager" title="Connect to the session manager to open folders" disabled>
+                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                    <path d="M7 17L17 7M9 7h8v8"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
           <button id="github-open" class="btn github-open" type="button" aria-haspopup="dialog">Clone from GitHub…</button>
         </div>
       </div>
@@ -118,23 +140,110 @@
     <div class="panel-bar">
       <div class="panel-title">
         <span id="panel-icon" class="provider-icon small"></span>
-        <div>
-          <div id="panel-title" class="title"></div>
-          <div id="panel-sub" class="sub"></div>
-        </div>
+        <button id="panel-switch" class="panel-switch" type="button" popovertarget="panel-sessions" aria-haspopup="menu" title="Show another session here">
+          <span id="panel-title" class="title"></span>
+          <span id="panel-sub" class="sub"></span>
+        </button>
         <div id="panel-agents" class="agents"></div>
       </div>
       <div class="panel-actions">
+        <button id="panel-split" class="btn split" type="button" popovertarget="panel-sessions" aria-haspopup="menu" title="Show a second session beside this one" hidden>Split</button>
+        <button id="panel-swap" class="btn swap" type="button" hidden></button>
         <button id="panel-voice" class="btn voice" type="button" hidden aria-pressed="false" title="Speak into this terminal. Review the text, then press Enter yourself.">Dictate</button>
         <button id="panel-copy" class="btn" type="button" hidden aria-haspopup="dialog" title="Select and copy terminal text">Copy…</button>
         <button id="panel-stop" class="btn danger" type="button">Stop</button>
-        <button id="panel-close" class="btn" type="button" title="Hide the terminal. The session keeps running.">Hide</button>
+        <button id="panel-close" class="btn" type="button" title="Hide the terminals. The sessions keep running.">Hide</button>
       </div>
     </div>
-    <div id="terminal-host" class="terminal-host"></div>
+    <div id="panel-sessions" class="session-menu menu" popover role="menu" aria-label="Sessions"></div>
+    <div id="terminal-panes" class="terminal-panes">
+      <section class="terminal-pane" data-pane="0">
+        <div class="pane-head"><span class="pane-name"></span><button class="pane-close" type="button" aria-label="Close this terminal" title="Close this terminal. The session keeps running."></button></div>
+        <div class="terminal-host"></div>
+      </section>
+      <div id="pane-splitter" class="splitter pane-splitter" role="separator" tabindex="0" aria-label="Resize the terminals" hidden></div>
+      <section class="terminal-pane" data-pane="1" hidden>
+        <div class="pane-head"><span class="pane-name"></span><button class="pane-close" type="button" aria-label="Close this terminal" title="Close this terminal. The session keeps running."></button></div>
+        <div class="terminal-host"></div>
+      </section>
+    </div>
     <div id="voice-preview" class="voice-preview" hidden aria-live="polite"></div>
   </div>
 
+  <aside id="dock" class="dock" aria-label="Side panel" hidden>
+    <div id="dock-splitter" class="splitter dock-splitter" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize the side panel"></div>
+    <div class="dock-bar">
+      <div class="dock-tabs" role="tablist" aria-label="Side panel">
+        <button id="github-title" class="dock-tab github-tab" type="button" role="tab" aria-controls="github" aria-selected="false">GitHub</button>
+        <button id="notes-title" class="dock-tab notes-tab" type="button" role="tab" aria-controls="notes" aria-selected="false">Notes</button>
+      </div>
+      <button id="dock-close" class="btn" type="button">Close</button>
+    </div>
+    <section id="github" class="dock-panel github" role="tabpanel" aria-labelledby="github-title" hidden>
+      <p id="github-sub" class="dock-sub sub"></p>
+      <div id="github-accounts" class="github-accounts" hidden>
+        <div id="github-chips" class="github-chips" role="tablist" aria-label="Repository management accounts"></div>
+        <button id="github-add" class="btn github-add" type="button">Add account</button>
+      </div>
+      <div id="github-picker" class="github-picker" hidden>
+        <div class="github-combo">
+          <input id="github-repo" type="text" role="combobox" aria-label="Repository" aria-autocomplete="list" aria-expanded="false" aria-controls="github-repo-list" placeholder="Search repositories" spellcheck="false" autocomplete="off">
+          <ul id="github-repo-list" class="github-repo-list" role="listbox" aria-label="Repositories" hidden></ul>
+        </div>
+        <button id="github-repo-reload" class="btn" type="button" title="Load the repositories of every account again">Reload</button>
+      </div>
+      <p id="github-picker-note" class="github-picker-note" hidden></p>
+      <div id="github-views" class="github-views" role="tablist" aria-label="GitHub views" hidden>
+        <button id="github-view-repos" class="github-view" type="button" role="tab" aria-controls="github-repos" aria-selected="true" data-view="repos" aria-label="Repositories"><span class="long">Repositories</span><span class="short" aria-hidden="true">Repos</span></button>
+        <button id="github-view-issues" class="github-view" type="button" role="tab" aria-controls="github-issues" aria-selected="false" data-view="issues" tabindex="-1">Issues</button>
+        <button id="github-view-actions" class="github-view" type="button" role="tab" aria-controls="github-runs" aria-selected="false" data-view="actions" tabindex="-1" aria-label="Actions">Actions<span id="github-running" class="github-running" hidden></span></button>
+        <button id="github-view-pulls" class="github-view" type="button" role="tab" aria-controls="github-pulls" aria-selected="false" data-view="pulls" tabindex="-1" aria-label="Pull requests"><span class="long">Pull requests</span><span class="short" aria-hidden="true">PRs</span></button>
+      </div>
+      <div id="github-repos" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-repos">
+        <section id="github-card" class="github-card" aria-live="polite" hidden></section>
+        <div id="github-status" class="github-status" hidden></div>
+        <div id="github-tools" class="history-tools github-tools" hidden>
+          <input id="github-filter" type="search" placeholder="Filter repositories" aria-label="Filter repositories" spellcheck="false" autocomplete="off">
+          <button id="github-refresh" class="btn" type="button">Refresh</button>
+          <button id="github-new" class="btn" type="button" aria-expanded="false" aria-controls="github-create">New repository</button>
+        </div>
+        <form id="github-create" class="github-card github-create" hidden>
+          <h3>New repository</h3>
+          <div class="github-fields">
+            <label><span>Owner</span><select id="github-create-owner"></select></label>
+            <label><span>Name</span><input id="github-create-name" type="text" required maxlength="100" pattern="[A-Za-z0-9._\-]+" spellcheck="false" autocomplete="off" placeholder="my-project"></label>
+            <label class="wide"><span>Description</span><input id="github-create-description" type="text" maxlength="350" autocomplete="off" placeholder="Optional"></label>
+          </div>
+          <div class="github-options">
+            <label><input id="github-create-private" type="checkbox" checked> Private</label>
+            <label><input id="github-create-readme" type="checkbox" checked> Start with a README</label>
+            <label><input id="github-create-clone" type="checkbox" checked> <span id="github-create-clone-label">Clone it</span></label>
+          </div>
+          <p id="github-create-error" class="github-error" role="alert" hidden></p>
+          <div class="github-actions">
+            <button id="github-create-submit" class="btn primary" type="submit">Create repository</button>
+            <button id="github-create-cancel" class="btn" type="button">Cancel</button>
+          </div>
+        </form>
+        <div id="github-list" class="history-list" role="list"></div>
+        <p id="github-note" class="models-note" hidden></p>
+      </div>
+      <div id="github-issues" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-issues" hidden></div>
+      <div id="github-runs" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-actions" hidden></div>
+      <div id="github-pulls" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-pulls" hidden></div>
+      <div id="github-clone-into" class="history-form github-form">
+        <label for="github-parent">Clone into</label>
+        <input id="github-parent" type="text" placeholder="Folder that holds your clones" spellcheck="false" autocomplete="off">
+      </div>
+    </section>
+    <section id="notes" class="dock-panel notes-panel" role="tabpanel" aria-labelledby="notes-title" hidden>
+      <p id="notes-sub" class="dock-sub sub" aria-live="polite">Saved in this browser as you type</p>
+      <div class="dock-body">
+        <textarea id="notes-text" class="notes-text" aria-labelledby="notes-title" aria-describedby="notes-sub" autocomplete="off" placeholder="Prompts, commands, to-dos: anything you want to keep at hand"></textarea>
+      </div>
+    </section>
+  </aside>
+
   <dialog id="terminal-copy" class="terminal-copy" aria-labelledby="terminal-copy-title">
     <div class="terminal-copy-bar">
       <div class="terminal-copy-heading">
@@ -204,19 +313,6 @@
     <p id="changelog-status" class="news-status" hidden></p>
   </dialog>
 
-  <dialog id="notes" class="news-panel notes-panel" aria-labelledby="notes-title">
-    <div class="news-bar">
-      <div class="news-heading">
-        <h2 id="notes-title">Notes</h2>
-        <p id="notes-sub" class="sub" aria-live="polite">Saved in this browser as you type</p>
-      </div>
-      <button id="notes-close" class="btn" type="button">Close</button>
-    </div>
-    <div class="news-body">
-      <textarea id="notes-text" class="notes-text" aria-labelledby="notes-title" aria-describedby="notes-sub" autocomplete="off" placeholder="Prompts, commands, to-dos: anything you want to keep at hand"></textarea>
-    </div>
-  </dialog>
-
   <dialog id="history" class="models history" aria-labelledby="history-title">
     <div class="models-bar">
       <span id="history-icon" class="provider-icon small"></span>
@@ -241,54 +337,6 @@
     </form>
   </dialog>
 
-  <dialog id="github" class="models history github" aria-labelledby="github-title">
-    <div class="models-bar">
-      <span class="github-mark" aria-hidden="true"></span>
-      <div class="models-heading">
-        <h2 id="github-title">GitHub</h2>
-        <p id="github-sub" class="sub"></p>
-      </div>
-      <button id="github-close" class="btn" type="button">Close</button>
-    </div>
-    <div id="github-accounts" class="github-accounts" hidden>
-      <div id="github-chips" class="github-chips" role="tablist" aria-label="GitHub accounts"></div>
-      <button id="github-add" class="btn github-add" type="button">Add account</button>
-    </div>
-    <div class="models-body">
-      <section id="github-card" class="github-card" aria-live="polite" hidden></section>
-      <div id="github-status" class="github-status" hidden></div>
-      <div id="github-tools" class="history-tools github-tools" hidden>
-        <input id="github-filter" type="search" placeholder="Filter repositories" aria-label="Filter repositories" spellcheck="false" autocomplete="off">
-        <button id="github-refresh" class="btn" type="button">Refresh</button>
-        <button id="github-new" class="btn" type="button" aria-expanded="false" aria-controls="github-create">New repository</button>
-      </div>
-      <form id="github-create" class="github-card github-create" hidden>
-        <h3>New repository</h3>
-        <div class="github-fields">
-          <label><span>Owner</span><select id="github-create-owner"></select></label>
-          <label><span>Name</span><input id="github-create-name" type="text" required maxlength="100" pattern="[A-Za-z0-9._\-]+" spellcheck="false" autocomplete="off" placeholder="my-project"></label>
-          <label class="wide"><span>Description</span><input id="github-create-description" type="text" maxlength="350" autocomplete="off" placeholder="Optional"></label>
-        </div>
-        <div class="github-options">
-          <label><input id="github-create-private" type="checkbox" checked> Private</label>
-          <label><input id="github-create-readme" type="checkbox" checked> Start with a README</label>
-          <label><input id="github-create-clone" type="checkbox" checked> <span id="github-create-clone-label">Clone it</span></label>
-        </div>
-        <p id="github-create-error" class="github-error" role="alert" hidden></p>
-        <div class="github-actions">
-          <button id="github-create-submit" class="btn primary" type="submit">Create repository</button>
-          <button id="github-create-cancel" class="btn" type="button">Cancel</button>
-        </div>
-      </form>
-      <div id="github-list" class="history-list" role="list"></div>
-      <p id="github-note" class="models-note" hidden></p>
-    </div>
-    <div class="history-form github-form">
-      <label for="github-parent">Clone into</label>
-      <input id="github-parent" type="text" placeholder="Folder that holds your clones" spellcheck="false" autocomplete="off">
-    </div>
-  </dialog>
-
   <div id="tip" class="tip" aria-hidden="true" hidden><strong id="tip-title"></strong><span id="tip-source"></span><p id="tip-text"></p></div>
 
   <div id="toast" class="toast" role="alert" hidden></div>

package/web/layout.js

@@ -0,0 +1,75 @@
+export const TOPBAR_INLINE_MIN = 900;
+export const DOCK_PUSH_MIN = 1280;
+export const DOCK_FULL_MAX = 639;
+export const DOCK_DEFAULT = 420;
+export const DOCK_MIN = 320;
+export const DOCK_MAX = 720;
+export const WORKSPACE_MIN = 560;
+export const SPLIT_COLUMNS_MIN = 1000;
+export const SPLIT_ROWS_MIN_HEIGHT = 620;
+export const SPLIT_ROWS_MIN_WIDTH = 560;
+export const SPLIT_RATIO_MIN = 0.25;
+
+export function topbarInline(width) {
+  return width >= TOPBAR_INLINE_MIN;
+}
+
+export function dockMode(width) {
+  if (width <= DOCK_FULL_MAX) return 'full';
+  return width >= DOCK_PUSH_MIN ? 'push' : 'over';
+}
+
+export function clampDockWidth(value, windowWidth) {
+  const max = Math.max(DOCK_MIN, Math.min(DOCK_MAX, windowWidth - WORKSPACE_MIN));
+  const wanted = typeof value === 'number' && !Number.isNaN(value) ? value : DOCK_DEFAULT;
+  return Math.round(Math.min(max, Math.max(DOCK_MIN, wanted)));
+}
+
+export function stageBesideDock(windowWidth, dockWidth) {
+  return dockMode(windowWidth) !== 'full' && windowWidth - dockWidth - 32 >= WORKSPACE_MIN;
+}
+
+export function splitMode(width, height) {
+  if (width >= SPLIT_COLUMNS_MIN) return 'columns';
+  if (width >= SPLIT_ROWS_MIN_WIDTH && height >= SPLIT_ROWS_MIN_HEIGHT) return 'rows';
+  return null;
+}
+
+export function clampRatio(value) {
+  const ratio = Number.isFinite(value) ? value : 0.5;
+  return Math.min(1 - SPLIT_RATIO_MIN, Math.max(SPLIT_RATIO_MIN, ratio));
+}
+
+export function bindSplitter(handle, { axis = () => 'x', start, move, end, step = 24, home = null, endKey = null }) {
+  let drag = null;
+  const coord = (e) => (axis() === 'x' ? e.clientX : e.clientY);
+  handle.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    handle.setPointerCapture(e.pointerId);
+    drag = { id: e.pointerId, at: coord(e), from: start() };
+    handle.classList.add('dragging');
+  });
+  handle.addEventListener('pointermove', (e) => {
+    if (drag?.id === e.pointerId) move(coord(e) - drag.at, drag.from);
+  });
+  const finish = (e) => {
+    if (drag?.id !== e.pointerId) return;
+    drag = null;
+    handle.classList.remove('dragging');
+    end();
+  };
+  handle.addEventListener('pointerup', finish);
+  handle.addEventListener('pointercancel', finish);
+  handle.addEventListener('lostpointercapture', finish);
+  handle.addEventListener('keydown', (e) => {
+    const back = axis() === 'x' ? 'ArrowLeft' : 'ArrowUp';
+    const forward = axis() === 'x' ? 'ArrowRight' : 'ArrowDown';
+    if (e.key === back || e.key === forward) move(e.key === back ? -step : step, start());
+    else if (e.key === 'Home' && home) home();
+    else if (e.key === 'End' && endKey) endKey();
+    else return;
+    e.preventDefault();
+    end();
+  });
+}

package/web/repo-search.js

@@ -0,0 +1,91 @@
+// Ranking and highlighting for the GitHub panel's repository picker, kept free of the page so tests can run it.
+
+const RECENT_MAX = 8;
+
+function haystack(repo) {
+  return [repo.fullName, repo.name, repo.description, repo.language, repo.login].filter(Boolean).join(' ').toLowerCase();
+}
+
+/**
+ * Every whitespace-separated word must appear in the owner/name, description,
+ * language or account login. A name that starts with the whole query ranks
+ * first, then owner/name containing it, then the rest; ties go to the latest push.
+ * An empty query keeps every repository, latest push first.
+ */
+export function rankRepos(repos, query) {
+  const q = String(query ?? '').trim().toLowerCase();
+  const words = q.split(/\s+/).filter(Boolean);
+  const ranked = [];
+  for (const repo of repos) {
+    if (!words.length) {
+      ranked.push({ repo, rank: 3 });
+      continue;
+    }
+    if (!words.every((word) => haystack(repo).includes(word))) continue;
+    const rank = String(repo.name ?? '').toLowerCase().startsWith(q) ? 0 : String(repo.fullName ?? '').toLowerCase().includes(q) ? 1 : 2;
+    ranked.push({ repo, rank });
+  }
+  ranked.sort((a, b) => a.rank - b.rank
+    || (Date.parse(b.repo.pushedAt) || 0) - (Date.parse(a.repo.pushedAt) || 0)
+    || String(a.repo.fullName).localeCompare(String(b.repo.fullName))
+    || String(a.repo.accountId).localeCompare(String(b.repo.accountId)));
+  return ranked.map((item) => item.repo);
+}
+
+/** One repository as seen by one account: the same repository through two accounts is two picks. */
+export function repoKey(repo) {
+  return `${repo.accountId}:${repo.fullName}`;
+}
+
+/** Up to eight recent picks first, then the rest in their order, each once. */
+export function recentFirst(repos, keys) {
+  const byKey = new Map(repos.map((repo) => [repoKey(repo), repo]));
+  const pinned = [];
+  const seen = new Set();
+  for (const key of Array.isArray(keys) ? keys : []) {
+    const repo = byKey.get(key);
+    if (!repo || seen.has(key)) continue;
+    pinned.push(repo);
+    seen.add(key);
+    if (pinned.length === RECENT_MAX) break;
+  }
+  return [...pinned, ...repos.filter((repo) => !seen.has(repoKey(repo)))];
+}
+
+/** The keys with `repo` moved to the front, at most eight. */
+export function remember(keys, repo) {
+  const key = repoKey(repo);
+  return [key, ...(Array.isArray(keys) ? keys : []).filter((k) => k !== key)].slice(0, RECENT_MAX);
+}
+
+/** The pick for a folder's origin (lowercase owner/name): the account picked most recently, else the first that has it. */
+export function repoForOrigin(repos, origin, keys = []) {
+  if (!origin) return null;
+  const matches = repos.filter((repo) => String(repo.fullName).toLowerCase() === origin);
+  if (!matches.length) return null;
+  const order = Array.isArray(keys) ? keys : [];
+  return recentFirst(matches, order)[0];
+}
+
+/** Splits text into matched and unmatched runs for the query's words, matched literally. */
+export function highlightParts(text, query) {
+  const source = String(text ?? '');
+  const words = String(query ?? '').trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (!source || !words.length) return [{ match: false, text: source }];
+  const lower = source.toLowerCase();
+  const marks = new Array(source.length).fill(false);
+  for (const word of words) {
+    for (let at = lower.indexOf(word); at !== -1; at = lower.indexOf(word, at + word.length)) {
+      marks.fill(true, at, at + word.length);
+    }
+  }
+  const parts = [];
+  let start = 0;
+  for (let i = 1; i <= source.length; i++) {
+    if (i === source.length || marks[i] !== marks[start]) {
+      parts.push({ match: marks[start], text: source.slice(start, i) });
+      start = i;
+    }
+  }
+  return parts;
+}

package/web/skins/gnomeland/skin.css

@@ -245,7 +245,7 @@
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
   .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--panel-strong); }
 
-  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
+  .models, .news-panel, .dock, .auth, .news-latest, .menu:popover-open { background: var(--panel-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
   .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
   .models::backdrop, .news-panel::backdrop { background: rgba(40, 24, 8, 0.4); backdrop-filter: blur(2px); }

package/web/skins/goblinville/skin.css

@@ -50,7 +50,7 @@
     background: var(--page-veil), var(--page-art) center bottom / cover no-repeat;
   }
   /* Text that sits on the town itself gets a halo of the page colour. */
-  .section-head h2, .cwd > span, .empty { text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }
+  .section-head h2, .cwd > label, .empty { text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }
   h2 { font-weight: 400; letter-spacing: 0.03em; font-size: 1.22rem; }
 
   .topbar { background: var(--panel); backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid transparent; border-image: var(--rule) 1; }
@@ -251,7 +251,7 @@
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
   .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--panel-strong); }
 
-  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
+  .models, .news-panel, .dock, .auth, .news-latest, .menu:popover-open { background: var(--panel-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
   .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
   .models::backdrop, .news-panel::backdrop { background: rgba(18, 26, 20, 0.42); backdrop-filter: blur(2px); }

package/web/skins/grove/skin.css

@@ -246,7 +246,7 @@
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
   .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--paper-strong); }
 
-  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--paper-strong); backdrop-filter: blur(16px); }
+  .models, .news-panel, .dock, .auth, .news-latest, .menu:popover-open { background: var(--paper-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
   .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
   .models::backdrop, .news-panel::backdrop { background: rgba(20, 36, 26, 0.34); backdrop-filter: blur(3px); }

package/web/skins/guild/skin.css

@@ -343,10 +343,10 @@
     border-radius: 6px; border-color: #4a3d25; background: var(--card-bg);
     box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
   }
-  .news-row + .news-row, .news-bar, .news-filters, .news-item, .news-status, .changelog-release + .changelog-release { border-color: #2a2418; }
+  .news-row + .news-row, .news-bar, .dock-bar, .news-filters, .news-item, .news-status, .changelog-release + .changelog-release { border-color: #2a2418; }
   .news-link { color: #f3ead8; }
   a.news-link:visited { color: var(--muted); }
-  .news-panel {
+  .news-panel, .dock {
     background: #12141a; border-left-color: #4a3d25;
     box-shadow: inset 1px 0 0 rgba(232, 196, 124, 0.08), -24px 0 60px rgba(0, 0, 0, 0.6);
   }
@@ -458,7 +458,7 @@
   .model-toggle:hover { background: #f6eedd; }
 
   .news-latest { border-color: #e4d6b6; box-shadow: 0 1px 2px rgba(70, 48, 12, 0.08), 0 10px 26px rgba(70, 48, 12, 0.08); }
-  .news-panel { border-left-color: #e2d3b2; box-shadow: -24px 0 60px rgba(40, 28, 8, 0.22); }
+  .news-panel, .dock { border-left-color: #e2d3b2; box-shadow: -24px 0 60px rgba(40, 28, 8, 0.22); }
   .news-panel::backdrop { background: rgba(40, 30, 14, 0.3); }
 
   .status-pill { background: #f6efe0; border: 1px solid #e2d3b2; }

package/web/skins/orbital/skin.css

@@ -248,7 +248,7 @@
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
   .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--glass-strong); }
 
-  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--glass-strong); backdrop-filter: blur(16px); }
+  .models, .news-panel, .dock, .auth, .news-latest, .menu:popover-open { background: var(--glass-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
   .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
   .models::backdrop, .news-panel::backdrop { background: rgba(10, 16, 40, 0.38); backdrop-filter: blur(2px); }