Variable uiConst

Type Declaration

• badge: (text: string, props?: Omit<BadgeProps, "text">) => VNode

• barChart: (
      data: readonly Readonly<
          { label: string; value: number; variant?: BadgeVariant },
      >[],
      props?: Omit<BarChartProps, "data">,
  ) => VNode

• box: (props?: BoxProps, children?: readonly UiChild[]) => VNode

• button: {
      (id: string, label: string): VNode;
      (
          id: string,
          label: string,
          props: Omit<ButtonProps, "id" | "label">,
      ): VNode;
      (props: ButtonProps): VNode;
  }

• callout: (message: string, props?: Omit<CalloutProps, "message">) => VNode

• column: (props?: StackProps, children?: readonly UiChild[]) => VNode

• divider: (props?: DividerProps) => VNode

• empty: (title: string, props?: Omit<EmptyProps, "title">) => VNode

• errorDisplay: (message: string, props?: Omit<ErrorDisplayProps, "message">) => VNode

• focusTrap: (props: FocusTrapProps, children?: readonly UiChild[]) => VNode

• focusZone: (props: FocusZoneProps, children?: readonly UiChild[]) => VNode

• gauge: (value: number, props?: Omit<GaugeProps, "value">) => VNode

• hstack: {
      (gap: number, children: readonly UiChild[]): VNode;
      (children: readonly UiChild[]): VNode;
  }

• icon: (iconPath: string, props?: Omit<IconProps, "icon">) => VNode

• input: {
      (id: string, value: string): VNode;
      (id: string, value: string, props: Omit<InputProps, "id" | "value">): VNode;
      (props: InputProps): VNode;
  }

• kbd: (keys: string | readonly string[], props?: Omit<KbdProps, "keys">) => VNode

• miniChart: (
      values: readonly { label: string; max?: number; value: number }[],
      props?: Omit<MiniChartProps, "values">,
  ) => VNode

• progress: (value: number, props?: Omit<ProgressProps, "value">) => VNode

• richText: (
      spans: readonly Readonly<
          {
              style?: Readonly<
                  {
                      bg?: Readonly<{ b: ...; g: ...; r: ... }>;
                      bold?: boolean;
                      dim?: boolean;
                      fg?: Readonly<{ b: ...; g: ...; r: ... }>;
                      inverse?: boolean;
                      italic?: boolean;
                      underline?: boolean;
                  },
              >;
              text: string;
          },
      >[],
  ) => VNode

• row: (props?: StackProps, children?: readonly UiChild[]) => VNode

• skeleton: (width: number, props?: Omit<SkeletonProps, "width">) => VNode

• spacer: (props?: SpacerProps) => VNode

• sparkline: (data: readonly number[], props?: Omit<SparklineProps, "data">) => VNode

• spinner: (props?: SpinnerProps) => VNode

• status: (status: StatusType, props?: Omit<StatusProps, "status">) => VNode

• tag: (text: string, props?: Omit<TagProps, "text">) => VNode

• text: {
      (content: string): VNode;
      (content: string, style: TextStyle): VNode;
      (content: string, props: TextProps): VNode;
  }

• virtualList: <T>(props: VirtualListProps<T>) => VNode

• vstack: {
      (gap: number, children: readonly UiChild[]): VNode;
      (children: readonly UiChild[]): VNode;
  }

• checkbox: function

  • checkbox(props: CheckboxProps): VNode

    Create a checkbox widget. Toggles with Space key.

    Parameters

    • props: CheckboxProps

    Returns VNode

    Example

    ui.checkbox({
      id: "remember",
      checked: form.values.remember,
      label: "Remember me",
      onChange: (c) => form.setFieldValue("remember", c),
    })
    Copy

• codeEditor: function

  • codeEditor(props: CodeEditorProps): VNode

    Create a code editor widget for multiline text editing. Supports selections, keyboard navigation, and undo/redo.

    Parameters

    • props: CodeEditorProps

    Returns VNode

    Example

    ui.codeEditor({
      id: "editor",
      lines: state.lines,
      cursor: state.cursor,
      selection: state.selection,
      scrollTop: state.scrollTop,
      scrollLeft: state.scrollLeft,
      lineNumbers: true,
      tabSize: 2,
      onChange: (lines, cursor) => app.update({ lines, cursor }),
      onSelectionChange: (sel) => app.update({ selection: sel }),
      onScroll: (top, left) => app.update({ scrollTop: top, scrollLeft: left }),
    })
    Copy

