cursedbelt 4.7.0 → 5.0.0

package/src/react/chat/usePresence.spec.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, test } from 'bun:test';
+import { act, render } from '@testing-library/react';
+import { PresenceRoster } from './PresenceRoster.js';
+import { presenceUsers, usePresence } from './usePresence.js';
+
+/** A socket the test drives by hand: `open()`, `snapshot(rows)`, `drop()`. */
+class FakeSocket extends EventTarget {
+  static made: FakeSocket[] = [];
+  closed = false;
+  constructor(readonly url: string) {
+    super();
+    FakeSocket.made.push(this);
+  }
+  open() {
+    this.dispatchEvent(new Event('open'));
+  }
+  snapshot(rows: unknown, event = 'presence') {
+    const message = new MessageEvent('message', { data: JSON.stringify({ event, data: rows }) });
+    this.dispatchEvent(message);
+  }
+  drop() {
+    this.dispatchEvent(new Event('close'));
+  }
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    this.dispatchEvent(new Event('close'));
+  }
+}
+
+const NAMES: Record<string, string> = { u1: 'Ada', u2: 'Brian', me: 'Me' };
+
+function Harness({ enabled = true }: { enabled?: boolean }) {
+  const { users, connected } = usePresence({
+    channel: 'rooms',
+    enabled,
+    selfId: 'me',
+    resolveUser: (id) => ({ name: NAMES[id] }),
+    retryMs: [5],
+    location: { protocol: 'https:', host: 'roms.example' },
+    createSocket: (url) => new FakeSocket(url) as unknown as WebSocket,
+  });
+  return (
+    <div>
+      <span data-testid='state'>{connected ? 'on' : 'off'}</span>
+      <span data-testid='names'>{users.map((u) => u.name).join(',')}</span>
+      <PresenceRoster users={users} />
+    </div>
+  );
+}
+
+const last = () => FakeSocket.made[FakeSocket.made.length - 1] as FakeSocket;
+
+describe('presenceUsers', () => {
+  test('one row per user (the earliest tab), arrival order, without the viewer', () => {
+    const users = presenceUsers(
+      [
+        { userId: 'u2', connectedAt: 30 },
+        { userId: 'me', connectedAt: 1 },
+        { userId: 'u1', connectedAt: 20 },
+        { userId: 'u2', connectedAt: 10 },
+      ],
+      'me',
+      (id) => ({ name: NAMES[id] }),
+    );
+    expect(users).toEqual([
+      { id: 'u2', isOnline: true, name: 'Brian' },
+      { id: 'u1', isOnline: true, name: 'Ada' },
+    ]);
+  });
+
+  test("a row's own name wins over the resolver, and a malformed row is skipped", () => {
+    const users = presenceUsers([{ userId: 'u1', name: 'Ada L.' }, { userId: '' } as never, null as never], null, () => ({ name: 'x' }));
+    expect(users).toEqual([{ id: 'u1', isOnline: true, name: 'Ada L.' }]);
+  });
+});
+
+describe('usePresence', () => {
+  test('connects to /ws/<channel> over wss, and a join and a leave redraw the roster', () => {
+    FakeSocket.made = [];
+    const { getByTestId } = render(<Harness />);
+    expect(last().url).toBe('wss://roms.example/ws/rooms');
+    expect(getByTestId('state').textContent).toBe('off');
+
+    act(() => last().open());
+    expect(getByTestId('state').textContent).toBe('on');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u1', connectedAt: 2 }]));
+    expect(getByTestId('names').textContent).toBe('Ada');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u1', connectedAt: 2 }, { userId: 'u2', connectedAt: 3 }]));
+    expect(getByTestId('names').textContent).toBe('Ada,Brian');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u2', connectedAt: 3 }]));
+    expect(getByTestId('names').textContent).toBe('Brian');
+
+    // Another channel's frame is not a presence snapshot.
+    act(() => last().snapshot([{ userId: 'u9' }], 'chat:message'));
+    expect(getByTestId('names').textContent).toBe('Brian');
+  });
+
+  test('🔴 a dropped socket empties the roster, then reconnects and refills it', async () => {
+    FakeSocket.made = [];
+    const { getByTestId } = render(<Harness />);
+    act(() => last().open());
+    act(() => last().snapshot([{ userId: 'u1', connectedAt: 2 }]));
+    expect(getByTestId('names').textContent).toBe('Ada');
+
+    const first = last();
+    act(() => first.drop());
+    expect(getByTestId('state').textContent).toBe('off');
+    expect(getByTestId('names').textContent).toBe('');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 30));
+    });
+    expect(FakeSocket.made.length).toBe(2);
+    expect(last()).not.toBe(first);
+    act(() => last().open());
+    act(() => last().snapshot([{ userId: 'u2', connectedAt: 5 }]));
+    expect(getByTestId('state').textContent).toBe('on');
+    expect(getByTestId('names').textContent).toBe('Brian');
+  });
+
+  test('disabled opens no socket; unmount closes it and does not reconnect', async () => {
+    FakeSocket.made = [];
+    const off = render(<Harness enabled={false} />);
+    expect(FakeSocket.made.length).toBe(0);
+    off.unmount();
+
+    const on = render(<Harness />);
+    act(() => last().open());
+    on.unmount();
+    expect(last().closed).toBe(true);
+    await new Promise((r) => setTimeout(r, 30));
+    expect(FakeSocket.made.length).toBe(1);
+  });
+});

