ConsolePanel

Tapped telemetry channel — an instrument channel-strip header with a square status LED, a line-numbered log body, and a blinking block cursor under a scanline field.

● LIVE

NET // STDOUTRX // 0x4A2

AUTH HANDSHAKE OK

ICE LAYER BYPASSED

DAEMON UPLOAD :: VERIFIED

SUBNET TRACE ONLINE

"use client";import { ConsolePanel } from "@/registry/okibi/ui/console-panel";export default function ConsolePanelDemo() {  return (    <ConsolePanel      title="NET // STDOUT"      index="RX // 0x4A2"      status="online"      className="max-w-md"      lines={[        "AUTH HANDSHAKE OK",        "ICE LAYER BYPASSED",        "DAEMON UPLOAD :: VERIFIED",        "SUBNET TRACE ONLINE",      ]}    />  );}

npx shadcn@latest add https://okibi.cndr.dev/r/console-panel.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/console-panel.json

Add the okibi building blocks it composes: console-surface.

Copy the source from the Code tab above into components/ui/console-panel.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { ConsolePanel } from "@/components/ui/console-panel"

<ConsolePanel
  title="CONSOLE // STDOUT"
  index="RX // 0x4A2"
  status="online"
  lines={["> boot relay", "> link established"]}
  prompt="_"
/>

Examples

Statuses

The status prop drives the channel-strip LED — online, warn, error, or idle — each with its own color.

● LIVE

NET // STDOUTRX // 0x4A2

AUTH HANDSHAKE OK

SUBNET TRACE ONLINE

FLUX // MONITORRX // 0x4A3

FLUX SURGE :: 112%

THROTTLE ENGAGED

UPLINK // STDERRRX // 0x4A4

PACKET LOSS :: 64%

SIGNAL LOCK FAILED

CORE // STDINRX // 0x4A5

CHANNEL PARKED

AWAITING UPLINK

import { ConsolePanel } from "@/registry/okibi/ui/console-panel";export default function StatusDemo() {  return (    <div className="w-full max-w-md space-y-4">      <ConsolePanel        title="NET // STDOUT"        index="RX // 0x4A2"        status="online"        lines={["AUTH HANDSHAKE OK", "SUBNET TRACE ONLINE"]}      />      <ConsolePanel        title="FLUX // MONITOR"        index="RX // 0x4A3"        status="warn"        lines={["FLUX SURGE :: 112%", "THROTTLE ENGAGED"]}      />      <ConsolePanel        title="UPLINK // STDERR"        index="RX // 0x4A4"        status="error"        lines={["PACKET LOSS :: 64%", "SIGNAL LOCK FAILED"]}      />      <ConsolePanel        title="CORE // STDIN"        index="RX // 0x4A5"        status="idle"        lines={["CHANNEL PARKED", "AWAITING UPLINK"]}      />    </div>  );}

Plain

Strip the chrome with lineNumbers={false} and scanlines={false}, set a custom prompt, and pass raw children instead of a log array.

● LIVE

SHELL // TTYPID // 0x1F0

no gutter. no scanlines. raw stdout only.

import { ConsolePanel } from "@/registry/okibi/ui/console-panel";export default function ConsolePanelPlainDemo() {  return (    <ConsolePanel      title="SHELL // TTY"      index="PID // 0x1F0"      status="idle"      prompt="_"      lineNumbers={false}      scanlines={false}      className="max-w-md"    >      <div className="flex gap-2">        <span aria-hidden="true" className="shrink-0 select-none pr-1 text-muted-foreground/70">          {">"}        </span>        <span className="min-w-0 break-words text-muted-foreground">          no gutter. no scanlines. raw stdout only.        </span>      </div>    </ConsolePanel>  );}

API Reference

Prop	Type	Default	Description
`title`	`string`	–	Mono header title on the leading edge.
`index`	`string`	–	Mono index annotation on the header's trailing edge.
`status`	`"online" \| "warn" \| "error" \| "idle"`	`"online"`	Channel state — drives the status LED.
`lines`	`string[]`	–	Output rows against the line-number gutter.
`prompt`	`string`	`█`	Block-cursor glyph for the prompt line.
`lineNumbers`	`boolean`	`true`	Render the left line-number gutter.
`scanlines`	`boolean`	`true`	Overlay the faint scanline texture.

Accessibility

The status block is wrapped in role='status' with aria-live='polite', and an sr-only "Status: ONLINE/WARN/ERROR/IDLE" string announces channel-state changes.
The square status LED, the line-number gutter glyphs, the blinking prompt cursor and the scanline overlay are all aria-hidden decoration — the status word is the perceivable signal.
The flicker, cursor stutter and scanline drift are pure CSS (animate-blink-stutter / animate-scan) and are gated globally by prefers-reduced-motion.
title and index are visual mono annotations only; if the panel needs an accessible name, label it from your own page context.
Body content comes from the lines array (or children); keep each line a short, self-contained log atom so it reads cleanly in order.

Guidelines

Treat it as a tapped telemetry channel — a log body closed by a live prompt, not a draggable desktop window.
Drive the LED and status word from real channel state via status, so "ONLINE/WARN/ERROR/IDLE" stays truthful.
Toggle lineNumbers and scanlines off for a plainer surface, or compose richer rows through children.

Don't

Do not encode meaning in the LED color alone — the adjacent status word is what assistive tech reads.
Do not paste essay-length, unbroken strings into lines; the gutter aligns short rows, not paragraphs.

ConsolePanel

On this page