Settings split pass 5: extract Developer Options (SettingsView under 9.5k)

[adamXbot]

Pass 5 — Developer Options

SettingsView.tsx 10,951 → 9,404 (−1,547). Two commits, each independently reviewable.

The developer section was 914 lines of JSX rendering four independent sub-panels behind eight separate flags — bigger than earlier passes, and not splittable in the middle without leaving an incoherent state. So it lands as one section in two stages.

1. refactor(settings): hoist the activity-log subsystem into a hook

The activity log was ~14 state values, 6 mirror refs, two fetchers and four effects spread across two distant regions of the file (state at ~1018, logic at ~2577). Every external reference was its own declaration or its own effects — nothing else read it — so it moves wholesale into lib/use-activity-log.ts.

The JSX is untouched in this commit. The hook's fields are renamed back to their old activity* names on destructure, so all four diff hunks land above the first return ( at line 5094. That makes it reviewable as "did the logic move intact?" without also diffing 375 lines of markup.

Behaviour is preserved including the parts that look odd but are load-bearing: the params helper still reads state for the manual load and refs for the poll (that split is why polling doesn't drift from the visible filter), the poll keeps its empty dep array, and the effect keys off a boolean rather than the array so a prepend doesn't reset the interval.

2. refactor(settings): extract Developer Options into five components

DeveloperSection (shell) + AiDebugLogPanel + ActivityLogPanel + ActivityRowDetail + AiTimeoutsPanel.

Two decisions extend the contract in app/components/settings/README.md rather than quietly departing from it:

• Sub-block flags move into the panel that owns them. The contract says SettingsView is "the map" of what sections exist — that's about whether a card exists, and SettingsView still owns flag.devopts.visible. Which sub-blocks a card shows is the card's business. Drilling the other eight down meant eight booleans whose names no reader could match back to a flag key.
• State read by exactly one section moves with it. ActivityLogPanel calls the hook directly and takes a single prop. debugLogging looked equally local but round-trips through the AI settings blob, so it stays in SettingsView and is passed down. The test is whether anything outside the section reads it, not whether it feels local.

Verification

A typecheck is not sufficient for this kind of move, so:

• Rendered #developer on origin/main and on this branch with all eight dev-opts flags forced on, and diffed the normalised outerHTML. Byte-identical at 265,719 chars, zero console errors on both sides.
• Every useTranslations namespace and key in the new files resolved against locales/en.json. This caught three wrong namespaces — ai_debug_log vs ai_debug, activity_log.types vs activity_types, flag_presets vs presets — all of which typechecked perfectly happily and would have thrown at render. That hazard is now written into the README's verification section, because it applies to every remaining pass.
• typecheck, lint, 441 unit tests, i18n parity (4,763 keys), full Playwright suite 45 passed including the settings structural net.

One thing to know

The i18n-text-literals baseline moves three entries from SettingsView.tsx to DeveloperSection.tsx. That is the same pre-existing untranslated text in a new file, not new debt. The detector keys on path, so a moved string reads as new — I regenerated the baseline rather than adding an i18n-exempt marker, so it stays recorded as debt instead of being silently blessed.

Follow-ups (not in this PR)

• The activity* prefixes inside ActivityLogPanel are now redundant. They survived so the markup is a verbatim copy, which is what makes the HTML diff meaningful. Dropping them is mechanical and noted in the file.
• Next up: import-history (1,342 lines) using the same two-stage shape, then ai-summaries, reset, wayback-import, backup, sync-status.

Branched from main and targets main directly — no stacking, per #150.

🤖 Generated with Claude Code