okengine 0.11.2 → 0.13.0

package/src/console/ui-next/src/features/store/grid/store-edit-sheet.tsx

@@ -0,0 +1,329 @@
+/**
+ * Edit row Sheet — preview → typed confirm → commit. PII-masked cells are
+ * never prefilled with the mask; reveal first or set a new value.
+ */
+
+import { useEffect, useMemo, useState, type JSX } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  SHEET_CONTROL,
+  SheetError,
+  SheetField,
+  SheetFooterButton,
+} from "@/components/ui/sheet-form.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils.ts";
+import { useStoreEdit, useStorePreview } from "../data/use-store-edit.ts";
+import { useStoreReveal } from "../data/use-store-reveal.ts";
+import { editConfirmation, validateTypedConfirm } from "../lib/confirmation.ts";
+import { formatGridCell, type StoreGridModel, type StoreGridRow } from "../lib/grid-model.ts";
+import { isStorePiiMask, parseStoreCellDraft, sanitizeStorePatch } from "../lib/patch.ts";
+
+/** Props for {@link StoreEditSheet}. */
+export interface StoreEditSheetProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly model: StoreGridModel;
+  readonly row: StoreGridRow | null;
+  readonly facet: "sql" | "kv";
+  readonly storeRef: string;
+  readonly childName: string;
+  readonly tenant?: string | null;
+  readonly production: boolean;
+}
+
+/**
+ * Edit one SQL row or KV value with dry-run preview and typed confirmation.
+ *
+ * @param props - Target row + facet + environment
+ */
+export function StoreEditSheet({
+  open,
+  onOpenChange,
+  model,
+  row,
+  facet,
+  storeRef,
+  childName,
+  tenant,
+  production,
+}: StoreEditSheetProps): JSX.Element {
+  const preview = useStorePreview();
+  const edit = useStoreEdit();
+  const reveal = useStoreReveal();
+
+  const editableColumns = useMemo(() => model.columns.filter((c) => c.editable), [model.columns]);
+
+  const [draft, setDraft] = useState<Record<string, string>>({});
+  const [revealed, setRevealed] = useState<Record<string, unknown>>({});
+  const [typed, setTyped] = useState("");
+  const [reason, setReason] = useState("");
+  const [touched, setTouched] = useState(false);
+
+  const confirmation = editConfirmation({ production });
+  const phrase = confirmation.kind === "typed" ? confirmation.phrase : "EDIT";
+
+  useEffect(() => {
+    if (!open || !row) {
+      setDraft({});
+      setRevealed({});
+      setTyped("");
+      setReason("");
+      setTouched(false);
+      preview.reset();
+      edit.reset();
+      return;
+    }
+    const next: Record<string, string> = {};
+    for (const col of editableColumns) {
+      const raw = row.cells[col.key];
+      if (col.pii && isStorePiiMask(raw)) {
+        next[col.key] = "";
+      } else if (col.type === "integer" || col.type === "number") {
+        next[col.key] = raw === null || raw === undefined ? "" : String(raw);
+      } else if (col.type === "json") {
+        next[col.key] = raw === undefined ? "" : JSON.stringify(raw, null, 2);
+      } else {
+        next[col.key] = raw === null || raw === undefined ? "" : String(raw);
+      }
+    }
+    setDraft(next);
+  }, [open, row, editableColumns, preview, edit]);
+
+  if (!row) return <></>;
+
+  const buildPatch = (): Record<string, unknown> => {
+    const patch: Record<string, unknown> = {};
+    for (const col of editableColumns) {
+      const text = draft[col.key] ?? "";
+      if (col.pii && text.trim() === "") continue;
+      patch[col.key] = parseStoreCellDraft(col.type, text);
+    }
+    return sanitizeStorePatch(patch);
+  };
+
+  const baseInput = () => ({
+    ref: storeRef,
+    ...(facet === "sql" ? { child: childName, id: row.id } : { key: row.id }),
+    ...(tenant ? { tenant } : {}),
+  });
+
+  const runPreview = () => {
+    preview.mutate({ ...baseInput(), patch: buildPatch() });
+  };
+
+  const commit = () => {
+    if (confirmation.kind === "typed") {
+      const errors = validateTypedConfirm({ typed, reason, phrase });
+      setTouched(true);
+      if (errors) return;
+    }
+    edit.mutate(
+      {
+        ...baseInput(),
+        patch: buildPatch(),
+        commit: true,
+        ...(confirmation.kind === "typed"
+          ? { confirmation: typed.trim(), reason: reason.trim() }
+          : {}),
+      },
+      {
+        onSuccess: () => onOpenChange(false),
+      },
+    );
+  };
+
+  const errors = touched ? validateTypedConfirm({ typed, reason, phrase }) : null;
+  const confirmValid =
+    confirmation.kind !== "typed" || validateTypedConfirm({ typed, reason, phrase }) === null;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="sm:max-w-lg"
+        data-slot="store-edit-sheet"
+      >
+        <SheetHeader>
+          <SheetTitle>
+            Edit {facet === "sql" ? "row" : "key"} <span className="font-mono">{row.id}</span>
+          </SheetTitle>
+          <SheetDescription>
+            Direct {facet === "sql" ? "SQL" : "KV"} edit — not a flow execution. Preview first;
+            commit requires confirmation.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          {editableColumns.map((col) => {
+            const raw = row.cells[col.key];
+            const masked = col.pii && isStorePiiMask(raw) && revealed[col.key] === undefined;
+            return (
+              <SheetField key={col.key} label={col.pii ? `${col.key} · PII` : col.key}>
+                {masked ? (
+                  <div className="flex items-center">
+                    <Input
+                      value=""
+                      disabled
+                      placeholder="[redacted] — reveal to edit current value"
+                      aria-label={`${col.key} masked`}
+                      flat
+                      className={cn(SHEET_CONTROL, "font-mono")}
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="mr-3 shrink-0"
+                      disabled={reveal.isPending}
+                      onClick={() => {
+                        reveal.mutate(
+                          {
+                            ref: storeRef,
+                            child: childName,
+                            ...(tenant ? { tenant } : {}),
+                            id: row.id,
+                            column: col.key,
+                          },
+                          {
+                            onSuccess: (data) => {
+                              setRevealed((prev) => ({ ...prev, [col.key]: data.value }));
+                              setDraft((prev) => ({
+                                ...prev,
+                                [col.key]: formatGridCell(data.value),
+                              }));
+                            },
+                          },
+                        );
+                      }}
+                    >
+                      Reveal
+                    </Button>
+                  </div>
+                ) : col.type === "json" ? (
+                  <textarea
+                    value={draft[col.key] ?? ""}
+                    onChange={(e) => setDraft((prev) => ({ ...prev, [col.key]: e.target.value }))}
+                    aria-label={col.key}
+                    rows={4}
+                    className="min-h-20 w-full rounded-none border-0 bg-transparent px-4 py-1.5 font-mono text-[11px] outline-none"
+                  />
+                ) : (
+                  <Input
+                    value={draft[col.key] ?? ""}
+                    onChange={(e) => setDraft((prev) => ({ ...prev, [col.key]: e.target.value }))}
+                    type={col.type === "integer" || col.type === "number" ? "number" : "text"}
+                    aria-label={col.key}
+                    flat
+                    className={cn(SHEET_CONTROL, "font-mono")}
+                  />
+                )}
+                {col.pii && !masked ? (
+                  <span className="block px-4 pb-2 text-[10px] text-muted-foreground">
+                    Leave empty to keep the current value unchanged.
+                  </span>
+                ) : null}
+              </SheetField>
+            );
+          })}
+
+          {preview.data ? (
+            <div className="px-4 py-3">
+              <div
+                className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] text-amber-800 dark:text-amber-300"
+                role="status"
+                data-slot="edit-preview"
+              >
+                <p className="font-medium">Dry-run preview — will not fire:</p>
+                <p>
+                  signals: {preview.data.willNotFire.signals.join(", ") || "none"} · channels:{" "}
+                  {preview.data.willNotFire.channels.join(", ") || "none"}
+                </p>
+              </div>
+            </div>
+          ) : null}
+          {preview.isError ? <SheetError>{preview.error.message}</SheetError> : null}
+          {edit.isError ? <SheetError>{edit.error.message}</SheetError> : null}
+
+          {confirmation.kind === "typed" ? (
+            <>
+              <SheetField label={`Type ${phrase} to confirm`}>
+                <Input
+                  value={typed}
+                  onChange={(e) => setTyped(e.target.value)}
+                  onBlur={() => setTouched(true)}
+                  placeholder={phrase}
+                  aria-label={`Type ${phrase} to confirm`}
+                  aria-invalid={errors?.typed ? true : undefined}
+                  flat
+                  className={cn(SHEET_CONTROL, "font-mono")}
+                  autoComplete="off"
+                />
+                {errors?.typed ? (
+                  <span className="block px-4 pb-2 text-[10px] text-destructive" role="alert">
+                    {errors.typed}
+                  </span>
+                ) : null}
+              </SheetField>
+              <SheetField label="Reason">
+                <Input
+                  value={reason}
+                  onChange={(e) => setReason(e.target.value)}
+                  onBlur={() => setTouched(true)}
+                  placeholder="Why is this change needed?"
+                  aria-label="Reason"
+                  aria-invalid={errors?.reason ? true : undefined}
+                  flat
+                  className={SHEET_CONTROL}
+                />
+                {errors?.reason ? (
+                  <span className="block px-4 pb-2 text-[10px] text-destructive" role="alert">
+                    {errors.reason}
+                  </span>
+                ) : null}
+              </SheetField>
+            </>
+          ) : (
+            <p className="border-b border-border/50 px-4 py-3 text-[11px] text-muted-foreground">
+              Non-production — commit applies immediately (undo window{" "}
+              {confirmation.windowMs / 1000}
+              s).
+            </p>
+          )}
+        </div>
+
+        <SheetFooter>
+          <SheetFooterButton split onClick={() => onOpenChange(false)} disabled={edit.isPending}>
+            Cancel
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="secondary"
+            split
+            onClick={runPreview}
+            disabled={preview.isPending || edit.isPending}
+            data-slot="preview-edit"
+          >
+            {preview.isPending ? "Previewing…" : "Preview"}
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="destructive"
+            onClick={commit}
+            disabled={!confirmValid || edit.isPending}
+            data-slot="commit-edit"
+          >
+            {edit.isPending ? "Committing…" : "Commit edit"}
+          </SheetFooterButton>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/console/ui-next/src/features/store/grid/store-grid-context-menu.tsx

