llm-switcher 1.3.4 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog — LLM Switcher
 
+## 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.5",
   "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

@@ -776,6 +776,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>
 
@@ -2777,15 +2786,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);