feat(client): add opt-in panel accent inheritance

[SaKaNa-Y]

Intent

A hub UI provider can customize its primary color, while iframe SPAs retain their own accent. For example, Vite DevTools uses a blue dock but the built-in Git and Inspector panels keep green title icons. Add an opt-in way for panels to adopt the embedding UI's accent.

Behavior and implementation

• Export watchDevframeTheme() and provideDevframeTheme() from devframe/client. The callback exposes an optional primaryColor; each SPA chooses how to map it to UI tokens.
• Have @devframes/hub-ui offer branding.primaryColor to iframe panels. The handshake supports either startup order, reloads, preserved iframe remounts, and cross-origin documents with non-opaque origins. Messages are checked against the corresponding window, and updates target the requesting origin.
• Connect the built-in SPAs through a shared design-token adapter. Standalone SPAs retain their default theme. Status colors, Git graph colors, and social-preview content keep their existing palettes.
• Document the API and protocol, and update the public export snapshots.

This extends the branding work in #177 with explicit panel opt-in. #203 and #253 cover dock rendering and popup branding; #382 covers SVG mask icons. Unsubscribed third-party SPAs keep their own appearance. Dark-mode preferences are unchanged.

Verification

• pnpm exec vitest run: 1527 passed, 9 skipped, including 9 theme protocol tests.
• pnpm exec eslint --cache, pnpm exec knip, and pnpm typecheck: passed.
• Browser checks: Git and Inspector adopt the hub accent; Git retains its default accent when opened independently and inherits again after panel reload. Vite DevTools' Open Graph panel adopts its existing blue branding.

[vercel]

@SaKaNa-Y is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[SaKaNa-Y]

I noticed that Vite DevTools’ accent color doesn’t carry through to the built-in iframe panels, so I added a mechanism that lets panels opt into the host’s accent color. I’m not sure whether this aligns with your design intentions, and I’d love to hear your thoughts.

[coldtea-pr-lens]

◈ PR Lens

🟢 +2 new · 🟠 ~6 changed · 🔴 -0 removed · 1 flow · 11 files · commit e813c3d

Architecture

8 components touched across 5 lanes.

Open the interactive canvas

Inside the changed components — 2 views

Component view — Hub UI theme provider

The iframe view host and branding state powering theme provision to embedded panels.

Component view — Panel theme synchronization

How panel SPAs use the design helper and theme protocol to apply the primary accent ramp.

Data flow

Synchronizing panel theme accent

Open the interactive canvas

View

• Architecture lens
• Data flow lens
• Expand every detail

Tip

The diagrams are links. Click one to open it on the canvas, then press W or click play to walk through the change.

🪧 More tips

• Run npx skills add coldteadotai/pr-lens, then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Run npx @coldtea/pr-lens-cli analyze --base origin/main on a branch, then npx @coldtea/pr-lens-cli render .pr-lens/graph.json. Same lenses, your own model key, before the pull request exists.
• Untick Architecture lens or Data flow lens under View to hide a diagram, or tick Expand every detail to open every section. The comment redraws in a few seconds.
• Click the link under each diagram to open it on a canvas you can zoom, pan and step through.
• Open a diagram on the canvas, then press W or click play to walk through the change one step at a time.
• The CLI's render reads .github/pr-lens.yml and applies your renames, exclusions and lane pins at draw time.
• Set github.comment.collapsed: true in .github/pr-lens.yml to fold the comment behind one View architecture and data flow row. Drawing still runs on every push.
• Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and your model provider's key as its api-key to run PR Lens from your own CI. Any /chat/completions endpoint works.
• Push a commit and the comment redraws for the new head. A slow older run never overwrites a newer one.
• Switch GitHub to dark mode and the diagrams follow. The moving dots are this pull request's data in motion.

---

Thanks for using PR Lens! It's built by Coldtea, free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn