@clef-sh/ui 0.1.13-beta.88

package/src/client/api.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Tests for client/api.ts — session token management and apiFetch wrapper.
+ *
+ * Each test gets a fresh module instance via jest.resetModules() so the
+ * module-level `sessionToken` variable always starts as null.
+ */
+
+describe("client/api module", () => {
+  let mod: typeof import("./api");
+
+  beforeEach(() => {
+    // Reset module registry so sessionToken starts as null for every test
+    jest.resetModules();
+    // Reset URL to a clean baseline
+    window.history.replaceState({}, "", "/");
+    // Clear sessionStorage so token state is clean
+    sessionStorage.clear();
+    // Get a fresh module
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    mod = require("./api") as typeof import("./api");
+    // Stub global fetch (jsdom does not provide a Response global)
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: jest.fn().mockResolvedValue({}),
+    } as unknown as Response);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    sessionStorage.clear();
+  });
+
+  describe("initToken()", () => {
+    it("should do nothing when the URL has no token parameter", () => {
+      // No ?token= in the URL — should not throw and should leave sessionToken null
+      mod.initToken();
+      mod.apiFetch("/api/test");
+      const [, callInit] = (global.fetch as jest.Mock).mock.calls[0];
+      const headers = callInit.headers as Headers;
+      expect(headers.get("Authorization")).toBeNull();
+    });
+
+    it("should extract the token from the URL query string", () => {
+      window.history.pushState({}, "", "/?token=abc123");
+      mod.initToken();
+      // After initToken the token should be forwarded in apiFetch
+      mod.apiFetch("/api/test");
+      const [, callInit] = (global.fetch as jest.Mock).mock.calls[0];
+      const headers = callInit.headers as Headers;
+      expect(headers.get("Authorization")).toBe("Bearer abc123");
+    });
+
+    it("should remove the token from the URL after extracting it", () => {
+      window.history.pushState({}, "", "/?token=abc123");
+      const replaceSpy = jest.spyOn(window.history, "replaceState");
+      mod.initToken();
+      expect(replaceSpy).toHaveBeenCalled();
+      expect(window.location.search).not.toContain("token=");
+    });
+
+    it("should restore the token from sessionStorage on refresh (no URL token)", () => {
+      // Simulate a previous visit that saved the token
+      sessionStorage.setItem("clef_ui_token", "stored-token");
+      // URL has no token (simulates a browser refresh)
+      mod.initToken();
+      mod.apiFetch("/api/test");
+      const [, callInit] = (global.fetch as jest.Mock).mock.calls[0];
+      const headers = callInit.headers as Headers;
+      expect(headers.get("Authorization")).toBe("Bearer stored-token");
+    });
+
+    it("should persist the token to sessionStorage when extracted from URL", () => {
+      window.history.pushState({}, "", "/?token=abc123");
+      mod.initToken();
+      expect(sessionStorage.getItem("clef_ui_token")).toBe("abc123");
+    });
+  });
+
+  describe("apiFetch()", () => {
+    it("should call fetch without an Authorization header when no token is set", () => {
+      mod.apiFetch("/api/manifest");
+      const [, callInit] = (global.fetch as jest.Mock).mock.calls[0];
+      const headers = callInit.headers as Headers;
+      expect(headers.get("Authorization")).toBeNull();
+    });
+
+    it("should forward extra init options to fetch", () => {
+      mod.apiFetch("/api/test", { method: "POST", body: JSON.stringify({ x: 1 }) });
+      const [url, callInit] = (global.fetch as jest.Mock).mock.calls[0];
+      expect(url).toBe("/api/test");
+      expect(callInit.method).toBe("POST");
+    });
+  });
+});

package/src/client/api.ts

