feat(mcp-apps): fullscreen title bar for the App frame, header contrast, reachable consent

[philmerrell]

What & why

Three fixes to the MCP App frame's fullscreen experience, grouped into one commit because they're interleaved in the same component markup (mcp-app-frame.component.ts).

1. Fullscreen title bar (was: floating Exit chip overlapping the App)

Previously, fullscreen promoted the bare iframe to a fixed inset-0 z-[9999] overlay and floated the "Exit fullscreen" button as a z-[10000] chip in the top-right — which landed on top of the App's own top-corner chrome (e.g. Excalidraw's "Open" button).

Now the container is the fixed full-viewport flex column, with the connected header promoted to a title bar that hosts the Exit control; the iframe absolute-fills its flex-1 host below the bar. No overlap, and a more discoverable labeled Exit button. Toggling display mode stays pure CSS on existing DOM, so the running App never reloads.

2. Header dark-mode contrast / low-vision

The header background is translucent (dark:bg-gray-800/60), so it composites over whatever's behind it. The inline card's container had bg-white with no dark override, so in dark mode the header composited over white into a muddy mid-grey (~#797f87) and the tool name (text-gray-400 on that) dropped to roughly 1.5:1 — the grey-on-grey you'd see on create_view.

• Inline card now carries dark:bg-gray-900, so the header composites over the same surface as fullscreen (whose container was already dark:bg-gray-900). The fullscreen header's background is unchanged.
• Tool name text-gray-500 dark:text-gray-400 → text-gray-600 dark:text-gray-300 (≈7.4:1 / ≈11:1).
• Separator dot, details-toggle glyph (was sub-3:1 in light), and the running-state shimmer (incl. the reduced-motion fallback) bumped to clear WCAG AA.

3. "Open in Excalidraw" hung on "exporting…" (unreachable consent in fullscreen)

The App's export fires ui/open-link; the host holds the JSON-RPC response open until the user answers its inline consent strip ("This app wants to open excalidraw.com — Allow"). That strip rendered as a sibling above the card — outside the fullscreen overlay — so the z-[9999] overlay painted over it. In fullscreen the user could never grant consent, the bridge never responded, and Excalidraw sat on "exporting…" forever.

The consent strip now renders inside the frame, below the title bar and above the iframe, so it's within the overlay and reachable in both modes. (The bridge/consent/proxy logic is unchanged — this was purely a stacking/placement bug.)

Reviewer notes

• Behavior change for inline: the App-initiated consent strip now appears at the top of the card (below the header) instead of floating above the whole card. It reads as more clearly anchored to the App; flag if you'd prefer to keep the above-the-card placement for inline only.
• No changes to the bridge, consent service, or sandbox proxy — only the frame template/styles + two doc comments.

Testing

• ng build clean.
• ng test — 36 MCP-apps specs pass (mcp-app-bridge 31, mcp-app-consent.service 5).
• Not exercised live: the header/consent only render when a deployed mcp-sandbox stack serves an App that emits a ui_resource. Manual check against a live App:
  1. Fullscreen an App → title bar spans the top, Exit button in it, no overlap with the App's chrome; Exit + Escape return to inline with state preserved.
  2. Dark mode → header is a clean dark bar, create_view clearly legible.
  3. Fullscreen → click "Open in Excalidraw" → confirm Excalidraw's modal → an "Allow" strip appears under the title bar → click it → a new excalidraw.com tab opens and the button clears. Confirm the same works inline.

🤖 Generated with Claude Code