llm-switcher 1.3.4 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — LLM Switcher
 
+## Release 1.3.6
+
+- **Dashboard from a bookmark:** In 1.3.4 the tab kept the token in `sessionStorage`. A bookmark, a typed URL or a new tab then had no token: every call got HTTP 401, and the dashboard showed no profiles and every route as OFF. The token is now in `localStorage`, so after one `switch ui` every tab of that browser works. The page still does not carry the token.
+- **Dashboard without a token:** The header now says to open the dashboard with `switch ui`. Before, it said "Gateway is idle", which looked like a config with no routes.
+
+## Release 1.3.5
+
+- **Dashboard motion:** The switch, the checkbox, the dialog, the toast and the tooltip used easing curves that overshoot and bounce back. They now use one smooth ease-out curve (`--ease-out`). The durations did not change.
+- **Dashboard elevation:** The dialog, the toast and the model list used a wide 50 px shadow on top of their border. The shadow is now short and tight, so the border defines the edge, in both themes.
+- **Dialog tabs on a phone:** At 390 px wide, the profile dialog cut off the **Model Slots** tab, and the tab bar hides its scrollbar. On a narrow screen the tabs now have less padding, and they wrap if they still do not fit.
+- **API key field:** The field has `autocomplete="off"`, so a password manager does not offer to save the key.
+- **Update now that times out:** The message "The new gateway did not answer" now also says what the last check saw: the gateway from before the update, an HTTP status, or a network error.
+
 ## Release 1.3.4
 
 - **The dashboard page carries no token:** `/ui` sent `admin.token` in the page, and any program on the machine can load `/ui`. The page now gets the token only from the `#token=` of the private launcher that `switch ui` opens (a file with mode 0600). The tab keeps it in `sessionStorage`, so it does not stay in the browser after the tab closes. A tab opened at `/ui` directly says to use `switch ui`. `switch status` and the gateway start line say the same.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llm-switcher",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Zero-dependency multi-protocol edge gateway & provider switcher for Claude Code and Codex, with OpenAI-compatible, Anthropic and Vertex upstreams",
   "keywords": [
     "llm",

package/tests/dashboard.e2e.test.mjs

@@ -24,17 +24,37 @@ describe('dashboard, driven in a real browser', { skip: skipReason() }, () => {
     await page.goto(fx.tokenUrl());
   });
 
-  it('a tab opened without the launcher token says to open the dashboard with switch ui', async () => {
+  // Close the tab itself, then raise the main one: a tab left in the background gets throttled
+  // timers and no animation frames, which stalls every later test.
+  async function closeTab(tab) {
+    await tab.send('Page.close').catch(() => {});
+    tab.close();
+    await page.send('Page.bringToFront');
+  }
+
+  it('a new tab, opened from a bookmark after switch ui ran once, shows the profiles', async () => {
+    const fresh = await browser.newPage();
+    try {
+      await fresh.goto(fx.dashboardUrl + '#/routes');
+      await fresh.waitFor(`document.querySelectorAll('#profiles-grid .pcard').length === ${Object.keys(fx.config().profiles).length}`, 'the profile cards');
+    } finally {
+      await closeTab(fresh);
+    }
+  });
+
+  it('a browser that never got the launcher token says so on the page, not only in a toast', async () => {
     const fresh = await browser.newPage();
     try {
-      await fresh.goto(fx.dashboardUrl);
-      await fresh.waitFor(`/switch ui/.test(document.getElementById('toast')?.textContent || '')`, 'the switch ui hint');
+      await fresh.goto(fx.dashboardUrl + '#/routes');
+      await fresh.evaluate(`localStorage.clear(), sessionStorage.clear()`);
+      await fresh.reload();
+      await fresh.waitFor(`/switch ui/.test(document.getElementById('status-sub')?.textContent || '')`, 'the switch ui hint in the header');
     } finally {
-      // Close the tab itself, then raise the main one: a tab left in the background gets throttled
-      // timers and no animation frames, which stalls every later test.
-      await fresh.send('Page.close').catch(() => {});
-      fresh.close();
-      await page.send('Page.bringToFront');
+      await closeTab(fresh);
+      // The storage is shared by the origin, so the main tab needs the token again. A #hash change
+      // alone fires no load event, so leave the page first.
+      await page.goto('about:blank');
+      await page.goto(fx.tokenUrl());
     }
   });
 
@@ -776,6 +796,23 @@ describe('dashboard, driven in a real browser', { skip: skipReason() }, () => {
       }
     });
 
+    it('shows every dialog tab whole on a phone', async () => {
+      await page.resize(390, 844);
+      try {
+        await editProfile('intact-claude');
+        await page.waitFor('document.getElementById("profile-modal-overlay").style.display === "grid"', 'the dialog');
+        const cut = await page.evaluate(`(() => {
+          const bar = document.querySelector('#profile-form .tabs').getBoundingClientRect();
+          return [...document.querySelectorAll('#profile-form .tabs .tab-btn')]
+            .filter(b => { const r = b.getBoundingClientRect(); return r.left < bar.left - 0.5 || r.right > bar.right + 0.5; })
+            .map(b => b.textContent.trim());
+        })()`);
+        assert.deepEqual(cut, [], 'these tabs are cut off by the tab bar at 390 px');
+      } finally {
+        await page.resize(1280, 900);
+      }
+    });
+
     it('does not let a long profile name break the dialog header', async () => {
       const cfg = fx.config();
       cfg.profiles['intact-claude'].name = 'N'.repeat(300);

package/tests/update.e2e.test.mjs

@@ -186,7 +186,7 @@ test('switch update asks the running gateway and waits for the new one', { timeo
 test('the dashboard Update now button installs the release and reloads on the new gateway', { timeout: 90000, skip: skipReason() }, async (t) => {
   const fx = await fixture(t, { registryUrl: await registry(t, '9.9.12') });
   await fx.start();
-  await fx.waitFor(fx.pid, 'the gateway');
+  const firstPid = await fx.waitFor(fx.pid, 'the gateway');
   fx.release('9.9.12');
   const browser = await launchBrowser();
   t.after(() => browser.close());
@@ -200,7 +200,8 @@ test('the dashboard Update now button installs the release and reloads on the ne
   } catch (err) {
     // A CI runner cannot be watched: put what the gateway and the page saw into the failure.
     const stage = await page.evaluate(`document.getElementById('update-status')?.textContent || ''`).catch(() => '(page gone)');
-    err.message += `\nupdate status on the page: ${stage}\ngateway log:\n${fx.log()}\npage problems: ${JSON.stringify(page.problems)}`;
+    // The pid seen from this process tells a gateway that does not answer from a page that cannot reach it.
+    err.message += `\nupdate status on the page: ${stage}\npid on /health from the test: ${await fx.pid()} (first gateway ${firstPid})\ngateway log:\n${fx.log()}\npage problems: ${JSON.stringify(page.problems)}`;
     throw err;
   }
   assert.equal(await page.evaluate(`document.getElementById('update-notice').hidden`), true);

package/ui.html

@@ -17,6 +17,7 @@
   <style>
     :root {
       color-scheme: dark;
+      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
       --bg: #0c1017;
       --side: #10151e;
       --card: #141a25;
@@ -37,7 +38,7 @@
       --err: #fb7185;
       --err-soft: rgba(251, 113, 133, 0.12);
       --code: #5eead4;
-      --shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
+      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 12px -6px rgba(0, 0, 0, 0.55);
 
       /* Compatibility aliases */
       --surface: var(--side);
@@ -89,7 +90,7 @@
         --err: #be123c;
         --err-soft: rgba(190, 18, 60, 0.08);
         --code: #0f766e;
-        --shadow: 0 20px 50px rgba(20, 26, 37, 0.14);
+        --shadow: 0 1px 2px rgba(20, 26, 37, 0.08), 0 8px 12px -6px rgba(20, 26, 37, 0.16);
         --border-strong: #cbd5e1;
       }
     }
@@ -115,7 +116,7 @@
       --err: #be123c;
       --err-soft: rgba(190, 18, 60, 0.08);
       --code: #0f766e;
-      --shadow: 0 20px 50px rgba(20, 26, 37, 0.14);
+      --shadow: 0 1px 2px rgba(20, 26, 37, 0.08), 0 8px 12px -6px rgba(20, 26, 37, 0.16);
       --border-strong: #cbd5e1;
     }
 
@@ -593,7 +594,7 @@
     .switch { position: relative; width: 36px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
     .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; min-height: 0; }
     .switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); box-shadow: inset 0 0 0 1.5px var(--faint); transition: background-color 0.25s, box-shadow 0.25s; pointer-events: none; }
-    .switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.6, 1), width 0.15s; }
+    .switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.25s var(--ease-out), width 0.15s; }
     .switch input:active + span::after { width: 20px; }
     .switch input:checked + span { background: var(--accent-strong); box-shadow: none; }
     .switch input:checked + span::after { transform: translateX(16px); }
@@ -627,7 +628,7 @@
       border: solid var(--accent-fg);
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
-      transition: transform 0.15s cubic-bezier(0.3, 1.4, 0.6, 1);
+      transition: transform 0.15s var(--ease-out);
     }
     input[type="checkbox"]:not(.switch input):checked { background: var(--accent-strong); border-color: var(--accent-strong); }
     input[type="checkbox"]:not(.switch input):checked::before { transform: rotate(45deg) scale(1); }
