Recipes

The console recipes

The exact markup for the patterns every screen repeats: page header, panel, table, badge, key cap, menu, dialog and empty state. Copy the classes; don't approximate them.

Page header

Workspace / Runs

Runs

Every rollout, evaluation and sweep in this workspace.

crumbs text-[13px] · title font-display text-[30px] font-medium tracking-[-0.03em] · sub text-[14.5px] text-muted-foreground · actions right

Tags under a title

Reward audit

RWD

3/7 done

TAG_ROW · TAG_BUTTON raised h-6 rounded-full px-2.5 text-[12px] — raised because it edits in place · a flat BADGE for a fact you can't click · gap-3 below the title

Panel

Throughput

Environment steps per second, last 24 hours.

41,800

soft rounded-[18px] · header px-6 pt-5 pb-1 · body px-6 pb-5 pt-4

Badges, key caps and icon tiles

Workspace12 agentsRunning

Search with⌘K

Inline code: run_7f3a9c2e

BADGE h-[22px] rounded-full border px-2 text-[11.5px] · kbd raised h-5 rounded-[6px] · tile raised size-9 rounded-[11px]

Table

Run	Environment	Status	Steps
run_7f3a9c2e	Warehouse picking	Running	41,800
run_2b81d044	Negotiation arena	Queued	—
run_c09d4be1	Browser checkout	Failed	12,044

soft rounded-[18px] overflow-hidden · th px-6 py-2.5 text-[12px] · rows border-b border-border/60 hover:bg-foreground/[0.02] · td px-6 py-3 text-[13.5px]

operator@iacon.ai

Research plan

floating rounded-[16px] p-1.5 animate-rise-in · items h-9 rounded-[10px] px-2.5 text-[13.5px] · separator my-1 border-t border-border/60

Dialog

Delete this run?

Its trajectories and checkpoints are removed. This can't be undone.

overlay bg-black/25 backdrop-blur-[2px] · panel rounded-[22px] border bg-surface-1 p-6 shadow-float

Empty state

No datasets yet

Datasets appear here once a run exports its first accepted trajectories.

centred py-12 · title font-display text-[16px] font-semibold · body text-[13.5px] leading-6

Code block

bash

arkenos run create \
  --env warehouse-picking \
  --agents 12

Skeletons: rounded-lg bg-surface-2 animate-pulse, at the final size.

rounded-[14px] border · header row with an eyebrow language tag