Component

Settings panel

Dense settings form composed from shell, sections, rows, and slotted primitive controls.

Settings panel is a row-based assembly helper. It standardizes layout and hierarchy while every control stays an explicit primitive or component slot.
layout
DOM renderImage render
Settings panelDefault

Agent workspace

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Live

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.

Context

Optional local context attached to every run.
Reference packetResearch packet, spec, or evaluation fixture.
Release channelWhere generated interface updates are promoted.
preview

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Dense product settings with toggles, selects, steppers, and packet actions.

Agent workspace

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Live

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.

Context

Optional local context attached to every run.
Reference packetResearch packet, spec, or evaluation fixture.
Release channelWhere generated interface updates are promoted.
preview
Render state

Error

Settings panel with row and summary validation.

Agent workspace

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Needs review

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.

Context

Optional local context attached to every run.
Reference packetResearch packet, spec, or evaluation fixture.
Release channelWhere generated interface updates are promoted.
preview
Render state

Compact

Short modal-friendly settings stack.

Run defaults

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Live

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.
Render state

Success

Settings panel with successful sync state.

Agent workspace

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Synced

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.

Context

Optional local context attached to every run.
Reference packetResearch packet, spec, or evaluation fixture.
2 files
Release channelWhere generated interface updates are promoted.
stable
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
sections *readonly SettingsPanelSection[]-Section and row metadata with explicit ReactNode control slots. Serializable metadata is validated by settingsPanelSectionSchema.
title *ReactNode-Primary form title rendered in the shell header.
descriptionReactNode-Supporting copy below the title.
eyebrowReactNode-Optional compact section label above the title.
metaReactNode-Small metadata beside the title.
actionsReactNode-Header action slot.
footerReactNode-Footer action slot, usually cancel and submit buttons.
status'default' | 'error' | 'success'defaultOuter status border treatment.
compactbooleanfalseTightens header/body spacing for dense settings.
FieldRow.controlReactNode-Right-aligned primitive or component control slot.