@@ -646,7 +647,7 @@
       opacity: 1;
       transition: opacity 0.18s;
     }
-    .overlay .modal { transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
+    .overlay .modal { transition: transform 0.18s var(--ease-out); }
     @starting-style { .overlay { opacity: 0; } .overlay .modal { transform: scale(0.96) translateY(8px); } }
     .modal {
       background: var(--card);
@@ -693,6 +694,7 @@
       scrollbar-width: none;
     }
     .tabs::-webkit-scrollbar { display: none; }
+    .tabs-wrap { padding: 0.85rem 1.25rem 0.5rem; background: var(--card2); }
     .tabs button.tab-btn {
       padding: 0.55rem 0.95rem;
       color: var(--muted);
@@ -712,6 +714,13 @@
       border-bottom-color: var(--accent);
       font-weight: 600;
     }
+    /* A phone has no room for all three tabs at full padding, and the bar hides its scrollbar:
+       tighten them, and wrap rather than hide a tab when even that is not enough. */
+    @media (max-width: 480px) {
+      .tabs-wrap { padding-inline: 1rem; }
+      .tabs { flex-wrap: wrap; }
+      .tabs button.tab-btn { padding-inline: 0.6rem; }
+    }
 
     /* Log Items */
     .log-item {
@@ -757,7 +766,7 @@
       gap: 0.6rem;
       overflow: hidden;
       max-width: 90vw;
-      animation: fadeIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
+      animation: fadeIn 0.25s var(--ease-out);
     }
     .toast::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
     .toast::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform-origin: left; animation: toastbar 3.2s linear forwards; }
