tinywebui 0.1.4 → 0.1.5

package/README.md

@@ -47,7 +47,7 @@ It comes pre-loaded with two TinySuite MCP servers, so a new install can already
 - **Hybrid local search** (BM25 plus a small on-device embedding model) over documents and past chats.
 - **Long chats that stay affordable.** Cache-friendly prefixes, one-time compaction of large tool results, and per-round token statistics.
 - **Automations.** Cron-scheduled prompts that run in a chat of your choice.
-- **Private by default.** Local starts sign in with a one-time link from the terminal, network binds need a password, and a team can use an SSO gateway with roles and an admin panel.
+- **Private by default.** The first account becomes the administrator; later local accounts require a single-use invitation. Teams can alternatively put SSO in front.
 - **Managed from files.** Version-controlled config that hot-reloads, refuses typos and has a fingerprint you can check against a running instance.
 - **Themes.** Fall Fairy and Cyber Grid are included. See [theme authoring](public/themes/README.md) to write your own.
 
@@ -59,31 +59,36 @@ Requires **Node.js 22.13** or later. The bundled TinySearch and TinyContext serv
 npx tinywebui
 ```
 
-There is no password to set up. The terminal prints a sign-in link (`http://127.0.0.1:7777/#token=…`); open it and the browser stays signed in. Only someone who can read that terminal gets in. Then connect a model. Put an endpoint and key in `tinywebui.config.json` (start from `example.tinywebui.config.json`) or use the Settings panel:
+Open <http://127.0.0.1:7777> and create the first account with a password of at least 10 characters. That account becomes the administrator and can invite others from the Admin panel. Settings then opens on its first step: add a connector (any OpenAI-compatible URL, with an API key if it needs one), then the models people can pick from it. Every model, with its prompt, sampling and caching, belongs to a connector. The same in `tinywebui.config.json` (start from `example.tinywebui.config.json`):
 
 ```json
 {
-  "baseUrl": "https://openrouter.ai/api/v1",
-  "apiKey": "sk-or-...",
-  "model": "deepseek/deepseek-v4.1-flash"
+  "connectors": [
+    {
+      "id": "local",
+      "baseUrl": "http://localhost:11434/v1",
+      "models": [{ "id": "llama", "label": "Llama 3.2", "model": "llama3.2" }]
+    }
+  ]
 }
 ```
 
-`tinywebui.config.json` holds your API keys (and password hash, if you set one) and is gitignored. Keep it that way. Run `npx tinywebui set-password` to sign in with a password instead of the link; you need one to listen on anything other than loopback.
+A connector that needs a key takes `"apiKey": "${NAME}"`, filled in from the environment, or the key typed into Settings.
 
-`npx tinywebui` uses keyword search until you run `npx tinywebui models pull fast` (about 90 MB) to enable hybrid search.
+`tinywebui.config.json` describes the deployment (endpoints, connectors, models, policy) and holds no secrets. A key is either a `${NAME}` reference, filled in from the environment, or kept in `tinywebui.secrets.json` beside it: what the Settings panel saves, and the generated session-signing secret. A key written straight into the config file moves there the next time the server starts. Accounts, password hashes and conversations live in `tinywebui.db`. TinyWebUI keeps the secrets file and the database readable by their owner only; keep them private and backed up.
 
-From a clone, run `npm install && npm start`. With Docker, create the owner password in the persistent volume before starting the service:
+`npx tinywebui` keeps the config, keys, database and embedding models in one folder per user: `~/Library/Application Support/TinyWebUI` on macOS, `%LOCALAPPDATA%\TinyWebUI` on Windows and `~/.local/share/tinywebui` (or `$XDG_DATA_HOME/tinywebui`) on Linux. Run it in a folder that has its own `tinywebui.config.json`, or pass `--config`, to use that instead. It uses keyword search until you run `npx tinywebui models pull fast` (about 90 MB) to enable hybrid search.
+
+From a clone, run `npm install && npm start`. With Docker, start the service and create the administrator with an email address and password in the browser. The email is checked for valid format; TinyWebUI does not send mail or require a mail server for local accounts:
 
 ```bash
 docker compose build
-docker compose run --rm -it tinywebui set-password
 docker compose up -d
 ```
 
