okengine 0.11.1 → 0.12.0

package/src/console/ui-next/src/features/vault/vault-page.tsx

@@ -0,0 +1,439 @@
+/**
+ * Vault page — posture scan, deep search, set / rotate / rotate-master.
+ */
+
+import {
+  FileExportIcon,
+  Key01Icon,
+  MoreHorizontalCircle01Icon,
+  PlusSignIcon,
+  SecurityCheckIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState, type JSX } from "react";
+import {
+  clientErrorText,
+  vaultAuditVerify,
+  vaultCreate,
+  vaultRotate,
+  vaultRotateMaster,
+  vaultSet,
+} from "@/client.ts";
+import {
+  EXPLORER_ICON_BUTTON_CLASS,
+  EXPLORER_PAGE_CLASS,
+  EXPLORER_SPLIT,
+  EXPLORER_TOOLBAR_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { ExplorerStartToggle } from "@/components/explorer/explorer-start-toggle.tsx";
+import { useExplorerStartPanel } from "@/components/explorer/use-explorer-start-panel.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { ToolbarTip } from "@/components/ui/toolbar-tip.tsx";
+import { cn } from "@/lib/utils.ts";
+import { useVaultList, VAULT_LIST_QUERY_KEY } from "./data/use-vault-list.ts";
+import { VaultDetail } from "./detail/vault-detail.tsx";
+import { VaultOverview } from "./detail/vault-overview.tsx";
+import { VaultList } from "./explorer/vault-list.tsx";
+import { VaultPostureStrip } from "./explorer/vault-posture-strip.tsx";
+import { VaultSearch } from "./explorer/vault-search.tsx";
+import { formatVaultBackend } from "./lib/backend.ts";
+import { exportSafeList } from "./lib/export-safe.ts";
+import { groupByKind } from "./lib/group.ts";
+import { summarizePosture } from "./lib/posture.ts";
+import { formatRewrapProgress } from "./lib/progress.ts";
+import type { VaultAuditVerifyResult, VaultRecord } from "./lib/types.ts";
+import { VaultMasterKeySheet } from "./sheets/vault-master-key-sheet.tsx";
+import { VaultRotateMasterSheet } from "./sheets/vault-rotate-master-sheet.tsx";
+import { VaultSecuritySheet } from "./sheets/vault-security-sheet.tsx";
+import { VaultVerifySheet } from "./sheets/vault-verify-sheet.tsx";
+import { VaultCreateSheet } from "./sheets/vault-create-sheet.tsx";
+import { VaultWriteSheet } from "./sheets/vault-write-sheet.tsx";
+import { useVaultSelection } from "./state/vault-selection.ts";
+
+/**
+ * Vault explorer — search, posture, list / detail.
+ */
+export function VaultPage(): JSX.Element {
+  const list = useVaultList();
+  const qc = useQueryClient();
+  const { query, selectedName, action, setQuery, setSelectedName, setAction } = useVaultSelection();
+  const start = useExplorerStartPanel();
+  const startToggle = (
+    <ExplorerStartToggle
+      open={start.open}
+      onToggle={start.toggle}
+      noun="vault"
+      controlsId="vault-list"
+      dataSlot="vault-list-toggle"
+    />
+  );
+  const [now] = useState(() => Date.now());
+  const [securityOpen, setSecurityOpen] = useState(false);
+  const [exportNote, setExportNote] = useState<string | null>(null);
+  const [writeError, setWriteError] = useState<string | null>(null);
+  const [rotateMasterError, setRotateMasterError] = useState<string | null>(null);
+  const [shownMasterKey, setShownMasterKey] = useState<string | null>(null);
+  const [remaining, setRemaining] = useState<number | null>(null);
+  const [lastKek, setLastKek] = useState<number | null>(null);
+  const [verifyNote, setVerifyNote] = useState<string | null>(null);
+  const [verifyBreak, setVerifyBreak] = useState<VaultAuditVerifyResult | null>(null);
+
+  const secrets = (list.data?.secrets ?? []) as readonly VaultRecord[];
+  const env = list.data?.env ?? "dev";
+  const backend = list.data?.backend ?? null;
+  const backendCard = useMemo(() => formatVaultBackend(backend), [backend]);
+  const groups = useMemo(() => groupByKind(secrets, query, now), [secrets, query, now]);
+  const summary = useMemo(() => summarizePosture(secrets, now), [secrets, now]);
+  const visible = useMemo(() => groups.flatMap((g) => g.secrets), [groups]);
+  const matchCount = visible.length;
+  const selected = visible.find((s) => s.name === selectedName) ?? visible[0] ?? null;
+  const progress = formatRewrapProgress({
+    kekVersion: lastKek ?? backend?.status?.kekVersion ?? 1,
+    remaining,
+    rewrapTargetKekVersion: backend?.status?.rewrapTargetKekVersion ?? null,
+  });
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target instanceof HTMLElement) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable) return;
+      }
+      event.preventDefault();
+      const input = document.querySelector<HTMLInputElement>("[data-slot='vault-search-input']");
+      input?.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  const invalidate = async () => {
+    await qc.invalidateQueries({ queryKey: VAULT_LIST_QUERY_KEY });
+  };
+
+  const exportFingerprints = () => {
+    const payload = exportSafeList(secrets);
+    void navigator.clipboard?.writeText(payload);
+    setExportNote("Exported fingerprints only (no secret values)");
+  };
+
+  const writeMut = useMutation({
+    mutationFn: async (input: {
+      readonly mode: "set" | "rotate";
+      readonly name: string;
+      readonly value: string;
+      readonly reason: string;
+    }) => {
+      if (input.value.trim().length === 0) throw new Error("New value is required");
+      const call = input.mode === "set" ? vaultSet : vaultRotate;
+      const res = await call({
+        name: input.name,
+        value: input.value,
+        reason: input.reason,
+      });
+      if (res.error) throw new Error(clientErrorText(res.error));
+      return res.data;
+    },
+    onSuccess: async () => {
+      setWriteError(null);
+      setAction(null);
+      await invalidate();
+    },
+    onError: (err: Error) => {
+      setWriteError(err.message);
+    },
+  });
+
+  const createMut = useMutation({
+    mutationFn: async (input: {
+      readonly name: string;
+      readonly value: string;
+      readonly kind: "secret" | "config";
+      readonly description: string;
+      readonly rotate: string;
+    }) => {
+      if (input.name.trim().length === 0) throw new Error("Name is required");
+      if (input.value.trim().length === 0) throw new Error("Value is required");
+      const res = await vaultCreate({
+        name: input.name,
+        value: input.value,
+        kind: input.kind,
+        ...(input.description.length > 0 ? { description: input.description } : {}),
+        ...(input.rotate.length > 0 ? { rotate: input.rotate } : {}),
+      });
+      if (res.error) throw new Error(clientErrorText(res.error));
+      return res.data;
+    },
+    onSuccess: async (data) => {
+      setWriteError(null);
+      setAction(null);
+      if (data?.name) setSelectedName(data.name);
+      await invalidate();
+    },
+    onError: (err: Error) => {
+      setWriteError(err.message);
+    },
+  });
+
+  const rotateMasterMut = useMutation({
+    mutationFn: async (input: { readonly confirmation: string; readonly reason: string }) => {
+      let lastRemaining = 0;
+      let lastKekVersion = backend?.status?.kekVersion ?? 1;
+      for (;;) {
+        const res = await vaultRotateMaster(input);
+        if (res.error) throw new Error(clientErrorText(res.error));
+        if (!res.data) throw new Error("Empty rotate-master response");
+        lastRemaining = res.data.remaining;
+        lastKekVersion = res.data.kekVersion;
+        setRemaining(res.data.remaining);
+        setLastKek(res.data.kekVersion);
+        if (res.data.masterKey) setShownMasterKey(res.data.masterKey);
+        await invalidate();
+        if (res.data.remaining === 0) break;
+      }
+      return { remaining: lastRemaining, kekVersion: lastKekVersion };
+    },
+    onSuccess: () => {
+      setRotateMasterError(null);
+      setAction(null);
+    },
+    onError: (err: Error) => {
+      setRotateMasterError(err.message);
+    },
+  });
+
+  const verifyMut = useMutation({
+    mutationFn: async () => {
+      const res = await vaultAuditVerify();
+      if (res.error) throw new Error(clientErrorText(res.error));
+      if (!res.data) throw new Error("Empty verify response");
+      return res.data;
+    },
+    onSuccess: (data) => {
+      if (data.ok) {
+        setVerifyBreak(null);
+        setVerifyNote("chain intact");
+      } else {
+        setVerifyNote(null);
+        setVerifyBreak(data);
+      }
+    },
+  });
+
+  return (
+    <div className={EXPLORER_PAGE_CLASS} data-slot="vault-page">
+      <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+        <ResizablePanel
+          panelRef={start.panelRef}
+          collapsible
+          collapsedSize={0}
+          defaultSize={EXPLORER_SPLIT.start.defaultSize}
+          minSize={EXPLORER_SPLIT.start.minSize}
+          onResize={start.onResize}
+          className="min-h-0 overflow-hidden"
+        >
+          <div
+            id="vault-list"
+            className="flex h-full min-h-0 flex-col overflow-hidden"
+            data-slot="vault-list"
+          >
+            <div className={cn(EXPLORER_TOOLBAR_CLASS, "relative z-20 pr-1.5")}>
+              <VaultSearch query={query} secrets={secrets} onQueryChange={setQuery} />
+              <ToolbarTip label="Add secret or config" className="flex self-stretch">
+                <button
+                  type="button"
+                  aria-label="Add secret or config"
+                  onClick={() => setAction("create")}
+                  className={EXPLORER_ICON_BUTTON_CLASS}
+                >
+                  <HugeiconsIcon icon={PlusSignIcon} className="size-3.5" />
+                </button>
+              </ToolbarTip>
+              {exportNote ? (
+                <span className="sr-only" role="status">
+                  {exportNote}
+                </span>
+              ) : null}
+              <ToolbarTip label="Verify the audit hash chain" className="flex self-stretch">
+                <button
+                  type="button"
+                  aria-label="Verify chain"
+                  disabled={verifyMut.isPending}
+                  onClick={() => verifyMut.mutate()}
+                  className={EXPLORER_ICON_BUTTON_CLASS}
+                >
+                  <HugeiconsIcon icon={SecurityCheckIcon} className="size-3.5" />
+                </button>
+              </ToolbarTip>
+              <DropdownMenu>
+                <ToolbarTip label="Vault security" className="flex self-stretch">
+                  <DropdownMenuTrigger
+                    render={(props) => (
+                      <button
+                        {...props}
+                        type="button"
+                        aria-label="Vault security"
+                        className={EXPLORER_ICON_BUTTON_CLASS}
+                      >
+                        <HugeiconsIcon icon={MoreHorizontalCircle01Icon} className="size-3.5" />
+                      </button>
+                    )}
+                  />
+                </ToolbarTip>
+                <DropdownMenuContent align="end" className="min-w-52">
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem onClick={() => setSecurityOpen(true)}>
+                      Security
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setAction("rotate-master")}>
+                      <HugeiconsIcon icon={Key01Icon} data-icon="inline-start" />
+                      Rotate master key
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={exportFingerprints}>
+                      <HugeiconsIcon icon={FileExportIcon} data-icon="inline-start" />
+                      Export fingerprints
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    disabled={verifyMut.isPending}
+                    onClick={() => verifyMut.mutate()}
+                  >
+                    <HugeiconsIcon icon={SecurityCheckIcon} data-icon="inline-start" />
+                    Verify audit chain
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <VaultPostureStrip
+              card={backendCard}
+              env={env}
+              summary={summary}
+              query={query}
+              progress={progress}
+              verifyNote={verifyNote}
+              onQueryChange={setQuery}
+              onOpenSecurity={() => setSecurityOpen(true)}
+            />
+            <VaultList
+              groups={groups}
+              selectedName={selected?.name ?? selectedName}
+              loading={list.isLoading}
+              matchCount={matchCount}
+              totalCount={secrets.length}
+              now={now}
+              onSelect={setSelectedName}
+            />
+          </div>
+        </ResizablePanel>
+        {start.open ? <ResizableHandle withHandle /> : null}
+        <ResizablePanel
+          defaultSize={EXPLORER_SPLIT.end.defaultSize}
+          minSize={EXPLORER_SPLIT.end.minSize}
+          className="min-h-0 overflow-hidden"
+        >
+          {selected ? (
+            <VaultDetail
+              row={selected}
+              env={env}
+              now={now}
+              backend={backend}
+              onSet={() => setAction("set")}
+              onRotate={() => setAction("rotate")}
+              onQueryChange={setQuery}
+              leading={startToggle}
+            />
+          ) : (
+            <VaultOverview
+              loading={list.isLoading}
+              hasContracts={secrets.length > 0}
+              query={query}
+              onClearQuery={() => setQuery("")}
+              leading={startToggle}
+            />
+          )}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      <VaultCreateSheet
+        open={action === "create"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setWriteError(null);
+            setAction(null);
+          }
+        }}
+        pending={createMut.isPending}
+        error={action === "create" ? writeError : null}
+        onSubmit={(input) => createMut.mutate(input)}
+      />
+
+      <VaultWriteSheet
+        open={action === "set" || action === "rotate"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setWriteError(null);
+            setAction(null);
+          }
+        }}
+        mode={action === "rotate" ? "rotate" : "set"}
+        name={selected?.name ?? ""}
+        sensitive={selected?.sensitive ?? true}
+        pending={writeMut.isPending}
+        error={writeError}
+        onSubmit={(input) => {
+          if (!selected) return;
+          writeMut.mutate({
+            mode: action === "rotate" ? "rotate" : "set",
+            name: selected.name,
+            ...input,
+          });
+        }}
+      />
+
+      <VaultRotateMasterSheet
+        open={action === "rotate-master"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRotateMasterError(null);
+            setAction(null);
+          }
+        }}
+        pending={rotateMasterMut.isPending}
+        error={rotateMasterError}
+        onConfirm={(input) => rotateMasterMut.mutate(input)}
+      />
+
+      <VaultSecuritySheet
+        open={securityOpen}
+        onOpenChange={setSecurityOpen}
+        card={backendCard}
+        env={env}
+        progress={progress}
+        verifyPending={verifyMut.isPending}
+        verifyNote={verifyNote}
+        onVerify={() => verifyMut.mutate()}
+        onRotateMaster={() => {
+          setSecurityOpen(false);
+          setAction("rotate-master");
+        }}
+        onExport={exportFingerprints}
+      />
+
+      <VaultMasterKeySheet masterKey={shownMasterKey} onDismiss={() => setShownMasterKey(null)} />
+
+      <VaultVerifySheet result={verifyBreak} onClose={() => setVerifyBreak(null)} />
+    </div>
+  );
+}