@@ -0,0 +1,111 @@
+/**
+ * Minimal fixed-position context menu for the Store data grid — closes on
+ * outside pointerdown, Escape, scroll, or resize.
+ */
+
+import { useEffect, useRef, type ComponentProps, type JSX } from "react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Kbd } from "@/components/ui/kbd";
+import { cn } from "@/lib/utils";
+
+/** One menu entry — either an action or a visual separator. */
+export type StoreGridMenuItem =
+  | { readonly type: "separator" }
+  | {
+      readonly type?: "action";
+      readonly label: string;
+      readonly shortcut?: string;
+      readonly icon?: ComponentProps<typeof HugeiconsIcon>["icon"];
+      readonly destructive?: boolean;
+      readonly disabled?: boolean;
+      readonly onSelect: () => void;
+    };
+
+/** Props for {@link StoreGridContextMenu}. */
+export interface StoreGridContextMenuProps {
+  readonly x: number;
+  readonly y: number;
+  readonly items: readonly StoreGridMenuItem[];
+  readonly onClose: () => void;
+}
+
+/**
+ * Right-click menu anchored at cursor coordinates, clamped to the viewport.
+ *
+ * @param props - Position + items + close callback
+ */
+export function StoreGridContextMenu({
+  x,
+  y,
+  items,
+  onClose,
+}: StoreGridContextMenuProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      if (!ref.current?.contains(event.target as Node)) onClose();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    const onDismiss = () => onClose();
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("scroll", onDismiss, true);
+    window.addEventListener("resize", onDismiss);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("scroll", onDismiss, true);
+      window.removeEventListener("resize", onDismiss);
+    };
+  }, [onClose]);
+
+  const estimatedHeight = items.length * 30 + 12;
+  const style = {
+    top: Math.max(8, Math.min(y, window.innerHeight - estimatedHeight - 8)),
+    left: Math.max(8, Math.min(x, window.innerWidth - 208)),
+  } as const;
+
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      aria-label="Cell actions"
+      data-slot="store-grid-context-menu"
+      className="fixed z-50 min-w-52 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10"
+      style={style}
+    >
+      {items.map((item, index) =>
+        item.type === "separator" ? (
+          <div key={`sep-${index}`} role="separator" className="-mx-1 my-1 h-px bg-border" />
+        ) : (
+          <button
+            key={item.label}
+            type="button"
+            role="menuitem"
+            disabled={item.disabled}
+            onClick={() => {
+              onClose();
+              item.onSelect();
+            }}
+            className={cn(
+              "flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-left text-[12px] outline-none select-none hover:bg-accent focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50",
+              item.destructive && "text-destructive hover:bg-destructive/10",
+            )}
+          >
+            {item.icon ? (
+              <HugeiconsIcon icon={item.icon} className="size-3.5 shrink-0" aria-hidden />
+            ) : null}
+            <span className="min-w-0 truncate">{item.label}</span>
+            {item.shortcut ? <Kbd className="ml-auto">{item.shortcut}</Kbd> : null}
+          </button>
+        ),
+      )}
+    </div>
+  );
+}

