llm-switcher 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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.
+- **Tests:** The agy shim tests start a real relay and send a real request through it. The request must reach the gateway with the Google token, and a gateway without a valid proof must get nothing. The Update now test waits longer than the page polls, so a failure shows what the page saw.
+
 ## Release 1.3.3
 
 - **agy runs behind a relay:** A routed agy no longer gets the gateway port. The shim starts it behind `agy-relay.mjs`, which holds its own loopback port for as long as agy runs. For each connection, the relay asks the gateway for its identity proof on the same socket and sends agy's request only after the proof holds. Before, the shim checked the gateway only at launch, so a gateway that stopped during an agy session left its port free for another program to take, with agy's Google token sent to it. If the proof fails now, agy gets a 502 and the token stays in the relay.

package/README.md

@@ -211,7 +211,8 @@ node "$(npm root -g)/llm-switcher/proxy.mjs"
 
 `switch <command>` works the same on Linux, macOS and Windows. A checkout has its own launchers: `switch` for Linux and macOS, `switch.cmd` for Windows. Platform differences, and the two features that are not available everywhere, are in [📖 `docs/cross-platform.md`](docs/cross-platform.md).
 
-Open the Web Dashboard at: **[http://127.0.0.1:3456/ui](http://127.0.0.1:3456/ui)**
+Open the Web Dashboard with `switch ui`. It opens `http://127.0.0.1:3456/ui` with the access token of
+this install, and the browser tab keeps the token while it stays open.
 
 ---
 
@@ -345,8 +346,8 @@ socket, and sends the request on that socket only after the proof holds. If the
 gets a 502, and its token stays in the relay.
 
 The relay accepts only a proof keyed by `gateway.secret`, a random key next to `admin.token`. No
-page and no route of the gateway serves this key. The dashboard page carries `admin.token`, so a
-proof keyed by `admin.token` could be made by any program that loads the page. If the running
+page and no route of the gateway serves this key, and no program can derive it from `admin.token`.
+If the running
 gateway is older than the relay, agy gets a 502 that says to restart it (`switch off`, then
 `switch on`).
 
@@ -782,7 +783,7 @@ Because of this split, a provider fingerprint is never a rule in this gateway. I
 ## Security Model
 
 - The gateway binds to `127.0.0.1` only and rejects requests whose `Host` is not a loopback name (DNS-rebinding protection) or whose `Origin` is not the dashboard itself (CSRF protection).
-- The admin API (`/api/*`) requires the `x-llm-switcher-token` header. The gateway creates the token in `admin.token`, next to `config.json`, with mode 0600. The gateway puts this token in the dashboard page, so `http://127.0.0.1:3456/ui` works when you open it directly. The Host and Origin checks keep the page and the token from other sites. The MCP server reads the file. `/v1/*` and `/health` need no token.
+- The admin API (`/api/*`) requires the `x-llm-switcher-token` header. The gateway creates the token in `admin.token`, next to `config.json`, with mode 0600. The dashboard page does not carry this token, because any program on the computer can load the page. `switch ui` opens the dashboard through a private file (mode 0600) that gives the token to the browser tab in the URL fragment, and the page removes it from the address bar. A tab opened at `http://127.0.0.1:3456/ui` without this file shows a message that says to use `switch ui`. The MCP server reads the file. `/v1/*` and `/health` need no token.
 - API keys are never sent to the browser: `/api/status` returns redacted profiles and the dashboard keeps the stored key unless you type a new one. The stored key goes only to the stored `baseURL` and `endpoints` of that profile. A save that changes either one must carry the key again.
 - Every dashboard change carries the config revision that the page loaded. If another tab, the CLI or the MCP server saved in the meantime, the gateway answers 409 and the page reloads instead of overwriting that change.
 - Client credentials such as `x-api-key`, `authorization` or `x-goog-api-key` are **not** forwarded to upstreams. Other `x-*` headers, `traceparent` and `tracestate` pass through. The gateway drops its own control headers (`x-profile`, `x-llm-profile`) and the network identity headers (`x-forwarded-*`, `x-real-ip`).

package/README.vi.md

@@ -213,7 +213,8 @@ node "$(npm root -g)/llm-switcher/proxy.mjs"
 Khác biệt giữa các nền tảng, và hai tính năng không chạy ở mọi nơi, nằm trong
 [📖 `docs/cross-platform.md`](docs/cross-platform.md).
 
-Mở Bảng điều khiển Web Dashboard tại: **[http://127.0.0.1:3456/ui](http://127.0.0.1:3456/ui)**
+Mở Bảng điều khiển Web Dashboard bằng `switch ui`. Lệnh này mở `http://127.0.0.1:3456/ui` kèm token truy
+cập của bản cài này, và tab trình duyệt giữ token trong lúc tab còn mở.
 
 ---
 
@@ -345,8 +346,8 @@ socket đó, và chỉ gửi request trên socket ấy khi bằng chứng đúng
 vẫn nằm lại trong relay.
 
 Relay chỉ chấp nhận bằng chứng ký bằng `gateway.secret`, một khóa ngẫu nhiên nằm cạnh `admin.token`.
-Không trang và không route nào của gateway trả về khóa này. Trang dashboard chứa `admin.token`, nên
-bằng chứng ký bằng `admin.token` thì chương trình nào tải trang cũng làm giả được. Nếu gateway đang
+Không trang và không route nào của gateway trả về khóa này, và không chương trình nào suy ra được nó từ
+`admin.token`. Nếu gateway đang
 chạy cũ hơn relay, agy nhận 502 kèm hướng dẫn khởi động lại (`switch off`, rồi `switch on`).
 
 ### Chế độ blindfold (tùy chọn)
@@ -776,7 +777,7 @@ Nhờ cách chia này, fingerprint của provider không bao giờ là rule tron
 ## Mô hình Bảo mật
 
 - Gateway chỉ lắng nghe `127.0.0.1` và từ chối request có `Host` không phải loopback (chống DNS rebinding) hoặc `Origin` không phải chính dashboard (chống CSRF).
-- Admin API (`/api/*`) bắt buộc header `x-llm-switcher-token`. Gateway tạo token trong file `admin.token`, cạnh `config.json`, với mode 0600. Gateway đặt token này vào trang dashboard, nên mở thẳng `http://127.0.0.1:3456/ui` là dùng được. Lớp kiểm tra Host và Origin ngăn trang web khác đọc trang và token. MCP server đọc token từ file. `/v1/*` và `/health` không cần token.
+- Admin API (`/api/*`) bắt buộc header `x-llm-switcher-token`. Gateway tạo token trong file `admin.token`, cạnh `config.json`, với mode 0600. Trang dashboard không chứa token này, vì chương trình nào trên máy cũng tải được trang. `switch ui` mở dashboard qua một file riêng tư (mode 0600), file này đưa token cho tab trình duyệt qua phần fragment của URL, rồi trang xóa nó khỏi thanh địa chỉ. Tab mở thẳng `http://127.0.0.1:3456/ui` mà không qua file này sẽ hiện thông báo bảo dùng `switch ui`. MCP server đọc token từ file. `/v1/*` và `/health` không cần token.
 - API key không bao giờ gửi xuống trình duyệt: `/api/status` trả profile đã che key, dashboard giữ nguyên key đã lưu nếu bạn không nhập key mới. Key đã lưu chỉ được gửi tới `baseURL` và `endpoints` đã lưu của chính profile đó. Lần lưu nào đổi một trong hai thì phải nhập lại key.
 - Mỗi thay đổi từ dashboard mang theo revision của config mà trang đã tải. Nếu tab khác, CLI hoặc MCP server đã lưu trước đó, gateway trả 409 và trang tải lại thay vì ghi đè thay đổi kia.
 - Credential của client (`x-api-key`, `authorization`, `x-goog-api-key`) **không** được chuyển tiếp lên upstream. Các header `x-*` khác, `traceparent` và `tracestate` được chuyển tiếp. Gateway bỏ header điều khiển của chính nó (`x-profile`, `x-llm-profile`) và header định danh mạng (`x-forwarded-*`, `x-real-ip`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llm-switcher",
-  "version": "1.3.3",
+  "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/proxy.mjs

@@ -1300,10 +1300,9 @@ async function route(req, res) {
         'X-Frame-Options': 'DENY',
         'X-Content-Type-Options': 'nosniff'
       });
-      // One gateway serves one user, so the page opened at /ui carries its own token. The Host and Origin
-      // guard above keeps it from other sites; the token is hex, so it needs no escaping.
-      const meta = `<meta name="llm-switcher-token" content="${ADMIN_TOKEN.toString()}">`;
-      return res.end(fs.readFileSync(uiHtmlPath, 'utf8').replace('<head>', `<head>\n  ${meta}`));
+      // No token in the page: any process on the machine can GET /ui. The dashboard gets it from the
+      // #token of the private launcher that `switch ui` opens.
+      return res.end(fs.readFileSync(uiHtmlPath, 'utf8'));
     }
   }
 
