okengine 0.14.1 → 0.16.0

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

@@ -1,12 +1,19 @@
 /**
- * Store row detail Sheet — Fields / JSON tabs + fixed destructive footer.
+ * Store row detail Sheet — Fields / JSON tabs, in-sheet edit, delete.
  */
 
 import { useEffect, useMemo, useState, type JSX } from "react";
-import { Delete02Icon, PencilEdit01Icon } from "@hugeicons/core-free-icons";
+import {
+  Cancel01Icon,
+  Delete02Icon,
+  PencilEdit01Icon,
+  Tick02Icon,
+} from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { HighlightedJson } from "@/components/highlighted-json";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { SHEET_CONTROL, SheetError } from "@/components/ui/sheet-form.tsx";
 import {
   Sheet,
   SheetContent,
@@ -15,9 +22,15 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
+import { useStoreEdit } from "../data/use-store-edit.ts";
 import { RevealCell } from "./reveal-cell.tsx";
-import { formatGridCell, type StoreGridModel, type StoreGridRow } from "../lib/grid-model.ts";
-import { isStorePiiMask } from "../lib/patch.ts";
+import {
+  formatGridCell,
+  type StoreGridColumn,
+  type StoreGridModel,
+  type StoreGridRow,
+} from "../lib/grid-model.ts";
+import { isStorePiiMask, parseStoreCellDraft, sanitizeStorePatch } from "../lib/patch.ts";
 import { isRtlText } from "../lib/rtl.ts";
 
 /** Props for {@link StoreRowDetailSheet}. */
@@ -31,12 +44,13 @@ export interface StoreRowDetailSheetProps {
   readonly childName: string;
   readonly tenant?: string | null;
   readonly masked?: boolean;
-  readonly onEditRow?: (row: StoreGridRow) => void;
+  readonly asGate?: string | null;
+  readonly asUserId?: string | null;
   readonly onDeleteRow?: (row: StoreGridRow) => void;
 }
 
 /**
- * Right-side detail for one grid row — Fields (Reveal/edit) and full JSON.
+ * Right-side detail for one grid row — Fields (Reveal / edit) and full JSON.
  *
  * @param props - Selected row + facet + mutation callbacks
  */
@@ -50,13 +64,28 @@ export function StoreRowDetailSheet({
   childName,
   tenant,
   masked = false,
-  onEditRow,
+  asGate = null,
+  asUserId = null,
   onDeleteRow,
 }: StoreRowDetailSheetProps): JSX.Element {
+  const edit = useStoreEdit();
   const [tab, setTab] = useState<"fields" | "json">("fields");
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  const editableColumns = useMemo(
+    () => model.columns.filter((col) => col.editable),
+    [model.columns],
+  );
+  const canEdit =
+    model.editable && (facet === "sql" || facet === "kv") && editableColumns.length > 0;
 
   useEffect(() => {
-    if (open) setTab("fields");
+    if (!open) return;
+    setTab("fields");
+    setEditing(false);
+    setError(null);
   }, [open, row]);
 
   const json = useMemo(() => {
@@ -70,7 +99,45 @@ export function StoreRowDetailSheet({
 
   if (!row) return <></>;
 
-  const canEdit = model.editable && (facet === "sql" || facet === "kv") && onEditRow !== undefined;
+  const startEdit = (): void => {
+    const next: Record<string, string> = {};
+    for (const col of editableColumns) {
+      next[col.key] = draftFromCell(col.type, row.cells[col.key]);
+    }
+    setDraft(next);
+    setError(null);
+    setEditing(true);
+    setTab("fields");
+  };
+
+  const save = async (): Promise<void> => {
+    setError(null);
+    const patch: Record<string, unknown> = {};
+    for (const col of editableColumns) {
+      const text = draft[col.key] ?? "";
+      if (col.pii && text.trim() === "") continue;
+      if (text === draftFromCell(col.type, row.cells[col.key])) continue;
+      patch[col.key] = parseStoreCellDraft(col.type, text);
+    }
+    if (Object.keys(patch).length === 0) {
+      setEditing(false);
+      return;
+    }
+    try {
+      await edit.mutateAsync({
+        ref: storeRef,
+        ...(facet === "sql" ? { child: childName, id: row.id } : { key: row.id }),
+        ...(tenant ? { tenant } : {}),
+        ...(asGate ? { asGate } : {}),
+        ...(asUserId ? { asUserId } : {}),
+        patch: sanitizeStorePatch(patch),
+        commit: true,
+      });
+      setEditing(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -79,11 +146,12 @@ export function StoreRowDetailSheet({
         showOverlay={false}
         className="gap-0 p-0 sm:max-w-md"
         data-slot="store-row-detail-sheet"
+        data-editing={editing ? "true" : "false"}
       >
         <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>
+              {editing ? "Edit" : "Row"} <span className="font-mono">{row.id}</span>
             </SheetTitle>
             <SheetDescription className="font-mono text-[11px]">
               {storeRef}
@@ -106,6 +174,7 @@ export function StoreRowDetailSheet({
               {model.columns.map((col) => {
                 const value = row.cells[col.key];
                 const maskedPii = col.pii && masked && isStorePiiMask(value);
+                const fieldEditable = editing && col.editable;
                 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">
@@ -130,7 +199,30 @@ export function StoreRowDetailSheet({
                         </span>
                       ) : null}
                     </span>
-                    {maskedPii ? (
+                    {fieldEditable ? (
+                      col.type === "json" ? (
+                        <textarea
+                          value={draft[col.key] ?? ""}
+                          onChange={(event) =>
+                            setDraft((prev) => ({ ...prev, [col.key]: event.target.value }))
+                          }
+                          aria-label={col.key}
+                          rows={3}
+                          className="min-h-16 min-w-0 flex-1 rounded-none border-0 bg-transparent font-mono text-[11px] outline-none"
+                        />
+                      ) : (
+                        <Input
+                          value={draft[col.key] ?? ""}
+                          onChange={(event) =>
+                            setDraft((prev) => ({ ...prev, [col.key]: event.target.value }))
+                          }
+                          type={col.type === "integer" || col.type === "number" ? "number" : "text"}
+                          aria-label={col.key}
+                          flat
+                          className={cn(SHEET_CONTROL, "min-w-0 flex-1 px-0 font-mono")}
+                        />
+                      )
+                    ) : maskedPii ? (
                       <RevealCell
                         refName={storeRef}
                         child={childName}
@@ -162,13 +254,42 @@ export function StoreRowDetailSheet({
           )}
         </div>
 
+        {error ? <SheetError slot="row-detail-error">{error}</SheetError> : null}
+
         <div className="mt-auto flex items-center justify-between gap-2 border-t border-border/50 px-4 py-2.5">
-          {canEdit ? (
+          {editing ? (
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setEditing(false);
+                  setError(null);
+                }}
+                disabled={edit.isPending}
+                data-slot="row-detail-cancel"
+              >
+                <HugeiconsIcon icon={Cancel01Icon} className="size-3.5" aria-hidden />
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                onClick={() => void save()}
+                disabled={edit.isPending}
+                data-slot="row-detail-save"
+              >
+                <HugeiconsIcon icon={Tick02Icon} className="size-3.5" aria-hidden />
+                {edit.isPending ? "Saving…" : "Save"}
+              </Button>
+            </div>
+          ) : canEdit ? (
             <Button
               type="button"
               variant="outline"
               size="sm"
-              onClick={() => onEditRow(row)}
+              onClick={startEdit}
               data-slot="row-detail-edit"
             >
               <HugeiconsIcon icon={PencilEdit01Icon} className="size-3.5" aria-hidden />
@@ -177,7 +298,7 @@ export function StoreRowDetailSheet({
           ) : (
             <span />
           )}
-          {onDeleteRow ? (
+          {!editing && onDeleteRow ? (
             <Button
               type="button"
               variant="destructive"
@@ -195,6 +316,26 @@ export function StoreRowDetailSheet({
   );
 }
 
+/** Seed / compare an edit draft without turning `null` into the display em dash. */
+function draftFromCell(type: StoreGridColumn["type"], raw: unknown): string {
+  if (raw === null || raw === undefined) return "";
+  if (isStorePiiMask(raw)) return "";
+  if (type === "json") {
+    try {
+      return JSON.stringify(raw, null, 2);
+    } catch {
+      return "";
+    }
+  }
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
+  try {
+    return JSON.stringify(raw);
+  } catch {
+    return "";
+  }
+}
+
 function TabButton({
   active,
   onClick,

package/src/console/ui-next/src/features/store/explorer/store-tree.tsx

@@ -17,8 +17,6 @@ import {
   ShieldOff,
   SourceCodeIcon,
   TableIcon,
-  ViewIcon,
-  ViewOffSlashIcon,
   ZapIcon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -33,7 +31,6 @@ import {
   EXPLORER_GROUP_ROW_CLASS,
   EXPLORER_ICON_BUTTON_CLASS,
   EXPLORER_ICON_CLASS,
-  EXPLORER_STRIP_TOKEN_ACTIVE_CLASS,
   EXPLORER_LIST_EMPTY_CLASS,
   EXPLORER_RAIL_ACTIVE_CLASS,
   EXPLORER_RAIL_CLASS,
@@ -45,16 +42,6 @@ import {
 import { ExplorerSearch } from "@/components/explorer/explorer-search.tsx";
 import { TreeExpandToggle } from "@/components/explorer/tree-expand-toggle.tsx";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { ElementHugeIcon } from "@/lib/element-icons.ts";
 import { cn } from "@/lib/utils";
@@ -65,6 +52,7 @@ import {
   loadHiddenFacets,
   saveHiddenFacets,
   STORE_FACET_SPECS,
+  STORE_FACETS,
   isSingletonStoreLeaf,
   storeTreeAncestorKeys,
   storeTreeFacetKey,
@@ -127,7 +115,6 @@ export function StoreTree({
   const [query, setQuery] = useState("");
   const [openByKey, setOpenByKey] = useState<Readonly<Record<string, boolean>>>({});
   const [hiddenFacets, setHiddenFacets] = useState<ReadonlySet<StoreFacet>>(loadHiddenFacets);
-  const allBands = useMemo(() => bandStoreTree(stores), [stores]);
   const bands = useMemo(() => bandStoreTree(filterStoreTree(stores, query)), [stores, query]);
   const visibleBands = useMemo(() => visibleFacetBands(bands, hiddenFacets), [bands, hiddenFacets]);
   const keys = useMemo(() => storeTreeOpenKeys(visibleBands), [visibleBands]);
@@ -172,15 +159,6 @@ export function StoreTree({
     });
   };
 
-  const showAllFacets = (): void => {
-    setHiddenFacets((prev) => {
-      if (prev.size === 0) return prev;
-      const next = new Set<StoreFacet>();
-      saveHiddenFacets(next);
-      return next;
-    });
-  };
-
   const toggleAll = (): void => {
     const next = !allOpen;
     setOpenByKey((prev) => {
@@ -201,12 +179,7 @@ export function StoreTree({
             aria-label="Search stores"
             data-slot="store-search"
           />
-          <FacetVisibilityMenu
-            bands={allBands}
-            hiddenFacets={hiddenFacets}
-            onHiddenChange={setFacetHidden}
-            onShowAll={showAllFacets}
-          />
+          <FacetIconToggles hiddenFacets={hiddenFacets} onHiddenChange={setFacetHidden} />
           <TreeExpandToggle
             allOpen={allOpen}
             disabled={keys.length === 0}
@@ -229,7 +202,6 @@ export function StoreTree({
                 <FacetBand
                   key={band.facet}
                   band={band}
-                  onHide={() => setFacetHidden(band.facet, true)}
                   open={storeTreeIsOpen(facetKey, openByKey)}
                   onOpenChange={(open) => setKeyOpen(facetKey, open)}
                   storeOpen={(ref) =>
@@ -267,79 +239,53 @@ export function StoreTree({
 }
 
 /**
- * Search-bar control to show or hide Store facet bands.
+ * Toolbar tokens for the four Store facets — press to show or hide the band.
  *
- * @param props - Present bands + hidden set + toggles
+ * @param props - Hidden set + toggle
  */
-function FacetVisibilityMenu({
-  bands,
+function FacetIconToggles({
   hiddenFacets,
   onHiddenChange,
-  onShowAll,
 }: {
-  readonly bands: readonly StoreFacetBand[];
   readonly hiddenFacets: ReadonlySet<StoreFacet>;
   readonly onHiddenChange: (facet: StoreFacet, hidden: boolean) => void;
-  readonly onShowAll: () => void;
 }): JSX.Element {
-  const hiddenCount = bands.filter((band) => hiddenFacets.has(band.facet)).length;
-  const anyHidden = hiddenCount > 0;
-
   return (
-    <DropdownMenu>
-      <ToolbarTip label="Show and hide facets" className="flex self-stretch">
-        <DropdownMenuTrigger
-          render={(props) => (
+    <div
+      className="flex h-full shrink-0 items-stretch"
+      role="group"
+      aria-label="Store facets"
+      data-slot="store-tree-facet-toggles"
+    >
+      {STORE_FACETS.map((facet) => {
+        const spec = STORE_FACET_SPECS[facet];
+        const visible = !hiddenFacets.has(facet);
+        return (
+          <ToolbarTip
+            key={facet}
+            label={visible ? `Hide ${spec.label}` : `Show ${spec.label}`}
+            className="flex self-stretch"
+          >
             <button
-              {...props}
               type="button"
-              aria-label="Show and hide facets"
-              data-slot="store-tree-visibility"
-              disabled={bands.length === 0}
+              aria-label={visible ? `Hide ${spec.label}` : `Show ${spec.label}`}
+              aria-pressed={visible}
+              data-slot="store-tree-facet-toggle"
+              data-facet={facet}
+              onClick={() => onHiddenChange(facet, visible)}
               className={cn(
                 EXPLORER_ICON_BUTTON_CLASS,
-                anyHidden && EXPLORER_STRIP_TOKEN_ACTIVE_CLASS,
+                visible
+                  ? explorerIconInk(spec.wellClass)
+                  : "text-muted-foreground/40 hover:text-muted-foreground",
               )}
             >
-              <HugeiconsIcon
-                icon={anyHidden ? ViewOffSlashIcon : ViewIcon}
-                className="size-3.5"
-                aria-hidden
-              />
+              <HugeiconsIcon icon={spec.icon} className={EXPLORER_ICON_CLASS} aria-hidden />
             </button>
-          )}
-        />
-      </ToolbarTip>
-      <DropdownMenuContent align="end" className="w-44">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Facets</DropdownMenuLabel>
-          {bands.map((band) => {
-            const spec = STORE_FACET_SPECS[band.facet];
-            const visible = !hiddenFacets.has(band.facet);
-            return (
-              <DropdownMenuCheckboxItem
-                key={band.facet}
-                checked={visible}
-                data-slot="store-tree-visibility-facet"
-                data-facet={band.facet}
-                onCheckedChange={(checked) => onHiddenChange(band.facet, checked === false)}
-              >
-                <HugeiconsIcon icon={spec.icon} className="size-3.5" aria-hidden />
-                {spec.label}
-              </DropdownMenuCheckboxItem>
-            );
-          })}
-        </DropdownMenuGroup>
-        {anyHidden ? (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem data-slot="store-tree-visibility-show-all" onClick={onShowAll}>
-              Show all
-            </DropdownMenuItem>
-          </>
-        ) : null}
-      </DropdownMenuContent>
-    </DropdownMenu>
+          </ToolbarTip>
+        );
+      })}
+    </div>
   );
 }
 
@@ -350,7 +296,6 @@ function FacetVisibilityMenu({
  */
 function FacetBand({
   band,
-  onHide,
   open,
   onOpenChange,
   storeOpen,
@@ -365,7 +310,6 @@ function FacetBand({
   onOpenPerformance,
 }: {
   readonly band: StoreFacetBand;
-  readonly onHide: () => void;
   readonly open: boolean;
   readonly onOpenChange: (open: boolean) => void;
   readonly storeOpen: (ref: string) => boolean;
@@ -444,7 +388,6 @@ function FacetBand({
                     onOpen={onOpenQuery}
                   />
                 ) : null}
-                <FacetVisibilityButton label={band.label} onHide={onHide} />
                 <TreeExpandToggle
                   allOpen={storesOpen}
                   disabled={storeRefs.length === 0}
@@ -821,49 +764,6 @@ function PerformanceBandButton({
   );
 }
 
-/**
- * Hide a facet band from the explorer. Restore it from the search-bar menu.
- *
- * @param props - Band label + hide
- */
-function FacetVisibilityButton({
-  label,
-  onHide,
-}: {
-  readonly label: string;
-  readonly onHide: () => void;
-}): JSX.Element {
-  const action = `Hide ${label}`;
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={(props) => (
-          <button
-            {...props}
-            type="button"
-            aria-label={action}
-            data-slot="store-facet-visibility"
-            onClick={(event) => {
-              event.stopPropagation();
-              props.onClick?.(event);
-              onHide();
-            }}
-            className={cn(
-              "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
-              "hover:bg-muted/80 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none",
-            )}
-          >
-            <HugeiconsIcon icon={ViewOffSlashIcon} className="size-3.5" aria-hidden />
-          </button>
-        )}
-      />
-      <TooltipContent side="bottom" className="text-[11px]">
-        {action}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 /**
  * Chevron well on a facet or store row — reads as the expand control.
  *

package/src/console/ui-next/src/features/store/files/file-preview.tsx

@@ -25,6 +25,7 @@ import {
   fileNameFromKey,
   filePreviewMode,
   formatFilePreviewText,
+  previewBlobType,
   type FileKind,
   type FilePreviewMode,
 } from "../lib/files-meta.ts";
@@ -82,7 +83,9 @@ export function FilePreview({
   const objectUrl = useMemo(() => {
     if (!object.data || !bytes || object.data.truncated) return null;
     if (mode !== "image" && mode !== "pdf" && mode !== "video" && mode !== "audio") return null;
-    const blob = new Blob([bytesToArrayBuffer(bytes)], { type: object.data.contentType });
+    const blob = new Blob([bytesToArrayBuffer(bytes)], {
+      type: previewBlobType(mode, object.data.contentType),
+    });
     return URL.createObjectURL(blob);
   }, [object.data, bytes, mode]);