Component inventory
219 installable catalogue sources: 214 public components and 5 supporting aliases, tokens, or helpers across 16 families. Search by name, export, or description; press / to jump to the field and Enter to open the top match.
Included in the single kansho full pack. Components are not offered as separate installs.
/
214 components · 5 supporting sources · 16 families
UI
Atomic primitives — buttons, badges, inputs, menus, tooltips · 32- Agent dotin AtomsSmall colored indicator dot for agent identity, supports tone variants (blue/green/amber/red/neutral)ui/agent-dot.tsx
- AlertAlert banner with icon, title, message, optional CTA button and dismiss action, supports tone variantsui/alert.tsx
- Badgein AtomsCompact label in dot/numeric/pill variants with tone and emphasis options for counts and statusesui/badge.tsx
- BreadcrumbNavigation breadcrumb trail with optional icon, size variants, ellipsis, and collapsed sub-itemsui/breadcrumb.tsx
- Button groupButton group container and individual items with active/loading/destructive statesui/button-group.tsx
- Buttonin AtomsPrimary action button with variant/size options, loading state, and asChild supportui/button.tsx
- Cardin CardsFlexible container card with optional header/footer, supports surface/muted/outline variantsui/card.tsx
- CheckboxNative checkbox with optional field label and error messaging, supports indeterminate stateui/checkbox.tsx
- Choice cardRadio group component using card layout with optional description and validationui/choice-card.tsx
- Context menuRight-click context menu with items, checkboxes, radio options, submenus, and keyboard supportui/context-menu.tsx
- Date pickerPopover date picker supporting single/range modes with disabled date matching and clear buttonui/date-picker.tsx
- Disclosurein Thinking processExpandable disclosure/accordion pattern with chevron animationui/disclosure.tsx
- Dropdown menuDropdown menu with items, checkboxes, radio options, submenus, and keyboard navigationui/dropdown-menu.tsx
- Fieldsupports FieldRe-export of `inputs/field.tsx`ui/field.tsx
- Icon buttonin AtomsCompact icon-only button for toolbar/header actionsui/icon-button.tsx
- Inline confirm buttonin Permission historyTwo-click destructive action button with auto-revert and Escape cancelui/inline-confirm-button.tsx
- Inputin AtomsSingle-line text input with field status stylingui/input.tsx
- Interactive containerin Session listWrapper that conditionally renders button or div based on onClick prop, supports pressed/expanded/controlsui/interactive-container.tsx
- KbdKeyboard shortcut chip — the single presentational primitive for shortcut hints in search fields, command inputs, palette, and top navui/kbd.tsx
- Legendin Agent capability matrixChart legend displaying color swatches with labelsui/legend.tsx
- PaginationPagination navigation with boundary/sibling options, ellipsis handling, and compact variantui/pagination.tsx
- RadioNative radio input with field label, description, and error messagingui/radio.tsx
- Scope chipin Scope escalationSmall chip displaying permission scope string with tone indicator (allowed/scoped/denied/neutral)ui/scope-chip.tsx
- Scroll fadein Tab stripHorizontal scroll container with gradient fade on edges when content overflowsui/scroll-fade.tsx
- SeparatorVisual divider in horizontal or vertical orientationui/separator.tsx
- Step indicatorCompact horizontal progress for short guided flows — numbered dots with connectors, done/current/upcoming states, aria-current on the current stepui/step-indicator.tsx
- Tagin SettingsInline removable tag/chip with tone variants and optional dismiss buttonui/tag.tsx
- Textareain AtomsMulti-line text input with resize disabled and field status stylingui/textarea.tsx
- Theme togglesupports Theme ToggleRe-export of `shell/theme-toggle.tsx`ui/theme-toggle.tsx
- TimeLive, auto-ticking relative timestamp (accepts Date/ISO/epoch ms); hydration-safe, with absolute title and machine-readable dateTimeui/time.tsx
- Togglein Memory settings rowSwitch-style boolean toggle in sm/md sizes with smooth animationui/toggle.tsx
- Tooltipin AtomsFloating tooltip with configurable delay and side positioningui/tooltip.tsx
Inputs
Richer form inputs — combobox, multi-select, token input · 12- ComboboxSearchable dropdown with grouped options, custom value support, loading state, and keyboard navigationinputs/combobox.tsx
- Command inputTerminal-style command input with prefix, suggestions dropdown, and arrow/Escape navigationinputs/command-input.tsx
- Copyable fieldRead-only display field for sensitive data (secrets/URLs/code) with copy, reveal, and open-in-new-tab actionsinputs/copyable-field.tsx
- FieldForm field wrapper threading label, description, error message, and validation state to inputs (canonical location)inputs/field.tsx
- Inline editableIn-place text/textarea editor with commit/cancel buttons, validation, and error displayinputs/inline-editable.tsx
- Model pickerSingle dropdown for model selection: provider glyph, label, effort suffix, right-aligned price hint, grouped options with budget tags, and disabled rows with a hover reasoninputs/model-picker.tsx
- Multi selectMulti-select dropdown with filter search, selected chips, and clear-all actioninputs/multi-select.tsx
- Number stepperNumeric input with +/- buttons, min/max constraints, optional unit labelinputs/number-stepper.tsx
- Password inputPassword field with reveal/hide toggle, copy button, and mode variants (current/new)inputs/password-input.tsx
- Search inputSearch field with leading icon, clear button, optional loading state, and keyboard shortcut hintinputs/search-input.tsx
- SelectDropdown select with option descriptions, disabled options, and size variantsinputs/select.tsx
- Token inputTag-style input for multiple tokens/tags with validation, max limit, and keyboard navigationinputs/token-input.tsx
Loaders
Loading states — spinners, skeletons · 4- Braille loaderin Workflow canvasAnimated spinner using braille characters, respects prefers-reduced-motion, supports custom framesloaders/braille-loader.tsx
- Braille spinnerssupports Braille LoaderFrame definitions consumed by `BrailleLoader`loaders/braille-spinners.ts
- Spinnerin AtomsThe kit-wide running/loading renderer — a thin BrailleLoader wrapper (xs/sm/md sizes, inherited colour); decorative by default, optional `label` announces via `role="status"`. Used by Button, fields, and status rowsloaders/spinner.tsx
- SkeletonPlaceholder loading state with configurable shape (rect/text/circle/line) and dimensionsloaders/skeleton.tsx
Surfaces
Data display — tables, metric cards, modals, charts · 10- Data tableFull-featured data table with sorting, row click, optional row selection (checkbox column), skeleton loading rows, empty state, sticky first column, and density modessurfaces/data-table.tsx
- Log tableMonospace log viewer displaying entries with timestamp, level tags, source, message, and metadatasurfaces/log-table.tsx
- Metric cardKPI display card with value, unit, delta indicator (up/down), optional trend chart, and legendsurfaces/metric-card.tsx
- Metric card tokenssupports Metric CardStyle tokens for `MetricCard`surfaces/metric-card-tokens.ts
- Mini chartin Metric cardCompact SVG chart (line/area/bar variants) for trend visualization with tone optionssurfaces/mini-chart.tsx
- ModalModal dialog and side sheet components with header, footer, dismissible overlay, and size variantssurfaces/modal.tsx
- Session rowin Session listList item/container for sessions showing status, agent, branch, tokens, cost, duration metadatasurfaces/session-row.tsx
- Settings rowin Memory settings rowSettings panel section and individual setting rows with label, description, control, badge, and status hintsurfaces/settings-row.tsx
- Status cardStatus display card with icon, label, value, detail, tone-based dot indicator, and trailing contentsurfaces/status-card.tsx
- ToastTransient feedback toast (neutral/success/danger/warning) with leading status icon, optional undo action and dismiss; `Toaster` provider + `useToast` hook manage a bottom-right viewport (max 3, auto-dismiss, hover/focus pause, enter-only motion)surfaces/toast.tsx
Shell
App chrome — app shell, side nav, top nav, command palette · 12- App shellApplication frame with sidebar, sticky header, scrollable content, and rounded inset card layoutshell/app-shell.tsx
- Collapsed side navCollapsed sidebar rail showing workspace initials, icon navigation items with badges, expand buttonshell/collapsed-side-nav.tsx
- Command paletteFull-screen command/search palette with grouped items, recent section, keyboard navigation, and fallback actionshell/command-palette.tsx
- Empty stateEmpty state placeholder with icon, title, description, and primary/secondary action buttonsshell/empty-state.tsx
- Page headerPage header with title, subtitle, metadata, badge, action buttons, and optional tabs with countsshell/page-header.tsx
- Panel shellDestination-view scaffold: a sticky header (back affordance · title · optional meta + actions slots) over a centered, max-width content column — the shared frame for Activity, Analytics, Git, Replay, and peersshell/panel-shell.tsx
- Setup check rowOne item in a setup/readiness checklist: leading status glyph (pending/checking/ok/fail/skipped), title + description, trailing action slot; sr-only status word announces changesshell/setup-check-row.tsx
- Side navFull sidebar navigation with workspace info, collapsible sections, status indicators, badges, and footershell/side-nav.tsx
- Status bar28px bottom IDE status bar with leading/trailing slots over a 1px top border; StatusBarPath renders monospace path textshell/status-bar.tsx
- Theme togglein AtomsLight/dark/system tri-state theme toggle; persists to localStorage (`kansho.theme`), "system" follows the OS liveshell/theme-toggle.tsx
- Top navSticky top navigation bar with breadcrumbs, tag metadata, search button, actions, notifications, user statusshell/top-nav.tsx
- Window toolbar40px IDE window chrome bar with optional macOS traffic-light inset and leading/center/trailing slots over a 1px bottom bordershell/window-toolbar.tsx
Agent
Agent conversation UI — messages, tool calls, approvals, reasoning · 41- Agent plan activityEmbedded plan execution tracker with update notes, header, running step, and activity checklistagent/agent-plan-activity.tsx
- Approval actionsin Permission requestRenders approve/deny/action buttons with optional static preview stylingagent/approval-actions.tsx
- Approval card basein Permission requestLayout wrapper for approval/permission cards with icon, header, summary, details, and footeragent/approval-card-base.tsx
- Audit log rowin Audit logSingle audit event row showing timestamp, event type, actor, target, outcome, and expandable detailsagent/audit-log-row.tsx
- Citation cardCard displaying source metadata (web/doc/code/memory) with snippet; inline numeric badge for footnote-style refsagent/citation-card.tsx
- Code blockSyntax-highlighted code display with line numbers, copy button, diff highlighting, and maxHeight scrollingagent/code-block.tsx
- Compose boxChat input with callback-gated attach, mention, picker, submit, stop, and streaming queue controlsagent/compose-box.tsx
- Conversation richin Citation cardChat layout container, image figure with actions, source domain pills, and inline copy buttonagent/conversation-rich.tsx
- Cost chipCompact display of token count and/or USD cost with icons in a rounded pillagent/cost-chip.tsx
- Human approval cardin Human approvalAgent approval request card with action, urgency level, diff stats, and approve/deny/review buttonsagent/human-approval-card.tsx
- Inline artifact cardIn-thread artifact card with file-type glyph, name, one-line meta, and Open (primary) / optional Diff / Download actions; kinds file/document/image/report/patch; quiet surface sized for a prose columnagent/inline-artifact-card.tsx
- Inline url pillInline clickable URL chip with a no-network favicon stand-in (host monogram / globe) and truncated display textagent/inline-url-pill.tsx
- Long running task cardin Long running taskTask progress card showing status, elapsed/ETA, progress bar, last update, and pause/cancel buttonsagent/long-running-task-card.tsx
- Markdown blockScoped markdown styler for headings, lists, inline code, fenced code blocks (contained horizontal scroll), blockquotes, and tables with comfortable/compact densityagent/markdown-block.tsx
- Memory viewerList of agent memory facts with kind (working/persistent), confidence, source, timestamp, and edit/delete buttonsagent/memory-viewer.tsx
- Message action toolbarFloating toolbar with copy, retry, edit, branch, react, share, thumbs up/down iconsagent/message-action-toolbar.tsx
- Message bubbleChat message container with role, author, timestamp, status badge, and optional metadata/footer; assistant replies default to unboxed 15px/1.6 prose (user/tool stay boxed), and `variant="bubble"` opts an assistant reply back into the boxagent/message-bubble.tsx
- Message groupThread coalescing wrapper that renders the author/timestamp header once for a run of same-author `MessageBubble`s (clones later bubbles with `hideHeader`); `DayDivider` is a quiet centred date rule announced as a separatoragent/message-group.tsx
- Permission history rowin Permission historyPermission decision row (granted/denied/always/revoked) with actor, scope, timestamp, and revoke affordanceagent/permission-history-row.tsx
- Permission requestPermission gate card with title, rationale, risk level, requested scopes, and approve/deny/always buttonsagent/permission-request.tsx
- Plan todoHierarchical checklist with pending/running/done/skipped statuses, toggle interaction, and progress counteragent/plan-todo.tsx
- Progress meterHorizontal progress bar with label, value/max, thresholds, and dynamic tone escalation (warning/danger)agent/progress-meter.tsx
- Provider outage noticein Provider outageWarning banner for service issues (busy/rate-limited/timeout/outage) with countdown and retry actionagent/provider-outage-notice.tsx
- Question options cardin Question optionsInteractive clarifying question UI with single/multi-select, "Other" text field, and wizard sequencingagent/question-options-card.tsx
- Reasoning activityin Trace blockCollapsible reasoning block showing query, action, sources with streaming animationsagent/reasoning-activity.tsx
- Retry failure cardin Retry failureError card with title, cause, attempt counter, stack trace, and retry/escalate-to-human actionsagent/retry-failure-card.tsx
- Run control barin Run controlsCompact state pill with callback-gated controls to start, pause, resume, cancel, retry, or resetagent/run-control-bar.tsx
- Run details panelin Run detailsRight-sidebar panel showing run metadata (id, agent, model, tokens, cost), progress, and steps listagent/run-details-panel.tsx
- Skills pickerSearchable dropdown menu of skills grouped by category with recently-used section and multi-select supportagent/skills-picker.tsx
- Software connect cardin Software connectBrand-led approval card for connecting to external tools with scope split-button (once/session/always)agent/software-connect-card.tsx
- Status dotin Status legendTiny colored dot with pulsing halo for running status, used in monitoring and activity feedsagent/status-dot.tsx
- Status glyphin Thinking processThe shared reasoning/status glyph: a tinted circle + status icon (BrailleLoader for running, blocked included) that cross-fades on status change via icon-swap; sm/md/lg sizes. Used across the agent reasoning familyagent/status-glyph.tsx
- Status pillInline status badge with icon and label (pending/running/success/error/skipped/paused)agent/status-pill.tsx
- Step status rowSingle step in a timeline with indexed circle, title, duration, description, and vertical connectorsagent/step-status-row.tsx
- Streaming indicatorLive streaming state display (thinking/streaming/tool/done/stalled) with optional token rate, three variantsagent/streaming-indicator.tsx
- Thinking indicatorChat-position typing indicator — three gently pulsing dots with agent identity dot, shown between send and first streamed token; respects prefers-reduced-motionagent/thinking-indicator.tsx
- Thinking processExpanded reasoning trace showing queued/running/complete steps with sources and block reasons; shared StatusGlyph throughout, numeric `durationMs`, and a `dashed` skin variant (the TraceBlock look)agent/thinking-process.tsx
- Tool call cardin Tool callCollapsible tool execution card showing name, status, duration, tokens, input/output JSON, and error output; row variant leads with a StatusGlyph and collapses to a single name · summary line expanding to a bordered detail boxagent/tool-call-card.tsx
- Tool call groupRolls up N tool calls into one "Ran N tools · Ns" line led by the shared StatusGlyph (rolled-up worst status: running > error > success), expanding via Disclosure into `ToolCallCard` row variants; `onToolClick` passthroughagent/tool-call-group.tsx
- Trace blockDashed-border archived reasoning trace — a thin skin over ThinkingProcess (`variant="dashed"`) with the shared status glyph and "Thought for …" duration; body/children contentagent/trace-block.tsx
- Url faviconin Citation cardNeutral no-network favicon tile (host monogram or globe) shared by citation/source/URL surfaces — no third-party fetchagent/url-favicon.tsx
Agent setup
Agent configuration — teams, roles, capabilities, handoffs · 14- Agent capability matrixGrid comparing agents (rows) vs capabilities/tools (columns) with available/limited/missing states and legendagent-setup/agent-capability-matrix.tsx
- Agent card detailFull identity card for a single agent showing name, provider, capabilities, skills, modalities, auth, endpoint, owneragent-setup/agent-card-detail.tsx
- Agent communication laneMessage bus visualization showing request/reply pairs between agents with status and artifactagent-setup/agent-communication-lane.tsx
- Agent health rowAgent capacity row with queue depth, active tasks, a context gauge, and a number-forward error-rate chipagent-setup/agent-health-row.tsx
- Agent linking ruleSingle routing rule (capability/modality/workspace/fallback match) from source to target agentagent-setup/agent-linking-rule.tsx
- Agent registry rowAgent row in registry table showing name, provider, endpoint, auth, status, and last seenagent-setup/agent-registry-row.tsx
- Agent team builderRoster builder for crew/flow/mission with member roles, responsibilities, and available agents poolagent-setup/agent-team-builder.tsx
- Handoff approval gateHuman gate before handoff begins with scope display and approve/deny/edit-scope/reroute actionsagent-setup/handoff-approval-gate.tsx
- Handoff contract cardContract summary showing who asks whom, task, expected artifact, deadline, and proof requirementagent-setup/handoff-contract-card.tsx
- Multi agent run groupParent run with child agent runs showing aggregate state, cost, duration, blockersagent-setup/multi-agent-run-group.tsx
- Permission boundary inspectorPermission matrix for one agent showing read/write/call/deploy/message verbs per scope with grant statusagent-setup/permission-boundary-inspector.tsx
- Role instruction editorRead-only form displaying agent role, goal, system instruction, model, temperature, and toolsetagent-setup/role-instruction-editor.tsx
- Team template cardReusable team template with roles, category tag, description, and "Use template" affordanceagent-setup/team-template-card.tsx
- Tool assignment panelPer-agent tool enablement list with risk badges, scopes, and toggle controls (with inheritance marker)agent-setup/tool-assignment-panel.tsx
Control plane
Fleet orchestration — missions, budgets, permissions, MCP · 21- Agent communication graphSVG workflow canvas showing agent/tool/human nodes and directed edges with message labels and animationscontrol-plane/agent-communication-graph.tsx
- Agent fleet rowin Agent fleetFleet roster row with model, role, mission, uptime, load gauge, tokens, cost, branch, and skillscontrol-plane/agent-fleet-row.tsx
- Agent memory drawerSlide-out panel showing agent memory entries (working/persistent/scratch/skill) with search and pin/deletecontrol-plane/agent-memory-drawer.tsx
- Agent message handoff cardin Agent message handoffMessage between agents showing handoff kind (delegate/escalate/complete/request-help/approval) with criteriacontrol-plane/agent-message-handoff-card.tsx
- Agent process inspectorSystem process details with stack trace, CPU/memory/network gauges, and event logcontrol-plane/agent-process-inspector.tsx
- Agent run checklistHierarchical checklist of run steps with status icons, actor, duration, tokens, and nestingcontrol-plane/agent-run-checklist.tsx
- Cost attribution rowin Cost attributionCost breakdown row by agent/mission/tool/customer/project with share bar and delta trendcontrol-plane/cost-attribution-row.tsx
- Mcp server listin Mcp serversList of MCP servers with status, tool count, transport, reconnect/edit/remove actionscontrol-plane/mcp-server-list.tsx
- Mission board cardKanban card for mission with title, objective, priority, status, branch, tags, assignees, progress, commentscontrol-plane/mission-board-card.tsx
- Mission board columnKanban column header with WIP indicator, count, description, meta stats, and add/more actionscontrol-plane/mission-board-column.tsx
- Orchestrator delegation cardin Orchestrator delegationOrchestrator plan with delegated steps showing receiver, instruction, status, result, tokens, costcontrol-plane/orchestrator-delegation-card.tsx
- Permission legendin Permission scope mapShared legend for the permission matrices — tinted icon swatch + uppercase mono label, fed each matrix's own meta mapcontrol-plane/permission-legend.tsx
- Permission scope mapMatrix of scopes grouped by tier with read/write/call/deploy/message verbs and grant decision mode; groups collapse via Disclosurecontrol-plane/permission-scope-map.tsx
- Policy editorOrdered rule editor for agent approval policies with drag-and-drop reordering, decision cycling, add/delete, and unsaved-changes barcontrol-plane/policy-editor.tsx
- Resource access ledgerAudit log of resource access attempts by agents with kind (database/secret/network/file), decision, policy; sortable time column, default decision filter (controlled-with-fallback), and load-more pagingcontrol-plane/resource-access-ledger.tsx
- Scope escalation requestin Scope escalationPermission escalation request with agent, risk level, scope deltas, TTL, and approve/deny/always-allowcontrol-plane/scope-escalation-request.tsx
- Session branch switcherCommand/popover UI for switching between session branches with fork/merge/status infocontrol-plane/session-branch-switcher.tsx
- Skills management panelin Skills managementWorkspace skill registry with enable/disable toggles, risk tiers, token costs, and configure linkscontrol-plane/skills-management-panel.tsx
- Stuck needs input cardin Stuck needs inputAgent blocker card (needs-input/blocked/permission/tool-failure/ambiguous) with question, context, optionscontrol-plane/stuck-needs-input-card.tsx
- Token budget meterToken/cost budget display with spending breakdown bars, threshold warnings, and forecast hintcontrol-plane/token-budget-meter.tsx
- Verification receiptSigned verification report showing passed/failed/warning/skipped checks with signer and witnessescontrol-plane/verification-receipt.tsx
Monitor
Live monitoring — activity feeds, agent status tiles · 4- Activity feedSingle activity event line showing agent, action verb, target, status dot, and timestampmonitor/activity-feed.tsx
- Agent identity chipMinimal agent name + role display with optional status dot or avatar, can be borderedmonitor/agent-identity-chip.tsx
- Agent monitor cardMonitor grid tile showing agent run activity, progress bar, step counter, elapsed time, and last eventmonitor/agent-monitor-card.tsx
- Status legendKey showing status colors and live counts; `pills` variant is filterablemonitor/status-legend.tsx
Memory
Agent memory — facts, layers, provenance, conflicts · 12- Memory cleanup panelPanel listing memory facts flagged for cleanup (dormant, low-confidence, expired, duplicate) with purge actionsmemory/memory-cleanup-panel.tsx
- Memory conflict resolverDialog resolving conflicting memory facts with side-by-side comparison, merge/keep-both/delete optionsmemory/memory-conflict-resolver.tsx
- Memory diff rollbackCard showing before/after values of an updated memory fact with restore capabilitymemory/memory-diff-rollback.tsx
- Memory fact cardCard displaying a stored memory fact with scope, confidence, source, timestamps, and rollback/delete actionsmemory/memory-fact-card.tsx
- Memory graphGraph visualization of entity and episodic memory nodes with typed relationships and selection details; composes the WorkflowCanvas interactive viewport (pan/zoom/fit-on-mount) so narrow containers pan instead of clippingmemory/memory-graph.tsx
- Memory layer overviewGrid of memory layer stats (conversation/session/user/org/agent-private) with counts and retention infomemory/memory-layer-overview.tsx
- Memory promotion queueList of memory facts awaiting promotion to higher layers with approve/reject buttons; opt-in multi-select (row checkboxes, indeterminate select-all, bulk action bar) via onApproveMany/onRejectManymemory/memory-promotion-queue.tsx
- Memory provenance drawerDrawer showing the trace of events (message/file/tool-call/approval) that created a memory factmemory/memory-provenance-drawer.tsx
- Memory timelineVertical timeline of memory lifecycle events (created/reinforced/corrected/deprecated/deleted)memory/memory-timeline.tsx
- Memory write receiptReceipt confirming a memory write with fact, reason, target layer, and undo capabilitymemory/memory-write-receipt.tsx
- Retrieved context inspectorPanel inspecting memory facts retrieved for an answer with relevance scores and token costsmemory/retrieved-context-inspector.tsx
- Shared memory matrixAccess matrix table showing which agents can read/write each memory layermemory/shared-memory-matrix.tsx
Tasks
Task lifecycle — artifacts, dependencies, proofs, rerouting · 12- Artifact preview rowDense row displaying one artifact (file/screenshot/report/patch/json/chart/link) with lifecycle state and actionstasks/artifact-preview-row.tsx
- Artifact stackVertical stack container for artifact preview rows with empty state and titletasks/artifact-stack.tsx
- Context group headerQuiet section header grouping tasks/messages/artifacts under a session context with optional disclosuretasks/context-group-header.tsx
- Continuation token bannerBanner showing long-running task stream state (polling/reconnecting/interrupted/resumed) with token and reconnect actiontasks/continuation-token-banner.tsx
- Dependency graph miniCompact dependency view listing typed edges (blocked-by/unlocks/parallel/retry/approval) from a focused tasktasks/dependency-graph-mini.tsx
- Linked resource trayCompact tray of task-wired resources (files/tools/memory/urls/branches/tickets/terminals/browser) as glyph chipstasks/linked-resource-tray.tsx
- Replay fork checkpoint controlLangGraph-style time-travel control for a checkpoint: replay, fork, or compare outcomestasks/replay-fork-checkpoint-control.tsx
- Task activity receiptAppend-only log of who changed a task's state and why with actor, change type, reason, and timestamptasks/task-activity-receipt.tsx
- Task envelope cardA2A-style task unit pairing routing header (ids/owner/state) with payload (input message/artifacts/metadata)tasks/task-envelope-card.tsx
- Task lifecycle rowHorizontal stepper showing task lifecycle (created/submitted/working/completed) with fork statestasks/task-lifecycle-row.tsx
- Task proof checklist"Definition of done" checklist of required proofs (tests/screenshot/file-path/reviewed-diff/user-approval)tasks/task-proof-checklist.tsx
- Task reroute controlGrid of four reroute actions (reassign/split/duplicate/block) for tasks not progressing as expectedtasks/task-reroute-control.tsx
Board
Kanban — drag-and-drop board, columns, cards · 8- Assignee stackin Kanban cardOverlapping stack of assignee avatars with tooltip support and overflow badgeboard/assignee-stack.tsx
- Board column framein Task cardFixed-width column frame with header (title/count/dot), body slot, and footer add-card buttonboard/board-column-frame.tsx
- Board prioritysupports Kanban CardPriority constants/helpers shared by board componentsboard/board-priority.ts
- Delete column dialogin Kanban columnModal confirming column deletion with options to relocate cards to another columnboard/delete-column-dialog.tsx
- Kanban boardRoot drag-and-drop board orchestrating columns, card moves, and overlay preview via dnd-kitboard/kanban-board.tsx
- Kanban cardSortable kanban card showing title, id, priority, tags, branch, comments, attachments, and assigneesboard/kanban-card.tsx
- Kanban columnDraggable kanban column with inline-editable title, droppable zone, card actions, and kebab menuboard/kanban-column.tsx
- Task cardLightweight kanban card for the user's per-project board — title, optional agent/run chip + cost once handed off, hover-revealed start/delete actions; native HTML5 drag props pass through (no dnd-kit)board/task-card.tsx
Workflow
Workflow graphs — canvas, nodes, edges, config panel · 5- Automation trigger rowOne automation trigger: kind select (schedule / run finished / run failed) plus a friendly cron schedule builder (minutes/hourly/daily/weekly/monthly, custom-cron escape hatch, plain-language preview); the expression is the single source of truthworkflow/automation-trigger-row.tsx
- Workflow canvasGrid-patterned canvas container with overlay slots for legend, controls, minimap, and status; opt-in `interactive` viewport adds wheel/pinch zoom, drag-pan, keyboard, and a built-in zoom/reset/fit control cluster; `initialFit` fits content on mount, and `WorkflowCanvasNavContext` (+ `WorkflowCanvasNav` type) lets nodes register for roving keyboard navigationworkflow/workflow-canvas.tsx
- Workflow config panelRight sheet panel for configuring a workflow node with tabs, status, and type badgeworkflow/workflow-config-panel.tsx
- Workflow edgeCurved SVG edge connecting workflow nodes with optional label, arrow, animation, and tone (idle/active/warning/error/success)workflow/workflow-edge.tsx
- Workflow nodeCard-style workflow node with icon, status, inputs/outputs ports, and selection state; keyboard-navigable (Tab reaches nodes, arrows rove between them, Enter/Space selects) with label+status announcedworkflow/workflow-node.tsx
Workspace
Session workspace — sidebars, runtime panels, chat header · 14- Agent session rowSingle session row (title, workspace, time, running state, unread badge); `AgentSessionRunRow` is the quieter child run row (ordinal label, time, status dot) shown when a session expandsworkspace/agent-session-row.tsx
- Agent sessions sidebarLeft rail with search, session list, and callback-gated new-session/filter/settings/help controls; optional project-grouped sessions with branch sub-rows and a 12px guide line; sessions with 2+ runs expand inline via a disclosure chevron into child run rows (controlled or internal expand state, onSelectRun); collapses to icon railworkspace/agent-sessions-sidebar.tsx
- Compose with footerCompose box with footer row showing project, branch, running state, and background process countworkspace/compose-with-footer.tsx
- New session buttonButton with plus glyph for creating a new session; thin wrapper over Buttonworkspace/new-session-button.tsx
- Recent session rowLauncher row with an accessible lifecycle label, glyph/drag-handle, title/workspace, time, and status iconworkspace/recent-session-row.tsx
- Runtime files context listTab content listing files accessed, context sources, memory retrieved, and artifactsworkspace/runtime-files-context-list.tsx
- Runtime panel tabsRight runtime panel with Processes/Files & context/Terminal tabs by default; accepts a configurable `tabs` set (text or icon triggers); collapses to icon-only railworkspace/runtime-panel-tabs.tsx
- Runtime process listTab content showing file changes, active processes, completed tool runs, and review stateworkspace/runtime-process-list.tsx
- Runtime sectionin Runtime process listQuiet labelled grouping (uppercase caption with count) used inside runtime panel tabsworkspace/runtime-section.tsx
- Runtime terminal panelTab content with terminal output, command history, and callback-gated stop/retry controlsworkspace/runtime-terminal-panel.tsx
- Session overviewLarge launcher shell with named search, callback-gated new-session actions, and recent sessions listworkspace/session-overview.tsx
- Session searchNamed large search field for Session Overview with ⌘K shortcut hint; thin wrapper over SearchInputworkspace/session-search.tsx
- Session status glyphSmall session lifecycle dot (recent/running/failed/archived) that is replaced by a pin glyph when pinnedworkspace/session-status-glyph.tsx
- Workspace chat headerCenter-pane header with workspace glyph, title, runtime toggle, and session dropdown menu (share/duplicate/archive/delete items render only when their handlers are wired)workspace/workspace-chat-header.tsx
Sandbox
Code & execution — diff view, file tree, terminal, test results · 10- Browser previewResponsive preview frame with device/viewport toggle and browser chromesandbox/browser-preview.tsx
- Code editor paneRead-only code display with line annotations, status, and tab stripssandbox/code-editor-pane.tsx
- Code relevance annotationExpandable code relevance marker showing why code was highlighted (edit, test, search, etc.)sandbox/code-relevance-annotation.tsx
- Diff viewFile diff display with collapsible hunks, line-level added/removed/unchanged stylingsandbox/diff-view.tsx
- File treeHierarchical file/folder explorer tree with badges (modified, added, removed, conflict)sandbox/file-tree.tsx
- Generated file cardCard showing generated file status, size, delta, and actions (open, diff)sandbox/generated-file-card.tsx
- Run summary cardSummary card for test/build run with outcome, duration, spend, and test countssandbox/run-summary-card.tsx
- Tab stripTabbed editor interface with dirty indicators, badges, and add/close affordancessandbox/tab-strip.tsx
- TerminalTerminal emulator display with stdout/stderr/system lines, prompt, and copy buttonsandbox/terminal.tsx
- Test result cardExpandable test suite results with individual test statuses and failure detailssandbox/test-result-card.tsx
Action modals
Project/knowledge modals — uploads, attachments, tabs · 8- Action modalin Action modalsModal dialog wrapper with title and footer slots; body scrolls independentlyaction-modals/action-modal.tsx
- Cloud empty state modalin Action modalsEmpty state dialog for unconnected cloud integration with action buttonaction-modals/cloud-empty-state-modal.tsx
- Document glyphin Action modalsInline icon indicator for document types (stack, people, lock, doc)action-modals/document-glyph.tsx
- File iconin Action modalsFile type badge with extension label (PDF, XLS, CSV, DOC)action-modals/file-icon.tsx
- Knowledge attach modalin Action modalsMulti-tab modal for attaching knowledge documents with search and filtering; rows/subtabs/breadcrumb overridable via props (defaults to the legal-playbook demo set)action-modals/knowledge-attach-modal.tsx
- Tabs barin Action modalsTabbed navigation bar with keyboard control and optional search/closeaction-modals/tabs-bar.tsx
- Update project modalin Action modalsForm modal for editing project name, instructions, and knowledge assetsaction-modals/update-project-modal.tsx
- Upload documents modalin Action modalsDrag-drop file uploader modal with file list and progressaction-modals/upload-documents-modal.tsx