@splyntra/dashboard 0.3.0

package/src/components/trace/TraceList.tsx

@@ -0,0 +1,81 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { TraceListItem } from "@/lib/api";
+import { useRouter } from "next/navigation";
+import { Inbox, ChevronRight } from "lucide-react";
+import { Card, EmptyState, StatusPill, RiskBadge, severityFromScore } from "@/components/ui/primitives";
+
+interface TraceListProps {
+  traces: TraceListItem[];
+}
+
+export function TraceList({ traces }: TraceListProps) {
+  const router = useRouter();
+
+  if (traces.length === 0) {
+    return (
+      <Card>
+        <EmptyState icon={Inbox} title="No traces yet">
+          Run an instrumented agent to see traces appear here.
+          <pre className="mt-3 inline-block rounded-lg bg-gray-100 p-3 text-left text-xs dark:bg-gray-800">
+            {`pip install splyntra\npython examples/quickstart.py`}
+          </pre>
+        </EmptyState>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="overflow-hidden">
+      <table className="w-full text-sm">
+        <thead className="border-b border-gray-200 bg-gray-50 text-left dark:border-gray-800 dark:bg-gray-800/50">
+          <tr className="[&>th]:px-4 [&>th]:py-3 [&>th]:font-medium [&>th]:text-gray-500">
+            <th>Trace</th>
+            <th>Agent</th>
+            <th>Status</th>
+            <th className="text-right">Latency</th>
+            <th className="text-right">Tokens</th>
+            <th className="text-right">Cost</th>
+            <th className="text-right">Risk</th>
+            <th className="text-right">Time</th>
+            <th className="w-8" />
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+          {traces.map((trace) => (
+            <tr
+              key={trace.trace_id}
+              onClick={() => router.push(`/traces/${trace.trace_id}`)}
+              className="group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/60"
+            >
+              <td className="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
+                {trace.trace_id.slice(0, 12)}…
+              </td>
+              <td className="px-4 py-3 font-medium">{trace.agent_id}</td>
+              <td className="px-4 py-3">
+                <StatusPill status={trace.status} />
+              </td>
+              <td className="px-4 py-3 text-right tabular-nums text-gray-600 dark:text-gray-400">{trace.latency_ms}ms</td>
+              <td className="px-4 py-3 text-right tabular-nums text-gray-600 dark:text-gray-400">
+                {trace.total_tokens.toLocaleString()}
+              </td>
+              <td className="px-4 py-3 text-right tabular-nums text-gray-600 dark:text-gray-400">
+                ${trace.cost_usd.toFixed(4)}
+              </td>
+              <td className="px-4 py-3 text-right">
+                <RiskBadge score={trace.risk_score} severity={trace.risk_severity || severityFromScore(trace.risk_score)} />
+              </td>
+              <td className="px-4 py-3 text-right text-xs text-gray-500">
+                {new Date(trace.started_at).toLocaleTimeString()}
+              </td>
+              <td className="px-2 text-gray-300 dark:text-gray-600">
+                <ChevronRight className="h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
+}

package/src/components/trace/TraceViewer.test.tsx

@@ -0,0 +1,82 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TraceViewer } from "./TraceViewer";
+import { Trace } from "@/types/trace";
+
+const trace: Trace = {
+  traceId: "tr_8f3abc",
+  agentId: "support_agent",
+  workflowId: "wf_refund",
+  status: "ok",
+  latencyMs: 1200,
+  totalTokens: 340,
+  costUsd: 0.004,
+  riskScore: 72,
+  riskSeverity: "HIGH",
+  detections: [
+    {
+      detector: "secrets",
+      category: "aws_key",
+      severity: "CRITICAL",
+      confidence: 0.95,
+      description: "AWS key in tool input",
+      beta: false,
+    },
+    {
+      detector: "injection",
+      category: "instruction_override",
+      severity: "MEDIUM",
+      confidence: 0.7,
+      description: "instruction override pattern",
+      beta: true,
+    },
+  ],
+  spans: [
+    {
+      spanId: "sp_1",
+      type: "llm_call",
+      name: "plan refund",
+      status: "ok",
+      latencyMs: 220,
+      detections: [],
+      startedAt: new Date(0).toISOString(),
+    },
+    {
+      spanId: "sp_2",
+      type: "tool_call",
+      name: "payments.refund",
+      status: "ok",
+      latencyMs: 680,
+      detections: [],
+      startedAt: new Date(0).toISOString(),
+    },
+  ],
+  startedAt: new Date(0).toISOString(),
+  completedAt: new Date(0).toISOString(),
+  orgId: "org_1",
+  projectId: "proj_1",
+  environment: "development",
+};
+
+describe("TraceViewer (unified trace + risk view)", () => {
+  it("renders the trace id, agent, and risk score together", () => {
+    render(<TraceViewer trace={trace} />);
+    expect(screen.getByText("tr_8f3abc")).toBeInTheDocument();
+    expect(screen.getByText("support_agent")).toBeInTheDocument();
+    // Risk score is surfaced as part of the unified view.
+    expect(screen.getByText(/72/)).toBeInTheDocument();
+  });
+
+  it("renders security detections including the beta injection finding", () => {
+    render(<TraceViewer trace={trace} />);
+    expect(screen.getByText(/AWS key in tool input/)).toBeInTheDocument();
+    expect(screen.getByText(/instruction override pattern/)).toBeInTheDocument();
+  });
+
+  it("renders execution steps for replay", () => {
+    render(<TraceViewer trace={trace} />);
+    expect(screen.getByText("plan refund")).toBeInTheDocument();
+    expect(screen.getByText("payments.refund")).toBeInTheDocument();
+  });
+});

package/src/components/trace/TraceViewer.tsx

@@ -0,0 +1,237 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * TraceViewer - The crown jewel of the dashboard.
+ * Shows execution trace + risk score in one unified view.
+ * Supports agent replay: step-by-step reconstruction of any run.
+ */
+
+"use client";
+
+import { useState } from "react";
+import {
+  Bot,
+  BrainCircuit,
+  Wrench,
+  ArrowRight,
+  CornerDownRight,
+  ChevronDown,
+  ChevronRight,
+  ShieldAlert,
+  Clock,
+  DollarSign,
+  Coins,
+  type LucideIcon,
+} from "lucide-react";
+import { Trace, Span, Detection } from "@/types/trace";
+import { Card, RiskBadge, SeverityBadge, StatusPill } from "@/components/ui/primitives";
+
+interface TraceViewerProps {
+  trace: Trace;
+}
+
+export function TraceViewer({ trace }: TraceViewerProps) {
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <Card className="flex flex-wrap items-center justify-between gap-4 p-4">
+        <div>
+          <div className="flex items-center gap-2">
+            <code className="rounded bg-gray-100 px-1.5 py-0.5 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-300">
+              {trace.traceId}
+            </code>
+            <StatusPill status={trace.status} />
+          </div>
+          <div className="mt-1.5 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+            <Bot className="h-4 w-4 text-gray-400" />
+            <span className="font-medium">{trace.agentId}</span>
+            {trace.workflowId && (
+              <span className="text-gray-400">· workflow: {trace.workflowId}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <Metric icon={Clock} label="Latency" value={`${trace.latencyMs}ms`} />
+          <Metric icon={DollarSign} label="Cost" value={`$${trace.costUsd.toFixed(4)}`} />
+          <Metric icon={Coins} label="Tokens" value={trace.totalTokens.toLocaleString()} />
+          <RiskBadge score={trace.riskScore} severity={trace.riskSeverity} />
+        </div>
+      </Card>
+
+      {/* Detections Panel */}
+      {trace.detections.length > 0 && (
+        <div className="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950/20">
+          <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold text-red-800 dark:text-red-200">
+            <ShieldAlert className="h-4 w-4" />
+            Security Detections ({trace.detections.length})
+          </h3>
+          <div className="space-y-1.5">
+            {trace.detections.map((d, i) => (
+              <DetectionRow key={i} detection={d} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Span Waterfall (Replay View) */}
+      <Card>
+        <div className="flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-800">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Execution Steps (Replay)</h3>
+          <span className="text-xs text-gray-500">{trace.spans.length} steps · click to expand</span>
+        </div>
+        <div className="divide-y divide-gray-100 dark:divide-gray-800">
+          {trace.spans.map((span, idx) => (
+            <SpanRow key={span.spanId} span={span} traceLatency={trace.latencyMs} stepNumber={idx + 1} />
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function SpanRow({ span, traceLatency, stepNumber }: { span: Span; traceLatency: number; stepNumber: number }) {
+  const [expanded, setExpanded] = useState(false);
+  const widthPct = Math.max((span.latencyMs / Math.max(traceLatency, 1)) * 100, 2);
+  const flagged = span.detections.length > 0;
+  const Chevron = expanded ? ChevronDown : ChevronRight;
+
+  return (
+    <div>
+      <div
+        className="flex items-center px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/60 cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <div className="flex w-1/3 items-center gap-2">
+          <span className="w-5 text-xs tabular-nums text-gray-400">{stepNumber}.</span>
+          <SpanTypeIcon type={span.type} />
+          <span className="truncate text-sm font-medium">{span.name}</span>
+          {span.parentSpanId && <CornerDownRight className="h-3 w-3 shrink-0 text-gray-400" />}
+        </div>
+        <div className="flex-1 px-4">
+          <div className="relative h-2 rounded-full bg-gray-100 dark:bg-gray-800">
+            <div
+              className={`h-full rounded-full ${
+                flagged ? "bg-red-400" : span.status === "error" ? "bg-orange-400" : "bg-splyntra-500"
+              }`}
+              style={{ width: `${widthPct}%` }}
+            />
+          </div>
+        </div>
+        <div className="w-20 text-right text-xs tabular-nums text-gray-500">{span.latencyMs}ms</div>
+        {flagged && (
+          <span className="ml-2 inline-flex items-center gap-1 text-xs font-medium text-red-600">
+            <ShieldAlert className="h-3.5 w-3.5" /> flagged
+          </span>
+        )}
+        <Chevron className="ml-2 h-4 w-4 text-gray-400" />
+      </div>
+
+      {/* Expanded detail panel for replay */}
+      {expanded && (
+        <div className="border-t border-dashed border-gray-200 bg-gray-50 px-4 pb-3 dark:border-gray-700 dark:bg-gray-800/40">
+          <div className="grid grid-cols-2 gap-4 py-3 text-xs md:grid-cols-4">
+            <Detail label="Type" value={<span className="font-medium">{span.type}</span>} />
+            <Detail label="Status" value={<StatusPill status={span.status} />} />
+            <Detail label="Duration" value={<span className="font-medium">{span.latencyMs}ms</span>} />
+            <Detail label="Span ID" value={<code className="text-gray-600 dark:text-gray-300">{span.spanId.slice(0, 12)}</code>} />
+          </div>
+
+          {span.tokens && (
+            <div className="mt-1 rounded-lg border border-gray-200 bg-white p-2.5 dark:border-gray-700 dark:bg-gray-900">
+              <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-gray-700 dark:text-gray-300">
+                <BrainCircuit className="h-3.5 w-3.5 text-splyntra-500" /> LLM Usage
+              </div>
+              <div className="grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
+                <div><span className="text-gray-500">Model:</span> <span className="font-mono">{span.tokens.model}</span></div>
+                <div><span className="text-gray-500">Prompt:</span> {span.tokens.promptTokens.toLocaleString()}</div>
+                <div><span className="text-gray-500">Completion:</span> {span.tokens.completionTokens.toLocaleString()}</div>
+                <div><span className="text-gray-500">Cost:</span> ${span.tokens.costUsd.toFixed(5)}</div>
+              </div>
+            </div>
+          )}
+
+          {span.detections.length > 0 && (
+            <div className="mt-2 rounded-lg border border-red-200 bg-red-50 p-2.5 dark:border-red-800 dark:bg-red-900/20">
+              <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-red-700 dark:text-red-300">
+                <ShieldAlert className="h-3.5 w-3.5" /> Security Findings
+              </div>
+              <div className="space-y-1.5">
+                {span.detections.map((d, i) => (
+                  <DetectionRow key={i} detection={d} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {span.input && Object.keys(span.input).length > 0 && <CodeBlock label="Input" value={span.input} />}
+          {span.output && Object.keys(span.output).length > 0 && <CodeBlock label="Output" value={span.output} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Detail({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div>
+      <span className="block text-gray-500">{label}</span>
+      {value}
+    </div>
+  );
+}
+
+function CodeBlock({ label, value }: { label: string; value: Record<string, unknown> }) {
+  return (
+    <div className="mt-2">
+      <div className="mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">{label}</div>
+      <pre className="max-h-32 overflow-auto rounded-lg border border-gray-200 bg-white p-2 text-xs dark:border-gray-700 dark:bg-gray-900">
+        {JSON.stringify(value, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+function DetectionRow({ detection }: { detection: Detection }) {
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <SeverityBadge severity={detection.severity} />
+      <span className="text-gray-700 dark:text-gray-300">{detection.description}</span>
+      <span
+        className={`rounded px-1 text-[10px] font-medium uppercase ${
+          detection.beta
+            ? "bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300"
+            : "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300"
+        }`}
+      >
+        {detection.beta ? "beta" : "reliable"}
+      </span>
+      <span className="ml-auto text-xs tabular-nums text-gray-400">
+        {Math.round(detection.confidence * 100)}% confidence
+      </span>
+    </div>
+  );
+}
+
+function Metric({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string }) {
+  return (
+    <div className="text-center">
+      <div className="flex items-center justify-center gap-1 text-xs text-gray-500">
+        <Icon className="h-3 w-3" />
+        {label}
+      </div>
+      <div className="mt-0.5 text-sm font-semibold tabular-nums">{value}</div>
+    </div>
+  );
+}
+
+const SPAN_ICON: Record<string, LucideIcon> = {
+  agent: Bot,
+  llm_call: BrainCircuit,
+  tool_call: Wrench,
+  step: ArrowRight,
+};
+
+function SpanTypeIcon({ type }: { type: string }) {
+  const Icon = SPAN_ICON[type] || ArrowRight;
+  return <Icon className="h-4 w-4 shrink-0 text-splyntra-500" />;
+}

package/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("[Splyntra] Uncaught error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center">
+          <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-4">
+            <span className="text-red-600 text-xl">!</span>
+          </div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            Something went wrong
+          </h2>
+          <p className="text-sm text-gray-500 mb-4 max-w-md">
+            An unexpected error occurred. Please try again or contact support.
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            className="px-4 py-2 bg-splyntra-500 text-white rounded-md text-sm hover:bg-splyntra-600 transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+export function Skeleton({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`animate-pulse bg-gray-200 dark:bg-gray-800 rounded ${className}`}
+    />
+  );
+}
+
+export function TableSkeleton({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-lg border overflow-hidden">
+      <div className="border-b bg-gray-50 dark:bg-gray-800 px-4 py-3">
+        <div className="flex gap-4">
+          {Array.from({ length: cols }).map((_, i) => (
+            <Skeleton key={i} className="h-4 w-20" />
+          ))}
+        </div>
+      </div>
+      <div className="divide-y">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} className="px-4 py-3 flex gap-4">
+            {Array.from({ length: cols }).map((_, j) => (
+              <Skeleton key={j} className="h-4 w-16" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-lg border p-4">
+      <Skeleton className="h-3 w-20 mb-2" />
+      <Skeleton className="h-7 w-16" />
+    </div>
+  );
+}

package/src/components/ui/primitives.tsx

@@ -0,0 +1,171 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+/**
+ * Shared UI primitives — one source of truth for cards, page headers, badges,
+ * stat tiles, and empty states so every page looks and behaves consistently.
+ */
+
+import { ReactNode } from "react";
+import {
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldQuestion,
+  CheckCircle2,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+// ─── Severity ────────────────────────────────────────────────────────────
+
+export type Severity = "NONE" | "LOW" | "MEDIUM" | "HIGH" | "CRITICAL";
+
+const SEVERITY_STYLES: Record<Severity, string> = {
+  NONE: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300 ring-gray-200 dark:ring-gray-700",
+  LOW: "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300 ring-emerald-200 dark:ring-emerald-900",
+  MEDIUM: "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300 ring-amber-200 dark:ring-amber-900",
+  HIGH: "bg-orange-50 text-orange-700 dark:bg-orange-950/40 dark:text-orange-300 ring-orange-200 dark:ring-orange-900",
+  CRITICAL: "bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300 ring-red-200 dark:ring-red-900",
+};
+
+const SEVERITY_ICON: Record<Severity, LucideIcon> = {
+  NONE: ShieldCheck,
+  LOW: Shield,
+  MEDIUM: ShieldQuestion,
+  HIGH: ShieldAlert,
+  CRITICAL: ShieldAlert,
+};
+
+export function severityFromScore(score: number): Severity {
+  if (score >= 75) return "CRITICAL";
+  if (score >= 50) return "HIGH";
+  if (score >= 25) return "MEDIUM";
+  if (score > 0) return "LOW";
+  return "NONE";
+}
+
+/** Pill showing a risk score + severity, with a shield icon. */
+export function RiskBadge({ score, severity }: { score: number; severity: string }) {
+  const sev = (severity as Severity) in SEVERITY_STYLES ? (severity as Severity) : "NONE";
+  const Icon = SEVERITY_ICON[sev];
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset ${SEVERITY_STYLES[sev]}`}
+      title={`${sev} risk`}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      Risk {score}
+    </span>
+  );
+}
+
+/** Small severity tag (CRITICAL/HIGH/…). */
+export function SeverityBadge({ severity }: { severity: string }) {
+  const sev = (severity as Severity) in SEVERITY_STYLES ? (severity as Severity) : "NONE";
+  return (
+    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide ring-1 ring-inset ${SEVERITY_STYLES[sev]}`}>
+      {sev}
+    </span>
+  );
+}
+
+// ─── Status ──────────────────────────────────────────────────────────────
+
+export function StatusPill({ status }: { status: string }) {
+  const ok = status === "ok" || status === "active";
+  const Icon = ok ? CheckCircle2 : XCircle;
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${
+        ok
+          ? "bg-emerald-50 text-emerald-700 ring-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-900"
+          : "bg-red-50 text-red-700 ring-red-200 dark:bg-red-950/40 dark:text-red-300 dark:ring-red-900"
+      }`}
+    >
+      <Icon className="h-3 w-3" />
+      {status}
+    </span>
+  );
+}
+
+// ─── Layout ──────────────────────────────────────────────────────────────
+
+export function PageHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  action,
+}: {
+  title: string;
+  subtitle?: string;
+  icon?: LucideIcon;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="mb-6 flex items-start justify-between gap-4">
+      <div className="flex items-start gap-3">
+        {Icon && (
+          <div className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-lg bg-splyntra-50 text-splyntra-600 dark:bg-splyntra-900/30 dark:text-splyntra-100">
+            <Icon className="h-5 w-5" />
+          </div>
+        )}
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{title}</h1>
+          {subtitle && <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>}
+        </div>
+      </div>
+      {action}
+    </div>
+  );
+}
+
+export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={`rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function StatCard({
+  label,
+  value,
+  icon: Icon,
+  accent = "text-gray-900 dark:text-white",
+}: {
+  label: string;
+  value: ReactNode;
+  icon?: LucideIcon;
+  accent?: string;
+}) {
+  return (
+    <Card className="p-4">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium uppercase tracking-wide text-gray-500">{label}</span>
+        {Icon && <Icon className="h-4 w-4 text-gray-400" />}
+      </div>
+      <div className={`mt-2 text-2xl font-semibold tabular-nums ${accent}`}>{value}</div>
+    </Card>
+  );
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  children,
+}: {
+  icon: LucideIcon;
+  title: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+      <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800">
+        <Icon className="h-6 w-6" />
+      </div>
+      <p className="text-base font-medium text-gray-700 dark:text-gray-200">{title}</p>
+      {children && <div className="mt-1 max-w-md text-sm text-gray-500">{children}</div>}
+    </div>
+  );
+}

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}