-The Compose example publishes port 7777 on the host's loopback interface. The Docker image also accepts `TINYWEBUI_PASSWORD` for a headless first start; use a password of at least 15 characters and keep the container's data volume. Without credentials, a headless start exits before opening a port. The runtime images contain Node.js but no npm/npx; connect MCP servers over HTTP or include their executables in a custom image.
+The Compose example publishes port 7777 on the host's loopback interface. Keep the data volume: it contains the accounts, conversations and local password hashes. `npm start` and `npx tinywebui` default to multiuser setup. To run a local workspace without login, explicitly set `"authMode": "local"` in `tinywebui.config.json`; this mode binds only to loopback and has full access to settings and data, without account management. The runtime images contain Node.js but no npm/npx; connect MCP servers over HTTP or include their executables in a custom image.
 
-The Compose example now stores config in its named data volume. If you used the previous bind-mounted `tinywebui.config.json`, copy its settings into the volume before starting, then run `set-password` there.
+The former password-only `single` mode now fails startup instead of opening without login. To move such an installation to local accounts, set `authMode` to `multiuser`, restart, and create the administrator in the browser. On that first setup, existing unowned chats, files, artifacts, folders and automations move to the new administrator. Remove any `TINYWEBUI_PASSWORD` environment variable; it no longer selects an auth mode.
 
 ## Documentation
 
