@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/screens/PolicyView.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { theme, ENV_COLORS } from "../theme";
 import { apiFetch } from "../api";
-import { TopBar } from "../components/TopBar";
 import { Button } from "../components/Button";
 import { EnvBadge } from "../components/EnvBadge";
+import { Toolbar, Card, EmptyState, Badge } from "../primitives";
 import type { ViewName } from "../components/Sidebar";
 import type { PolicyDocument, FileRotationStatus, KeyRotationStatus } from "@clef-sh/core";
 
@@ -28,25 +27,61 @@ type StatusFilter = "all" | "overdue" | "unknown" | "ok";
 
 const MS_PER_DAY = 86_400_000;
 
-const STATUS_META = {
-  overdue: { color: theme.red, bg: theme.redDim, label: "Overdue", icon: "\u2715" },
-  unknown: { color: theme.yellow, bg: theme.yellowDim, label: "Unknown", icon: "?" },
-  ok: { color: theme.green, bg: theme.greenDim, label: "OK", icon: "\u2713" },
-} as const;
-
-/**
- * A flattened row — one per (file, key) pair.  The PolicyView renders these
- * grouped by per-key status so users see the actual policy signal rather
- * than a file-level aggregate.
- */
+interface StatusMeta {
+  label: string;
+  icon: string;
+  // Tailwind class fragments per status — kept as strings so JIT picks them up.
+  textClass: string;
+  bgClass: string;
+  borderClass: string;
+  stripeClass: string;
+  badgeTone: "stop" | "warn" | "go";
+}
+
+const STATUS_META: Record<"overdue" | "unknown" | "ok", StatusMeta> = {
+  overdue: {
+    label: "Overdue",
+    icon: "✕",
+    textClass: "text-stop-500",
+    bgClass: "bg-stop-500/15",
+    borderClass: "border-stop-500/40",
+    stripeClass: "border-l-stop-500/40",
+    badgeTone: "stop",
+  },
+  unknown: {
+    label: "Unknown",
+    icon: "?",
+    textClass: "text-warn-500",
+    bgClass: "bg-warn-500/15",
+    borderClass: "border-warn-500/40",
+    stripeClass: "border-l-warn-500/40",
+    badgeTone: "warn",
+  },
+  ok: {
+    label: "OK",
+    icon: "✓",
+    textClass: "text-go-500",
+    bgClass: "bg-go-500/15",
+    borderClass: "border-go-500/40",
+    stripeClass: "border-l-go-500/40",
+    badgeTone: "go",
+  },
+};
+
+// Per-env override chip. Mirrors `EnvBadge` color choices so the policy's
+// environment overrides read with the same colors as the matrix.
+const ENV_OVERRIDE_CLASSES: Record<string, { text: string; bg: string; border: string }> = {
+  dev: { text: "text-go-500", bg: "bg-go-500/10", border: "border-go-500/20" },
+  staging: { text: "text-warn-500", bg: "bg-warn-500/10", border: "border-warn-500/20" },
+  production: { text: "text-stop-500", bg: "bg-stop-500/10", border: "border-stop-500/20" },
+};
+
 interface KeyRow {
   key: KeyRotationStatus;
   file: FileRotationStatus;
 }
 
 function keyRowStatus(k: KeyRotationStatus): "overdue" | "unknown" | "ok" {
-  // Unknown is checked before overdue because `rotation_overdue` is only
-  // meaningful when `last_rotated_known` is true.
   if (!k.last_rotated_known) return "unknown";
   if (k.rotation_overdue) return "overdue";
   return "ok";
@@ -56,7 +91,6 @@ function ageInDays(iso: string): number {
   return Math.floor((Date.now() - new Date(iso).getTime()) / MS_PER_DAY);
 }
 
-/** Derive max_age_days for a key from its rotation_due vs last_rotated_at. */
 function keyLimitDays(k: KeyRotationStatus): number | null {
   if (!k.last_rotated_at || !k.rotation_due) return null;
   const due = new Date(k.rotation_due).getTime();
@@ -64,6 +98,43 @@ function keyLimitDays(k: KeyRotationStatus): number | null {
   return Math.round((due - last) / MS_PER_DAY);
 }
 
+const FILTER_DEFINITIONS: ReadonlyArray<{
+  key: StatusFilter;
+  label: string;
+  textClass: string;
+  bgClass: string;
+  borderClass: string;
+}> = [
+  {
+    key: "all",
+    label: "All keys",
+    textClass: "text-ash",
+    bgClass: "bg-ash/10",
+    borderClass: "border-ash/30",
+  },
+  {
+    key: "overdue",
+    label: "Overdue",
+    textClass: "text-stop-500",
+    bgClass: "bg-stop-500/15",
+    borderClass: "border-stop-500/40",
+  },
+  {
+    key: "unknown",
+    label: "Unknown",
+    textClass: "text-warn-500",
+    bgClass: "bg-warn-500/15",
+    borderClass: "border-warn-500/40",
+  },
+  {
+    key: "ok",
+    label: "Compliant",
+    textClass: "text-go-500",
+    bgClass: "bg-go-500/15",
+    borderClass: "border-go-500/40",
+  },
+];
+
 export function PolicyView({ setView, setNs }: PolicyViewProps) {
   const [data, setData] = useState<PolicyCheckResponse | null>(null);
   const [rawYaml, setRawYaml] = useState<string>("");
@@ -96,11 +167,7 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
     loadPolicy();
   }, [loadPolicy]);
 
-  // Extract the namespace from a cell path.  The cell path is shaped like
-  // `{prefix...}/<namespace>/<environment>.enc.yaml` per the manifest's
-  // file_pattern — so the second-to-last segment is always the namespace,
-  // regardless of how many leading directories the repo uses.  Mirrors
-  // LintView's handleNavigate.
+  // Extract namespace from cell path; mirrors LintView's handleNavigate.
   const namespaceFromPath = (filePath: string): string | undefined => {
     const parts = filePath.split("/");
     return parts.length >= 2 ? parts[parts.length - 2] : parts[0];
@@ -119,9 +186,6 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
   const policy = data?.policy;
   const source = data?.source;
 
-  // Flatten (file, key) pairs so we can group by per-key status.  This is the
-  // authoritative view of rotation compliance — unknown rotation state on a
-  // single key fails the gate regardless of how many other keys are fresh.
   const allRows: KeyRow[] = useMemo(
     () => files.flatMap((f) => f.keys.map((k) => ({ file: f, key: k }))),
     [files],
@@ -148,87 +212,64 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
   const allCompliant = counts.total > 0 && counts.overdue === 0 && counts.unknown === 0;
   const noFiles = !loading && files.length === 0;
 
+  const filterCounts: Record<StatusFilter, number> = {
+    all: counts.total,
+    overdue: counts.overdue,
+    unknown: counts.unknown,
+    ok: counts.ok,
+  };
+
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
-      <TopBar
-        title="Policy"
-        subtitle={"clef policy check \u2014 rotation verdicts"}
-        actions={<Button onClick={loadPolicy}>{"\u21BB"} Re-run</Button>}
-      />
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <Toolbar>
+        <div>
+          <Toolbar.Title>Policy</Toolbar.Title>
+          <Toolbar.Subtitle>{"clef policy check — rotation verdicts"}</Toolbar.Subtitle>
+        </div>
+        <Toolbar.Actions>
+          <Button onClick={loadPolicy}>{"↻"} Re-run</Button>
+        </Toolbar.Actions>
+      </Toolbar>
 
       {/* Policy summary card */}
       {policy && (
-        <div
-          style={{
-            padding: "16px 24px",
-            background: theme.surface,
-            borderBottom: `1px solid ${theme.border}`,
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
-            <span
-              style={{
-                fontFamily: theme.sans,
-                fontSize: 11,
-                fontWeight: 600,
-                color: theme.textDim,
-                letterSpacing: "0.08em",
-                textTransform: "uppercase",
-              }}
-            >
+        <div className="border-b border-edge bg-ink-850 px-6 py-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="font-sans text-[11px] font-semibold uppercase tracking-[0.08em] text-ash-dim">
               Default
             </span>
-            <span
-              style={{
-                fontFamily: theme.mono,
-                fontSize: 13,
-                color: theme.text,
-              }}
-            >
-              {policy.rotation?.max_age_days ?? "\u2014"}
-              <span style={{ color: theme.textMuted, marginLeft: 2 }}>d</span>
+            <span className="font-mono text-[13px] text-bone">
+              {policy.rotation?.max_age_days ?? "—"}
+              <span className="ml-0.5 text-ash">d</span>
             </span>
 
             {policy.rotation?.environments &&
               Object.entries(policy.rotation.environments).map(([env, cfg]) => {
-                const c = ENV_COLORS[env] ?? { color: theme.textMuted, bg: "transparent" };
+                const c = ENV_OVERRIDE_CLASSES[env] ?? {
+                  text: "text-ash",
+                  bg: "bg-transparent",
+                  border: "border-ash/20",
+                };
                 return (
                   <span
                     key={env}
-                    style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: 6,
-                      padding: "2px 8px",
-                      borderRadius: 4,
-                      background: c.bg,
-                      border: `1px solid ${c.color}33`,
-                      fontFamily: theme.mono,
-                      fontSize: 11,
-                      color: c.color,
-                    }}
+                    className={`inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 font-mono text-[11px] ${c.text} ${c.bg} ${c.border}`}
                   >
-                    <span style={{ fontWeight: 700, letterSpacing: "0.06em" }}>
-                      {env.toUpperCase()}
-                    </span>
+                    <span className="font-bold tracking-[0.06em]">{env.toUpperCase()}</span>
                     <span>{cfg.max_age_days}d</span>
                   </span>
                 );
               })}
 
-            <div style={{ flex: 1 }} />
+            <div className="flex-1" />
 
             <span
               data-testid="policy-source"
-              style={{
-                fontFamily: theme.mono,
-                fontSize: 10,
-                color: source === "file" ? theme.green : theme.textMuted,
-                background: source === "file" ? theme.greenDim : "transparent",
-                border: `1px solid ${source === "file" ? `${theme.green}44` : theme.border}`,
-                borderRadius: 3,
-                padding: "2px 8px",
-              }}
+              className={`rounded-sm border px-2 py-0.5 font-mono text-[10px] ${
+                source === "file"
+                  ? "border-go-500/30 bg-go-500/10 text-go-500"
+                  : "border-edge bg-transparent text-ash"
+              }`}
             >
               {source === "file" ? ".clef/policy.yaml" : "Built-in default"}
             </span>
@@ -237,16 +278,7 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
               <button
                 data-testid="toggle-yaml"
                 onClick={() => setShowYaml((v) => !v)}
-                style={{
-                  fontFamily: theme.sans,
-                  fontSize: 11,
-                  color: theme.accent,
-                  background: "transparent",
-                  border: `1px solid ${theme.accent}33`,
-                  borderRadius: 4,
-                  padding: "3px 9px",
-                  cursor: "pointer",
-                }}
+                className="cursor-pointer rounded-md border border-gold-500/30 bg-transparent px-2 py-0.5 font-sans text-[11px] text-gold-500 hover:bg-gold-500/10"
               >
                 {showYaml ? "Hide YAML" : "View YAML"}
               </button>
@@ -256,18 +288,7 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
           {showYaml && rawYaml && (
             <pre
               data-testid="raw-yaml"
-              style={{
-                marginTop: 12,
-                padding: "12px 14px",
-                background: "#0D0F14",
-                border: `1px solid ${theme.borderLight}`,
-                borderRadius: 6,
-                fontFamily: theme.mono,
-                fontSize: 11,
-                color: theme.text,
-                overflow: "auto",
-                maxHeight: 200,
-              }}
+              className="mt-3 max-h-[200px] overflow-auto rounded-md border border-edge-strong bg-ink-800 px-3.5 py-3 font-mono text-[11px] text-bone"
             >
               {rawYaml}
             </pre>
@@ -275,209 +296,52 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
         </div>
       )}
 
-      {/* Summary chips — per-key counts, not per-file */}
+      {/* Summary chips — per-key counts */}
       {!loading && counts.total > 0 && (
-        <div
-          style={{
-            padding: "14px 24px",
-            background: "#0D0F14",
-            borderBottom: `1px solid ${theme.border}`,
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-            flexWrap: "wrap",
-          }}
-        >
-          {[
-            {
-              key: "all" as const,
-              label: "All keys",
-              count: counts.total,
-              color: theme.textMuted,
-            },
-            {
-              key: "overdue" as const,
-              label: "Overdue",
-              count: counts.overdue,
-              color: theme.red,
-            },
-            {
-              key: "unknown" as const,
-              label: "Unknown",
-              count: counts.unknown,
-              color: theme.yellow,
-            },
-            {
-              key: "ok" as const,
-              label: "Compliant",
-              count: counts.ok,
-              color: theme.green,
-            },
-          ].map((f) => (
-            <button
-              key={f.key}
-              data-testid={`filter-${f.key}`}
-              onClick={() => setFilter(f.key)}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                padding: "5px 12px",
-                borderRadius: 20,
-                cursor: "pointer",
-                fontFamily: theme.sans,
-                fontSize: 12,
-                fontWeight: filter === f.key ? 600 : 400,
-                color: filter === f.key ? f.color : theme.textMuted,
-                background: filter === f.key ? `${f.color}18` : "transparent",
-                border: `1px solid ${filter === f.key ? `${f.color}55` : theme.border}`,
-                transition: "all 0.12s",
-              }}
-            >
-              <span
-                style={{
-                  fontFamily: theme.mono,
-                  fontSize: 11,
-                  fontWeight: 700,
-                  color: f.color,
-                }}
+        <div className="flex flex-wrap items-center gap-2.5 border-b border-edge bg-ink-800 px-6 py-3.5">
+          {FILTER_DEFINITIONS.map((f) => {
+            const active = filter === f.key;
+            const count = filterCounts[f.key];
+            return (
+              <button
+                key={f.key}
+                data-testid={`filter-${f.key}`}
+                onClick={() => setFilter(f.key)}
+                className={`flex cursor-pointer items-center gap-1.5 rounded-pill border px-3 py-1 font-sans text-[12px] transition-colors ${
+                  active
+                    ? `${f.textClass} ${f.bgClass} ${f.borderClass} font-semibold`
+                    : "border-edge bg-transparent text-ash hover:text-bone"
+                }`}
               >
-                {f.count}
-              </span>
-              {f.label}
-            </button>
-          ))}
+                <span className={`font-mono text-[11px] font-bold ${f.textClass}`}>{count}</span>
+                {f.label}
+              </button>
+            );
+          })}
         </div>
       )}
 
-      <div style={{ flex: 1, overflow: "auto", padding: 24 }}>
-        {loading && (
-          <>
-            <style>{`
-              @keyframes clef-policy-line {
-                0% { transform: scaleX(0); opacity: 0; }
-                10% { opacity: 1; }
-                50% { transform: scaleX(1); opacity: 1; }
-                80% { transform: scaleX(1); opacity: 0.3; }
-                100% { transform: scaleX(0); opacity: 0; }
-              }
-              @keyframes clef-policy-glow {
-                0%, 100% { opacity: 0.4; }
-                50% { opacity: 1; }
-              }
-            `}</style>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "48px 24px",
-              }}
-            >
-              <div
-                style={{
-                  background: theme.surface,
-                  border: `1px solid ${theme.border}`,
-                  borderRadius: 10,
-                  padding: "28px 40px",
-                  textAlign: "center",
-                  minWidth: 200,
-                }}
-              >
-                <div style={{ marginBottom: 16, display: "flex", flexDirection: "column", gap: 6 }}>
-                  {[0, 0.3, 0.6].map((delay, i) => (
-                    <div
-                      key={i}
-                      style={{
-                        height: 3,
-                        borderRadius: 2,
-                        background: theme.accent,
-                        transformOrigin: "left",
-                        animation: `clef-policy-line 1.8s ease-in-out ${delay}s infinite`,
-                        opacity: 0,
-                        width: [120, 90, 105][i],
-                      }}
-                    />
-                  ))}
-                </div>
-                <div
-                  style={{
-                    fontFamily: theme.mono,
-                    fontSize: 11,
-                    color: theme.textMuted,
-                    animation: "clef-policy-glow 1.8s ease-in-out infinite",
-                  }}
-                >
-                  Evaluating policy...
-                </div>
-              </div>
-            </div>
-          </>
-        )}
+      <div className="flex-1 overflow-auto p-6">
+        {loading && <EmptyState title="Evaluating policy..." />}
 
         {!loading && noFiles && (
-          <div
+          <EmptyState
             data-testid="no-files"
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 14,
-              padding: "60px 0",
-              color: theme.textMuted,
-              fontFamily: theme.sans,
-              fontSize: 13,
-            }}
-          >
-            No matrix files to evaluate.
-          </div>
+            title="No matrix files to evaluate."
+            body="Add a namespace to your manifest to start tracking rotation policy."
+          />
         )}
 
         {!loading && allCompliant && (
           <div
             data-testid="all-compliant"
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 14,
-              padding: "60px 0",
-            }}
+            className="flex flex-col items-center justify-center gap-3.5 py-14"
           >