• commandPalette: function

  • commandPalette(props: CommandPaletteProps): VNode

    Create a command palette widget for quick-access command execution. Supports search, keyboard navigation, and multiple command sources.

    Parameters

    • props: CommandPaletteProps

    Returns VNode

    Example

    ui.commandPalette({
      id: "cmd-palette",
      open: state.paletteOpen,
      query: state.query,
      sources: [
        { id: "cmds", name: "Commands", prefix: ">", getItems: getCommands },
        { id: "files", name: "Files", getItems: searchFiles },
      ],
      selectedIndex: state.selectedIndex,
      onQueryChange: (q) => app.update({ query: q }),
      onSelect: (item) => executeCommand(item),
      onClose: () => app.update({ paletteOpen: false }),
    })
    Copy

• diffViewer: function

  • diffViewer(props: DiffViewerProps): VNode

    Create a diff viewer widget for displaying file changes. Supports unified and side-by-side modes with hunk staging.

    Parameters

    • props: DiffViewerProps

    Returns VNode

    Example

    ui.diffViewer({
      id: "diff",
      diff: fileDiff,
      mode: "unified",
      scrollTop: state.scrollTop,
      lineNumbers: true,
      contextLines: 3,
      onScroll: (top) => app.update({ scrollTop: top }),
      onStageHunk: (i) => stageHunk(i),
      onRevertHunk: (i) => revertHunk(i),
    })
    Copy

• dropdown: function

  • dropdown(props: DropdownProps): VNode

    Create a dropdown menu positioned relative to an anchor. Automatically flips when near screen edge.

    Parameters

    • props: DropdownProps

    Returns VNode

    Example

    ui.dropdown({
      id: "file-menu",
      anchorId: "file-button",
      position: "below-start",
      items: [
        { id: "new", label: "New", shortcut: "Ctrl+N" },
        { id: "open", label: "Open", shortcut: "Ctrl+O" },
        { id: "divider", label: "", divider: true },
        { id: "exit", label: "Exit" },
      ],
      onSelect: (item) => handleAction(item.id),
      onClose: () => app.update({ menuOpen: false }),
    })
    Copy

• field: function

  • field(props: FieldProps): VNode

    Create a field wrapper for form inputs. Displays label, error message, and optional hint.

    Parameters

    • props: FieldProps

    Returns VNode

    Example

    ui.field({
      label: "Username",
      required: true,
      error: form.touched.username && form.errors.username,
      hint: "Enter your email address",
      children: ui.input({
        id: "username",
        value: form.values.username,
      }),
    })
    Copy

• filePicker: function

  • filePicker(props: FilePickerProps): VNode

    Create a file picker widget for browsing workspace files. Supports expand/collapse, multi-select, and git status indicators.

    Parameters

    • props: FilePickerProps

    Returns VNode

    Example

    ui.filePicker({
      id: "file-picker",
      rootPath: "/workspace",
      data: fileTree,
      selectedPath: state.selectedFile,
      expandedPaths: state.expanded,
      modifiedPaths: state.gitModified,
      onSelect: (path) => app.update({ selectedFile: path }),
      onToggle: (path, exp) => toggleExpanded(path, exp),
      onOpen: (path) => openFile(path),
    })
    Copy

• fileTreeExplorer: function

  • fileTreeExplorer(props: FileTreeExplorerProps): VNode

    Create a file tree explorer widget. Provides tree view with expand/collapse and custom node rendering.

    Parameters

    • props: FileTreeExplorerProps

    Returns VNode

    Example

    ui.fileTreeExplorer({
      id: "explorer",
      data: fileTree,
      expanded: state.expanded,
      selected: state.selected,
      showIcons: true,
      showStatus: true,
      onToggle: (node, exp) => toggleNode(node, exp),
      onSelect: (node) => selectNode(node),
      onActivate: (node) => openNode(node),
    })
    Copy