@@ -99,7 +104,7 @@ The full reference lives at **[tinysuite.dev/docs/tinywebui](https://tinysuite.d
 | [Automations](https://tinysuite.dev/docs/tinywebui/#automations) | Scheduled prompts |
 | [Long chats](https://tinysuite.dev/docs/tinywebui/#long-chats-caching-and-compaction) | Caching and compaction |
 | [Usage statistics](https://tinysuite.dev/docs/tinywebui/#usage-statistics) | Token use and attribution |
-| [Access](https://tinysuite.dev/docs/tinywebui/#access) | Just you, a password, or a team behind SSO |
+| [Access](https://tinysuite.dev/docs/tinywebui/#access) | Local invited users, explicit local mode, or a team behind SSO |
 | [Deployment as code](https://tinysuite.dev/docs/tinywebui/#deployment-as-code) | JavaScript config, locked settings, roles and features |
 | [CLI](https://tinysuite.dev/docs/tinywebui/#cli) | Every command |
 | [Security and limits](https://tinysuite.dev/docs/tinywebui/#security-and-limits) | Exposure, MCP trust, what isn't included |
@@ -109,10 +114,12 @@ In this repository: [docs/deploy.md](docs/deploy.md) is a scripted container dep
 ## Development
 
 ```bash
-npm test        # the whole suite, about 10 seconds
+npm test        # type check, then the whole suite, about 10 seconds
 npm run dev     # restart on changes in src/ and bin/
 ```
 
+The server is TypeScript that Node runs directly, with no build step, so working from a clone needs Node.js 22.18 or later. The npm package ships JavaScript compiled from it (`npm run build`, which `npm pack` runs) and works from 22.13.
+
 [AGENTS.md](AGENTS.md) maps the codebase and says where new code goes. `npm run eval` runs model-behaviour evals from `evals/tasks/` and makes real API calls, so it costs money.
 
 ## License

package/bin/tinywebui.js

@@ -1,22 +1,28 @@
 #!/usr/bin/env node
-import { existsSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, mkdirSync } from 'node:fs';
+import { resolve, dirname, join } from 'node:path';
 import { pathToFileURL } from 'node:url';
-
+import { userDataDir, isInstalled } from '../src/config/data_dir.js';
 const args = process.argv.slice(2);
 const flag = (name, fallback) => {
-  const i = args.indexOf(`--${name}`);
-  return i === -1 ? fallback : args[i + 1];
+    const i = args.indexOf(`--${name}`);
+    return i === -1 ? fallback : args[i + 1];
 };
-
 // `--config <path>` (or `validate <path>`) points every command at a config
 // file, JS or JSON, exactly like $TINYWEBUI_CONFIG does.
 const configArg = flag('config') ?? (args[0] === 'validate' && args[1] && !args[1].startsWith('--') ? args[1] : undefined);
-if (configArg) process.env.TINYWEBUI_CONFIG = resolve(configArg);
-
+if (configArg)
+    process.env.TINYWEBUI_CONFIG = resolve(configArg);
 if (args.includes('--help') || args.includes('-h')) {
-  console.log(`tinywebui [start] [--port 7777] [--host 127.0.0.1] [--config path]
-tinywebui set-password     create or change the owner password
+    console.log(`tinywebui [start] [--port 7777] [--host 127.0.0.1] [--config path]
 tinywebui validate [path]  check the config files; prints the fingerprint, exits 1 on problems
 tinywebui migrate [--check]
                            bring the database to the current schema (--check: exit 1 if behind)
@@ -36,7 +42,10 @@ tinywebui schema           JSON Schema for the config file
 
 Config comes from ./tinywebui.config.js if it exists, then
 ./tinywebui.config.json ($TINYWEBUI_CONFIG may point at either), and MCP
-servers from mcp.json next to it (or $TINYWEBUI_MCP).
+servers from mcp.json next to it (or $TINYWEBUI_MCP). Installed from npm
+(npx, npm install -g) and run where neither file is, it uses the per-user
+folder instead: ${userDataDir()}
+The keys, database and embedding models live beside the config.
 
 tinywebui.config.js exports the options start() takes, as an object or an
 (async) function returning one:
@@ -49,56 +58,63 @@ tinywebui.config.js exports the options start() takes, as an object or an
 Keys under "config" win over the JSON file and are locked in the settings
 panel. See README for the rest.
 `);
-  process.exit(0);
+    process.exit(0);
 }
-
 // Resolve the JS config before src/config/config.js is imported: that module fixes
 // its JSON path at load time from $TINYWEBUI_CONFIG, so a .js path there has
 // to be swapped for the JSON file beside it first.
 const envPath = process.env.TINYWEBUI_CONFIG && resolve(process.env.TINYWEBUI_CONFIG);
 let jsPath = null;
 if (envPath && /\.[cm]?js$/.test(envPath)) {
-  jsPath = envPath;
-  process.env.TINYWEBUI_CONFIG = resolve(dirname(envPath), 'tinywebui.config.json');
-} else if (!envPath) {
-  for (const name of ['tinywebui.config.js', 'tinywebui.config.mjs']) {
-    const p = resolve(process.cwd(), name);
-    if (existsSync(p)) { jsPath = p; break; }
-  }
+    jsPath = envPath;
+    process.env.TINYWEBUI_CONFIG = resolve(dirname(envPath), 'tinywebui.config.json');
+}
+else if (!envPath) {
+    for (const name of ['tinywebui.config.js', 'tinywebui.config.mjs']) {
+        const p = resolve(process.cwd(), name);
+        if (existsSync(p)) {
+            jsPath = p;
+            break;
+        }
+    }
+    // Installed (npx, npm install -g) and not run in a folder with a config of
+    // its own: the per-user data folder, so keys and chats do not end up in
+    // whichever folder the command happened to run in.
+    if (!jsPath && !existsSync(resolve(process.cwd(), 'tinywebui.config.json')) && isInstalled(import.meta.url)) {
+        const dir = userDataDir();
+        mkdirSync(dir, { recursive: true, mode: 0o700 });
+        process.env.TINYWEBUI_CONFIG = join(dir, 'tinywebui.config.json');
+    }
 }
-
 try {
-  let opts = {};
-  if (jsPath && !existsSync(jsPath)) throw new Error(`config file not found: ${jsPath}`);
-  if (jsPath) {
-    const mod = await import(pathToFileURL(jsPath).href);
-    const exported = mod.default ?? mod;
-    opts = (typeof exported === 'function' ? await exported() : exported) || {};
-    // stderr, so a command's stdout stays pure JSON for scripts.
-    console.error(`[tinywebui] options: ${jsPath}`);
-  }
-  if (args[0] === 'set-password') {
-    const { setPassword } = await import('../src/set-password.js');
-    await setPassword(opts);
-    process.exit(0);
-  }
-  const COMMANDS = ['validate', 'effective', 'fingerprint', 'users', 'schema', 'migrate', 'doctor', 'config', 'models'];
-  if (COMMANDS.includes(args[0])) {
-    const { runCli } = await import('../src/cli.js');
-    process.exit(await runCli(args[0], args.slice(1), opts));
-  }
-  if (args[0] && !args[0].startsWith('--') && args[0] !== 'start') {
-    console.error(`[tinywebui] unknown command "${args[0]}" (see --help)`);
+    let opts = {};
+    if (jsPath && !existsSync(jsPath))
+        throw new Error(`config file not found: ${jsPath}`);
+    if (jsPath) {
+        const mod = await import(__rewriteRelativeImportExtension(pathToFileURL(jsPath).href));
+        const exported = mod.default ?? mod;
+        opts = (typeof exported === 'function' ? await exported() : exported) || {};
+        // stderr, so a command's stdout stays pure JSON for scripts.
+        console.error(`[tinywebui] options: ${jsPath}`);
+    }
+    const COMMANDS = ['validate', 'effective', 'fingerprint', 'users', 'schema', 'migrate', 'doctor', 'config', 'models'];
+    if (COMMANDS.includes(args[0])) {
+        const { runCli } = await import('../src/cli.js');
+        process.exit(await runCli(args[0], args.slice(1), opts));
+    }
+    if (args[0] && !args[0].startsWith('--') && args[0] !== 'start') {
+        console.error(`[tinywebui] unknown command "${args[0]}" (see --help)`);
+        process.exit(1);
+    }
+    const { start } = await import('../src/server.js');
+    // Command-line flags beat the file; the file beats the built-in defaults.
+    await start({
+        ...opts,
+        port: Number(flag('port', opts.port ?? process.env.PORT ?? 7777)),
+        host: flag('host', opts.host ?? '127.0.0.1'),
+    });
+}
+catch (err) {
+    console.error(`[tinywebui] ${err.message}`);
     process.exit(1);
-  }
-  const { start } = await import('../src/server.js');
-  // Command-line flags beat the file; the file beats the built-in defaults.
-  await start({
-    ...opts,
-    port: Number(flag('port', opts.port ?? process.env.PORT ?? 7777)),
-    host: flag('host', opts.host ?? '127.0.0.1'),
-  });
-} catch (err) {
-  console.error(`[tinywebui] ${err.message}`);
-  process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywebui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A small, local-first chat workspace for any OpenAI-compatible model, with MCP tools.",
   "type": "module",
   "repository": {
@@ -18,18 +18,30 @@
     "bin",
     "src",
     "public",
-    "README.md"
+    "README.md",
+    "!**/*.ts"
   ],
   "engines": {
     "node": ">=22.13"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": ">=22.18",
+      "onFail": "warn"
+    }
+  },
   "scripts": {
-    "prestart": "node bin/tinywebui.js models ensure",
-    "start": "node bin/tinywebui.js",
-    "predev": "node bin/tinywebui.js models ensure",
-    "dev": "node --watch-path=./src --watch-path=./bin bin/tinywebui.js",
-    "stop": "pkill -f 'bin/tinywebui.js' || true",
-    "test": "node --test --test-timeout=30000",
+    "prestart": "node bin/tinywebui.ts models ensure",
+    "start": "node bin/tinywebui.ts",
+    "predev": "node bin/tinywebui.ts models ensure",
+    "dev": "node --watch-path=./src --watch-path=./bin bin/tinywebui.ts",
+    "stop": "pkill -f 'bin/tinywebui' || true",
+    "typecheck": "tsc -p .",
+    "test": "tsc -p . && node --test --test-timeout=30000",
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "tsc -b --clean tsconfig.build.json",
+    "prepack": "npm run build",
     "eval": "node evals/run.js"
   },
   "dependencies": {
@@ -45,5 +57,10 @@
   "optionalDependencies": {
     "@huggingface/tokenizers": "^0.2.0",
     "onnxruntime-node": "^1.30.0"
+  },
+  "devDependencies": {
+    "@types/heic-convert": "^2.1.1",
+    "@types/node": "^22.20.5",
+    "typescript": "^7.0.2"
   }
 }

package/public/app.js

@@ -11,55 +11,53 @@ import { FEATURE } from './shared/features.js';
 import { initChat, newChat, openChat, sendHeld } from './chat/chat.js';
 import { initTranscript } from './chat/transcript.js';
 import { initQueue } from './chat/queue.js';
-import { initSidebar, loadChats } from './chat/sidebar.js';
+import { initSidebar, loadChats, closeSideDrawer } from './chat/sidebar.js';
 import { initAttachments } from './chat/attachments.js';
 import { initLibrary } from './chat/library.js';
 import { initComposer } from './chat/composer.js';
-import { PANEL, initPanels, openPanel } from './panels/panels.js';
+import { PANEL, initPanels, openPanel, closeAllPanels } from './panels/panels.js';
 import {
-  initSettings, onSettingsOpen, onSettingsClose,
-  loadConfig, loadMcp, loadTools, isLocked, isReadOnly, configuredModel
+  initSettings, onSettingsOpen, onSettingsClose, settingsBack, settingsCanClose,
+  loadConfig, loadMcp, loadTools, isLocked, isReadOnly, configuredModel, needsSetup
 } from './panels/settings.js';
 import { initAutomations, loadAutomations } from './panels/automations.js';
 import { loadUsage } from './panels/usage.js';
 import { initAdmin, loadAdmin } from './panels/admin.js';
 
-/**
- * 'single' mode with no session: trade a launch link's token for a session,
- * or show the sign-in screen and stop there.
- */
+/** Local auth with no session: sign in, claim a fresh install, or accept an invite. */
 async function needsLogin() {
-  const token = new URLSearchParams(location.hash.slice(1)).get('token');
-  // Off the address bar first, so it isn't bookmarked or shared by accident.
-  if (token) history.replaceState(null, '', location.pathname + location.search);
   const me = await loadAccess();
-  if (me.authMode !== 'single' || me.user) return false;
-  if (token && me.login === 'link') {
-    try {
-      await api.post('/api/auth/login', { token });
-      location.reload();
-      return true;
-    } catch { /* stale link: fall through to the sign-in screen */ }
-  }
+  if (me.authMode !== 'multiuser' || me.user) return false;
+  const invite = new URLSearchParams(location.search).get('invite');
+  if (invite) history.replaceState(null, '', location.pathname);
+  const setup = me.needsSetup && !invite;
+  const joining = Boolean(invite);
   const box = $('login');
   box.hidden = false;
-  if (me.login === 'link') {
-    $('loginForm').hidden = true;
-    $('loginLink').hidden = false;
-    // The link pasted into this same tab only changes the hash: start over.
-    addEventListener('hashchange', () => location.reload());
-    return true;
-  }
-  $('loginPassword').focus();
+  $('loginTitle').textContent = setup ? 'Create the administrator' : joining ? 'Join TinyWebUI' : 'TinyWebUI';
+  $('loginHelp').textContent = setup ? 'The first account owns this installation and can invite others.'
+    : joining ? 'Create your account using this invitation.' : '';
+  for (const id of ['loginEmailLabel', 'loginEmail']) $(id).hidden = false;
+  $('loginEmail').required = true;
+  $('loginPassword').autocomplete = setup || joining ? 'new-password' : 'current-password';
+  $('loginSubmit').textContent = setup ? 'Create administrator' : joining ? 'Create account' : 'Sign in';
+  $('loginEmail').focus();
   $('loginForm').onsubmit = async (e) => {
     e.preventDefault();
     $('loginMsg').textContent = '';
     try {
-      await api.post('/api/auth/login', { password: $('loginPassword').value });
-      return location.reload();
+      const account = {
+        email: $('loginEmail').value,
+        password: $('loginPassword').value
+      };
+      await api.post(setup ? '/api/auth/setup' : joining ? '/api/auth/accept-invite' : '/api/auth/login',
+        setup || joining ? { ...account, ...(joining ? { token: invite } : {}) }
+          : { email: account.email, password: account.password });
+      if (joining) location.href = location.pathname;
+      else location.reload();
     } catch (err) {
       $('loginMsg').textContent = err.message;
-      $('loginPassword').select();
+      if (!setup && !joining) $('loginPassword').select();
     }
   };
   return true;
@@ -68,7 +66,12 @@ async function needsLogin() {
 function wire() {
   initTranscript({ openChat });
   initQueue({ sendHeld });
-  initSidebar({ openChat, newChat });
+  // Picking a chat or New from the sidebar is a way out of any open panel,
+  // unless it holds unsaved edits the person chose to keep.
+  initSidebar({
+    openChat: (id) => closeAllPanels() && openChat(id),
+    newChat: () => closeAllPanels() && newChat()
+  });
   initAttachments();
   initLibrary();
   initChat();
@@ -79,21 +82,24 @@ function wire() {
   initSettings();
   initAutomations();
   initPanels({
-    [PANEL.SETTINGS]: { onOpen: onSettingsOpen, onClose: onSettingsClose, closeId: 'cancel' },
+    [PANEL.SETTINGS]: { onOpen: onSettingsOpen, onClose: onSettingsClose, onEscape: settingsBack, canClose: settingsCanClose, closeId: 'cancel' },
     // The raw editor and the tool list are reloaded on open, so they reflect
     // any toggles made from the composer menu.
     [PANEL.MCP]: { onOpen: () => Promise.all([loadMcp(), loadTools()]) },
     [PANEL.AUTOMATIONS]: { onOpen: loadAutomations },
     [PANEL.STATISTICS]: { onOpen: loadUsage },
     [PANEL.ADMIN]: { onOpen: loadAdmin }
-  });
+  }, { onAnyOpen: closeSideDrawer });
 }
 
 if (!(await needsLogin())) {
   wire();
   newChat();
   // Tools render read-only for non-admins, so they wait on the config.
-  loadConfig().then(() => can(FEATURE.TOOLS) && loadTools());
+  loadConfig().then(() => {
+    if (needsSetup()) openPanel(PANEL.SETTINGS);
+    return can(FEATURE.TOOLS) && loadTools();
+  });
   if (can(FEATURE.MCP)) loadMcp();
   initAdmin();
   loadChats();

package/public/chat/composer.js

@@ -210,7 +210,7 @@ function renderTools(body, data) {
 async function buildModelMenu(pop) {
   // Tier 3: the pill is a personal choice among your role's models, saved
   // per user; it never changes anyone else's model.
-  const personal = whoami().authMode === 'trusted-header';
+  const personal = ['multiuser', 'trusted-header'].includes(whoami().authMode);
   const current = personal ? whoami().model : config.model();
   if (!personal && config.isLocked('model')) {
     pop.appendChild(Object.assign(el('div', 'pop-note'), {

package/public/chat/sidebar.js

@@ -299,8 +299,9 @@ export function clearSearch() {
  * thing that reads as broken on a phone even when it technically isn't.
  */
 /**
- * Desktop hides the sidebar outright instead of opening it as a drawer; the
- * same #menu button brings it back, so it means "show sidebar" at any width.
+ * Desktop hides the sidebar outright instead of opening it as a drawer. The
+ * same #menu button does both, and it is on screen at every width -- over the
+ * panels too -- so getting back to the chats is always one press away.
  */
 const COLLAPSE_KEY = 'tinywebui.side.collapsed';
 const narrow = () => matchMedia('(max-width: 720px)').matches;
@@ -321,7 +322,7 @@ function setSideDrawer(open) {
   side.inert = mobile && !open;
   main.inert = mobile && open;
   side.toggleAttribute('aria-hidden', mobile && !open);
-  menu.setAttribute('aria-expanded', String(mobile && open));
+  menu.setAttribute('aria-expanded', String(mobile ? open : !document.body.classList.contains('side-collapsed')));
 
   if (mobile && open) requestAnimationFrame(() => $('new').focus());
   if (mobile && !open && side.contains(document.activeElement)) menu.focus();
@@ -330,6 +331,7 @@ export const closeSideDrawer = () => setSideDrawer(false);
 
 function setCollapsed(on) {
   document.body.classList.toggle('side-collapsed', on);
+  $('menu').setAttribute('aria-expanded', String(!on));
   try { on ? localStorage.setItem(COLLAPSE_KEY, '1') : localStorage.removeItem(COLLAPSE_KEY); } catch { /* per-viewer nicety only */ }
 }
 
@@ -421,8 +423,9 @@ export function initSidebar(deps) {
   });
 
   try { if (localStorage.getItem(COLLAPSE_KEY)) document.body.classList.add('side-collapsed'); } catch { /* as above */ }
-  $('sideCollapse').onclick = () => (narrow() ? closeSideDrawer() : setCollapsed(true));
-  $('menu').onclick = () => (narrow() ? setSideDrawer(!$('side').classList.contains('open')) : setCollapsed(false));
+  $('menu').onclick = () => (narrow()
+    ? setSideDrawer(!$('side').classList.contains('open'))
+    : setCollapsed(!document.body.classList.contains('side-collapsed')));
   $('side-backdrop').onclick = closeSideDrawer;
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && $('side').classList.contains('open')) closeSideDrawer();