package/src/console/ui-next/src/hooks/use-mobile.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+/**
+ * Whether the viewport is below the sidebar mobile breakpoint (768px).
+ */
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/console/ui-next/src/lib/document-meta.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  CONSOLE_DOCUMENT_DESCRIPTION,
+  CONSOLE_DOCUMENT_TITLE,
+  consoleDocumentTitle,
+} from "./document-meta.ts";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const indexHtml = readFileSync(resolve(here, "../../index.html"), "utf8");
+
+describe("consoleDocumentTitle", () => {
+  test("gate uses the default title", () => {
+    expect(consoleDocumentTitle("/")).toBe(CONSOLE_DOCUMENT_TITLE);
+    expect(consoleDocumentTitle("")).toBe(CONSOLE_DOCUMENT_TITLE);
+  });
+
+  test("modules prefix the page name", () => {
+    expect(consoleDocumentTitle("/overview")).toBe(`Overview · ${CONSOLE_DOCUMENT_TITLE}`);
+    expect(consoleDocumentTitle("/flows")).toBe(`Flows · ${CONSOLE_DOCUMENT_TITLE}`);
+    expect(consoleDocumentTitle("/store")).toBe(`Store · ${CONSOLE_DOCUMENT_TITLE}`);
+    expect(consoleDocumentTitle("/observability")).toBe(
+      `Observability · ${CONSOLE_DOCUMENT_TITLE}`,
+    );
+    expect(consoleDocumentTitle("/vault")).toBe(`Vault · ${CONSOLE_DOCUMENT_TITLE}`);
+    expect(consoleDocumentTitle("/monitoring")).toBe(`Observability · ${CONSOLE_DOCUMENT_TITLE}`);
+  });
+
+  test("unknown paths are not found", () => {
+    expect(consoleDocumentTitle("/nope")).toBe(`Not found · ${CONSOLE_DOCUMENT_TITLE}`);
+  });
+});
+
+describe("index.html document meta", () => {
+  test("title, description, and favicon match the Console brand", () => {
+    expect(indexHtml).toContain(`<title>${CONSOLE_DOCUMENT_TITLE}</title>`);
+    expect(indexHtml).toContain(`content="${CONSOLE_DOCUMENT_DESCRIPTION}"`);
+    expect(indexHtml).toContain('href="/favicon.svg"');
+    expect(indexHtml).not.toContain("oke Console");
+  });
+});

