@agent-native/core 0.86.0 → 0.87.0

package/corpus/core/src/client/components/ui/dropdown-menu.tsx

@@ -1,191 +1 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
-import * as React from "react";
-
-import { cn } from "../../utils.js";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "ps-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <IconChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-[250] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-in data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-[250] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-in data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "ps-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <IconCheck className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <IconCircle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-xs font-semibold text-muted-foreground",
-      inset && "ps-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span
-    className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
-    {...props}
-  />
-);
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/core/src/client/components/ui/hover-card.tsx

@@ -1,29 +1 @@
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React from "react";
-
-import { cn } from "../../utils.js";
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Portal>
-    <HoverCardPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-[250] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </HoverCardPrimitive.Portal>
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export * from "@agent-native/toolkit/ui/hover-card";

package/corpus/core/src/client/components/ui/popover.tsx

@@ -1,31 +1 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "../../utils.js";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-[250] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/core/src/client/components/ui/sheet.tsx

@@ -1,96 +1 @@
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { IconX } from "@tabler/icons-react";
-import * as React from "react";
-
-import { cn } from "../../utils.js";
-
-const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
-const SheetClose = SheetPrimitive.Close;
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-[220] bg-background/35 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
-    side?: "right" | "left";
-  }
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed top-0 z-[230] flex h-full w-full max-w-[440px] flex-col border-border bg-background text-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200",
-        side === "right"
-          ? "right-0 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
-          : "left-0 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-        <IconX className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 px-4 py-4", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-sm font-semibold text-foreground", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-xs text-muted-foreground", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-};
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/core/src/client/components/ui/tooltip.tsx

@@ -1,53 +1 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "../../utils.js";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-function normalizeTooltipText(text: string): string {
-  const decoded = text.replace(/\\u([0-9a-fA-F]{4})/g, (_match, hex) =>
-    String.fromCharCode(Number.parseInt(hex, 16)),
-  );
-  return decoded.replace(
-    /\b([A-Za-z][A-Za-z ]*?)\((?=(?:⌘|⌃|⌥|⇧|Ctrl|Alt|Shift|Cmd))/g,
-    (_match, label) => `${label.charAt(0).toUpperCase()}${label.slice(1)} (`,
-  );
-}
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, children, ...props }, ref) => {
-  const normalizedChildren =
-    typeof children === "string" ? normalizeTooltipText(children) : children;
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        data-agent-native-tooltip="true"
-        className={cn(
-          "z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95",
-          className,
-        )}
-        {...props}
-      >
-        {normalizedChildren}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-});
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-  normalizeTooltipText,
-};
+export * from "@agent-native/toolkit/ui/tooltip";

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

@@ -1,11 +1,10 @@
 import { IconDatabase, IconLoader2 } from "@tabler/icons-react";
 /**
- * Code-mode database admin page — the shell that hosts the table browser, the
- * table editor, and the SQL editor.
+ * Database admin page — the shell that hosts the table browser, the table
+ * editor, and the SQL editor.
  *
- * Gated to Code mode: when the app cannot toggle into Code mode
- * (`canToggle` is false) we render a clean notice instead of the tool. The
- * backend also enforces this with a 403, so this is purely a friendlier UX.
+ * 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";
 
@@ -16,7 +15,7 @@ import { SqlEditor } from "./SqlEditor.js";
 import { TableBrowser } from "./TableBrowser.js";
 import { TableEditor } from "./TableEditor.js";
 import { useDbAdminAgentSync, useNavigateConsumer } from "./useAgentSync.js";
-import { useOverview } from "./useDbAdmin.js";
+import { useOverview, type DbAdminRequestConfig } from "./useDbAdmin.js";
 
 const DIALECT_LABEL: Record<string, string> = {
   postgres: "Postgres",
@@ -24,9 +23,30 @@ const DIALECT_LABEL: Record<string, string> = {
   d1: "Cloudflare D1",
 };
 
-export function DbAdminPage() {
+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 { data: overview, isLoading: overviewLoading } = useOverview();
+  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");
@@ -45,12 +65,12 @@ export function DbAdminPage() {
   }, [selectedTable, tables]);
 
   // Keep the agent's <current-screen> in sync, and let it drive navigation.
-  useDbAdminAgentSync({ table: selectedTable, mode });
+  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.
@@ -58,7 +78,7 @@ export function DbAdminPage() {
   const columnsByTable = useMemo<Record<string, string[]>>(() => ({}), []);
 
   // ─── Code mode gate ──────────────────────────────────────────────────────
-  if (!devLoading && !canToggle) {
+  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">
@@ -79,20 +99,26 @@ export function DbAdminPage() {
     );
   }
 
-  const showInitialLoading = (devLoading || overviewLoading) && !overview;
+  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">Database</span>
+        <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 */}
@@ -122,12 +148,14 @@ export function DbAdminPage() {
               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);

package/corpus/core/src/client/db-admin/SqlEditor.tsx

@@ -63,12 +63,13 @@ import {
   deleteSnippet,
   type SqlSnippet,
 } from "./sql-storage.js";
