> ## Documentation Index > Fetch the complete documentation index at: https://docs.tai42.ai/llms.txt > Use this file to discover all available pages before exploring further. # Components > The design-system components — inputs, layout, tables, pickers, and disclosure primitives. The design-system components — inputs, layout, tables, pickers, and disclosure primitives. ## Badge ```ts theme={null} function Badge(props: BadgeProps): Element ``` **Props** | Prop | Type | Description | | ---------- | ----------- | ----------- | | `children` | `ReactNode` | — | | `variant?` | `string` | — | **Related:** [BadgeProps](/reference/studio-sdk/components#badgeprops) ## BadgeProps ```ts theme={null} interface BadgeProps ``` **Properties** | Property | Type | Description | | ---------- | ----------- | ----------- | | `children` | `ReactNode` | — | | `variant?` | `string` | — | ## Button ```ts theme={null} function Button(props: ButtonProps): Element ``` **Props** | Prop | Type | Description | | ---------- | -------------------------------------- | ----------- | | `variant?` | `"primary" \| "secondary" \| "danger"` | — | **Related:** [ButtonProps](/reference/studio-sdk/components#buttonprops) ## ButtonProps ```ts theme={null} interface ButtonProps extends ButtonHTMLAttributes ``` **Properties** | Property | Type | Description | | ---------- | -------------------------------------- | ----------- | | `variant?` | `"primary" \| "secondary" \| "danger"` | — | ## Card ```ts theme={null} function Card(props: { children: ReactNode; style?: CSSProperties }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------------------------------------ | ------- | ----------- | | `props` | `{ children: ReactNode; style?: CSSProperties }` | — | — | ## Checkbox ```ts theme={null} function Checkbox(props: CheckboxProps): Element ``` **Props** | Prop | Type | Description | | ------------------ | ---------------------------- | --------------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for a checkbox with no visible `label` (e.g. a table cell). | | `checked?` | `boolean` | — | | `defaultChecked?` | `boolean` | — | | `disabled?` | `boolean` | — | | `label?` | `string` | — | | `name?` | `string` | — | | `onCheckedChange?` | `(checked: boolean) => void` | — | | `value?` | `string` | — | **Related:** [CheckboxProps](/reference/studio-sdk/components#checkboxprops) ## CheckboxProps ```ts theme={null} interface CheckboxProps ``` **Properties** | Property | Type | Description | | ------------------ | ---------------------------- | --------------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for a checkbox with no visible `label` (e.g. a table cell). | | `checked?` | `boolean` | — | | `defaultChecked?` | `boolean` | — | | `disabled?` | `boolean` | — | | `label?` | `string` | — | | `name?` | `string` | — | | `onCheckedChange?` | `(checked: boolean) => void` | — | | `value?` | `string` | — | ## CodeBlock ```ts theme={null} function CodeBlock(props: CodeBlockProps): Element ``` **Props** | Prop | Type | Description | | ----------- | -------- | ------------------------------------------------------------------ | | `code` | `string` | — | | `language?` | `string` | Optional language label, shown as a caption; purely informational. | **Related:** [CodeBlockProps](/reference/studio-sdk/components#codeblockprops) ## CodeBlockProps ```ts theme={null} interface CodeBlockProps ``` **Properties** | Property | Type | Description | | ----------- | -------- | ------------------------------------------------------------------ | | `code` | `string` | — | | `language?` | `string` | Optional language label, shown as a caption; purely informational. | ## CompletionInput ```ts theme={null} function CompletionInput(props: CompletionInputProps): ReactNode ``` A completion-backed text input. Suggestions refresh on every edit (a per-request sequence guard drops a stale response) and render as an ARIA listbox; selecting an option fills the field and clears the list. **Props** | Prop | Type | Description | | ------------------ | ----------------------------------------------- | ------------------------------------------------------- | | `fetchCompletions` | `(value: string) => Promise` | Fetch argument completions for the current input value. | | `onChange` | `(value: string) => void` | — | | `onError?` | `(error: unknown) => void` | Surfaced (not swallowed) when a completion fetch fails. | | `placeholder?` | `string` | — | | `value` | `string` | — | **Related:** [CompletionInputProps](/reference/studio-sdk/components#completioninputprops) ## CompletionInputProps ```ts theme={null} interface CompletionInputProps ``` **Properties** | Property | Type | Description | | ------------------ | ----------------------------------------------- | ------------------------------------------------------- | | `fetchCompletions` | `(value: string) => Promise` | Fetch argument completions for the current input value. | | `onChange` | `(value: string) => void` | — | | `onError?` | `(error: unknown) => void` | Surfaced (not swallowed) when a completion fetch fails. | | `placeholder?` | `string` | — | | `value` | `string` | — | ## ConfirmDialog ```ts theme={null} function ConfirmDialog(props: ConfirmDialogProps): ReactNode ``` **Props** | Prop | Type | Description | | ----------------- | ----------------------- | ---------------------------------------------------------------------------- | | `children` | `ReactNode` | The prompt body — what the operator is confirming. | | `confirmLabel` | `string` | The confirm button's resting label (e.g. `Delete scope`). | | `confirmVariant?` | `"primary" \| "danger"` | — | | `error?` | `Error \| null` | The failed action's error, rendered loudly; omit/`null` while there is none. | | `isPending` | `boolean` | — | | `onClose` | `() => void` | — | | `onConfirm` | `() => void` | — | | `pendingLabel` | `string` | The Spinner's accessible label while the action runs (e.g. `Deleting`). | | `title` | `string` | — | **Related:** [ConfirmDialogProps](/reference/studio-sdk/components#confirmdialogprops) ## ConfirmDialogProps ```ts theme={null} interface ConfirmDialogProps ``` **Properties** | Property | Type | Description | | ----------------- | ----------------------- | ---------------------------------------------------------------------------- | | `children` | `ReactNode` | The prompt body — what the operator is confirming. | | `confirmLabel` | `string` | The confirm button's resting label (e.g. `Delete scope`). | | `confirmVariant?` | `"primary" \| "danger"` | — | | `error?` | `Error \| null` | The failed action's error, rendered loudly; omit/`null` while there is none. | | `isPending` | `boolean` | — | | `onClose` | `() => void` | — | | `onConfirm` | `() => void` | — | | `pendingLabel` | `string` | The Spinner's accessible label while the action runs (e.g. `Deleting`). | | `title` | `string` | — | ## CopyField ```ts theme={null} function CopyField(props: CopyFieldProps): Element ``` **Props** | Prop | Type | Description | | ----------- | -------- | ----------- | | `caption?` | `string` | — | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `value` | `string` | — | **Related:** [CopyFieldProps](/reference/studio-sdk/components#copyfieldprops) ## CopyFieldProps ```ts theme={null} interface CopyFieldProps ``` **Properties** | Property | Type | Description | | ----------- | -------- | ----------- | | `caption?` | `string` | — | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `value` | `string` | — | ## Dialog ```ts theme={null} function Dialog(props: DialogProps): Element ``` **Props** | Prop | Type | Description | | --------------- | ------------------------- | ------------------------------------------------------------------------------ | | `children?` | `ReactNode` | — | | `defaultOpen?` | `boolean` | — | | `description?` | `string` | — | | `onOpenChange?` | `(open: boolean) => void` | — | | `open?` | `boolean` | — | | `title` | `string` | — | | `trigger?` | `ReactNode` | A trigger element; when omitted, control the dialog via `open`/`onOpenChange`. | **Related:** [DialogProps](/reference/studio-sdk/components#dialogprops) ## DialogProps ```ts theme={null} interface DialogProps ``` **Properties** | Property | Type | Description | | --------------- | ------------------------- | ------------------------------------------------------------------------------ | | `children?` | `ReactNode` | — | | `defaultOpen?` | `boolean` | — | | `description?` | `string` | — | | `onOpenChange?` | `(open: boolean) => void` | — | | `open?` | `boolean` | — | | `title` | `string` | — | | `trigger?` | `ReactNode` | A trigger element; when omitted, control the dialog via `open`/`onOpenChange`. | ## EmptyState ```ts theme={null} function EmptyState(props: { description?: string; title: string }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ----------------------------------------- | ------- | ----------- | | `props` | `{ description?: string; title: string }` | — | — | ## ErrorBoundary ```ts theme={null} ErrorBoundary ``` ## ErrorBoundaryProps ```ts theme={null} interface ErrorBoundaryProps ``` **Properties** | Property | Type | Description | | ---------- | ------------------------------------------- | ---------------------------------------------------------------------- | | `children` | `ReactNode` | — | | `label?` | `string` | Prefixed to the caught error message, naming the contained region. | | `onError?` | `(error: unknown, info: ErrorInfo) => void` | Called with the caught error and React's component stack, for logging. | ## ErrorState ```ts theme={null} function ErrorState(props: { message: string; onRetry?: () => void }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------------------------------- | ------- | ----------- | | `props` | `{ message: string; onRetry?: () => void }` | — | — | ## ExtensionComboBuilder ```ts theme={null} function ExtensionComboBuilder(props: ExtensionComboBuilderProps): ReactNode ``` **Props** | Prop | Type | Description | | ------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `available` | `readonly ({ kind: string; name: string })[]` | The extension catalog the combos are drawn from (caller-fetched). | | `availableReady?` | `boolean` | Whether the `available` catalog has finished loading. Default `true` (existing consumers keep today's behavior). While `false` the builder reports VALID and suppresses the unknown-name notes, so a stale-seeded combo does not flash invalid before the catalog resolves. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `onChange` | `(next: (string \| { config: Record; name: string })[][]) => void` | Fired with the next list of combos on every add/update/remove. | | `onValidityChange?` | `(valid: boolean) => void` | Fired (effect-driven) on mount and whenever `value`, `available`, or `availableReady` changes with whether every combo's names are known. A caller blocks submit while this is `false`. The `onChange` payload shape is unchanged; this is a SECOND callback so the prop surface stays backward-compatible. | | `value` | `readonly (string \| { config: Record; name: string })[][]` | The current list of combos, each an ordered list of extension elements. | **Related:** [ExtensionComboBuilderProps](/reference/studio-sdk/components#extensioncombobuilderprops) ## ExtensionComboBuilderProps ```ts theme={null} interface ExtensionComboBuilderProps ``` **Properties** | Property | Type | Description | | ------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `available` | `readonly ({ kind: string; name: string })[]` | The extension catalog the combos are drawn from (caller-fetched). | | `availableReady?` | `boolean` | Whether the `available` catalog has finished loading. Default `true` (existing consumers keep today's behavior). While `false` the builder reports VALID and suppresses the unknown-name notes, so a stale-seeded combo does not flash invalid before the catalog resolves. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `onChange` | `(next: (string \| { config: Record; name: string })[][]) => void` | Fired with the next list of combos on every add/update/remove. | | `onValidityChange?` | `(valid: boolean) => void` | Fired (effect-driven) on mount and whenever `value`, `available`, or `availableReady` changes with whether every combo's names are known. A caller blocks submit while this is `false`. The `onChange` payload shape is unchanged; this is a SECOND callback so the prop surface stays backward-compatible. | | `value` | `readonly (string \| { config: Record; name: string })[][]` | The current list of combos, each an ordered list of extension elements. | ## ExtensionFamily ```ts theme={null} interface ExtensionFamily ``` One base tool and every extension entry that branches from it. **Properties** | Property | Type | Description | | --------- | --------------------------------------------- | ------------------------------------------------------------- | | `base` | `string` | The base tool name (the segment before the first underscore). | | `members` | `readonly ({ kind: string; name: string })[]` | The family's entries, ordered by full name. | ## ExtensionKindGroup ```ts theme={null} interface ExtensionKindGroup ``` One extension `kind` and every catalog entry of that kind. **Properties** | Property | Type | Description | | -------------- | --------------------------------------------- | ------------------------------------------------------------------ | | `kind` | `string` | The serialized kind value (`wrapper` / `transformer` / `backend`). | | `members` | `readonly ({ kind: string; name: string })[]` | The kind's entries, ordered by name. | | `nonStackable` | `boolean` | Whether this kind is non-stackable (single-select in the picker). | ## ExtensionPicker ```ts theme={null} function ExtensionPicker(props: ExtensionPickerProps): Element ``` **Props** | Prop | Type | Description | | ----------- | --------------------------------------------- | -------------------------------------------------------------------------- | | `available` | `readonly ({ kind: string; name: string })[]` | The extension catalog (`GET /api/extensions`) the checklist is drawn from. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `onChange` | `(names: string[]) => void` | Fired with the next ordered selection whenever a box toggles. | | `value` | `readonly string[]` | The currently-selected extension names, in combo (stacking) order. | **Related:** [ExtensionPickerProps](/reference/studio-sdk/components#extensionpickerprops) ## ExtensionPickerProps ```ts theme={null} interface ExtensionPickerProps ``` **Properties** | Property | Type | Description | | ----------- | --------------------------------------------- | -------------------------------------------------------------------------- | | `available` | `readonly ({ kind: string; name: string })[]` | The extension catalog (`GET /api/extensions`) the checklist is drawn from. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `onChange` | `(names: string[]) => void` | Fired with the next ordered selection whenever a box toggles. | | `value` | `readonly string[]` | The currently-selected extension names, in combo (stacking) order. | ## ExternalLinkButton ```ts theme={null} function ExternalLinkButton(props: ExternalLinkButtonProps): Element ``` **Props** | Prop | Type | Description | | ----------- | ----------- | ----------- | | `children?` | `ReactNode` | — | | `url` | `string` | — | **Related:** [ExternalLinkButtonProps](/reference/studio-sdk/components#externallinkbuttonprops) ## ExternalLinkButtonProps ```ts theme={null} interface ExternalLinkButtonProps ``` **Properties** | Property | Type | Description | | ----------- | ----------- | ----------- | | `children?` | `ReactNode` | — | | `url` | `string` | — | ## Field ```ts theme={null} function Field(props: FieldProps): Element ``` **Props** | Prop | Type | Description | | -------------- | --------------- | ----------- | | `children` | `ReactNode` | — | | `description?` | `string` | — | | `error?` | `string` | — | | `label` | `string` | — | | `style?` | `CSSProperties` | — | **Related:** [FieldProps](/reference/studio-sdk/components#fieldprops) ## FieldControlProps ```ts theme={null} interface FieldControlProps ``` The a11y wiring a form control spreads onto its element. **Properties** | Property | Type | Description | | ------------------ | --------------------- | ----------- | | `aria-describedby` | `string \| undefined` | — | | `aria-invalid` | `true \| undefined` | — | | `id` | `string \| undefined` | — | ## FieldProps ```ts theme={null} interface FieldProps ``` **Properties** | Property | Type | Description | | -------------- | --------------- | ----------- | | `children` | `ReactNode` | — | | `description?` | `string` | — | | `error?` | `string` | — | | `label` | `string` | — | | `style?` | `CSSProperties` | — | ## FleetReport ```ts theme={null} function FleetReport( props: { action?: "save" | "reload"; summary: FleetReportSummary | null }, ): ReactNode ``` Render a fleet broadcast's failure state. Returns `null` for a converged/absent report (nothing to warn about) so callers can always mount it unconditionally beside their own success line. **Parameters** | Parameter | Type | Default | Description | | --------- | ---------------------------------------------------------------------- | ------- | ----------- | | `props` | `{ action?: "save" \| "reload"; summary: FleetReportSummary \| null }` | — | — | ## JsonDiff ```ts theme={null} function JsonDiff(props: JsonDiffProps): ReactNode ``` **Props** | Prop | Type | Description | | -------- | --------- | ----------- | | `after` | `unknown` | — | | `before` | `unknown` | — | **Related:** [JsonDiffProps](/reference/studio-sdk/components#jsondiffprops) ## JsonDiffProps ```ts theme={null} interface JsonDiffProps ``` **Properties** | Property | Type | Description | | -------- | --------- | ----------- | | `after` | `unknown` | — | | `before` | `unknown` | — | ## JsonDiffRow ```ts theme={null} interface JsonDiffRow ``` One leaf difference between the two JSON values. **Properties** | Property | Type | Description | | --------- | ----------------------------------- | ----------------------------------------------------------------------------- | | `after?` | `unknown` | The value on the RIGHT side — set for `added` and `changed` rows. | | `before?` | `unknown` | The value on the LEFT side — set for `removed` and `changed` rows. | | `kind` | `"added" \| "removed" \| "changed"` | — | | `path` | `string` | The dotted path to the differing key, e.g. `fixed_kwargs.city` (`''` = root). | ## JsonTree ```ts theme={null} function JsonTree(props: JsonTreeProps): Element ``` **Props** | Prop | Type | Description | | ------------------ | --------- | ----------- | | `data` | `unknown` | — | | `defaultExpanded?` | `boolean` | — | **Related:** [JsonTreeProps](/reference/studio-sdk/components#jsontreeprops) ## JsonTreeProps ```ts theme={null} interface JsonTreeProps ``` **Properties** | Property | Type | Description | | ------------------ | --------- | ----------- | | `data` | `unknown` | — | | `defaultExpanded?` | `boolean` | — | ## NON\_STACKABLE\_KIND ```ts theme={null} const NON_STACKABLE_KIND: "backend" ``` The single non-stackable extension kind: at most one `backend` extension may appear in a combo (the `backend` kind is declared non-stackable, `multiple=False`). The `ExtensionPicker` enforces single-select for this kind. ## NumberInput ```ts theme={null} function NumberInput(props: NumberInputProps): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------ | ------- | ----------- | | `props` | `NumberInputProps` | — | — | **Related:** [NumberInputProps](/reference/studio-sdk/components#numberinputprops) ## NumberInputProps ```ts theme={null} type NumberInputProps = Omit, "type"> ``` ## ProgressBar ```ts theme={null} function ProgressBar(props: ProgressBarProps): ReactNode ``` Render a progress bar. With a positive `total`, `value/total` fills the track and the percentage is announced via `aria-valuenow`; without one, the bar is indeterminate (no `aria-valuenow`, per ARIA). **Props** | Prop | Type | Description | | ---------- | -------- | ------------------------------------------------------------------ | | `message?` | `string` | Optional human-readable status shown alongside the bar. | | `total?` | `number` | Upper bound. When absent or non-positive the bar is INDETERMINATE. | | `value?` | `number` | Current progress. Clamped to `[0, total]` when `total` is known. | **Related:** [ProgressBarProps](/reference/studio-sdk/components#progressbarprops) ## ProgressBarProps ```ts theme={null} interface ProgressBarProps ``` **Properties** | Property | Type | Description | | ---------- | -------- | ------------------------------------------------------------------ | | `message?` | `string` | Optional human-readable status shown alongside the bar. | | `total?` | `number` | Upper bound. When absent or non-positive the bar is INDETERMINATE. | | `value?` | `number` | Current progress. Clamped to `[0, total]` when `total` is known. | ## RadioGroup ```ts theme={null} function RadioGroup(props: RadioGroupProps): Element ``` **Props** | Prop | Type | Description | | ---------------- | ------------------------- | ----------- | | `defaultValue?` | `string` | — | | `disabled?` | `boolean` | — | | `name?` | `string` | — | | `onValueChange?` | `(value: string) => void` | — | | `options` | `readonly RadioOption[]` | — | | `value?` | `string` | — | **Related:** [RadioGroupProps](/reference/studio-sdk/components#radiogroupprops) ## RadioGroupProps ```ts theme={null} interface RadioGroupProps ``` **Properties** | Property | Type | Description | | ---------------- | ------------------------- | ----------- | | `defaultValue?` | `string` | — | | `disabled?` | `boolean` | — | | `name?` | `string` | — | | `onValueChange?` | `(value: string) => void` | — | | `options` | `readonly RadioOption[]` | — | | `value?` | `string` | — | **Related:** [RadioOption](/reference/studio-sdk/components#radiooption) ## RadioOption ```ts theme={null} interface RadioOption ``` **Properties** | Property | Type | Description | | ----------- | --------- | ----------- | | `disabled?` | `boolean` | — | | `label` | `string` | — | | `value` | `string` | — | ## RevealInput ```ts theme={null} function RevealInput(props: RevealInputProps): Element ``` **Props** | Prop | Type | Description | | -------------- | ------------------------- | ----------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for the inner input when no visual `label` is rendered. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `onChange?` | `(value: string) => void` | — | | `placeholder?` | `string` | — | | `readOnly?` | `boolean` | — | | `value` | `string` | — | **Related:** [RevealInputProps](/reference/studio-sdk/components#revealinputprops) ## RevealInputProps ```ts theme={null} interface RevealInputProps ``` **Properties** | Property | Type | Description | | -------------- | ------------------------- | ----------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for the inner input when no visual `label` is rendered. | | `disabled?` | `boolean` | — | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `onChange?` | `(value: string) => void` | — | | `placeholder?` | `string` | — | | `readOnly?` | `boolean` | — | | `value` | `string` | — | ## Select ```ts theme={null} function Select(props: SelectProps): Element ``` **Props** | Prop | Type | Description | | ---------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for the trigger when it is not wired to an enclosing `Field`. | | `defaultValue?` | `string` | — | | `disabled?` | `boolean` | — | | `groups?` | `readonly SelectGroup[]` | Optional labelled groups. When provided the listbox renders these grouped clusters INSTEAD of the flat `options` (pass `options={[]}` alongside). Every existing caller passes `options` only, so the flat path is unchanged. | | `name?` | `string` | — | | `onValueChange?` | `(value: string) => void` | — | | `options` | `readonly SelectOption[]` | — | | `placeholder?` | `string` | — | | `value?` | `string` | — | **Related:** [SelectProps](/reference/studio-sdk/components#selectprops) ## SelectGroup ```ts theme={null} interface SelectGroup ``` A labelled cluster of options (e.g. tools grouped by tag). **Properties** | Property | Type | Description | | --------- | ------------------------- | ----------- | | `label` | `string` | — | | `options` | `readonly SelectOption[]` | — | **Related:** [SelectOption](/reference/studio-sdk/components#selectoption) ## SelectOption ```ts theme={null} interface SelectOption ``` **Properties** | Property | Type | Description | | ----------- | --------- | ----------- | | `disabled?` | `boolean` | — | | `label` | `string` | — | | `value` | `string` | — | ## SelectProps ```ts theme={null} interface SelectProps ``` **Properties** | Property | Type | Description | | ---------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-label?` | `string` | Accessible name for the trigger when it is not wired to an enclosing `Field`. | | `defaultValue?` | `string` | — | | `disabled?` | `boolean` | — | | `groups?` | `readonly SelectGroup[]` | Optional labelled groups. When provided the listbox renders these grouped clusters INSTEAD of the flat `options` (pass `options={[]}` alongside). Every existing caller passes `options` only, so the flat path is unchanged. | | `name?` | `string` | — | | `onValueChange?` | `(value: string) => void` | — | | `options` | `readonly SelectOption[]` | — | | `placeholder?` | `string` | — | | `value?` | `string` | — | **Related:** [SelectGroup](/reference/studio-sdk/components#selectgroup), [SelectOption](/reference/studio-sdk/components#selectoption) ## Skeleton ```ts theme={null} function Skeleton(props: { height?: string | number; width?: string | number }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | --------------------------------------------------------- | ------- | ----------- | | `props` | `{ height?: string \| number; width?: string \| number }` | — | — | ## Spinner ```ts theme={null} function Spinner(props: { label?: string }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | -------------------- | ------- | ----------- | | `props` | `{ label?: string }` | — | — | ## TBody ```ts theme={null} function TBody( props: HTMLAttributes & { children?: ReactNode }, ): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | -------------------------------------------------------------------- | ------- | ----------- | | `props` | `HTMLAttributes & { children?: ReactNode }` | — | — | ## TD ```ts theme={null} function TD( props: TdHTMLAttributes & { children?: ReactNode }, ): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------------------------------------------------------- | ------- | ----------- | | `props` | `TdHTMLAttributes & { children?: ReactNode }` | — | — | ## TH ```ts theme={null} function TH( props: ThHTMLAttributes & { children?: ReactNode }, ): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------------------------------------------------------- | ------- | ----------- | | `props` | `ThHTMLAttributes & { children?: ReactNode }` | — | — | ## THead ```ts theme={null} function THead( props: HTMLAttributes & { children?: ReactNode }, ): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | -------------------------------------------------------------------- | ------- | ----------- | | `props` | `HTMLAttributes & { children?: ReactNode }` | — | — | ## TOKEN\_NAMES ```ts theme={null} const TOKEN_NAMES: readonly ["--tai-color-bg", "--tai-color-surface", "--tai-color-surface-raised", "--tai-color-border", "--tai-color-text", "--tai-color-text-muted", "--tai-color-primary", "--tai-color-primary-text", "--tai-color-danger", "--tai-color-danger-text", "--tai-color-success", "--tai-color-warning", "--tai-color-focus-ring", "--tai-space-1", "--tai-space-2", "--tai-space-3", "--tai-space-4", "--tai-space-6", "--tai-space-8", "--tai-radius-sm", "--tai-radius-md", "--tai-radius-lg", "--tai-font-sans", "--tai-font-mono", "--tai-text-sm", "--tai-text-md", "--tai-text-lg", "--tai-shadow-sm", "--tai-shadow-md"] ``` The documented CSS-variable token names — the Studio-plugin styling API. A snapshot test pins this list so the contract can't drift silently. The SDK compatibility version bumps if any of these are renamed/removed. ## TR ```ts theme={null} function TR(props: HTMLAttributes & { children?: ReactNode }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ---------------------------------------------------------------- | ------- | ----------- | | `props` | `HTMLAttributes & { children?: ReactNode }` | — | — | ## TabItem ```ts theme={null} interface TabItem ``` **Properties** | Property | Type | Description | | ----------- | ----------- | ----------- | | `content` | `ReactNode` | — | | `disabled?` | `boolean` | — | | `label` | `string` | — | | `value` | `string` | — | ## Table ```ts theme={null} function Table(props: HTMLAttributes & { children?: ReactNode }): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ------------------------------------------------------------- | ------- | ----------- | | `props` | `HTMLAttributes & { children?: ReactNode }` | — | — | ## Tabs ```ts theme={null} function Tabs(props: TabsProps): Element ``` **Props** | Prop | Type | Description | | ---------------- | ------------------------- | ----------- | | `defaultValue?` | `string` | — | | `items` | `readonly TabItem[]` | — | | `onValueChange?` | `(value: string) => void` | — | | `value?` | `string` | — | **Related:** [TabsProps](/reference/studio-sdk/components#tabsprops) ## TabsProps ```ts theme={null} interface TabsProps ``` **Properties** | Property | Type | Description | | ---------------- | ------------------------- | ----------- | | `defaultValue?` | `string` | — | | `items` | `readonly TabItem[]` | — | | `onValueChange?` | `(value: string) => void` | — | | `value?` | `string` | — | **Related:** [TabItem](/reference/studio-sdk/components#tabitem) ## TagChips ```ts theme={null} function TagChips(props: { tags: readonly string[] }): ReactNode ``` Read-only chips for a list of tags. Renders nothing when there are none. **Parameters** | Parameter | Type | Default | Description | | --------- | ----------------------------- | ------- | ----------- | | `props` | `{ tags: readonly string[] }` | — | — | ## TagsInput ```ts theme={null} function TagsInput( props: { disabled?: boolean; onChange: (next: string[]) => void; value: readonly string[] }, ): ReactNode ``` Controlled tag editor. The caller owns the `value` list; `onChange` receives the next list on every add/remove. A blank or duplicate entry is ignored (never a silent duplicate chip). Enter or comma commits the draft chip. **Parameters** | Parameter | Type | Default | Description | | --------- | -------------------------------------------------------------------------------------- | ------- | ----------- | | `props` | `{ disabled?: boolean; onChange: (next: string[]) => void; value: readonly string[] }` | — | — | ## TextInput ```ts theme={null} function TextInput(props: TextInputProps): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | ---------------- | ------- | ----------- | | `props` | `TextInputProps` | — | — | **Related:** [TextInputProps](/reference/studio-sdk/components#textinputprops) ## TextInputProps ```ts theme={null} type TextInputProps = InputHTMLAttributes ``` ## Textarea ```ts theme={null} function Textarea(props: TextareaProps): Element ``` **Parameters** | Parameter | Type | Default | Description | | --------- | --------------- | ------- | ----------- | | `props` | `TextareaProps` | — | — | **Related:** [TextareaProps](/reference/studio-sdk/components#textareaprops) ## TextareaProps ```ts theme={null} type TextareaProps = TextareaHTMLAttributes ``` ## TokenName ```ts theme={null} type TokenName = typeof TOKEN_NAMES[number] ``` **Related:** [TOKEN\_NAMES](/reference/studio-sdk/components#token_names) ## ToolPicker ```ts theme={null} function ToolPicker(props: ToolPickerProps): Element ``` **Props** | Prop | Type | Description | | ----------------- | --------------------------------------------- | --------------------------------------------------------------------------------- | | `agentToolNames?` | `ReadonlySet` | Tool names that are agent run tools; their option labels are suffixed " (agent)". | | `disabled?` | `boolean` | — | | `excludeNames?` | `readonly string[]` | Names removed from the options (the server remains the authority). | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `onChange` | `(toolName: string) => void` | — | | `placeholder?` | `string` | — | | `tagsByTool?` | `Readonly>` | Per-tool native tags; when present, options are grouped and a tag filter shows. | | `toolNames` | `readonly string[]` | — | | `value` | `string \| null` | — | **Related:** [ToolPickerProps](/reference/studio-sdk/components#toolpickerprops) ## ToolPickerProps ```ts theme={null} interface ToolPickerProps ``` **Properties** | Property | Type | Description | | ----------------- | --------------------------------------------- | --------------------------------------------------------------------------------- | | `agentToolNames?` | `ReadonlySet` | Tool names that are agent run tools; their option labels are suffixed " (agent)". | | `disabled?` | `boolean` | — | | `excludeNames?` | `readonly string[]` | Names removed from the options (the server remains the authority). | | `idPrefix?` | `string` | — | | `label?` | `string` | — | | `onChange` | `(toolName: string) => void` | — | | `placeholder?` | `string` | — | | `tagsByTool?` | `Readonly>` | Per-tool native tags; when present, options are grouped and a tag filter shows. | | `toolNames` | `readonly string[]` | — | | `value` | `string \| null` | — | ## Tooltip ```ts theme={null} function Tooltip(props: TooltipProps): Element ``` **Props** | Prop | Type | Description | | ---------------- | ----------- | ----------- | | `children` | `ReactNode` | — | | `content` | `ReactNode` | — | | `delayDuration?` | `number` | — | **Related:** [TooltipProps](/reference/studio-sdk/components#tooltipprops) ## TooltipProps ```ts theme={null} interface TooltipProps ``` **Properties** | Property | Type | Description | | ---------------- | ----------- | ----------- | | `children` | `ReactNode` | — | | `content` | `ReactNode` | — | | `delayDuration?` | `number` | — | ## VersionHistoryEntry ```ts theme={null} interface VersionHistoryEntry ``` One version row — the kind-agnostic shape every consumer projects into. **Properties** | Property | Type | Description | | ------------ | ------------------- | ------------------------------------------------------------------------- | | `body` | `unknown` | — | | `created_at` | `string` | — | | `is_current` | `boolean` | — | | `tags?` | `readonly string[]` | The version's generic label list, surfaced as a Tags column when present. | | `version` | `number` | — | ## VersionHistoryPanel ```ts theme={null} function VersionHistoryPanel(props: VersionHistoryPanelProps): ReactNode ``` **Props** | Prop | Type | Description | | ----------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onEditTags?` | `(version: number, tags: string[]) => Promise` | Replace one version's tag annotation. When provided, a per-row "Edit tags" action opens a dialog seeded from the row's tags and SAVE calls this with the NEW list; the panel awaits the returned promise with internal pending/error state. Omitted ⇒ no edit affordance (tags stay read-only). | | `onRollback` | `(version: number) => void` | Roll the active pointer to `version`. The consumer owns the mutation. | | `onView?` | `(version: number) => void` | Fired when a version is selected for viewing (optional). | | `readOnly?` | `boolean` | A read-only history view: the version list and each version's body stay visible (history is a read surface), but the per-row Rollback action — the only mutation — is hidden. Defaults to interactive (Rollback shown). | | `rollbackConfirmDescription?` | `string` | Extra consequence copy appended to the rollback confirm dialog's description (announced to assistive tech via the dialog's `aria-describedby`). Consumers whose rollback has an immediate live effect (e.g. re-pointing access-control enforcement) pass a sentence stating so; omitted when there is nothing extra. | | `rollbackError?` | `string` | A loud rollback failure message to surface in the confirm dialog. | | `rollbackPending?` | `boolean` | The consumer's rollback mutation is in flight. | | `versions` | `readonly VersionHistoryEntry[]` | — | **Related:** [VersionHistoryPanelProps](/reference/studio-sdk/components#versionhistorypanelprops) ## VersionHistoryPanelProps ```ts theme={null} interface VersionHistoryPanelProps ``` **Properties** | Property | Type | Description | | ----------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onEditTags?` | `(version: number, tags: string[]) => Promise` | Replace one version's tag annotation. When provided, a per-row "Edit tags" action opens a dialog seeded from the row's tags and SAVE calls this with the NEW list; the panel awaits the returned promise with internal pending/error state. Omitted ⇒ no edit affordance (tags stay read-only). | | `onRollback` | `(version: number) => void` | Roll the active pointer to `version`. The consumer owns the mutation. | | `onView?` | `(version: number) => void` | Fired when a version is selected for viewing (optional). | | `readOnly?` | `boolean` | A read-only history view: the version list and each version's body stay visible (history is a read surface), but the per-row Rollback action — the only mutation — is hidden. Defaults to interactive (Rollback shown). | | `rollbackConfirmDescription?` | `string` | Extra consequence copy appended to the rollback confirm dialog's description (announced to assistive tech via the dialog's `aria-describedby`). Consumers whose rollback has an immediate live effect (e.g. re-pointing access-control enforcement) pass a sentence stating so; omitted when there is nothing extra. | | `rollbackError?` | `string` | A loud rollback failure message to surface in the confirm dialog. | | `rollbackPending?` | `boolean` | The consumer's rollback mutation is in flight. | | `versions` | `readonly VersionHistoryEntry[]` | — | **Related:** [VersionHistoryEntry](/reference/studio-sdk/components#versionhistoryentry) ## baseNameOf ```ts theme={null} function baseNameOf(name: string): string ``` The base tool name a variant belongs to: the substring before the first underscore, or the whole name when it has none. `tool`, `tool_a`, `tool_a_b` all resolve to `tool`; `x_chain` and `x_batch` both resolve to `x`. **Parameters** | Parameter | Type | Default | Description | | --------- | -------- | ------- | ----------- | | `name` | `string` | — | — | ## diffJson ```ts theme={null} function diffJson(before: unknown, after: unknown): JsonDiffRow[] ``` The pure structural diff — every leaf difference between `before` and `after`. **Parameters** | Parameter | Type | Default | Description | | --------- | --------- | ------- | ----------- | | `before` | `unknown` | — | — | | `after` | `unknown` | — | — | **Related:** [JsonDiffRow](/reference/studio-sdk/components#jsondiffrow) ## groupByKind ```ts theme={null} function groupByKind( extensions: readonly ({ kind: string; name: string })[], ): ExtensionKindGroup[] ``` Group a flat extension list by `kind`, for the picker. Groups are ordered by kind and each group's members by name, so the render order is stable regardless of the server's list order. The `backend` group is flagged non-stackable. **Parameters** | Parameter | Type | Default | Description | | ------------ | --------------------------------------------- | ------- | ----------- | | `extensions` | `readonly ({ kind: string; name: string })[]` | — | — | **Related:** [ExtensionKindGroup](/reference/studio-sdk/components#extensionkindgroup) ## groupIntoFamilies ```ts theme={null} function groupIntoFamilies( extensions: readonly ({ kind: string; name: string })[], ): ExtensionFamily[] ``` Group a flat extension list into families keyed by base tool name. Families are ordered by base name and each family's members by full name, so the render order is stable regardless of the server's list order. **Parameters** | Parameter | Type | Default | Description | | ------------ | --------------------------------------------- | ------- | ----------- | | `extensions` | `readonly ({ kind: string; name: string })[]` | — | — | **Related:** [ExtensionFamily](/reference/studio-sdk/components#extensionfamily) ## isSafeHttpUrl ```ts theme={null} function isSafeHttpUrl(url: string): boolean ``` True only for an absolute `http:`/`https:` URL. Everything else is unsafe. **Parameters** | Parameter | Type | Default | Description | | --------- | -------- | ------- | ----------- | | `url` | `string` | — | — | ## kindVariant ```ts theme={null} function kindVariant(kind: string): string ``` Map a serialized extension `kind` to a Badge variant. Known skeleton kinds get a themed color; any unrecognized kind falls back to the neutral variant (the Badge itself also neutral-fallbacks, but choosing here keeps the mapping explicit and testable). **Parameters** | Parameter | Type | Default | Description | | --------- | -------- | ------- | ----------- | | `kind` | `string` | — | — | ## useFieldControl ```ts theme={null} function useFieldControl(): FieldControlProps ``` Read the enclosing Field's wiring; a passthrough (all `undefined`) when standalone. **Related:** [FieldControlProps](/reference/studio-sdk/components#fieldcontrolprops)