@clef-sh/ui 0.1.15-beta.97 → 0.1.15

package/src/client/components/SyncPanel.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from "react";
+import { theme } from "../theme";
+import { apiFetch } from "../api";
+import { Button } from "./Button";
+import { EnvBadge } from "./EnvBadge";
+
+interface SyncCellPlan {
+  namespace: string;
+  environment: string;
+  missingKeys: string[];
+  isProtected: boolean;
+}
+
+interface SyncPlan {
+  cells: SyncCellPlan[];
+  totalKeys: number;
+  hasProtectedEnvs: boolean;
+}
+
+interface SyncResult {
+  modifiedCells: string[];
+  scaffoldedKeys: Record<string, string[]>;
+  totalKeysScaffolded: number;
+}
+
+interface SyncPanelProps {
+  namespace: string;
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+export function SyncPanel({ namespace, onComplete, onCancel }: SyncPanelProps) {
+  const [phase, setPhase] = useState<"loading" | "preview" | "syncing" | "done" | "error">(
+    "loading",
+  );
+  const [plan, setPlan] = useState<SyncPlan | null>(null);
+  const [result, setResult] = useState<SyncResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await apiFetch("/api/sync/preview", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ namespace }),
+        });
+        if (cancelled) return;
+        if (!res.ok) {
+          const data = await res.json();
+          setError(data.error || "Preview failed");
+          setPhase("error");
+          return;
+        }
+        const data = (await res.json()) as SyncPlan;
+        setPlan(data);
+        setPhase("preview");
+      } catch {
+        if (!cancelled) {
+          setError("Failed to load sync preview");
+          setPhase("error");
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [namespace]);
+
+  const handleSync = async () => {
+    setPhase("syncing");
+    try {
+      const res = await apiFetch("/api/sync", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ namespace }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Sync failed");
+        setPhase("error");
+        return;
+      }
+      const data = await res.json();
+      setResult(data.result as SyncResult);
+      setPhase("done");
+      setTimeout(onComplete, 1500);
+    } catch {
+      setError("Sync failed");
+      setPhase("error");
+    }
+  };
+
+  return (
+    <div
+      data-testid="sync-panel"
+      style={{
+        background: theme.surface,
+        border: `1px solid ${theme.border}`,
+        borderRadius: 8,
+        padding: "16px 20px",
+        marginTop: 8,
+        marginBottom: 8,
+      }}
+    >
+      {phase === "loading" && (
+        <div style={{ fontFamily: theme.sans, fontSize: 13, color: theme.textMuted }}>
+          Loading sync preview...
+        </div>
+      )}
+
+      {phase === "preview" && plan && (
+        <>
+          {plan.totalKeys === 0 ? (
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <span
+                data-testid="sync-in-sync"
+                style={{ fontFamily: theme.sans, fontSize: 13, color: theme.green }}
+              >
+                All environments in sync
+              </span>
+              <Button onClick={onCancel}>Close</Button>
+            </div>
+          ) : (
+            <>
+              <div
+                style={{
+                  fontFamily: theme.sans,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: theme.text,
+                  marginBottom: 10,
+                }}
+              >
+                Sync {namespace} — {plan.totalKeys} key{plan.totalKeys !== 1 ? "s" : ""} to scaffold
+              </div>
+
+              {plan.hasProtectedEnvs && (
+                <div
+                  style={{
+                    fontFamily: theme.sans,
+                    fontSize: 12,
+                    color: theme.yellow,
+                    background: theme.yellowDim,
+                    border: `1px solid ${theme.yellow}33`,
+                    borderRadius: 5,
+                    padding: "6px 12px",
+                    marginBottom: 10,
+                  }}
+                >
+                  Includes protected environment(s)
+                </div>
+              )}
+
+              <div data-testid="sync-preview-list" style={{ marginBottom: 12 }}>
+                {plan.cells.map((cell) => (
+                  <div
+                    key={`${cell.namespace}/${cell.environment}`}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      padding: "4px 0",
+                    }}
+                  >
+                    <EnvBadge env={cell.environment} />
+                    <span
+                      style={{
+                        fontFamily: theme.mono,
+                        fontSize: 12,
+                        color: theme.textMuted,
+                      }}
+                    >
+                      {cell.missingKeys.join(", ")}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div style={{ display: "flex", gap: 8 }}>
+                <Button variant="primary" data-testid="sync-execute-btn" onClick={handleSync}>
+                  Sync Now
+                </Button>
+                <Button data-testid="sync-cancel-btn" onClick={onCancel}>
+                  Cancel
+                </Button>
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {phase === "syncing" && (
+        <div style={{ fontFamily: theme.sans, fontSize: 13, color: theme.accent }}>Syncing...</div>
+      )}
+
+      {phase === "done" && result && (
+        <div
+          data-testid="sync-done"
+          style={{ fontFamily: theme.sans, fontSize: 13, color: theme.green }}
+        >
+          Synced {result.totalKeysScaffolded} key{result.totalKeysScaffolded !== 1 ? "s" : ""}{" "}
+          across {result.modifiedCells.length} environment
+          {result.modifiedCells.length !== 1 ? "s" : ""}
+        </div>
+      )}
+
+      {phase === "error" && (
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <span style={{ fontFamily: theme.sans, fontSize: 13, color: theme.red }}>{error}</span>
+          <Button onClick={onCancel}>Close</Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/screens/BackendScreen.tsx

@@ -45,7 +45,6 @@ const BACKEND_LABELS: Record<BackendType, string> = {
   gcpkms: "GCP KMS",
   azurekv: "Azure Key Vault",
   pgp: "PGP",
-  cloud: "Cloud KMS",
 };
 
 const KEY_PLACEHOLDERS: Record<string, string> = {

package/src/client/screens/MatrixView.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { theme } from "../theme";
 import { TopBar } from "../components/TopBar";
 import { Button } from "../components/Button";
 import { MatrixGrid } from "../components/MatrixGrid";
+import { SyncPanel } from "../components/SyncPanel";
 import type { ViewName } from "../components/Sidebar";
 import type { ClefManifest, MatrixStatus } from "@clef-sh/core";
 
@@ -11,9 +12,17 @@ interface MatrixViewProps {
   setNs: (ns: string) => void;
   manifest: ClefManifest | null;
   matrixStatuses: MatrixStatus[];
+  reloadMatrix?: () => void;
 }
 
-export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixViewProps) {
+export function MatrixView({
+  setView,
+  setNs,
+  manifest,
+  matrixStatuses,
+  reloadMatrix,
+}: MatrixViewProps) {
+  const [syncingNs, setSyncingNs] = useState<string | null>(null);
   if (!manifest) {
     return (
       <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
@@ -138,8 +147,21 @@ export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixV
             setNs(nsName);
             setView("editor");
           }}
+          onSyncClick={(nsName) => setSyncingNs(nsName)}
+          syncingNs={syncingNs}
         />
 
+        {syncingNs && (
+          <SyncPanel
+            namespace={syncingNs}
+            onComplete={() => {
+              setSyncingNs(null);
+              reloadMatrix?.();
+            }}
+            onCancel={() => setSyncingNs(null)}
+          />
+        )}
+
         {/* Quick actions */}
         <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
           <Button data-testid="diff-environments-btn" onClick={() => setView("diff")}>

package/src/client/screens/NamespaceEditor.test.tsx

@@ -42,7 +42,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByText("DB_HOST")).toBeInTheDocument();
@@ -56,7 +56,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Click production tab
@@ -77,7 +77,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -94,7 +94,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByText("Decrypt failed")).toBeInTheDocument();
@@ -107,7 +107,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -126,7 +126,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -149,7 +149,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -188,7 +188,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -206,7 +206,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Open overflow menu
@@ -230,7 +230,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -260,7 +260,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -292,7 +292,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Reveal the value
@@ -318,7 +318,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Reveal a value to start the timer
@@ -347,7 +347,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -384,7 +384,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -435,7 +435,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -480,7 +480,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -509,7 +509,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Stay on dev tab (default)
@@ -542,7 +542,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByTestId("accept-value-DB_HOST")).toBeInTheDocument();
@@ -569,7 +569,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Click accept
@@ -598,7 +598,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -615,7 +615,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -638,7 +638,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -672,7 +672,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {

package/src/client/screens/NamespaceEditor.tsx

@@ -20,10 +20,9 @@ interface EditorRow {
 interface NamespaceEditorProps {
   ns: string;
   manifest: ClefManifest | null;
-  onCommit: (message: string) => Promise<void>;
 }
 
-export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps) {
+export function NamespaceEditor({ ns, manifest }: NamespaceEditorProps) {
   const [env, setEnv] = useState("");
   const [rows, setRows] = useState<EditorRow[]>([]);
   const [adding, setAdding] = useState(false);
@@ -35,8 +34,7 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [commitMessage, setCommitMessage] = useState("");
-  const [showCommitInput, setShowCommitInput] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [sopsInfo, setSopsInfo] = useState("");
   const [lintIssues, setLintIssues] = useState<LintIssue[]>([]);
   const [protectedConfirm, setProtectedConfirm] = useState<"save" | "add" | null>(null);
@@ -129,33 +127,25 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
 
   const handleSave = async (confirmed?: boolean) => {
     const dirtyRows = rows.filter((r) => r.edited);
-    // The edit-multiple-rows flow batches: each PUT writes without committing
-    // (commit: false), then a single explicit POST /api/git/commit at the end
-    // wraps all the changes in one commit. The other write paths in this
-    // editor (handleAdd, handleDelete, handleResetToRandom, handleAccept)
-    // omit the commit flag so each one auto-commits — which is what users
-    // want for single-action mutations.
-    await Promise.all(
-      dirtyRows.map((row) => {
-        const payload: Record<string, unknown> = { value: row.value, commit: false };
+    if (dirtyRows.length === 0) return;
+    setSaving(true);
+    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.
+      for (const row of dirtyRows) {
+        const payload: Record<string, unknown> = { value: row.value };
         if (confirmed) payload.confirmed = true;
-        return apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
+        await apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
         });
-      }),
-    );
-    if (commitMessage) {
-      // Await the commit so the working tree is clean by the time handleSave
-      // returns. Without this, subsequent transactional operations (here in
-      // the UI or via the CLI) would race against the in-flight commit and
-      // hit the dirty-tree preflight refusal.
-      await onCommit(commitMessage);
+      }
+      await loadData();
+    } finally {
+      setSaving(false);
     }
-    setShowCommitInput(false);
-    setCommitMessage("");
-    await loadData();
   };
 
   const handleAdd = async (confirmed?: boolean) => {
@@ -279,45 +269,21 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
         subtitle={`Namespace \u00B7 ${rows.length} keys`}
         actions={
           <>
-            {hasChanges && !showCommitInput && (
-              <Button variant="primary" onClick={() => setShowCommitInput(true)}>
-                Commit changes
+            {hasChanges && (
+              <Button
+                variant="primary"
+                disabled={saving}
+                onClick={() => {
+                  if (isProduction) {
+                    setProtectedConfirm("save");
+                  } else {
+                    handleSave();
+                  }
+                }}
+              >
+                {saving ? "Saving..." : "Save"}
               </Button>
             )}
-            {showCommitInput && (
-              <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
-                <input
-                  data-testid="commit-message-input"
-                  value={commitMessage}
-                  onChange={(e) => setCommitMessage(e.target.value)}
-                  placeholder="Commit message..."
-                  style={{
-                    background: "#0D0F14",
-                    border: `1px solid ${theme.borderLight}`,
-                    borderRadius: 5,
-                    padding: "5px 10px",
-                    fontFamily: theme.mono,
-                    fontSize: 12,
-                    color: theme.text,
-                    outline: "none",
-                    width: 220,
-                  }}
-                />
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    if (isProduction) {
-                      setProtectedConfirm("save");
-                    } else {
-                      handleSave();
-                    }
-                  }}
-                >
-                  Save & Commit
-                </Button>
-                <Button onClick={() => setShowCommitInput(false)}>Cancel</Button>
-              </div>
-            )}
             <Button variant="primary" data-testid="add-key-btn" onClick={() => setAdding(true)}>
               + Add key
             </Button>