@clef-sh/ui 0.1.16 → 0.1.18

package/src/client/components/Sidebar.tsx

@@ -8,6 +8,7 @@ export type ViewName =
   | "diff"
   | "lint"
   | "scan"
+  | "policy"
   | "import"
   | "recipients"
   | "identities"
@@ -26,6 +27,7 @@ interface SidebarProps {
   gitStatus: GitStatusType | null;
   lintErrorCount: number;
   scanIssueCount: number;
+  policyOverdueCount: number;
 }
 
 export function Sidebar({
@@ -38,6 +40,7 @@ export function Sidebar({
   gitStatus,
   lintErrorCount,
   scanIssueCount,
+  policyOverdueCount,
 }: SidebarProps) {
   const uncommittedCount = gitStatus
     ? gitStatus.staged.length + gitStatus.unstaged.length + gitStatus.untracked.length
@@ -49,7 +52,11 @@ export function Sidebar({
     <div
       style={{
         width: 220,
-        minHeight: "100vh",
+        // Fixed viewport height (not minHeight) so the flex column can
+        // actually clip overflow.  Paired with overflowY: auto on the nav
+        // block below, this lets the middle section scroll when the list
+        // grows or the user zooms in, while the logo and footer stay pinned.
+        height: "100vh",
         background: theme.surface,
         borderRight: `1px solid ${theme.border}`,
         display: "flex",
@@ -109,7 +116,18 @@ export function Sidebar({
       </div>
 
       {/* Nav */}
-      <div style={{ padding: "12px 10px", flex: 1 }}>
+      <div
+        style={{
+          padding: "12px 10px",
+          flex: 1,
+          // minHeight: 0 is the standard flex quirk — without it, a flex
+          // child's scrollable content never shrinks below its intrinsic
+          // size, so overflowY: auto would never actually clip.
+          minHeight: 0,
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}
+      >
         <NavItem
           icon={"\u229E"}
           label="Matrix"
@@ -138,6 +156,14 @@ export function Sidebar({
           badge={scanIssueCount > 0 ? String(scanIssueCount) : undefined}
           badgeColor={theme.yellow}
         />
+        <NavItem
+          icon={"\u2696"}
+          label="Policy"
+          active={activeView === "policy"}
+          onClick={() => setView("policy")}
+          badge={policyOverdueCount > 0 ? String(policyOverdueCount) : undefined}
+          badgeColor={theme.red}
+        />
         <NavItem
           icon={"\u2B06"}
           label="Import"

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

@@ -691,4 +691,104 @@ describe("NamespaceEditor", () => {
     // Key should still be there
     expect(screen.getByText("DB_HOST")).toBeInTheDocument();
   });
+
+  it("surfaces the server error and resets UI to on-disk state on Save failure", async () => {
+    // Route by method: all GETs (decrypt + lint) succeed; the PUT that
+    // handleSave issues rejects with a 500 (dirty-tree preflight failure).
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fetchMock = jest.fn().mockImplementation((_url: string, init?: any) => {
+      if (init?.method === "PUT") {
+        return Promise.resolve({
+          ok: false,
+          status: 500,
+          json: () =>
+            Promise.resolve({
+              error: "Working tree has uncommitted changes. Refusing to mutate.",
+              code: "SET_ERROR",
+            }),
+        } as Response);
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(mockDecrypted),
+      } as Response);
+    });
+    global.fetch = fetchMock;
+
+    await act(async () => {
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
+    });
+
+    // Reveal + edit DB_HOST to produce a dirty row.
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("eye-DB_HOST"));
+    });
+    await act(async () => {
+      fireEvent.change(screen.getByTestId("value-input-DB_HOST"), {
+        target: { value: "rotated" },
+      });
+    });
+
+    // Click the Save button (rendered once a row is dirty).
+    await act(async () => {
+      fireEvent.click(screen.getByText("Save"));
+    });
+
+    // The server's error message reaches the user — no silent success.
+    expect(screen.getByText(/Working tree has uncommitted changes/)).toBeInTheDocument();
+    // UI resets to on-disk state: dirty indicator gone, value re-masked
+    // (value-input replaced by bullet-mask span), Save button hidden.
+    expect(screen.queryByTestId("dirty-dot")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("value-input-DB_HOST")).not.toBeInTheDocument();
+    expect(screen.queryByText("Save")).not.toBeInTheDocument();
+  });
+
+  it("bails on first failure in a batch save without issuing further PUTs", async () => {
+    // All GETs succeed; every PUT 500s.  We expect handleSave to abort
+    // after the first PUT and never issue the second.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fetchMock = jest.fn().mockImplementation((_url: string, init?: any) => {
+      if (init?.method === "PUT") {
+        return Promise.resolve({
+          ok: false,
+          status: 500,
+          json: () => Promise.resolve({ error: "boom" }),
+        } as Response);
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(mockDecrypted),
+      } as Response);
+    });
+    global.fetch = fetchMock;
+
+    await act(async () => {
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
+    });
+
+    // Dirty both rows.
+    for (const key of ["DB_HOST", "DB_PORT"]) {
+      await act(async () => {
+        fireEvent.click(screen.getByTestId(`eye-${key}`));
+      });
+      await act(async () => {
+        fireEvent.change(screen.getByTestId(`value-input-${key}`), {
+          target: { value: `${key}-new` },
+        });
+      });
+    }
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Save"));
+    });
+
+    // Exactly one PUT was attempted — the second row was skipped after the
+    // first failure.  Initial GET + one PUT = 2 fetch calls total.
+    const putCalls = fetchMock.mock.calls.filter(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (c: any[]) => c[1]?.method === "PUT",
+    );
+    expect(putCalls).toHaveLength(1);
+    expect(screen.getByText("boom")).toBeInTheDocument();
+  });
 });

package/src/client/screens/NamespaceEditor.tsx

@@ -130,20 +130,38 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
     const dirtyRows = rows.filter((r) => r.edited);
     if (dirtyRows.length === 0) return;
     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 };
         if (confirmed) payload.confirmed = true;