@@ -782,7 +791,7 @@
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
       opacity: 1;
       translate: 0 0;
-      transition: opacity 0.15s, translate 0.2s cubic-bezier(0.3, 1.4, 0.6, 1), display 0.15s;
+      transition: opacity 0.15s, translate 0.2s var(--ease-out), display 0.15s;
       transition-behavior: allow-discrete;
     }
     .tip[hidden] { display: none; opacity: 0; translate: 0 4px; }
@@ -1123,7 +1132,7 @@
 
       <form id="profile-form" onsubmit="saveProfile(event)" onkeydown="blockImplicitSubmit(event)" oninput="formDirty = true" onchange="formDirty = true" style="display:flex; flex-direction:column; overflow:hidden;">
         <!-- Modal Inset Tabs -->
-        <div style="padding:0.85rem 1.25rem 0.5rem; background:var(--card2);">
+        <div class="tabs-wrap">
           <div class="tabs">
             <button type="button" id="tab-button-general" class="tab-btn active" onclick="switchTab('tab-general')">General</button>
             <button type="button" id="tab-button-routing" class="tab-btn" onclick="switchTab('tab-routing')">Routing & Protocol</button>
@@ -1160,7 +1169,7 @@
             </label>
 
             <label class="f">API Key
-              <input type="password" id="p-key-val" placeholder="sk-...">
+              <input type="password" id="p-key-val" placeholder="sk-..." autocomplete="off">
             </label>
           </div>
 