@@ -0,0 +1,30 @@
+// Session token — extracted from URL query parameter on initial page load.
+// Persisted in sessionStorage so it survives same-tab refreshes but is
+// cleared when the tab closes (never written to localStorage).
+const SESSION_KEY = "clef_ui_token";
+
+let sessionToken: string | null = null;
+
+export function initToken(): void {
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get("token");
+  if (token) {
+    sessionToken = token;
+    sessionStorage.setItem(SESSION_KEY, token);
+    // Remove token from URL to avoid leaking it in browser history
+    const url = new URL(window.location.href);
+    url.searchParams.delete("token");
+    window.history.replaceState({}, "", url.pathname + url.hash);
+  } else {
+    // Restore from sessionStorage on refresh (token no longer in URL)
+    sessionToken = sessionStorage.getItem(SESSION_KEY);
+  }
+}
+
+export function apiFetch(path: string, init?: RequestInit): Promise<Response> {
+  const headers = new Headers(init?.headers);
+  if (sessionToken) {
+    headers.set("Authorization", `Bearer ${sessionToken}`);
+  }
+  return fetch(path, { ...init, headers });
+}

package/src/client/components/Button.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { theme } from "../theme";
+
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  children: React.ReactNode;
+  variant?: "primary" | "ghost" | "danger";
+  icon?: React.ReactNode;
+  type?: "button" | "submit";
+}
+
+const VARIANT_STYLES = {
+  primary: { bg: theme.accent, color: "#000", border: "none" },
+  ghost: { bg: "transparent", color: theme.text, border: `1px solid ${theme.borderLight}` },
+  danger: { bg: theme.redDim, color: theme.red, border: `1px solid ${theme.red}44` },
+};
+
+export function Button({
+  children,
+  variant = "ghost",
+  onClick,
+  icon,
+  type = "button",
+  style: _styleProp,
+  ...rest
+}: ButtonProps) {
+  const s = VARIANT_STYLES[variant];
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      {...rest}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "5px 12px",
+        borderRadius: 6,
+        cursor: "pointer",
+        fontFamily: theme.sans,
+        fontSize: 12,
+        fontWeight: 600,
+        background: s.bg,
+        color: s.color,
+        border: s.border,
+        transition: "all 0.12s",
+      }}
+    >
+      {icon && <span style={{ display: "flex" }}>{icon}</span>}
+      {children}
+    </button>
+  );
+}

package/src/client/components/CopyButton.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CopyButton } from "./CopyButton";
+
+describe("CopyButton", () => {
+  beforeEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText: jest.fn().mockResolvedValue(undefined) },
+      writable: true,
+      configurable: true,
+    });
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("renders with 'copy' label by default", () => {
+    render(<CopyButton text="hello world" />);
+    expect(screen.getByTestId("copy-button")).toBeInTheDocument();
+    expect(screen.getByTestId("copy-button")).toHaveTextContent("copy");
+  });
+
+  it("shows 'copied!' after clicking and reverts after timeout", async () => {
+    render(<CopyButton text="hello world" />);
+    const button = screen.getByTestId("copy-button");
+
+    act(() => {
+      fireEvent.click(button);
+    });
+
+    expect(button).toHaveTextContent("copied!");
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("hello world");
+
+    act(() => {
+      jest.advanceTimersByTime(1800);
+    });
+
+    expect(button).toHaveTextContent("copy");
+  });
+});

package/src/client/components/CopyButton.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useCallback } from "react";
+import { theme } from "../theme";
+
+interface CopyButtonProps {
+  text: string;
+}
+
+export function CopyButton({ text }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard?.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }, [text]);
+
+  return (
+    <button
+      data-testid="copy-button"
+      onClick={handleCopy}
+      style={{
+        background: copied ? theme.greenDim : "none",
+        border: `1px solid ${copied ? theme.green + "55" : theme.borderLight}`,
+        borderRadius: 4,
+        cursor: "pointer",
+        color: copied ? theme.green : theme.textDim,
+        fontFamily: theme.mono,
+        fontSize: 10,
+        padding: "2px 8px",
+        transition: "all 0.15s",
+      }}
+    >
+      {copied ? "copied!" : "copy"}
+    </button>
+  );
+}

