PRN UI Component System

A self-contained operational interface specimen for the complete Dise migration.

Scrollable segmented control

Choose a view · pin frequently used options 0 pinned

Pinned options move to the start of the same scrolling list. Unpinning restores their native order.

Short rail · all options fit Checking width…

When every option fits, pinning has no benefit, so pin controls become unavailable automatically.

Jobs table

Job	Status	Started	Duration	Procs	Repo
j-4f2a9c	Running	10:41	3m 12s	O C X	⁦~/github/acme/api-server⁩
j-b81d03	Completed	09:15	12m 44s	C G	⁦~/github/acme/web-frontend⁩
j-77e6f1	Failed	Yesterday	1m 03s	X +2	⁦~/github/dimacurrentai/scsh⁩

Collapsible status rows

▶ ◉ build-and-test codex · elapsed 2m 18s

container 9f3a1c…b2e4 · image scsh-codex:0.4.4

Running cargo test --workspace, tail follows below.

▶ ✓ lint 0.9s

clippy · 0 warnings · 0 errors

▶ ○ deploy-preview waiting on build-and-test

Queued; starts when its dependency finishes.

▶ ✗ integration-tests exit 1 · 4m 02s

2 of 148 tests failed

See the log tail for the failing assertions.

Workflow nodes

✓lint

codex · 0.9s

◉build-and-test

codex · 2m 18s

○deploy-preview

waiting

✗integration-tests

exit 1 · 4m 02s

⊘publish

skipped

Job succeeded Job running Job failed when: tests-pass

Loop · iteration 3 of 5

✓review #2

claude · 58s

◉review #3

claude · 12s

↻ 2 more planned

Workflow diagram

Job running 6 nodes · 1 running · 3 done · 1 failed · 1 waiting

◉ running
✓ done
✗ failed
○ waiting

✓lint

codex · 0.9s

✓scsh-codex:0.4.4

image build · 38s

✓build-and-test

codex · 5m 12s

◉integration-tests

codex · 1m 44s

✗deploy-preview

exit 1 · 12s

○publish

when: tests-pass

Log output

Short time-zone name · Time zone

              Time
              Δt
              Message
            
❯ cargo test --workspace
+1.2sCompiling scsh v0.4.4
+6.4sFinished test profile in 5.2s
+8.7s✓ 214 tests passed
+8.9swarning: unused variable `cast_id`
+9.0s✗ e2e::daemon_restart — assertion failed

Long time-zone name · Time zone

              Time
              Δt
              Message
            
❯ cargo test --workspace
+1.2sCompiling scsh v0.4.4
+6.4sFinished test profile in 5.2s
+8.7s✓ 214 tests passed
+8.9swarning: unused variable `cast_id`
+9.0s✗ e2e::daemon_restart — assertion failed

Card & Panel

Composable surfaces

Normal, compact, dense, empty, and loading compositions.

Foundation

Normal panelready

Nested content uses shared borders and the named deep surface.

Engine	Mode	Status
demo-engine-a	observe	Active

No saved viewsCreate a view when a reusable layout is useful.

Button contract

Primary

Positive

Warning

Danger

Special

Secondary

Ghost / small

Disabled

Icon navigation

Fields, inputs & select

Role aliasoptional

Visible to operators; does not change the machine identifier.

Current password

Required to unlock this synthetic console.

Token label

Use at least three characters.
The label must not match a reserved capability name.

Generated identifier

Read-only values remain selectable.

Disabled field

The reason remains visible.

Route label

Checking availability…

Native select

Preferred when rich option content is unnecessary.

Rich invocation route

Arrow keys, Home/End, typeahead, Enter, Escape, and Tab are supported.

Stat, MetricGrid & ValuePair

Retained jobs

12,480

updated 4s ago

Results ready

8,120

65.1% complete

Active routes

across 4 harnesses

Retrying steps

within retry budget

Stream readers

all synthetic

Unavailable

—

source offline

jobs.events

Structured stream · age 180ms

Head12,480

Replica12,476

artifacts.events

Stale · last update 46s ago

Head—

Replica—

Feedback & status

Readiness blocked by four checks

