okengine 0.15.2 → 0.16.0

package/src/console/ui-next/src/features/access/sheets/access-edit-sheet.tsx

@@ -0,0 +1,240 @@
+/**
+ * Edit an Access key — name, expiry, allowlist, rate, re-attenuated scopes.
+ */
+
+import { CrownIcon, UserIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useMemo, useState, type JSX } from "react";
+import type { AccessKeyRow, AccessOperatorRow, AccessUserRow } from "@/client.ts";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils.ts";
+import { SHEET_CONTROL, SheetError, SheetFooterButton } from "@/components/ui/sheet-form.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  accessExpiresAt,
+  accessExpiryFromAt,
+  parseAccessDurationMs,
+  parseAccessRateParts,
+  splitAccessRatePer,
+  type AccessExpiryChoice,
+  type AccessRateUnit,
+} from "../lib/format-when.ts";
+import { AccessAllowFields } from "./access-allow-fields.tsx";
+import { AccessExpiryFields } from "./access-expiry-fields.tsx";
+import { AccessScopeField } from "./access-scope-field.tsx";
+
+/** Patch from {@link AccessEditSheet}. */
+export interface AccessEditKeyInput {
+  readonly name: string;
+  readonly scopes: readonly string[];
+  readonly expiresAt: number | null;
+  readonly rateLimit: { max: number; per: string } | null;
+  readonly ipAllowlist: readonly string[];
+}
+
+/** Props for {@link AccessEditSheet}. */
+export interface AccessEditSheetProps {
+  readonly open: boolean;
+  readonly keyRow: AccessKeyRow;
+  readonly users: readonly AccessUserRow[];
+  readonly operators: readonly AccessOperatorRow[];
+  readonly operatorScopes: readonly string[];
+  readonly pending: boolean;
+  readonly error: string | null;
+  readonly now?: number;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onSubmit: (input: AccessEditKeyInput) => void;
+}
+
+/**
+ * Edit sheet — tighten metadata against the stored issuer ceiling.
+ *
+ * @param props - Open + key + submit
+ */
+export function AccessEditSheet({
+  open,
+  keyRow,
+  users,
+  operators,
+  operatorScopes,
+  pending,
+  error,
+  now = Date.now(),
+  onOpenChange,
+  onSubmit,
+}: AccessEditSheetProps): JSX.Element {
+  const seeded = accessExpiryFromAt(keyRow.expiresAt, now);
+  const [name, setName] = useState(keyRow.name);
+  const [scopes, setScopes] = useState<readonly string[]>(keyRow.scopes);
+  const [expires, setExpires] = useState<AccessExpiryChoice>(seeded.choice);
+  const [customExpires, setCustomExpires] = useState(seeded.custom);
+  const [allowEntries, setAllowEntries] = useState<readonly string[]>(keyRow.ipAllowlist);
+  const seededRate = splitAccessRatePer(keyRow.rateLimit?.per ?? "");
+  const [rateMax, setRateMax] = useState(keyRow.rateLimit ? String(keyRow.rateLimit.max) : "");
+  const [rateCount, setRateCount] = useState(seededRate.count);
+  const [rateUnit, setRateUnit] = useState<AccessRateUnit>(seededRate.unit);
+
+  useEffect(() => {
+    if (!open) return;
+    const next = accessExpiryFromAt(keyRow.expiresAt, now);
+    setName(keyRow.name);
+    setScopes(keyRow.scopes);
+    setExpires(next.choice);
+    setCustomExpires(next.custom);
+    setAllowEntries(keyRow.ipAllowlist);
+    const nextRate = splitAccessRatePer(keyRow.rateLimit?.per ?? "");
+    setRateMax(keyRow.rateLimit ? String(keyRow.rateLimit.max) : "");
+    setRateCount(nextRate.count);
+    setRateUnit(nextRate.unit);
+    // Seed once per open / key — list refetch must not wipe in-progress edits.
+  }, [open, keyRow.id]);
+
+  const creatorId = keyRow.creatorId ?? "";
+  const issuer = useMemo(() => {
+    if (creatorId.length === 0) return null;
+    return (
+      users.find((row) => row.id === creatorId) ??
+      operators.find((row) => row.id === creatorId) ??
+      null
+    );
+  }, [creatorId, operators, users]);
+  const issuerCaption = issuer
+    ? issuer.name.trim() || issuer.email.trim() || issuer.id
+    : creatorId || "Unknown";
+  const grantable = useMemo(() => {
+    const stored = keyRow.creatorScopes ?? [];
+    if (stored.length > 0) return stored;
+    if (keyRow.plane === "operator") {
+      return issuer && issuer.scopes.length > 0 ? issuer.scopes : operatorScopes;
+    }
+    return issuer?.scopes ?? [];
+  }, [issuer, keyRow.creatorScopes, keyRow.plane, operatorScopes]);
+  const catalog = Array.from(new Set([...grantable, ...keyRow.scopes]));
+  const customMs = parseAccessDurationMs(customExpires);
+  const parsedRate = parseAccessRateParts(rateMax, rateCount, rateUnit);
+  const ready =
+    name.trim().length > 0 &&
+    scopes.length > 0 &&
+    !pending &&
+    parsedRate !== undefined &&
+    (expires !== "custom" || customMs > 0);
+
+  return (
+    <Sheet open={open} modal={false} disablePointerDismissal onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="gap-0 p-0 data-[side=right]:sm:max-w-md"
+        data-slot="access-edit-sheet"
+      >
+        <SheetHeader className="gap-1 border-b border-border/50">
+          <SheetTitle className="text-sm">Edit key</SheetTitle>
+          <SheetDescription className="text-[11px]">
+            Change name, expiry, allow, rate, and scopes. Issuer stays frozen.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <div
+            className="flex items-stretch border-b border-border/50"
+            data-slot="access-name-field"
+          >
+            <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+              Name
+            </p>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="CI deploy"
+              autoComplete="off"
+              aria-label="Key name"
+              flat
+              className={cn(SHEET_CONTROL, "min-w-0 flex-1")}
+            />
+          </div>
+          <div
+            className="flex items-stretch border-b border-border/50"
+            data-slot="access-issuer-field"
+          >
+            <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+              Issuer
+            </p>
+            <p
+              className="flex min-w-0 flex-1 items-center gap-1.5 px-4 text-[12px] text-muted-foreground"
+              aria-label={`Issuer ${issuerCaption}`}
+            >
+              <HugeiconsIcon
+                icon={keyRow.plane === "operator" ? CrownIcon : UserIcon}
+                className="size-3 shrink-0"
+                aria-hidden
+              />
+              <span className="min-w-0 truncate text-foreground">{issuerCaption}</span>
+            </p>
+            {creatorId.length > 0 && creatorId !== issuerCaption ? (
+              <span className="flex h-8 shrink-0 items-center pr-4 font-mono text-[10px] text-muted-foreground">
+                {creatorId}
+              </span>
+            ) : null}
+          </div>
+          <AccessExpiryFields
+            expires={expires}
+            customExpires={customExpires}
+            onExpires={setExpires}
+            onCustomExpires={setCustomExpires}
+          />
+          <AccessAllowFields
+            entries={allowEntries}
+            rateMax={rateMax}
+            rateCount={rateCount}
+            rateUnit={rateUnit}
+            onEntries={setAllowEntries}
+            onRateMax={setRateMax}
+            onRateCount={setRateCount}
+            onRateUnit={setRateUnit}
+          />
+          <AccessScopeField
+            scopes={catalog}
+            selected={scopes}
+            empty={
+              keyRow.plane === "user" && issuer == null
+                ? "Issuer is gone. Only scopes already on this key remain."
+                : keyRow.plane === "user"
+                  ? "This issuer has no grants."
+                  : "No grantable scopes on this plane."
+            }
+            onChange={setScopes}
+          />
+          {error ? <SheetError slot="access-edit-error">{error}</SheetError> : null}
+        </div>
+        <SheetFooter>
+          <SheetFooterButton split onClick={() => onOpenChange(false)} disabled={pending}>
+            Cancel
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="default"
+            disabled={!ready}
+            data-slot="access-edit-submit"
+            onClick={() => {
+              if (parsedRate === undefined) return;
+              onSubmit({
+                name: name.trim(),
+                scopes,
+                expiresAt: accessExpiresAt(expires, Date.now(), customExpires),
+                rateLimit: parsedRate,
+                ipAllowlist: allowEntries,
+              });
+            }}
+          >
+            {pending ? "Saving…" : "Save"}
+          </SheetFooterButton>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/console/ui-next/src/features/access/sheets/access-expiry-fields.tsx

@@ -0,0 +1,66 @@
+/**
+ * Expiry presets shared by Access create / edit / refresh.
+ */
+
+import type { JSX } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  SHEET_CONTROL,
+  SheetChoice,
+  SheetChoiceRow,
+  SheetField,
+} from "@/components/ui/sheet-form.tsx";
+import { cn } from "@/lib/utils.ts";
+import type { AccessExpiryChoice } from "../lib/format-when.ts";
+
+/** Props for {@link AccessExpiryFields}. */
+export interface AccessExpiryFieldsProps {
+  readonly expires: AccessExpiryChoice;
+  readonly customExpires: string;
+  readonly onExpires: (choice: AccessExpiryChoice) => void;
+  readonly onCustomExpires: (raw: string) => void;
+}
+
+/**
+ * Never / 30d / 90d / custom duration row.
+ *
+ * @param props - Choice + custom duration
+ */
+export function AccessExpiryFields({
+  expires,
+  customExpires,
+  onExpires,
+  onCustomExpires,
+}: AccessExpiryFieldsProps): JSX.Element {
+  return (
+    <>
+      <SheetChoiceRow label="Expires">
+        <SheetChoice active={expires === "never"} onClick={() => onExpires("never")}>
+          never
+        </SheetChoice>
+        <SheetChoice active={expires === "30d"} onClick={() => onExpires("30d")}>
+          30d
+        </SheetChoice>
+        <SheetChoice active={expires === "90d"} onClick={() => onExpires("90d")}>
+          90d
+        </SheetChoice>
+        <SheetChoice active={expires === "custom"} onClick={() => onExpires("custom")}>
+          custom
+        </SheetChoice>
+      </SheetChoiceRow>
+      {expires === "custom" ? (
+        <SheetField label="Duration" hint="7d · 12h · 30m">
+          <Input
+            value={customExpires}
+            onChange={(e) => onCustomExpires(e.target.value)}
+            placeholder="7d"
+            autoComplete="off"
+            aria-label="Custom expiry duration"
+            flat
+            className={cn(SHEET_CONTROL, "font-mono")}
+          />
+        </SheetField>
+      ) : null}
+    </>
+  );
+}

package/src/console/ui-next/src/features/access/sheets/access-refresh-sheet.tsx

@@ -0,0 +1,104 @@
+/**
+ * Refresh an Access key expiry — same secret, new deadline from now.
+ */
+
+import { useEffect, useState, type JSX } from "react";
+import type { AccessKeyRow } from "@/client.ts";
+import { SheetError, SheetFooterButton } from "@/components/ui/sheet-form.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  accessExpiresAt,
+  accessRefreshExpiry,
+  parseAccessDurationMs,
+  type AccessExpiryChoice,
+} from "../lib/format-when.ts";
+import { AccessExpiryFields } from "./access-expiry-fields.tsx";
+
+/** Props for {@link AccessRefreshSheet}. */
+export interface AccessRefreshSheetProps {
+  readonly open: boolean;
+  readonly keyRow: AccessKeyRow;
+  readonly pending: boolean;
+  readonly error: string | null;
+  readonly now?: number;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onSubmit: (expiresAt: number | null) => void;
+}
+
+/**
+ * Expiry-only sheet. Does not mint or reveal a secret.
+ *
+ * @param props - Open + key + submit
+ */
+export function AccessRefreshSheet({
+  open,
+  keyRow,
+  pending,
+  error,
+  now = Date.now(),
+  onOpenChange,
+  onSubmit,
+}: AccessRefreshSheetProps): JSX.Element {
+  const seeded = accessRefreshExpiry(keyRow.expiresAt, now);
+  const [expires, setExpires] = useState<AccessExpiryChoice>(seeded.choice);
+  const [customExpires, setCustomExpires] = useState(seeded.custom);
+
+  useEffect(() => {
+    if (!open) return;
+    const next = accessRefreshExpiry(keyRow.expiresAt, now);
+    setExpires(next.choice);
+    setCustomExpires(next.custom);
+  }, [open, keyRow.id]);
+
+  const customMs = parseAccessDurationMs(customExpires);
+  const ready = !pending && (expires !== "custom" || customMs > 0);
+
+  return (
+    <Sheet open={open} modal={false} disablePointerDismissal onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="gap-0 p-0 data-[side=right]:sm:max-w-md"
+        data-slot="access-refresh-sheet"
+      >
+        <SheetHeader className="gap-1 border-b border-border/50">
+          <SheetTitle className="text-sm">Refresh expiry</SheetTitle>
+          <SheetDescription className="text-[11px]">
+            Reset the deadline from now. The secret does not change.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <AccessExpiryFields
+            expires={expires}
+            customExpires={customExpires}
+            onExpires={setExpires}
+            onCustomExpires={setCustomExpires}
+          />
+          {error ? <SheetError slot="access-refresh-error">{error}</SheetError> : null}
+        </div>
+        <SheetFooter>
+          <SheetFooterButton split onClick={() => onOpenChange(false)} disabled={pending}>
+            Cancel
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="default"
+            disabled={!ready}
+            data-slot="access-refresh-submit"
+            onClick={() => {
+              onSubmit(accessExpiresAt(expires, Date.now(), customExpires));
+            }}
+          >
+            {pending ? "Refreshing…" : "Refresh"}
+          </SheetFooterButton>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/console/ui-next/src/features/access/sheets/access-scope-field.tsx

@@ -0,0 +1,115 @@
+/**
+ * Multi-select grantable scopes — grouped by Module:Action prefix.
+ */
+
+import { useEffect, useMemo, useState, type JSX } from "react";
+import { cn } from "@/lib/utils.ts";
+import { groupAccessScopes } from "../lib/scope-groups.ts";
+import { AccessSheetSearch } from "./access-sheet-search.tsx";
+
+/** Props for {@link AccessScopeField}. */
+export interface AccessScopeFieldProps {
+  readonly scopes: readonly string[];
+  readonly selected: readonly string[];
+  readonly empty: string;
+  readonly onChange: (scopes: readonly string[]) => void;
+}
+
+/**
+ * Toggle chips for grantable scopes, one band per module.
+ *
+ * @param props - Catalog + selection
+ */
+export function AccessScopeField({
+  scopes,
+  selected,
+  empty,
+  onChange,
+}: AccessScopeFieldProps): JSX.Element {
+  const [query, setQuery] = useState("");
+  const chosen = new Set(selected);
+  const visible = useMemo(() => filterScopes(scopes, query), [scopes, query]);
+  const groups = useMemo(() => groupAccessScopes(visible), [visible]);
+
+  const catalogKey = scopes.join("\0");
+  useEffect(() => {
+    setQuery("");
+  }, [catalogKey]);
+
+  return (
+    <div className="border-b border-border/50" data-slot="access-scope-field">
+      <div className="flex items-stretch">
+        <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+          Scopes
+        </p>
+        {scopes.length > 0 ? (
+          <AccessSheetSearch
+            value={query}
+            placeholder="Search scopes"
+            label="Search scopes"
+            onChange={setQuery}
+          />
+        ) : null}
+      </div>
+      {scopes.length === 0 ? (
+        <p className="border-t border-border/50 px-4 py-3 text-[11px] text-muted-foreground">
+          {empty}
+        </p>
+      ) : visible.length === 0 ? (
+        <p className="border-t border-border/50 px-4 py-3 text-[11px] text-muted-foreground">
+          No scopes match.
+        </p>
+      ) : (
+        <div className="max-h-56 overflow-y-auto" role="group" aria-label="Scopes">
+          {groups.map((band) => (
+            <div
+              key={band.group}
+              className="flex items-stretch border-t border-border/50"
+              role="group"
+              aria-label={band.group}
+            >
+              <p className="flex w-[5.5rem] shrink-0 items-center px-4 font-mono text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+                {band.group}
+              </p>
+              <div className="flex min-w-0 flex-1 flex-wrap items-stretch">
+                {band.items.map((item) => {
+                  const on = chosen.has(item.scope);
+                  return (
+                    <button
+                      key={item.scope}
+                      type="button"
+                      aria-pressed={on}
+                      aria-label={item.scope}
+                      data-slot="access-scope-chip"
+                      title={item.scope}
+                      onClick={() => {
+                        onChange(
+                          on ? selected.filter((s) => s !== item.scope) : [...selected, item.scope],
+                        );
+                      }}
+                      className={cn(
+                        "inline-flex h-8 min-w-0 items-center px-2 font-mono text-[10px] font-semibold outline-none select-none",
+                        "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
+                        on
+                          ? "bg-muted text-foreground"
+                          : "text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {item.action}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function filterScopes(scopes: readonly string[], query: string): readonly string[] {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return scopes;
+  return scopes.filter((scope) => scope.toLowerCase().includes(q));
+}

package/src/console/ui-next/src/features/access/sheets/access-secret-sheet.tsx

@@ -0,0 +1,89 @@
+/**
+ * Reveal-once API key secret — same acknowledge pattern as Vault master key.
+ */
+
+import { useState, type JSX } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { SheetFooterButton } from "@/components/ui/sheet-form.tsx";
+
+/** Props for {@link AccessSecretSheet}. */
+export interface AccessSecretSheetProps {
+  readonly secret: string | null;
+  readonly title?: string;
+  readonly onDismiss: () => void;
+}
+
+/**
+ * Shows the generated key secret once. Copy warns; dismiss is acknowledge.
+ *
+ * @param props - Secret + dismiss
+ */
+export function AccessSecretSheet({
+  secret,
+  title = "New API key",
+  onDismiss,
+}: AccessSecretSheetProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const open = secret !== null;
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onDismiss();
+      }}
+    >
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="gap-0 p-0 data-[side=right]:sm:max-w-md"
+        data-slot="access-secret-sheet"
+      >
+        <SheetHeader className="gap-1 border-b border-border/50">
+          <SheetTitle className="text-sm">{title}</SheetTitle>
+          <SheetDescription className="text-[11px]">
+            Shown once. Store it offline. This Console process does not keep it for you.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <p className="border-b border-border/50 px-4 py-3 font-mono text-[11px] break-all">
+            {secret}
+          </p>
+          <p className="px-4 py-3 text-[11px] text-muted-foreground" role="status">
+            Copying puts the secret on the clipboard. Anyone with this device can read it until you
+            clear it.
+          </p>
+        </div>
+        <SheetFooter>
+          <SheetFooterButton
+            split
+            disabled={!secret}
+            onClick={() => {
+              if (!secret) return;
+              void navigator.clipboard?.writeText(secret);
+              setCopied(true);
+            }}
+          >
+            {copied ? "Copied" : "Copy (clipboard warning)"}
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="destructive"
+            onClick={() => {
+              setCopied(false);
+              onDismiss();
+            }}
+          >
+            I have stored this key
+          </SheetFooterButton>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/console/ui-next/src/features/access/sheets/access-sheet-search.tsx

@@ -0,0 +1,49 @@
+/**
+ * Flush search field for Access sheet catalogs (issuer, scopes).
+ */
+
+import { Search01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { JSX } from "react";
+import { Input } from "@/components/ui/input";
+import { SHEET_SEARCH } from "@/components/ui/sheet-form.tsx";
+import { cn } from "@/lib/utils.ts";
+
+/** Props for {@link AccessSheetSearch}. */
+export interface AccessSheetSearchProps {
+  readonly value: string;
+  readonly placeholder: string;
+  readonly label: string;
+  readonly onChange: (value: string) => void;
+}
+
+/**
+ * Leading-icon search inside a sheet section header.
+ *
+ * @param props - Query + labels
+ */
+export function AccessSheetSearch({
+  value,
+  placeholder,
+  label,
+  onChange,
+}: AccessSheetSearchProps): JSX.Element {
+  return (
+    <label className="relative min-w-0 flex-1">
+      <HugeiconsIcon
+        icon={Search01Icon}
+        className="pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground"
+        aria-hidden
+      />
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+        autoComplete="off"
+        flat
+        className={cn(SHEET_SEARCH)}
+      />
+    </label>
+  );
+}