-            <div
-              style={{
-                width: 56,
-                height: 56,
-                borderRadius: "50%",
-                background: theme.greenDim,
-                border: `1px solid ${theme.green}44`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 24,
-              }}
-            >
-              {"\u2713"}
-            </div>
-            <div
-              style={{
-                fontFamily: theme.sans,
-                fontWeight: 600,
-                fontSize: 16,
-                color: theme.green,
-              }}
-            >
-              All compliant
+            <div className="flex h-14 w-14 items-center justify-center rounded-full border border-go-500/30 bg-go-500/15 text-[24px] text-go-500">
+              {"✓"}
             </div>
-            <div
-              style={{
-                fontFamily: theme.mono,
-                fontSize: 12,
-                color: theme.textMuted,
-              }}
-            >
+            <div className="font-sans text-[16px] font-semibold text-go-500">All compliant</div>
+            <div className="font-mono text-[12px] text-ash">
               {counts.total} key{counts.total === 1 ? "" : "s"} within rotation window across{" "}
               {summary?.total_files ?? 0} file{summary?.total_files === 1 ? "" : "s"}
             </div>
@@ -496,75 +360,33 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
             const meta = STATUS_META[status];
 
             return (
-              <div key={status} style={{ marginBottom: 24 }}>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 10,
-                    marginBottom: 10,
-                  }}
-                >
+              <div key={status} className="mb-6">
+                <div className="mb-2.5 flex items-center gap-2.5">
                   <div
