Dev status bar

In review

Live · web

Pinned to the console bottom: quiet segments, opt-in interactivity

main0 problemsagent · streaming

Ln 42, Col 7UTF-8Palette⌘K

Picked nothing yet · 0 clicks. Dotted state is informational, keys are real buttons. The island is live.

The web console’s ambient strip (WS5, agent-console epic): branch, agent/job state, cursor position, keyboard hints. All of it is reading-scale CHROME, deliberately not the Toolbar’s control-scale grammar. Segments are quiet spans by default; give one onSelect and it becomes a real button (hover wash + ink + focus outline); nothing looks pressable unless it is. State rides the shared StatusDot ladder; hints are real Kbd keycaps.

Web-only by scope

Per the de-phantom verdict on the agent-console epic: native consoles have no equivalent surface, so this ships web-only (on the shared tokens and laws, no cross-platform spec needed).

Code

TypeScript

import { NockerlDevStatusBar, NockerlDevStatusSegment } from '@dizyx/nockerl-react';

<NockerlDevStatusBar
  start={
    <>
      <NockerlDevStatusSegment icon={branchIcon} label="main" onSelect={openBranches} />
      <NockerlDevStatusSegment dot="info" label="agent · streaming" />
    </>
  }
  end={<NockerlDevStatusSegment label="Palette" kbd={['⌘', 'K']} onSelect={openPalette} />}
/>

Parameters

Prop	Type	Default	Description
start	ReactNode	n/a	Leading segments (left-aligned).
end	ReactNode	n/a	Trailing segments (right-aligned).
ariaLabel	string	'Status bar'	Accessible name of the bar region. Default "Status bar".
className	string	n/a	Extra class on the bar.

Prop	Type	Default	Description
label *	string	n/a	The segment text (chrome-muted at rest; full chrome ink on hover when interactive).
icon	ReactNode	n/a	Optional leading glyph (12px box; currentColor).
dot	StatusKind	n/a	Optional leading status dot, on the shared NockerlStatusDot semantic ladder.
kbd	string[]	n/a	Optional trailing keyboard hint(s), rendered as real NockerlKbd keycaps.
onSelect	(() => void) | undefined	n/a	Makes the segment a real button. Omitted = a plain informational span.
ariaLabel	string	n/a	Accessible name override (defaults to the label + kbd hint).