feat(design-system): sanction PageFrame and WorkSurfaceFrame page templates + tab vocabulary convergence

[esafwan]

Summary

Sanctions the two page templates from the Playground design analysis: PageFrame for management screens and WorkSurfaceFrame for benches — plus the prerequisite tab-vocabulary convergence. This is the design-system answer to "why does every screen compose its header differently": the templates are now components, and the rules are now in DESIGN.md.

What is changed

Slice 1 — Tab vocabulary convergence (c9ead974)

• ui/tabs underline variant now encodes DESIGN.md §6.5 exactly: IBM Plex Sans 13px medium, sentence case, steel → ink when active, 2px signal bottom border on the shared 1px ink baseline.
• The divergent panel variant is retired; its consumers (HomePage, MemoryPage) migrated. AgentForm, Settings, Skills, and ~12 other pages move from mono-uppercase to the spec'd sentence-case tabs.
• PlaygroundShell's hand-rolled tab row replaced with the shared component — one tab implementation across the app.

Slice 2 — Page templates (1fdf3ad4)

• WorkSurfaceFrame (frontend/src/layouts/WorkSurfaceFrame.tsx): full-bleed bench template — compact topbar with sidebar trigger + optional Big Shoulders title + actions, optional §6.5 tabs, content fills remaining height. PlaygroundShell is refactored to a thin adapter over it (byte-identical rendered output).
• PageFrame (frontend/src/layouts/PageFrame.tsx): management-page template — page head (Big Shoulders h1 + optional badge + steel subtitle + actions), optional filters row, contained content column. AgentsPage pilot-migrated (renders identically).
• DESIGN.md: new §6.9 Page composition documenting both templates and when to choose which; the topbar display-type rule (work surfaces may carry the title in their compact topbar, management screens may not); §6.5 restated as the single tab vocabulary.

Slice 3 — Filter rows as instrument strips (4b89ef20)

• FilterBar (shared by ~19 list pages) is now one bordered strip — 1px ink border, hairline verticals, borderless icon-led search flush-left (flex:1, reads as primary), filter cells in mono uppercase STATUS: ALL label:value form. Replaces the old row of three identical boxes that read as scaffolding.
• collapsibleSearch behavior preserved inside the strip; FilterBarSkeleton mirrors the new shape; PageFrame pulls the strip tight (16px) under the subtitle instead of floating.
• FilterBar gained an optional onSearchSubmit (fires on Enter), and DataTableViewPage's hand-rolled search row is migrated to the strip with its reload-on-Enter behavior preserved (fe246f44).

Slice 4 — PageFrame migration wave (5d621519)

• All 20 remaining PageLayout consumers migrated to PageFrame (data, knowledge, flows, executions, models, MCP, skills, apps, users, prompts, SSH, gateways, providers, integrations, memory, artifacts…). toolbar prop renamed to actions where used. PageLayout deleted — one page template across the app.
• Refinements from manual review: filter strip lightened to hairline --line with hug-content LABEL: VALUE cells and single-chevron triggers (07f49b5f); FilterBar fills flex parents and Data page got its missing title (60cf4751); actions-Combobox pattern on Prompts/Summary Prompts/SSH/Execution Profiles converted to proper strip cells.

Slice 5 — Playground polish (3c94b9e8)

• ConfigStrip selects are now truly borderless: the trigger hugs its content, the default CaretSortIcon is replaced with a single ChevronDown, and the outer strip border is lightened from border-ink to border-line so the strip reads as one instrument rather than boxes within a box. Applied to both the Playground single strip and the Compare compact 2×2 strips.
• Prompt, Response, and Compare A/B labels are toned down from Big Shoulders display type to quiet sans/steel uppercase labels (font-sans text-[12px] font-medium uppercase tracking-[.06em] text-steel).

Not in this PR (follow-ups, tracked in the workspace TODO)

• Chat frame migration onto WorkSurfaceFrame; HomePage hand-rolled head onto PageFrame.
• Run Ledger backend persistence, "View run →" link, compare-restore target.

Verification

• npm run typecheck + npm run build — green in worktree and bench.
• Class-chain review: Playground topbar/tabs and AgentsPage page head render identical classes to before.
• Bench (console-prompt-workspace): /huf/playground, /huf/playground?mode=compare, /huf/agents, /huf/, /huf/executions all serve 200 on the built assets. Manual screenshots confirm the ConfigStrip no longer shows double borders and the panel labels are quieter.
• Reference: workspace/Tracks/ConsolePromptWorkspace/plans/TODO-page-templates-option-a.md (the analysis this implements).