@stigmer/react 3.2.3 → 3.3.0

package/src/datastore/DeleteDatastoreDialog.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { Datastore } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
+import { toast } from "../feedback/toast.js";
+import { FIELD_INPUT_CLASSES } from "./FieldValueControl.js";
+import { useDeleteDatastore } from "./useDeleteDatastore.js";
+
+/** Props for {@link DeleteDatastoreDialog}. */
+export interface DeleteDatastoreDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog requests to close. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** The loaded datastore (metadata + status feed the counts). */
+  readonly datastore: Datastore | null;
+  /** Called after a successful delete (navigate away). */
+  readonly onDeleted?: () => void;
+}
+
+/**
+ * The guarded delete flow for the platform's only record-destroying
+ * resource action (DD-008 SD-6) — a status-informed acknowledgment
+ * replacing the generic one-shot confirm:
+ *
+ * - Counts are pre-filled from the already-loaded `status` ("holds N
+ *   records across M collections").
+ * - A **non-empty** datastore requires **typing the datastore slug** to
+ *   arm the delete — the strongest-friction confirm. Arming sends the
+ *   `force` acknowledgment.
+ * - An **empty** datastore keeps the standard destructive confirm.
+ * - The server's guards stay authoritative: on refusal (agent
+ *   references, count drift) the `FAILED_PRECONDITION` message renders
+ *   **verbatim** inside the dialog with fresh server counts — the
+ *   console renders the guard, never pre-empts it. The agent-reference
+ *   block names the referencing agents; detaching them is the operator's
+ *   next step, and the block is deliberately not acknowledgeable-through.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ * Zero Console dependencies — safe for platform builder embedding.
+ */
+export function DeleteDatastoreDialog({
+  open,
+  onOpenChange,
+  datastore,
+  onDeleted,
+}: DeleteDatastoreDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const { deleteDatastore, isDeleting, error, clearError } = useDeleteDatastore();
+  const [slugInput, setSlugInput] = useState("");
+
+  const slug = datastore?.metadata?.slug ?? "";
+  const resourceId = datastore?.metadata?.id ?? "";
+
+  // BigInt literals (0n) are avoided: consumer apps compile SDK sources
+  // with targets below ES2020.
+  const { totalRecords, nonEmptyCollections } = useMemo(() => {
+    let records = BigInt(0);
+    let collections = 0;
+    for (const coll of datastore?.status?.collections ?? []) {
+      if (coll.recordCount > BigInt(0)) {
+        records += coll.recordCount;
+        collections += 1;
+      }
+    }
+    return { totalRecords: records, nonEmptyCollections: collections };
+  }, [datastore]);
+
+  const isEmpty = totalRecords === BigInt(0);
+  const armed = isEmpty || slugInput === slug;
+
+  useEffect(() => {
+    if (open) {
+      setSlugInput("");
+      clearError();
+    }
+  }, [open, clearError]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  const handleDialogCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  const handleDelete = useCallback(async () => {
+    if (!resourceId || !armed) return;
+    try {
+      // A non-empty delete carries force — the acknowledgment the
+      // slug-typing arms. Empty datastores need no acknowledgment.
+      await deleteDatastore({ resourceId, force: !isEmpty });
+      toast.success(`Datastore "${slug}" deleted`);
+      onOpenChange(false);
+      onDeleted?.();
+    } catch {
+      // The guard's message renders inline via `error` — with fresh
+      // counts on drift; the server stays authoritative.
+    }
+  }, [resourceId, armed, isEmpty, deleteDatastore, slug, onOpenChange, onDeleted]);
+
+  if (!open || !datastore) return null;
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={handleDialogCancel}
+      aria-label={`Delete datastore ${slug}`}
+      className={cn(
+        "fixed inset-0 z-50 m-auto w-full max-w-md rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
+        "backdrop:bg-black/50",
+        "open:animate-in open:fade-in-0 open:zoom-in-95",
+      )}
+    >
+      <div className="flex flex-col gap-4 p-6">
+        <div className="flex flex-col gap-1.5">
+          <h3 className="text-base font-semibold text-foreground">
+            Delete datastore “{slug}”?
+          </h3>
+          {isEmpty ? (
+            <p className="text-sm text-muted-foreground">
+              This datastore holds no records. Its declared collections will be
+              removed. This cannot be undone.
+            </p>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              “{slug}” holds{" "}
+              <strong className="font-semibold text-foreground">
+                {String(totalRecords)} record{totalRecords === BigInt(1) ? "" : "s"}
+              </strong>{" "}
+              across{" "}
+              <strong className="font-semibold text-foreground">
+                {nonEmptyCollections} collection{nonEmptyCollections === 1 ? "" : "s"}
+              </strong>
+              . Deleting the datastore destroys them all. This cannot be undone.
+            </p>
+          )}
+        </div>
+
+        {error && (
+          <div
+            role="alert"
+            className="rounded-md border border-destructive bg-card px-3 py-2 text-sm text-destructive"
+          >
+            {getUserMessage(error)}
+          </div>
+        )}
+
+        {!isEmpty && (
+          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+            Type <span className="font-mono text-foreground">{slug}</span> to confirm
+            <input
+              type="text"
+              className={FIELD_INPUT_CLASSES}
+              value={slugInput}
+              onChange={(e) => setSlugInput(e.target.value)}
+              autoComplete="off"
+              spellCheck={false}
+              aria-label={`Type ${slug} to confirm deletion`}
+            />
+          </label>
+        )}
+
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className={cn(
+              "rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleDelete}
+            disabled={!armed || isDeleting}
+            className={cn(
+              "rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground",
+              "hover:bg-destructive-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            {isDeleting ? "Deleting…" : "Delete datastore"}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}

package/src/datastore/FieldValueControl.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { JsonValue } from "@bufbuild/protobuf";
+import {
+  FieldType,
+  type FieldDeclaration,
+} from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/spec_pb";
+
+/**
+ * Standard input styling for datastore value controls — the
+ * token-compliant idiom (semantic Tailwind classes over `--stgm-*`
+ * tokens; no pixel font sizes, no hex fallbacks).
+ */
+export const FIELD_INPUT_CLASSES = cn(
+  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  "disabled:pointer-events-none disabled:opacity-50",
+);
+
+/** Props for {@link FieldValueControl}. */
+export interface FieldValueControlProps {
+  /** The field declaration driving the control type. */
+  readonly field: FieldDeclaration;
+  /**
+   * Current value in its canonical encoding (DD-004), or `undefined`
+   * when empty/unset. The control never receives explicit `null` — the
+   * clear affordance is the owner's (a form row renders it; the control
+   * only edits values).
+   */
+  readonly value: JsonValue | undefined;
+  /**
+   * Called with the canonical value on every valid edit, or `undefined`
+   * when the input empties. Invalid intermediate states (half-typed
+   * JSON, unparseable numbers) stay local to the control and are never
+   * emitted — the precedent set by the workflow config form.
+   */
+  readonly onChange: (value: JsonValue | undefined) => void;
+  /** Disables the input. */
+  readonly disabled?: boolean;
+  /** DOM id for external `<label htmlFor>` wiring. */
+  readonly id?: string;
+  /** Accessible name when no external label is wired. */
+  readonly "aria-label"?: string;
+}
+
+/**
+ * The typed value control for a declared datastore field — one
+ * controlled input per `FieldType`, emitting canonical encodings
+ * (DD-004). Shared by `RecordFormPanel` (field editing) and
+ * `RecordFilterBuilder` (condition values), so a field always offers
+ * the same input affordance everywhere.
+ *
+ * Type dispatch:
+ * - `string`             — text input; enum-select when `enum_values` declared
+ * - `integer` / `number` — numeric input (step 1 / any)
+ * - `bool`               — select with true/false (a checkbox conflates
+ *                          "false" with "unset", which the tri-state
+ *                          write model must not do)
+ * - `date`               — native date picker (emits `YYYY-MM-DD`)
+ * - `time`               — native time picker (emits zero-padded `HH:MM[:SS]`)
+ * - `timestamp`          — native datetime-local picker in the operator's
+ *                          zone, converted to RFC 3339 UTC
+ * - `json`               — mono textarea with local parse state; only
+ *                          valid JSON is emitted
+ */
+export function FieldValueControl(props: FieldValueControlProps) {
+  const { field } = props;
+  switch (field.type) {
+    case FieldType.string:
+      return field.enumValues.length > 0 ? <EnumControl {...props} /> : <StringControl {...props} />;
+    case FieldType.integer:
+    case FieldType.number:
+      return <NumberControl {...props} />;
+    case FieldType.bool:
+      return <BoolControl {...props} />;
+    case FieldType.date:
+      return <DateControl {...props} />;
+    case FieldType.time:
+      return <TimeControl {...props} />;
+    case FieldType.timestamp:
+      return <TimestampControl {...props} />;
+    case FieldType.json:
+    default:
+      return <JsonControl {...props} />;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Per-type controls
+// ---------------------------------------------------------------------------
+
+function StringControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <input
+      id={id}
+      type="text"
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+function EnumControl({ field, value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <select
+      id={id}
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    >
+      <option value="">— Select —</option>
+      {field.enumValues.map((v) => (
+        <option key={v} value={v}>
+          {v}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function NumberControl({ field, value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  const isInteger = field.type === FieldType.integer;
+  return (
+    <input
+      id={id}
+      type="number"
+      step={isInteger ? 1 : "any"}
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "number" ? value : ""}
+      onChange={(e) => {
+        const raw = e.target.value;
+        if (raw === "") {
+          onChange(undefined);
+          return;
+        }
+        const parsed = isInteger ? Number.parseInt(raw, 10) : Number.parseFloat(raw);
+        if (!Number.isNaN(parsed)) onChange(parsed);
+      }}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+function BoolControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <select
+      id={id}
+      className={FIELD_INPUT_CLASSES}
+      value={value === true ? "true" : value === false ? "false" : ""}
+      onChange={(e) => {
+        const v = e.target.value;
+        onChange(v === "" ? undefined : v === "true");
+      }}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    >
+      <option value="">— Select —</option>
+      <option value="true">true</option>
+      <option value="false">false</option>
+    </select>
+  );
+}
+
+function DateControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <input
+      id={id}
+      type="date"
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+function TimeControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <input
+      id={id}
+      type="time"
+      step={1}
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+function TimestampControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  return (
+    <input
+      id={id}
+      type="datetime-local"
+      step={1}
+      className={FIELD_INPUT_CLASSES}
+      value={typeof value === "string" ? utcToLocalInput(value) : ""}
+      onChange={(e) => {
+        const raw = e.target.value;
+        onChange(raw === "" ? undefined : localInputToUtc(raw));
+      }}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    />
+  );
+}
+
+/**
+ * Canonical RFC 3339 UTC → the datetime-local widget's value (the
+ * operator's local zone, no zone suffix). Unparseable input renders
+ * empty rather than throwing — the value may be mid-edit.
+ */
+function utcToLocalInput(canonical: string): string {
+  const ms = Date.parse(canonical);
+  if (Number.isNaN(ms)) return "";
+  const d = new Date(ms);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return (
+    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+    `T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  );
+}
+
+/** The widget's local value → canonical RFC 3339 UTC. */
+function localInputToUtc(local: string): string {
+  const ms = Date.parse(local); // no zone suffix — parsed as local time
+  if (Number.isNaN(ms)) return local; // let coercion report it on submit
+  return new Date(ms).toISOString().replace(/\.000Z$/, "Z");
+}
+
+function JsonControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
+  const initial = value !== undefined ? JSON.stringify(value, null, 2) : "";
+  const [raw, setRaw] = useState(initial);
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const text = e.target.value;
+      setRaw(text);
+      if (text.trim() === "") {
+        setParseError(null);
+        onChange(undefined);
+        return;
+      }
+      try {
+        const parsed = JSON.parse(text) as JsonValue;
+        setParseError(null);
+        onChange(parsed);
+      } catch {
+        // Invalid JSON stays local — never emitted.
+        setParseError("Invalid JSON");
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-1">
+      <textarea
+        id={id}
+        rows={4}
+        className={cn(FIELD_INPUT_CLASSES, "resize-y font-mono")}
+        value={raw}
+        onChange={handleChange}
+        placeholder="{}"
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-invalid={parseError !== null}
+      />
+      {parseError && (
+        <span role="alert" className="text-xs text-destructive">
+          {parseError}
+        </span>
+      )}
+    </div>
+  );
+}