Structure

The pieces that give a modal its skeleton: grouped settings, footers, and scroll areas. (The modal shell — title, backdrop, sizing, close — comes from ctx.ui.showModal and is not yours to build.)

Formatting

Format on save

Run Format Document before writing to disk.

Tab size

Spaces per indentation level.

GitHub CLI status

Authentication is detected from the gh CLI.

Authenticated

Section

A labeled group — the uppercase NAME / FOLDERS / FORMATTING headers seen throughout Silo's modals and settings pages.

import { Section, SettingRow, Switch } from "@silo-code/sdk";

<Section label="Formatting">
  <SettingRow
    label="Format on save"
    hint="Run Format Document before writing to disk."
  >
    <Switch
      checked={formatOnSave}
      onChange={setFormatOnSave}
      aria-label="Format on save"
    />
  </SettingRow>
</Section>;

Prop	Type	Notes
label	string	rendered uppercase, letter-spaced, chrome−1, text-lo
accessory	ReactNode?	right-aligned — a count badge, an add affordance

SettingRow

The label + hint + control row every settings surface uses: title and dim description on the left, the control pinned right. Rows in a group are separated by hairline dividers.

Prop	Type	Notes
label	string	base / text-hi
hint	string?	sm / text-lo, wraps under the label
children	ReactNode	the control — Switch, Select, Input, a number field, or a small status recipe

Inline status is a recipe, not a component

The "✓ Authenticated" pattern is an icon + --silo-color-ok text dropped into a SettingRow's control slot — deliberately not its own component.

ModalActions

The footer: actions right-aligned, with an optional start slot pinned left for meta text or a secondary action. Every modal footer is a ModalActions — never hand-roll a flex footer.

Group Properties

Processes — All Workspaces

6 sessions · 6 procs

// standard form footer
<ModalActions>
  <Button onClick={close}>Cancel</Button>
  <Button variant="primary" onClick={save}>Create</Button>
</ModalActions>

// with the start slot (meta text…)
<ModalActions start="6 sessions · 6 procs">
  <Button>Go to Terminal</Button>
  <Button variant="danger">End Task</Button>
</ModalActions>

// …or a secondary action
<ModalActions start={<Button size="sm" onClick={create}>+ Create branch</Button>}>
  <Button onClick={fetch}>Fetch</Button>
</ModalActions>

Ordering rule: the primary action is rightmost; neutral actions sit to its left; start holds anything that belongs to the modal rather than to confirming/cancelling it.

Scroll areas (.silo-scroll)

Any scrollable region inside a modal gets the silo-scroll class — an 8px overlay-style scrollbar with a transparent track and a pill thumb derived from the theme's text color (28% opacity, 45% on hover), so it stays visible in every theme. Never style scrollbars yourself.

mastercurrent

feat/workspace-status-badges

fix/terminal-scrollback-restore

fix/windows-caption-color

feat/context-menu-contributions

chore/upgrade-esbuild-0-21

fix/double-focus-ring-inputs

feat/registry-install-channel

<div className="silo-scroll" style={{ maxHeight: 300 }}>
  <List aria-label="Branches">…</List>
</div>