okengine 0.13.0 → 0.15.2

package/src/console/ui-next/src/features/store/query/query-gate-menu.tsx

@@ -21,6 +21,7 @@ import {
   queryGateToolbarLabel,
   queryGateUserChoices,
   type QueryGateMode,
+  type RlsPickerValue,
 } from "../lib/query-gate.ts";
 import { mergeRlsGateCatalog, rlsGateCatalog } from "../lib/rls-gate-catalog.ts";
 import {
@@ -35,8 +36,8 @@ import {
 /** Props for {@link QueryGateMenu}. */
 export interface QueryGateMenuProps {
   readonly manifest: Manifest | null;
-  readonly asGate: string | null;
-  readonly onChange: (asGate: string | null) => void;
+  readonly value: RlsPickerValue;
+  readonly onChange: (next: RlsPickerValue) => void;
 }
 
 /**
@@ -44,7 +45,8 @@ export interface QueryGateMenuProps {
  *
  * @param props - Manifest + current pick
  */
-export function QueryGateMenu({ manifest, asGate, onChange }: QueryGateMenuProps): JSX.Element {
+export function QueryGateMenu({ manifest, value, onChange }: QueryGateMenuProps): JSX.Element {
+  const { asGate, asUserId } = value;
   const gatesQuery = useGates(true);
   const identitiesQuery = useFlowsIdentities();
   const catalog = useMemo(
@@ -61,33 +63,30 @@ export function QueryGateMenu({ manifest, asGate, onChange }: QueryGateMenuProps
     "Intentionally unauthenticated.";
   const mode = queryGateMode(asGate);
   const active = asGate !== null;
-  const [asUserId, setAsUserId] = useState<string | null>(null);
-  const [asTab, setAsTab] = useState<GateAsTab>("policy");
+  const [asTab, setAsTab] = useState<GateAsTab>(asUserId ? "user" : "policy");
   const selectedPolicy = policies.find((policy) => policy.id === asGate) ?? null;
   const selectedUser = users.find((user) => user.id === asUserId && user.gate === asGate) ?? null;
   const asEnabled = policies.length > 0 || users.length > 0;
 
   const selectMode = (next: QueryGateMode): void => {
     if (next === "operator") {
-      setAsUserId(null);
-      onChange(null);
+      onChange({ asGate: null, asUserId: null });
       return;
     }
     if (next === "public") {
-      setAsUserId(null);
-      onChange("public");
+      onChange({ asGate: "public", asUserId: null });
       return;
     }
     if (mode === "as") return;
     const fallback = selectedPolicy?.id ?? policies[0]?.id ?? users[0]?.gate ?? null;
     if (fallback === null) return;
     if (users[0] && fallback === users[0].gate && policies.length === 0) {
-      setAsUserId(users[0].id);
       setAsTab("user");
-    } else {
-      setAsTab("policy");
+      onChange({ asGate: users[0].gate, asUserId: users[0].id });
+      return;
     }
-    onChange(fallback);
+    setAsTab("policy");
+    onChange({ asGate: fallback, asUserId: null });
   };
 
   return (
@@ -111,7 +110,9 @@ export function QueryGateMenu({ manifest, asGate, onChange }: QueryGateMenuProps
               data-icon="inline-start"
               className="size-3.5"
             />
-            <span className="truncate">{queryGateToolbarLabel(asGate)}</span>
+            <span className="truncate">
+              {queryGateToolbarLabel(asGate, asUserId, selectedUser?.label)}
+            </span>
           </Button>
         )}
       />
@@ -143,12 +144,12 @@ export function QueryGateMenu({ manifest, asGate, onChange }: QueryGateMenuProps
         </GateModeStrip>
         {mode === "operator" ? (
           <GateModeDetail title="Operator" badge="Default">
-            Bypasses RLS. No <span className="font-mono">oke.gate</span> is set.
+            Bypasses RLS. No <span className="font-mono">oke.gate()</span> stamp.
           </GateModeDetail>
         ) : null}
         {mode === "public" ? (
           <GateModeDetail title="Public">
-            {publicDetail} Sets <span className="font-mono">oke.gate</span> to{" "}
+            {publicDetail} Sets <span className="font-mono">oke.gate()</span> to{" "}
             <span className="font-mono">public</span>.
           </GateModeDetail>
         ) : null}
@@ -161,14 +162,12 @@ export function QueryGateMenu({ manifest, asGate, onChange }: QueryGateMenuProps
             asGate={asGate}
             asUserId={selectedUser?.id ?? null}
             onSelectPolicy={(policy) => {
-              setAsUserId(null);
               setAsTab("policy");
-              onChange(policy.id);
+              onChange({ asGate: policy.id, asUserId: null });
             }}
             onSelectUser={(user) => {
-              setAsUserId(user.id);
               setAsTab("user");
-              onChange(user.gate);
+              onChange({ asGate: user.gate, asUserId: user.id });
             }}
           />
         ) : null}

package/src/console/ui-next/src/features/store/query/query-gate-parts.tsx

@@ -263,7 +263,8 @@ export function GateAsPicker({
             </>
           ) : (
             <>
-              {selected.detail} Sets <span className="font-mono">oke.gate</span> for RLS.
+              {selected.detail} Sets <span className="font-mono">oke.gate()</span> /{" "}
+              <span className="font-mono">oke.user()</span> for RLS.
             </>
           )}
         </p>

package/src/console/ui-next/src/features/store/query/query-results.tsx

@@ -2,7 +2,7 @@
  * Query console results — table / JSON / raw, copy, download, cell inspect.
  */
 
-import { useMemo, useState, type JSX } from "react";
+import { useEffect, useMemo, useRef, useState, type JSX } from "react";
 import {
   ArrowDown01Icon,
   ArrowUp01Icon,
@@ -30,6 +30,8 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@/components/ui/empty";
+import { EASE_OUT } from "@/lib/ease.ts";
+import { motion, useReducedMotion } from "@/lib/motion.ts";
 import { cn } from "@/lib/utils.ts";
 import { JsonValueSheet } from "../detail/json-value-sheet.tsx";
 import { ToolbarTip } from "@/components/ui/toolbar-tip.tsx";
@@ -104,6 +106,14 @@ export function QueryResults({
     );
   }, [rows, columns]);
 
+  const reduce = useReducedMotion() ?? false;
+  const wasPending = useRef(pending);
+  const [appearId, setAppearId] = useState(0);
+  useEffect(() => {
+    if (wasPending.current && !pending) setAppearId((n) => n + 1);
+    wasPending.current = pending;
+  }, [pending]);
+
   const copy = (kind: "json" | "csv"): void => {
     const text = kind === "csv" ? csvText : jsonText;
     if (!navigator.clipboard || text.length === 0) return;
@@ -210,93 +220,110 @@ export function QueryResults({
 
       {collapsed ? null : (
         <div className="min-h-0 flex-1 overflow-auto">
-          {error ? (
-            <p
-              className="px-3 py-4 font-mono text-xs leading-relaxed text-destructive"
-              role="alert"
-            >
-              {error}
-            </p>
-          ) : pending ? (
+          {pending ? (
             <p className="px-3 py-8 text-center text-sm text-muted-foreground">Running…</p>
-          ) : rows === null && view !== "raw" ? (
-            <Empty className="h-full min-h-40 border-0">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <HugeiconsIcon icon={PlayIcon} className="size-4" />
-                </EmptyMedia>
-                <EmptyTitle>No results yet</EmptyTitle>
-                <EmptyDescription>Run a query to see results here.</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : view === "raw" ? (
-            executed ? (
-              <div className="p-3" data-slot="store-query-raw">
-                <QueryHighlightView
-                  code={executed}
-                  language={executedLanguage}
-                  className="text-xs leading-5"
-                />
-              </div>
-            ) : (
-              <p className="px-3 py-8 text-center text-sm text-muted-foreground">
-                Nothing executed yet.
-              </p>
-            )
-          ) : view === "json" ? (
-            <HighlightedJson
-              json={jsonText}
-              dataSlot="store-query-json"
-              className="min-h-full p-3"
-            />
-          ) : rows && rows.length === 0 ? (
-            <p className="px-3 py-8 text-center text-sm text-muted-foreground">
-              Query returned 0 rows.
-            </p>
           ) : (
-            <table className="w-full min-w-max border-collapse text-left text-[12px]">
-              <thead className="sticky top-0 z-10 bg-background">
-                <tr>
-                  {columns.map((col) => (
-                    <th
-                      key={col}
-                      scope="col"
-                      className="border-b border-border/60 px-3 py-1.5 font-mono text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase"
-                    >
-                      {col}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {(rows ?? []).map((row, i) => (
-                  <tr key={i} className="border-b border-border/60 hover:bg-muted/50">
-                    {columns.map((col) => {
-                      const value = row[col];
-                      const inspectable = asInspectableJson(value) !== null;
-                      return (
-                        <td
+            <motion.div
+              key={appearId}
+              initial={
+                appearId === 0
+                  ? false
+                  : reduce
+                    ? { opacity: 0 }
+                    : { opacity: 0, transform: "translateY(4px)" }
+              }
+              animate={reduce ? { opacity: 1 } : { opacity: 1, transform: "translateY(0px)" }}
+              transition={{ duration: reduce ? 0.12 : 0.18, ease: EASE_OUT }}
+            >
+              {error ? (
+                <p
+                  className="px-3 py-4 font-mono text-xs leading-relaxed text-destructive"
+                  role="alert"
+                >
+                  {error}
+                </p>
+              ) : rows === null && view !== "raw" ? (
+                <Empty className="h-full min-h-40 border-0">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <HugeiconsIcon icon={PlayIcon} className="size-4" />
+                    </EmptyMedia>
+                    <EmptyTitle>No results yet</EmptyTitle>
+                    <EmptyDescription>Run a query to see results here.</EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              ) : view === "raw" ? (
+                executed ? (
+                  <div className="p-3" data-slot="store-query-raw">
+                    <QueryHighlightView
+                      code={executed}
+                      language={executedLanguage}
+                      className="text-xs leading-5"
+                    />
+                  </div>
+                ) : (
+                  <p className="px-3 py-8 text-center text-sm text-muted-foreground">
+                    Nothing executed yet.
+                  </p>
+                )
+              ) : view === "json" ? (
+                <HighlightedJson
+                  json={jsonText}
+                  dataSlot="store-query-json"
+                  className="min-h-full p-3"
+                />
+              ) : rows && rows.length === 0 ? (
+                <p className="px-3 py-8 text-center text-sm text-muted-foreground">
+                  Query returned 0 rows.
+                </p>
+              ) : (
+                <table className="w-full min-w-max border-collapse text-left text-[12px]">
+                  <thead className="sticky top-0 z-10 bg-background">
+                    <tr>
+                      {columns.map((col) => (
+                        <th
                           key={col}
-                          className="max-w-xs truncate px-3 py-1.5 font-mono text-foreground/90"
+                          scope="col"
+                          className="border-b border-border/60 px-3 py-1.5 font-mono text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase"
                         >
-                          {inspectable ? (
-                            <button
-                              type="button"
-                              className="max-w-full truncate text-left underline decoration-border/70 underline-offset-2 hover:text-foreground"
-                              onClick={() => setInspect({ rowId: String(i), column: col, value })}
+                          {col}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(rows ?? []).map((row, i) => (
+                      <tr key={i} className="border-b border-border/60 hover:bg-muted/50">
+                        {columns.map((col) => {
+                          const value = row[col];
+                          const inspectable = asInspectableJson(value) !== null;
+                          return (
+                            <td
+                              key={col}
+                              className="max-w-xs truncate px-3 py-1.5 font-mono text-foreground/90"
                             >
-                              {formatGridCell(value)}
-                            </button>
-                          ) : (
-                            formatGridCell(value)
-                          )}
-                        </td>
-                      );
-                    })}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+                              {inspectable ? (
+                                <button
+                                  type="button"
+                                  className="max-w-full truncate text-left underline decoration-border/70 underline-offset-2 hover:text-foreground"
+                                  onClick={() =>
+                                    setInspect({ rowId: String(i), column: col, value })
+                                  }
+                                >
+                                  {formatGridCell(value)}
+                                </button>
+                              ) : (
+                                formatGridCell(value)
+                              )}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </motion.div>
           )}
         </div>
       )}

package/src/console/ui-next/src/features/store/schema/schema-table-node.tsx

@@ -4,6 +4,8 @@
 
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
 import type { JSX } from "react";
+import { ShieldEnergyIcon, ShieldOff } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 import { cn } from "@/lib/utils.ts";
 import {
   schemaRelationLabel,
@@ -47,6 +49,21 @@ export function SchemaTableNode({ data }: NodeProps<SchemaTableNode>): JSX.Eleme
       >
         <span className="size-2 shrink-0 rounded-full" style={{ background: hex }} aria-hidden />
         <span className="min-w-0 truncate font-semibold text-foreground">{table.name}</span>
+        <span
+          data-slot="store-schema-rls"
+          data-rls={table.rls === true ? "on" : "off"}
+          title={table.rls === true ? "RLS enabled" : "RLS disabled"}
+          className={cn(
+            "shrink-0",
+            table.rls === true ? "text-emerald-500" : "text-muted-foreground/35",
+          )}
+        >
+          <HugeiconsIcon
+            icon={table.rls === true ? ShieldEnergyIcon : ShieldOff}
+            className="size-3"
+            aria-hidden
+          />
+        </span>
         {showStore ? (
           <span className="ml-auto shrink-0 font-mono text-[9px] tracking-[0.08em] text-muted-foreground uppercase">
             {table.storeName}

package/src/console/ui-next/src/features/units/call/call-api-panel.tsx

@@ -53,8 +53,10 @@ import { cn } from "@/lib/utils";
 import type { RunCache } from "@/features/flows/traces/cache-icon.ts";
 import { CacheGlyph } from "@/features/flows/traces/cache-glyph.tsx";
 import { formatDuration } from "@/features/flows/traces/format-duration.ts";
+import { httpMethodHasBody } from "@/features/flows/traces/http-method.ts";
 import { useStoreQuery } from "@/features/store/data/use-store-query.ts";
 import { useClockRunNow, useFlowsIdentities, useFlowsInvoke } from "../data/use-flows-invoke.ts";
+import { pickSeedFields, splitCallApiInput } from "../lib/contract-input.ts";
 import {
   fieldConstraintHint,
   fieldsFromSchema,
@@ -313,33 +315,41 @@ function InvokeBodyPanel({
     () => (kind === "http" && row.path ? pathParamNames(row.path) : []),
     [kind, row.path],
   );
+  const split = useMemo(
+    () =>
+      splitCallApiInput(fields, {
+        http: kind === "http",
+        method: row.method,
+        pathParams: params,
+      }),
+    [fields, kind, row.method, params],
+  );
+  const showBody = kind !== "http" || httpMethodHasBody(row.method);
 
   const [invokeAs, setInvokeAs] = useState<CallInvokeAs>({ asGate: null, asUserId: null });
   const [piiMasked, setPiiMasked] = useState(true);
   const [pathValues, setPathValues] = useState<Record<string, string>>(() =>
     seedPathValues(row.path, params),
   );
-  const [body, setBody] = useState<Record<string, unknown>>(
+  const seedAll = useMemo(
     () => (seedFromSchema(inSchema) as Record<string, unknown>) ?? {},
+    [inSchema],
   );
+  const seedQuery = useMemo(() => pickSeedFields(seedAll, split.query), [seedAll, split.query]);
+  const seedBody = useMemo(() => pickSeedFields(seedAll, split.body), [seedAll, split.body]);
+  const [query, setQuery] = useState<Record<string, unknown>>(seedQuery);
+  const [body, setBody] = useState<Record<string, unknown>>(seedBody);
   const [bodyView, setBodyView] = useState<BodyView>("fields");
-  const [rawText, setRawText] = useState(() =>
-    stringifyBody((seedFromSchema(inSchema) as Record<string, unknown>) ?? {}),
-  );
+  const [rawText, setRawText] = useState(() => stringifyBody(seedBody));
   const [rawError, setRawError] = useState<string | null>(null);
   const [localErrors, setLocalErrors] = useState<readonly { path: string; message: string }[]>([]);
   const [startedAt, setStartedAt] = useState<number | null>(null);
   const [elapsedMs, setElapsedMs] = useState<number | null>(null);
 
-  const seedBody = useMemo(
-    () => (seedFromSchema(inSchema) as Record<string, unknown>) ?? {},
-    [inSchema],
-  );
-
   useEffect(() => {
-    const next = (seedFromSchema(inSchema) as Record<string, unknown>) ?? {};
-    setBody(next);
-    setRawText(stringifyBody(next));
+    setQuery(seedQuery);
+    setBody(seedBody);
+    setRawText(stringifyBody(seedBody));
     setRawError(null);
     setBodyView("fields");
     setPathValues(seedPathValues(row.path, params));
@@ -388,8 +398,8 @@ function InvokeBodyPanel({
   }
 
   async function onCall(includePii = !piiMasked): Promise<void> {
-    let nextBody = body;
-    if (bodyView === "raw") {
+    let nextBody = showBody ? body : {};
+    if (showBody && bodyView === "raw") {
       if (!commitRawText(rawText)) return;
       try {
         nextBody = JSON.parse(rawText) as Record<string, unknown>;
@@ -397,7 +407,8 @@ function InvokeBodyPanel({
         return;
       }
     }
-    const local = validateContract(inSchema, nextBody);
+    const invokeBody = { ...query, ...nextBody };
+    const local = validateContract(inSchema, { ...pathValues, ...invokeBody });
     if (!local.ok) {
       setLocalErrors(local.errors);
       return;
@@ -408,7 +419,7 @@ function InvokeBodyPanel({
     try {
       await invoke.mutateAsync({
         flowId: row.id,
-        body: nextBody,
+        body: invokeBody,
         ...(invokeAs.asUserId ? { asUserId: invokeAs.asUserId } : {}),
         ...(invokeAs.asGate ? { asGate: invokeAs.asGate } : {}),
         ...(params.length > 0 ? { pathParams: pathValues } : {}),
@@ -420,6 +431,7 @@ function InvokeBodyPanel({
   }
 
   function onReset(): void {
+    setQuery(seedQuery);
     setBody(seedBody);
     setRawText(stringifyBody(seedBody));
     setRawError(null);
@@ -471,8 +483,12 @@ function InvokeBodyPanel({
               }
             }}
           />
-          <DockSep />
-          <BodyViewToggle view={bodyView} onChange={onBodyViewChange} />
+          {showBody ? (
+            <>
+              <DockSep />
+              <BodyViewToggle view={bodyView} onChange={onBodyViewChange} />
+            </>
+          ) : null}
           <DockSep />
           <Tooltip>
             <TooltipTrigger
@@ -492,7 +508,7 @@ function InvokeBodyPanel({
               )}
             />
             <TooltipContent side="bottom" className="text-[11px]">
-              Reset body to the schema example
+              {showBody ? "Reset body to the schema example" : "Reset to schema examples"}
             </TooltipContent>
           </Tooltip>
           <DockSep />
@@ -566,7 +582,7 @@ function InvokeBodyPanel({
           ) : null}
 
           {params.length > 0 ? (
-            <section className="min-w-0" aria-label="Path params">
+            <section className="min-w-0" aria-label="Path params" data-slot="call-api-path">
               <DockChapter title="Path params" hint={row.path ?? undefined} />
               {params.map((name) => (
                 <SheetField key={name} label={name} className="[&>span]:px-3">
@@ -583,67 +599,89 @@ function InvokeBodyPanel({
             </section>
           ) : null}
 
-          <section className="min-w-0" aria-label="Body">
-            <DockChapter
-              title="Body"
-              hint={bodyView === "raw" ? "raw JSON" : "seeded from schema"}
-            />
-            {bodyView === "raw" ? (
-              <div className="border-b border-border/50">
-                <textarea
-                  data-slot="call-api-body-raw"
-                  aria-label="Raw JSON body"
-                  spellCheck={false}
-                  value={rawText}
-                  onChange={(e) => {
-                    setRawText(e.target.value);
-                    if (rawError) setRawError(null);
-                  }}
-                  className={cn(
-                    "min-h-40 w-full resize-y rounded-none border-0 bg-transparent px-3 py-2 font-mono text-xs leading-relaxed text-foreground outline-none",
-                    "placeholder:text-muted-foreground focus-visible:bg-muted/20",
-                    rawError && "text-destructive",
-                  )}
-                />
-                {rawError ? (
-                  <p
-                    role="alert"
-                    className="px-3 pb-2 text-xs text-destructive"
-                    data-slot="call-api-raw-error"
-                  >
-                    {rawError}
-                  </p>
-                ) : null}
-              </div>
-            ) : fields.length === 0 ? (
-              <p className="border-b border-border/50 px-3 py-2 text-xs text-muted-foreground">
-                No body fields (empty object).
-              </p>
-            ) : (
+          {split.query.length > 0 ? (
+            <section className="min-w-0" aria-label="Query params" data-slot="call-api-query">
+              <DockChapter title="Query params" hint="seeded from schema" />
               <SheetGrid>
-                {fields.map((f) => (
+                {split.query.map((f) => (
                   <BodyField
                     key={f.path}
                     field={f}
-                    value={body[f.name]}
-                    onChange={(v) => setBody((prev) => ({ ...prev, [f.name]: v }))}
+                    idPrefix="query"
+                    value={query[f.name]}
+                    onChange={(v) => setQuery((prev) => ({ ...prev, [f.name]: v }))}
                     error={localErrors.find((e) => e.path === `/${f.name}` || e.path === f.path)}
                     wide={f.type === "object" || f.type === "array"}
                     manifest={manifest}
                   />
                 ))}
               </SheetGrid>
-            )}
-            {localErrors.length > 0 ? (
-              <p
-                role="alert"
-                className="px-3 py-2 text-xs text-destructive"
-                data-slot="call-api-validation"
-              >
-                Fix contract errors before sending.
-              </p>
-            ) : null}
-          </section>
+            </section>
+          ) : null}
+
+          {showBody ? (
+            <section className="min-w-0" aria-label="Body" data-slot="call-api-body">
+              <DockChapter
+                title="Body"
+                hint={bodyView === "raw" ? "raw JSON" : "seeded from schema"}
+              />
+              {bodyView === "raw" ? (
+                <div className="border-b border-border/50">
+                  <textarea
+                    data-slot="call-api-body-raw"
+                    aria-label="Raw JSON body"
+                    spellCheck={false}
+                    value={rawText}
+                    onChange={(e) => {
+                      setRawText(e.target.value);
+                      if (rawError) setRawError(null);
+                    }}
+                    className={cn(
+                      "min-h-40 w-full resize-y rounded-none border-0 bg-transparent px-3 py-2 font-mono text-xs leading-relaxed text-foreground outline-none",
+                      "placeholder:text-muted-foreground focus-visible:bg-muted/20",
+                      rawError && "text-destructive",
+                    )}
+                  />
+                  {rawError ? (
+                    <p
+                      role="alert"
+                      className="px-3 pb-2 text-xs text-destructive"
+                      data-slot="call-api-raw-error"
+                    >
+                      {rawError}
+                    </p>
+                  ) : null}
+                </div>
+              ) : split.body.length === 0 ? (
+                <p className="border-b border-border/50 px-3 py-2 text-xs text-muted-foreground">
+                  No body fields (empty object).
+                </p>
+              ) : (
+                <SheetGrid>
+                  {split.body.map((f) => (
+                    <BodyField
+                      key={f.path}
+                      field={f}
+                      value={body[f.name]}
+                      onChange={(v) => setBody((prev) => ({ ...prev, [f.name]: v }))}
+                      error={localErrors.find((e) => e.path === `/${f.name}` || e.path === f.path)}
+                      wide={f.type === "object" || f.type === "array"}
+                      manifest={manifest}
+                    />
+                  ))}
+                </SheetGrid>
+              )}
+            </section>
+          ) : null}
+          {localErrors.length > 0 ? (
+            <p
+              role="alert"
+              className="px-3 py-2 text-xs text-destructive"
+              data-slot="call-api-validation"
+            >
+              Fix contract errors before sending.
+            </p>
+          ) : null}
         </div>
 
         <ResponseBlock
@@ -1057,6 +1095,7 @@ function BodyField({
   error,
   wide = false,
   manifest,
+  idPrefix = "body",
 }: {
   readonly field: FormField;
   readonly value: unknown;
@@ -1064,8 +1103,9 @@ function BodyField({
   readonly error?: { path: string; message: string };
   readonly wide?: boolean;
   readonly manifest: Manifest | null;
+  readonly idPrefix?: string;
 }): JSX.Element {
-  const id = `body-${field.name}`;
+  const id = `${idPrefix}-${field.name}`;
   const fk = useFkFieldOptions(field, manifest);
   const hint = [
     !field.required ? "optional" : null,