-                    style={{
-                      width: 22,
-                      height: 22,
-                      borderRadius: "50%",
-                      background: meta.bg,
-                      border: `1px solid ${meta.color}44`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontFamily: theme.mono,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      color: meta.color,
-                    }}
+                    className={`flex h-[22px] w-[22px] items-center justify-center rounded-full border font-mono text-[11px] font-bold ${meta.borderClass} ${meta.bgClass} ${meta.textClass}`}
                   >
                     {meta.icon}
                   </div>
-                  <span
-                    style={{
-                      fontFamily: theme.sans,
-                      fontWeight: 600,
-                      fontSize: 13,
-                      color: meta.color,
-                    }}
-                  >
+                  <span className={`font-sans text-[13px] font-semibold ${meta.textClass}`}>
                     {meta.label}
                   </span>
                   <span
-                    style={{
-                      fontFamily: theme.mono,
-                      fontSize: 10,
-                      color: meta.color,
-                      background: meta.bg,
-                      border: `1px solid ${meta.color}33`,
-                      borderRadius: 10,
-                      padding: "1px 8px",
-                    }}
+                    className={`rounded-pill border px-2 py-px font-mono text-[10px] ${meta.borderClass} ${meta.bgClass} ${meta.textClass}`}
                   >
                     {group.length}
                   </span>
                 </div>
 
