Persona Playbook Workflow detail tabs

## Original requirement (verbatim, epic body) > "Break long pages into subtabs across the entire system." > "Important and first hand stuff needs to be on the first page(s), then less important, logs, runs, etc" Operator decisions: D2 "All long single-entity pages"; D4 "Yes, ?tab= in URL". Priority tiers (PRD §4): 1 Primary — identity, editable setup, what the operator came to do; 2 live status and relationships; 3 runs, logs, history, activity, audit; 4 advanced/diagnostics. ## Scope (Architecture K10, §3 rows) | Page | File | Tabs (id → content) | |---|---|---| | Persona | `pages/personas/PersonaDetailPage.tsx` | `overview` Overview (Identity, Runtime, Delivery, Hand-over, May create) · `brief` Role brief | | Playbook | `pages/playbooks/PlaybookEditPage.tsx` | `playbook` Playbook (name, description; Chain strip as a summary) · `stages` Stages (n). Save bar page-level (existing FormActionBar → `DetailPage.actionBar`). A validation error on a stage while on Playbook → select `stages` before focusing the field (field→tab map like `ProjectEditPage`'s `FIELD_TABS`). | | Workflow | `pages/workflows/WorkflowDetailPage.tsx` | `overview` Overview · `runs` Runs (`WorkflowRunsTab`, lazy: fetched on first show then kept mounted) | `idPrefix`: `persona`, `playbook`, `workflow`. NOTE: the workflow-run-pane child depends on this child's Workflow `runs` tab (its Close returns to `/workflows/<name>?tab=runs`); keep the tab id `runs`. ### Pinned tab pattern (C1) ```tsx const [tab, selectTab] = useUrlTab(tabs, tabs[0].id) // first tab = fallback = bare URL <DetailPage breadcrumb title titleAside actions actionBar={/* page-level Save bar, if any */}> {tabs.length > 1 && <Tabs tabs={tabs} tab={tab} onSelect={selectTab} label="<Entity> sections" idPrefix="<entity>" />} <TabPanel id="…" current={tab} idPrefix="<entity>">…</TabPanel> // ALL mounted </DetailPage> ``` Rules: header (breadcrumb, title, status, actions) above the strip; gated tabs filtered out, never disabled; one surviving tab → no strip; existing section testids kept and moved inside panels; ONE `<form>`, ONE Save (never inside a panel); form fields never conditionally unmounted; lazy only for data fetch; one-word labels (ui-copy-standards); full labels at 390 px (`wrapOnPhone` if needed, never fragments). ## Acceptance criteria (verbatim, PRD R2) - **AC2.1** Each page in the table below is measured against §4. Every page judged long gets a `Tabs` strip. Tab 1 holds priority tier 1. Runs, logs, history and audit content are never on tab 1 when tier-1 content exists. - **AC2.2** A page judged NOT long stays without tabs. A page whose tabs would number one shows no strip, per the existing `TabLeaf` rule. - **AC2.3** Same behaviour as AC1.3–AC1.6 on every newly tabbed page: `?tab=` addressing; header actions above the strip; panels kept mounted; labels readable at 390 px. - **AC6.1** ON by default on dev, no feature flag. - Quality: Playbook unsaved edits on Playbook tab survive a switch to Stages and back; Save works from either tab. Credentials & reach: `jaah/debug/main/operator-login` — operator on `https://app.dev.jaah.ai` — **verified** (Persona and Workflow pages are operator-only; MFA appeared once — if it reappears ask once for a code/TOTP seed, else defer that page's dev check with the reason; component/e2e tests stand). `gmind/skynet/dev-orgb` — tenant org admin — **verified** (Playbook if tenant-visible). Dev console `https://app.dev.jaah.ai/` — **verified**. Do NOT use `gmind/skynet/dev`. Local oracles: none beyond the worktree. Out of scope: Do NOT touch `apps/api`, `apps/jaahd`, migrations. Do NOT convert `WorkflowRunDrawer` (other child). Do NOT add a wizard to `/playbooks/new` (judged short) beyond what the shared edit page renders today — create mode must keep working. Do NOT fork `Tabs`/`useUrlTab`. Do NOT remove/rename any field or section; no copy rewrites beyond tab labels; no per-tab saves. No list-page changes. No feature flag. Done means: - AC2.1 — component test per page asserts tab order: Persona "Overview, Role brief"; Playbook "Playbook, Stages"; Workflow "Overview, Runs"; each section testid inside its panel. - AC2.3 — tests: `?tab=` for each non-first tab selects it; unknown → first; header actions present on every tab; Playbook edit survives tab switch; Playbook stage validation error while on Playbook selects Stages and focuses the field; Workflow runs not fetched until Runs first shown. - Playwright 390 px / 1440 px per page — labels in full, no ellipsis. - AC6.1 — after the PR's Jaah Deploy succeeds, open each page on app.dev.jaah.ai and observe the strip. - `./dc check quick` green; PR merged to develop.

Tabbed Persona (Overview|Role brief), Playbook (Playbook|Stages) and Workflow (Overview|Runs, read lazily) detail pages; PR #5072 merged, Jaah Deploy green, strips seen on dev (Workflow dev check deferred: superadmin-only). Follow-ups listed in report.