feat(ui): port dashboard components to react

src/lib/ui/components/Badge.tsx

@@ -0,0 +1,11 @@
+import type { UiSeverity } from "../types";
+import { StatusBadge } from "./StatusBadge";
+
+export interface BadgeProps {
+  label: string;
+  severity?: UiSeverity;
+}
+
+export function Badge({ label, severity = "neutral" }: BadgeProps) {
+  return <StatusBadge label={label} severity={severity} />;
+}

src/lib/ui/components/Button.tsx

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes } from "react";
+import { IconGlyph } from "./IconGlyph";
+
+export interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  label: string;
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "default" | "compact";
+  icon?: string;
+  loading?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+export function Button({
+  label,
+  variant = "primary",
+  size = "default",
+  icon,
+  disabled = false,
+  loading = false,
+  type = "button",
+  className = "",
+  ...buttonProps
+}: ButtonProps) {
+  return (
+    <button
+      {...buttonProps}
+      className={className ? `ui-button ${className} ` : "ui-button "}
+      data-variant={variant}
+      data-size={size}
+      data-loading={loading}
+      disabled={disabled}
+      type={type}
+    >
+      {icon ? <IconGlyph name={icon} size="sm" /> : null}
+      <span>{loading ? "Loading" : label}</span>
+    </button>
+  );
+}

src/lib/ui/components/CornerBracketFrame.tsx

@@ -0,0 +1,26 @@
+export interface CornerBracketFrameProps {
+  density?: "regular" | "tight";
+  size?: "sm" | "md" | "lg";
+  tone?: "neutral" | "accent" | "danger";
+}
+
+export function CornerBracketFrame({
+  density = "regular",
+  size = "md",
+  tone = "neutral",
+}: CornerBracketFrameProps) {
+  return (
+    <div
+      className="corner-bracket-frame"
+      data-density={density}
+      data-size={size}
+      data-tone={tone}
+      aria-hidden="true"
+    >
+      <span data-corner="top-left" />
+      <span data-corner="top-right" />
+      <span data-corner="bottom-left" />
+      <span data-corner="bottom-right" />
+    </div>
+  );
+}

src/lib/ui/components/DashboardFrame.tsx

@@ -0,0 +1,49 @@
+import { useId } from "react";
+import type { UiDashboardPreview } from "../types";
+import { ModuleCard } from "./ModuleCard";
+import { ServicePanel } from "./ServicePanel";
+import { StatusStrip } from "./StatusStrip";
+import { TelemetryGrid } from "./TelemetryGrid";
+import "./styles.css";
+
+export interface DashboardFrameProps {
+  dashboard: UiDashboardPreview;
+  titleId?: string;
+}
+
+export function DashboardFrame({ dashboard, titleId }: DashboardFrameProps) {
+  const generatedTitleId = useId();
+  const resolvedTitleId = titleId || `${generatedTitleId}-title`;
+
+  return (
+    <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
+      <header className="dashboard-frame__header">
+        <div>
+          {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}
+          <h1 id={resolvedTitleId}>{dashboard.title}</h1>
+          {dashboard.subtitle ? <span>{dashboard.subtitle}</span> : null}
+        </div>
+        {dashboard.modules.length ? (
+          <div className="dashboard-frame__modules">
+            {dashboard.modules.map((module) => (
+              <ModuleCard key={module.id} module={module} />
+            ))}
+          </div>
+        ) : null}
+      </header>
+
+      <TelemetryGrid cards={dashboard.telemetry} />
+
+      <section className="dashboard-frame__panels" aria-label="Service groups">
+        {dashboard.serviceGroups.map((group) => (
+          <ServicePanel key={group.id} group={group} />
+        ))}
+      </section>
+
+      <StatusStrip
+        id={dashboard.statusStripId}
+        items={dashboard.statusItems}
+      />
+    </main>
+  );
+}

src/lib/ui/components/DashboardHeader.tsx

@@ -0,0 +1,30 @@
+import { useId } from "react";
+import type { UiModuleBlock } from "../types";
+import { ModuleCard } from "./ModuleCard";
+
+export interface DashboardHeaderProps {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  module?: UiModuleBlock;
+}
+
+export function DashboardHeader({
+  title,
+  subtitle,
+  eyebrow,
+  module,
+}: DashboardHeaderProps) {
+  const titleId = useId();
+
+  return (
+    <header className="dashboard-header" aria-labelledby={titleId}>
+      <div>
+        {eyebrow ? <p>{eyebrow}</p> : null}
+        <h1 id={titleId}>{title}</h1>
+        {subtitle ? <span>{subtitle}</span> : null}
+      </div>
+      {module ? <ModuleCard module={module} /> : null}
+    </header>
+  );
+}

src/lib/ui/components/DiagonalStripeField.tsx

@@ -0,0 +1,24 @@
+export interface DiagonalStripeFieldProps {
+  density?: "open" | "regular" | "tight";
+  direction?: "forward" | "backward";
+  size?: "sm" | "md" | "lg";
+  tone?: "neutral" | "accent" | "warning" | "danger";
+}
+
+export function DiagonalStripeField({
+  density = "regular",
+  direction = "forward",
+  size = "md",
+  tone = "accent",
+}: DiagonalStripeFieldProps) {
+  return (
+    <div
+      className="diagonal-stripe-field"
+      data-density={density}
+      data-direction={direction}
+      data-size={size}
+      data-tone={tone}
+      aria-hidden="true"
+    />
+  );
+}