package/src/console/ui-next/src/lib/document-meta.ts

@@ -0,0 +1,34 @@
+/**
+ * Console document title + description — keep in sync with `index.html`.
+ */
+
+/** Default browser tab title and `og:title`. */
+export const CONSOLE_DOCUMENT_TITLE = "okengine Console";
+
+/** Operator-facing `meta name="description"` / Open Graph copy. */
+export const CONSOLE_DOCUMENT_DESCRIPTION =
+  "Operator Console for okengine — Flows, Store, Observability, and Vault.";
+
+const PAGE_TITLES: Record<string, string> = {
+  "/overview": "Overview",
+  "/flows": "Flows",
+  "/store": "Store",
+  "/observability": "Observability",
+  "/vault": "Vault",
+  "/monitoring": "Observability",
+};
+
+/**
+ * Tab title for a Console pathname.
+ *
+ * Gate (`/`) uses the default. Known modules prefix the page name.
+ * Anything else is treated as not found.
+ *
+ * @param pathname - Location pathname
+ */
+export function consoleDocumentTitle(pathname: string): string {
+  if (pathname === "/" || pathname === "") return CONSOLE_DOCUMENT_TITLE;
+  const page = PAGE_TITLES[pathname];
+  if (page) return `${page} · ${CONSOLE_DOCUMENT_TITLE}`;
+  return `Not found · ${CONSOLE_DOCUMENT_TITLE}`;
+}

package/src/console/ui-next/src/lib/ease.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared motion tokens for beUI motion components (springs + cubic easings).
+ */
+
+export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
+export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
+export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;
+
+/** CSS string form of {@link EASE_OUT} for inline style transitions. */
+export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+/** Press feedback on buttons and other tappable surfaces. */
+export const SPRING_PRESS = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+  mass: 0.6,
+} as const;
+
+/** Content swaps — label/icon slots trading places inside a control. */
+export const SPRING_SWAP = {
+  type: "spring",
+  stiffness: 460,
+  damping: 30,
+  mass: 0.55,
+} as const;
+
+/** Overlay panel entrances — modals and sheets summoned by pointer. */
+export const SPRING_PANEL = {
+  type: "spring",
+  stiffness: 420,
+  damping: 40,
+  mass: 0.5,
+} as const;
+
+/** Shared-layout glides — pills, indicators and panels morphing between positions. */
+export const SPRING_LAYOUT = {
+  type: "spring",
+  stiffness: 360,
+  damping: 32,
+  mass: 0.6,
+} as const;
+
+/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
+export const SPRING_MOUSE = {
+  stiffness: 200,
+  damping: 15,
+  mass: 0.3,
+} as const;
+
+/**
+ * Dragged handles and fills (sliders) — critically damped `useSpring` config,
+ * so the value follows the pointer and never rebounds off an end.
+ */
+export const SPRING_GLIDE = {
+  stiffness: 700,
+  damping: 50,
+  mass: 0.5,
+} as const;

package/src/console/ui-next/src/lib/element-icons.test.ts

@@ -0,0 +1,38 @@
+/**
+ * Eight-element HugeIcons vocabulary — one glyph language for Console.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { ELEMENT_ICONS, elementIcon, type OkeElement } from "./element-icons.ts";
+
+describe("ELEMENT_ICONS", () => {
+  test("covers all eight elements with distinct icons", () => {
+    const elements: readonly OkeElement[] = [
+      "flow",
+      "signal",
+      "store",
+      "clock",
+      "gate",
+      "vault",
+      "channel",
+      "ai",
+    ];
+    const icons = new Set(elements.map((e) => ELEMENT_ICONS[e].icon));
+    expect(icons.size).toBe(8);
+    for (const e of elements) {
+      expect(elementIcon(e).label.length).toBeGreaterThan(0);
+      expect(elementIcon(e).symbol).toHaveLength(2);
+      expect(elementIcon(e).icon).toBe(ELEMENT_ICONS[e].icon);
+    }
+    expect(elements.map((e) => ELEMENT_ICONS[e].symbol)).toEqual([
+      "Fl",
+      "Sg",
+      "St",
+      "Ck",
+      "Gt",
+      "Vt",
+      "Ch",
+      "Ai",
+    ]);
+  });
+});