-        await apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
+        const res = await apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           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 {
       await loadData();
+      setError("Failed to save changes");
     } finally {
       setSaving(false);
     }
@@ -401,9 +419,12 @@ export function NamespaceEditor({ ns, initialEnv, manifest }: NamespaceEditorPro
           </div>
         )}
 
-        {!loading && !error && (
+        {!loading && (
           <>
-            {/* Keys table */}
+            {/* 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,

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

@@ -0,0 +1,278 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PolicyView } from "./PolicyView";
+import type { FileRotationStatus, KeyRotationStatus } from "@clef-sh/core";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let global: any;
+
+function okKey(name: string): KeyRotationStatus {
+  return {
+    key: name,
+    last_rotated_at: "2026-01-01T00:00:00Z",
+    last_rotated_known: true,
+    rotated_by: "alice <alice@example.com>",
+    rotation_count: 1,
+    rotation_due: "2026-04-01T00:00:00Z",
+    rotation_overdue: false,
+    days_overdue: 0,
+    compliant: true,
+  };
+}
+
+function overdueKey(name: string, daysOverdue: number): KeyRotationStatus {
+  return {
+    key: name,
+    last_rotated_at: "2025-01-01T00:00:00Z",
+    last_rotated_known: true,
+    rotated_by: "alice <alice@example.com>",
+    rotation_count: 2,
+    rotation_due: "2025-04-01T00:00:00Z",
+    rotation_overdue: true,
+    days_overdue: daysOverdue,
+    compliant: false,
+  };
+}
+
+function unknownKey(name: string): KeyRotationStatus {
+  return {
+    key: name,
+    last_rotated_at: null,
+    last_rotated_known: false,
+    rotated_by: null,
+    rotation_count: 0,
+    rotation_due: null,
+    rotation_overdue: false,
+    days_overdue: 0,
+    compliant: false,
+  };
+}
+
+function makeFile(overrides: Partial<FileRotationStatus> = {}): FileRotationStatus {
+  const base: FileRotationStatus = {
+    path: "database/dev.enc.yaml",
+    environment: "dev",
+    backend: "age",
+    recipients: ["age1abc"],
+    last_modified: "2026-01-01T00:00:00Z",
+    last_modified_known: true,
+    keys: [okKey("DB_URL")],
+    compliant: true,
+  };
+  const merged = { ...base, ...overrides };
+  if (!("compliant" in overrides)) {
+    merged.compliant = merged.keys.every((k) => k.compliant);
+  }
+  return merged;
+}
+
+const mixedResponse = {
+  files: [
+    makeFile({
+      path: "database/production.enc.yaml",
+      environment: "production",
+      keys: [overdueKey("DB_PROD_URL", 380)],
+    }),
+    makeFile({
+      path: "payments/staging.enc.yaml",
+      environment: "staging",
+      keys: [unknownKey("STRIPE_KEY")],
+    }),
+    makeFile({ path: "auth/dev.enc.yaml", environment: "dev", keys: [okKey("AUTH0_SECRET")] }),
+  ],
+  summary: { total_files: 3, compliant: 1, rotation_overdue: 2, unknown_metadata: 1 },
+  policy: { version: 1, rotation: { max_age_days: 90 } },
+  source: "default" as const,
+};
+
+const policyShowResponse = {
+  policy: { version: 1, rotation: { max_age_days: 90 } },
+  source: "default" as const,
+  path: ".clef/policy.yaml",
+  rawYaml: "version: 1\nrotation:\n  max_age_days: 90\n",
+};
+
+const allCompliantResponse = {
+  files: [makeFile()],
+  summary: { total_files: 1, compliant: 1, rotation_overdue: 0, unknown_metadata: 0 },
+  policy: { version: 1, rotation: { max_age_days: 90 } },
+  source: "file" as const,
+};
+
+function mockFetchSequence(checkBody: object, policyBody: object): jest.Mock {
+  const fn = jest.fn().mockImplementation(async (url: string) => {
+    if (url.endsWith("/api/policy/check")) {
+      return { ok: true, json: () => Promise.resolve(checkBody) } as Response;
+    }
+    if (url.endsWith("/api/policy")) {
+      return { ok: true, json: () => Promise.resolve(policyBody) } as Response;
+    }
+    return { ok: false, json: () => Promise.resolve({}) } as Response;
+  });
+  global.fetch = fn;
+  return fn;
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete (global as any).fetch;
+});
+
+describe("PolicyView", () => {
+  it("renders rotation rows grouped by status with summary chips", async () => {
+    mockFetchSequence(mixedResponse, policyShowResponse);
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.getByText("database/production.enc.yaml")).toBeInTheDocument();
+    expect(screen.getByText("payments/staging.enc.yaml")).toBeInTheDocument();
+    expect(screen.getByText("auth/dev.enc.yaml")).toBeInTheDocument();
+
+    expect(screen.getByTestId("filter-overdue")).toHaveTextContent("1");
+    expect(screen.getByTestId("filter-unknown")).toHaveTextContent("1");
+    expect(screen.getByTestId("filter-ok")).toHaveTextContent("1");
+  });
+
+  it("filters rows by status when a chip is clicked", async () => {
+    mockFetchSequence(mixedResponse, policyShowResponse);
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("filter-overdue"));
+    });
+
+    expect(screen.getByText("database/production.enc.yaml")).toBeInTheDocument();
+    expect(screen.queryByText("auth/dev.enc.yaml")).not.toBeInTheDocument();
+    expect(screen.queryByText("payments/staging.enc.yaml")).not.toBeInTheDocument();
+  });
+
+  it("shows the all-compliant state when nothing is overdue or unknown", async () => {
+    mockFetchSequence(allCompliantResponse, policyShowResponse);
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.getByTestId("all-compliant")).toBeInTheDocument();
+    expect(screen.getByText("All compliant")).toBeInTheDocument();
+    // Per-key summary: 1 key across 1 file. Regex matches "1 key within ..." with any suffix.
+    expect(screen.getByText(/1 key within rotation window across 1 file/)).toBeInTheDocument();
+  });
+
+  it("shows the source badge — 'Built-in default' when source is 'default'", async () => {
+    mockFetchSequence(mixedResponse, policyShowResponse);
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.getByTestId("policy-source")).toHaveTextContent("Built-in default");
+  });
+
+  it("shows the source badge — '.clef/policy.yaml' when source is 'file'", async () => {
+    mockFetchSequence(allCompliantResponse, { ...policyShowResponse, source: "file" });
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.getByTestId("policy-source")).toHaveTextContent(".clef/policy.yaml");
+  });
+
+  it("toggles the YAML view via the View YAML button", async () => {
+    mockFetchSequence(mixedResponse, policyShowResponse);
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.queryByTestId("raw-yaml")).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("toggle-yaml"));
+    });
+
+    expect(screen.getByTestId("raw-yaml")).toBeInTheDocument();
+    expect(screen.getByTestId("raw-yaml")).toHaveTextContent("max_age_days: 90");
+  });
+
+  it("navigates to the editor when a file ref is clicked", async () => {
+    mockFetchSequence(mixedResponse, policyShowResponse);
+    const setView = jest.fn();
+    const setNs = jest.fn();
+
+    await act(async () => {
+      render(<PolicyView setView={setView} setNs={setNs} />);
+    });
+
+    fireEvent.click(screen.getByTestId("file-ref-database/production.enc.yaml"));
+
+    expect(setView).toHaveBeenCalledWith("editor");
+    expect(setNs).toHaveBeenCalledWith("database");
+  });
+
+  it("extracts the namespace from the second-to-last path segment (nested paths)", async () => {
+    // Bot repo layout: secrets/<namespace>/<env>.enc.yaml.  The namespace is
+    // "github", not "secrets" — previously file.path.split("/")[0] was
+    // returning "secrets" and producing a wrong `clef set` hint.
+    const nested = {
+      files: [
+        makeFile({
+          path: "secrets/github/dev.enc.yaml",
+          environment: "dev",
+          keys: [unknownKey("GITHUB_CLIENT_SECRET")],
+        }),
+      ],
+      summary: { total_files: 1, compliant: 0, rotation_overdue: 1, unknown_metadata: 1 },
+      policy: { version: 1, rotation: { max_age_days: 90 } },
+      source: "default" as const,
+    };
+    mockFetchSequence(nested, policyShowResponse);
+    const setView = jest.fn();
+    const setNs = jest.fn();
+
+    await act(async () => {
+      render(<PolicyView setView={setView} setNs={setNs} />);
+    });
+
+    fireEvent.click(screen.getByTestId("file-ref-secrets/github/dev.enc.yaml"));
+
+    expect(setNs).toHaveBeenCalledWith("github");
+    // And the unknown-row hint should suggest the correct namespace too.
+    expect(
+      screen.getByText(/run clef set github\/dev GITHUB_CLIENT_SECRET to establish/),
+    ).toBeInTheDocument();
+  });
+
+  it("renders a per-environment override chip when policy has environments block", async () => {
+    const withEnvOverride = {
+      ...mixedResponse,
+      policy: {
+        version: 1,
+        rotation: {
+          max_age_days: 90,
+          environments: { production: { max_age_days: 30 } },
+        },
+      },
+    };
+    mockFetchSequence(withEnvOverride, {
+      ...policyShowResponse,
+      policy: withEnvOverride.policy,
+    });
+
+    await act(async () => {
+      render(<PolicyView setView={jest.fn()} setNs={jest.fn()} />);
+    });
+
+    expect(screen.getByText("PRODUCTION")).toBeInTheDocument();
+    expect(screen.getByText("30d")).toBeInTheDocument();
+  });
+});