Settings-app refinement round 2 (owner review): toggle fix, shared model dropdown, groups, graph-view graying, pruned hints

- Toggle knob (bug report): the knob span had no left anchor, so it sat
  at its inline static position — right-edge in off, overflowing in on.
  Now left-0 + the intended 2px/18px translate; verified live: 3px from
  left when off, 1px right inset both states.
- Role model/thinking dropdowns (owner ask): the EXACT chat model
  selector dropdown, not a lookalike — the fuzzy-search + arrow-walk +
  Enter machine moved from model-picker.tsx into the shared
  components/settings/model-menu.tsx (ModelMenuList/ThinkingMenuList),
  ModelControl now renders the same bodies, and the agent roles open
  them downward with a pinned Default row (clears the override). The
  collapsed trigger keeps the thin select look (owner: 'the collapsed
  look is good'). Esc claims and closes only the menu (the dialog
  stays); a backdrop click is left to the dialog's own close.
- Sub-groups (owner ask): SettingsGroup — Models / Tools / System
  prompts inside Agent, each with a separator + quiet label; section
  headings more pronounced (text-sm, full-foreground).
- Graying (owner ask): graph-view render-panel convention — the WHOLE
  row dims (opacity-40) and the control locks; the row owns the dim so
  no double-opacity. Applied to the graph ladder, the mode row, and
  prompt rows without an override file. The 'needs X on' prose is gone.
- Hints pruned (owner ask): mechanics-explaining lines removed — the
  ladder mention, 'App-level behavior', 'Applied live as CSS
  variables', per-row explanations. Only the keyboard storage note
  stays, reworded 'Stored on this device' (desktop app — localStorage
  is the Chromium profile in Application Support, not 'this browser').

Live-verified: knob geometry both states + PUT round-trip, menu
search/pick/clear through the record, thinking set/clear, Esc layering,
ladder dim 0.4 with siblings full, pruned phrases absent. Gates:
typecheck, lint, 701/701.

tests/render-settings.test.tsx

@@ -15,6 +15,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { TOGGLE_TOOLS, AgentSection } from "../components/settings/agent-section.tsx";
 import { AppearanceSection, GraphSection } from "../components/settings/appearance-section.tsx";
 import { KeyboardSection } from "../components/settings/keyboard-section.tsx";
