@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/screens/NamespaceEditor.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } 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 } from "../primitives";
 import type { ClefManifest, DecryptedFile, LintIssue } from "@clef-sh/core";
 
 interface EditorRow {
@@ -23,6 +22,22 @@ interface NamespaceEditorProps {
   manifest: ClefManifest | null;
 }
 
+// Per-env underline colors for the tab bar. Mirrors ENV_COLORS but as Tailwind classes.
+const ENV_TAB_BORDER: Record<string, string> = {
+  dev: "border-go-500",
+  staging: "border-warn-500",
+  production: "border-stop-500",
+};
+
+const VALUE_INPUT =
+  "flex-1 rounded border border-edge-strong bg-ink-800 px-2.5 py-1 font-mono text-[12px] text-bone outline-none focus-visible:border-gold-500";
+
+const NEW_KEY_INPUT =
+  "shrink-0 basis-[240px] rounded border border-gold-500/40 bg-ink-800 px-2.5 py-1.5 font-mono text-[12px] text-bone outline-none focus-visible:border-gold-500";
+
+const NEW_VALUE_INPUT =
+  "flex-1 rounded border border-edge bg-ink-800 px-2.5 py-1.5 font-mono text-[12px] text-bone outline-none focus-visible:border-gold-500";
+
 export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorProps) {
   const [env, setEnv] = useState(initialEnv ?? "");
   const [rows, setRows] = useState<EditorRow[]>([]);
@@ -44,7 +59,6 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
 
   const REVEAL_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
 
-  // Clear timeout on unmount
   useEffect(() => () => clearTimeout(revealTimeoutRef.current), []);
 
   const environments = manifest?.environments ?? [];
@@ -84,7 +98,7 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
       const backend = data.metadata?.backend ?? "age";
       const recipientCount = data.metadata?.recipients?.length ?? 0;
       setSopsInfo(
-        `encrypted with ${backend} \u00B7 ${recipientCount} recipient${recipientCount !== 1 ? "s" : ""}`,
+        `encrypted with ${backend} · ${recipientCount} recipient${recipientCount !== 1 ? "s" : ""}`,
       );
     } catch {
       setError("Failed to load namespace data");
@@ -109,7 +123,6 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
   const toggleVisible = (key: string) => {
     setRows((r) => r.map((row) => (row.key === key ? { ...row, visible: !row.visible } : row)));
 
-    // Reset idle timeout on any reveal action
     clearTimeout(revealTimeoutRef.current);
     revealTimeoutRef.current = setTimeout(() => {
       setRows((r) =>
@@ -132,9 +145,6 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
     setSaving(true);
     setError(null);
     try {
-      // Each PUT auto-commits via the transaction manager, matching CLI
-      // behavior where each `clef set` is its own commit. Serialize so
-      // each transaction completes before the next starts.
       let failure: string | null = null;
       for (const row of dirtyRows) {
         const payload: Record<string, unknown> = { value: row.value };
@@ -145,18 +155,11 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
           body: JSON.stringify(payload),
         });
         if (!res.ok) {
-          // Bail on first failure — for dirty-tree / recipient errors the
-          // remaining PUTs will fail the same way, and piling errors on top
-          // of each other just obscures the root cause.
           const data = await res.json().catch(() => ({}));
           failure = data.error || `Failed to save ${row.key}`;
           break;
         }
       }
-      // Always reload from disk — on success to pick up server-side state
-      // (lastModified, metadata), on failure to snap the UI back to the
-      // current on-disk values and re-mask the inputs rather than leaving
-      // unsaved plaintext edits visible in an illusory "pending" state.
       await loadData();
       if (failure) setError(failure);
     } catch {
@@ -185,10 +188,7 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
         return;
       }
       const data = await res.json();
-      if (data.warning) {
-        setError(data.warning);
-      }
-      // Update local state directly — avoids an extra decrypt round-trip
+      if (data.warning) setError(data.warning);
       setRows((prev) => [
         ...prev,
         {
@@ -224,7 +224,6 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
         setError(data.error || "Failed to reset key");
         return;
       }
-      // Update local state directly — avoids an extra decrypt round-trip
       setRows((prev) =>
         prev.map((row) =>
           row.key === key ? { ...row, pending: true, value: "", edited: false } : row,
@@ -282,47 +281,37 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
   const hasChanges = rows.some((r) => r.edited);
 
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
-      <TopBar
-        title={`/${ns}`}
-        subtitle={`Namespace \u00B7 ${rows.length} keys`}
-        actions={
-          <>
-            {hasChanges && (
-              <Button
-                variant="primary"
-                disabled={saving}
-                onClick={() => {
-                  if (isProduction) {
-                    setProtectedConfirm("save");
-                  } else {
-                    handleSave();
-                  }
-                }}
-              >
-                {saving ? "Saving..." : "Save"}
-              </Button>
-            )}
-            <Button variant="primary" data-testid="add-key-btn" onClick={() => setAdding(true)}>
-              + Add key
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <Toolbar>
+        <div>
+          <Toolbar.Title>{`/${ns}`}</Toolbar.Title>
+          <Toolbar.Subtitle>Namespace · {rows.length} keys</Toolbar.Subtitle>
+        </div>
+        <Toolbar.Actions>
+          {hasChanges && (
+            <Button
+              variant="primary"
+              disabled={saving}
+              onClick={() => {
+                if (isProduction) setProtectedConfirm("save");
+                else handleSave();
+              }}
+            >
+              {saving ? "Saving..." : "Save"}
             </Button>
-          </>
-        }
-      />
+          )}
+          <Button variant="primary" data-testid="add-key-btn" onClick={() => setAdding(true)}>
+            + Add key
+          </Button>
+        </Toolbar.Actions>
+      </Toolbar>
 
       {/* Env tabs */}
-      <div
-        style={{
-          display: "flex",
-          gap: 0,
-          borderBottom: `1px solid ${theme.border}`,
-          padding: "0 24px",
-          background: "#0D0F14",
-        }}
-      >
+      <div className="flex border-b border-edge bg-ink-800 px-6">
         {environments.map((e) => {
           const isActive = env === e.name;
-          const c = ENV_COLORS[e.name] ?? { color: theme.textMuted };
+          const activeBorder = ENV_TAB_BORDER[e.name] ?? "border-ash";
+          const borderClass = isActive ? activeBorder : "border-transparent";
           return (
             <div
               key={e.name}
@@ -332,480 +321,214 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
               onKeyDown={(ev) => {
                 if (ev.key === "Enter") setEnv(e.name);
               }}
-              style={{
-                padding: "10px 18px",
-                cursor: "pointer",
-                borderBottom: isActive ? `2px solid ${c.color}` : "2px solid transparent",
-                display: "flex",
-                alignItems: "center",
-                gap: 7,
-                marginBottom: -1,
-              }}
+              className={`-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 px-4 py-2.5 ${borderClass}`}
             >
               <EnvBadge env={e.name} small />
               <span
-                style={{
-                  fontFamily: theme.sans,
-                  fontSize: 13,
-                  fontWeight: isActive ? 600 : 400,
-                  color: isActive ? theme.text : theme.textMuted,
-                }}
+                className={`font-sans text-[13px] ${isActive ? "font-semibold text-bone" : "font-normal text-ash"}`}
               >
                 {e.name}
               </span>
             </div>
           );
         })}
-        <div style={{ flex: 1 }} />
-        <div
-          style={{
-            padding: "10px 0",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <span
-            style={{
-              fontFamily: theme.mono,
-              fontSize: 10,
-              color: theme.textMuted,
-            }}
-          >
-            {sopsInfo}
-          </span>
+        <div className="flex-1" />
+        <div className="flex items-center py-2.5">
+          <span className="font-mono text-[10px] text-ash">{sopsInfo}</span>
         </div>
       </div>
 
-      <div style={{ flex: 1, overflow: "auto", padding: 24 }}>
+      <div className="flex-1 overflow-auto p-6">
         {/* Production warning */}
         {isProduction && (
           <div
             data-testid="production-warning"
-            style={{
-              marginBottom: 20,
-              padding: "10px 16px",
-              background: theme.redDim,
-              border: `1px solid ${theme.red}44`,
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-            }}
+            className="mb-5 flex items-center gap-2.5 rounded-lg border border-stop-500/30 bg-stop-500/10 px-4 py-2.5"
           >
-            <span style={{ fontSize: 14 }}>{"\uD83D\uDD12"}</span>
-            <span style={{ fontFamily: theme.sans, fontSize: 12, color: theme.red }}>
+            <span className="text-[14px]">{"🔒"}</span>
+            <span className="font-sans text-[12px] text-stop-500">
               <strong>Production environment.</strong> Changes will require confirmation before
               committing.
             </span>
           </div>
         )}
 
-        {loading && <p style={{ color: theme.textMuted, fontFamily: theme.sans }}>Loading...</p>}
+        {loading && <p className="font-sans text-ash">Loading...</p>}
 
         {error && (
-          <div
-            style={{
-              padding: "12px 16px",
-              background: theme.redDim,
-              border: `1px solid ${theme.red}44`,
-              borderRadius: 8,
-              fontFamily: theme.sans,
-              fontSize: 12,
-              color: theme.red,
-              marginBottom: 20,
-            }}
-          >
+          <div className="mb-5 rounded-lg border border-stop-500/30 bg-stop-500/10 px-4 py-3 font-sans text-[12px] text-stop-500">
             {error}
           </div>
         )}
 
         {!loading && (
           <>
-            {/* Keys table.  Rendered even when `error` is set so a failed
-                save still shows the dirty rows + Save button for retry.
-                On load failure `rows` is empty, so the table renders
-                gracefully with no row body. */}
-            <div
-              style={{
-                background: theme.surface,
-                border: `1px solid ${theme.border}`,
-                borderRadius: 10,
-              }}
-            >
+            {/* Keys table */}
+            <div className="rounded-card border border-edge bg-ink-850">
               {/* Header */}
-              <div
-                style={{
-                  display: "grid",
-                  gridTemplateColumns: "260px 1fr 90px 36px",
-                  background: "#0D0F14",
-                  padding: "10px 20px",
-                  borderBottom: `1px solid ${theme.border}`,
-                  borderRadius: "10px 10px 0 0",
-                }}
-              >
+              <div className="grid grid-cols-[260px_1fr_90px_36px] items-center rounded-t-card border-b border-edge bg-ink-800 px-5 py-2.5">
                 {["Key", "Value", "Type", ""].map((h) => (
                   <span
                     key={h || "actions"}
-                    style={{
-                      fontFamily: theme.sans,
-                      fontSize: 11,
-                      fontWeight: 600,
-                      color: theme.textMuted,
-                      textTransform: "uppercase",
-                      letterSpacing: "0.07em",
-                    }}
+                    className="font-sans text-[11px] font-semibold uppercase tracking-[0.07em] text-ash"
                   >
                     {h}
                   </span>
                 ))}
               </div>
 
-              {rows.map((row, i) => (
-                <div
-                  key={row.key}
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "260px 1fr 90px 36px",
-                    padding: "0 20px",
-                    borderBottom: i < rows.length - 1 ? `1px solid ${theme.border}` : "none",
-                    background: row.pending
-                      ? "#F0A50012"
-                      : row.edited
-                        ? `${theme.accent}08`
-                        : "transparent",
-                    borderLeft: row.pending
-                      ? "3px solid #F0A50088"
-                      : row.edited
-                        ? `2px solid ${theme.accent}`
-                        : "2px solid transparent",
-                    alignItems: "center",
-                    minHeight: 48,
-                  }}
-                >
-                  {/* Key */}
+              {rows.map((row, i) => {
+                const rowBg = row.pending
+                  ? "bg-gold-500/[0.07]"
+                  : row.edited
+                    ? "bg-gold-500/[0.03]"
+                    : "bg-transparent";
+                const rowBorderLeft = row.pending
+                  ? "border-l-[3px] border-gold-500/55"
+                  : row.edited
+                    ? "border-l-2 border-gold-500"
+                    : "border-l-2 border-transparent";
+                const rowBorderBottom = i < rows.length - 1 ? "border-b border-edge" : "border-b-0";
+                return (
                   <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      paddingRight: 16,
-                    }}
+                    key={row.key}
+                    className={`grid min-h-[48px] grid-cols-[260px_1fr_90px_36px] items-center px-5 ${rowBg} ${rowBorderLeft} ${rowBorderBottom}`}
                   >
-                    {row.required && (
-                      <span
-                        style={{
-                          color: theme.accent,
-                          fontSize: 14,
-                          lineHeight: 1,
-                        }}
-                      >
-                        *
-                      </span>
-                    )}
-                    <span
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 12,
-                        color: theme.text,
-                      }}
-                    >
-                      {row.key}
-                    </span>
-                    {row.edited && (
-                      <span
-                        data-testid="dirty-dot"
-                        style={{
-                          width: 6,
-                          height: 6,
-                          borderRadius: "50%",
-                          background: theme.accent,
-                          flexShrink: 0,
-                          display: "inline-block",
-                        }}
-                      />
-                    )}
-                  </div>
+                    {/* Key */}
+                    <div className="flex items-center gap-2 pr-4">
+                      {row.required && (
+                        <span className="text-[14px] leading-none text-gold-500">*</span>
+                      )}
+                      <span className="font-mono text-[12px] text-bone">{row.key}</span>
+                      {row.edited && (
+                        <span
+                          data-testid="dirty-dot"
+                          className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-gold-500"
+                        />
+                      )}
+                    </div>
 
-                  {/* Value */}
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      paddingRight: 16,
-                    }}
-                  >
-                    {row.pending && !row.visible ? (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 11,
-                          fontStyle: "italic",
-                          color: theme.accent,
-                        }}
-                      >
-                        PENDING {"\u2014"} not yet set
-                      </span>
-                    ) : row.visible ? (
-                      <input
-                        type="text"
-                        data-testid={`value-input-${row.key}`}
-                        value={row.value}
-                        onChange={(e) => handleEdit(row.key, e.target.value)}
-                        autoComplete="off"
-                        placeholder={row.pending ? "Enter real value..." : undefined}
-                        style={{
-                          flex: 1,
-                          background: "#0D0F14",
-                          border: `1px solid ${theme.borderLight}`,
-                          borderRadius: 5,
-                          padding: "5px 10px",
-                          fontFamily: theme.mono,
-                          fontSize: 12,
-                          color: theme.text,
-                          outline: "none",
-                        }}
-                      />
-                    ) : (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 13,
-                          color: theme.textMuted,
-                          letterSpacing: "0.15em",
-                        }}
-                      >
-                        {
-                          "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-                        }
-                      </span>
-                    )}
-                    {row.pending && !row.visible ? (
-                      <div style={{ display: "flex", gap: 6 }}>
+                    {/* Value */}
+                    <div className="flex items-center gap-2 pr-4">
+                      {row.pending && !row.visible ? (
+                        <span className="font-mono text-[11px] italic text-gold-500">
+                          PENDING {"—"} not yet set
+                        </span>
+                      ) : row.visible ? (
+                        <input
+                          type="text"
+                          data-testid={`value-input-${row.key}`}
+                          value={row.value}
+                          onChange={(e) => handleEdit(row.key, e.target.value)}
+                          autoComplete="off"
+                          placeholder={row.pending ? "Enter real value..." : undefined}
+                          className={VALUE_INPUT}
+                        />
+                      ) : (
+                        <span className="font-mono text-[13px] tracking-[0.15em] text-ash">
+                          {"••••••••••••••••••••••••"}
+                        </span>
+                      )}
+                      {row.pending && !row.visible ? (
+                        <div className="flex gap-1.5">
+                          <button
+                            data-testid={`set-value-${row.key}`}
+                            onClick={() => toggleVisible(row.key)}
+                            className="cursor-pointer rounded border border-gold-500/40 bg-gold-500/10 px-2.5 py-0.5 font-sans text-[11px] font-semibold text-gold-500 hover:bg-gold-500/20"
+                          >
+                            Set value
+                          </button>
+                          <button
+                            data-testid={`accept-value-${row.key}`}
+                            onClick={() => handleAccept(row.key)}
+                            title="Accept the random value as the final secret"
+                            className="cursor-pointer rounded border border-go-500/40 bg-go-500/10 px-2.5 py-0.5 font-sans text-[11px] font-semibold text-go-500 hover:bg-go-500/20"
+                          >
+                            Accept random
+                          </button>
+                        </div>
+                      ) : (
                         <button
-                          data-testid={`set-value-${row.key}`}
+                          data-testid={`eye-${row.key}`}
                           onClick={() => toggleVisible(row.key)}
-                          style={{
-                            background: `${theme.accent}18`,
-                            border: `1px solid ${theme.accent}55`,
-                            borderRadius: 5,
-                            cursor: "pointer",
-                            color: theme.accent,
-                            padding: "3px 10px",
-                            fontFamily: theme.sans,
-                            fontSize: 11,
-                            fontWeight: 600,
-                          }}
+                          aria-label={row.visible ? "Hide value" : "Reveal value"}
+                          className={`flex cursor-pointer items-center bg-transparent p-1 text-[13px] ${row.visible ? "text-gold-500" : "text-ash-dim"}`}
                         >
-                          Set value
+                          {"👁"}
                         </button>
-                        <button
-                          data-testid={`accept-value-${row.key}`}
-                          onClick={() => handleAccept(row.key)}
-                          title="Accept the random value as the final secret"
-                          style={{
-                            background: `${theme.green}18`,
-                            border: `1px solid ${theme.green}55`,
-                            borderRadius: 5,
-                            cursor: "pointer",
-                            color: theme.green,
-                            padding: "3px 10px",
-                            fontFamily: theme.sans,
-                            fontSize: 11,
-                            fontWeight: 600,
-                          }}
-                        >
-                          Accept random
-                        </button>
-                      </div>
-                    ) : (
-                      <button
-                        data-testid={`eye-${row.key}`}
-                        onClick={() => toggleVisible(row.key)}
-                        aria-label={row.visible ? "Hide value" : "Reveal value"}
-                        style={{
-                          background: "none",
-                          border: "none",
-                          cursor: "pointer",
-                          color: row.visible ? theme.accent : theme.textDim,
-                          padding: 4,
-                          display: "flex",
-                          alignItems: "center",
-                          fontSize: 13,
-                        }}
-                      >
-                        {"\uD83D\uDC41"}
-                      </button>
-                    )}
-                  </div>
+                      )}
+                    </div>
 
-                  {/* Type */}
-                  <div>
-                    {row.pending ? (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 10,
-                          fontWeight: 700,
-                          color: theme.accent,
-                          background: `${theme.accent}18`,
-                          border: `1px solid ${theme.accent}33`,
-                          borderRadius: 3,
-                          padding: "2px 7px",
-                        }}
-                      >
-                        PENDING
-                      </span>
-                    ) : (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 10,
-                          color: theme.blue,
-                          background: theme.blueDim,
-                          border: `1px solid ${theme.blue}33`,
-                          borderRadius: 3,
-                          padding: "2px 7px",
-                        }}
-                      >
-                        {row.type}
-                      </span>
-                    )}
-                  </div>
+                    {/* Type */}
+                    <div>
+                      {row.pending ? (
+                        <span className="rounded-sm border border-gold-500/20 bg-gold-500/10 px-1.5 py-0.5 font-mono text-[10px] font-bold text-gold-500">
+                          PENDING
+                        </span>
+                      ) : (
+                        <span className="rounded-sm border border-blue-400/20 bg-blue-400/10 px-1.5 py-0.5 font-mono text-[10px] text-blue-400">
+                          {row.type}
+                        </span>
+                      )}
+                    </div>
 
-                  {/* Actions */}
-                  <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
-                    <button
-                      data-testid={`overflow-${row.key}`}
-                      onClick={() => setOverflowKey(overflowKey === row.key ? null : row.key)}
-                      style={{
-                        background: "none",
-                        border: "none",
-                        cursor: "pointer",
-                        color: theme.textDim,
-                        fontSize: 16,
-                        padding: 4,
-                      }}
-                    >
-                      {"\u22EF"}
-                    </button>
-                    {overflowKey === row.key && (
-                      <div
-                        data-testid={`overflow-menu-${row.key}`}
-                        style={{
-                          position: "absolute",
-                          top: "100%",
-                          right: 0,
-                          zIndex: 10,
-                          background: theme.surface,
-                          border: `1px solid ${theme.border}`,
-                          borderRadius: 6,
-                          padding: 4,
-                          minWidth: 200,
-                          boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
-                        }}
+                    {/* Actions */}
+                    <div className="relative flex justify-center">
+                      <button
+                        data-testid={`overflow-${row.key}`}
+                        onClick={() => setOverflowKey(overflowKey === row.key ? null : row.key)}
+                        className="cursor-pointer bg-transparent p-1 text-[16px] text-ash-dim"
                       >
-                        <button
-                          data-testid={`reset-random-${row.key}`}
-                          onClick={() => {
-                            setOverflowKey(null);
-                            setConfirmReset(row.key);
-                          }}
-                          title="Use this to immediately invalidate a compromised secret while you arrange a replacement."
-                          style={{
-                            display: "block",
-                            width: "100%",
-                            textAlign: "left",
-                            background: "none",
-                            border: "none",
-                            cursor: "pointer",
-                            fontFamily: theme.sans,
-                            fontSize: 12,
-                            color: theme.accent,
-                            padding: "6px 10px",
-                            borderRadius: 4,
-                          }}
-                          onMouseEnter={(e) => {
-                            (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
-                          }}
-                          onMouseLeave={(e) => {
-                            (e.currentTarget as HTMLElement).style.background = "none";
-                          }}
-                        >
-                          Reset to random (pending)
-                        </button>
-                        <button
-                          data-testid={`delete-key-${row.key}`}
-                          onClick={() => {
-                            setOverflowKey(null);
-                            setConfirmDelete(row.key);
-                          }}
-                          style={{
-                            display: "block",
-                            width: "100%",
-                            textAlign: "left",
-                            background: "none",
-                            border: "none",
-                            cursor: "pointer",
-                            fontFamily: theme.sans,
-                            fontSize: 12,
-                            color: theme.red,
-                            padding: "6px 10px",
-                            borderRadius: 4,
-                          }}
-                          onMouseEnter={(e) => {
-                            (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
-                          }}
-                          onMouseLeave={(e) => {
-                            (e.currentTarget as HTMLElement).style.background = "none";
-                          }}
+                        {"⋯"}
+                      </button>
+                      {overflowKey === row.key && (
+                        <div
+                          data-testid={`overflow-menu-${row.key}`}
+                          className="absolute right-0 top-full z-10 min-w-[200px] rounded-md border border-edge bg-ink-850 p-1 shadow-soft-drop"
                         >
-                          Delete key
-                        </button>
-                      </div>
-                    )}
+                          <button
+                            data-testid={`reset-random-${row.key}`}
+                            onClick={() => {
+                              setOverflowKey(null);
+                              setConfirmReset(row.key);
+                            }}
+                            title="Use this to immediately invalidate a compromised secret while you arrange a replacement."
+                            className="block w-full cursor-pointer rounded bg-transparent px-2.5 py-1.5 text-left font-sans text-[12px] text-gold-500 hover:bg-ink-800"
+                          >
+                            Reset to random (pending)
+                          </button>
+                          <button
+                            data-testid={`delete-key-${row.key}`}
+                            onClick={() => {
+                              setOverflowKey(null);
+                              setConfirmDelete(row.key);
+                            }}
+                            className="block w-full cursor-pointer rounded bg-transparent px-2.5 py-1.5 text-left font-sans text-[12px] text-stop-500 hover:bg-ink-800"
+                          >
+                            Delete key
+                          </button>
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
 
               {/* Add key row */}
               {adding && (
-                <div
-                  style={{
-                    padding: "12px 20px",
-                    borderTop: `1px solid ${theme.border}`,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 10,
-                  }}
-                >
-                  <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                <div className="flex flex-col gap-2.5 border-t border-edge px-5 py-3">
+                  <div className="flex items-center gap-2.5">
                     <input
                       data-testid="new-key-input"
                       placeholder="KEY_NAME"
                       value={newKey}
                       onChange={(e) => setNewKey(e.target.value)}
-                      style={{
-                        flex: "0 0 240px",
-                        background: "#0D0F14",
-                        border: `1px solid ${theme.accent}66`,
-                        borderRadius: 5,
-                        padding: "6px 10px",
-                        fontFamily: theme.mono,
-                        fontSize: 12,
-                        color: theme.text,
-                        outline: "none",
-                      }}
+                      className={NEW_KEY_INPUT}
                     />
                     {/* Mode toggle */}
                     <div
                       role="radiogroup"
-                      style={{
-                        display: "flex",
-                        border: `1px solid ${theme.border}`,
-                        borderRadius: 6,
-                        overflow: "hidden",
-                      }}
+                      className="flex overflow-hidden rounded-md border border-edge"
                     >
                       <button
                         data-testid="mode-set-value"
@@ -815,17 +538,11 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
                           setAddMode("value");
                           setNewValue("");
                         }}
-                        style={{
-                          fontFamily: theme.sans,
-                          fontSize: 11,
-                          fontWeight: 600,
-                          padding: "4px 14px",
-                          border: "none",
-                          borderRight: `1px solid ${theme.border}`,
-                          background: addMode === "value" ? `${theme.accent}22` : "transparent",
-                          color: addMode === "value" ? theme.accent : theme.textMuted,
-                          cursor: "pointer",
-                        }}
+                        className={`cursor-pointer border-r border-edge px-3.5 py-1 font-sans text-[11px] font-semibold ${
+                          addMode === "value"
+                            ? "bg-gold-500/15 text-gold-500"
+                            : "bg-transparent text-ash"
+                        }`}
                       >
                         Set value
                       </button>
@@ -837,22 +554,17 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
                           setAddMode("random");
                           setNewValue("");
                         }}
-                        style={{
-                          fontFamily: theme.sans,
-                          fontSize: 11,
-                          fontWeight: 600,
-                          padding: "4px 14px",
-                          border: "none",
-                          background: addMode === "random" ? `${theme.accent}22` : "transparent",
-                          color: addMode === "random" ? theme.accent : theme.textMuted,
-                          cursor: "pointer",
-                        }}
+                        className={`cursor-pointer px-3.5 py-1 font-sans text-[11px] font-semibold ${
+                          addMode === "random"
+                            ? "bg-gold-500/15 text-gold-500"
+                            : "bg-transparent text-ash"
+                        }`}
                       >
                         Random (pending)
                       </button>
                     </div>
                   </div>
-                  <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                  <div className="flex items-center gap-2.5">
                     {addMode === "value" ? (
                       <input
                         data-testid="new-value-input"
@@ -861,29 +573,10 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
                         value={newValue}
                         onChange={(e) => setNewValue(e.target.value)}
                         autoComplete="off"
-                        style={{
-                          flex: 1,
-                          background: "#0D0F14",
-                          border: `1px solid ${theme.border}`,
-                          borderRadius: 5,
-                          padding: "6px 10px",
-                          fontFamily: theme.mono,
-                          fontSize: 12,
-                          color: theme.text,
-                          outline: "none",
-                        }}
+                        className={NEW_VALUE_INPUT}
                       />
                     ) : (
-                      <div
-                        style={{
-                          flex: 1,
-                          fontFamily: theme.mono,
-                          fontSize: 11,
-                          fontStyle: "italic",
-                          color: theme.accent,
-                          padding: "6px 10px",
-                        }}
-                      >
+                      <div className="flex-1 px-2.5 py-1.5 font-mono text-[11px] italic text-gold-500">
                         A cryptographically random placeholder will be generated server-side.
                       </div>
                     )}
@@ -891,11 +584,8 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
                       variant="primary"
                       data-testid="add-key-submit"
                       onClick={() => {
-                        if (isProduction) {
-                          setProtectedConfirm("add");
-                        } else {
-                          handleAdd();
-                        }
+                        if (isProduction) setProtectedConfirm("add");
+                        else handleAdd();
                       }}
                     >
                       {addMode === "random" ? "Generate random value" : "Add"}
@@ -919,33 +609,18 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
             {confirmReset && (
               <div
                 data-testid="confirm-reset-dialog"
-                style={{
-                  marginTop: 16,
-                  padding: "14px 18px",
-                  background: `${theme.accent}0A`,
-                  border: `1px solid ${theme.accent}33`,
-                  borderRadius: 8,
-                  fontFamily: theme.sans,
-                  fontSize: 12,
-                }}
+                className="mt-4 rounded-lg border border-gold-500/30 bg-gold-500/[0.04] px-4 py-3.5 font-sans text-[12px]"
               >
-                <p style={{ color: theme.text, margin: "0 0 10px 0" }}>
-                  Reset <strong style={{ fontFamily: theme.mono }}>{confirmReset}</strong> to a
-                  random placeholder? The current value will be overwritten.
+                <p className="m-0 mb-2.5 text-bone">
+                  Reset <strong className="font-mono">{confirmReset}</strong> to a random
+                  placeholder? The current value will be overwritten.
                 </p>
                 {isProduction && (
-                  <p
-                    style={{
-                      color: theme.red,
-                      margin: "0 0 10px 0",
-                      fontSize: 12,
-                      fontWeight: 600,
-                    }}
-                  >
-                    {"\uD83D\uDD12"} This is a protected environment.
+                  <p className="m-0 mb-2.5 text-[12px] font-semibold text-stop-500">
+                    {"🔒"} This is a protected environment.
                   </p>
                 )}
-                <div style={{ display: "flex", gap: 8 }}>
+                <div className="flex gap-2">
                   <Button
                     variant="primary"
                     data-testid="confirm-reset-yes"
@@ -964,34 +639,18 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
             {confirmDelete && (
               <div
                 data-testid="confirm-delete-dialog"
-                style={{
-                  marginTop: 16,
-                  padding: "14px 18px",
-                  background: theme.redDim,
-                  border: `1px solid ${theme.red}44`,
-                  borderRadius: 8,
-                  fontFamily: theme.sans,
-                  fontSize: 12,
-                }}
+                className="mt-4 rounded-lg border border-stop-500/30 bg-stop-500/10 px-4 py-3.5 font-sans text-[12px]"
               >
-                <p style={{ color: theme.text, margin: "0 0 10px 0" }}>
-                  Permanently delete{" "}
-                  <strong style={{ fontFamily: theme.mono }}>{confirmDelete}</strong> from{" "}
+                <p className="m-0 mb-2.5 text-bone">
+                  Permanently delete <strong className="font-mono">{confirmDelete}</strong> from{" "}
                   <strong>{env}</strong>? This cannot be undone.
                 </p>
                 {isProduction && (
-                  <p
-                    style={{
-                      color: theme.red,
-                      margin: "0 0 10px 0",
-                      fontSize: 12,
-                      fontWeight: 600,
-                    }}
-                  >
-                    {"\uD83D\uDD12"} This is a protected environment.
+                  <p className="m-0 mb-2.5 text-[12px] font-semibold text-stop-500">
+                    {"🔒"} This is a protected environment.
                   </p>
                 )}
-                <div style={{ display: "flex", gap: 8 }}>
+                <div className="flex gap-2">
                   <Button
                     variant="danger"
                     data-testid="confirm-delete-yes"
@@ -1010,34 +669,22 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
             {protectedConfirm && (
               <div
                 data-testid="confirm-protected-dialog"
-                style={{
-                  marginTop: 16,
-                  padding: "14px 18px",
-                  background: theme.redDim,
-                  border: `1px solid ${theme.red}44`,
-                  borderRadius: 8,
-                  fontFamily: theme.sans,
-                  fontSize: 12,
-                }}
+                className="mt-4 rounded-lg border border-stop-500/30 bg-stop-500/10 px-4 py-3.5 font-sans text-[12px]"
               >
-                <p style={{ color: theme.text, margin: "0 0 10px 0" }}>
-                  {"\uD83D\uDD12"}{" "}
-                  <strong style={{ color: theme.red }}>Protected environment.</strong> You are about
-                  to {protectedConfirm === "save" ? "commit changes to" : "add a key to"}{" "}
+                <p className="m-0 mb-2.5 text-bone">
+                  {"🔒"} <strong className="text-stop-500">Protected environment.</strong> You are
+                  about to {protectedConfirm === "save" ? "commit changes to" : "add a key to"}{" "}
                   <strong>{env}</strong>. Are you sure?
                 </p>
-                <div style={{ display: "flex", gap: 8 }}>
+                <div className="flex gap-2">
                   <Button
                     variant="primary"
                     data-testid="confirm-protected-yes"
                     onClick={async () => {
                       const action = protectedConfirm;
                       setProtectedConfirm(null);
-                      if (action === "save") {
-                        await handleSave(true);
-                      } else {
-                        await handleAdd(true);
-                      }
+                      if (action === "save") await handleSave(true);
+                      else await handleAdd(true);
                     }}
                   >
                     Confirm
@@ -1053,32 +700,13 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
             )}
 
             {/* Schema section */}
-            <div style={{ marginTop: 24 }}>
-              <div
-                style={{
-                  fontFamily: theme.sans,
-                  fontSize: 11,
-                  fontWeight: 600,
-                  color: theme.textMuted,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  marginBottom: 10,
-                }}
-              >
-                Schema {"\u00B7"} schemas/{ns}.yaml
+            <div className="mt-6">
+              <div className="mb-2.5 font-sans text-[11px] font-semibold uppercase tracking-[0.08em] text-ash">
+                Schema · schemas/{ns}.yaml
               </div>
               <div
                 data-testid="schema-summary"
-                style={{
-                  background: theme.surface,
-                  border: `1px solid ${theme.border}`,
-                  borderRadius: 8,
-                  padding: "12px 16px",
-                  fontFamily: theme.mono,
-                  fontSize: 11,
-                  color: theme.textMuted,
-                  lineHeight: 1.7,
-                }}
+                className="rounded-lg border border-edge bg-ink-850 px-4 py-3 font-mono text-[11px] leading-relaxed text-ash"
               >
                 {(() => {
                   const errors = lintIssues.filter((i) => i.severity === "error");
@@ -1086,26 +714,23 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
                   if (errors.length === 0 && warnings.length === 0) {
                     return (
                       <>
-                        <span style={{ color: theme.green }}>{"\u2713"}</span> All required keys
-                        present &nbsp;{"\u00B7"}&nbsp;
-                        <span style={{ color: theme.green }}>{"\u2713"}</span> All types valid
-                        &nbsp;{"\u00B7"}&nbsp;
-                        <span style={{ color: theme.textDim }}>0 warnings</span>
+                        <span className="text-go-500">{"✓"}</span> All required keys present
+                        &nbsp;·&nbsp;
+                        <span className="text-go-500">{"✓"}</span> All types valid &nbsp;·&nbsp;
+                        <span className="text-ash-dim">0 warnings</span>
                       </>
                     );
                   }
                   return (
                     <>
                       {errors.length > 0 && (
-                        <span style={{ color: theme.red }}>
+                        <span className="text-stop-500">
                           {errors.length} error{errors.length !== 1 ? "s" : ""}
                         </span>
                       )}
-                      {errors.length > 0 && warnings.length > 0 && (
-                        <span> &nbsp;{"\u00B7"}&nbsp; </span>
-                      )}
+                      {errors.length > 0 && warnings.length > 0 && <span> &nbsp;·&nbsp; </span>}
                       {warnings.length > 0 && (
-                        <span style={{ color: theme.yellow }}>
+                        <span className="text-warn-500">
                           {warnings.length} warning{warnings.length !== 1 ? "s" : ""}
                         </span>
                       )}