okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/features/store/detail/resource-panel.tsx

@@ -0,0 +1,325 @@
+/**
+ * Store resource workbench — compact identity chrome + browse/edit surface.
+ * Schema lives in column headers; writers/readers surface in the command strip.
+ */
+
+import { useEffect, useMemo, useState, type JSX, type ReactNode } from "react";
+import {
+  Alert02Icon,
+  CheckmarkCircle02Icon,
+  Folder01Icon,
+  SecurityCheckIcon,
+  Timer01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { Manifest } from "../../../../../../manifest/types.ts";
+import { piiLogicalCount } from "../../../../../../elements/store/classify.ts";
+import type { RunRow, StoreListChild, StoreListStore } from "@/client.ts";
+import { CopyInlineButton } from "@/components/explorer/copy-inline-button.tsx";
+import { DetailHeader } from "@/components/explorer/detail-header.tsx";
+import { EXPLORER_STRIP_TOKEN_CLASS } from "@/components/explorer/explorer-chrome.ts";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { durationTone, durationToneClass } from "@/features/flows/traces/duration-tone.ts";
+import { formatDuration } from "@/features/flows/traces/format-duration.ts";
+import { cn } from "@/lib/utils";
+import { filesDriverLabel, filesDriverOrigin } from "../lib/files-origin.ts";
+import { latestReplicaLagFromRuns } from "../lib/replica-lag.ts";
+import { isSqlCatalogChild, storeChildLabel } from "../lib/sql-catalog.ts";
+import { STORE_FACET_SPECS } from "../lib/store-tree.ts";
+import { BrowseSection } from "./browse-section.tsx";
+
+/** Props for {@link ResourcePanel}. */
+export interface ResourcePanelProps {
+  readonly store: StoreListStore;
+  readonly child: StoreListChild;
+  readonly manifest: Manifest | null;
+  readonly tenancyDeclared: boolean;
+  readonly tenants: readonly string[];
+  readonly tenant: string | null;
+  readonly onTenantChange: (tenant: string | null) => void;
+  /** Live-merged runs buffer — replica lag follows the newest touching run. */
+  readonly runs?: readonly RunRow[];
+  /** Start-panel collapse control. */
+  readonly leading?: ReactNode;
+}
+
+/**
+ * Right-pane workbench for a selected store child (effectRef identity).
+ *
+ * @param props - Selection + Manifest + tenancy + live runs
+ */
+export function ResourcePanel({
+  store,
+  child,
+  manifest,
+  tenancyDeclared,
+  tenants,
+  tenant,
+  onTenantChange,
+  runs = [],
+  leading,
+}: ResourcePanelProps): JSX.Element {
+  const drift = store.migrationDrift;
+  const spec = STORE_FACET_SPECS[store.facet];
+  const catalog = isSqlCatalogChild(child);
+  const piiCount = catalog ? 0 : piiLogicalCount(child.piiColumns);
+  const [piiMasked, setPiiMasked] = useState(true);
+
+  useEffect(() => {
+    setPiiMasked(true);
+  }, [child.effectRef]);
+
+  const effectRefs = useMemo(
+    () => new Set(store.children.map((c) => c.effectRef)),
+    [store.children],
+  );
+  const lagMs = latestReplicaLagFromRuns(runs, effectRefs) ?? store.replicaLagMs;
+  const lagTone = lagMs != null ? durationTone(lagMs) : null;
+
+  const files = store.facet === "files";
+  const showStatus = Boolean(drift || lagMs !== null || store.contentAddressed || piiCount > 0);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden" data-slot="resource-panel">
+      <DetailHeader
+        dataSlot="resource-header"
+        leading={leading}
+        icon={<HugeiconsIcon icon={files ? Folder01Icon : spec.icon} className="size-4" />}
+        wellClassName={spec.wellClass}
+        title={storeChildLabel(child)}
+        badge={
+          <>
+            <span
+              className="shrink-0 font-mono text-[10px] font-medium tracking-[0.08em] text-muted-foreground uppercase"
+              data-slot="facet-badge"
+            >
+              {files ? "Bucket" : spec.label}
+            </span>
+            {store.description ? (
+              <span className="min-w-0 truncate text-[11px] text-muted-foreground">
+                {store.description}
+              </span>
+            ) : null}
+          </>
+        }
+        subtitle={
+          <>
+            {files ? (
+              <>
+                <span className="shrink-0 font-mono text-[11px] leading-none text-muted-foreground">
+                  {filesDriverLabel(store.driverId)}
+                </span>
+                <span aria-hidden className="text-border">
+                  ·
+                </span>
+                <span className="shrink-0 text-[11px] leading-none text-muted-foreground">
+                  {filesDriverOrigin(store.driverId)}
+                </span>
+                <span aria-hidden className="text-border">
+                  ·
+                </span>
+                <code className="min-w-0 truncate font-mono text-[11px] leading-none text-foreground/70">
+                  {child.effectRef}
+                </code>
+                <CopyInlineButton value={child.effectRef} label="Copy effect ref" />
+              </>
+            ) : (
+              <>
+                <span className="shrink-0 font-mono text-[11px] leading-none text-muted-foreground">
+                  {store.ref}
+                </span>
+                <span aria-hidden className="text-border">
+                  ·
+                </span>
+                <code className="min-w-0 truncate font-mono text-[11px] leading-none text-foreground/70">
+                  {child.effectRef}
+                </code>
+                <CopyInlineButton value={child.effectRef} label="Copy effect ref" />
+              </>
+            )}
+          </>
+        }
+        actions={
+          showStatus ? (
+            <div className="flex h-full shrink-0 items-stretch" data-slot="resource-status">
+              {lagMs !== null && lagTone ? (
+                <StatusChip
+                  chipClassName={durationToneClass(lagTone)}
+                  icon={<HugeiconsIcon icon={Timer01Icon} className="size-3" aria-hidden />}
+                  title="Replica lag from the newest run that touched this store"
+                  data-slot="replica-lag"
+                >
+                  <span className="font-mono tabular-nums">{formatDuration(lagMs)}</span>
+                  <span className="opacity-70">lag</span>
+                </StatusChip>
+              ) : null}
+              {store.contentAddressed ? <StatusChip>content-addressed</StatusChip> : null}
+              {piiCount > 0 ? (
+                <StatusChip
+                  tone={piiMasked ? "sky" : "amber"}
+                  icon={<HugeiconsIcon icon={SecurityCheckIcon} className="size-3" aria-hidden />}
+                  title={
+                    piiMasked
+                      ? `PII masked on ${child.piiColumns.join(", ")}. Click to show all cleartext (audited).`
+                      : `PII visible on ${child.piiColumns.join(", ")}. Click to remask.`
+                  }
+                  pressed={piiMasked}
+                  ariaLabel={
+                    piiMasked
+                      ? `PII masking on for ${piiCount} columns. Show all.`
+                      : `PII visible for ${piiCount} columns. Hide all.`
+                  }
+                  data-slot="pii-toggle"
+                  onClick={() => setPiiMasked((on) => !on)}
+                >
+                  {piiCount} PII
+                </StatusChip>
+              ) : null}
+              {drift ? (
+                <StatusChip
+                  tone={drift.drifted ? "amber" : "emerald"}
+                  icon={
+                    <HugeiconsIcon
+                      icon={drift.drifted ? Alert02Icon : CheckmarkCircle02Icon}
+                      className="size-3"
+                      aria-hidden
+                    />
+                  }
+                  title={`Migration — declared ${drift.declared} / applied ${drift.applied ?? "(none)"}`}
+                  role="status"
+                  data-slot="migration-drift"
+                  data-drifted={drift.drifted ? "true" : "false"}
+                >
+                  {drift.drifted ? "Drifted" : "In sync"}
+                  <span className="font-mono opacity-70">{shortFp(drift.declared)}</span>
+                </StatusChip>
+              ) : null}
+            </div>
+          ) : undefined
+        }
+      />
+
+      {store.warnings.length > 0 ? (
+        <div className="flex shrink-0 items-start gap-2 border-b border-amber-500/25 bg-amber-500/5 px-3 py-1.5">
+          <HugeiconsIcon
+            icon={Alert02Icon}
+            className="mt-px size-3.5 shrink-0 text-amber-600 dark:text-amber-400"
+            aria-hidden
+          />
+          <ul
+            className="flex flex-col gap-0.5 text-[11px] leading-relaxed text-amber-800 dark:text-amber-300"
+            aria-label="Warnings"
+          >
+            {store.warnings.map((w) => (
+              <li key={`${w.key}:${w.code}`}>
+                <span className="font-mono">{w.key}</span>: {w.message}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <BrowseSection
+        store={store}
+        child={child}
+        manifest={manifest}
+        tenancyDeclared={tenancyDeclared}
+        tenants={tenants}
+        tenant={tenant}
+        onTenantChange={onTenantChange}
+        piiMasked={piiMasked}
+      />
+    </div>
+  );
+}
+
+type ChipTone = "neutral" | "emerald" | "amber" | "sky";
+
+const CHIP_TONES: Record<ChipTone, string> = {
+  neutral: "text-muted-foreground",
+  emerald: "text-emerald-700 dark:text-emerald-400",
+  amber: "text-amber-800 dark:text-amber-300",
+  sky: "text-sky-700 dark:text-sky-400",
+};
+
+/** Props for {@link StatusChip}. */
+interface StatusChipProps {
+  readonly tone?: ChipTone;
+  readonly icon?: ReactNode;
+  readonly title?: string;
+  readonly children: ReactNode;
+  readonly role?: string;
+  readonly "data-slot"?: string;
+  readonly "data-drifted"?: string;
+  readonly pressed?: boolean;
+  readonly onClick?: () => void;
+  readonly ariaLabel?: string;
+  readonly chipClassName?: string;
+}
+
+/**
+ * Status token in the identity strip. Pass `onClick` to make it a toggle.
+ *
+ * @param props - Tone + optional leading icon
+ */
+function StatusChip({
+  tone = "neutral",
+  icon,
+  title,
+  children,
+  role,
+  "data-slot": dataSlot,
+  "data-drifted": dataDrifted,
+  pressed,
+  onClick,
+  ariaLabel,
+  chipClassName,
+}: StatusChipProps): JSX.Element {
+  const className = cn(
+    EXPLORER_STRIP_TOKEN_CLASS,
+    "whitespace-nowrap",
+    chipClassName ?? CHIP_TONES[tone],
+    onClick && "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+  );
+
+  const chip = onClick ? (
+    <button
+      type="button"
+      className={className}
+      aria-pressed={pressed}
+      aria-label={ariaLabel}
+      data-slot={dataSlot}
+      data-drifted={dataDrifted}
+      onClick={onClick}
+    >
+      {icon}
+      {children}
+    </button>
+  ) : (
+    <span className={className} role={role} data-slot={dataSlot} data-drifted={dataDrifted}>
+      {icon}
+      {children}
+    </span>
+  );
+
+  if (!title) return chip;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={(props) => (
+          <span {...props} className="flex self-stretch">
+            {chip}
+          </span>
+        )}
+      />
+      <TooltipContent side="bottom" className="max-w-xs text-[11px]">
+        {title}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function shortFp(fp: string): string {
+  return fp.length > 12 ? `${fp.slice(0, 12)}…` : fp;
+}

package/src/console/ui-next/src/features/store/detail/reveal-cell.tsx

@@ -0,0 +1,137 @@
+/**
+ * Audited reveal control for a masked PII SQL cell.
+ */
+
+import { useState, type JSX } from "react";
+import { ViewIcon, ViewOffSlashIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useStoreReveal } from "../data/use-store-reveal.ts";
+
+/** Props for {@link RevealCell}. */
+export interface RevealCellProps {
+  readonly refName: string;
+  readonly child: string;
+  readonly tenant?: string;
+  readonly rowId: string;
+  readonly column: string;
+  readonly maskedValue: unknown;
+}
+
+/**
+ * Show a compact mask glyph with an audited Reveal control; replace with cleartext after success.
+ *
+ * @param props - Row/column identity + masked display value
+ */
+export function RevealCell({
+  refName,
+  child,
+  tenant,
+  rowId,
+  column,
+  maskedValue,
+}: RevealCellProps): JSX.Element {
+  const reveal = useStoreReveal();
+  const [clear, setClear] = useState<{ readonly value: unknown } | null>(null);
+
+  if (clear !== null) {
+    return (
+      <span className="inline-flex max-w-full items-center gap-1" data-slot="reveal-cell">
+        <span className="min-w-0 truncate font-mono text-[11px]">{formatCell(clear.value)}</span>
+        <Tooltip>
+          <TooltipTrigger
+            render={(props) => (
+              <Button
+                {...props}
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                className="size-5 text-muted-foreground"
+                aria-label={`Hide ${column}`}
+                data-slot="hide-button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  props.onClick?.(event);
+                  setClear(null);
+                }}
+              >
+                <HugeiconsIcon icon={ViewOffSlashIcon} className="size-3" aria-hidden />
+              </Button>
+            )}
+          />
+          <TooltipContent side="top" className="text-[11px]">
+            Hide cleartext
+          </TooltipContent>
+        </Tooltip>
+      </span>
+    );
+  }
+
+  return (
+    <span className="inline-flex max-w-full items-center gap-1" data-slot="reveal-cell">
+      <span
+        className="rounded-md bg-muted/70 px-1.5 py-px font-mono text-[10px] tracking-[0.22em] text-muted-foreground"
+        aria-label="Masked"
+      >
+        ••••••
+      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={(props) => (
+            <Button
+              {...props}
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="size-5 text-muted-foreground"
+              disabled={reveal.isPending || rowId.length === 0}
+              aria-label={`Reveal ${column}`}
+              data-slot="reveal-button"
+              onClick={(event) => {
+                event.stopPropagation();
+                props.onClick?.(event);
+                reveal.mutate(
+                  {
+                    ref: refName,
+                    child,
+                    ...(tenant !== undefined ? { tenant } : {}),
+                    id: rowId,
+                    column,
+                  },
+                  {
+                    onSuccess: (data) => {
+                      setClear({ value: data.value });
+                    },
+                  },
+                );
+              }}
+            >
+              <HugeiconsIcon icon={ViewIcon} className="size-3" aria-hidden />
+            </Button>
+          )}
+        />
+        <TooltipContent side="top" className="text-[11px]">
+          Audited PII reveal — logged server-side
+        </TooltipContent>
+      </Tooltip>
+      {reveal.isError ? (
+        <span className="text-[10px] text-destructive" role="status">
+          {reveal.error.message}
+        </span>
+      ) : null}
+      <span className="sr-only">{formatCell(maskedValue)}</span>
+    </span>
+  );
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "[unserializable]";
+  }
+}

package/src/console/ui-next/src/features/store/detail/store-row-detail-sheet.tsx

@@ -0,0 +1,225 @@
+/**
+ * Store row detail Sheet — Fields / JSON tabs + fixed destructive footer.
+ */
+
+import { useEffect, useMemo, useState, type JSX } from "react";
+import { Delete02Icon, PencilEdit01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { HighlightedJson } from "@/components/highlighted-json";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+import { RevealCell } from "./reveal-cell.tsx";
+import { formatGridCell, type StoreGridModel, type StoreGridRow } from "../lib/grid-model.ts";
+import { isStorePiiMask } from "../lib/patch.ts";
+import { isRtlText } from "../lib/rtl.ts";
+
+/** Props for {@link StoreRowDetailSheet}. */
+export interface StoreRowDetailSheetProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly model: StoreGridModel;
+  readonly row: StoreGridRow | null;
+  readonly facet: "sql" | "kv" | "files" | "index";
+  readonly storeRef: string;
+  readonly childName: string;
+  readonly tenant?: string | null;
+  readonly masked?: boolean;
+  readonly onEditRow?: (row: StoreGridRow) => void;
+  readonly onDeleteRow?: (row: StoreGridRow) => void;
+}
+
+/**
+ * Right-side detail for one grid row — Fields (Reveal/edit) and full JSON.
+ *
+ * @param props - Selected row + facet + mutation callbacks
+ */
+export function StoreRowDetailSheet({
+  open,
+  onOpenChange,
+  model,
+  row,
+  facet,
+  storeRef,
+  childName,
+  tenant,
+  masked = false,
+  onEditRow,
+  onDeleteRow,
+}: StoreRowDetailSheetProps): JSX.Element {
+  const [tab, setTab] = useState<"fields" | "json">("fields");
+
+  useEffect(() => {
+    if (open) setTab("fields");
+  }, [open, row]);
+
+  const json = useMemo(() => {
+    if (!row) return "";
+    try {
+      return JSON.stringify(row.cells, null, 2);
+    } catch {
+      return "[unserializable row]";
+    }
+  }, [row]);
+
+  if (!row) return <></>;
+
+  const canEdit = model.editable && (facet === "sql" || facet === "kv") && onEditRow !== undefined;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="gap-0 p-0 sm:max-w-md"
+        data-slot="store-row-detail-sheet"
+      >
+        <SheetHeader className="gap-2 border-b border-border/50">
+          <div className="flex flex-col gap-0.5 pr-8">
+            <SheetTitle className="text-sm">
+              Row <span className="font-mono">{row.id}</span>
+            </SheetTitle>
+            <SheetDescription className="font-mono text-[11px]">
+              {storeRef}
+              {facet === "sql" ? `/${childName}` : ""}
+            </SheetDescription>
+          </div>
+          <div className="flex items-center gap-4" role="tablist" aria-label="Row detail tabs">
+            <TabButton active={tab === "fields"} onClick={() => setTab("fields")} id="fields">
+              Fields
+            </TabButton>
+            <TabButton active={tab === "json"} onClick={() => setTab("json")} id="json">
+              JSON
+            </TabButton>
+          </div>
+        </SheetHeader>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-2">
+          {tab === "fields" ? (
+            <ul className="flex flex-col divide-y divide-border/50" data-slot="row-fields">
+              {model.columns.map((col) => {
+                const value = row.cells[col.key];
+                const maskedPii = col.pii && masked && isStorePiiMask(value);
+                return (
+                  <li key={col.key} className="flex items-baseline gap-3 py-1.5">
+                    <span className="flex w-32 shrink-0 items-center gap-1.5">
+                      <span className="truncate font-mono text-[11px] font-medium text-muted-foreground">
+                        {col.key}
+                      </span>
+                      <span className="shrink-0 font-mono text-[9px] text-muted-foreground/60">
+                        {col.type === "integer" || col.type === "number"
+                          ? "123"
+                          : col.type === "json"
+                            ? "{ }"
+                            : "abc"}
+                      </span>
+                      {col.primaryKey ? (
+                        <span className="shrink-0 font-mono text-[9px] text-amber-600 dark:text-amber-400">
+                          PK
+                        </span>
+                      ) : null}
+                      {col.pii ? (
+                        <span className="shrink-0 font-mono text-[9px] text-sky-600 dark:text-sky-400">
+                          PII
+                        </span>
+                      ) : null}
+                    </span>
+                    {maskedPii ? (
+                      <RevealCell
+                        refName={storeRef}
+                        child={childName}
+                        {...(tenant ? { tenant } : {})}
+                        rowId={row.id}
+                        column={col.key}
+                        maskedValue={value}
+                      />
+                    ) : (
+                      <span
+                        className="min-w-0 flex-1 font-mono text-[11px] break-words"
+                        dir={isRtlText(value) ? "rtl" : "ltr"}
+                      >
+                        {formatGridCell(value)}
+                      </span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <div className="rounded-md border border-border/60" data-slot="row-json">
+              <HighlightedJson
+                json={json}
+                dataSlot="store-row-json"
+                className="flex max-h-none overflow-auto"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-auto flex items-center justify-between gap-2 border-t border-border/50 px-4 py-2.5">
+          {canEdit ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onEditRow(row)}
+              data-slot="row-detail-edit"
+            >
+              <HugeiconsIcon icon={PencilEdit01Icon} className="size-3.5" aria-hidden />
+              Edit
+            </Button>
+          ) : (
+            <span />
+          )}
+          {onDeleteRow ? (
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              onClick={() => onDeleteRow(row)}
+              data-slot="row-detail-delete"
+            >
+              <HugeiconsIcon icon={Delete02Icon} className="size-3.5" aria-hidden />
+              Delete 1 row
+            </Button>
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  id,
+  children,
+}: {
+  readonly active: boolean;
+  readonly onClick: () => void;
+  readonly id: string;
+  readonly children: string;
+}): JSX.Element {
+  return (
+    <button
+      type="button"
+      role="tab"
+      id={`tab-${id}`}
+      aria-selected={active}
+      onClick={onClick}
+      className={cn(
+        "px-2 py-1.5 text-[10px] font-semibold tracking-[0.08em] uppercase transition-colors hover:bg-muted/50",
+        active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+      )}
+      data-slot={`row-tab-${id}`}
+    >
+      {children}
+    </button>
+  );
+}