Components

Each page opens with a live HTML reference preview, rendered with the tokens in light, dark and high contrast. The Mantine mapping says which Mantine component each one becomes.

Actions

Component	What it is
ActionIcon	An icon-only button for a small action that everyone knows, such as send, copy, close or more.
Button	A button reacts the moment you press it, and its label names the action it runs.
CodeEditorButton	The button that opens the code editor for a task that works on files in its sandbox.
Menu	A dropdown of secondary actions for one object, opened from a “More” ActionIcon or a Button with a chevron.

Data

Component	What it is
Accordion	An accordion stacks sections that open one at a time, such as FAQs, advanced settings or grouped task sources.
ArtifactViewer	The Artifacts section of a task’s Result tab: every file the task produced in a list, and a built-in viewer for the one you pick.
Avatar	A circle that stands for a person or an agent: initials for people, the caret for Upmo, an icon for custom agents.
Badge	A small pill that states a status or a category in a word, with its icon.
Card	A bordered tile for one object, such as a task, an agent, an automation or a provider to pick.
Chart	Stat tiles, lines and bars for the Usage page and cost panels, drawn with the validated chart tokens.
ChatMessage	One turn in a chat: the user’s bubble on the right, and the assistant’s reply on the left under the caret avatar.
CodeBlock	Code of more than one line in Fira Code, such as tool call arguments, config snippets, SQL the agent ran or install commands.
DeliveryCard	The Delivery card on a task page: where the task’s result goes, and whether it got there.
DiffBlock	A unified diff for one file, shown wherever an agent proposes a change: approval cards, task step details, artifact history.
Divider	A 1px rule that separates groups: form sections, menu groups, chat days, and metadata values in a line.
EngineCard	A selectable Card for choosing the engine that runs a task: Upmo’s built-in engine, Claude Code, Codex, OpenCode, Cursor or Pi. It also shows where the sandbox lives, what the engine may use and what it must ask for first.
EventLog	Every event of one run, as a log: one row per event, in plain words, oldest at the top.
Kbd	A keyboard key for shortcuts in menus, tooltips and hint lines, paired with code for inline code.
MemoryItem	One remembered fact or one retrieved chunk: what Upmo knows, where it learned it, who it applies to and how to correct it.
Prose	Typography for rendered Markdown: chat replies, task results, knowledge documents, docs.
Spoiler	Long text cut to a few lines with a “Show more” link, so lists and cards stay easy to scan.
Table	Dense rows you can compare: the cost ledger, model lists, task events, knowledge documents.
TerminalStream	Live output from a task sandbox, as it happens: build logs, test runs, shell tool calls.
Timeline	Events in order down a line: a task’s statuses and steps, an automation’s runs, an audit trail.

Feedback

Component	What it is
Alert	An inline notice that stays on the page until the problem it describes is resolved.
EmptyState	What a list or page shows before it has anything: the name of the thing, one line on how to add it, and the button that adds it.
Loader	The caret drawing itself, and the only loading indicator in Upmo.
Notification	A toast that confirms something happened, shown for a short time in the corner.
Progress	A thin bar for anything with a known fraction: budget, tokens, uploads, steps.
Skeleton	A shimmering placeholder in the shape of the content that is loading.
StatusCaret	The caret as a progress indicator: one mark that shows where a task or automation is.

Forms

Component	What it is
FormExample	A showcase page, not a component: one complete form built from the inputs, with its layout, validation and success path.
Stepper	A long form split into three to five named steps, each validated before the next.

Foundations

Component	What it is
Breakpoints	A resizable app shell that shows how the layout changes at the system’s breakpoints (576, 768, 992, 1200px).
ColorVision	A review tool that shows how status badges, chart colours and a card look under each kind of colour-vision deficiency.
IconMap	A review tool that draws all of icons.json from the live Tabler sprite, with Upmo’s own marks (caret, status carets) inline where the map names them.
Motion	The motion catalogue, live, with one replayable tile for every motion in the system.

Inputs

Component	What it is
BrandSelect	A Select for things that have a logo, such as models grouped by provider, connectors and delivery targets, with the 20px mark in the trigger and in every row.
BrandTile	A tile you select to pick one third-party service, such as a provider, a connector or a sandbox runtime.
Checkbox	A box for picking several of a few options, or one yes/no that takes effect on submit, with the caret as its check mark.
Chip	A small toggle or token, such as a knowledge folder attached to a chat, a filter or an uploaded file.
Composer	The message box at the bottom of Chat, with context chips, a growing text area, a model picker, attach, dictate and the send caret.
DateInput	A date or time field that takes a typed value or a pick from a calendar, and always shows the user’s timezone.
FileInput	A drop zone that also opens the file picker, with one row per file that shows its progress or why it was rejected.
MultiSelect	Several values from a long list, shown as pills inside the field and filtered as you type.
Radio	One choice from two to five options, all visible, each with a short description.
SegmentedControl	Two to five short options of equal weight, side by side, with one always selected.
Select	One value from a list of six or more options, with search above ten.
Slider	A value you pick by dragging, smooth or in steps, with the number always visible.
Switch	An on/off setting that takes effect the moment it flips.
Textarea	A multi-line field for goals, instructions and messages that grows with the text and counts characters when there is a limit.
TextInput	A single-line field with a visible label, a description, and a message line that reacts as the user types.

Marketing

Component	What it is
Hero	The landing page hero, and the reference layout for every marketing page.

Navigation

Component	What it is
Breadcrumbs	The path to the current page, shown when the page sits more than one level below a sidebar item.
CommandPalette	The ⌘K launcher: one field that searches pages, actions, recent objects and knowledge.
Pagination	Page controls for lists over 50 rows, such as the ledger, task events and knowledge documents.
Sidebar	The app’s main navigation: the wordmark on top, one item per section, workspace items below, and a footer with setup, theme and sign out.
Tabs	Several views of the same object, side by side under one title.

Overlays

Component	What it is
Drawer	A panel that slides in from the right so you can inspect one thing without leaving the page: a tool call, a task event, a knowledge chunk, a long form.
Modal	A focused dialog for a decision or a short task that must finish before the page goes on.
Popover	A small panel attached to a control, holding one or two fields or a short piece of detail.
Tooltip	A short label that appears on hover and focus, to name an icon-only control or spell out an abbreviation.

Pages

Component	What it is
PageChat	A showcase of the Chat page, with the sidebar, a 280px chat list, the messages at measure width and the composer pinned to the bottom.
PageOnboarding	A showcase of the first run, with a centred 640px column, no sidebar, a four-step Stepper (Instance, Provider, Sandbox, First task), selectable provider tiles, one field and one primary action.
PageSettings	A showcase of Settings, with a section nav on the left, a providers Table, rows that save inline with Select and Switch, and a danger zone.
PageTaskDetail	A showcase of one task run, with its header, the approval it waits on, a tabbed main column and a side column of cards.
PageTasks	A showcase of the Tasks list, built from Sidebar, the top bar, Alert, SegmentedControl, Select, Card and Badge.