@agent-native/core 0.131.3 → 0.131.4

package/corpus/README.md

@@ -30,4 +30,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 - core files: 1642
 - toolkit files: 160
-- template files: 7179
+- template files: 7192

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/core
 
+## 0.131.4
+
+### Patch Changes
+
+- 13f7e6b: Simplify the agent panel's error-recovery copy and move it into the message catalog, so it no longer shows untranslated English or explains the failure as an "internal UI error".
+
 ## 0.131.3
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.131.3",
+  "version": "0.131.4",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/client/AgentPanel.tsx

@@ -2585,47 +2585,71 @@ class AgentPanelErrorBoundary extends React.Component<
       assistantUiRecoverableRenderErrorKind(this.state.error) &&
       this.state.staleIndexRecoveryCount < 2
     ) {
-      return (
-        <div className="flex h-full items-center justify-center p-6 text-center text-xs text-muted-foreground">
-          Reloading chat UI...
-        </div>
-      );
+      return <AgentPanelReloadingNotice />;
     }
 
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
-        <div className="max-w-[260px] space-y-1">
-          <p className="text-sm font-medium text-foreground">
-            Agent panel hit an internal UI error.
-          </p>
-          <p className="text-xs leading-relaxed text-muted-foreground">
-            The app is still usable. Reset the panel to reload the chat UI.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent"
-          onClick={() => {
-            this.setState({ error: null, staleIndexRecoveryCount: 0 });
-            this.props.onReset();
-          }}
-        >
-          Reset agent panel
-        </button>
-        <ErrorReportActions
-          appName="Agent panel"
-          title="Agent panel UI error"
-          details={this.state.error.message}
-          issueTitle="Agent panel UI error"
-          className="max-w-[260px]"
-          feedbackClassName="h-7"
-          githubClassName="h-7"
-        />
-      </div>
+      <AgentPanelErrorFallback
+        details={this.state.error.message}
+        onReset={() => {
+          this.setState({ error: null, staleIndexRecoveryCount: 0 });
+          this.props.onReset();
+        }}
+      />
     );
   }
 }
 