package/src/client/components/EnvBadge.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { theme, ENV_COLORS } from "../theme";
+
+interface EnvBadgeProps {
+  env: string;
+  small?: boolean;
+}
+
+export function EnvBadge({ env, small }: EnvBadgeProps) {
+  const c = ENV_COLORS[env] ?? {
+    color: theme.textMuted,
+    bg: "transparent",
+    label: env.toUpperCase().slice(0, 3),
+  };
+  return (
+    <span
+      style={{
+        fontFamily: theme.mono,
+        fontSize: small ? "9px" : "10px",
+        fontWeight: 700,
+        color: c.color,
+        background: c.bg,
+        border: `1px solid ${c.color}33`,
+        borderRadius: "3px",
+        padding: small ? "1px 5px" : "2px 7px",
+        letterSpacing: "0.08em",
+      }}
+    >
+      {c.label}
+    </span>
+  );
+}

package/src/client/components/MatrixGrid.tsx

@@ -0,0 +1,265 @@
+import React from "react";
+import { theme } from "../theme";
+import { EnvBadge } from "./EnvBadge";
+import { StatusDot } from "./StatusDot";
+import type { MatrixStatus } from "@clef-sh/core";
+
+export interface MatrixGridProps {
+  namespaces: Array<{ name: string }>;
+  environments: Array<{ name: string }>;
+  matrixStatuses: MatrixStatus[];
+  onNamespaceClick?: (ns: string) => void;
+}
+
+function getStatusType(status: MatrixStatus): string {
+  if (!status.cell.exists) return "missing_keys";
+  const hasError = status.issues.some((i) => i.type === "missing_keys" || i.type === "sops_error");
+  const hasWarning = status.issues.some((i) => i.type === "schema_warning");
+  if (hasError) return "missing_keys";
+  if (hasWarning) return "schema_warn";
+  return "ok";
+}
+
+function formatDate(d: Date | null): string {
+  if (!d) return "never";
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffH = Math.floor(diffMs / (1000 * 60 * 60));
+  if (diffH < 1) return "just now";
+  if (diffH < 24) return `${diffH}h ago`;
+  const diffD = Math.floor(diffH / 24);
+  if (diffD < 7) return `${diffD}d ago`;
+  const diffW = Math.floor(diffD / 7);
+  return `${diffW}w ago`;
+}
+
+export function MatrixGrid({
+  namespaces,
+  environments,
+  matrixStatuses,
+  onNamespaceClick,
+}: MatrixGridProps) {
+  return (
+    <div
+      data-testid="matrix-table"
+      style={{
+        background: theme.surface,
+        border: `1px solid ${theme.border}`,
+        borderRadius: 12,
+        overflow: "hidden",
+      }}
+    >
+      {/* Header row */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
+          borderBottom: `1px solid ${theme.border}`,
+          background: "#0D0F14",
+        }}
+      >
+        <div
+          style={{
+            padding: "12px 20px",
+            fontFamily: theme.sans,
+            fontSize: 11,
+            fontWeight: 600,
+            color: theme.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+          }}
+        >
+          Namespace
+        </div>
+        {environments.map((env) => (
+          <div
+            key={env.name}
+            style={{
+              padding: "12px 20px",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              borderLeft: `1px solid ${theme.border}`,
+            }}
+          >
+            <EnvBadge env={env.name} />
+            <span
+              style={{
+                fontFamily: theme.sans,
+                fontSize: 12,
+                fontWeight: 500,
+                color: theme.text,
+              }}
+            >
+              {env.name}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Namespace rows */}
+      {namespaces.map((ns, i) => (
+        <div
+          key={ns.name}
+          data-testid={`matrix-row-${ns.name}`}
+          role="button"
+          tabIndex={0}
+          onClick={() => onNamespaceClick?.(ns.name)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onNamespaceClick?.(ns.name);
+          }}
+          style={{
+            display: "grid",
+            gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
+            borderBottom: i < namespaces.length - 1 ? `1px solid ${theme.border}` : "none",
+            cursor: onNamespaceClick ? "pointer" : "default",
+            transition: "background 0.1s",
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLElement).style.background = "transparent";
+          }}
+        >
+          {/* Namespace label */}
+          <div
+            style={{
+              padding: "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+            }}
+          >
+            <span
+              style={{
+                fontFamily: theme.mono,
+                fontSize: 11,
+                color: theme.textDim,
+              }}
+            >
+              //
+            </span>
+            <span
+              style={{
+                fontFamily: theme.mono,
+                fontSize: 13,
+                fontWeight: 600,
+                color: theme.text,
+              }}
+            >
+              {ns.name}
+            </span>
+          </div>
+
+          {/* Environment cells */}
+          {environments.map((env) => {
+            const cellStatus = matrixStatuses.find(
+              (s) => s.cell.namespace === ns.name && s.cell.environment === env.name,
+            );
+            const statusType = cellStatus ? getStatusType(cellStatus) : "ok";
+            const keyCount = cellStatus?.keyCount ?? 0;
+            const lastMod = cellStatus?.lastModified
+              ? formatDate(
+                  cellStatus.lastModified instanceof Date
+                    ? cellStatus.lastModified
+                    : new Date(cellStatus.lastModified as unknown as string),
+                )
+              : "never";
+            const missingKeyCount = cellStatus
+              ? new Set(
+                  cellStatus.issues
+                    .filter((i) => i.type === "missing_keys" && i.key)
+                    .map((i) => i.key),
+                ).size
+              : 0;
+            const warnKeyCount = cellStatus
+              ? cellStatus.issues.filter((i) => i.type === "schema_warning").length
+              : 0;
+            const cellPending = cellStatus?.pendingCount ?? 0;
+
+            return (
+              <div
+                key={env.name}
+                style={{
+                  padding: "14px 20px",
+                  borderLeft: `1px solid ${theme.border}`,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 5,
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                  <StatusDot status={statusType} />
+                  <span
+                    style={{
+                      fontFamily: theme.mono,
+                      fontSize: 11,
+                      color: theme.textMuted,
+                    }}
+                  >
+                    {keyCount} keys
+                  </span>
+                  {missingKeyCount > 0 && (
+                    <span
+                      style={{
+                        fontFamily: theme.mono,
+                        fontSize: 10,
+                        color: theme.red,
+                        background: theme.redDim,
+                        border: `1px solid ${theme.red}33`,
+                        borderRadius: 3,
+                        padding: "1px 5px",
+                      }}
+                    >
+                      -{missingKeyCount} missing
+                    </span>
+                  )}
+                  {warnKeyCount > 0 && (
+                    <span
+                      style={{
+                        fontFamily: theme.mono,
+                        fontSize: 10,
+                        color: theme.yellow,
+                        background: theme.yellowDim,
+                        border: `1px solid ${theme.yellow}33`,
+                        borderRadius: 3,
+                        padding: "1px 5px",
+                      }}
+                    >
+                      {warnKeyCount} warn
+                    </span>
+                  )}
+                  {cellPending > 0 && (
+                    <span
+                      style={{
+                        fontFamily: theme.mono,
+                        fontSize: 10,
+                        color: theme.accent,
+                        background: `${theme.accent}18`,
+                        border: `1px solid ${theme.accent}33`,
+                        borderRadius: 3,
+                        padding: "1px 5px",
+                      }}
+                    >
+                      {cellPending} pending
+                    </span>
+                  )}
+                </div>
+                <div
+                  style={{
+                    fontFamily: theme.mono,
+                    fontSize: 10,
+                    color: theme.textDim,
+                  }}
+                >
+                  {lastMod}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}