Komponenten

Tool call

Ein Tool-Aufruf als ruhige Zeile, die wachsen kann: Zustand, Verb, Ziel, Dauer, aufklappbare Ausgabe; wartet er auf dich, wird er zur Karte mit Erlauben.

Reasoning

Das Denken des Modells als Ausklapper über der Antwort: öffnet sich beim Streamen, faltet sich am Ende, die Person behält das letzte Wort.

Agent plan

Was ein Agent getan hat oder tun wird: eine Karte mit einer Zeile je Schritt und seinem Status-Wort, die eine Hauptaktion im Fuß.

Cited answer

Eine Antwort mit nummerierten Belegen und den Quellen darunter; dieselbe kleine Marke im Text und an der Zeile.

Approval request

Der Assistent fragt, bevor er Geld bewegt: was, wie viel, warum, dann Freigeben, Bearbeiten, Ablehnen.

Action receipt

Was der Assistent gerade getan hat: eine Zeile je Aktion in der Vergangenheit, mit Betrag, dann Rückgängig.

Autonomy rule

Wie weit der Assistent allein gehen darf, als ein Satz mit dem Limit darin.

Status

Ein Zustand als Wort mit Punkt davor, oder dem drehenden Bogen, solange etwas läuft.

Conversation

Ein Gesprächsverlauf, der unten verankert ist: folgt neuen Nachrichten, bis du hochscrollst; „Zum Neuesten“ führt zurück.

Prompt input

Wo eine Person den nächsten Zug schreibt: Text in einer weißen Fläche auf grauer Hülle, darunter Anhängen, deine Werkzeuge, Mikrofon und Senden.

Voice capture

Der Assistent hört zu: Status und Zeit über den gehörten Worten, die noch werdenden blasser; Abbrechen neben der einen Hauptaktion.

Soundwave

Wie eine Stimme aussieht, während eine App zuhört: Pillen, Balken, Linie oder Punktfeld.

Command dock

Eine kleine Pille, die zu einem Eingabefeld aufgeht; die Antwort kommt Zeile für Zeile darunter.

Thinking state

Was der Assistent gerade tut: Timer, durchsuchte Quellen als Chips und Schritte, die einzeln ankommen; faltet sich am Ende auf die Kopfzeile.

Sourced answer

Eine Antwort mit Quellenkarten darüber und Zitat-Chips im Text, die ihre Karte aufleuchten lassen; Weiterfragen, Kopieren, Neu erzeugen, Feedback.

Chat composer

Das Eingabefeld eines Agenten mit Modellwahl, Freigabe-Schalter und der Zeile der verbundenen Apps.

Context window

Was das Modell gerade im Kopf hat: ein Waffelfeld der belegten Tokens, die Teile als Zeilen, Verdichten an Ort und Stelle.

Agent inbox

Alle Läufe eines Agenten, gruppiert nach dem, was sie von dir brauchen; ein wartender Lauf öffnet seine Spur und fragt mit Ablehnen und Freigeben.

Dash card

Eine hohe Dashboard-Karte: oben etwas zum Ansehen (Icon, Gauge, Aktionen, Chart), unten Zahl, Titel und Zeile; als Fläche oder in der Markenfarbe, auf Wunsch ein Link.

Score gauge

Ein Wert auf einem 270°-Bogen in der Primärfarbe, mit Icon in der Mitte und der Veränderung darunter; zeichnet sich beim Erscheinen ein.

Action list

Kurze Aktionen als getönte Zeilen in der Markenfarbe – Schnellzugriffe, Tipps, nächste Schritte, Medien – mit einem Zeichen am Ende.

Command launcher

Arcs Command Palette im Overlay: ⌘K von überall, Filter als Chips, Treffer führen per Link oder Aktion weiter.

Setup checklist

Ein Konto oder Projekt einrichten: Titel mit Zähler und Balken, die Schritte als Karten mit ihrem Einstieg oder Erledigt-Zeichen.

Start options

Ein leerer Ort, der Wege hinein anbietet: was fehlt, dann zwei, drei Optionen (von Hand, Import, per Agent) mit Zeile und Aktion.

Amount

Ein Geldbetrag mit Vorzeichen, Währung und Tabellenziffern; mit available färbt er sich bei knapp oder zu viel.

Balance

Das verbleibende Geld als Chip im Kopf; die Zahl rollt bei Änderung, low färbt es bernstein und sagt es in Worten.

