Skip to content

Apps tab — AppRenderer with imperative ref #1262

@cliffhall

Description

@cliffhall

Context

The AppRenderer is the heaviest piece of the Apps tab — it owns the iframe and the AppBridge lifecycle from @modelcontextprotocol/ext-apps. To keep the screen layer "dumb", the wiring layer (Phase 3) constructs the bridge from the active MCP Client and pushes input/result/cancellation through an imperative ref rather than via prop drilling.

See Apps Screen feature spec and storybook component plan entry 2.5b.

Legacy v1 reference: AppRenderer.tsx.

Scope

AppRenderer

  • Path: clients/web/src/components/elements/AppRenderer/ (or groups/ if it ends up composing other parts).
  • Props:
    • sandboxPath: string — URL/path of the sandbox proxy iframe.
    • tool: Tool — selected app tool (used for resource URI lookup).
    • bridgeFactory: (iframe: HTMLIFrameElement) => AppBridge — wiring layer constructs the bridge using a real MCP Client.
    • onError?: (err: Error) => void — error notifications.
  • Imperative ref (AppRendererHandle):
    • sendToolInput(args: Record<string, unknown>): Promise<void>
    • sendToolResult(result: CallToolResult): Promise<void>
    • sendToolCancelled(reason: string): Promise<void>
    • teardown(): Promise<void>
  • Owns the iframe element and AppBridge handle; no Mantine controls beyond a positioning Box.
  • On unmount: invokes bridge.teardownResource(...) then disconnects the transport.

Stories

  • Loading (iframe mounting), Loaded (with mock bridge factory), Error, Maximized.
  • Mock the bridge factory in stories so Storybook does not need a real MCP client.

Acceptance criteria

  • Real MCP types only (Tool, CallToolResult, Implementation) — no v1.5 wrappers.
  • Bridge construction is delegated entirely to bridgeFactory so the renderer is testable in Storybook with mocks.
  • No store access; no business logic — only iframe + bridge proxy.
  • Tests pass and coverage is ≥ 90%.
  • Cleans up the bridge on unmount (no leaked MessagePort listeners).

Dependencies

  • Blocked by: Apps tab — add @modelcontextprotocol/ext-apps dep and isAppTool helper in core.
  • Can run in parallel with: AppListItem/AppDetailPanel issue.

Branch / Base

  • Base: v2/main
  • Label: v2

Metadata

Metadata

Assignees

No one assigned

    Labels

    v2Issues and PRs for v2

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions