@clef-sh/ui 0.1.20 → 0.1.21

package/dist/server/envelope.js

@@ -0,0 +1,310 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerEnvelopeRoutes = registerEnvelopeRoutes;
+const fs = __importStar(require("fs"));
+const core_1 = require("@clef-sh/core");
+const runtime_1 = require("@clef-sh/runtime");
+// Source label for all UI-initiated artifact inspections — makes it obvious
+// in logs that the artifact came from a pasted input, not a file or URL.
+const UI_SOURCE = "paste";
+function setNoCacheHeaders(res) {
+    res.set({
+        "Cache-Control": "no-store, no-cache, must-revalidate",
+        Pragma: "no-cache",
+        Expires: "0",
+    });
+}
+// Precedence for the envelope debugger:
+//   1. $CLEF_AGE_KEY       (explicit env override — inline)
+//   2. $CLEF_AGE_KEY_FILE   (explicit env override — file path)
+//   3. deps.ageKey          (from CLI's resolveAgeCredential — may be keychain)
+//   4. deps.ageKeyFile      (from CLI's resolveAgeCredential — may be .clef/config.yaml)
+//
+// Env vars deliberately win over deps. The CLI's credential resolver
+// prefers the OS keychain when configured, so without this override an
+// operator who sets `CLEF_AGE_KEY_FILE=svc.key clef ui` to debug a
+// service-identity-packed envelope would see their keychain key used
+// instead — silently. Making env vars authoritative for the debugger
+// lets operators target a specific identity without affecting the rest
+// of `clef ui`.
+function resolveAgeIdentity(deps) {
+    const envInline = process.env.CLEF_AGE_KEY;
+    if (envInline) {
+        return { configured: true, source: "CLEF_AGE_KEY", path: null };
+    }
+    const envFile = process.env.CLEF_AGE_KEY_FILE;
+    if (envFile) {
+        return { configured: true, source: "CLEF_AGE_KEY_FILE", path: envFile };
+    }
+    if (deps.ageKey) {
+        return { configured: true, source: "CLEF_AGE_KEY", path: null };
+    }
+    if (deps.ageKeyFile) {
+        return { configured: true, source: "CLEF_AGE_KEY_FILE", path: deps.ageKeyFile };
+    }
+    return { configured: false, source: null, path: null };
+}
+function loadAgePrivateKey(deps) {
+    const ageDecryptor = new runtime_1.AgeDecryptor();
+    // Same precedence as resolveAgeIdentity — env vars win over deps.
+    if (process.env.CLEF_AGE_KEY) {
+        return ageDecryptor.resolveKey(process.env.CLEF_AGE_KEY);
+    }
+    if (process.env.CLEF_AGE_KEY_FILE) {
+        return ageDecryptor.resolveKey(undefined, process.env.CLEF_AGE_KEY_FILE);
+    }
+    if (deps.ageKey)
+        return ageDecryptor.resolveKey(deps.ageKey);
+    if (deps.ageKeyFile)
+        return ageDecryptor.resolveKey(undefined, deps.ageKeyFile);
+    throw new Error("No age identity configured on the server. " +
+        "Set CLEF_AGE_KEY_FILE or CLEF_AGE_KEY before launching `clef ui`.");
+}
+function registerEnvelopeRoutes(router, deps) {
+    // POST /api/envelope/inspect
+    router.post("/envelope/inspect", (req, res) => {
+        setNoCacheHeaders(res);
+        const raw = (req.body ?? {}).raw;
+        const verifyHash = (req.body ?? {}).verifyHash;
+        if (typeof raw !== "string") {
+            res.status(400).json({ error: "raw is required", code: "BAD_REQUEST" });
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (err) {
+            res.json((0, core_1.buildInspectError)(UI_SOURCE, "parse_failed", err.message));
+            return;
+        }
+        try {
+            (0, core_1.assertPackedArtifact)(parsed);
+        }
+        catch (err) {
+            const message = err instanceof core_1.InvalidArtifactError ? err.message : err.message;
+            res.json((0, core_1.buildInspectError)(UI_SOURCE, "invalid_artifact", message));
+            return;
+        }
+        const artifact = parsed;
+        const hashOk = verifyHash === false
+            ? true
+            : (0, core_1.computeCiphertextHash)(artifact.ciphertext) === artifact.ciphertextHash;
+        res.json((0, core_1.buildInspectResult)(UI_SOURCE, artifact, hashOk));
+    });
+    // POST /api/envelope/verify
+    router.post("/envelope/verify", (req, res) => {
+        setNoCacheHeaders(res);
+        const raw = (req.body ?? {}).raw;
+        const signerKey = (req.body ?? {}).signerKey;
+        if (typeof raw !== "string") {
+            res.status(400).json({ error: "raw is required", code: "BAD_REQUEST" });
+            return;
+        }
+        if (signerKey !== undefined && typeof signerKey !== "string") {
+            res.status(400).json({ error: "signerKey must be a string", code: "BAD_REQUEST" });
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (err) {
+            res.json((0, core_1.buildVerifyError)(UI_SOURCE, "parse_failed", err.message));
+            return;
+        }
+        try {
+            (0, core_1.assertPackedArtifact)(parsed);
+        }
+        catch (err) {
+            const message = err instanceof core_1.InvalidArtifactError ? err.message : err.message;
+            res.json((0, core_1.buildVerifyError)(UI_SOURCE, "invalid_artifact", message));
+            return;
+        }
+        const artifact = parsed;
+        const hashStatus = (0, core_1.computeCiphertextHash)(artifact.ciphertext) === artifact.ciphertextHash ? "ok" : "mismatch";
+        const signature = {
+            status: "absent",
+            algorithm: artifact.signatureAlgorithm ?? null,
+        };
+        if (typeof artifact.signature === "string") {
+            if (signerKey) {
+                let signerKeyBase64;
+                try {
+                    // UI is paste-only: no file paths accepted (D4).
+                    signerKeyBase64 = (0, core_1.parseSignerKey)(signerKey);
+                }
+                catch (err) {
+                    res.json((0, core_1.buildVerifyError)(UI_SOURCE, "signer_key_invalid", err.message));
+                    return;
+                }
+                const payload = (0, core_1.buildSigningPayload)(artifact);
+                try {
+                    signature.status = (0, core_1.verifySignature)(payload, artifact.signature, signerKeyBase64)
+                        ? "valid"
+                        : "invalid";
+                }
+                catch (err) {
+                    signature.status = "invalid";
+                    signature.algorithm = `error: ${err.message}`;
+                }
+            }
+            else {
+                signature.status = "not_verified";
+            }
+        }
+        const now = Date.now();
+        let expiry;
+        if (artifact.expiresAt) {
+            const expired = new Date(artifact.expiresAt).getTime() < now;
+            expiry = { status: expired ? "expired" : "ok", expiresAt: artifact.expiresAt };
+        }
+        else {
+            expiry = { status: "absent", expiresAt: null };
+        }
+        const revocation = artifact.revokedAt
+            ? { status: "revoked", revokedAt: artifact.revokedAt }
+            : { status: "absent", revokedAt: null };
+        const inputs = { hash: hashStatus, signature, expiry, revocation };
+        res.json((0, core_1.buildVerifyResult)(UI_SOURCE, inputs));
+    });
+    // POST /api/envelope/decrypt
+    router.post("/envelope/decrypt", async (req, res) => {
+        setNoCacheHeaders(res);
+        const raw = (req.body ?? {}).raw;
+        const reveal = (req.body ?? {}).reveal === true;
+        const key = (req.body ?? {}).key;
+        if (typeof raw !== "string") {
+            res.status(400).json({ error: "raw is required", code: "BAD_REQUEST" });
+            return;
+        }
+        if (key !== undefined && typeof key !== "string") {
+            res.status(400).json({ error: "key must be a string", code: "BAD_REQUEST" });
+            return;
+        }
+        if (reveal && key) {
+            res.status(400).json({
+                error: "reveal and key are mutually exclusive; pick one",
+                code: "BAD_REQUEST",
+            });
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (err) {
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "parse_failed", err.message));
+            return;
+        }
+        try {
+            (0, core_1.assertPackedArtifact)(parsed);
+        }
+        catch (err) {
+            const message = err instanceof core_1.InvalidArtifactError ? err.message : err.message;
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "invalid_artifact", message));
+            return;
+        }
+        const artifact = parsed;
+        if ((0, core_1.computeCiphertextHash)(artifact.ciphertext) !== artifact.ciphertextHash) {
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "hash_mismatch", "ciphertext hash does not match declared value"));
+            return;
+        }
+        if (artifact.expiresAt && new Date(artifact.expiresAt).getTime() < Date.now()) {
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "expired", `artifact expired at ${artifact.expiresAt}`));
+            return;
+        }
+        if (artifact.revokedAt) {
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "revoked", `artifact was revoked at ${artifact.revokedAt}`));
+            return;
+        }
+        // Age identity is resolved from server environment only. Clients never
+        // send keys. For KMS-enveloped artifacts the private key is not used —
+        // ArtifactDecryptor reads ambient AWS credentials internally.
+        let privateKey;
+        if (!artifact.envelope) {
+            try {
+                privateKey = loadAgePrivateKey(deps);
+            }
+            catch (err) {
+                res.json((0, core_1.buildDecryptError)(UI_SOURCE, "key_resolution_failed", err.message));
+                return;
+            }
+        }
+        let values;
+        try {
+            const decryptor = new runtime_1.ArtifactDecryptor({ privateKey });
+            ({ values } = await decryptor.decrypt(artifact));
+        }
+        catch (err) {
+            res.json((0, core_1.buildDecryptError)(UI_SOURCE, "decrypt_failed", err.message));
+            return;
+        }
+        const keys = Object.keys(values);
+        if (key) {
+            if (!(key in values)) {
+                res.json((0, core_1.buildDecryptError)(UI_SOURCE, "unknown_key", `key "${key}" not present in decrypted payload`));
+                return;
+            }
+            res.json((0, core_1.buildDecryptResult)(UI_SOURCE, { keys, singleKey: { name: key, value: values[key] } }));
+            return;
+        }
+        if (reveal) {
+            res.json((0, core_1.buildDecryptResult)(UI_SOURCE, { keys, allValues: values }));
+            return;
+        }
+        res.json((0, core_1.buildDecryptResult)(UI_SOURCE, { keys }));
+    });
+    // GET /api/envelope/config — tells the client which server-side identity
+    // will be used for decrypt, so operators can diagnose key_resolution_failed.
+    // Does NOT return key material, only metadata (env var name + optional path).
+    router.get("/envelope/config", (_req, res) => {
+        setNoCacheHeaders(res);
+        const ageIdentity = resolveAgeIdentity(deps);
+        const awsProfile = process.env.AWS_PROFILE ?? null;
+        const hasCredentials = !!process.env.AWS_PROFILE ||
+            !!process.env.AWS_ACCESS_KEY_ID ||
+            !!process.env.AWS_ROLE_ARN ||
+            !!process.env.AWS_WEB_IDENTITY_TOKEN_FILE ||
+            // Well-known shared credentials file — if present assume AWS SDK will find creds.
+            (!!process.env.HOME && fs.existsSync(`${process.env.HOME}/.aws/credentials`));
+        res.json({
+            ageIdentity,
+            aws: { hasCredentials, profile: awsProfile },
+        });
+    });
+}
+//# sourceMappingURL=envelope.js.map

package/dist/server/envelope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"envelope.js","sourceRoot":"","sources":["../../src/server/envelope.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clef-sh/ui",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Local web UI for Clef — git-native secrets management",
   "repository": {
     "type": "git",
@@ -34,12 +34,16 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
-    "@clef-sh/core": "0.1.20",
+    "@clef-sh/core": "0.1.21",
+    "@clef-sh/design": "0.1.1",
+    "@clef-sh/runtime": "0.1.24",
     "express": "^5.1.0",
     "express-rate-limit": "^8.3.2",
+    "lucide-react": "^0.468.0",
     "yaml": "^2.8.3"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",
     "@testing-library/user-event": "^14.5.0",
@@ -55,6 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "supertest": "^7.2.2",
+    "tailwindcss": "^4.1.0",
     "ts-jest": "^29.4.9",
     "typescript": "^5.9.3",
     "vite": "^8.0.9"

package/src/client/App.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useCallback } from "react";
-import { theme } from "./theme";
 import { apiFetch } from "./api";
 import { Sidebar, ViewName } from "./components/Sidebar";
 import { MatrixView } from "./screens/MatrixView";
 import { NamespaceEditor } from "./screens/NamespaceEditor";
+import { SchemaEditor } from "./screens/SchemaEditor";
 import { DiffView } from "./screens/DiffView";
 import { LintView } from "./screens/LintView";
 import { ScanScreen } from "./screens/ScanScreen";
@@ -15,6 +15,7 @@ import { ServiceIdentitiesScreen } from "./screens/ServiceIdentitiesScreen";
 import { BackendScreen } from "./screens/BackendScreen";
 import { ResetScreen } from "./screens/ResetScreen";
 import { GitLogView } from "./screens/GitLogView";
+import { EnvelopeScreen } from "./screens/EnvelopeScreen";
 import type { ClefManifest, MatrixStatus, GitStatus, LintResult } from "@clef-sh/core";
 
 export default function App() {
@@ -124,44 +125,23 @@ export default function App() {
 
   if (loading) {
     return (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          background: theme.bg,
-          color: theme.textMuted,
-          fontFamily: theme.sans,
-        }}
-      >
-        <div style={{ textAlign: "center" }}>
-          <div
-            style={{
-              fontSize: 24,
-              color: theme.accent,
-              marginBottom: 12,
-            }}
-          >
-            {"\u266A"}
-          </div>
-          <div style={{ fontSize: 13 }}>Loading...</div>
+      <div className="flex h-screen items-center justify-center bg-ink-950 font-sans text-ash">
+        <div className="text-center">
+          <img
+            src="/clef.svg"
+            alt=""
+            width="20"
+            height="44"
+            className="mx-auto mb-3 [filter:drop-shadow(0_0_10px_rgba(240,165,0,0.35))]"
+          />
+          <div className="text-[13px]">Loading...</div>
         </div>
       </div>
     );
   }
 
   return (
-    <div
-      style={{
-        display: "flex",
-        height: "100vh",
-        background: theme.bg,
-        color: theme.text,
-        fontFamily: theme.sans,
-        overflow: "hidden",
-      }}
-    >
+    <div className="flex h-screen overflow-hidden bg-ink-950 font-sans text-bone">
       <Sidebar
         activeView={view}
         setView={setView}
@@ -175,14 +155,7 @@ export default function App() {
         policyOverdueCount={policyOverdueCount}
       />
 
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-        }}
-      >
+      <div className="flex flex-1 flex-col overflow-hidden">
         {view === "matrix" && (
           <MatrixView
             setView={setView}
@@ -196,6 +169,7 @@ export default function App() {
         {view === "editor" && (
           <NamespaceEditor ns={activeNs} initialEnv={activeEnv} manifest={manifest} />
         )}
+        {view === "schema" && <SchemaEditor ns={activeNs} manifest={manifest} />}
         {view === "diff" && <DiffView manifest={manifest} />}
         {view === "lint" && <LintView setView={setView} setNs={setActiveNs} />}
         {view === "scan" && <ScanScreen />}
@@ -213,6 +187,7 @@ export default function App() {
         {view === "manifest" && (
           <ManifestScreen manifest={manifest} reloadManifest={loadManifest} />
         )}
+        {view === "envelope" && <EnvelopeScreen />}
       </div>
     </div>
   );

package/src/client/components/Button.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { theme } from "../theme";
 
 interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
   children: React.ReactNode;
@@ -8,10 +7,10 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
   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` },
+const VARIANT_CLASSES: Record<NonNullable<ButtonProps["variant"]>, string> = {
+  primary: "bg-gold-500 text-ink-950 border border-transparent hover:bg-gold-400",
+  ghost: "bg-transparent text-bone border border-edge-strong hover:bg-ink-800",
+  danger: "bg-stop-500/15 text-stop-500 border border-stop-500/40 hover:bg-stop-500/25",
 };
 
 export function Button({
@@ -20,32 +19,24 @@ export function Button({
   onClick,
   icon,
   type = "button",
+  className,
   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",
-      }}
+      className={[
+        "inline-flex items-center gap-1.5 rounded-md px-3 py-1 font-sans text-[12px] font-semibold cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+        VARIANT_CLASSES[variant],
+        className ?? "",
+      ]
+        .join(" ")
+        .trim()}
     >
-      {icon && <span style={{ display: "flex" }}>{icon}</span>}
+      {icon && <span className="flex">{icon}</span>}
       {children}
     </button>
   );

package/src/client/components/CopyButton.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from "react";
-import { theme } from "../theme";
 
 interface CopyButtonProps {
   text: string;
@@ -18,17 +17,11 @@ export function CopyButton({ text }: CopyButtonProps) {
     <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",
-      }}
+      className={`cursor-pointer rounded-sm border px-2 py-0.5 font-mono text-[10px] transition-colors ${
+        copied
+          ? "border-go-500/40 bg-go-500/10 text-go-500"
+          : "border-edge-strong bg-transparent text-ash-dim hover:bg-ink-800"
+      }`}
     >
       {copied ? "copied!" : "copy"}
     </button>

package/src/client/components/EnvBadge.tsx

@@ -1,30 +1,45 @@
 import React from "react";
-import { theme, ENV_COLORS } from "../theme";
 
 interface EnvBadgeProps {
   env: string;
   small?: boolean;
 }
 
+// Per-env color set. Mirrors `ENV_COLORS` from the design tokens but expressed
+// as Tailwind class strings so we don't pay the inline-style cost. The unknown
+// fallback ("ash") is also handled here.
+const ENV_CLASSES: Record<string, { text: string; bg: string; border: string; label: string }> = {
+  dev: {
+    text: "text-go-500",
+    bg: "bg-go-500/10",
+    border: "border-go-500/20",
+    label: "DEV",
+  },
+  staging: {
+    text: "text-warn-500",
+    bg: "bg-warn-500/10",
+    border: "border-warn-500/20",
+    label: "STG",
+  },
+  production: {
+    text: "text-stop-500",
+    bg: "bg-stop-500/10",
+    border: "border-stop-500/20",
+    label: "PRD",
+  },
+};
+
 export function EnvBadge({ env, small }: EnvBadgeProps) {
-  const c = ENV_COLORS[env] ?? {
-    color: theme.textMuted,
-    bg: "transparent",
+  const c = ENV_CLASSES[env] ?? {
+    text: "text-ash",
+    bg: "bg-transparent",
+    border: "border-ash/20",
     label: env.toUpperCase().slice(0, 3),
   };
+  const sizeClasses = small ? "text-[9px] px-1.5 py-px" : "text-[10px] px-2 py-0.5";
   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",
-      }}
+      className={`inline-block rounded-sm border font-mono font-bold tracking-[0.08em] ${c.text} ${c.bg} ${c.border} ${sizeClasses}`}
     >
       {c.label}
     </span>