package/src/react/chat/usePresence.ts

@@ -0,0 +1,185 @@
+import { buildChannelSocketUrl, parseWsMessage, type WsLocation } from 'cursedbelt-core/ws-wire';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { PresenceUser } from './types.js';
+
+/**
+ * Who else is here — the CLIENT half of presence, so `PresenceRoster` has something to render.
+ *
+ * Task 078 (owner, 2026-09-19: *"show which other users are on apps"*). The library shipped the
+ * view (`PresenceRoster`) and the server (`cursedbelt-server`'s `createWsHub` with
+ * `presence: true`, whose `getPresence(channel)` is one `{ userId, connectedAt }` row per live
+ * client) and nothing in between — so the roster sat exported with zero consumers, and the one
+ * app that shows presence (`apps/family`, `src/live.ts`) hand-rolled its own socket. This is that
+ * socket, generalised: open `/ws/<channel>`, take every `presence` snapshot the channel
+ * broadcasts, and reconnect with a capped backoff when the socket drops.
+ *
+ * The server side a channel needs is one line in its lifecycle hooks:
+ *
+ *     onConnect: (_c, hub) => hub.broadcast('rooms', 'presence', hub.getPresence('rooms')),
+ *     onDisconnect: (_c, hub) => hub.broadcast('rooms', 'presence', hub.getPresence('rooms')),
+ *
+ * ── What it does with a snapshot ─────────────────────────────────────────────────────────
+ *  · ONE row per user, not per tab — the same person in three tabs is one avatar — keeping the
+ *    earliest `connectedAt`, so the roster's order is "who arrived first" and stable.
+ *  · `selfId` drops the viewer: the roster is who ELSE is here.
+ *  · `resolveUser` turns an id into a name/avatar; the hub deliberately ships only the id (its
+ *    `PresenceEntry` is the "business-safe view" of a client). A row may also carry `name` /
+ *    `avatarUrl` itself, for a channel that broadcasts richer rows.
+ *
+ * ── A dropped socket is an EMPTY roster, not a stale one ─────────────────────────────────
+ * On close the users go to `[]` and `connected` to false until the next snapshot. Showing the
+ * last list while disconnected would tell the viewer someone is here who may have left an hour
+ * ago; an empty strip is merely less informative. Same choice as family's `useLiveTree`.
+ */
+
+/** One presence row as a hub channel broadcasts it (`cursedbelt-server`'s `PresenceEntry`). */
+export interface PresenceEntryLike {
+  userId: string;
+  connectedAt?: number;
+  name?: string;
+  avatarUrl?: string;
+}
+
+export interface UsePresenceOptions {
+  /** The hub channel (`/ws/<channel>`) whose snapshots to follow. */
+  channel: string;
+  /** Room within the channel (`?room=`), when the channel is roomed. */
+  roomId?: string;
+  /** Off ⇒ no socket at all (e.g. signed out). Default true. */
+  enabled?: boolean;
+  /** The viewer's own id — left out of the roster. */
+  selfId?: string | null;
+  /** Name and avatar for an id the snapshot does not carry them for. */
+  resolveUser?: (userId: string) => { name?: string; avatarUrl?: string } | undefined;
+  /** The frame event carrying the snapshot. Default `'presence'`. */
+  event?: string;
+  /** Reconnect backoff, capped at its last entry. */
+  retryMs?: readonly number[];
+  /** Test/SSR seams. Default `window.location` and the global `WebSocket`. */
+  location?: WsLocation;
+  createSocket?: (url: string) => WebSocket;
+}
+
+export interface PresenceSubscription {
+  /** Everybody else on the channel now — pass straight to `<PresenceRoster users={…}>`. */
+  users: PresenceUser[];
+  /** Is the socket open? A closed one also means `users` is `[]`. */
+  connected: boolean;
+}
+
+/** Backoff, capped. A tab left open overnight must not hammer the box. */
+export const PRESENCE_RETRY_MS = [500, 1_000, 2_000, 5_000, 10_000, 30_000] as const;
+
+/**
+ * Collapse a snapshot to one {@link PresenceUser} per user, earliest arrival first, without
+ * `selfId`. Pure — the hook's whole judgement, exported so it is tested without a socket.
+ */
+export function presenceUsers(
+  rows: readonly PresenceEntryLike[],
+  selfId?: string | null,
+  resolveUser?: UsePresenceOptions['resolveUser'],
+): PresenceUser[] {
+  const byUser = new Map<string, PresenceEntryLike>();
+  for (const row of rows) {
+    if (!row || typeof row.userId !== 'string' || row.userId === '') continue;
+    if (selfId != null && row.userId === selfId) continue;
+    const seen = byUser.get(row.userId);
+    if (!seen || (row.connectedAt ?? Infinity) < (seen.connectedAt ?? Infinity)) byUser.set(row.userId, row);
+  }
+  return [...byUser.values()]
+    .sort((a, b) => (a.connectedAt ?? Infinity) - (b.connectedAt ?? Infinity))
+    .map((row) => {
+      const resolved = resolveUser?.(row.userId);
+      const name = row.name ?? resolved?.name;
+      const avatarUrl = row.avatarUrl ?? resolved?.avatarUrl;
+      return {
+        id: row.userId,
+        isOnline: true,
+        ...(name !== undefined ? { name } : {}),
+        ...(avatarUrl !== undefined ? { avatarUrl } : {}),
+      };
+    });
+}
+
+/** The rows in a snapshot frame: the hub's bare array, or `{ users }` / `{ peers }` / `{ presence }`. */
+function rowsOf(data: unknown): PresenceEntryLike[] | null {
+  if (Array.isArray(data)) return data as PresenceEntryLike[];
+  if (data && typeof data === 'object') {
+    for (const key of ['users', 'peers', 'presence'] as const) {
+      const value = (data as Record<string, unknown>)[key];
+      if (Array.isArray(value)) return value as PresenceEntryLike[];
+    }
+  }
+  return null;
+}
+
+export function usePresence(options: UsePresenceOptions): PresenceSubscription {
+  const {
+    channel,
+    roomId,
+    enabled = true,
+    selfId = null,
+    resolveUser,
+    event = 'presence',
+    retryMs = PRESENCE_RETRY_MS,
+    location,
+    createSocket,
+  } = options;
+  const [rows, setRows] = useState<PresenceEntryLike[]>([]);
+  const [connected, setConnected] = useState(false);
+  // The seams and backoff are read through a ref so an inline lambda or array literal in the
+  // caller does not tear the socket down on every render.
+  const seams = useRef({ location, createSocket, retryMs });
+  seams.current = { location, createSocket, retryMs };
+
+  useEffect(() => {
+    const loc = seams.current.location ?? (typeof window !== 'undefined' ? window.location : undefined);
+    if (!enabled || !loc) return;
+    let closed = false;
+    let attempt = 0;
+    let retry: ReturnType<typeof setTimeout> | null = null;
+    let socket: WebSocket | null = null;
+
+    const open = () => {
+      if (closed) return;
+      const url = buildChannelSocketUrl(channel, roomId, loc);
+      const make = seams.current.createSocket ?? ((u: string) => new WebSocket(u));
+      const ws = make(url);
+      socket = ws;
+      ws.addEventListener('open', () => {
+        attempt = 0;
+        setConnected(true);
+      });
+      ws.addEventListener('message', (message) => {
+        const frame = parseWsMessage(String((message as MessageEvent).data));
+        if (!frame || frame.event !== event) return;
+        const next = rowsOf(frame.data);
+        if (next) setRows(next);
+      });
+      ws.addEventListener('close', () => {
+        setConnected(false);
+        setRows([]);
+        if (closed) return;
+        const steps = seams.current.retryMs;
+        const wait = steps[Math.min(attempt, steps.length - 1)] ?? 30_000;
+        attempt += 1;
+        retry = setTimeout(open, wait);
+      });
+      // An `error` is always followed by a `close`; reconnecting from both would schedule two.
+      ws.addEventListener('error', () => ws.close());
+    };
+
+    open();
+    return () => {
+      closed = true;
+      if (retry) clearTimeout(retry);
+      socket?.close();
+      socket = null;
+      setConnected(false);
+      setRows([]);
+    };
+  }, [enabled, channel, roomId, event]);
+
+  const users = useMemo(() => presenceUsers(rows, selfId, resolveUser), [rows, selfId, resolveUser]);
+  return { users, connected };
+}

