# OPERATOR

> OPERATOR is a design system for operational interfaces: components, working screens, icons and typefaces for command, control and industrial software. Every component has a written contract (its props, the values each option allows, what may go inside what) that a coding agent can read instead of guessing.

## For coding agents

- [Instructions](/llms/instructions.md): The house rules, one line per component, and the recipes. Read this once before building.
- [The installer](/docs/agents/cli): `operator-ds` writes these instructions into a project (`init`), finds a component by need (`search`), prints one component (`component`), checks written code (`check`) and serves all of it over the Model Context Protocol (`mcp`).
- [Working with agents](/docs/agents): How the contract, the guidance and the check fit together.

## Components

- [ActionStatus](/llms/components/action-status.md): show the outcome of an action the user just took, with a way to retry
- [Alert](/llms/components/alert.md): an inline message that needs attention: error, warning, info or success; a callout
- [AppShell](/llms/components/app-shell.md): the frame of an app or workspace: its name, mode, data connection and UTC time; hold the app's Sidebar, as its navigation
- [AttachmentPreview](/llms/components/attachment-preview.md): show an attached file: its name, type, size and a safe preview
- [Avatar](/llms/components/avatar.md): show a person or unit by initials
- [Badge](/llms/components/badge.md): show a status label; a category or count that is read, not clicked
- [Breadcrumb](/llms/components/breadcrumb.md): show where a page sits in the hierarchy
- [BulkActionBar](/llms/components/bulk-action-bar.md): act on several selected rows at once
- [BulkResults](/llms/components/bulk-results.md): show what happened to each item after a bulk action
- [Button](/llms/components/button.md): trigger an action; submit a form
- [ButtonGroup](/llms/components/button-group.md): a row of related buttons; a segmented set of actions
- [Calendar](/llms/components/calendar.md): pick a day from a month grid that is always visible
- [Card](/llms/components/card.md): group related content in a bordered panel
- [Chart](/llms/components/chart.md): plot data as a line, area, bar, scatter, histogram or heatmap
- [Checkbox](/llms/components/checkbox.md): a yes or no choice in a form; select rows; a parent whose children are partly selected
- [Collapsible](/llms/components/collapsible.md): sections that expand and collapse (an accordion)
- [CollectionState](/llms/components/collection-state.md): the empty, loading, error or no-results state of a list or table
- [ComboBox](/llms/components/combo-box.md): pick one from a long or searchable list; autocomplete with results fetched as you type
- [CommandPalette](/llms/components/command-palette.md): a keyboard command launcher: search and run an action
- [ConfirmDialog](/llms/components/confirm-dialog.md): confirm a destructive or high-consequence action
- [ContextMenu](/llms/components/context-menu.md): right-click actions on an item, with a visible menu button as well
- [CoordinateInput](/llms/components/coordinate-input.md): enter a latitude and longitude
- [CopyButton](/llms/components/copy-button.md): copy an exact value (an ID, a coordinate, a command) to the clipboard
- [DataGrid](/llms/components/data-grid.md): a large or interactive table: selection, sorting, column sizing, paging, thousands of rows
- [DataTable](/llms/components/data-table.md): a simple table of rows, with optional sorting
- [DatePicker](/llms/components/date-picker.md): pick one date
- [DateRangePicker](/llms/components/date-range-picker.md): pick a start and an end date
- [DateTimePicker](/llms/components/date-time-picker.md): pick a date and a time in a named time zone
- [DescriptionList](/llms/components/description-list.md): label and value facts about one thing; metadata or measurements
- [Dialog](/llms/components/dialog.md): a modal for a focused task or form
- [Divider](/llms/components/divider.md): separate content with a rule, with an optional label
- [DropdownMenu](/llms/components/dropdown-menu.md): a menu of actions opened from a button
- [EntityPreview](/llms/components/entity-preview.md): summarize one record: its identity, condition, key facts and report quality
- [EventTimeline](/llms/components/event-timeline.md): events and durations on a time axis, in lanes
- [Field](/llms/components/field.md): give a form control its label, help text and error
- [FileUpload](/llms/components/file-upload.md): choose, drop or paste files
- [FilterBar](/llms/components/filter-bar.md): quick toggle filters above a list or table
- [FormErrorSummary](/llms/components/form-error-summary.md): list a form's errors at the top, each leading to its field
- [FormSection](/llms/components/form-section.md): group related form fields under a heading
- [InlineEdit](/llms/components/inline-edit.md): edit one value in place, with save and cancel
- [Input](/llms/components/input.md): a single line of text; a search box
- [Inspector](/llms/components/inspector.md): a side panel of details that leaves the page usable
- [JobStatus](/llms/components/job-status.md): the state and progress of a long-running job, with cancel and retry
- [LayerControl](/llms/components/layer-control.md): turn map layers on and off, and set their opacity and order
- [Link](/llms/components/link.md): go to another page or place
- [MapControls](/llms/components/map-controls.md): zoom and reset-north buttons for a map
- [MapLegend](/llms/components/map-legend.md): explain a map's symbols
- [MapScale](/llms/components/map-scale.md): a distance scale bar for a map
- [MediaFrame](/llms/components/media-frame.md): show a camera image or video frame with its freshness and capture time
- [MultiSelect](/llms/components/multi-select.md): choose several options from a short list
- [NumberInput](/llms/components/number-input.md): enter a number with a unit, a range and steps
- [OperationalStatus](/llms/components/operational-status.md): show the data quality, source and last update time of a reading
- [PlaybackControls](/llms/components/playback-controls.md): play, pause and scrub through recorded time
- [Popover](/llms/components/popover.md): details or controls in a small panel anchored to a button
- [Progress](/llms/components/progress.md): show how far along a task is, or that it is working
- [PropertyFilter](/llms/components/property-filter.md): build a filter from property, operator and value clauses
- [RadioGroup](/llms/components/radio-group.md): choose exactly one of a few visible options
- [Select](/llms/components/select.md): choose one option from a dropdown
- [Sidebar](/llms/components/sidebar.md): app navigation in a vertical rail
- [Skeleton](/llms/components/skeleton.md): a placeholder in the shape of the content while it loads
- [Slider](/llms/components/slider.md): pick a value or a range along a track
- [Sparkline](/llms/components/sparkline.md): a tiny trend line inside a row or card
- [SplitPane](/llms/components/split-pane.md): two resizable panels, side by side or stacked
- [StatCard](/llms/components/stat-card.md): one headline metric with its trend
- [Tabs](/llms/components/tabs.md): switch between views of the same subject
- [TagGroup](/llms/components/tag-group.md): a set of tags, which can be removable
- [Textarea](/llms/components/textarea.md): several lines of text
- [TimeField](/llms/components/time-field.md): enter a time of day on the 24-hour clock
- [TimeRange](/llms/components/time-range.md): pick a UTC time window, with presets
- [Toast](/llms/components/toast.md): a brief notification that something happened
- [ToastProvider](/llms/components/toast-provider.md): the host for Toast notifications, once at the root of the app
- [Toggle](/llms/components/toggle.md): switch a setting on or off, taking effect at once
- [Toolbar](/llms/components/toolbar.md): a bar of actions for a view or a selection
- [Tooltip](/llms/components/tooltip.md): a short hint on hover or keyboard focus
- [TreeView](/llms/components/tree-view.md): browse a hierarchy: folders, units, asset trees
- [UploadQueue](/llms/components/upload-queue.md): show files as they upload, with progress and recovery

