Mike Swanson
43a9432b81
All checks were successful
React + Vite + TypeScript SPA: scaffold, operations-terminal design system, Bearer-token auth, and the Machines view. - Design system: OKLCH-tinted dark theme (ink-slate + signal-cyan), Hanken Grotesk + JetBrains Mono, status-color language (online/offline/granted/pending/denied/not_required), motion with prefers-reduced-motion honored. - Auth: token in sessionStorage via ref (never React state), protected routes, 401 session teardown, admin-gated per-agent-key UI. - Machines view: data table (sticky header, keyboard-activated rows, skeleton loading, actionable empty/error states), non-blocking detail drawer, delete confirm, admin key management with copy-once reveal. - UI primitives: Modal (focus trap + inert + portal + dialogStack), Drawer, Table, Badge/StatusDot, toast, states. - Typed API client normalizing the two error-envelope shapes. Passed Code Review (no blockers), impeccable critique-and-polish, and local gates (tsc/lint/build green). Dev-only Vite proxy to :3002. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
26 lines
702 B
TypeScript
26 lines
702 B
TypeScript
import type { ReactNode } from "react";
|
|
import type { StatusTone } from "./status";
|
|
import { StatusDot } from "./StatusDot";
|
|
|
|
type BadgeTone = StatusTone | "accent";
|
|
|
|
interface BadgeProps {
|
|
tone?: BadgeTone;
|
|
/** Render a leading status dot inside the badge. */
|
|
dot?: boolean;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* A pill label using the status vocabulary. With `dot`, pairs the label with a
|
|
* matching StatusDot so the dot+label convention reads consistently.
|
|
*/
|
|
export function Badge({ tone = "neutral", dot = false, children }: BadgeProps) {
|
|
return (
|
|
<span className={`badge badge--${tone}`}>
|
|
{dot && tone !== "accent" && <StatusDot tone={tone} />}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|