Synthetic daemon handshake incomplete
Two required observation scopes are missing
Result stream is stale
Commit import awaits review

All checks clear

Observation may continue; no mutation capability is enabled.

Two simultaneous workflow pauses

Retry budget pause · 2m 14s
Operator review pause · 38s

Connection

Connectingattempt 2 of 5

Badges

ActivePausedStaleRunning

Inline messages

Checking synthetic capability…

Capability verified.

Request failed safely.
No existing data was discarded.

Synthetic stream stale

Read-only inspection remains available. Actions requiring current evidence are disabled.

Dialog, Tooltip & CopyPopover

Dialogs trap focus, close with Escape, restore focus, and keep long output inside their body.

Job · Exact duration · Session

Docked Inspector

Use an Inspector—not a Tooltip—for structured, selectable, or link-bearing detail. Its layout space is always reserved: hover or focus previews, click pins, and Escape or Clear releases it.

DataTable & ProgressiveReveal

Synthetic invocation routes
Harness	Model	Profile	Attempts	Budget	Result	Status	Started
codex	gpt-5	code-review	1	900s	review.json	Complete	10:41:12
claude	sonnet	commit-summary	1	600s	—	Running	10:42:03
opencode	glm-demo	audit	3	480s	—	Failed	10:42:18

6 shown · 20 retained

Empty results

No retained resultsNo synthetic jobs have completed.

Loading table

Error row

Jobs could not refresh. Previously loaded rows remain visible.

Disclosure & EventLogRow

10:40:012m agoNormalSynthetic daemon connected to the observation stream.▶

{"event":"demo.connected","stream":"synthetic"}

10:41:1258s ago+71sSuccessSynthetic readiness checks completed without mutation access.▶

{
  "event": "demo.readiness",
  "result": "ready",
  "mutation_enabled": false
}

10:41:4624s ago+34sPipelineSynthetic transform waited because its upstream artifact was not ready.▶

{"decision":"wait","upstream":"review-codex"}

10:41:5812s ago+12sPausedRetry pause activated because the synthetic result stream is stale.▶

{"pause":"stale_result_stream","duration_ms":12000}

10:42:037s ago+5sFailureSynthetic command was rejected safely; no retained state changed.▶

{"error":"demo_rejection","retryable":true}

CodeBlock & SecretValue

Synthetic JSON response

{
  "repository": "repo_demo_alpha",
  "capability": "observation-only",
  "expires_at": "2099-01-01T00:00:00Z"
}

Synthetic capability token

••••••••••••••••••••••••••••••••

Synthetic example. Real one-time values should be stored before this dialog is closed.

Plot

Published rateApplied rateLive sample

Window −1.00…1.00Live 0.18 / 101.26Cursor 0.00 / 100.00

No series

No synthetic stream samples retained.

Invalid data

Sample points must be finite and ordered.

AppShell & StickyChrome

Synthetic daemon onlineup 3d 14h

jobs.eventsHead 12,480Replica 12,476

All jobscode-reviewcommit-summary · runninggorgeous-pipeline

Result stream stale

The shell keeps the current mode and read-only inspection available.

Streams · jobs.events

Popover and dialog bounds are measured from rendered sticky chrome.

Cross-component states & responsive contract

Component	Empty	Loading	Error	Stale
Card	Named absence	Skeleton	Callout	Age retained
Select	No options	Trigger busy	InlineMessage	Last value labeled
DataTable	Colspan message	Stable rows	Rows preserved	Timestamped
EventLog	No events	Existing open rows	Retry detail	Ages continue
Plot	No series	Viewport reserved	Text alternative	Marker labeled
Dialog	Result absent	Local action	Full message	Existing result kept
ScopeSwitcher	No routes	Selection retained	Unavailable reason	Running route distinct

Keyboard focus

Reduced motion

Decorative motion stops under prefers-reduced-motion; state remains textual.

Narrow screens

Tables and secondary navigation scroll within bounded regions below 520px.

Tooltip

Hover or focus after a short delay. Tooltip content is supplementary and never interactive; Escape, blur, and pointer leave close it.

PRN UI component system

Composable surfaces

Generate synthetic token

Synthetic command states

Complete value