@@ -2266,7 +2265,7 @@ if (!handedOver) server.listen(PORT, '127.0.0.1', () => {
     serialized(() => reconcile(cfg));
   }
   console.log(`[llm-switcher] Server running on http://127.0.0.1:${PORT}`);
-  console.log(`[llm-switcher] Web UI available at: http://127.0.0.1:${PORT}/ui`);
+  console.log(`[llm-switcher] Web UI available at: http://127.0.0.1:${PORT}/ui (open it with \`switch ui\`)`);
   console.log(`[llm-switcher] Endpoints: /v1/messages (Claude Code) | /v1/responses (Codex)`);
   // Asynchronously discover latest tool models in the background without blocking startup
   refreshCatalog(STATE_DIR).catch(() => {});

package/switch.mjs

@@ -616,7 +616,7 @@ async function showStatus() {
   console.log('=== LLM Switcher Status ===');
   const held = { legacy: `OLD GATEWAY (< 1.1.1) ON PORT ${port}: stop it, then run \`switch on\``, foreign: `PORT ${port} HELD BY ANOTHER PROCESS`, silent: `PORT ${port} DOES NOT ANSWER (hung gateway or another program)` };
   console.log(`Proxy Service:  ${isRunning ? `RUNNING (port ${port})` : held[gateway] || 'STOPPED'}`);
-  console.log(`Web UI:         http://127.0.0.1:${port}/ui`);
+  console.log(`Web UI:         http://127.0.0.1:${port}/ui  (open it with \`switch ui\`)`);
   console.log(`Launcher Flag:  ${flagged ? 'active.flag present' : 'absent (launchers use official endpoints)'}`);
   if (flagged && !isRunning) {
     console.log(`[WARN] active.flag exists but proxy is STOPPED -> launched CLIs will fail to connect. Run 'switch on' or 'switch off'.`);

package/tests/dashboard-fixture.mjs

@@ -134,6 +134,8 @@ export async function startDashboardFixture() {
     upstream,
     upstreamBase,
     dashboardUrl: `http://127.0.0.1:${port}/ui`,
+    // How `switch ui` opens it: the token comes in the fragment, never in the page.
+    tokenUrl: () => `http://127.0.0.1:${port}/ui#token=${adminToken()}`,
     // What is on disk, which the dashboard has to agree with after every action.
     config: () => JSON.parse(fs.readFileSync(cfgPath, 'utf8')),
     // A change made outside the dashboard, as `switch` in a terminal or an editor would make it.

package/tests/dashboard.e2e.test.mjs

@@ -20,6 +20,22 @@ describe('dashboard, driven in a real browser', { skip: skipReason() }, () => {
     fx = await startDashboardFixture();
     browser = await launchBrowser();
     page = await browser.newPage();
+    // Once per tab, as the launcher of `switch ui` does; the tab keeps the token from then on.
+    await page.goto(fx.tokenUrl());
+  });
+
+  it('a tab opened without the launcher token says to open the dashboard with switch ui', 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');
+    } 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');
+    }
   });
 
   after(async () => {
@@ -760,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/gateway.e2e.test.mjs

@@ -679,12 +679,15 @@ test('Security: foreign Host / Origin are rejected (DNS rebinding & CSRF)', asyn
 
 // Any local process can reach loopback. Without a token it must get nothing from /api/*,
 // and a masked key must never be resolved for a baseURL the profile does not have.
-// One gateway serves one user on one machine: the dashboard opened at /ui, with no link from `switch ui`,
-// carries its own token. A page of another site and a rebound Host still get nothing.
-test('Dashboard: /ui opened directly carries the admin token, other sites do not get it', async () => {
+// Any process on the machine can GET /ui, another account's included, so the page carries no token.
+// The dashboard gets it from the #token of the private launcher that `switch ui` opens.
+test('Dashboard: /ui and / never carry the admin token, for this machine or another site', async () => {
   for (const p of ['/ui', '/']) {
-    const html = await (await fetch(url(p))).text();
-    assert.ok(html.includes(`<meta name="llm-switcher-token" content="${adminToken()}">`), `${p} has no token`);
+    const r = await fetch(url(p));
+    assert.equal(r.status, 200, p);
+    const html = await r.text();
+    assert.ok(html.includes('<title>'), `${p} serves the dashboard`);
+    assert.ok(!html.includes(adminToken()), `${p} carries the admin token`);
   }
   const foreign = await fetch(url('/ui'), { headers: { origin: 'https://evil.example' } });
   assert.equal(foreign.status, 403);

package/tests/shim.test.mjs

@@ -476,6 +476,21 @@ const AGY_CONFIG_DIR = fs.mkdtempSync(path.join(os.tmpdir(), 'agyconfig-'));
 const AGY_CONFIG = path.join(AGY_CONFIG_DIR, 'config.json');
 test.after(() => fs.rmSync(AGY_CONFIG_DIR, { recursive: true, force: true }));
 fs.writeFileSync(path.join(path.dirname(AGY_CONFIG), 'admin.token'), AGY_TOKEN);
+// The relay key of this test install: the relay of a routed agy checks every connection with it.
+const AGY_SECRET = 'd'.repeat(64);
+fs.writeFileSync(path.join(path.dirname(AGY_CONFIG), 'gateway.secret'), AGY_SECRET);
+// Stands in for agy: sends one request with its Google token to CLOUD_CODE_URL, when it has one.
+const AGY_REQUEST = path.join(AGY_CONFIG_DIR, 'agy-request.mjs');
+fs.writeFileSync(AGY_REQUEST, `
+import http from 'node:http';
+const url = process.env.CLOUD_CODE_URL;
+if (url) await new Promise((resolve) => {
+  const req = http.request(url + '/v1internal:loadCodeAssist', { method: 'POST', agent: false, headers: { authorization: 'Bearer google-secret' } },
+    (res) => { res.resume(); res.on('end', () => { console.log('STATUS ' + res.statusCode); resolve(); }); });
+  req.on('error', (e) => { console.log('ERROR ' + e.message); resolve(); });
+  req.end('{}');
+});
+`);
 const VERIFY = path.join(ROOT, 'verify-gateway.mjs');
 // Async on purpose: the /health listener lives in this process, and a spawnSync would block it.
 const { spawn: spawnAsync } = await import('node:child_process');
@@ -491,19 +506,31 @@ function runAsync(cmd, args, opts) {
 }
 const NOTICE = /did not prove it is this switcher/;
 
-// A /health listener: 'real' signs like this gateway, 'forged' sends a wrong proof, 'silent' never answers.
+// A gateway listener: 'real' signs like this gateway (both proofs), 'forged' sends wrong proofs,
+// 'silent' never answers. `server.seen` holds the Authorization of every request that is not a probe.
 async function agyListener(kind) {
   const http = await import('node:http');
   const net = await import('node:net');
+  const crypto = await import('node:crypto');
+  const seen = [];
   const server = kind === 'silent'
     ? net.createServer((sock) => sock.on('error', () => {}))
     : http.createServer((req, res) => {
       const port = server.address().port;
-      const nonce = new URL(req.url, 'http://x').searchParams.get('challenge');
-      const proof = kind === 'real' ? identityProof(nonce, { role: 'gateway', port, pid: 4242 }, AGY_TOKEN) : 'forged';
+      const u = new URL(req.url, 'http://x');
       res.setHeader('content-type', 'application/json');
-      res.end(JSON.stringify({ status: 'ok', proxy: 'llm-switcher', port, pid: 4242, proof }));
+      if (u.pathname !== '/health') {
+        seen.push(req.headers.authorization || '');
+        req.resume();
+        return res.end('{"answeredBy":"gateway"}');
+      }
+      const nonce = u.searchParams.get('challenge');
+      const real = kind === 'real';
+      const proof = real ? identityProof(nonce, { role: 'gateway', port, pid: 4242 }, AGY_TOKEN) : 'forged';
+      const relayProof = real ? crypto.createHmac('sha256', AGY_SECRET).update(['relay', port, 4242, nonce].join('|')).digest('hex') : 'forged';
+      res.end(JSON.stringify({ status: 'ok', proxy: 'llm-switcher', port, pid: 4242, proof, relayProof }));
     });
+  server.seen = seen;
   await new Promise(r => server.listen(0, '127.0.0.1', r));
   return server;
 }
@@ -511,7 +538,7 @@ async function agyListener(kind) {
 async function runAgyWindowsShim(port) {
   const shimDir = fs.mkdtempSync(path.join(os.tmpdir(), 'agyshim-'));
   const fakeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'agyfake-'));
-  fs.writeFileSync(path.join(fakeDir, 'agy.cmd'), '@echo off\r\necho CCU=[%CLOUD_CODE_URL%]\r\n');
+  fs.writeFileSync(path.join(fakeDir, 'agy.cmd'), `@echo off\r\necho CCU=[%CLOUD_CODE_URL%]\r\nnode "${AGY_REQUEST}"\r\n`);
   for (const f of fs.readdirSync(STATE)) if (fs.statSync(path.join(STATE, f)).isFile()) fs.rmSync(path.join(STATE, f), { force: true });
   fs.writeFileSync(path.join(STATE, 'active.flag'), 'active');
   fs.writeFileSync(path.join(STATE, 'env-agy.cmd'), `SET "CLOUD_CODE_URL=http://127.0.0.1:${port}"\r\n`);
@@ -537,10 +564,14 @@ for (const [kind, routed] of [['forged', false], ['silent', false], ['real', tru
       // agy gets the port of its own relay, which proves the gateway on every connection.
       const relayPort = Number((out.match(/CCU=\[http:\/\/127\.0\.0\.1:(\d+)\]/) || [])[1]);
       assert.ok(relayPort > 0 && relayPort !== port, `agy must get the relay port, not ${port}: ${out}`);
+      // The request really crossed the relay and reached this gateway, token included.
+      assert.match(out, /STATUS 200/, out);
+      assert.deepEqual(server.seen, ['Bearer google-secret']);
       assert.doesNotMatch(err, NOTICE);
     } else {
       assert.match(out, /CCU=\[\]/, 'the token must not go to a port that did not prove itself');
       assert.match(err, NOTICE);
+      assert.deepEqual(server.seen ?? [], [], 'the listener never received the token');
     }
     assert.ok(ms < 8000, `the shim took ${ms} ms`);
   });
@@ -553,7 +584,7 @@ for (const [kind, routed] of [['forged', false], ['silent', false], ['real', tru
     t.after(() => server.close());
     const port = server.address().port;
     const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'agyposix-'));
-    fs.writeFileSync(path.join(dir, 'agy'), '#!/usr/bin/env bash\necho "CCU=[${CLOUD_CODE_URL:-}]"\n');
+    fs.writeFileSync(path.join(dir, 'agy'), `#!/usr/bin/env bash\necho "CCU=[\${CLOUD_CODE_URL:-}]"\nnode "${AGY_REQUEST}"\n`);
     fs.chmodSync(path.join(dir, 'agy'), 0o755);
     for (const f of fs.readdirSync(STATE)) if (fs.statSync(path.join(STATE, f)).isFile()) fs.rmSync(path.join(STATE, f), { force: true });
     fs.writeFileSync(path.join(STATE, 'active.flag'), 'active');
@@ -566,10 +597,13 @@ for (const [kind, routed] of [['forged', false], ['silent', false], ['real', tru
     if (routed) {
       const relayPort = Number((out.stdout.match(/CCU=\[http:\/\/127\.0\.0\.1:(\d+)\]/) || [])[1]);
       assert.ok(relayPort > 0 && relayPort !== port, `agy must get the relay port, not ${port}: ${out.stdout}`);
+      assert.match(out.stdout, /STATUS 200/, out.stdout);
+      assert.deepEqual(server.seen, ['Bearer google-secret']);
       assert.doesNotMatch(out.stderr, NOTICE);
     } else {
       assert.match(out.stdout, /CCU=\[\]/);
       assert.match(out.stderr, NOTICE);
+      assert.deepEqual(server.seen ?? [], [], 'the listener never received the token');
     }
     assert.ok(Date.now() - started < 8000, `the shim took ${Date.now() - started} ms`);
   });

package/tests/switch.test.mjs

@@ -640,3 +640,24 @@ test('switch off stops the installed service only when that service owns the por
   const log = fs.existsSync(calls) ? fs.readFileSync(calls, 'utf8') : '';
   assert.doesNotMatch(log, /\b(stop|restart)\b/, `systemctl was told to stop the instance on port 3456:\n${log}`);
 });
+
+// The same rule for `switch port`: the unit of another instance keeps its port and is not restarted.
+test('switch port leaves the installed service of another port unchanged', { skip: process.platform !== 'linux' && 'a systemd fake' }, async (t) => {
+  const ws = await workspace(t, await freePort());
+  const unitDir = path.join(ws.home, '.config', 'systemd', 'user');
+  fs.mkdirSync(unitDir, { recursive: true });
+  const unit = path.join(unitDir, 'llm-switcher.service');
+  const original = '[Service]\nExecStart=/usr/bin/node /opt/llm-switcher/proxy.mjs --port 3456\n';
+  fs.writeFileSync(unit, original);
+  const bin = path.join(ws.dir, 'fakebin');
+  fs.mkdirSync(bin);
+  const calls = path.join(ws.dir, 'systemctl.log');
+  fs.writeFileSync(path.join(bin, 'systemctl'), `#!/bin/sh\necho "$@" >> "${calls}"\nexit 0\n`, { mode: 0o755 });
+  const env = { PATH: `${bin}${path.delimiter}${process.env.PATH}` };
+  assert.equal((await run(ws, ['on', 'plain'], { env })).status, 0);
+  const r = await run(ws, ['port', String(await freePort())], { env });
+  assert.equal(r.status, 0, r.out);
+  assert.equal(fs.readFileSync(unit, 'utf8'), original, 'the unit of port 3456 was rewritten');
+  const log = fs.existsSync(calls) ? fs.readFileSync(calls, 'utf8') : '';
+  assert.doesNotMatch(log, /\b(stop|restart|start|enable)\b/, `systemctl was told to act on the other instance:\n${log}`);
+});

package/tests/update.e2e.test.mjs

@@ -115,6 +115,8 @@ async function fixture(t, { registryUrl = 'http://127.0.0.1:9/' } = {}) {
       c.on('close', code => resolve({ code, out }));
     }),
     dashboardUrl: `http://127.0.0.1:${port}/ui`,
+    // How `switch ui` opens it: the token comes in the fragment, never in the page.
+    tokenUrl: () => `http://127.0.0.1:${port}/ui#token=${fs.readFileSync(path.join(data, 'admin.token'), 'utf8').trim()}`,
     api: (p, opts = {}) => fetch(`http://127.0.0.1:${port}${p}`, {
       ...opts,
       headers: { 'x-llm-switcher-token': fs.readFileSync(path.join(data, 'admin.token'), 'utf8').trim(), 'Content-Type': 'application/json' }
@@ -184,20 +186,22 @@ 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());
   const page = await browser.newPage();
-  await page.goto(fx.dashboardUrl);
+  await page.goto(fx.tokenUrl());
   await page.waitFor(`!document.getElementById('update-notice').hidden`, 'the update notice');
   await page.click('#update-now');
   try {
-    await page.waitFor(`document.getElementById('app-version')?.textContent === 'v9.9.12'`, 'the reloaded dashboard on the new version', 30000);
+    // Longer than the 30 s the page polls for the new gateway, so a failure shows the page's own verdict.
+    await page.waitFor(`document.getElementById('app-version')?.textContent === 'v9.9.12'`, 'the reloaded dashboard on the new version', 40000);
   } 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,10 +1256,12 @@
   <script>
     // State & Globals
     const ADMIN_TOKEN_KEY = 'llm-switcher-admin-token';
-    const servedToken = document.querySelector('meta[name="llm-switcher-token"]')?.content;
+    // 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.
+    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 (servedToken || hashTokenMatch) {
-      sessionStorage.setItem(ADMIN_TOKEN_KEY, servedToken || hashTokenMatch[1]);
+    if (hashTokenMatch) {
+      sessionStorage.setItem(ADMIN_TOKEN_KEY, hashTokenMatch[1]);
     }
     if (hashTokenMatch) {
       history.replaceState(null, '', location.pathname + location.search + '#/routes');
@@ -1278,13 +1289,13 @@
 
     // API Helper
     async function api(path, opts = {}) {
-      const token = sessionStorage.getItem(ADMIN_TOKEN_KEY) || document.querySelector('meta[name="llm-switcher-token"]')?.content || '';
+      const token = sessionStorage.getItem(ADMIN_TOKEN_KEY) || '';
       const headers = {
         ...opts.headers,
         'x-llm-switcher-token': token
       };
       const res = await fetch(path, { ...opts, headers });
-      if (res.status === 401) showToast('Unauthorized: check admin.token in server directory', true);
+      if (res.status === 401) showToast(NO_TOKEN_HINT, true);
       if (res.status === 409) setTimeout(loadStatus, 0);
       return res;
     }
@@ -2775,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);
@@ -2792,6 +2810,7 @@
     }
 
     document.addEventListener('DOMContentLoaded', () => {
+      if (!sessionStorage.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');