Section nav into the top bar + a design pass on the Roster

[ANonABento]

Section nav moves into the top bar

The left rail is gone. Board / Roster are now icon buttons on the left of the workspace tab bar, using the identical recipe to the cluster on the right — h-8 w-8, motion scale 1.05/0.95, 20×20 solid icon, bg-accent/15 text-accent when active. The header reads as one row of controls instead of two systems, and the app shell loses a level of nesting plus the ~48px column the rail occupied.

Design pass

The codebase already has a mature token system, so the job here was conformance, not inventing a look. Auditing my own roster code against it turned up real drift — all of it mine:

Problem	Evidence	Fix
Invented type sizes	text-[10.5px] / text-[9.5px] existed only in roster files; text-[13px] in one other place app-wide	Normalized to text-[10px] / text-[11px] / text-xs / text-sm
Invented colours	runtime chips used raw text-[#56c2d6], bg-[#b58cff] in a codebase that uses semantic tokens throughout	Runtime is stated in words; the portrait already distinguishes agents and the toolbar already filters, so the hue was decoration
Non-standard controls	my inputs/buttons/modals diverged from script-editor.tsx	Matched exactly — header with X, scrollable body, footer
Missing focus rings	several interactive elements	Added

Three things only visible on screen

Found by driving the app in a real browser rather than reasoning about the markup:

1. The header stopped at the grid column, so the dossier's content floated with nothing to align to. It now spans both columns.
2. The dossier's label gutter was w-24 for ~46px labels, leaving a visible dead channel between every label and its value. Now w-16.
3. Below lg the dossier was hidden — so on a narrow window, selecting an agent did nothing at all. It now stacks under the grid, with the portrait capped so it doesn't stretch full-bleed.

Consistency beyond my own code

• Discord, Runtime and Debug were the only settings nav rows without an icon, which made the sidebar read as two half-finished lists. Added, same 20×20 solid shape as their siblings.
• Extracted ConfirmDialog — I'd hand-rolled the same delete confirmation twice. (shared/dialog.tsx exists but nothing uses it; the real house pattern is the overlay, so this follows that.)
• Cut copy that repeated itself: the dossier stated the runtime three times on one screen, and the Skills tab's intro repeated its own nav hint verbatim.

Verification

• tsc --noEmit, eslint src/, IPC check (209 commands), vitest run → 429, production build clean
• Walked board → roster → both dossier shapes → editor → skills at 1440px and 900px in Chrome, including a reload to confirm the selected section persists