Extract active panel status strip (codex)

[numnx]

🧩 Task: Extract active panel status strip

Automated task PR opened by Code UX for T01.

📋 Summary

Sprint: Sprint 155 · QS: UI - Interactions & Design Improvements · Task: T01

Refine the Settings page interaction layer so the scope selector and active-panel saved state stick together, search-only metadata appears only when useful, and the visual/copy treatment is cleaner without changing settings persistence behavior.

📝 Full Task Prompt

## Objective
Extract the active panel/save-state strip from `SettingsContentPanels` into a reusable Settings component so it can later be placed next to the scope selector in the shared sticky header while preserving current accessibility and feedback semantics.

## Scope
- `dashboard/src/v2/components/settings/SettingsContentPanels.tsx`
- Create `dashboard/src/v2/components/settings/SettingsActivePanelStatus.tsx`
- `dashboard/src/v2/components/settings/__tests__/SettingsControls.test.tsx`
- Symbols: `SettingsContentPanels`, new `SettingsActivePanelStatus`, `SettingsPageState`, active category label/status derivation

## Implementation Requirements
1. Move the active category label, `panelStatus`, `visibleSaveState`, `role`, `aria-live`, `data-settings-sticky="active-panel"`, and visible `Active panel / Saved|Saving|Unsaved changes|Blocked` rendering into `SettingsActivePanelStatus`.
2. Add props that support the current sticky mode (`stickyTop`, sticky class/style) and a future inline mode (`sticky={false}` or equivalent) without duplicating status text logic.
3. Keep `SettingsContentPanels` rendering behavior unchanged by default by consuming `SettingsActivePanelStatus` in sticky mode and leaving `ActionFeedbackRegion` plus panel rendering untouched.
4. Add or update focused tests in `SettingsControls.test.tsx` to assert sticky mode still applies `--settings-active-panel-top`, status text, `aria-live`, `data-settings-sticky`, and reduced-motion-safe classes where applicable.

## Constraints
- Do not change settings save/reset/loading behavior or mutate `SettingsPageState`.
- Do not remove the existing `ActionFeedbackRegion` in `SettingsContentPanels`.
- Preserve reduced-motion behavior and visible non-animation state cues.
- Keep the component fully typed; do not introduce `any` except where the existing test fixture already uses it.

## Verification
- Run `pnpm exec vitest run dashboard/src/v2/components/settings/__tests__/SettingsControls.test.tsx`.
- Run `pnpm run typecheck:dashboard`.
- Success means the current SettingsContentPanels sticky status behavior remains green and the new component can render the same status contract independently.

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-07 03:54:45 UTC
Finished	2026-07-07 03:58:58 UTC
Duration	4m 13s

📊 Token Usage

Metric	Value
Input tokens	120,411
Cached input tokens	794,368
Output tokens	8,766
Total tokens	923,545
Invocations	1
Tool calls	32
Active time	3m 44s

Included usage estimate (subscription/local login): $1.26

🌿 Branch Info

Base: feature/CODUX-155-qs-ui-interactions-design-improvements-8
Head: task/feature-codux-155-qs-ui-interactions-design-impr-t01-codex-mra47zxx

---

🤖 Generated by Code UX