Keypad

Ziffernblock für einen Betrag auf dem Telefon; hält die Eingabe gültig, Hardware-Tasten gehen auch.

Stat

Eine Zahl, die man von weitem liest: Label, Wert, und die Veränderung, die ihr Vorzeichen selbst bestimmt und ihre Basis nennt.

Log viewer

Die Ausgabe eines Laufs beim Streamen: Kopfzeile, eine Mono-Zeile je Eintrag; klebt unten, neue-Zeilen-Pille beim Hochscrollen, Nächster Fehler.

Kbd

Eine Taste als kleine Mono-Marke, passend zur Schrift drumherum; keys schreibt eine Kombination.

Relative time

Eine Zeit, wie man sie sagt („vor 5 Minuten“), die aktuell bleibt; die genaue Zeit steht im Titel.

Data grid

Datensätze sortieren, auswählen, blättern und kürzen: Mehrfach-Sortierung mit Shift, Bereichsauswahl, ausblendbare und verbreiterbare Spalten, eine Einheit je Spalte.

Bill schedule

Die nächsten Rechnungen nach Datum, jede unter einer kleinen Datumskachel; wer zahlt, steht dabei, eine bezahlte wird grau und bleibt an ihrem Platz.

Insight

Eine Sache, die der Assistent bemerkt hat: ein Satz, die Zahl, die es belegt, und eine kleine Linie der letzten Wochen; höchstens ein Link.

Kind

Fünf Arten von Dingen in einer Agenten-Konsole, jede mit einem kühlen Farbton und immer mit ihrem Wort; warme Töne bleiben für Probleme.

KPI

Eine Zahl und was sie tut: Veränderung mit selbst bestimmter Farbe, ein kleiner Verlauf und der Fortschritt zum Ziel.

Day grid

Tage als Punktfeld, jeder Punkt so groß wie das, was an dem Tag passiert ist; der Zeiger ist eine Lupe.

Range meter

Ein Messwert auf einem Lineal aus Strichen, das sich unter dem Wert hebt; die Zahl reitet darüber.

Usage card

Die Verbrauchsseite in einer Karte: Zeitraum, Credits gegen das Kontingent nach Verwendung, Tagesleiste, weitere Limits und Upgrade.

Lane board

Spalten mit Karten, die man innerhalb und zwischen Spalten zieht; auch per Tastatur.

Flow

Knoten mit Kanten auf einer Fläche, die man verschiebt, zoomt und neu anordnet.

Button

A clear, responsive action with quiet secondary states.

Action button

A compact button for frequent toolbar actions.

Split button

A primary action with a menu of nearby alternatives.

Button group

Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.

Floating button group

Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.

Expanding button group

Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.

Copy button

Copy a value with immediate confirmation.

Theme switcher

Four smooth ways to move between light and dark appearance.

Eclipse

The next appearance crosses the page like an eclipse.

Split

The next appearance opens from a slim center seam.

Rise

The next appearance rises into place.

Icon morph

Icons that morph between states: menu to close, play to pause, copy to check, and more.

Confirm morph

A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Hold to confirm

Confirm a destructive action by holding, not tapping.

Swipe actions

Reveal row actions with a swipe, or from the same actions in a menu.

Reactions

Acknowledge a post in one tap, with counts that roll.

Dropdown menu

A focused list of actions anchored to a trigger.

Context menu

Secondary actions kept close to the selected object.

User menu

Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

Input

A single line field with clear labels and useful states.

Textarea

A multiline field for notes, descriptions, and longer text.

Password field

Capture sensitive text with a visible reveal control.

Search field

A recognizable search entry point with clear affordances.

Inline edit

Rename in place: the text becomes a field without moving.

Expanding search

An icon that morphs into a search field with results beneath it.

Password strength

Show how strong a new password is while it is typed.

Number field

Enter a bounded number with clear increment controls.

Tag input

Turn short text values into removable tags.

Scrub input

A Figma-style number field: drag the label to scrub, or type values, units, and arithmetic.

Phone input

A phone field with a country picker, formatting as you type, and E.164 output.

Money input

A currency field with live grouping, stable width, rolling digits, and minor-unit output.

Shortcut recorder

Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.

Mention input

A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.

Select

A compact choice field with a keyboard friendly menu.

Combobox

Search and select from a list without leaving the field.

