Terminal
StableA dark terminal window with sample scan output: usage bars, a context cost and a verdict per item, printed line by line.
Shows what a scan of a repo’s agents and skills could print: how many are used, as bars and words, what their descriptions cost on every turn, and a verdict for four of them. The output is fixed SAMPLE data from home/content.ts, and the title bar says “sample output”; the only prop is className. The panel is dark in both themes.
Updated View source
Sample scan
import { Terminal } from '@rchursin/home/Terminal'
/** Sample output of a scan, always on a dark panel. Wide lines scroll inside the window, not the page. */export default function TerminalScan() { return <Terminal className="w-full max-w-2xl" />}Usage
import { Terminal } from '@rchursin/home/Terminal'<Terminal className="w-full max-w-2xl" />API
Terminal props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes on the <figure>, e.g. a width. The output itself is not configurable. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | Focuses the output, which is a scrollable <pre>. |
| Left arrowRight arrow | Scroll long lines sideways while the output has focus (on narrow screens). |
- It is a <figure>; the title bar “~/your-repo · sample output” is its <figcaption>, so the sample label is part of its name. It never wraps; under 380 pixels it shortens to “sample output”.
- The output is real text in <pre><code>, so screen readers read every line. The bars are aria-hidden; the words next to them (“3 of 12 used”) say the same thing.
- The <pre> has tabIndex={0} so keyboard users can reach it and scroll it sideways on small screens. Its focus ring is drawn inside the panel, in white at 70%, so the rounded frame never clips it.
- Verdicts are words (KEEP, FIX, MERGE, CUT): KEEP is a solid box and the rest are outlined, so nothing depends on colour.
- Lines fade in only when motion is allowed, and the cursor blinks four times, then stops. With reduced motion everything is there at once.
Guidelines
Do
- Place it next to the command people would run (a CommandLine).
- Keep “sample output” in the title bar while the numbers are made up.
Don’t
- Don’t present the sample numbers as real results.
- Don’t restyle it to follow the light theme; it reads as a terminal because it stays dark.
In use
Related
- Command lineA one-line shell command with a $ prompt and a Copy command button.
- ReceiptA paper receipt for one agent task: torn edges, dotted leaders, a total, and a FIX stamp that lands.
- One CommandA developer-first home page: one command to copy, a terminal that types out the scan, a sample report and pricing.
- Code blockHighlighted code in five grey roles, with line numbers, picked-out lines, a Wrap toggle, Copy, and long files folded.
Source
The component’s own files, exactly as they run on this site.
/** * Terminal window showing the output of `npx rchursin scan` on a SAMPLE repo. * Lines fade in one by one (only when the visitor allows motion). Bars are drawn * with elements, not block characters, so they line up in any font. */import type { CSSProperties, ReactNode } from "react"import { cx } from "../components/cx"import { brand, ledger, sample } from "./content"
function Line({ i, children, className }: { i: number; children?: ReactNode; className?: string }) { return ( <span className={cx("fx-reveal-line block min-h-[1.6em]", className)} style={{ "--i": i } as CSSProperties} > {children} </span> )}