• layer: function

  • layer(props: LayerProps): VNode

    Create a generic layer in the layer stack. Use for custom overlays that need z-order control.

    Parameters

    • props: LayerProps

    Returns VNode

    Example

    ui.layer({
      id: "tooltip",
      content: ui.text("Tooltip text"),
      zIndex: 100,
    })
    Copy

• layers: function

  • layers(children: readonly UiChild[]): VNode

    Create a layers container for stacking overlays. Later children render on top (higher z-order).

    Parameters

    • children: readonly UiChild[]

    Returns VNode

    Example

    ui.layers([
      MainContent(),
      state.showModal && ui.modal({ ... }),
    ])
    Copy

• logsConsole: function

  • logsConsole(props: LogsConsoleProps): VNode

    Create a logs console widget for streaming output. Supports filtering, auto-scroll, and expandable entries.

    Parameters

    • props: LogsConsoleProps

    Returns VNode

    Example

    ui.logsConsole({
      id: "logs",
      entries: state.logs,
      autoScroll: true,
      levelFilter: ["info", "warn", "error"],
      scrollTop: state.logsScrollTop,
      showTimestamps: true,
      onScroll: (top) => app.update({ logsScrollTop: top }),
      onClear: () => app.update({ logs: [] }),
    })
    Copy

• modal: function

  • modal(props: ModalProps): VNode

    Create a modal overlay. Renders centered with optional backdrop and focus trap.

    Parameters

    • props: ModalProps

    Returns VNode

    Example

    ui.modal({
      id: "confirm",
      title: "Confirm Action",
      content: ui.text("Are you sure?"),
      actions: [
        ui.button({ id: "yes", label: "Yes" }),
        ui.button({ id: "no", label: "No" }),
      ],
      onClose: () => app.update({ showModal: false }),
    })
    Copy

• panelGroup: function

  • panelGroup(props: PanelGroupProps, children?: readonly VNode[]): VNode

    Create a panel group container for resizable panels. Manages layout and resize state for child panels.

    Parameters

    • props: PanelGroupProps
    • children: readonly VNode[] = []

    Returns VNode

    Example

    ui.panelGroup({
      id: "panel-group",
      direction: "horizontal",
      autoSaveId: "main-layout",
    }, [
      ui.resizablePanel({ defaultSize: 25 }, [Sidebar()]),
      ui.resizablePanel({ defaultSize: 75, minSize: 50 }, [Content()]),
    ])
    Copy

• radioGroup: function

  • radioGroup(props: RadioGroupProps): VNode

    Create a radio group widget. Supports keyboard navigation with ArrowUp/Down for selection.

    Parameters

    • props: RadioGroupProps

    Returns VNode

    Example

    ui.radioGroup({
      id: "plan",
      value: form.values.plan,
      options: [
        { value: "free", label: "Free" },
        { value: "pro", label: "Pro" },
        { value: "enterprise", label: "Enterprise" },
      ],
      onChange: form.handleChange("plan"),
      direction: "vertical",
    })
    Copy

• resizablePanel: function

  • resizablePanel(props?: ResizablePanelProps, children?: readonly VNode[]): VNode

    Create a resizable panel within a panel group. Specifies size constraints for the panel.

    Parameters

    • props: ResizablePanelProps = {}
    • children: readonly VNode[] = []

    Returns VNode

    Example

    ui.resizablePanel({
      defaultSize: 30,
      minSize: 20,
      maxSize: 50,
      collapsible: true,
    }, [PanelContent()])
    Copy

• select: function

  • select(props: SelectProps): VNode

    Create a select dropdown widget. Supports keyboard navigation with ArrowUp/Down and Enter.

    Parameters

    • props: SelectProps

    Returns VNode

    Example

    ui.select({
      id: "country",
      value: form.values.country,
      options: [
        { value: "us", label: "United States" },
        { value: "uk", label: "United Kingdom" },
        { value: "ca", label: "Canada" },
      ],
      onChange: form.handleChange("country"),
      placeholder: "Select a country...",
    })
    Copy

