Skip to content
Clicky UI

RuntimeBar

Mode-first runtime controls with settings that adapt to the container width.

Source

Import

Section titled “Import”
import { RuntimeBar } from "@flanksource/clicky-ui/data";

Demos

Section titled “Demos”
Default · Open in Storybook
With Model And Effort · Open in Storybook
Maximum Width · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Section titled “Props”
Prop Type Default Description
actions Pick<RuntimeBarActionsProps, "menu" | "fields" | "menuLabel"> — Host-level settings belonging to the surrounding spec rather than this runtime row.
ariaLabel string Runtime —
className string — —
effectiveMode string — Resolved mode shown when the editable value inherits it from another layer.
effectiveModel string — Resolved model used to identify the inherited provider family without persisting it.
families SpecRuntimeFamily[] [ { id: "claude", label: "Claude", provider: "anthropic", modes: [ { id: "api", label: "API", icon: UiCloud, title: "Anthropic API", provider: "anthropic", }, { id: "agent", label: "Agent", icon: UiRobotAi, title: "Claude Agent SDK", provider: "anthropic", }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Claude Code CLI", provider: "anthropic", }, { id: "cmux", label: "cmux", icon: UiColumns, title: "Claude multiplexer", provider: "anthropic", }, ], }, { id: "codex", label: "Codex", provider: "openai", modes: [ { id: "api", label: "API", icon: UiCloud, title: "OpenAI API", provider: "openai", }, { id: "agent", label: "Agent", icon: UiRobotAi, title: "Codex agent", provider: "openai", }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Codex CLI", provider: "openai", }, { id: "cmux", label: "cmux", icon: UiColumns, title: "Codex multiplexer", provider: "openai", }, ], }, { id: "gemini", label: "Gemini", provider: "google", catalogPrefix: "googleai", modes: [ { id: "api", label: "API", icon: UiCloud, title: "Gemini API" }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Gemini CLI" }, ], }, { id: "deepseek", label: "DeepSeek", provider: "deepseek", modes: [{ id: "api", label: "API", icon: UiCloud, title: "DeepSeek API" }], }, ] —
locked boolean false Locks model identity (family, mode, and model) while leaving effort editable.
models ChatModel[] [] Model catalog grouped by family and filtered by the selected mode.
onChange* (…) => void — —
reasoningEfforts string[] [ "low", "medium", "high", "xhigh", "max", "ultra", ] Effort tiers offered when the catalog does not describe the model.
showCost boolean false Opt-in control for `budget.cost`.
showEffort boolean true Whether the selected runtime exposes reasoning effort.
showModel boolean true Whether the selected runtime exposes a model argument.
showTimeout boolean false Opt-in control for `budget.timeout`.
value* RuntimeBarValue — —