Barton Design System

CTB Demo

A working descent through a sample trunk, the matching data-flow map, and the honest states a real cockpit needs. Selecting a node re-roots the hub/spoke view; every relationship keeps its confidence visible so a planned or unproven edge can never read as verified.

Sample data
You are hereCTB Demo30kBranchDraftsource: SAMPLE PLACEHOLDER DATA — not a real CTB, schema or statusnext: bind a real CTB read before trusting any of this

Hub / spoke descent

sample placeholder CTB — interactive

Current node

30kVerified

Intake

Rim validation before anything enters the trunk.

Node id
branch.intake
Parent
Operations Trunk (sample)
Children
2
Source
sample-data.ts (illustrative)

CTB mini-map

sample tree

  • 50kLive
    • 30kVerified
    • 30kDraft
    • 30kRepair

Data-flow map

verified vs planned vs gap

Verified edges

Verified

3of 6

src: sample-data.ts (illustrative)

Planned edges

Draft

1

src: sample-data.ts (illustrative)

Gap edges

Gap

2

src: gap — no confirmed join key

Data-flow map

  • Verified
  • Planned
  • Gap / unproven
1:1proposedunprovenread-onlyTABLEintake_rawVERIFIEDTABLEroster_importWARNINGADAPTERnormalizeVERIFIEDADAPTERlegacy bridgeGAPVIEWops_currentVERIFIEDSURFACECockpit readLIVE
SAMPLE PLACEHOLDER DATA — not a real CTB, schema or status

Edge inventory

Repair
SAMPLE PLACEHOLDER DATA — not a real CTB, schema or status
FromToConfidenceBasis
intake_rawnormalizeSourceddeclared in the sample contract and confirmed end to end
roster_importnormalizePlannedproposed in the sample only — not implemented, do not rely on it
roster_importlegacy bridgeNo sourceno confirmed join key; drawn as a gap so it can never read as fact
normalizeops_currentSourceddeclared in the sample contract and confirmed end to end
legacy bridgeops_currentNo sourceno confirmed join key; drawn as a gap so it can never read as fact
ops_currentCockpit readSourceddeclared in the sample contract and confirmed end to end

Empty, error and locked states

honest absence

Empty — nothing ingested yet

No packets in this sample batch

Rows appear here once a real intake read is bound. Absence is stated, never left as a blank panel.

Error — read failed

Warning

Sample adapter read failed

Blocked

The legacy bridge returned no join key, so the downstream view cannot be trusted for this batch.

opens from: Confirmed join key on roster_import

Locked — gate closed

Readiness panel is locked

Blocked

Source coverage has not been checked for this sample study branch.

opens from: All study leaves source-attached

What this demo proves

deterministic checks only

Checks

  • Descent re-roots the hub and re-renders its spokes

    Pass
  • Locked spokes stay visible and state their reason

    Pass
  • Gap edges render distinctly from verified edges

    Pass
  • Every number on the page carries a source

    Pass
  • Bound to a real CTB read

    Sample placeholder data only — no real source is attached.

    Not checked

Sources behind this view

Sources

  • Barton CTB contractSourced· ctb-contract.md
  • Design system referenceSourced· design-system.md
  • Domain skin values for KiddosNo source· not supplied
  • Mission Control dark skinPlanned· planned

Descent wiring

const [currentId, setCurrentId] = useState("branch.intake");
const current = nodes.find((n) => n.id === currentId)!;

<HubCard name={current.name} altitude={current.altitude} state={current.state} />

{children.map((child) => (
  <SpokeCard
    key={child.id}
    name={child.name}
    altitude={child.altitude}
    state={child.state}
    disabled={child.state === "blocked"}
    blockedReason={child.blockedReason}
    onDescend={child.state === "blocked" ? undefined : () => setCurrentId(child.id)}
  />
))}

<CTBMiniMap nodes={nodes} currentId={current.id} onSelect={(n) => setCurrentId(n.id)} />