-                <div
-                  style={{
-                    background: theme.surface,
-                    border: `1px solid ${theme.border}`,
-                    borderRadius: 10,
-                    overflow: "hidden",
-                  }}
-                >
+                <Card className="overflow-hidden">
                   {group.map((row, i) => {
                     const { file, key } = row;
                     const limit = keyLimitDays(key);
                     const nsHint = namespaceFromPath(file.path) ?? "<namespace>";
                     const message =
                       status === "unknown"
-                        ? `No rotation record \u00B7 run clef set ${nsHint}/${file.environment} ${key.key} to establish`
+                        ? `No rotation record · run clef set ${nsHint}/${file.environment} ${key.key} to establish`
                         : key.last_rotated_at
-                          ? `Last rotated ${ageInDays(key.last_rotated_at)}d ago \u00B7 limit ${limit ?? "?"}d \u00B7 ${key.rotation_count} rotation${key.rotation_count === 1 ? "" : "s"}`
+                          ? `Last rotated ${ageInDays(key.last_rotated_at)}d ago · limit ${limit ?? "?"}d · ${key.rotation_count} rotation${key.rotation_count === 1 ? "" : "s"}`
                           : `Rotation state inconsistent`;
                     const statusTag =
                       status === "overdue" ? `${meta.label} ${key.days_overdue}d` : meta.label;
@@ -572,65 +394,25 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
                     return (
                       <div
                         key={`${file.path}-${key.key}-${i}`}
-                        style={{
-                          display: "flex",
-                          alignItems: "flex-start",
-                          borderBottom: i < group.length - 1 ? `1px solid ${theme.border}` : "none",
-                          borderLeft: `3px solid ${meta.color}66`,
-                          transition: "background 0.1s",
-                          padding: "14px 18px",
-                          gap: 14,
-                        }}
+                        className={`flex items-start gap-3.5 border-l-[3px] px-4.5 py-3.5 transition-colors ${meta.stripeClass} ${
+                          i < group.length - 1 ? "border-b border-edge" : ""
+                        }`}
                       >
-                        <div style={{ flexShrink: 0, paddingTop: 2 }}>
-                          <span
-                            style={{
-                              fontFamily: theme.mono,
-                              fontSize: 9,
-                              fontWeight: 700,
-                              color: meta.color,
-                              background: `${meta.color}18`,
-                              border: `1px solid ${meta.color}33`,
-                              borderRadius: 3,
-                              padding: "2px 6px",
-                              letterSpacing: "0.07em",
-                              textTransform: "uppercase",
-                            }}
-                          >
+                        <div className="shrink-0 pt-0.5">
+                          <Badge tone={meta.badgeTone} variant="solid">
                             {statusTag}
-                          </span>
+                          </Badge>
                         </div>
 
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div
-                            style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: 8,
-                              marginBottom: 4,
-                              flexWrap: "wrap",
-                            }}
-                          >
+                        <div className="min-w-0 flex-1">
+                          <div className="mb-1 flex flex-wrap items-center gap-2">
                             <span
                               data-testid={`key-ref-${key.key}`}
-                              style={{
-                                fontFamily: theme.mono,
-                                fontSize: 13,
-                                fontWeight: 700,
-                                color: theme.text,
-                              }}
+                              className="font-mono text-[13px] font-bold text-bone"
                             >
                               {key.key}
                             </span>
-                            <span
-                              style={{
-                                fontFamily: theme.mono,
-                                fontSize: 10,
-                                color: theme.textMuted,
-                              }}
-                            >
-                              {"\u2190"}
-                            </span>
+                            <span className="font-mono text-[10px] text-ash">{"←"}</span>
                             <span
                               data-testid={`file-ref-${file.path}`}
                               role="link"
@@ -639,86 +421,34 @@ export function PolicyView({ setView, setNs }: PolicyViewProps) {
                               onKeyDown={(e) => {
                                 if (e.key === "Enter") handleNavigate(file);
                               }}
-                              style={{
-                                fontFamily: theme.mono,
-                                fontSize: 11,
-                                fontWeight: 500,
-                                color: theme.accent,
-                                cursor: "pointer",
-                                textDecoration: "underline",
-                                textDecorationColor: `${theme.accent}55`,
-                                textDecorationStyle: "dotted",
-                              }}
+                              className="cursor-pointer font-mono text-[11px] font-medium text-gold-500 underline decoration-gold-500/40 decoration-dotted"
                             >
                               {file.path}
                             </span>
                             <EnvBadge env={file.environment} small />
                           </div>
 
-                          <div
-                            style={{
-                              fontFamily: theme.sans,
-                              fontSize: 12,
-                              color: theme.textMuted,
-                            }}
-                          >
-                            {message}
-                          </div>
+                          <div className="font-sans text-[12px] text-ash">{message}</div>
                         </div>
                       </div>
                     );
                   })}