src/lib/ui/components/FooterCell.tsx

@@ -0,0 +1,42 @@
+import type { UiStatusItem } from "../types";
+
+export interface FooterCellProps {
+  item: UiStatusItem;
+}
+
+export function FooterCell({ item }: FooterCellProps) {
+  const target = item.link?.external ? "_blank" : undefined;
+  const rel = item.link?.external ? "noreferrer" : undefined;
+  const content = (
+    <>
+      <span>{item.label}</span>
+      <strong>{item.value}</strong>
+    </>
+  );
+
+  if (item.link) {
+    return (
+      <a
+        className="footer-cell"
+        data-severity={item.severity || "neutral"}
+        data-model-id={item.id}
+        href={item.link.href}
+        target={target}
+        rel={rel}
+        aria-label={item.link.label}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div
+      className="footer-cell"
+      data-severity={item.severity || "neutral"}
+      data-model-id={item.id}
+    >
+      {content}
+    </div>
+  );
+}

src/lib/ui/components/FooterStatusCell.tsx

@@ -0,0 +1,6 @@
+import type { UiStatusItem } from "../types";
+import { FooterCell } from "./FooterCell";
+
+export function FooterStatusCell({ item }: { item: UiStatusItem }) {
+  return <FooterCell item={item} />;
+}

src/lib/ui/components/GridFrame.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+
+export interface GridFrameProps extends PropsWithChildren {
+  density?: "compact" | "dense";
+}
+
+export function GridFrame({ children, density = "dense" }: GridFrameProps) {
+  return (
+    <section className="grid-frame" data-density={density}>
+      {children}
+    </section>
+  );
+}

src/lib/ui/components/IconButton.tsx

@@ -0,0 +1,33 @@
+import type { ButtonHTMLAttributes } from "react";
+import { IconGlyph } from "./IconGlyph";
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  icon: string;
+  label: string;
+  active?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+export function IconButton({
+  icon,
+  label,
+  active = false,
+  disabled = false,
+  type = "button",
+  className = "",
+  ...buttonProps
+}: IconButtonProps) {
+  return (
+    <button
+      {...buttonProps}
+      className={className ? `icon-button ${className} ` : "icon-button "}
+      aria-label={label}
+      data-active={active}
+      disabled={disabled}
+      type={type}
+    >
+      <IconGlyph name={icon} size="sm" />
+    </button>
+  );
+}

src/lib/ui/components/IconGlyph.tsx

@@ -0,0 +1,21 @@
+import { Icon } from "@iconify/react";
+
+export interface IconGlyphProps {
+  name?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function IconGlyph({ name, label, size = "md" }: IconGlyphProps) {
+  return (
+    <span
+      className="icon-glyph"
+      data-size={size}
+      data-icon-name={name}
+      aria-label={label}
+      aria-hidden={label ? undefined : "true"}
+    >
+      {name ? <Icon icon={name} /> : null}
+    </span>
+  );
+}

src/lib/ui/components/LineChart.tsx

@@ -0,0 +1,27 @@
+import "uplot/dist/uPlot.min.css";
+import type { UiSeverity } from "../types";
+
+export interface LineChartProps {
+  values?: number[];
+  severity?: UiSeverity;
+  label?: string;
+}
+
+export function LineChart({
+  values = [],
+  severity = "neutral",
+  label = "Telemetry trend",
+}: LineChartProps) {
+  return (
+    <div
+      className="line-chart"
+      data-chart-library="uplot"
+      data-severity={severity}
+      data-values={values.join(",")}
+      role="img"
+      aria-label={label}
+    >
+      <div className="line-chart__canvas" aria-hidden="true" />
+    </div>
+  );
+}

src/lib/ui/components/ModuleCard.tsx

@@ -0,0 +1,32 @@
+import { useId } from "react";
+import type { UiModuleBlock } from "../types";
+import { IconGlyph } from "./IconGlyph";
+
+export interface ModuleCardProps {
+  module: UiModuleBlock;
+}
+
+export function ModuleCard({ module }: ModuleCardProps) {
+  const generatedId = useId();
+  const titleId = `${generatedId}-title`;
+  const ariaLabel = module.title ? undefined : module.label || module.id;
+
+  return (
+    <aside
+      className="module-card"
+      data-severity={module.severity || "neutral"}
+      data-model-id={module.id}
+      aria-labelledby={module.title ? titleId : undefined}
+      aria-label={ariaLabel}
+    >
+      <div>
+        {module.title ? <h2 id={titleId}>{module.title}</h2> : null}
+        {module.value ? <strong>{module.value}</strong> : null}
+        {module.detail || module.label ? (
+          <p>{module.detail || module.label}</p>
+        ) : null}
+      </div>
+      {module.icon ? <IconGlyph name={module.icon} size="lg" /> : null}
+    </aside>
+  );
+}

src/lib/ui/components/Panel.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from "react";
+
+export interface PanelProps extends PropsWithChildren {
+  title?: string;
+  density?: "compact" | "dense";
+}
+
+export function Panel({ title, density = "dense", children }: PanelProps) {
+  return (
+    <section className="panel" data-density={density}>
+      {title ? (
+        <header className="panel__header">
+          <h2>{title}</h2>
+        </header>
+      ) : null}
+      <div className="panel__body">{children}</div>
+    </section>
+  );
+}

src/lib/ui/components/ProgressMeter.tsx

@@ -0,0 +1,34 @@
+import type { CSSProperties } from "react";
+import { clampPercent } from "../format";
+import type { UiSeverity } from "../types";
+
+export interface ProgressMeterProps {
+  value?: number;
+  severity?: UiSeverity;
+  label?: string;
+}
+
+export function ProgressMeter({
+  value,
+  severity = "neutral",
+  label = "Progress",
+}: ProgressMeterProps) {
+  const progress = value === undefined ? null : clampPercent(value);
+
+  return (
+    <div
+      className="progress-meter"
+      data-severity={severity}
+      role="meter"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={progress ?? undefined}
+      data-empty={progress === null}
+    >
+      {progress !== null ? (
+        <span style={{ "--meter-progress": `${progress}%` } as CSSProperties} />
+      ) : null}
+    </div>
+  );
+}

src/lib/ui/components/ScanlineField.tsx

@@ -0,0 +1,21 @@
+export interface ScanlineFieldProps {
+  intensity?: "soft" | "medium" | "hard";
+  size?: "sm" | "md" | "lg";
+  tone?: "neutral" | "accent" | "warning";
+}
+
+export function ScanlineField({
+  intensity = "medium",
+  size = "md",
+  tone = "neutral",
+}: ScanlineFieldProps) {
+  return (
+    <div
+      className="scanline-field"
+      data-intensity={intensity}
+      data-size={size}
+      data-tone={tone}
+      aria-hidden="true"
+    />
+  );
+}

src/lib/ui/components/Separator.tsx

@@ -0,0 +1,19 @@
+export interface SeparatorProps {
+  orientation?: "horizontal" | "vertical";
+  dense?: boolean;
+}
+
+export function Separator({
+  orientation = "horizontal",
+  dense = false,
+}: SeparatorProps) {
+  return (
+    <div
+      className="separator"
+      data-orientation={orientation}
+      data-dense={dense}
+      role="separator"
+      aria-orientation={orientation}
+    />
+  );
+}

src/lib/ui/components/ServiceGroupPanel.tsx

@@ -0,0 +1,6 @@
+import type { UiServiceGroup } from "../types";
+import { ServicePanel } from "./ServicePanel";
+
+export function ServiceGroupPanel({ group }: { group: UiServiceGroup }) {
+  return <ServicePanel group={group} />;
+}

src/lib/ui/components/ServicePanel.tsx

@@ -0,0 +1,27 @@
+import type { UiServiceGroup } from "../types";
+import { Panel } from "./Panel";
+import { ServiceRow } from "./ServiceRow";
+import { StatusStrip } from "./StatusStrip";
+
+export interface ServicePanelProps {
+  group: UiServiceGroup;
+}
+
+export function ServicePanel({ group }: ServicePanelProps) {
+  return (
+    <div
+      className="service-panel"
+      data-layout={group.layout || "list"}
+      data-model-id={group.id}
+    >
+      <Panel title={group.title}>
+        {group.summary?.length ? (
+          <StatusStrip id={`${group.id}:summary`} items={group.summary} compact />
+        ) : null}
+        {group.services.map((service) => (
+          <ServiceRow key={service.id} service={service} />
+        ))}
+      </Panel>
+    </div>
+  );
+}

src/lib/ui/components/ServiceRow.tsx

@@ -0,0 +1,50 @@
+import type { UiServiceRow } from "../types";
+import { IconGlyph } from "./IconGlyph";
+import { StatusBadge } from "./StatusBadge";
+
+export interface ServiceRowProps {
+  service: UiServiceRow;
+}
+
+export function ServiceRow({ service }: ServiceRowProps) {
+  const target = service.link?.external ? "_blank" : undefined;
+  const rel = service.link?.external ? "noreferrer" : undefined;
+  const content = (
+    <>
+      <IconGlyph name={service.icon} />
+      <div className="service-row__main">
+        <h3>{service.label}</h3>
+        <p>{service.description}</p>
+      </div>
+      {service.detail ? (
+        <StatusBadge label={service.detail} severity={service.severity} />
+      ) : null}
+    </>
+  );
+
+  if (service.link) {
+    return (
+      <a
+        className="service-row"
+        data-severity={service.severity}
+        data-model-id={service.id}
+        href={service.link.href}
+        target={target}
+        rel={rel}
+        aria-label={service.link.label}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <article
+      className="service-row"
+      data-severity={service.severity}
+      data-model-id={service.id}
+    >
+      {content}
+    </article>
+  );
+}

src/lib/ui/components/SignalTrace.tsx

@@ -0,0 +1,26 @@
+export interface SignalTraceProps {
+  density?: "regular" | "tight";
+  orientation?: "horizontal" | "vertical";
+  tone?: "neutral" | "accent" | "warning";
+}
+
+export function SignalTrace({
+  density = "regular",
+  orientation = "horizontal",
+  tone = "accent",
+}: SignalTraceProps) {
+  return (
+    <div
+      className="signal-trace"
+      data-density={density}
+      data-orientation={orientation}
+      data-tone={tone}
+      aria-hidden="true"
+    >
+      <span className="signal-trace__rail" />
+      <span className="signal-trace__node" data-node="start" />
+      <span className="signal-trace__node" data-node="middle" />
+      <span className="signal-trace__node" data-node="end" />
+    </div>
+  );
+}

src/lib/ui/components/Sparkline.tsx

@@ -0,0 +1,37 @@
+import type { UiSeverity } from "../types";
+
+export interface SparklineProps {
+  values?: number[];
+  severity?: UiSeverity;
+}
+
+export function Sparkline({
+  values = [],
+  severity = "neutral",
+}: SparklineProps) {
+  const points = toPoints(values);
+
+  return (
+    <svg
+      className="sparkline"
+      data-severity={severity}
+      viewBox="0 0 100 24"
+      aria-hidden="true"
+    >
+      {points ? <polyline points={points} /> : null}
+    </svg>
+  );
+}
+
+function toPoints(values: number[]): string {
+  if (values.length === 0) return "";
+  const max = Math.max(...values, 1);
+  const step = values.length > 1 ? 100 / (values.length - 1) : 100;
+  return values
+    .map((value, index) => {
+      const x = index * step;
+      const y = 24 - (Math.max(0, value) / max) * 22;
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(" ");
+}

src/lib/ui/components/StatusBadge.tsx

@@ -0,0 +1,14 @@
+import type { UiSeverity } from "../types";
+
+export interface StatusBadgeProps {
+  label: string;
+  severity?: UiSeverity;
+}
+
+export function StatusBadge({ label, severity = "neutral" }: StatusBadgeProps) {
+  return (
+    <span className="status-badge" data-severity={severity}>
+      {label}
+    </span>
+  );
+}

src/lib/ui/components/StatusStrip.tsx

@@ -0,0 +1,18 @@
+import type { UiStatusItem } from "../types";
+import { FooterCell } from "./FooterCell";
+
+export interface StatusStripProps {
+  id?: string;
+  items: UiStatusItem[];
+  compact?: boolean;
+}
+
+export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
+  return (
+    <section className="status-strip" data-compact={compact} data-model-id={id}>
+      {items.map((item) => (
+        <FooterCell key={item.id} item={item} />
+      ))}
+    </section>
+  );
+}

src/lib/ui/components/SystemState.tsx

@@ -0,0 +1,26 @@
+import type { UiSeverity } from "../types";
+import { IconGlyph } from "./IconGlyph";
+
+export interface SystemStateProps {
+  title: string;
+  detail?: string;
+  icon?: string;
+  severity?: UiSeverity;
+}
+
+export function SystemState({
+  title,
+  detail,
+  icon = "mdi:information-outline",
+  severity = "neutral",
+}: SystemStateProps) {
+  return (
+    <section className="system-state" data-severity={severity}>
+      <IconGlyph name={icon} size="lg" />
+      <div>
+        <h2>{title}</h2>
+        {detail ? <p>{detail}</p> : null}
+      </div>
+    </section>
+  );
+}

src/lib/ui/components/TelemetryCard.tsx

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+import { clampPercent, formatMetricValue } from "../format";
+import type { UiTelemetryCard } from "../types";
+import { IconGlyph } from "./IconGlyph";
+import { LineChart } from "./LineChart";
+
+export interface TelemetryCardProps {
+  card: UiTelemetryCard;
+}
+
+export function TelemetryCard({ card }: TelemetryCardProps) {
+  const progress = resolveProgress(card);
+  const value = formatMetricValue(card.value);
+
+  return (
+    <article
+      className="telemetry-card"
+      data-severity={card.severity}
+      data-model-id={card.id}
+    >
+      <header>
+        {card.icon ? <IconGlyph name={card.icon} size="sm" /> : null}
+        <h3>{card.label}</h3>
+      </header>
+      <strong>{value}</strong>
+      {progress !== null ? (
+        <div className="telemetry-card__bar" aria-hidden="true">
+          <span style={{ "--metric-progress": `${progress}%` } as CSSProperties} />
+        </div>
+      ) : null}
+      {card.sparkline?.length ? (
+        <LineChart
+          values={card.sparkline}
+          severity={card.severity}
+          label={`${card.label} trend`}
+        />
+      ) : null}
+      {card.detail || card.description ? (
+        <p>{card.detail || card.description}</p>
+      ) : null}
+    </article>
+  );
+}
+
+function resolveProgress(card: UiTelemetryCard): number | null {
+  if (typeof card.progress === "number") return clampPercent(card.progress);
+  if (card.value.kind !== "percent") return null;
+
+  const progress = Number(card.value.value);
+  return Number.isFinite(progress) ? clampPercent(progress) : null;
+}

src/lib/ui/components/TelemetryGrid.tsx

@@ -0,0 +1,16 @@
+import type { UiTelemetryCard } from "../types";
+import { TelemetryCard } from "./TelemetryCard";
+
+export interface TelemetryGridProps {
+  cards: UiTelemetryCard[];
+}
+
+export function TelemetryGrid({ cards }: TelemetryGridProps) {
+  return (
+    <section className="telemetry-grid" aria-label="Telemetry">
+      {cards.map((card) => (
+        <TelemetryCard key={card.id} card={card} />
+      ))}
+    </section>
+  );
+}

src/lib/ui/components/TelemetryStrip.tsx

@@ -0,0 +1,6 @@
+import type { UiTelemetryCard } from "../types";
+import { TelemetryGrid } from "./TelemetryGrid";
+
+export function TelemetryStrip({ cards }: { cards: UiTelemetryCard[] }) {
+  return <TelemetryGrid cards={cards} />;
+}

src/lib/ui/components/WeatherModule.tsx

@@ -0,0 +1,6 @@
+import type { UiModuleBlock } from "../types";
+import { ModuleCard } from "./ModuleCard";
+
+export function WeatherModule({ module }: { module: UiModuleBlock }) {
+  return <ModuleCard module={module} />;
+}

src/lib/ui/components/render.test.ts

@@ -1,153 +0,0 @@
-import { render } from "svelte/server";
-import { describe, expect, test } from "vitest";
-import Button from "./Button.svelte";
-import DashboardFrame from "./DashboardFrame.svelte";
-import FooterCell from "./FooterCell.svelte";
-import IconButton from "./IconButton.svelte";
-import ServiceRow from "./ServiceRow.svelte";
-import TelemetryCard from "./TelemetryCard.svelte";
-import { dashboardPreviewFixtures } from "../fixtures";
-
-describe("dashboard UI components", () => {
-  test("renders the primary generic dashboard fixture", () => {
-    const { body } = render(DashboardFrame, {
-      props: {
-        dashboard: dashboardPreviewFixtures.primary,
-      },
-    });
-
-    expect(body).toContain("Operations Console");
-    expect(body).toContain("Core Throughput");
-    expect(body).toContain("Queue Workers");
-    expect(body).toContain("data-icon-name=\"mdi:server-network\"");
-    expect(body).toContain("data-severity=\"warning\"");
-    expect(body).not.toContain("dashboard-title");
-  });
-
-  test("renders another generic dashboard fixture through the same component", () => {
-    const { body } = render(DashboardFrame, {
-      props: {
-        dashboard: dashboardPreviewFixtures.secondary,
-      },
-    });
-
-    expect(body).toContain("Support Desk");
-    expect(body).toContain("Response Window");
-    expect(body).toContain("Regional Nodes");
-    expect(body).toContain("data-icon-name=\"mdi:headset\"");
-    expect(body).toContain("data-severity=\"loading\"");
-  });
-
-  test("renders optional service and status links as focusable anchors", () => {
-    const service = render(ServiceRow, {
-      props: {
-        service: {
-          id: "linked-service",
-          label: "Linked Service",
-          description: "Generic linked destination",
-          severity: "ok",
-          detail: "ready",
-          link: { href: "https://example.test/service", external: true },
-        },
-      },
-    });
-    const footer = render(FooterCell, {
-      props: {
-        item: {
-          id: "linked-status",
-          label: "Linked Status",
-          value: "open",
-          severity: "neutral",
-          link: { href: "https://example.test/status" },
-        },
-      },
-    });
-
-    expect(service.body).toContain("<a ");
-    expect(service.body).toContain("href=\"https://example.test/service\"");
-    expect(service.body).toContain("target=\"_blank\"");
-    expect(footer.body).toContain("<a ");
-    expect(footer.body).toContain("href=\"https://example.test/status\"");
-  });
-
-  test("renders stable model IDs on group and status containers", () => {
-    const { body } = render(DashboardFrame, {
-      props: {
-        dashboard: dashboardPreviewFixtures.primary,
-      },
-    });
-
-    expect(body).toContain("data-model-id=\"queue-workers\"");
-    expect(body).toContain("data-model-id=\"dashboard-status\"");
-  });
-
-  test("does not render progress bars for non-percent metrics without explicit progress", () => {
-    const withoutProgress = render(TelemetryCard, {
-      props: {
-        card: {
-          id: "bytes",
-          label: "Bytes Metric",
-          value: { kind: "bytes", value: 2048 },
-          severity: "neutral",
-        },
-      },
-    });
-    const withProgress = render(TelemetryCard, {
-      props: {
-        card: {
-          id: "bytes-with-progress",
-          label: "Bytes With Progress",
-          value: { kind: "bytes", value: 2048 },
-          progress: 42,
-          severity: "neutral",
-        },
-      },
-    });
-
-    expect(withoutProgress.body).not.toContain("telemetry-card__bar");
-    expect(withProgress.body).toContain("--metric-progress: 42%");
-  });
-
-  test("renders telemetry trends through the uPlot chart surface", () => {
-    const { body } = render(TelemetryCard, {
-      props: {
-        card: {
-          id: "trend-card",
-          label: "Trend Card",
-          value: { kind: "percent", value: 64 },
-          sparkline: [18, 24, 64],
-          severity: "ok",
-        },
-      },
-    });
-
-    expect(body).toContain('data-chart-library="uplot"');
-  });
-
-  test("base button controls forward native attributes", () => {
-    const button = render(Button, {
-      props: {
-        label: "Refresh",
-        id: "refresh-action",
-        class: "custom-action",
-        "aria-controls": "refresh-target",
-      },
-    });
-    const iconButton = render(IconButton, {
-      props: {
-        icon: "mdi:refresh",
-        label: "Refresh status",
-        id: "refresh-icon-action",
-        class: "custom-icon-action",
-        "aria-expanded": "false",
-      },
-    });
-
-    expect(button.body).toContain("id=\"refresh-action\"");
-    expect(button.body).toContain("class=\"ui-button custom-action ");
-    expect(button.body).toContain("aria-controls=\"refresh-target\"");
-    expect(iconButton.body).toContain("id=\"refresh-icon-action\"");
-    expect(iconButton.body).toContain("class=\"icon-button custom-icon-action ");
-    expect(iconButton.body).toContain("aria-expanded=\"false\"");
-  });
-});

src/lib/ui/components/render.test.tsx

@@ -0,0 +1,147 @@
+import { renderToString } from "react-dom/server";
+import { describe, expect, test } from "vitest";
+import { Button } from "./Button";
+import { DashboardFrame } from "./DashboardFrame";
+import { FooterCell } from "./FooterCell";
+import { IconButton } from "./IconButton";
+import { ServiceRow } from "./ServiceRow";
+import { TelemetryCard } from "./TelemetryCard";
+import { dashboardPreviewFixtures } from "../fixtures";
+
+describe("dashboard UI components", () => {
+  test("renders the primary generic dashboard fixture", () => {
+    const body = renderToString(
+      <DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
+    );
+
+    expect(body).toContain("Operations Console");
+    expect(body).toContain("Core Throughput");
+    expect(body).toContain("Queue Workers");
+    expect(body).toContain("data-icon-name=\"mdi:server-network\"");
+    expect(body).toContain("data-severity=\"warning\"");
+    expect(body).not.toContain("dashboard-title");
+  });
+
+  test("renders another generic dashboard fixture through the same component", () => {
+    const body = renderToString(
+      <DashboardFrame dashboard={dashboardPreviewFixtures.secondary} />,
+    );
+
+    expect(body).toContain("Support Desk");
+    expect(body).toContain("Response Window");
+    expect(body).toContain("Regional Nodes");
+    expect(body).toContain("data-icon-name=\"mdi:headset\"");
+    expect(body).toContain("data-severity=\"loading\"");
+  });
+
+  test("renders optional service and status links as focusable anchors", () => {
+    const service = renderToString(
+      <ServiceRow
+        service={{
+          id: "linked-service",
+          label: "Linked Service",
+          description: "Generic linked destination",
+          severity: "ok",
+          detail: "ready",
+          link: { href: "https://example.test/service", external: true },
+        }}
+      />,
+    );
+    const footer = renderToString(
+      <FooterCell
+        item={{
+          id: "linked-status",
+          label: "Linked Status",
+          value: "open",
+          severity: "neutral",
+          link: { href: "https://example.test/status" },
+        }}
+      />,
+    );
+
+    expect(service).toContain("<a ");
+    expect(service).toContain("href=\"https://example.test/service\"");
+    expect(service).toContain("target=\"_blank\"");
+    expect(footer).toContain("<a ");
+    expect(footer).toContain("href=\"https://example.test/status\"");
+  });
+
+  test("renders stable model IDs on group and status containers", () => {
+    const body = renderToString(
+      <DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
+    );
+
+    expect(body).toContain("data-model-id=\"queue-workers\"");
+    expect(body).toContain("data-model-id=\"dashboard-status\"");
+  });
+
+  test("does not render progress bars for non-percent metrics without explicit progress", () => {
+    const withoutProgress = renderToString(
+      <TelemetryCard
+        card={{
+          id: "bytes",
+          label: "Bytes Metric",
+          value: { kind: "bytes", value: 2048 },
+          severity: "neutral",
+        }}
+      />,
+    );
+    const withProgress = renderToString(
+      <TelemetryCard
+        card={{
+          id: "bytes-with-progress",
+          label: "Bytes With Progress",
+          value: { kind: "bytes", value: 2048 },
+          progress: 42,
+          severity: "neutral",
+        }}
+      />,
+    );
+
+    expect(withoutProgress).not.toContain("telemetry-card__bar");
+    expect(withProgress).toContain("--metric-progress:42%");
+  });
+
+  test("renders telemetry trends through the uPlot chart surface", () => {
+    const body = renderToString(
+      <TelemetryCard
+        card={{
+          id: "trend-card",
+          label: "Trend Card",
+          value: { kind: "percent", value: 64 },
+          sparkline: [18, 24, 64],
+          severity: "ok",
+        }}
+      />,
+    );
+
+    expect(body).toContain('data-chart-library="uplot"');
+  });
+
+  test("base button controls forward native attributes", () => {
+    const button = renderToString(
+      <Button
+        label="Refresh"
+        id="refresh-action"
+        className="custom-action"
+        aria-controls="refresh-target"
+      />,
+    );
+    const iconButton = renderToString(
+      <IconButton
+        icon="mdi:refresh"
+        label="Refresh status"
+        id="refresh-icon-action"
+        className="custom-icon-action"
+        aria-expanded="false"
+      />,
+    );
+
+    expect(button).toContain("id=\"refresh-action\"");
+    expect(button).toContain("class=\"ui-button custom-action ");
+    expect(button).toContain("aria-controls=\"refresh-target\"");
+    expect(iconButton).toContain("id=\"refresh-icon-action\"");
+    expect(iconButton).toContain("class=\"icon-button custom-icon-action ");
+    expect(iconButton).toContain("aria-expanded=\"false\"");
+  });
+});

src/lib/ui/components/styles.css

@@ -0,0 +1,399 @@
+.dashboard-frame {
+  display: grid;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 100vh;
+  gap: 0.36rem;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  padding: clamp(0.42rem, 0.65vw, 0.62rem);
+  background:
+    linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
+    rgba(0, 0, 0, 0.18);
+}
+
+.dashboard-frame__header,
+.dashboard-header {
+  display: grid;
+  gap: 0.5rem;
+  align-items: start;
+  border-bottom: var(--ui-border);
+}
+
+.dashboard-frame__header {
+  grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 0.9fr);
+  min-height: 5.35rem;
+  padding-bottom: 0.34rem;
+}
+
+.dashboard-header {
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding: var(--ui-space-3);
+}
+
+.dashboard-frame__header p,
+.dashboard-frame__header span,
+.dashboard-header p,
+.dashboard-header span,
+.dashboard-frame h1,
+.dashboard-header h1 {
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.dashboard-frame__header p,
+.dashboard-frame__header span,
+.dashboard-header p,
+.dashboard-header span {
+  color: var(--ui-color-muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.dashboard-frame h1,
+.dashboard-header h1 {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-family: var(--ui-font-display);
+  font-size: clamp(2.2rem, 3.3vw, 2.95rem);
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 0.8;
+  white-space: nowrap;
+}
+
+.dashboard-frame__modules {
+  display: grid;
+  grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
+  justify-content: end;
+  gap: 0.5rem;
+}
+
+.dashboard-frame__panels {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-content: start;
+  gap: 0.36rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.dashboard-frame__panels .service-panel[data-layout="grid"] {
+  grid-column: 1 / -1;
+}
+
+.dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.telemetry-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 1px;
+  border: var(--ui-border);
+  background: var(--ui-color-line);
+}
+
+.telemetry-card,
+.module-card,
+.panel,
+.system-state {
+  border: var(--ui-border);
+  background: rgba(3, 4, 3, 0.86);
+  color: var(--ui-color-text);
+}
+
+.telemetry-card {
+  display: grid;
+  min-height: 5.15rem;
+  gap: 0.25rem;
+  padding: 0.45rem 0.55rem 0.42rem;
+}
+
+.telemetry-card header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.telemetry-card h3,
+.telemetry-card p,
+.module-card h2,
+.module-card p,
+.service-row h3,
+.service-row p,
+.panel h2,
+.system-state h2,
+.system-state p {
+  margin: 0;
+}
+
+.telemetry-card h3,
+.service-row h3 {
+  overflow: hidden;
+  font-size: 0.62rem;
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 1.05;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.telemetry-card strong,
+.module-card strong {
+  display: block;
+  font-family: var(--ui-font-display);
+  font-size: clamp(1.55rem, 2.45vw, 2.22rem);
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 0.76;
+  white-space: nowrap;
+}
+
+.telemetry-card p,
+.module-card p,
+.service-row p {
+  overflow: hidden;
+  color: var(--ui-color-muted);
+  font-size: 0.52rem;
+  line-height: 1.08;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.telemetry-card__bar,
+.progress-meter {
+  height: 0.25rem;
+  border: var(--ui-border);
+  background: #030403;
+}
+
+.telemetry-card__bar span,
+.progress-meter span {
+  display: block;
+  width: var(--metric-progress, var(--meter-progress));
+  height: 100%;
+  background: currentColor;
+}
+
+.line-chart {
+  position: relative;
+  min-width: 0;
+  height: 1rem;
+  color: var(--ui-color-accent);
+}
+
+.line-chart__canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.module-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.5rem;
+  align-items: start;
+  min-width: 0;
+  min-height: 4.15rem;
+  padding: 0.5rem;
+}
+
+.module-card h2 {
+  color: var(--ui-color-muted);
+  font-size: 0.56rem;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.service-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.24rem;
+  align-items: center;
+  min-height: 2.02rem;
+  border: 0;
+  border-bottom: var(--ui-border);
+  background: transparent;
+  color: inherit;
+  padding: 0.14rem 0;
+  text-decoration: none;
+}
+
+.service-row__main {
+  min-width: 0;
+}
+
+.status-badge {
+  display: inline-grid;
+  min-height: 1.12rem;
+  align-items: center;
+  border: var(--ui-border);
+  padding: 0 0.3rem;
+  color: var(--ui-color-muted);
+  font-size: 0.55rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.footer-cell {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-height: 1.9rem;
+  align-items: center;
+  background: rgba(2, 3, 2, 0.92);
+  color: inherit;
+  text-decoration: none;
+}
+
+.footer-cell span,
+.footer-cell strong {
+  min-width: 0;
+  padding: 0.34rem 0.52rem;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.status-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 1px;
+  border: var(--ui-border);
+  background: var(--ui-color-line);
+}
+
+.panel {
+  position: relative;
+  min-width: 0;
+  box-shadow: var(--ui-shadow-hard);
+}
+
+.panel__header {
+  padding: 0.42rem 0.55rem 0;
+}
+
+.panel__body {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.42rem 0.55rem 0.55rem;
+}
+
+.service-panel .panel__body {
+  gap: 0;
+  padding-block: 0.24rem 0.42rem;
+}
+
+.ui-button,
+.icon-button {
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  border: var(--ui-border);
+  cursor: pointer;
+}
+
+.ui-button {
+  grid-auto-flow: column;
+  gap: var(--ui-space-2);
+  min-height: 2.5rem;
+  background: var(--ui-color-accent);
+  color: var(--ui-color-canvas);
+  font-size: 0.76rem;
+  font-weight: 850;
+  padding: 0 var(--ui-space-4);
+  text-transform: uppercase;
+}
+
+.icon-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  background: rgba(2, 3, 2, 0.92);
+  color: var(--ui-color-muted);
+  padding: 0;
+}
+
+.icon-glyph {
+  display: inline-grid;
+  width: 1.55rem;
+  height: 1.55rem;
+  place-items: center;
+  border: var(--ui-border);
+  background: #050605;
+  color: currentColor;
+  line-height: 1;
+}
+
+.icon-glyph svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.system-state {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--ui-space-3);
+  align-items: center;
+  padding: var(--ui-space-4);
+}
+
+.grid-frame {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-3);
+}
+
+.separator {
+  background: var(--ui-color-line);
+}
+
+.separator[data-orientation="horizontal"] {
+  width: 100%;
+  height: 1px;
+  margin-block: var(--ui-space-3);
+}
+
+.corner-bracket-frame,
+.diagonal-stripe-field,
+.scanline-field,
+.signal-trace {
+  display: block;
+  min-height: 3rem;
+}
+
+@media (max-width: 1100px) {
+  .telemetry-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 780px) {
+  .dashboard-frame {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .dashboard-frame__header,
+  .dashboard-header,
+  .dashboard-frame__modules,
+  .dashboard-frame__panels {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-frame h1,
+  .dashboard-header h1 {
+    white-space: normal;
+  }
+}
+
+@media (max-width: 700px) {
+  .telemetry-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

src/lib/ui/index.ts

@@ -1,32 +1,32 @@
-export { default as Badge } from "./components/Badge.svelte";
-export { default as Button } from "./components/Button.svelte";
-export { default as CornerBracketFrame } from "./components/CornerBracketFrame.svelte";
-export { default as DashboardHeader } from "./components/DashboardHeader.svelte";
-export { default as DashboardFrame } from "./components/DashboardFrame.svelte";
-export { default as DiagonalStripeField } from "./components/DiagonalStripeField.svelte";
-export { default as FooterCell } from "./components/FooterCell.svelte";
-export { default as FooterStatusCell } from "./components/FooterStatusCell.svelte";
-export { default as GridFrame } from "./components/GridFrame.svelte";
-export { default as IconGlyph } from "./components/IconGlyph.svelte";
-export { default as IconButton } from "./components/IconButton.svelte";
-export { default as LineChart } from "./components/LineChart.svelte";
-export { default as ModuleCard } from "./components/ModuleCard.svelte";
-export { default as Panel } from "./components/Panel.svelte";
-export { default as ProgressMeter } from "./components/ProgressMeter.svelte";
-export { default as Separator } from "./components/Separator.svelte";
-export { default as ServiceGroupPanel } from "./components/ServiceGroupPanel.svelte";
-export { default as ServicePanel } from "./components/ServicePanel.svelte";
-export { default as ServiceRow } from "./components/ServiceRow.svelte";
-export { default as ScanlineField } from "./components/ScanlineField.svelte";
-export { default as SignalTrace } from "./components/SignalTrace.svelte";
-export { default as Sparkline } from "./components/Sparkline.svelte";
-export { default as StatusBadge } from "./components/StatusBadge.svelte";
-export { default as StatusStrip } from "./components/StatusStrip.svelte";
-export { default as SystemState } from "./components/SystemState.svelte";
-export { default as TelemetryCard } from "./components/TelemetryCard.svelte";
-export { default as TelemetryGrid } from "./components/TelemetryGrid.svelte";
-export { default as TelemetryStrip } from "./components/TelemetryStrip.svelte";
-export { default as WeatherModule } from "./components/WeatherModule.svelte";
+export { Badge } from "./components/Badge";
+export { Button } from "./components/Button";
+export { CornerBracketFrame } from "./components/CornerBracketFrame";
+export { DashboardHeader } from "./components/DashboardHeader";
+export { DashboardFrame } from "./components/DashboardFrame";
+export { DiagonalStripeField } from "./components/DiagonalStripeField";
+export { FooterCell } from "./components/FooterCell";
+export { FooterStatusCell } from "./components/FooterStatusCell";
+export { GridFrame } from "./components/GridFrame";
+export { IconGlyph } from "./components/IconGlyph";
+export { IconButton } from "./components/IconButton";
+export { LineChart } from "./components/LineChart";
+export { ModuleCard } from "./components/ModuleCard";
+export { Panel } from "./components/Panel";
+export { ProgressMeter } from "./components/ProgressMeter";
+export { Separator } from "./components/Separator";
+export { ServiceGroupPanel } from "./components/ServiceGroupPanel";
+export { ServicePanel } from "./components/ServicePanel";
+export { ServiceRow } from "./components/ServiceRow";
+export { ScanlineField } from "./components/ScanlineField";
+export { SignalTrace } from "./components/SignalTrace";
+export { Sparkline } from "./components/Sparkline";
+export { StatusBadge } from "./components/StatusBadge";
+export { StatusStrip } from "./components/StatusStrip";
+export { SystemState } from "./components/SystemState";
+export { TelemetryCard } from "./components/TelemetryCard";
+export { TelemetryGrid } from "./components/TelemetryGrid";
+export { TelemetryStrip } from "./components/TelemetryStrip";
+export { WeatherModule } from "./components/WeatherModule";
 export { dashboardPreviewFixtures } from "./fixtures";
 export { dashboardDocumentToUiDashboard } from "./model-renderer";
 export type {