+import { SettingsDialogBody, SettingsDialogProvider } from "../components/settings/settings-dialog.tsx";
 import { KEYBOARD_ACTIONS } from "../src/core/index.ts";
 
 /** The full opening tag of the element carrying a testid — attribute
@@ -26,14 +27,50 @@ function tagOf(html: string, testid: string): string {
 	return html.slice(html.lastIndexOf("<", i), html.indexOf(">", i) + 1);
 }
 
+describe("SettingsDialog (the designed surface, SSR)", () => {
+	it("provider CLOSED: children only — no dialog, no portal content", () => {
+		const html = renderToStaticMarkup(
+			<SettingsDialogProvider>
+				<p>the app</p>
+			</SettingsDialogProvider>,
+		);
+		assert.ok(html.includes("the app"));
+		assert.ok(!html.includes("settings-backdrop"));
+		assert.ok(!html.includes("settings-dialog"));
+	});
+
+	it("the dialog frame: role=dialog + the ✕ + the five-section nav, General active", () => {
+		const html = renderToStaticMarkup(<SettingsDialogBody onClose={() => {}} />);
+		assert.ok(html.includes('role="dialog"'));
+		assert.ok(html.includes('aria-modal="true"'));
+		assert.ok(html.includes('aria-label="Close settings"'));
+		for (const id of ["general", "agent", "appearance", "graph", "keyboard"]) {
+			assert.ok(html.includes(`data-testid="settings-nav-${id}"`), id);
+		}
+		// General is the landing section; the others are not current.
+		assert.ok(tagOf(html, "settings-nav-general").includes('aria-current="true"'));
+		assert.ok(tagOf(html, "settings-nav-keyboard").includes('aria-current="false"'));
+		// Fetches don't run under SSR — the loading state IS the SSR state.
+		assert.ok(html.includes("Loading settings…"));
+		// Modal-only doctrine: no link back to /settings anywhere in it.
+		assert.ok(!html.includes('href="/settings"'));
+	});
+});
+
 describe("AgentSection (thin SSR)", () => {
-	it("renders all six background-role rows, Default-first selects", () => {
+	it("renders all six background-role rows, Default-triggered dropdowns", () => {
 		const html = renderToStaticMarkup(<AgentSection agent={undefined} onSectionChange={() => {}} />);
 		for (const role of ["researcher", "demoBuilder", "visualMaker", "extractor", "auditor", "labeler"]) {
 			assert.ok(html.includes(`data-testid="role-row-${role}"`), role);
-			assert.ok(html.includes(`data-testid="role-model-${role}"`), `${role} model select`);
+			// The shared model-picker dropdown as the opened menu (owner,
+			// 2026-09-20), the thin trigger as the collapsed look.
+			assert.ok(html.includes(`data-testid="role-model-${role}"`), `${role} model trigger`);
+			assert.ok(html.includes(`data-testid="role-thinking-${role}"`), `${role} thinking trigger`);
 		}
-		assert.equal((html.match(/>Default<\/option>/g) ?? []).length, 12, "six roles × two selects");
+		assert.equal((html.match(/>Default<\/span>/g) ?? []).length, 12, "six roles × two Default triggers");
+		assert.ok(html.includes('data-testid="group-models"'), "Models sub-group");
+		assert.ok(html.includes('data-testid="group-tools"'), "Tools sub-group");
+		assert.ok(html.includes('data-testid="group-prompts"'), "System prompts sub-group");
 	});
 
 	it("renders the owner's FINAL tool list — research, demo, visual, pdf", () => {
@@ -59,9 +96,9 @@ describe("AgentSection (thin SSR)", () => {
 				onSectionChange={() => {}}
 			/>,
 		);
-		// SSR has no catalog: the stored id renders as its own option (a select
-		// that showed "Default" over a live override would lie about the record).
-		assert.ok(html.includes(`value="z-ai/glm-4.7-flash" selected=""`), "the override id is selected, visible");
+		// The trigger shows the stored id even with no catalog loaded (a
+		// trigger reading "Default" over a live override would lie).
+		assert.ok(html.includes("Glm 4.7 Flash"), "the override id is visible (prettyModel form)");
 		assert.ok(tagOf(html, "toggle-tool-demo").includes('aria-checked="false"'), "demo off");
 		assert.ok(tagOf(html, "toggle-tool-visual").includes('aria-checked="true"'), "visual still on");
 	});
@@ -105,7 +142,9 @@ describe("AppearanceSection (thin SSR)", () => {
 	it("mode is rendered DISABLED — dark-only this wave, no lying control", () => {
 		const html = renderToStaticMarkup(<AppearanceSection appearance={undefined} onSectionChange={() => {}} />);
 		assert.ok(tagOf(html, "select-mode").includes("disabled"), "mode select disabled");
-		assert.ok(html.includes("Light mode ships with the design wave"));
+		assert.ok(html.includes("Light ships with the design wave"));
+		// The whole row dims, graph-view style (the control never adds its own).
+		assert.ok(tagOf(html, "row-mode").includes("opacity-40"), "mode row dims whole");
 	});
 
 	it("hex inputs carry the factory placeholders; prose size resolves against the factory", () => {
@@ -113,7 +152,7 @@ describe("AppearanceSection (thin SSR)", () => {
 		assert.ok(html.includes(`placeholder="#141414"`));
 		assert.ok(html.includes(`placeholder="Source Sans 3"`));
 		assert.ok(html.includes(`placeholder="#c96b4a"`));
-		assert.ok(html.includes("16px — prose, inputs, session titles scale together"));
+		assert.ok(html.includes("16px"));
 	});
 
 	it("a set background shows in the input, not the placeholder", () => {