feat(den-web): trim dashboard page headers

[benjaminshafii]

Summary

• apply Paper’s 01 · Trim treatment to every shared Den dashboard gradient header
• preserve per-page palettes and badges while removing icon chips and moving descriptions below headers
• add an approved five-frame voice-over and fraimz flow

Verification

• pnpm --filter @openwork-ee/den-web typecheck
• pnpm --dir ee/apps/den-web exec bun test tests/cloud-super-admins-role-hierarchy.test.ts — 6 passed
• pnpm evals:typecheck
• pnpm fraimz --flow den-trim-page-headers --stack den --cdp-url http://127.0.0.1:9334 — passed 5/5 frames

Evidence

• Local artifact: evals/results/2026-08-02T21-05-45-327Z/fraimz.html
• Frame proof will be posted in a follow-up PR comment.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openwork-app	Ready	Preview	Aug 2, 2026 9:18pm
openwork-den	Ready	Preview	Aug 2, 2026 9:18pm
openwork-den-worker-proxy	Ready	Preview	Aug 2, 2026 9:18pm
openwork-diagnostics	Ready	Preview	Aug 2, 2026 9:18pm
openwork-landing	Ready	Preview, v0	Aug 2, 2026 9:18pm

[diff-warden]

Warden security clearance: clear. No new security issues found in this diff (edc284ddc5c83a7a8a47d782242fa65e87b203d3). Automated clearance satisfies the required-review gate only — a human still reviews and merges. Analysis run

[benjaminshafii]

fraimz — ✅ PASSED

1 passed · 0 failed · 0 skipped — run 2026-08-02T21-12-00-117Z

Full frame proof with validated screenshots: evals/results/2026-08-02T21-12-00-117Z/fraimz.html (re-run: pnpm fraimz --flow den-trim-page-headers)

✅ den-trim-page-headers — Den dashboard pages share a compact, readable Trim header

User-facing flow demo

1. Members has one 104-pixel Trim header with a plain white title

   🎙 I open a Den dashboard page and see its oversized hero replaced by a compact 104-pixel gradient header with a clear white title and no icon chip.

   • 📸 den-trim-page-headers-01-members-compact-trim-header.png — 14 validations passed
   

2. The Trim header preserves the mesh palette and applies the expected readability scrim

   🎙 The mesh gradient keeps that page’s existing colors, while a subtle dark scrim makes every title consistently readable.

   • 📸 den-trim-page-headers-02-members-mesh-and-scrim.png — 14 validations passed
   

3. Members keeps its description outside the hero and before its tabs

   🎙 Descriptions, tabs, actions, and page content remain directly below the header without changing their behavior.

   • 📸 den-trim-page-headers-03-members-description-and-tabs.png — 17 validations passed
   

4. Members, Plugins, Connectors, and Org settings use the same compact gradient shell

   🎙 As I move between Members, Plugins, Connectors, Settings, and other dashboard pages, the same compact treatment appears with each page’s own palette.

   • ✅ Members route has the shared 104px gradient Trim header
   • ✅ Plugins route has the shared 104px gradient Trim header
   • ✅ Connectors route has the shared 104px gradient Trim header
   • ✅ Org settings route has the shared 104px gradient Trim header
   • 📸 den-trim-page-headers-04-org-settings-shared-trim-header.png — 14 validations passed
   

5. The Members Trim header, tabs, and Add member action fit a 375-pixel viewport

   🎙 At narrower widths, the header and surrounding controls adapt without clipping or hiding essential actions.

   • 📸 den-trim-page-headers-05-members-trim-header-mobile.png — 16 validations passed
   
   • ✅ Script frame 1 narrated: "I open a Den dashboard page and see its oversized hero replaced by a compact 104-pixel g"
   • ✅ Script frame 2 narrated: "The mesh gradient keeps that page’s existing colors, while a subtle dark scrim makes eve"
   • ✅ Script frame 3 narrated: "Descriptions, tabs, actions, and page content remain directly below the header without c"
   • ✅ Script frame 4 narrated: "As I move between Members, Plugins, Connectors, Settings, and other dashboard pages, the"
   • ✅ Script frame 5 narrated: "At narrower widths, the header and surrounding controls adapt without clipping or hiding"

[diff-warden]

Warden security clearance: clear. No new security issues found in this diff (9e631ff1e9e5f86506b4ce1d3421dc6057561377). Automated clearance satisfies the required-review gate only — a human still reviews and merges. Analysis run