@kabmo-labs/kabmo 0.0.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kabmo-labs/kabmo",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Web console and diagnostic workbench for AI coding agents — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
@@ -53,6 +53,7 @@
     "lint": "tsc --noEmit",
     "test": "bun test",
     "test:e2e": "playwright test --config tests/e2e/playwright.config.ts",
+    "readme:media": "bun run scripts/readme-media.ts",
     "typecheck:e2e": "tsc --noEmit -p tests/e2e",
     "publish:plugins": "bash .github/scripts/publish-plugin-packages.sh packages/kabmo-sdk packages/kabmo-ui"
   },

package/public/kabmo-wordmark.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Kabmo wordmark — the app icon's K lockup with the word beside it.
+     The word is Inter ExtraBold (the face index.html loads), outlines at a
+     100-unit cap height; the plate is the icon's own 64-unit tile scaled to
+     1.5625 x cap so the K keeps its proportions. Tracking -0.025em, the a
+     tucked 0.28em into the plate, the b->m gap widened 0.02em — the same
+     values the app's BrandWordmark uses, measured there. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -128.12 486.38 156.25" width="486.38" height="156.25" role="img" aria-label="Kabmo">
+  <title>Kabmo</title>
+  <defs>
+    <linearGradient id="kabmo-ab" gradientUnits="userSpaceOnUse" x1="117.76" y1="0" x2="279.42" y2="0">
+      <stop offset="0" stop-color="#f59e0b"/>
+      <stop offset="1" stop-color="#ea580c"/>
+    </linearGradient>
+    <style>
+      /* One ink for every background. A README embeds this as an image, and a
+         prefers-color-scheme query inside such an image follows the CONTAINER
+         only in Chromium — WebKit resolves it from the OS, so a GitHub-dark
+         page on a light OS rendered near-black on near-black. */
+      .kabmo-mo { fill: #7e7a72; }
+    </style>
+  </defs>
+  <rect width="156.25" height="156.25" y="-128.12" rx="34.18" fill="#0b5d3b"/>
+  <g fill="none" stroke-width="17.09" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M48.83 -91.5V-8.5" stroke="#f7f4ea"/>
+    <path d="M48.83 -50 102.54 -91.5" stroke="#f26522"/>
+    <path d="M48.83 -50 102.54 -8.5" stroke="#f7f4ea"/>
+  </g>
+  <path fill="url(#kabmo-ab)" d="M146.49 1.34Q139.31 1.34 133.7 -1.11Q128.1 -3.56 124.95 -8.49Q121.79 -13.42 121.79 -20.81Q121.79 -27.05 123.97 -31.34Q126.15 -35.64 130.05 -38.32Q133.94 -41.01 138.97 -42.42Q144.01 -43.83 149.71 -44.3Q156.09 -44.83 159.98 -45.47Q163.87 -46.11 165.68 -47.38Q167.5 -48.66 167.5 -50.94L167.5 -51.21Q167.5 -53.83 166.29 -55.64Q165.08 -57.45 162.8 -58.39Q160.52 -59.33 157.29 -59.33Q154.07 -59.33 151.56 -58.39Q149.04 -57.45 147.43 -55.7Q145.82 -53.96 145.15 -51.61L123.94 -54.36Q125.42 -60.81 129.74 -65.67Q134.07 -70.54 141.09 -73.26Q148.1 -75.97 157.5 -75.97Q164.48 -75.97 170.55 -74.33Q176.62 -72.68 181.19 -69.5Q185.75 -66.31 188.3 -61.64Q190.85 -56.98 190.85 -50.94L190.85 0L168.84 0L168.84 -10.54L168.23 -10.54Q166.22 -6.64 163.1 -4.03Q159.98 -1.41 155.85 -0.03Q151.72 1.34 146.49 1.34ZM153.6 -14.16Q157.56 -14.16 160.75 -15.77Q163.94 -17.38 165.82 -20.2Q167.7 -23.02 167.7 -26.71L167.7 -33.89Q166.69 -33.36 165.18 -32.89Q163.67 -32.42 161.86 -32.05Q160.05 -31.68 158.23 -31.38Q156.42 -31.07 154.74 -30.81Q151.32 -30.34 148.91 -29.19Q146.49 -28.05 145.21 -26.24Q143.94 -24.43 143.94 -21.88Q143.94 -19.4 145.21 -17.68Q146.49 -15.97 148.64 -15.07Q150.78 -14.16 153.6 -14.16ZM247.95 1.07Q242.25 1.07 238.05 -0.84Q233.86 -2.75 231.11 -5.77Q228.35 -8.79 226.88 -12.15L226.07 -12.15L226.07 0L202.92 0L202.92 -100L226.34 -100L226.34 -62.15L226.88 -62.15Q228.29 -65.57 231.01 -68.72Q233.72 -71.88 237.92 -73.93Q242.11 -75.97 248.09 -75.97Q256.01 -75.97 262.82 -71.85Q269.63 -67.72 273.82 -59.16Q278.02 -50.6 278.02 -37.45Q278.02 -24.7 273.99 -16.14Q269.97 -7.58 263.12 -3.26Q256.27 1.07 247.95 1.07ZM239.97 -17.18Q244.46 -17.18 247.58 -19.7Q250.7 -22.21 252.31 -26.81Q253.93 -31.41 253.93 -37.45Q253.93 -43.56 252.31 -48.09Q250.7 -52.62 247.62 -55.13Q244.53 -57.65 239.97 -57.65Q235.47 -57.65 232.31 -55.2Q229.16 -52.75 227.48 -48.22Q225.8 -43.69 225.8 -37.45Q225.8 -31.34 227.48 -26.78Q229.16 -22.21 232.35 -19.7Q235.54 -17.18 239.97 -17.18Z"/>
+  <path class="kabmo-mo" fill="#7e7a72" d="M289.88 0L289.88 -75.03L311.43 -75.03L312.77 -55.57L311.16 -55.57Q312.9 -62.89 316.36 -67.38Q319.82 -71.88 324.41 -73.96Q329.01 -76.04 334.11 -76.04Q342.16 -76.04 347.1 -70.87Q352.03 -65.7 354.71 -53.96L352.1 -53.96Q353.91 -61.81 357.8 -66.71Q361.69 -71.61 366.93 -73.83Q372.16 -76.04 377.8 -76.04Q384.85 -76.04 390.25 -72.99Q395.65 -69.93 398.74 -64.26Q401.83 -58.59 401.83 -50.6L401.83 0L378.47 0L378.47 -45.3Q378.47 -51.01 375.49 -53.96Q372.5 -56.91 367.87 -56.91Q364.58 -56.91 362.13 -55.44Q359.68 -53.96 358.41 -51.31Q357.13 -48.66 357.13 -45.03L357.13 0L334.65 0L334.65 -45.64Q334.65 -50.81 331.76 -53.86Q328.88 -56.91 324.18 -56.91Q320.96 -56.91 318.51 -55.44Q316.06 -53.96 314.68 -51.24Q313.31 -48.52 313.31 -44.56L313.31 0ZM448.73 1.41Q436.98 1.41 428.53 -3.46Q420.07 -8.32 415.54 -17.01Q411.01 -25.7 411.01 -37.25Q411.01 -48.86 415.54 -57.55Q420.07 -66.24 428.53 -71.11Q436.98 -75.97 448.73 -75.97Q460.47 -75.97 468.93 -71.11Q477.39 -66.24 481.88 -57.55Q486.38 -48.86 486.38 -37.25Q486.38 -25.7 481.88 -17.01Q477.39 -8.32 468.93 -3.46Q460.47 1.41 448.73 1.41ZM448.73 -16.51Q453.22 -16.51 456.31 -19.13Q459.4 -21.74 460.98 -26.44Q462.55 -31.14 462.55 -37.38Q462.55 -43.62 460.98 -48.29Q459.4 -52.95 456.31 -55.5Q453.22 -58.05 448.73 -58.05Q444.23 -58.05 441.14 -55.5Q438.06 -52.95 436.48 -48.29Q434.9 -43.62 434.9 -37.38Q434.9 -31.14 436.48 -26.44Q438.06 -21.74 441.14 -19.13Q444.23 -16.51 448.73 -16.51Z"/>
+</svg>

package/src/cli/lib/commands/update.js

@@ -26,6 +26,21 @@ async function liveInstances(options) {
   return selectRestartTargets(await listLiveInstances(), Boolean(options?.all));
 }
 
+/**
+ * The context a replacement is spawned from.
+ *
+ * After a RENAME the installed package is not the one this command runs out of
+ * (`bun add -g @kabmo-labs/kabmo` leaves the pre-rename package untouched on
+ * disk), so restarting from `ctx.pkgRoot` relaunches the build the update just
+ * replaced — measured: the console came back as the OLD version after a
+ * successful move to the new one. The installed copy's own root wins whenever
+ * the update reported one.
+ */
+export function restartCtx(ctx, installed) {
+  if (!installed || typeof installed.root !== 'string' || installed.root.length === 0) return ctx;
+  return { ...ctx, pkgRoot: installed.root, bin: installed.bin ?? ctx.bin };
+}
+
 async function restartInstances(options, ctx) {
   const restarted = [];
   const skipped = [];
@@ -103,7 +118,7 @@ export async function run(options, ctx) {
     // one JSON document.
     if (result.success && result.updated && shouldRestart) configure({ json: false, quiet: true });
     const { restarted, skipped, failed } = result.success && result.updated && shouldRestart
-      ? await restartInstances(options, ctx)
+      ? await restartInstances(options, restartCtx(ctx, result.installed))
       : { restarted: [], skipped: [], failed: [] };
     printJson({ ...result, restarted, skipped, failed });
     if (!result.success || failed.length > 0) process.exitCode = 1;
@@ -124,7 +139,7 @@ export async function run(options, ctx) {
     return;
   }
 
-  const { restarted, skipped, failed } = await restartInstances(options, ctx);
+  const { restarted, skipped, failed } = await restartInstances(options, restartCtx(ctx, result.installed));
   if (restarted.length === 0 && skipped.length === 0) {
     log('No running instance to restart.');
   }

package/src/cli/lib/commands/update.test.js

@@ -0,0 +1,36 @@
+// The context `kabmo update` restarts from.
+//
+// Pinned because getting it wrong is silent and expensive: after a RENAME the
+// installed package is a different directory from the one this command runs
+// out of, and restarting from `ctx.pkgRoot` relaunches the build the update
+// just replaced. Measured on the 4.23.1 → 0.0.1 move: the console came back as
+// the old version while the update reported success.
+
+import { describe, expect, test } from 'bun:test';
+
+import { restartCtx } from '@/cli/lib/commands/update.js';
+
+const ctx = { cwd: '/work', pkgRoot: '/global/node_modules/ompchamber', version: '4.23.1', bin: 'ompchamber' };
+
+describe('restartCtx', () => {
+  test('spawns the replacement from the copy the update installed', () => {
+    const installed = {
+      root: '/global/node_modules/@kabmo-labs/kabmo',
+      packageName: '@kabmo-labs/kabmo',
+      bin: 'kabmo',
+      cli: '/global/node_modules/@kabmo-labs/kabmo/src/cli/kabmo.js',
+    };
+    expect(restartCtx(ctx, installed)).toEqual({
+      ...ctx,
+      pkgRoot: '/global/node_modules/@kabmo-labs/kabmo',
+      bin: 'kabmo',
+    });
+  });
+
+  test('keeps this command\u2019s own root when the update reported none', () => {
+    // A checkout, or a run whose install could not be read: the copy that was
+    // updated IS this one, so nothing moves.
+    expect(restartCtx(ctx, null)).toBe(ctx);
+    expect(restartCtx(ctx, { root: '' })).toBe(ctx);
+  });
+});

package/src/client/bootstrap.d.ts

@@ -22,6 +22,14 @@ export interface KabmoBootstrap {
    * while this fact was missing, and the only way to ask was a second request.
    */
   authEnabled?: boolean;
+  /**
+   * The Android shell's version, when this page was requested by the APK
+   * (`KabmoAndroid/<version>` in the User-Agent). Null in every browser.
+   *
+   * The sidebar uses it to decide whether a download button applies at all, and
+   * whether this install is behind the published APK.
+   */
+  shellVersion?: string | null;
 }
 
 declare global {

package/src/client/components/auth/login-screen/index.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * The login screen's header.
+ *
+ * It is the product's own lockup — the mark's green plate and the word — and
+ * nothing else: the key glyph that used to sit above it was a second icon for a
+ * screen whose only control is already labelled "Password". The assertions are
+ * about the RENDERED tree, because the failure this guards is a screen that
+ * still looks right in a class list while drawing two marks.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { LoginScreen } from '@/client/components/auth/login-screen';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+/** The runner's own globals, restored on teardown — deleting them would strip natives later files need. */
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+const nativeFetch = globalThis.fetch;
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  // The screen re-checks the session on mount; an unanswerable probe leaves the
+  // form alone, which is the state under test.
+  target.fetch = async () => {
+    throw new Error('offline');
+  };
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+  target.fetch = nativeFetch;
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+});
+
+async function mount(): Promise<HTMLElement> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(LoginScreen, {}), container);
+  });
+  return container;
+}
+
+describe('LoginScreen header', () => {
+  test('draws the wordmark as the header, with the mark in it', async () => {
+    const el = await mount();
+    const heading = el.querySelector('h1');
+    expect(heading).toBeTruthy();
+    // The mark's own geometry, not a font letter: the plate plus three strokes.
+    const mark = heading?.querySelector('svg[viewBox="0 0 64 64"]');
+    expect(mark).toBeTruthy();
+    expect(mark?.querySelector('rect')).toBeTruthy();
+    expect(mark?.querySelectorAll('path').length).toBe(3);
+    // Hero size, so the lockup is the screen's identity rather than a caption.
+    expect(heading?.querySelector('span')?.className).toContain('text-3xl');
+  });
+
+  test('carries no second icon', async () => {
+    const el = await mount();
+    // The header holds exactly one SVG — the mark. A key glyph above it would be
+    // a second. The field's eye toggle is a CONTROL, not a mark, so it is
+    // deliberately outside this count.
+    const heading = el.querySelector('h1');
+    expect(heading?.querySelectorAll('svg').length).toBe(1);
+    expect(heading?.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 64 64');
+  });
+
+  test('still names the product for assistive tech and keeps the form', async () => {
+    const el = await mount();
+    expect(el.textContent).toContain('Kabmo');
+    const password = el.querySelector('input[type="password"]');
+    expect(password?.getAttribute('aria-label')).toBe('Password');
+    expect(el.querySelector('button[type="submit"]')?.textContent).toContain('Sign in');
+  });
+});

package/src/client/components/auth/login-screen/index.tsx

@@ -20,12 +20,13 @@
 
 import { useEffect, useState } from 'preact/hooks';
 import type { FunctionComponent } from 'preact/compat';
-import { KeyRound, Loader2 } from 'lucide-preact';
+import { Eye, EyeOff, Loader2 } from 'lucide-preact';
 import { login, probeSession } from '@/client/hooks/ui/auth';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 
 export const LoginScreen: FunctionComponent = () => {
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [trustDevice, setTrustDevice] = useState(false);
   const [error, setError] = useState('');
   const [busy, setBusy] = useState(false);
@@ -76,31 +77,51 @@ export const LoginScreen: FunctionComponent = () => {
   return (
     <div className="min-h-dvh flex items-center justify-center bg-canvas text-ink px-4">
       <form onSubmit={submit} className="w-full max-w-xs space-y-4">
-        <div className="space-y-1 text-center">
-          <KeyRound size={28} className="mx-auto text-ink/60" />
-          {/* The sidebar header's brand: one wordmark, so the login screen and
-              the app cannot disagree about what the product is called. */}
-          <h1 className="font-bold text-sm tracking-tight flex items-center justify-center">
-            <BrandWordmark />
+        <div className="space-y-2 text-center">
+          {/* The product's own lockup is the header here: one wordmark, drawn
+              at hero size, so the login screen and the app cannot disagree
+              about what the product is called. No second icon — the K *is* the
+              icon, and a key glyph above it said nothing the field's own label
+              does not. The eye in the field is a control, not a second mark. */}
+          <h1 className="flex items-center justify-center">
+            <BrandWordmark className="text-3xl" />
           </h1>
           <p className="text-xs text-ink/60">This instance is password protected.</p>
         </div>
 
-        <input
-          type="password"
-          autoComplete="current-password"
-          autoFocus
-          value={password}
-          onInput={(event) => {
-            setPassword(event.currentTarget.value);
-            if (error) setError('');
-          }}
-          placeholder="Password"
-          aria-label="Password"
-          aria-invalid={error ? true : undefined}
-          disabled={busy}
-          className="w-full bg-paper border border-ink/20 rounded-lg px-3 py-2 text-sm text-ink placeholder-ink/40 focus:outline-none focus:border-ink/50 transition-colors"
-        />
+        <div className="relative">
+          <input
+            type={showPassword ? 'text' : 'password'}
+            autoComplete="current-password"
+            autoFocus
+            value={password}
+            onInput={(event) => {
+              setPassword(event.currentTarget.value);
+              if (error) setError('');
+            }}
+            placeholder="Password"
+            aria-label="Password"
+            aria-invalid={error ? true : undefined}
+            disabled={busy}
+            className="w-full bg-paper border border-ink/20 rounded-lg pl-3 pr-10 py-2 text-sm text-ink placeholder-ink/40 focus:outline-none focus:border-ink/50 transition-colors"
+          />
+          {/* The eye is a `type` toggle, not a second field: the value lives in
+              one state slot either way, so revealing it cannot change what is
+              submitted. It is a real button with its own label because the
+              alternative — a bare `<svg onClick>` — is unreachable by keyboard
+              and unnamed for assistive tech. */}
+          <button
+            type="button"
+            onClick={() => setShowPassword((shown) => !shown)}
+            disabled={busy}
+            title={showPassword ? 'Hide password' : 'Show password'}
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+            aria-pressed={showPassword}
+            className="absolute inset-y-0 right-0 flex items-center px-3 text-ink/50 hover:text-ink disabled:opacity-40 transition-colors cursor-pointer disabled:cursor-default"
+          >
+            {showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
+          </button>
+        </div>
 
         <label className="flex items-center gap-2 text-xs text-ink/70">
           <input

package/src/client/components/auth/login-screen/password-toggle.test.tsx

@@ -0,0 +1,121 @@
+/**
+ * The password field's visibility toggle.
+ *
+ * The eye is a `type` switch on the SAME input, so what it must not do is move
+ * the value: a reveal that rebuilt the field would clear the credential the
+ * user just typed. The assertions are about the rendered tree and the input's
+ * own `type`/`value`, because a class list proves nothing about either.
+ *
+ * The header's own assertions live in `index.test.tsx`; this file covers the
+ * control beside the field and nothing else.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { LoginScreen } from '@/client/components/auth/login-screen';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+/** The runner's own globals, restored on teardown — deleting them would strip natives later files need. */
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+const nativeFetch = globalThis.fetch;
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  // The screen re-checks the session on mount; an unanswerable probe leaves the
+  // form alone, which is the state under test.
+  target.fetch = async () => {
+    throw new Error('offline');
+  };
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+  target.fetch = nativeFetch;
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+});
+
+async function mount(): Promise<HTMLElement> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(LoginScreen, {}), container);
+  });
+  return container;
+}
+
+/** The one field the form submits — matched by its label, never by `type`, which is what changes. */
+function passwordField(el: HTMLElement): HTMLInputElement | null {
+  return el.querySelector<HTMLInputElement>('input[aria-label="Password"]');
+}
+
+describe('LoginScreen password visibility', () => {
+  test('starts masked, with a labelled toggle beside the field', async () => {
+    const el = await mount();
+    expect(passwordField(el)?.type).toBe('password');
+    const toggle = el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]');
+    expect(toggle).toBeTruthy();
+    // A real button, not an svg with a click handler: keyboard reachable.
+    expect(toggle?.getAttribute('type')).toBe('button');
+    expect(toggle?.getAttribute('title')).toBe('Show password');
+    expect(toggle?.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('reveals the same field and puts it back, keeping the value', async () => {
+    const el = await mount();
+    await act(async () => {
+      const input = passwordField(el);
+      if (input) {
+        input.value = 's3cret';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+    expect(passwordField(el)?.value).toBe('s3cret');
+
+    await act(async () => el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]')?.click());
+    expect(passwordField(el)?.type).toBe('text');
+    expect(passwordField(el)?.value).toBe('s3cret');
+    const hide = el.querySelector<HTMLButtonElement>('button[aria-label="Hide password"]');
+    expect(hide?.getAttribute('aria-pressed')).toBe('true');
+    expect(hide?.getAttribute('title')).toBe('Hide password');
+
+    await act(async () => hide?.click());
+    expect(passwordField(el)?.type).toBe('password');
+    expect(passwordField(el)?.value).toBe('s3cret');
+  });
+
+  test('the toggle is disabled while a sign-in is in flight', async () => {
+    const el = await mount();
+    await act(async () => {
+      const input = passwordField(el);
+      if (input) {
+        input.value = 's3cret';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+    // The submit handler awaits `login`, so the in-flight state is observable
+    // in the same tick the form is submitted.
+    await act(async () => {
+      el.querySelector<HTMLFormElement>('form')?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    });
+    expect(el.querySelector<HTMLButtonElement>('button[aria-label="Show password"]')?.disabled).toBe(true);
+    expect(passwordField(el)?.disabled).toBe(true);
+  });
+});

package/src/client/components/common/batch-selection/BatchActionBar.test.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The batch bar's contract, rendered.
+ *
+ * Three properties are load-bearing and each is a way a batch delete can go
+ * wrong: the bar names the mode's noun (a session batch that says "workspace"
+ * deletes the wrong thing), Delete is refused with nothing selected, and
+ * Select-all is refused once everything already is — a control that looks
+ * available but does nothing is how a user concludes the feature is broken.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { BatchActionBar } from '@/client/components/common/batch-selection/BatchActionBar';
+import type { BatchActionBarProps } from '@/client/components/common/batch-selection/BatchActionBar';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+afterEach(() => {
+  container?.remove();
+});
+
+async function mount(overrides: Partial<BatchActionBarProps> = {}) {
+  const calls = { selectAll: 0, unselectAll: 0, del: 0, cancel: 0 };
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(BatchActionBar, {
+      mode: 'session',
+      count: 0,
+      total: 3,
+      busy: false,
+      onSelectAll: () => { calls.selectAll += 1; },
+      onUnselectAll: () => { calls.unselectAll += 1; },
+      onDelete: () => { calls.del += 1; },
+      onCancel: () => { calls.cancel += 1; },
+      ...overrides,
+    }), container);
+  });
+  return { el: container, calls };
+}
+
+function buttonContaining(el: HTMLElement, text: string): HTMLButtonElement | null {
+  return Array.from(el.querySelectorAll('button'))
+    .find((button) => (button.textContent ?? '').includes(text)) as HTMLButtonElement ?? null;
+}
+
+describe('BatchActionBar', () => {
+  test('counts the selection against the scope, in the mode\'s noun', async () => {
+    const { el } = await mount({ count: 2, total: 5, scopeLabel: 'kabmo' });
+    expect(el.textContent).toContain('2');
+    expect(el.textContent).toContain('of 5 sessions selected');
+    expect(el.textContent).toContain('in kabmo');
+  });
+
+  test('workspace mode names workspaces and drops the scope clause', async () => {
+    const { el } = await mount({ mode: 'workspace', count: 1, total: 4, scopeLabel: 'kabmo' });
+    expect(el.textContent).toContain('of 4 workspaces selected');
+    expect(el.textContent).not.toContain('in kabmo');
+  });
+
+  test('Delete is refused with nothing selected', async () => {
+    const { el, calls } = await mount({ count: 0 });
+    const del = buttonContaining(el, 'Delete');
+    expect(del?.disabled).toBe(true);
+    await act(async () => { del?.click(); });
+    expect(calls.del).toBe(0);
+  });
+
+  test('Delete is enabled with a selection and reports its handler', async () => {
+    const { el, calls } = await mount({ count: 2 });
+    const del = buttonContaining(el, 'Delete');
+    expect(del?.disabled).toBe(false);
+    await act(async () => { del?.click(); });
+    expect(calls.del).toBe(1);
+  });
+
+  test('Select all is refused once everything is selected', async () => {
+    const { el } = await mount({ count: 3, total: 3 });
+    expect(buttonContaining(el, 'Select all')?.disabled).toBe(true);
+  });
+
+  test('Unselect all is refused with nothing selected', async () => {
+    const { el } = await mount({ count: 0 });
+    expect(buttonContaining(el, 'Unselect all')?.disabled).toBe(true);
+  });
+
+  test('both directions are separate controls and both report', async () => {
+    const { el, calls } = await mount({ count: 1, total: 3 });
+    await act(async () => {
+      buttonContaining(el, 'Select all')?.click();
+      buttonContaining(el, 'Unselect all')?.click();
+    });
+    expect(calls.selectAll).toBe(1);
+    expect(calls.unselectAll).toBe(1);
+  });
+
+  test('a running delete disables every control and says so', async () => {
+    const { el } = await mount({ count: 2, busy: true });
+    expect(el.textContent).toContain('Deleting…');
+    for (const button of Array.from(el.querySelectorAll('button'))) {
+      expect((button as HTMLButtonElement).disabled).toBe(true);
+    }
+  });
+});