+// The boundary must stay a class (componentDidCatch), but its copy still has to
+// come from the catalog like every other string in this file — so the fallback
+// UI lives in function components that can call useT.
+function AgentPanelReloadingNotice() {
+  const t = useT();
+  return (
+    <div className="flex h-full items-center justify-center p-6 text-center text-xs text-muted-foreground">
+      {t("agentPanel.uiError.reloading")}
+    </div>
+  );
+}
+
+function AgentPanelErrorFallback({
+  details,
+  onReset,
+}: {
+  details: string;
+  onReset: () => void;
+}) {
+  const t = useT();
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+      <div className="max-w-[260px] space-y-1">
+        <p className="text-sm font-medium text-foreground">
+          {t("agentPanel.uiError.title")}
+        </p>
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          {t("agentPanel.uiError.description")}
+        </p>
+      </div>
+      <button
+        type="button"
+        className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent"
+        onClick={onReset}
+      >
+        {t("agentPanel.uiError.reset")}
+      </button>
+      <ErrorReportActions
+        appName="Agent panel"
+        title={t("agentPanel.uiError.title")}
+        details={details}
+        issueTitle="Agent panel UI error"
+        className="max-w-[260px]"
+        feedbackClassName="h-7"
+        githubClassName="h-7"
+      />
+    </div>
+  );
+}
+
 export function AgentPanel(props: AgentPanelProps) {
   const [resetKey, setResetKey] = useState(0);
   const resetPanel = useCallback(() => {

package/corpus/core/src/localization/default-messages.ts

@@ -336,6 +336,12 @@ const messages = {
     },
   },
   agentPanel: {
+    uiError: {
+      title: "Agent panel hit a glitch",
+      description: "The app's still usable. Reset to reload the chat.",
+      reset: "Reset agent panel",
+      reloading: "Reloading chat…",
+    },
     useBuilder: "Use Builder",
     openDesktopToEditCode: "Open Desktop to edit code",
     codeUnavailableDescription:

package/corpus/templates/design/.generated/bridge/editor-chrome.generated.ts

@@ -8199,7 +8199,7 @@ export const editorChromeBridgeScript: string = `"use strict";
       if (e.data.type === "agent-native:text-edit-status") {
         var textEditStatusCorrelationId = typeof e.data.correlationId === "string" ? e.data.correlationId : "";
         var textEditStatusNodeId = typeof e.data.nodeId === "string" ? e.data.nodeId : "";
-        var textEditStatus = false;
+        var textEditStatus = "missing";
         if (textEditStatusNodeId) {
           var escapedTextEditStatusNodeId = textEditStatusNodeId.replace(/\\\\/g, "\\\\\\\\").replace(/"/g, '\\\\"');
           var textEditStatusNode = document.querySelector(
@@ -8212,6 +8212,8 @@ export const editorChromeBridgeScript: string = `"use strict";
             textEditStatus = "active";
           } else if (textEditStatusNode && (textEditStatusNode.textContent ?? "").trim().length > 0) {
             textEditStatus = "done";
+          } else if (textEditStatusNode) {
+            textEditStatus = false;
           }
         }
         window.parent.postMessage(

package/corpus/templates/design/actions/get-design.ts

@@ -1,6 +1,6 @@
 import { defineAction } from "@agent-native/core";
 import { resolveAccess } from "@agent-native/core/sharing";
-import { eq } from "drizzle-orm";
+import { asc, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
@@ -26,11 +26,19 @@ export default defineAction({
     const row = access.resource;
     const db = getDb();
 
-    // Fetch associated files
+    // Fetch associated files in a stable order. This array feeds the overview
+    // canvas's screen stack and each screen's index within its layout group, so
+    // unordered rows (Postgres returns heap order, which an UPDATE can change)
+    // meant the same design could lay itself out differently on two loads.
+    // Note this is deterministic, not creation-ordered: files written in one
+    // batch share a `createdAt` to the millisecond and fall back to the id
+    // tiebreak. Nothing may depend on the index matching the order a generator
+    // wrote in — see the order-independence case in variant-lineup.test.ts.
     const files = await db
       .select()
       .from(schema.designFiles)
-      .where(eq(schema.designFiles.designId, id));
+      .where(eq(schema.designFiles.designId, id))
+      .orderBy(asc(schema.designFiles.createdAt), asc(schema.designFiles.id));
 
     return {
       id: row.id,

package/corpus/templates/design/actions/present-design-variants.ts

@@ -16,11 +16,16 @@ import { getDb, schema } from "../server/db/index.js";
 import { mutateDesignData } from "../server/lib/design-data-mutation.js";
 import {
   mergeCanvasFramePlacements,
+  nextFreeCanvasRowY,
   type CanvasFramePlacement,
 } from "../shared/canvas-frames.js";
 import { isUniqueConstraintViolation } from "../shared/db-conflict.js";
 import { assertDesignHtmlWellFormed } from "../shared/html-integrity.js";
 import { widthToPrefix } from "../shared/responsive-classes.js";
+import {
+  getResponsiveGroupWidth,
+  visibleBreakpointWidths,
+} from "../shared/responsive-frame-layout.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 const VARIANT_GAP = 96;
@@ -735,10 +740,24 @@ ${compact ? ".sidebar { padding: 16px; } .nav { grid-template-columns: repeat(2,
 </html>`;
 }
 
-function placeVariantScreens(screens: VariantScreen[]) {
+/**
+ * Lays the generated directions out in rows of up to three.
+ *
+ * Each cell reserves the screen's WHOLE painted footprint, not just its
+ * primary frame: this action also installs a design-wide breakpoint set, and
+ * the overview paints one preview per breakpoint to the right of every primary
+ * frame. Spacing by `width + VARIANT_GAP` alone drops the next direction on top
+ * of the previous one's breakpoint row.
+ */
+function placeVariantScreens(
+  screens: VariantScreen[],
+  breakpointWidths: readonly number[],
+  /** Y to start the lineup at, so an additional set clears the existing one. */
+  originY = 0,
+) {
   const placements: CanvasFramePlacement[] = [];
   const columns = Math.min(MAX_COLUMNS, Math.max(1, screens.length));
-  let rowY = 0;
+  let rowY = originY;
 
   for (let rowStart = 0; rowStart < screens.length; rowStart += columns) {
     const row = screens.slice(rowStart, rowStart + columns);
@@ -755,7 +774,17 @@ function placeVariantScreens(screens: VariantScreen[]) {
         height: screen.height,
         z: rowStart + offset,
       });
-      x += screen.width + VARIANT_GAP;
+      x +=
+        getResponsiveGroupWidth({
+          primaryWidth: screen.width,
+          // Frames are placed at their natural device width, so the breakpoint
+          // previews beside them are drawn unscaled.
+          scale: 1,
+          visibleWidths: visibleBreakpointWidths(
+            breakpointWidths,
+            screen.width,
+          ),
+        }) + VARIANT_GAP;
       rowHeight = Math.max(rowHeight, screen.height);
     }
 
@@ -765,6 +794,22 @@ function placeVariantScreens(screens: VariantScreen[]) {
   return placements;
 }
 
+/** Widths the overview will paint beside each primary frame once this call
+ * settles: the design's own set when it has one, otherwise the set this action
+ * is about to install. */
+function effectiveBreakpointWidths(currentBreakpointSet: unknown): number[] {
+  const breakpoints = hasBreakpointSet(currentBreakpointSet)
+    ? ((currentBreakpointSet as { breakpoints: Array<{ widthPx?: unknown }> })
+        .breakpoints ?? [])
+    : DEFAULT_RESPONSIVE_BREAKPOINTS;
+  return breakpoints
+    .map((breakpoint) => breakpoint.widthPx)
+    .filter(
+      (widthPx): widthPx is number =>
+        typeof widthPx === "number" && Number.isFinite(widthPx) && widthPx > 0,
+    );
+}
+
 export default defineAction({
   description:
     "Present generated design directions as normal screens on the Design " +
@@ -933,13 +978,25 @@ export default defineAction({
       });
     }
 
-    const placements = placeVariantScreens(screens);
     await mutateDesignData({
       designId,
       mutate: (current, { updatedAt }) => {
+        // Placement depends on the breakpoint set in effect after this call, so
+        // it is resolved here (inside the compare-and-set body) rather than
+        // against a design snapshot that a concurrent write may have moved on
+        // from.
         const mergedFrames = mergeCanvasFramePlacements({
           existing: current.canvasFrames,
-          placements,
+          placements: placeVariantScreens(
+            screens,
+            effectiveBreakpointWidths(current.breakpointSet),
+            // Start below what is already on the board. The set being written is
+            // excluded so re-running the same set lands where it was instead of
+            // marching further down each time.
+            nextFreeCanvasRowY(current.canvasFrames, VARIANT_GAP, {
+              ignoreFileIds: screens.map((screen) => screen.id),
+            }),
+          ),
           resolveFileId: (placement) => placement.fileId,
         });
         const previousMetadata = isRecord(current.screenMetadata)

package/corpus/templates/design/app/components/design/BreakpointBar.tsx

@@ -26,6 +26,8 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 
+import { FRAME_SIZE_PRESET_CATEGORIES } from "./inspector/frame-size-presets";
+
 /** Framer's default breakpoint widths, offered by the "+" affordance. */
 export const FRAMER_BREAKPOINT_PRESETS: ReadonlyArray<{
   labelKey: "desktop" | "tablet" | "phone";
@@ -45,6 +47,35 @@ export function availableBreakpointPresets(
   );
 }
 
+/**
+ * Device widths offered beyond the three Framer defaults, drawn from the frame
+ * tool's own preset catalog so both surfaces agree on what a "Tablet" is.
+ *
+ * Without these the "+" popover empties out as soon as Desktop/Tablet/Phone are
+ * added — `availableBreakpointPresets` filters by exact width — leaving a bare
+ * number input and no way to pick a real device size. Only width matters for a
+ * breakpoint, so widths are de-duplicated (many devices share one) and the
+ * first device at each width names it. Device names are untranslated product
+ * literals, matching frame-size-presets' documented policy.
+ */
+export function extraBreakpointWidthPresets(
+  existingWidths: readonly number[],
+): Array<{ name: string; widthPx: number }> {
+  const taken = new Set<number>(existingWidths);
+  FRAMER_BREAKPOINT_PRESETS.forEach((preset) => taken.add(preset.widthPx));
+  const seen = new Set<number>();
+  const out: Array<{ name: string; widthPx: number }> = [];
+  for (const category of FRAME_SIZE_PRESET_CATEGORIES) {
+    for (const preset of category.presets) {
+      if (taken.has(preset.width) || seen.has(preset.width)) continue;
+      if (preset.width < 320 || preset.width > 3840) continue;
+      seen.add(preset.width);
+      out.push({ name: preset.name, widthPx: preset.width });
+    }
+  }
+  return out.sort((a, b) => b.widthPx - a.widthPx);
+}
+
 /** Default English label for a preset/custom width (used for add-breakpoint). */
 export function breakpointLabelForWidth(widthPx: number): string {
   if (widthPx >= 1024) return "Desktop";
@@ -128,6 +159,7 @@ export function BreakpointDeviceControl({
   const ordered = [...breakpoints].sort((a, b) => b.widthPx - a.widthPx);
   const existingWidths = ordered.map((bp) => bp.widthPx);
   const presets = availableBreakpointPresets(existingWidths);
+  const devicePresets = extraBreakpointWidthPresets(existingWidths);
   const baseActive = activeWidthPx === undefined;
 
   const submitCustomWidth = () => {
@@ -323,7 +355,38 @@ export function BreakpointDeviceControl({
                   </span>
                 </button>
               ))}
-              {presets.length > 0 ? (
+              {devicePresets.length > 0 ? (
+                <>
+                  {presets.length > 0 ? (
+                    <div className="my-1 h-px bg-border" />
+                  ) : null}
+                  <div className="max-h-48 overflow-y-auto overscroll-contain">
+                    {devicePresets.map((preset) => (
+                      <button
+                        key={preset.widthPx}
+                        type="button"
+                        className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left !text-[12px] hover:bg-muted"
+                        onClick={() => {
+                          onAdd(
+                            preset.widthPx,
+                            breakpointLabelForWidth(preset.widthPx),
+                          );
+                          setAddOpen(false);
+                        }}
+                      >
+                        <span className="flex min-w-0 items-center gap-2">
+                          <DeviceIcon widthPx={preset.widthPx} />
+                          <span className="truncate">{preset.name}</span>
+                        </span>
+                        <span className="shrink-0 tabular-nums text-muted-foreground/60">
+                          {preset.widthPx}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              ) : null}
+              {presets.length > 0 || devicePresets.length > 0 ? (
                 <div className="my-1 h-px bg-border" />
               ) : null}
               <form