-import { runQuery } from "./useDbAdmin.js";
+import { runQuery, type DbAdminRequestConfig } from "./useDbAdmin.js";
 
 export interface SqlEditorProps {
   dialect: DbAdminDialect;
   tableNames: string[];
   columnsByTable: Record<string, string[]>;
+  requestConfig?: DbAdminRequestConfig;
 }
 
 interface QueryResult {
@@ -266,6 +267,7 @@ export function SqlEditor({
   dialect,
   tableNames,
   columnsByTable,
+  requestConfig,
 }: SqlEditorProps) {
   const isDark = useIsDark();
   const editorRef = useRef<ReactCodeMirrorRef>(null);
@@ -307,7 +309,12 @@ export function SqlEditor({
       setRunning(true);
       setError(null);
       try {
-        const res = await runQuery(trimmed, undefined, confirmDestructive);
+        const res = await runQuery(
+          trimmed,
+          undefined,
+          confirmDestructive,
+          requestConfig,
+        );
         setResult({
           columns: res.columns,
           rows: res.rows,
@@ -334,7 +341,7 @@ export function SqlEditor({
         setRunning(false);
       }
     },
-    [],
+    [requestConfig],
   );
 
   const runActiveStatement = useCallback(() => {

package/corpus/core/src/client/db-admin/TableEditor.tsx

@@ -36,11 +36,17 @@ import { DataGrid, type GridRow, type ActiveCell } from "./DataGrid.js";
 import { FilterBar } from "./FilterBar.js";
 import { RowSidePanel, type RowSidePanelMode } from "./RowSidePanel.js";
 import { loadGridState, saveGridState } from "./storage.js";
-import { useTableSchema, useTableRows, mutateTable } from "./useDbAdmin.js";
+import {
+  useTableSchema,
+  useTableRows,
+  mutateTable,
+  type DbAdminRequestConfig,
+} from "./useDbAdmin.js";
 
 export interface TableEditorProps {
   table: string;
   dialect: DbAdminDialect;
+  requestConfig?: DbAdminRequestConfig;
   initialFilters?: DbAdminFilter[];
   onNavigateToRow: (table: string, filters: DbAdminFilter[]) => void;
 }
@@ -51,6 +57,7 @@ const PAGE_SIZES = [25, 50, 100, 250, 500];
 export function TableEditor({
   table,
   dialect: _dialect,
+  requestConfig,
   initialFilters,
   onNavigateToRow,
 }: TableEditorProps) {
@@ -90,12 +97,12 @@ export function TableEditor({
   }, [table, columnWidths, sort, filters, pageSize]);
 
   // ─── Data ────────────────────────────────────────────────────────────────
-  const schemaState = useTableSchema(table);
+  const schemaState = useTableSchema(table, requestConfig);
   const rowsReq = useMemo(
     () => ({ page, pageSize, sort, filters }),
     [page, pageSize, sort, filters],
   );
-  const rowsState = useTableRows(table, rowsReq);
+  const rowsState = useTableRows(table, rowsReq, requestConfig);
 
   const schema = schemaState.data;
   const changeset = useChangeset(schema);
@@ -201,9 +208,9 @@ export function TableEditor({
       if (!mutation.inserts && !mutation.updates && !mutation.deletes) {
         return null;
       }
-      return mutateTable(table, mutation);
+      return mutateTable(table, mutation, requestConfig);
     },
-    [changeset, originalRows, table],
+    [changeset, originalRows, requestConfig, table],
   );
 
   const handlePreview = useCallback(async () => {

package/corpus/core/src/client/db-admin/useAgentSync.ts

@@ -64,6 +64,7 @@ export interface DbAdminNavigationState {
 export interface UseDbAdminAgentSyncArgs {
   table: string | null;
   mode: "table" | "sql";
+  enabled?: boolean;
 }
 
 /**
@@ -74,8 +75,10 @@ export interface UseDbAdminAgentSyncArgs {
 export function useDbAdminAgentSync({
   table,
   mode,
+  enabled = true,
 }: UseDbAdminAgentSyncArgs): void {
   useEffect(() => {
+    if (!enabled) return;
     const state: DbAdminNavigationState = { view: "database", table, mode };
     fetch(NAVIGATION_PATH, {
       method: "PUT",
@@ -84,7 +87,7 @@ export function useDbAdminAgentSync({
       headers: headers({ "Content-Type": "application/json" }),
       body: JSON.stringify(state),
     }).catch(() => {});
-  }, [table, mode]);
+  }, [enabled, table, mode]);
 }
 
 interface NavigateCommand {
@@ -97,11 +100,15 @@ interface NavigateCommand {
  * a database table, invoke `onNavigate(table)` then clear the key so it does
  * not replay on the next poll.
  */
-export function useNavigateConsumer(onNavigate: (table: string) => void): void {
+export function useNavigateConsumer(
+  onNavigate: (table: string) => void,
+  enabled = true,
+): void {
   const handlerRef = useRef(onNavigate);
   handlerRef.current = onNavigate;
 
   useEffect(() => {
+    if (!enabled) return;
     let active = true;
     let timer: ReturnType<typeof setTimeout> | undefined;
 
@@ -143,5 +150,5 @@ export function useNavigateConsumer(onNavigate: (table: string) => void): void {
       active = false;
       if (timer) clearTimeout(timer);
     };
-  }, []);
+  }, [enabled]);
 }