@@ -1247,12 +1256,13 @@
   <script>
     // State & Globals
     const ADMIN_TOKEN_KEY = 'llm-switcher-admin-token';
-    // The token comes only in the #token of the private launcher that `switch ui` opens, and stays in
-    // this tab. The page itself never carries it: any process on the machine can load /ui.
+    // The token comes only in the #token of the private launcher that `switch ui` opens. The page itself
+    // never carries it: any process on the machine can load /ui. localStorage, not sessionStorage, so a
+    // bookmark or a new tab in the same browser keeps working after one `switch ui`.
     const NO_TOKEN_HINT = 'This tab has no access token. Open the dashboard with `switch ui`.';
     const hashTokenMatch = location.hash.match(/(?:^#|&)token=([0-9a-f]+)/);
     if (hashTokenMatch) {
-      sessionStorage.setItem(ADMIN_TOKEN_KEY, hashTokenMatch[1]);
+      localStorage.setItem(ADMIN_TOKEN_KEY, hashTokenMatch[1]);
     }
     if (hashTokenMatch) {
       history.replaceState(null, '', location.pathname + location.search + '#/routes');
@@ -1280,7 +1290,7 @@
 
     // API Helper
     async function api(path, opts = {}) {
-      const token = sessionStorage.getItem(ADMIN_TOKEN_KEY) || '';
+      const token = localStorage.getItem(ADMIN_TOKEN_KEY) || '';
       const headers = {
         ...opts.headers,
         'x-llm-switcher-token': token
@@ -1452,6 +1462,8 @@
       const subEl = document.getElementById('status-sub');
       const actionsEl = document.getElementById('ph-actions');
       if (!titleEl || !subEl || !actionsEl) return;
+      // Without the token every call is a 401, and the empty state would read as "nothing routed".
+      const noToken = !localStorage.getItem(ADMIN_TOKEN_KEY);
 
       const activeMap = state.activeProfiles || (state.config?.activeProfiles || {});
       const activeTargets = Object.entries(activeMap).filter(([_, v]) => Boolean(v));
@@ -1465,7 +1477,7 @@
           if (activeMap.agy) parts.push('agy: ' + activeMap.agy);
           subEl.textContent = 'Port ' + state.port + ' · Active for ' + parts.join(' · ');
         } else {
-          subEl.textContent = 'Gateway is idle. Clients connect directly to official endpoints.';
+          subEl.textContent = noToken ? NO_TOKEN_HINT : 'Gateway is idle. Clients connect directly to official endpoints.';
         }
         actionsEl.innerHTML = `
           <button class="btn btn-primary" onclick="openProfileModal(true)">+ Add Profile</button>
@@ -2777,15 +2789,22 @@
           return;
         }
         say('Installed v' + result.to + '. Restarting the gateway...');
+        let last = 'no check ran';
         for (let n = 0; n < 60; n++) {
           await new Promise(r => setTimeout(r, 500));
-          const pid = await gatewayPid();
-          if (pid && pid !== before) {
-            location.reload();
-            return;
+          try {
+            const r = await fetch('/health?challenge=ui', { cache: 'no-store' });
+            const pid = (await r.json()).pid ?? null;
+            if (pid && pid !== before) {
+              location.reload();
+              return;
+            }
+            last = pid ? 'the gateway from before the update (pid ' + pid + ')' : 'HTTP ' + r.status + ' with no pid';
+          } catch (err) {
+            last = err.message;
           }
         }
-        throw new Error('The new gateway did not answer. Read proxy.log.');
+        throw new Error('The new gateway did not answer (last check: ' + last + '). Read proxy.log.');
       } catch (err) {
         say(err.message);
         showToast('Update failed: ' + err.message, true);
@@ -2794,7 +2813,7 @@
     }
 
     document.addEventListener('DOMContentLoaded', () => {
-      if (!sessionStorage.getItem(ADMIN_TOKEN_KEY)) showToast(NO_TOKEN_HINT, true);
+      if (!localStorage.getItem(ADMIN_TOKEN_KEY)) showToast(NO_TOKEN_HINT, true);
       // Setup initial theme buttons state
       const currentTheme = document.documentElement.dataset.theme || 'dark';
       document.getElementById('btn-theme-dark')?.setAttribute('aria-pressed', currentTheme === 'dark');