package/src/react/components/SecretInput.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, useState } from 'react';
+import { type CSSProperties, type KeyboardEvent, type ReactNode, useState } from 'react';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
@@ -118,6 +118,11 @@ export interface SecretInputProps extends StyleableProps<SecretInputSlot> {
   'aria-invalid'?: boolean | 'true' | 'false';
   'aria-describedby'?: string;
   autoFocus?: boolean;
+  /** Disable typing while a form submits (the eye stays usable — seeing what you typed is
+   *  harmless while it is in flight). */
+  disabled?: boolean;
+  /** Fires on Enter in THIS field — the login/rotation forms submit from their last field. */
+  onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   className?: string;
   style?: CSSProperties;
   /** Container height on the shared control-height scale (`--control-h-*`, task
@@ -149,6 +154,8 @@ export const SecretInput = ({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   autoFocus = false,
+  disabled,
+  onEnter,
   className,
   style,
   classNames,
@@ -199,6 +206,10 @@ export const SecretInput = ({
         value={value}
         readOnly={readOnly}
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        onKeyDown={onEnter ? (e) => {
+          if (e.key === 'Enter') onEnter(e);
+        } : undefined}
+        disabled={disabled}
         placeholder={placeholder}
         aria-label={label}
         aria-invalid={ariaInvalid}

package/src/react/components/TooltipImpl.tsx

@@ -44,6 +44,10 @@ export default function TooltipImpl({
   const resolvedSide = placement ?? side ?? 'top';
   const triggerRef = useRef<HTMLElement | null>(null);
   const wasFocusedRef = useRef(false);
+  /** The node a TOUCH disclosure's taps land on — the ⓘ, or the `tap` branch's span. */
+  const touchTriggerRef = useRef<HTMLButtonElement | null>(null);
+  /** True while one of that trigger's own events is being dispatched — see `onTouchOpenChange`. */
+  const inTriggerEventRef = useRef(false);
 
   // Replay the arming gesture. Radix opens on `pointermove` over the trigger and on
   // focus; both already happened before this module existed, so re-dispatch one on
@@ -215,7 +219,16 @@ export default function TooltipImpl({
         sideOffset={6}
         collisionPadding={FLOATING_COLLISION_PADDING}
         style={maxWidth != null ? { maxWidth } : undefined}
-        onPointerDownOutside={() => setOpen(false)}
+        onPointerDownOutside={(e) => {
+          // A touch disclosure's OWN trigger is outside the bubble, but a tap on it is the
+          // toggle's business (it closes an open bubble on its click). Letting the layer
+          // dismiss here as well would close on this pointerdown and re-open on the click.
+          if (!hasHover && touchTriggerRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+            return;
+          }
+          setOpen(false);
+        }}
         className={cn(
           // NOTE: the bubble is a transient hint and must NEVER be a click target —
           // a focus-opened tooltip (e.g. a prompt auto-focusing its safe default
@@ -276,6 +289,42 @@ export default function TooltipImpl({
 
   const toggle = () => setOpen((o) => !o);
 
+  /*
+   * 🔴 On touch, the TAP owns `open`, and Radix's trigger handlers are told nothing they say.
+   *
+   * Tasks 2082 + 2093, measured in a Pixel 7 context on station's Console: the first tap on
+   * every ⓘ did nothing and the second opened it. A real tap fires `pointerdown → pointerup →
+   * focus → click`. Radix's Trigger clears its pointer-down flag on `pointerup`, so the
+   * `focus` that follows reads as KEYBOARD focus and opens; then this branch's click `toggle`
+   * flips that fresh `true` back to `false`. (Radix also composes `onClose` onto every click
+   * and every `pointerdown` on an open trigger, which is the half the tasks first suspected.)
+   *
+   * So while one of the trigger's own events is being dispatched, `onOpenChange` from Radix
+   * is ignored — the flag is set by the handlers below, which `composeEventHandlers` runs
+   * BEFORE Radix's, and cleared in a microtask, which runs once the whole dispatch returns.
+   * Nothing is `preventDefault`ed, so a `mobile="tap"` trigger that is a link still
+   * navigates. Every OTHER close Radix makes still lands: Escape, scroll, and another
+   * tooltip opening. `e2e/tooltip-tap.spec.ts` is the proof, in the `touch` project — it
+   * cannot be a happy-dom case, because happy-dom fires whatever order a spec writes.
+   */
+  const markTriggerEvent = () => {
+    inTriggerEventRef.current = true;
+    queueMicrotask(() => {
+      inTriggerEventRef.current = false;
+    });
+  };
+  const onTouchOpenChange = (next: boolean) => {
+    if (inTriggerEventRef.current) return;
+    setOpen(next);
+  };
+  const touchTriggerProps = {
+    ref: touchTriggerRef,
+    onPointerDown: markTriggerEvent,
+    onFocus: markTriggerEvent,
+    onBlur: markTriggerEvent,
+    onClick: markTriggerEvent,
+  };
+
   // `icon`: render the trigger as-is plus a tappable ⓘ disclosure that owns the
   // tooltip (so a tap on the trigger still does its own action).
   if (mobile === 'icon') {
@@ -287,8 +336,8 @@ export default function TooltipImpl({
             accidental hover to protect against on a touch device — see
             `lib/hoverIntent.ts`, "delay the accident, never the request". */}
         <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
-          <RTooltip.Root open={open} onOpenChange={setOpen}>
-            <RTooltip.Trigger asChild>
+          <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
+            <RTooltip.Trigger asChild {...touchTriggerProps}>
               <button
                 // guardrails-ignore no-raw-action-button: this IS the Tooltip primitive's
                 // own mobile disclosure trigger — Button/IconButton wrap every button in a
@@ -321,8 +370,8 @@ export default function TooltipImpl({
   // as the `icon` branch above — the tap IS the request.
   return (
     <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
-      <RTooltip.Root open={open} onOpenChange={setOpen}>
-        <RTooltip.Trigger asChild>
+      <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
+        <RTooltip.Trigger asChild {...touchTriggerProps}>
           {/* On touch, tapping the trigger toggles the tooltip. Radix's Trigger
               (asChild) merges the real keyboard + ARIA interaction onto this element;
               the bare onClick here is only the tap affordance. */}

package/src/react/index.ts

@@ -47,6 +47,14 @@ export { MessageScroller, type MessageScrollerProps } from './chat/MessageScroll
 export { MessageThread, type MessageThreadProps } from './chat/MessageThread.js';
 export { PresenceRoster, type PresenceRosterProps } from './chat/PresenceRoster.js';
 export { StatusMarker, type StatusMarkerProps } from './chat/StatusMarker.js';
+export {
+  PRESENCE_RETRY_MS,
+  type PresenceEntryLike,
+  type PresenceSubscription,
+  presenceUsers,
+  type UsePresenceOptions,
+  usePresence,
+} from './chat/usePresence.js';
 export { Markdown, type MarkdownProps } from './markdown/Markdown.js';
 export type {
   ChatAttachment,

package/src/react/master-lock/MasterLockDialog.tsx

@@ -28,6 +28,7 @@ import { Button } from "../components/Button.js";
 import { FieldLabel } from "../components/FieldLabel.js";
 import { Input } from "../components/Input.js";
 import { Modal } from "../components/Modal.js";
+import { SecretInput } from "../components/SecretInput.js";
 
 export interface MasterLockDialogProps {
 	open: boolean;
@@ -201,39 +202,42 @@ export function MasterLockDialog({
 					<label htmlFor="ml-current">
 						<FieldLabel>Current master password</FieldLabel>
 					</label>
-					<Input
+					<SecretInput
 						id="ml-current"
-						type="password"
+						label="current master password"
 						autoComplete="current-password"
+						showCopy={false}
 						value={current}
 						disabled={busy}
-						onChange={(event) => setCurrent(event.target.value)}
+						onChange={setCurrent}
 					/>
 				</div>
 				<div className="flex flex-col gap-1.5">
 					<label htmlFor="ml-next">
 						<FieldLabel>New master password</FieldLabel>
 					</label>
-					<Input
+					<SecretInput
 						id="ml-next"
-						type="password"
+						label="new master password"
 						autoComplete="new-password"
+						showCopy={false}
 						value={next}
 						disabled={busy}
-						onChange={(event) => setNext(event.target.value)}
+						onChange={setNext}
 					/>
 				</div>
 				<div className="flex flex-col gap-1.5">
 					<label htmlFor="ml-confirm">
 						<FieldLabel>Repeat the new one</FieldLabel>
 					</label>
-					<Input
+					<SecretInput
 						id="ml-confirm"
-						type="password"
+						label="repeated new master password"
 						autoComplete="new-password"
+						showCopy={false}
 						value={confirm}
 						disabled={busy}
-						onChange={(event) => setConfirm(event.target.value)}
+						onChange={setConfirm}
 						onEnter={() => void changePassword()}
 					/>
 				</div>

package/src/react/master-lock/MasterLockProvider.spec.tsx

@@ -126,3 +126,20 @@ describe("🔴 the rotation never mints a KDF", () => {
 		expect(code).toContain("kdf: MasterLockKdfParams;");
 	});
 });
+
+describe("the account-menu entries (task 106)", () => {
+	test("🔴 'Master passwords…' is a LINK to the accounts page, from the wire, not a string here", async () => {
+		const { MasterLockMenuItems } = await import("./MasterLockProvider.js");
+		const { findByText, getByText } = render(
+			<MasterLockProvider onLocked={() => {}}>
+				<MasterLockMenuItems itemClassName="sam-item" />
+			</MasterLockProvider>,
+		);
+		const link = await findByText("Master passwords…");
+		expect(link.tagName).toBe("A");
+		expect(link.getAttribute("href")).toBe(MASTER_LOCK_PATHS.accounts);
+		expect(link.className).toBe("sam-item");
+		// The idle timeout lives only in the dialog, so its entry stays.
+		expect(getByText("Lock settings…").tagName).toBe("BUTTON");
+	});
+});

package/src/react/master-lock/MasterLockProvider.tsx

@@ -237,31 +237,25 @@ export interface MasterLockMenuItemsProps {
 }
 
 /**
- * The two entries for the account menu — *"a new option in the user dropdown … which is
+ * The entries for the account menu — *"a new option in the user dropdown … which is
  * located near the sign out and switch user options"*. The owner chose that placement
  * deliberately: *"this placement will help make sure it isn't confused with the private
  * collections lock or other locks like that."*
  *
  * Renders nothing when no master password is configured for the app.
  *
- * ── 🔴 The second entry is a LINK now, not a dialog (2026-09-17) ─────────────────────────
- * It used to call {@link MasterLockControl.openSettings}, and that dialog minted a FRESH `kdf`
- * salt on every rotation — the shape the wire had before accounts existed. Every account on an
- * app now derives under ONE shared descriptor, so honouring that salt would store a verifier
- * hash nothing could ever match: the owner sets a new password, the rotation logs him out, and
- * neither the old nor the new one opens the app. `cursedbelt-server`'s guard therefore answers
- * that shape `409 {"error":"stale-client"}` — deliberately distinguishable from a wrong
- * password, because it describes a broken CLIENT. So the entry did not merely look wrong; it
- * refused, and the owner could lock a site and enroll a first password but could not CHANGE one.
+ * ── The second entry is a LINK to the accounts page (task 106, 2026-09-23) ─────────────────
+ * `cursedbelt-server` serves `GET /__lock/accounts` from the same guard that serves the lock
+ * page: server-rendered, listing the accounts and adding, renaming and rotating them. So the
+ * entry is an `<a href>`, not a button — the target is a same-origin page, so there is nothing
+ * for this bundle to open and nothing for it to keep in step — and the path is
+ * `MASTER_LOCK_PATHS.accounts` from `cursedbelt-core`'s wire, never a string here, because a
+ * second copy of the wire in the design system is what `wire.ts`'s header exists to prevent.
  *
- * `cursedbelt-server` serves a richer replacement at `GET /__lock/accounts`, from the same guard
- * that serves the lock page: server-rendered, content-negotiated, listing the accounts and
- * adding/renaming them as well as rotating. This package does NOT link to it yet — the path
- * constant lives in `cursedbelt-core@2`'s wire and this package is still on `^1.1.0`, so the
- * link is a task, not a one-liner (`tasks/Not_Started`, filed 2026-09-17). What IS fixed here
- * is the dialog itself: `MasterLockDialog` no longer mints a salt, so this entry works again
- * rather than 409ing. `apps/collections` links to the page directly from its own rail in the
- * meantime, and says why in a comment there.
+ * The THIRD entry keeps the dialog, because the dialog also owns the idle timeout, which the
+ * accounts page does not. (History: until 2026-09-17 the dialog minted a fresh `kdf` salt on
+ * every rotation and the server refused it `409 stale-client`; it derives under the app's
+ * existing descriptor now, so both surfaces rotate correctly.)
  */
 export function MasterLockMenuItems({ close, itemClassName }: MasterLockMenuItemsProps) {
 	const lock = useMasterLock();
@@ -283,6 +277,9 @@ export function MasterLockMenuItems({ close, itemClassName }: MasterLockMenuItem
 			>
 				🔒 Lock this site
 			</button>
+			<a href={MASTER_LOCK_PATHS.accounts} className={cls} onClick={() => close?.()}>
+				Master passwords…
+			</a>
 			<button
 				// guardrails-ignore no-raw-action-button: see the sibling above — it must match
 				// the host menu's own rows, not this design system's buttons.
@@ -293,7 +290,7 @@ export function MasterLockMenuItems({ close, itemClassName }: MasterLockMenuItem
 					lock.openSettings();
 				}}
 			>
-				Master password…
+				Lock settings…
 			</button>
 		</>
 	);