One settings surface: App Settings, Session Options and Add Case

[Ark0N]

One visual language for the three modals people actually live in, and a
reordering of each around what you open it for.

App Settings

The document side was wider than it needed to be: every row is text on the left
with its control pinned right, so a 960px shell plus a 62ch cap on descriptions
left roughly 350px of nothing between the two. It is now 760x620 with a 176px
rail and descriptions that run most of the way to their switch. Toggle switches
kept their size; only the space around them changed.

Section order follows what you came for:

1. Updates, carrying only the current version and the update action, which
   is what the modal opens on.
2. Terminal & Input (Local Echo / zerolag).
3. Header & Panels, then the rest.
4. System (paths, automation, remote access) tails the document: set once,
   rarely touched.

Header & Panels gained two things. Every chip now carries the icon of the
button it switches on, so the list reads as the header itself rather than a
column of names, and a live preview sits above them: a scale model of the
app with a header bar, right-docked panels, a toolbar and floating windows,
rebuilt on every chip change so "what does this add" is answered in place,
before saving. The preview owns no icons of its own - it clones .set-chip-ico
out of the chip - so each icon has exactly one copy in index.html and a chip can
never drift from the button it previews.

Session Options and Add Case

Both moved onto the same surface. The set-* rules went from #appSettingsModal
to :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal); an :is()
list takes its most specific argument's specificity and all three are ids, so
every rule kept the weight it had and nothing downstream shifted in the cascade.

What they do NOT share is what the rail means. App Settings stays a table of
contents over one scrolling document; these two really switch, one section
visible and .hidden on the rest, because Summary owns its own scroller,
Respawn is long, and Add Case is six independent forms. Phones get a horizontal
rail strip instead of App Settings' jump pill, which neither of them has.

They also take a size-up App Settings does not: 900px wide, 236px rail, and
height: auto between a 560px floor and 88vh, so the shell is as tall as the
panel showing instead of a fixed box the content rattles in. They are short
panels you act on once, not a document you scan.

Respawn is ordered around what people open it for. Auto-resume on usage
limit is a callout again (accent card, icon, whole card as the hit target): it
is what turns a limit-halted overnight run back on, and as the first row of a
flat list it no longer looked like something you were meant to switch on. Loop
control (status + Enable/Stop) moved above the loop configuration. The three
cycle steps are real checkboxes, not chips - they are numbered steps of one
sequence. The Context tab is renamed Session (label only; data-tab, the
section id and switchOptionsTab('context') are unchanged) with groups
Identity / Context window / Behavior.

Add Case keeps its legacy .form-row markup in all six panels, because
every id in them is read back by session-ui.js and restructuring the forms to
reach the row classes would be a lot of risk for no visual gain. An adapter
block scoped to #createCaseModal .set-doc paints a form row as a row card, its
label as a row label, its .form-hint as a description, and
<details class="advanced-options"> as a collapsed group head.

One trap worth naming: summary { display: flex } drops the browser's own
disclosure triangle, so Clone options, Container settings, Advanced SSH,
Discover existing sessions and Advanced container settings rendered as plain
headings with nothing to say they open. They carry an explicit chevron now,
rotated on [open], with the native marker suppressed in both spellings.

With Add Case moved over, .modal-tabs / .modal-tab-btn / .modal-tab-content
have no users left, so their CSS is deleted from both stylesheets.

Tests and docs

• test/session-options-structure.test.ts (new): rail-to-section pairing, the
  ids openSessionOptions reads, the one-visible-section invariant, and the
  data-claude-only entries external CLIs drop.
• test/app-settings-structure.test.ts: rail and document agree on order,
  Updates leads and carries only the version and the updater, every previewed
  chip has both an icon to clone and a slot that exists, and the retired tab
  classes stay gone.
• test/admin-ui.test.ts: the load-order check matched a bare
  indexOf('session-ui.js'), which the new modal comments shadowed; it matches
  the script tag now.
• docs/architecture-invariants.md gains a "Settings surface" section, and the
  settings paths that moved are repointed across README and docs.

Verification

Driven in a real browser against a live server on an isolated instance, not just
asserted in jsdom: all sections of all three modals render, rail clicks switch
and reset scroll, chips and the preview react live, Save applies to the real
header and survives a reload, an external-CLI session still loses Respawn and
Ralph and lands on Session, the callout toggles exactly once from both the text
and the switch, the collapsed blocks open from a click on the row, and phone
widths keep the horizontal rail strip. Checked on a light skin too, which is
what caught the preview frame painting itself a grey slab from hardcoded black
alphas (it uses skin tokens now).

npm run test:ci green (4870 passed), plus typecheck, lint, prettier,
check:lockfile, check:frontend-syntax and check:public-assets.