feat(chat): add embedded display panel for A2UI, MCP Apps, Pulse App View, and Workflow Canvas

[Copilot]

The chat component had no way to display external tools or internal views alongside the conversation. This adds a toggleable split-pane embed panel to the chat page with four display modes.

New files

• web/components/chat/chat-embed-panel.tsx — Tabbed panel with four content slots wiring together the four view components below.

• web/components/views/chat/a2ui-view.tsx — Dedicated A2UI panel with a header (icon, title, description, open-in-browser link), animated loading spinner while the iframe loads, and a rich fallback card (feature bullets + CTA button) that automatically appears when the site blocks embedding via X-Frame-Options. Blocking is detected by checking contentDocument accessibility after onLoad — a SecurityError means the page loaded cross-origin (success); readable contentDocument means a same-origin error page was injected (blocked).

• web/components/views/chat/mcp-apps-view.tsx — Same structure as A2UIView for the MCP Apps directory (https://modelcontextprotocol.io/extensions/apps/overview), with MCP-specific feature bullets and quick-link buttons (Overview, Docs, GitHub) in the fallback.

• web/components/views/chat/pulse-app-view.tsx — Searchable grid of marketplace apps. Clicking a card opens the app in Editor mode via EditorContext.

Modified

• web/components/views/chat/chat-view.tsx — Replaced the bare AIChatInterface wrapper with a split-pane layout:

  • Chat occupies w-2/5 (md+) when a panel is open; flex-1 otherwise
  • Floating amber pill-buttons in the bottom-right corner toggle each panel
  • On mobile, chat is hidden when the embed panel is active

• web/package.json — Added openai ^6.24.0 as an explicit direct dependency (it was only a transitive dep of @langchain/openai, not hoisted to top-level node_modules in CI, causing a webpack build failure).

Security

iframe sandboxes use allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox — allow-same-origin is intentionally omitted to keep the sandbox effective. Both A2UIView and MCPAppsView gracefully fall back to a rich landing page with external links when framing is blocked.

Original prompt

Allow chat component in web/components/ to display the following:

• A2UI https://a2ui.org
• MCP apps https://modelcontextprotocol.io/extensions/apps/overview
• Pulse App View (add in this repo)
• Pulse Workflow Canvas

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
web-editor	Ready	Preview, Comment	Apr 1, 2026 8:40pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: fd8111c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Shellishack]

fix build error @copilot

[Copilot]

fix build error @copilot

Fixed in commit 24b0146. Two issues caused the build failure:

1. Missing openai direct dependency — openai was only a transitive (nested) dep of @langchain/openai, not hoisted to the top-level node_modules in CI. Added "openai": "^6.24.0" as an explicit dependency in web/package.json.

2. TypeScript error in pulse-app-view.tsx — used ext.config.name which doesn't exist on AppConfig; corrected to ext.config.displayName.

[Shellishack]

You only added placeholder for A2UI and MCP-apps.

      {/* Content area */}
      <div className="min-h-0 flex-1 overflow-hidden">
        {activeTab === "a2ui" && (
          <iframe
            src="https://a2ui.org"
            className="h-full w-full border-none"
            title="A2UI"
            sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
          />
        )}

        {activeTab === "mcp-apps" && (
          <iframe
            src="https://modelcontextprotocol.io/extensions/apps/overview"
            className="h-full w-full border-none"
            title="MCP Apps"
            sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
          />
        )}

Implement the actual component for them
@copilot

[Copilot]

You only added placeholder for A2UI and MCP-apps.

      {/* Content area */}

...

Replaced the bare iframes with two full components in commit 8606092:

• A2UIView (web/components/views/chat/a2ui-view.tsx) — header with icon + description + "open in browser" link, animated loading spinner while the iframe loads, and a rich fallback card (feature bullets + CTA button) that appears when the site blocks framing via X-Frame-Options.
• MCPAppsView (web/components/views/chat/mcp-apps-view.tsx) — same structure with MCP-specific content and three quick-link buttons (Overview, Docs, GitHub) in the fallback.

Both use a useRef on the iframe and check contentDocument.location in onLoad — if the check succeeds (same-origin) the page was blocked and the fallback shows; if it throws a SecurityError the page loaded successfully cross-origin and the iframe is shown normally.