## Recipes

- [CommunicationsConsole](/docs/patterns/communications-console): Coordinate fictional military support channels, compose messages, distinguish delivery from acknowledgment and retain drafts through connection changes. `operator-ds add communications-console`
- [FacilityMonitoring](/docs/patterns/facility-monitoring): Review supplied cameras, equipment, map and events at one shared time, with explicit recording gaps, session bookmarks, decoded-frame snapshots and camera-request outcomes. `operator-ds add facility-monitoring`
- [OperationsMap](/docs/patterns/operations-map): Inspect military base-support reports on a linked map and table, with explicit source freshness, retained positions, uncertainty, measurement and accepted annotations. `operator-ds add operations-map`
- [AssetManagement](/docs/patterns/asset-management): Manage an industrial equipment register, inspect condition and ownership, create records and revise service assignments with explicit save outcomes. `operator-ds add asset-management`
- [IncidentResponse](/docs/patterns/incident-response): Triage military support incidents, assign case ownership, review evidence, resolve cases and prepare a shift handover. `operator-ds add incident-response`
- [MaintenancePlanning](/docs/patterns/maintenance-planning): Schedule industrial maintenance in crew and resource lanes, review prerequisites and resolve time and availability conflicts before applying changes. `operator-ds add maintenance-planning`

## Docs

- [Introduction](/docs): Setup: tokens, the Tailwind plugin, fonts.
- [Color](/docs/foundations/color): The color tokens and where each may be used.
- [Spacing](/docs/foundations/spacing): The spacing and height scale.
- [Typography](/docs/foundations/typography): Type sizes, casing and the two typefaces.
- [Icons](/docs/foundations/icons): The three icon sets.
- [How it is verified](/docs/compliance/overview): What has been checked, and what has not.