• splitPane: function

  • splitPane(props: SplitPaneProps, children?: readonly VNode[]): VNode

    Create a split pane widget with draggable dividers. Supports horizontal/vertical splits with resize constraints.

    Parameters

    • props: SplitPaneProps
    • children: readonly VNode[] = []

    Returns VNode

    Example

    ui.splitPane({
      id: "main-split",
      direction: "horizontal",
      sizes: [25, 50, 25],
      minSizes: [20, 30, 20],
      onResize: (sizes) => app.update({ panelSizes: sizes }),
    }, [
      FileExplorer(),
      Editor(),
      LogsPanel(),
    ])
    Copy

• table: function

  • table<T>(props: TableProps<T>): VNode

    Create a table widget for displaying tabular data. Supports sorting, selection, and virtualization for large datasets.

    Type Parameters

    • T

    Parameters

    • props: TableProps<T>

    Returns VNode

    Example

    ui.table({
      id: "files",
      columns: [
        { key: "name", header: "Name", flex: 1, sortable: true },
        { key: "size", header: "Size", width: 10, align: "right" },
        { key: "actions", header: "", width: 8, render: (_, row) =>
          ui.button({ id: `del-${row.id}`, label: "Del" }) },
      ],
      data: files,
      getRowKey: (f) => f.id,
      selection: state.selected,
      selectionMode: "multi",
      onSelectionChange: (keys) => app.update({ selected: keys }),
      sortColumn: state.sortCol,
      sortDirection: state.sortDir,
      onSort: (col, dir) => app.update({ sortCol: col, sortDir: dir }),
    })
    Copy

• toastContainer: function

  • toastContainer(props: ToastContainerProps): VNode

    Create a toast container for non-blocking notifications. Manages toast stack and auto-dismiss.

    Parameters

    • props: ToastContainerProps

    Returns VNode

    Example

    ui.toastContainer({
      toasts: state.toasts,
      position: "bottom-right",
      maxVisible: 5,
      onDismiss: (id) => app.update(s => ({
        toasts: s.toasts.filter(t => t.id !== id)
      })),
    })
    Copy

• toolApprovalDialog: function

  • toolApprovalDialog(props: ToolApprovalDialogProps): VNode

    Create a tool approval dialog for reviewing tool execution. Shows tool details, risk level, and approval actions.

    Parameters

    • props: ToolApprovalDialogProps

    Returns VNode

    Example

    ui.toolApprovalDialog({
      id: "approval",
      open: state.pendingApproval !== null,
      request: state.pendingApproval,
      onAllow: () => executeTool(state.pendingApproval),
      onDeny: () => app.update({ pendingApproval: null }),
      onAllowForSession: () => allowForSession(state.pendingApproval),
      onClose: () => app.update({ pendingApproval: null }),
    })
    Copy

• tree: function

  • tree<T>(props: TreeProps<T>): VNode

    Create a tree widget for displaying hierarchical data. Supports expand/collapse, selection, and lazy loading.

    Type Parameters

    • T

    Parameters

    • props: TreeProps<T>

    Returns VNode

    Example

    ui.tree<FileNode>({
      id: "file-tree",
      data: fileSystem,
      getKey: (n) => n.path,
      getChildren: (n) => n.children,
      hasChildren: (n) => n.type === "directory",
      expanded: state.expandedPaths,
      selected: state.selectedPath,
      onToggle: (node, exp) => app.update(s => ({
        expandedPaths: exp
          ? [...s.expandedPaths, node.path]
          : s.expandedPaths.filter(p => p !== node.path)
      })),
      onSelect: (n) => app.update({ selectedPath: n.path }),
      onActivate: (n) => n.type === "file" && openFile(n.path),
      renderNode: (node, depth, state) => ui.row({ gap: 1 }, [
        ui.text(state.expanded ? "▼" : state.hasChildren ? "▶" : " "),
        ui.text(node.type === "directory" ? "📁" : "📄"),
        ui.text(node.name),
      ]),
      showLines: true,
    })
    Copy