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.

components/settings/settings-dialog.tsx

@@ -42,28 +42,15 @@ import { AgentSection } from "./agent-section.tsx";
 import { AppearanceSection, GraphSection } from "./appearance-section.tsx";
 import { KeyboardSection } from "./keyboard-section.tsx";
 
+/** Owner (2026-09-20): hints earn their place — mechanics-explaining
+ *  prose is out; only the keyboard note stays (storage location is a
+ *  real question users ask). */
 const SECTIONS = [
-	{ id: "general", label: "General", hint: "App-level behavior" },
-	{
-		id: "agent",
-		label: "Agent",
-		hint: "Background-role models, tools, and prompt overrides",
-	},
-	{
-		id: "appearance",
-		label: "Appearance",
-		hint: "Applied live as CSS variables",
-	},
-	{
-		id: "graph",
-		label: "Graph",
-		hint: "Dependency ladder — a disabled rung grays everything below it",
-	},
-	{
-		id: "keyboard",
-		label: "Keyboard",
-		hint: "Rebinds apply instantly — stored in this browser",
-	},
+	{ id: "general", label: "General" },
+	{ id: "agent", label: "Agent" },
+	{ id: "appearance", label: "Appearance" },
+	{ id: "graph", label: "Graph" },
+	{ id: "keyboard", label: "Keyboard", hint: "Stored on this device" },
 ] as const;
 type SectionId = (typeof SECTIONS)[number]["id"];
 
@@ -253,7 +240,6 @@ export function SettingsDialogBody({ onClose }: { onClose: () => void }) {
 							{active === "general" && (
 								<SettingsSection
 									title="General"
-									hint="App-level behavior"
 									testid="section-general"
 								>
 									<SettingsRow
@@ -274,7 +260,6 @@ export function SettingsDialogBody({ onClose }: { onClose: () => void }) {
 							{active === "agent" && (
 								<SettingsSection
 									title="Agent"
-									hint="Background-role models, tools, and prompt overrides"
 									testid="section-agent"
 								>
 									<AgentSection
@@ -288,7 +273,6 @@ export function SettingsDialogBody({ onClose }: { onClose: () => void }) {
 							{active === "appearance" && (
 								<SettingsSection
 									title="Appearance"
-									hint="Applied live as CSS variables"
 									testid="section-appearance"
 								>
 									<AppearanceSection
@@ -302,7 +286,6 @@ export function SettingsDialogBody({ onClose }: { onClose: () => void }) {
 							{active === "graph" && (
 								<SettingsSection
 									title="Graph"
-									hint="Dependency ladder — a disabled rung grays everything below it"
 									testid="section-graph"
 								>
 									<GraphSection
@@ -316,7 +299,7 @@ export function SettingsDialogBody({ onClose }: { onClose: () => void }) {
 							{active === "keyboard" && (
 								<SettingsSection
 									title="Keyboard"
-									hint="Rebinds apply instantly — stored in this browser"
+									hint="Stored on this device"
 									testid="section-keyboard"
 								>
 									<KeyboardSection />