Panel System v1.4

Four panel tiers.
One governed system.

Every panel in Agentable is described as validated data. Agents can open, fill, compose, and request changes — always under human control.

Explore the tiers View source

The four panel tiers

Each tier increases in capability while remaining fully governed by the same validation and provenance system.

TIER 1

Static

Pre-defined panels with fixed structure and immutable content. Ideal for documentation, onboarding flows, and branded headers.

Descriptor:

Fixed JSON schema with no runtime mutation.

TIER 2

Schema

Dynamic panels powered by defineSchemaPanel + DataAdapter. Supports structured data entry with live validation.

Registry:

Registered in the panel catalog with typed fields.

TIER 3

Composed

Agent-composed panels created at runtime via compose_panel. Ephemeral until pinned by a human.

Chrome Lifecycle:

Created → validated → rendered → pinned or discarded.

TIER 4

Custom React

Full React components registered through the CanvasEngine SPI. Maximum flexibility with complete access to the host DOM.

Registry:

Registered via plugin interface with sandbox boundaries.

Typed builder example

A generic settings panel defined using defineSchemaPanel.

import { defineSchemaPanel } from '@agentable/panels'

export const settingsPanel = defineSchemaPanel({
  id: 'user-settings',
  title: 'Account Settings',
  schema: {
    type: 'object',
    properties: {
      displayName: { type: 'string', minLength: 2 },
      emailNotifications: { type: 'boolean', default: true },
      theme: { type: 'string', enum: ['light', 'dark', 'system'] }
    },
    required: ['displayName']
  },
  adapter: new DataAdapter({
    source: 'user-profile',
    onMutate: (patch) => requestHumanApproval(patch)
  })
})

Governed by design

All panels flow through the same internal representation and validation pipeline.

IR Node Map

Every panel is normalized into an Internal Representation node containing type, schema reference, provenance metadata, and mutation history.

Validation Pipeline

1. Envelope validation
2. Catalog lookup & schema match
3. Budgets & quota enforcement
4. URL & content sanitizer

Human-in-the-Loop

Any mutate action from an agent triggers a review request. Humans approve or reject changes before they are applied to the canvas.

Provenance Badge

Agent-origin panels display a clear badge showing the originating agent, timestamp, and confidence score.

Tier comparison

Capability	Tier 1	Tier 2	Tier 3
Static content
Schema-driven fields	—
Runtime composition	—	—
Full React components	—	—	—
Agent compose_panel	—	—

Four panel tiers. One governed system.