valknarandClaude Sonnet 5
7e1569b94c
Replaces the default shadcn grayscale/Geist look with a deliberate identity built around the product's own subject - a control panel for running scripts and watching their output live: - Type: Bricolage Grotesque for page/card titles (via the existing --font-heading token, used with restraint), IBM Plex Sans for UI body text, IBM Plex Mono for technical data (run IDs, commands, timestamps, status labels) - all self-hosted at build time via next/font/google, no runtime CDN dependency for a self-hosted tool. - Color: a cool graphite ink/paper base with a warm brass signal accent in both themes. The brass tone doubles as the "running" status color, so an active run literally lights the UI up with the brand color. New --status-* tokens give queued/running/succeeded/failed/cancelled/ warn a single source of truth instead of ad-hoc Tailwind color classes. - Structural language: small tracked-out uppercase mono labels mark technical fields (Command, Variables, Triggered by...) consistently; the live-output terminal gets an instrument-bezel frame (header bar + panel) instead of floating loose above the xterm canvas. Layout/IA is unchanged throughout - this is a token- and detail-level pass, not a restructuring. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import type { RunStatus } from "@/lib/db/schema";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const styles: Record<RunStatus, string> = {
|
|
queued: "bg-status-queued/12 text-status-queued",
|
|
running: "bg-status-running/15 text-status-running",
|
|
succeeded: "bg-status-succeeded/12 text-status-succeeded",
|
|
failed: "bg-status-failed/12 text-status-failed",
|
|
cancelled: "bg-status-cancelled/12 text-status-cancelled",
|
|
timed_out: "bg-status-warn/12 text-status-warn",
|
|
interrupted: "bg-status-warn/12 text-status-warn",
|
|
};
|
|
|
|
export const runStatusLabels: Record<RunStatus, string> = {
|
|
queued: "Queued",
|
|
running: "Running",
|
|
succeeded: "Succeeded",
|
|
failed: "Failed",
|
|
cancelled: "Cancelled",
|
|
timed_out: "Timed out",
|
|
interrupted: "Interrupted",
|
|
};
|
|
|
|
export function RunStatusBadge({ status }: { status: RunStatus }) {
|
|
return (
|
|
<Badge
|
|
className={cn(
|
|
"gap-1.5 border-transparent font-mono text-[0.7rem] font-medium tracking-wide uppercase",
|
|
styles[status],
|
|
)}
|
|
variant="outline"
|
|
>
|
|
<span
|
|
className={cn(
|
|
"size-1.5 shrink-0 rounded-full bg-current",
|
|
status === "running" && "animate-pulse",
|
|
)}
|
|
/>
|
|
{runStatusLabels[status]}
|
|
</Badge>
|
|
);
|
|
}
|