F Kitchen Sink

Design system

Forge React primitives

Canonical TSX: forgesdlc-kitchensink/react/ — ForgeRunHeader, ForgeKeyValueGrid, ForgeStatusBanner, ForgeWorkflowStageBar, ForgeDecisionActionBar, ForgeEventTimeline, ForgeDiagnosticPanel, ForgeReviewPanel. Stylesheet: css/forge-react-primitives.css (copied to showcase assets/).

Run header & badges

Enterprise header row: title, subtitle, badges, metadata slot, actions.

React

ForgeRunHeader

Remediation session

Project acme · cluster docs-debt

Stop
  • SSE
  • Awaiting input

Key / value grid

Dense metadata (dl grid).

React

ForgeKeyValueGrid

Session id
a1b2…
Tokens
12,400

Status banner

Prominent run state: cancelled, failed, awaiting, verified, etc.

React

ForgeStatusBanner

Awaiting approval
Review the proposed patch before apply.

Workflow stage bar

Horizontal pipeline with semantic per-node status.

React

ForgeWorkflowStageBar

  1. Enrich
  2. Draft
  3. Verify

Decision action bar

Sticky toolbar for approve / reject / re-run / verify (host supplies buttons).

React

ForgeDecisionActionBar

Event timeline

Chronological cards with optional details toggle (interactive behavior in React).

React

ForgeEventTimeline

  1. completed
    Token stats updated

Diagnostic panel

Summary first; raw JSON behind disclosure.

React

ForgeDiagnosticPanel

Diagnostics

Tasklet state: running

Review panel

Optional shell for diffs and approval layouts.

React

ForgeReviewPanel

Patch

Proposed markdown

docs/README.md — unified diff appears in Studio.