@agent-native/core 0.112.0 → 0.114.0

package/src/client/db-admin/DbAdminPage.tsx

@@ -0,0 +1,218 @@
+import { IconDatabase, IconLoader2 } from "@tabler/icons-react";
+/**
+ * Database admin page — the shell that hosts the table browser, the table
+ * editor, and the SQL editor.
+ *
+ * By default this is gated to Code mode for the core dev route. Trusted hosts
+ * can opt out and point it at their own admin-gated API path.
+ */
+import { useEffect, useMemo, useState } from "react";
+
+import type { DbAdminFilter } from "../../db-admin/types.js";
+import { useCodeMode } from "../use-dev-mode.js";
+import { cn } from "../utils.js";
+import { SqlEditor } from "./SqlEditor.js";
+import { TableBrowser } from "./TableBrowser.js";
+import { TableEditor } from "./TableEditor.js";
+import { useDbAdminAgentSync, useNavigateConsumer } from "./useAgentSync.js";
+import { useOverview, type DbAdminRequestConfig } from "./useDbAdmin.js";
+
+const DIALECT_LABEL: Record<string, string> = {
+  postgres: "Postgres",
+  sqlite: "SQLite",
+  d1: "Cloudflare D1",
+};
+
+export interface DbAdminPageProps {
+  apiBasePath?: string;
+  cacheScope?: string;
+  title?: string;
+  subtitle?: string;
+  codeModeGate?: boolean;
+  syncNavigation?: boolean;
+}
+
+export function DbAdminPage({
+  apiBasePath,
+  cacheScope,
+  title = "Database",
+  subtitle,
+  codeModeGate = true,
+  syncNavigation = true,
+}: DbAdminPageProps = {}) {
+  const { canToggle, isLoading: devLoading } = useCodeMode();
+  const requestConfig = useMemo<DbAdminRequestConfig | undefined>(() => {
+    if (!apiBasePath && !cacheScope) return undefined;
+    return { basePath: apiBasePath, scopeKey: cacheScope };
+  }, [apiBasePath, cacheScope]);
+  const { data: overview, isLoading: overviewLoading } =
+    useOverview(requestConfig);
+
+  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+  const [mode, setMode] = useState<"table" | "sql">("table");
+  const [fkFilters, setFkFilters] = useState<DbAdminFilter[] | undefined>(
+    undefined,
+  );
+
+  const tables = overview?.tables ?? [];
+  const dialect = overview?.dialect ?? "sqlite";
+
+  // Default selection to the first table once the overview loads.
+  useEffect(() => {
+    if (selectedTable === null && tables.length > 0) {
+      setSelectedTable(tables[0].name);
+    }
+  }, [selectedTable, tables]);
+
+  // Keep the agent's <current-screen> in sync, and let it drive navigation.
+  useDbAdminAgentSync({ table: selectedTable, mode, enabled: syncNavigation });
+  useNavigateConsumer((table) => {
+    setSelectedTable(table);
+    setMode("table");
+    setFkFilters(undefined);
+  }, syncNavigation);
+
+  const tableNames = useMemo(() => tables.map((t) => t.name), [tables]);
+  // SqlEditor degrades gracefully without per-table columns; pass an empty map.
+  // (Table-name autocomplete still works; column autocomplete fills in lazily.)
+  const columnsByTable = useMemo<Record<string, string[]>>(() => ({}), []);
+
+  // ─── Code mode gate ──────────────────────────────────────────────────────
+  if (codeModeGate && !devLoading && !canToggle) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-background p-6">
+        <div className="flex max-w-md flex-col items-center rounded-lg border bg-card p-8 text-center shadow-sm">
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <IconDatabase
+              className="h-6 w-6 text-muted-foreground"
+              stroke={1.75}
+            />
+          </div>
+          <h2 className="text-base font-semibold text-foreground">
+            Code mode only
+          </h2>
+          <p className="mt-1.5 text-sm text-muted-foreground">
+            Database admin is available in Code mode only.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const showInitialLoading =
+    ((codeModeGate && devLoading) || overviewLoading) && !overview;
+
+  return (
+    <div className="flex h-full w-full flex-col bg-background text-foreground">
+      {/* Header */}
+      <header className="flex h-12 shrink-0 items-center gap-3 border-b px-4">
+        <IconDatabase className="h-5 w-5 text-muted-foreground" stroke={1.75} />
+        <span className="text-sm font-semibold">{title}</span>
+        <span className="inline-flex items-center rounded-full border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          {DIALECT_LABEL[dialect] ?? dialect}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {tables.length} {tables.length === 1 ? "table" : "tables"}
+        </span>
+        {subtitle ? (
+          <span className="min-w-0 truncate text-xs text-muted-foreground">
+            {subtitle}
+          </span>
+        ) : null}
+      </header>
+
+      {/* Body: fixed sidebar + flexible main */}
+      <div className="flex min-h-0 flex-1">
+        <aside className="w-[260px] shrink-0 border-r">
+          {showInitialLoading ? (
+            <SidebarSkeleton />
+          ) : (
+            <TableBrowser
+              tables={tables}
+              selected={selectedTable}
+              onSelect={(t) => {
+                setSelectedTable(t);
+                setFkFilters(undefined);
+              }}
+              mode={mode}
+              onModeChange={setMode}
+            />
+          )}
+        </aside>
+
+        <main className="min-w-0 flex-1 overflow-hidden">
+          {showInitialLoading ? (
+            <MainLoading />
+          ) : mode === "sql" ? (
+            <SqlEditor
+              dialect={dialect}
+              tableNames={tableNames}
+              columnsByTable={columnsByTable}
+              requestConfig={requestConfig}
+            />
+          ) : selectedTable ? (
+            <TableEditor
+              key={selectedTable}
+              table={selectedTable}
+              dialect={dialect}
+              requestConfig={requestConfig}
+              initialFilters={fkFilters}
+              onNavigateToRow={(t, filters) => {
+                setSelectedTable(t);
+                setMode("table");
+                setFkFilters(filters);
+              }}
+            />
+          ) : (
+            <NoTableSelected />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function SidebarSkeleton() {
+  return (
+    <div className="flex h-full flex-col bg-card p-2">
+      <div className="mb-2 h-9 animate-pulse rounded-md bg-muted" />
+      <div className="mb-3 h-9 animate-pulse rounded-md bg-muted" />
+      <div className="space-y-1.5">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-8 animate-pulse rounded-md bg-muted"
+            style={{ opacity: 1 - i * 0.08 }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MainLoading() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <IconLoader2
+        className={cn("h-5 w-5 animate-spin text-muted-foreground")}
+      />
+    </div>
+  );
+}
+
+function NoTableSelected() {
+  return (
+    <div className="flex h-full w-full items-center justify-center p-6 text-center">
+      <div className="flex flex-col items-center">
+        <IconDatabase
+          className="mb-3 h-8 w-8 text-muted-foreground/50"
+          stroke={1.5}
+        />
+        <p className="text-sm font-medium text-foreground">No table selected</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Pick a table from the sidebar to browse and edit its rows.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/client/db-admin/DevDatabaseLink.tsx

@@ -0,0 +1,16 @@
+export interface DevDatabaseLinkProps {
+  className?: string;
+  /** Route path for the DB admin page. Defaults to `/database`. */
+  to?: string;
+}
+
+/**
+ * Hidden compatibility component for templates that still include the old
+ * database admin footer affordance.
+ *
+ * The page it links to (`/database`) and its backing routes are independently
+ * gated on the server; this component only controls the sidebar chrome.
+ */
+export function DevDatabaseLink(_props: DevDatabaseLinkProps) {
+  return null;
+}

package/src/client/db-admin/EditableCell.tsx

@@ -0,0 +1,451 @@
+import {
+  IconChevronDown,
+  IconCircleX,
+  IconMaximize,
+} from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+
+import type { DbAdminColumn } from "../../db-admin/types.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover.js";
+import { cn } from "../utils.js";
+import {
+  type EditorKind,
+  formatCellValue,
+  inferEnumValues,
+  valueToEditString,
+  parseEditValue,
+  ParseError,
+  cycleTriStateBoolean,
+  formatJsonPretty,
+} from "./cell-format.js";
+
+export interface EditableCellProps {
+  column: DbAdminColumn;
+  kind: EditorKind;
+  value: unknown;
+  /** Whether this cell holds a staged (uncommitted) edit. */
+  dirty?: boolean;
+  /** Whether editing is allowed (false when the table has no PK). */
+  editable?: boolean;
+  /** Whether this cell is the keyboard-focused/active cell in the grid. */
+  active?: boolean;
+  /** True if the editor should open immediately (e.g. typing began). */
+  editing?: boolean;
+  /** Commit a new value into the changeset. */
+  onCommit: (value: unknown) => void;
+  /** Request entering edit mode. */
+  onStartEdit?: () => void;
+  /** Request leaving edit mode without committing. */
+  onCancelEdit?: () => void;
+  /** Move focus after Enter ("down") or Tab ("right"). */
+  onNavigate?: (dir: "up" | "down" | "left" | "right") => void;
+  className?: string;
+}
+
+const NULL_TOKEN = (
+  <span className="italic text-muted-foreground/60 select-none">NULL</span>
+);
+
+export function EditableCell({
+  column,
+  kind,
+  value,
+  dirty,
+  editable = true,
+  active,
+  editing,
+  onCommit,
+  onStartEdit,
+  onCancelEdit,
+  onNavigate,
+  className,
+}: EditableCellProps) {
+  const display = formatCellValue(value, kind);
+
+  // Boolean cells toggle in place rather than opening a text editor.
+  if (kind === "boolean") {
+    return (
+      <BooleanCell
+        value={value}
+        dirty={dirty}
+        editable={editable}
+        active={active}
+        onCommit={onCommit}
+        onNavigate={onNavigate}
+        className={className}
+      />
+    );
+  }
+
+  const baseCell = cn(
+    "relative h-full w-full px-2 py-1 text-xs truncate outline-none",
+    "font-mono",
+    active && "ring-1 ring-inset ring-ring",
+    dirty && "bg-amber-500/10 ring-1 ring-inset ring-amber-500/50",
+    editable && "cursor-text",
+    className,
+  );
+
+  if (editing && editable) {
+    if (kind === "enum") {
+      return (
+        <EnumEditor
+          column={column}
+          value={value}
+          onCommit={onCommit}
+          onCancel={onCancelEdit}
+          onNavigate={onNavigate}
+        />
+      );
+    }
+    if (kind === "json") {
+      return (
+        <JsonEditor value={value} onCommit={onCommit} onCancel={onCancelEdit} />
+      );
+    }
+    return (
+      <InlineTextEditor
+        kind={kind}
+        value={value}
+        nullable={column.nullable}
+        onCommit={onCommit}
+        onCancel={onCancelEdit}
+        onNavigate={onNavigate}
+      />
+    );
+  }
+
+  return (
+    <div
+      role="gridcell"
+      tabIndex={active ? 0 : -1}
+      className={baseCell}
+      onDoubleClick={() => editable && onStartEdit?.()}
+      onKeyDown={(e) => {
+        if (!editable) return;
+        if (e.key === "Enter" || e.key === "F2") {
+          e.preventDefault();
+          onStartEdit?.();
+        }
+      }}
+      title={display.isNull ? "NULL" : display.text}
+    >
+      <div className="flex items-center gap-1">
+        <span className="truncate">
+          {display.isNull ? NULL_TOKEN : display.text}
+        </span>
+        {editable && (kind === "json" || kind === "text") && (
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={(e) => {
+              e.stopPropagation();
+              onStartEdit?.();
+            }}
+            className="ml-auto shrink-0 text-muted-foreground/50 opacity-0 hover:text-foreground group-hover:opacity-100"
+            aria-label="Expand editor"
+          >
+            <IconMaximize className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Boolean (tri-state) ─────────────────────────────────────────────────────
+
+function BooleanCell({
+  value,
+  dirty,
+  editable,
+  active,
+  onCommit,
+  onNavigate,
+  className,
+}: {
+  value: unknown;
+  dirty?: boolean;
+  editable: boolean;
+  active?: boolean;
+  onCommit: (v: unknown) => void;
+  onNavigate?: (dir: "up" | "down" | "left" | "right") => void;
+  className?: string;
+}) {
+  const label = value === true ? "true" : value === false ? "false" : null;
+  return (
+    <div
+      role="gridcell"
+      tabIndex={active ? 0 : -1}
+      className={cn(
+        "h-full w-full px-2 py-1 text-xs font-mono outline-none cursor-pointer select-none",
+        active && "ring-1 ring-inset ring-ring",
+        dirty && "bg-amber-500/10 ring-1 ring-inset ring-amber-500/50",
+        className,
+      )}
+      onClick={() => editable && onCommit(cycleTriStateBoolean(value))}
+      onKeyDown={(e) => {
+        if (!editable) return;
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          onCommit(cycleTriStateBoolean(value));
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          onNavigate?.("down");
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          onNavigate?.("up");
+        }
+      }}
+    >
+      {label === null ? NULL_TOKEN : label}
+    </div>
+  );
+}
+
+// ─── Inline text / number / timestamp / uuid editor ──────────────────────────
+
+function InlineTextEditor({
+  kind,
+  value,
+  nullable,
+  onCommit,
+  onCancel,
+  onNavigate,
+}: {
+  kind: EditorKind;
+  value: unknown;
+  nullable: boolean;
+  onCommit: (v: unknown) => void;
+  onCancel?: () => void;
+  onNavigate?: (dir: "up" | "down" | "left" | "right") => void;
+}) {
+  const ref = useRef<HTMLInputElement>(null);
+  const [text, setText] = useState(() => valueToEditString(value, kind));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+
+  const commit = (nav?: "down" | "right") => {
+    try {
+      const parsed = parseEditValue(text, kind);
+      setError(null);
+      onCommit(parsed);
+      if (nav) onNavigate?.(nav);
+    } catch (err) {
+      setError(err instanceof ParseError ? err.message : String(err));
+    }
+  };
+
+  return (
+    <div className="relative h-full w-full">
+      <input
+        ref={ref}
+        type="text"
+        inputMode={kind === "number" ? "decimal" : undefined}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={() => commit()}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit("down");
+          } else if (e.key === "Tab") {
+            e.preventDefault();
+            commit("right");
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel?.();
+          }
+        }}
+        className={cn(
+          "h-full w-full bg-background px-2 py-1 text-xs font-mono outline-none",
+          "ring-2 ring-inset ring-ring",
+          error && "ring-destructive",
+        )}
+      />
+      {nullable && (
+        <button
+          type="button"
+          tabIndex={-1}
+          title="Set NULL"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onCommit(null);
+          }}
+          className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-foreground"
+        >
+          <IconCircleX className="h-3.5 w-3.5" />
+        </button>
+      )}
+      {error && (
+        <div className="absolute left-0 top-full z-50 mt-0.5 rounded border border-destructive bg-popover px-2 py-1 text-[11px] text-destructive shadow-md">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Enum (select) editor ────────────────────────────────────────────────────
+
+function EnumEditor({
+  column,
+  value,
+  onCommit,
+  onCancel,
+  onNavigate,
+}: {
+  column: DbAdminColumn;
+  value: unknown;
+  onCommit: (v: unknown) => void;
+  onCancel?: () => void;
+  onNavigate?: (dir: "up" | "down" | "left" | "right") => void;
+}) {
+  const ref = useRef<HTMLSelectElement>(null);
+  const options = inferEnumValues(column) ?? [];
+
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+
+  return (
+    <select
+      ref={ref}
+      defaultValue={value === null || value === undefined ? "" : String(value)}
+      onChange={(e) => {
+        const v = e.target.value;
+        onCommit(v === "" ? null : v);
+        onNavigate?.("down");
+      }}
+      onBlur={() => onCancel?.()}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") onCancel?.();
+      }}
+      className="h-full w-full appearance-none bg-background px-2 py-1 text-xs font-mono outline-none ring-2 ring-inset ring-ring"
+    >
+      {column.nullable && <option value="">NULL</option>}
+      {options.map((opt) => (
+        <option key={opt} value={opt}>
+          {opt}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ─── JSON / long-text expanding editor ───────────────────────────────────────
+
+function JsonEditor({
+  value,
+  onCommit,
+  onCancel,
+}: {
+  value: unknown;
+  onCommit: (v: unknown) => void;
+  onCancel?: () => void;
+}) {
+  const [open, setOpen] = useState(true);
+  const [text, setText] = useState(() => formatJsonPretty(value));
+  const [error, setError] = useState<string | null>(null);
+
+  const commit = () => {
+    if (text.trim() === "") {
+      onCommit(null);
+      setOpen(false);
+      return;
+    }
+    try {
+      const parsed = parseEditValue(text, "json");
+      setError(null);
+      onCommit(parsed);
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof ParseError ? err.message : String(err));
+    }
+  };
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) onCancel?.();
+        setOpen(o);
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="flex h-full w-full items-center gap-1 px-2 py-1 text-xs font-mono ring-2 ring-inset ring-ring outline-none"
+        >
+          <span className="truncate">{formatJsonPretty(value) || "{}"}</span>
+          <IconChevronDown className="ml-auto h-3 w-3 shrink-0" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[28rem] p-2"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <textarea
+          autoFocus
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel?.();
+            }
+          }}
+          rows={10}
+          spellCheck={false}
+          className={cn(
+            "w-full resize-y rounded border border-border bg-background p-2 font-mono text-xs outline-none focus:ring-1 focus:ring-ring",
+            error && "border-destructive",
+          )}
+        />
+        {error && (
+          <div className="mt-1 text-[11px] text-destructive">{error}</div>
+        )}
+        <div className="mt-2 flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => {
+              onCommit(null);
+              setOpen(false);
+            }}
+            className="rounded px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground"
+          >
+            Set NULL
+          </button>
+          <div className="flex gap-1">
+            <button
+              type="button"
+              onClick={() => onCancel?.()}
+              className="rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={commit}
+              className="rounded bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              Apply
+            </button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}