WorkspaceTree

The sidebar of an agents view: each project, its main copy and worktrees, and the sessions in each, with the most urgent state rolled up. Pick it when sessions are grouped by where they run.

WorkspaceTree
WorkspaceRow

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, WorkspaceTree

shop

main copy

Update billing docsDone

ShellReady

feature/credit-notes

@reviewerWaiting for you

Billing testsWorking

marketing-site-with-a-very-long-repository-name

Open: reviewer

Dark theme, WorkspaceTree

shop

main copy

Update billing docsDone

ShellReady

feature/credit-notes

@reviewerWaiting for you

Billing testsWorking

marketing-site-with-a-very-long-repository-name

Open: reviewer

High contrast theme, WorkspaceTree

shop

main copy

Update billing docsDone

ShellReady

feature/credit-notes

@reviewerWaiting for you

Billing testsWorking

marketing-site-with-a-very-long-repository-name

Open: reviewer

UsageLink to the section Usage

tsx

import { WorkspaceTree, WorkspaceRow } from '@skribly/ui/agents'

tsx

<WorkspaceTree label={t('workspaces')} selectedKey={open} onSelect={setOpen}>
  <WorkspaceRow id="shop" kind="project" label="shop" state={rollUpSessionState(states)} stateLabel={…}>
    <WorkspaceRow id="main" kind="workspace" label={t('mainCopy')} count={2} countLabel={t('sessions', { n: 2 })}>
      <WorkspaceRow id="s1" kind="session" label="@reviewer" state="blocked" stateLabel={t('state.blocked')} />
    </WorkspaceRow>
  </WorkspaceRow>
</WorkspaceTree>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A React Aria tree: arrow keys move, Right opens a branch and Left closes it, typing jumps to a row, and Enter or Space opens the row, which then reads as selected.
Rolled-up states show their glyph and keep the word for screen readers; counts have their own words.
Row buttons appear on hover, on keyboard focus and on the selected row, and always on touch screens.
Long names are cut on screen, read in full, and shown whole in a native tip.

This demo runs through axe in all three themes on every test run. See what the tests check.