jules 7fd81f14a9 demo: mock-transport AgentDock demo
Drives the dock with a mock transport that returns a canned reply
containing a rich table block — no network. Doubles as the design-
review surface and satisfies the crema-manifest demo requirement.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 16:05:12 +10:00
2026-05-20 16:05:12 +10:00

lib-agent-dock-ui

@crema/agent-dock-ui — the global assistant dock: a floating Sparkles FAB that opens a right-side slide-over chat with an agents-platform agent.

The dock runs in-process in the host app (it needs DOM access for rich-block rendering and the action bus), so it ships as a lib, not an iframe or a CDN widget. The shell, threading, compose box, and rich-block rendering live here; the app injects:

  • identityresolveAgents() returns the agent(s) the user can talk to. One → no picker; many → a dropdown.
  • contextgetPageContext() returns a structured PageContext ({route, resource?, label?}). It travels to the platform as its own field, never concatenated into the message, so page content can't masquerade as a user instruction.
  • transportAgentDockTransport.chat(). Auth is closed over inside the transport (the app builds it from its @crema/arcadia-agents-client instance); the dock never sees a token.

Usage

import { AgentDock } from "@crema/agent-dock-ui"
import { chat, listAgents } from "~/lib/api/arcadia"

<AgentDock
  transport={{ chat }}
  resolveAgents={() => listAgents(tenantId, { archived: "false" })}
  defaultAgentId={profile.defaultAgentId}
  getPageContext={() => ({ route: location.pathname })}
  onExpand={({ agentId }) => navigate(`/agents/${agentId}/chat`)}
  hidden={isChatRoute}
/>

Mount once, near the app root. hidden is app-computed per-route suppression. onExpand is optional — omit it to hide the ⤢ button.

Dependencies

  • @crema/agent-uiMessageBody (rich-block rendering)
  • react, lucide-react

Theme contract: consumes the --chat-user-bg/-fg and --chat-assistant-bg/-fg/-border tokens (every Crema theme defines them).

Description
@crema/agent-dock-ui — global assistant dock (floating FAB + slide-over chat)
Readme 74 KiB
Languages
TypeScript 100%