Multi-select

Select several values while keeping the field readable.

Chip group

Filter by a few facets with chips that morph as you pick them.

Morph select

A select whose trigger grows into the list, with a gliding highlight and type-ahead.

Checkbox

A binary choice with a precise, legible state.

Switch

A tactile toggle for settings that take effect immediately.

Radio group

Choose one option from a visible set.

Segmented control

Switch between a small set of related views.

Rating

A simple, accessible way to capture a numeric opinion.

Billing toggle

A monthly and yearly switch with a savings badge and prices that roll to the new amount.

Radio cards

Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.

Slider

Pick a value or a range on a track that follows your finger.

Elastic slider

A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.

Range histogram slider

A price range over a live histogram of the data, lighting the bars inside the range and settling on bar edges.

Calendar

Browse dates in a clear, compact month view.

Date picker

Choose a date without losing context.

Time picker

Choose a time with sensible keyboard behavior.

Date range picker

A range picker that grows from its trigger into two months with presets and a stretching range highlight.

Color picker

A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.

File dropzone

A generous target for dropping one or more files.

Signature pad

Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.

Rich text editor

A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.

Tabs

Switch between related content in the same context.

Breadcrumb

Show where a page sits in a hierarchy.

Pagination

Move through a long collection with clear bounds.

Accordion

Progressively reveal supporting information in place.

Expandable card

Give a dense card more room when requested.

Resizable panels

Trade space between panes by dragging the divider between them.

Scroll area

A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.

Expandable text

Long text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown only when the text overflows.

Drawer

A temporary side surface for focused work.

Dialog

A focused surface for decisions that need attention.

Popover

A small anchored surface for contextual information.

Tooltip

Short supporting text for unfamiliar controls.

Bottom sheet

A sheet that rests at a peek or full height and follows your finger.

Hover card

Preview a person or link on hover or focus without leaving the page.

Alert

A persistent message that helps people recover or continue.

Toast

Brief confirmation for a completed background action.

Toast stack

Stack short results at the edge until you reach for them.

Cookie consent

A consent bar that morphs into preferences and folds into a reopen button.

Announcement bar

A top banner that rotates messages, counts down, and collapses smoothly when dismissed.

Progress

Show how much of a known task is complete.

Skeleton

Reserve space while content is still loading.

Usage meter

Show what fills an allowance and how close it is to the limit.

Onboarding checklist

Guide a new workspace through setup, one step at a time.

Stepper

Show where a person is in a multi-step flow and what is done.

Countdown

A launch countdown with rolling digits that morphs into a live state at zero.

Avatar

A compact identity marker for people and accounts.

Avatar group

Show a team or set of contributors in a small space.

Badge

A small label for status, category, or metadata.

Card

A contained group of related content and actions.

Metric card

A compact summary for a number that needs context.

Empty state

A useful next step when there is nothing to show yet.

Sparkline

Show a compact trend beside a value.

Gauge

Show a value against a known range.

Animated counter

Give changing totals a clear sense of movement.

Bar chart

Compare one measure across days and scrub any bar for its value.

Activity heatmap

See a year of activity at a glance, one square per day.

Line chart

A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.

Donut chart

A donut whose arcs morph between datasets, with the active value rolling into the center.

Streamgraph

Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.

Brush chart

A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.

Ridgeline

Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.

Treemap

A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.

Waffle chart

A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

Slope chart

Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.

Tree view

Navigate nested folders and structured content.

Filter toolbar

Keep collection filters close and easy to reset.

Sortable data table

Compare structured records with sortable columns.

Code block

Present code with legible hierarchy and copy access.

Reorderable list

Organize items with direct drag and drop.

JSON viewer

A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Timeline

Follow what happened, newest first, grouped by day.

Chat thread

A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.

Comment thread

Threaded comments with replies, reactions, mentions, inline edit, and resolve.

Image compare

Drag a divider across two images to see what changed.

Carousel

Browse a row of slides by dragging, flicking, or arrowing through them.

Card stack

Review a deck one card at a time, with a throw and an undo.

Text reveal

Reveal a short piece of content with restrained motion.

In-view title

Bring a section title in as it scrolls into view.

Text morph

Morph a label into its next state, letter by letter.

Text shimmer

Show ongoing work with a calm light across the words.

Slot text

Text and numbers that spin into their new value on staggered slot machine reels.