portal: modern audit UI, native dark-mode OpenAPI viewer, sticky detail panel

[cjimti]

Summary

Portal UI overhaul focused on three user-reported defects in the audit and discovery pages, plus the documentation that ships alongside them.

• Audit now has stable column widths (no more jitter when the right pane gets long JSON), method/status pills with color coding, locale-independent 24-hour timestamps, and a sticky detail panel that follows the viewport so clicking the 100th row no longer requires scrolling back to the top.
• Discovery drops the Redoc iframe — it was light-themed inside a dark portal and visibly unreadable — and ships a native OpenAPI 3.1 reference rendered against the portal's design tokens. Full dark/light parity, in-portal search/filter across path/summary/operationId, collapsible operation cards with parameters / request body / responses / synthesized examples, and a tag rail. /docs (Redoc) remains served and is linked from the page header for operators who prefer it.
• Docs + screenshots regenerated: every portal page captured fresh (light + dark), Discovery added to the capture script, operations/portal.md gains a Discovery section, the homepage carousel gets a Discovery slide and an updated Endpoints caption.

Defect → fix mapping

Reported	Root cause	Fix
Audit left column jitters as the right pane content grows	grid-cols-[2fr_3fr] plus missing min-w-0 let long JSON values steal width from the list	grid-cols-1 lg:grid-cols-[460px_minmax(0,1fr)] + table-fixed + explicit <colgroup> widths
Time column overlaps the Method column ("12:34:56 PM" + "GET" collide)	toLocaleTimeString() produces 11+ chars in en-US; the 88px Time col and 64px Method col couldn't hold it	Explicit 24-hour HH:MM:SS formatter; widths re-measured via getBoundingClientRect (76 / 88 / Path / 64)
Discovery is a visual mess; dark-mode iframe contents are unreadable	Embedded Redoc bundle is light-themed only	Replace the iframe with a native OpenAPI 3.1 viewer rendered against the portal's CSS variables
Click an audit row at the bottom of the list, have to scroll back to the top to see the detail	<main className=\"... overflow-auto\"> inside a min-h-full outer grid never overflowed, so the document scrolled and position: sticky had no scroll context	Outer grid switched to h-full so main becomes the real scroll container; detail panel uses lg:sticky lg:top-6 lg:self-start with its own max-h + overflow-y-auto for tall payload bodies
Discovery heading reads vv1.0.0	Component unconditionally prepended v to info.version, which already starts with v	Strip a leading v before re-adding
Docs and screenshots still showed the old portal	Capture script didn't know about Discovery; portal.md had no Discovery section; carousel slide list omitted it	Discovery added to screenshots.mjs, portal.md, and the homepage carousel; all 18 existing PNGs regenerated, 2 new Discovery PNGs added

Accessibility / robustness picked up along the way

• aria-expanded on every disclosure (operation cards, response rows).
• Response rows with no body render as a non-interactive <div> so keyboard users don't Tab through dead buttons.
• Tag rail uses aria-pressed for filter state and proper min-w-0 so long tag names don't push the count badge off-screen.
• CodeBlock copy-feedback timer is cleaned up on unmount; the Discovery fetch uses AbortController.
• Loading / missing / error states show contextual subtitles and hide the JSON / YAML / Redoc header links (they 404 together with /openapi.json).
• Method/status pills are color-coded against both light and dark backgrounds.

Files touched

• ui/src/App.tsx — outer grid min-h-full → h-full so main owns the scroll context; sidebar gains overflow-y-auto.
• ui/src/pages/Audit.tsx — fixed-width left column, table-fixed colgroup, 24-hour time, MethodPill/StatusPill, sticky detail panel.
• ui/src/pages/Discovery.tsx — full native OpenAPI viewer replacing the iframe (~760 lines).
• scripts/screenshots/screenshots.mjs — capture Discovery (pre-expanded operation card).
• docs/operations/portal.md — Discovery section + embeds.
• docs/overrides/home.html — carousel adds Discovery; Endpoints caption updated.
• docs/reference/http-api.md — /docs description acknowledges the native portal renderer.
• docs/images/portal/*.png — all regenerated; discovery-{light,dark}.png added.

Verification

Each commit went through make verify (green) plus a live-browser pass before commit:

• Started the rebuilt binary on :8080.
• Authenticated via dev API key against the portal.
• Navigated to each affected page in mcp__claude-in-chrome.
• Ran getBoundingClientRect on every table cell across 20 rows and asserted overflows: [] (first pass found a DELETE pill overflow; widened Method column 72px → 88px; re-measured to zero).
• Scrolled to row 100 and clicked it; asserted the sticky detail panel's top is in-viewport (top: 48px, viewport: 782px).
• Confirmed Dashboard, Endpoints, Discovery still render correctly after the App.tsx layout change.

Test plan

• CI green.
• Hit /portal/audit in a real browser, scroll the list, click rows at the top and bottom — detail panel stays visible.
• Confirm method pills (GET / POST / PUT / PATCH / DELETE) and status pills (2xx / 3xx / 4xx / 5xx) render with readable contrast in both light and dark mode.
• Hit /portal/discovery, expand operation cards, use the search bar, switch tags in the left rail; check that the Redoc link in the header opens /docs in a new tab.
• When /openapi.json is unavailable (e.g. oapiDoc=nil build), Discovery's loading → missing transition does not render dead header links.
• make screenshots against a clean main build reproduces every PNG in this PR.