package/src/console/ui-next/src/features/store/grid/store-grid-shortcuts.tsx

@@ -0,0 +1,124 @@
+/**
+ * Keyboard shortcuts reference Sheet for the Store data grid (Ctrl+/).
+ */
+
+import type { JSX } from "react";
+import { Kbd } from "@/components/ui/kbd";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { modKey } from "@/lib/shortcut.ts";
+
+/** Props for {@link StoreGridShortcuts}. */
+export interface StoreGridShortcutsProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+}
+
+interface ShortcutGroup {
+  readonly title: string;
+  readonly rows: readonly (readonly [keys: string, description: string])[];
+}
+
+const GROUPS: readonly ShortcutGroup[] = [
+  {
+    title: "Navigation",
+    rows: [
+      ["↑ ↓ ← →", "Move between cells"],
+      ["Tab / Shift+Tab", "Next / previous cell"],
+      ["Home / End", "First / last column"],
+      ["Ctrl+↑↓←→", "Jump to grid edge"],
+      ["Ctrl+Home / End", "First / last cell"],
+      ["PgUp / PgDn", "Move one page"],
+    ],
+  },
+  {
+    title: "Selection",
+    rows: [
+      ["Shift+Click / Arrows", "Extend range"],
+      ["Ctrl+Click", "Toggle single cell"],
+      ["Ctrl+A", "Select all cells"],
+      ["Escape", "Clear selection"],
+    ],
+  },
+  {
+    title: "Editing",
+    rows: [
+      ["Enter / F2 / Double-click", "Edit cell"],
+      ["Type any character", "Replace cell contents"],
+      ["Enter", "Commit + move down"],
+      ["Tab / Shift+Tab", "Commit + next / previous"],
+      ["Escape", "Cancel edit"],
+    ],
+  },
+  {
+    title: "Clipboard",
+    rows: [
+      ["Ctrl+C", "Copy selected cells"],
+      ["Ctrl+X", "Cut selected cells"],
+      ["Ctrl+V", "Paste from focused cell"],
+      ["Delete / Backspace", "Clear selected cells"],
+    ],
+  },
+  {
+    title: "Rows & columns",
+    rows: [
+      ["Ctrl+Backspace", "Delete selected rows"],
+      ["Header click", "Sort (Shift = multi-sort)"],
+    ],
+  },
+  {
+    title: "General",
+    rows: [
+      ["Ctrl+Z / Ctrl+Shift+Z", "Undo / redo edit"],
+      ["Ctrl+F", "Find / search index"],
+      ["Ctrl+/", "Toggle this reference"],
+    ],
+  },
+];
+
+/**
+ * Right-side reference listing every grid shortcut. Non-modal (no overlay).
+ *
+ * @param props - Open state
+ */
+export function StoreGridShortcuts({ open, onOpenChange }: StoreGridShortcutsProps): JSX.Element {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="sm:max-w-sm"
+        data-slot="store-grid-shortcuts"
+      >
+        <SheetHeader>
+          <SheetTitle>Keyboard shortcuts</SheetTitle>
+          <SheetDescription>Spreadsheet-style navigation, selection, and editing.</SheetDescription>
+        </SheetHeader>
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4">
+          {GROUPS.map((group) => (
+            <section key={group.title} className="flex flex-col gap-1.5">
+              <h3 className="font-mono text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+                {group.title}
+              </h3>
+              <ul className="flex flex-col gap-1">
+                {group.rows.map(([keys, description]) => (
+                  <li key={keys} className="flex items-center justify-between gap-3 text-[12px]">
+                    <span className="text-muted-foreground">{description}</span>
+                    <Kbd className="shrink-0 whitespace-nowrap">
+                      {keys.replaceAll("Ctrl", modKey())}
+                    </Kbd>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/console/ui-next/src/features/store/lib/cell-selection.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, test } from "bun:test";
+import {
+  clampCoord,
+  coordKey,
+  matrixToTsv,
+  parseCoordKey,
+  rangeArea,
+  rangeBounds,
+  rangeContains,
+  rangeCoords,
+  stepCoord,
+  tsvToMatrix,
+} from "./cell-selection.ts";
+
+describe("rangeBounds", () => {
+  test("normalizes reversed ranges", () => {
+    expect(rangeBounds({ anchor: { row: 3, col: 2 }, head: { row: 1, col: 0 } })).toEqual({
+      minRow: 1,
+      maxRow: 3,
+      minCol: 0,
+      maxCol: 2,
+    });
+  });
+});
+
+describe("rangeContains", () => {
+  const range = { anchor: { row: 1, col: 1 }, head: { row: 2, col: 3 } };
+
+  test("includes edges and interior", () => {
+    expect(rangeContains(range, 1, 1)).toBe(true);
+    expect(rangeContains(range, 2, 3)).toBe(true);
+    expect(rangeContains(range, 2, 2)).toBe(true);
+  });
+
+  test("excludes outside cells", () => {
+    expect(rangeContains(range, 0, 2)).toBe(false);
+    expect(rangeContains(range, 2, 4)).toBe(false);
+  });
+});
+
+describe("rangeArea / rangeCoords", () => {
+  test("area counts inclusive rectangle", () => {
+    expect(rangeArea({ anchor: { row: 0, col: 0 }, head: { row: 1, col: 2 } })).toBe(6);
+  });
+
+  test("coords iterate row-major", () => {
+    expect(rangeCoords({ anchor: { row: 0, col: 1 }, head: { row: 1, col: 2 } })).toEqual([
+      { row: 0, col: 1 },
+      { row: 0, col: 2 },
+      { row: 1, col: 1 },
+      { row: 1, col: 2 },
+    ]);
+  });
+});
+
+describe("coordKey / parseCoordKey", () => {
+  test("roundtrips", () => {
+    expect(parseCoordKey(coordKey(4, 7))).toEqual({ row: 4, col: 7 });
+  });
+
+  test("rejects malformed keys", () => {
+    expect(parseCoordKey("nope")).toBeNull();
+    expect(parseCoordKey("1:x")).toBeNull();
+  });
+});
+
+describe("clampCoord", () => {
+  test("clamps into bounds", () => {
+    expect(clampCoord({ row: -1, col: 9 }, 5, 3)).toEqual({ row: 0, col: 3 });
+    expect(clampCoord({ row: 8, col: 1 }, 5, 3)).toEqual({ row: 5, col: 1 });
+  });
+});
+
+describe("stepCoord", () => {
+  test("steps forward across row boundaries", () => {
+    expect(stepCoord({ row: 0, col: 2 }, 1, 2, 2)).toEqual({ row: 1, col: 0 });
+  });
+
+  test("steps backward across row boundaries", () => {
+    expect(stepCoord({ row: 1, col: 0 }, -1, 2, 2)).toEqual({ row: 0, col: 2 });
+  });
+
+  test("clamps at both ends", () => {
+    expect(stepCoord({ row: 0, col: 0 }, -1, 2, 2)).toEqual({ row: 0, col: 0 });
+    expect(stepCoord({ row: 2, col: 2 }, 1, 2, 2)).toEqual({ row: 2, col: 2 });
+  });
+});
+
+describe("tsvToMatrix", () => {
+  test("parses basic TSV", () => {
+    expect(tsvToMatrix("a\tb\nc\td")).toEqual([
+      ["a", "b"],
+      ["c", "d"],
+    ]);
+  });
+
+  test("handles CRLF and trailing newline", () => {
+    expect(tsvToMatrix("a\tb\r\nc\td\r\n")).toEqual([
+      ["a", "b"],
+      ["c", "d"],
+    ]);
+  });
+
+  test("keeps interior empty cells and rows", () => {
+    expect(tsvToMatrix("a\t\tb\n\n")).toEqual([["a", "", "b"], [""]]);
+  });
+
+  test("empty text yields no rows", () => {
+    expect(tsvToMatrix("")).toEqual([]);
+  });
+});
+
+describe("matrixToTsv", () => {
+  test("roundtrips rectangular data", () => {
+    const matrix = [
+      ["a", "b"],
+      ["c", "d"],
+    ];
+    expect(tsvToMatrix(matrixToTsv(matrix))).toEqual(matrix);
+  });
+
+  test("collapses tabs and newlines inside cells", () => {
+    expect(matrixToTsv([["a\tb", "c\nd"]])).toBe("a b\tc d");
+  });
+});