Blocks / Elle Block

Elle Block

The one surface you talk to Elle in, anywhere: goal, onboarding, /chats, and the area companions. It composes ChatPane (chat column) + an optional companion Canvas/CanvasSheet + HITL gate auto-open + resize + working-state into a single whole. It is Strata’s first BLOCK — a composed multi-component surface (dashboard-01 sense), not a primitive. What varies between callers is the ENGINE driving the chat, never this UI.

import { ElleBlock } from '@layers/ui/elle-block'

No live demo

Deliberately undemoed here: ElleBlock is a two-pane surface driven by a live chat engine (a Mastra workflow or the agentic loop) plus a canvas host, so a catalog demo would be all scaffolding and no signal. See it running in the product: /goal (deterministic workflow, block-owned canvas), onboarding (reveal canvas), and /chats + the area companions (hosted layout, external sheet host).

House rules

  • The block is engine-free: it imports no app module and inspects only the shared `gate` entry shape (via isGateEntry). Every other entry kind is rendered by the caller’s `chat` render-prop. Callers project their engine’s run INTO the block; they never fork the surface.
  • The canvas is a COMPANION, not a fixture: the right pane and resize handle mount only while a sheet is open (or an opt-in always-on base canvas is passed). At rest the chat fills the viewport (flex-1). Never a placeholder canvas.
  • The block-owned canvas is DESKTOP-ONLY. Below --breakpoint-shell it is dropped, not narrowed (founder ruling 2026-08-19, from onboarding: the canvas is a visual for wide viewports and every commitment happens at the composer anyway). api.canvasAvailable is how a caller finds out — a stream that carries view-links must not render them when it is false, because a toggle whose sheet cannot appear is a dead affordance. See docs/strata/responsive.md.
  • Canvas ownership is a spectrum, not owned-vs-bare. Five modes: (1) chat only; (2) chat opens a generated sheet on an EXTERNAL host; (3) chat navigates a route (nav-link); (4) generated sheet STACKED over a predetermined canvas; (5) a deterministic workflow with predetermined artifact sheets on a BLOCK-OWNED pane. The block selects target by which props the caller passes.
  • The working-bar label arrives as `statusLabel` — the caller derives it. The block does no dispatch aggregation and owns only the reconnect line.
  • HITL is one primitive with two flavors: deterministic gates (gateArtifactCard auto-opens the artifact) and emergent approvals (rendered in the footer override). The block renders both.

See also