-                </div>
+                </Card>
               </div>
             );
           })}
 
         {/* Footer hint */}
         {!loading && summary && summary.total_files > 0 && (
-          <div
-            style={{
-              marginTop: 8,
-              padding: "12px 16px",
-              background: theme.surface,
-              border: `1px solid ${theme.border}`,
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              gap: 12,
-            }}
-          >
-            <span style={{ fontSize: 14 }}>{"\uD83D\uDCA1"}</span>
-            <span
-              style={{
-                fontFamily: theme.sans,
-                fontSize: 12,
-                color: theme.textMuted,
-              }}
-            >
+          <div className="mt-2 flex items-center gap-3 rounded-md border border-edge bg-ink-850 px-4 py-3">
+            <span className="text-[14px]">{"💡"}</span>
+            <span className="font-sans text-[12px] text-ash">
               Edit{" "}
-              <code
-                style={{
-                  fontFamily: theme.mono,
-                  fontSize: 11,
-                  color: theme.accent,
-                  background: theme.accentDim,
-                  padding: "1px 6px",
-                  borderRadius: 3,
-                }}
-              >
+              <code className="rounded-sm bg-gold-500/10 px-1.5 py-px font-mono text-[11px] text-gold-500">
                 .clef/policy.yaml
               </code>{" "}
               to change rotation limits. Run{" "}
-              <code
-                style={{
-                  fontFamily: theme.mono,
-                  fontSize: 11,
-                  color: theme.accent,
-                  background: theme.accentDim,
-                  padding: "1px 6px",
-                  borderRadius: 3,
-                }}
-              >
+              <code className="rounded-sm bg-gold-500/10 px-1.5 py-px font-mono text-[11px] text-gold-500">
                 clef policy check
               </code>{" "}
               locally to reproduce this verdict.