@agent-native/core 0.131.2 → 0.131.4

package/corpus/templates/calendar/app/pages/CalendarView.tsx

@@ -86,8 +86,11 @@ import { useViewPreferences } from "@/hooks/use-view-preferences";
 import { resolveEventAccountEmail } from "@/lib/event-account-selection";
 import { getGoogleEventColorHex } from "@/lib/event-colors";
 import {
+  buildEventTitleUpdate,
   dateTimeInTimezoneToIso,
+  getEditableEventTitle,
   getLocalTimezone,
+  UNNAMED_EVENT_TITLE,
 } from "@/lib/event-form-utils";
 import { buildDeleteEventMutationInput } from "@/lib/event-mutation-inputs";
 import { getLocationSuggestions } from "@/lib/location-suggestions";
@@ -204,11 +207,15 @@ function draftToCalendarEvent(
   fallbackDate: Date,
 ): CalendarEvent {
   const { start, end } = draftRange(draft, fallbackDate);
+  const editableTitle = draft.title?.trim() ?? "";
   return {
     id: calendarDraftEventId(draft.id),
     title:
-      draft.title?.trim() ||
-      (draft.eventType === "outOfOffice" ? "Out of office" : "(No title)"),
+      editableTitle ||
+      (draft.eventType === "outOfOffice"
+        ? "Out of office"
+        : UNNAMED_EVENT_TITLE),
+    titleIsGenerated: !editableTitle,
     description: draft.description ?? "",
     start: start.toISOString(),
     end: end.toISOString(),
@@ -650,14 +657,10 @@ export default function CalendarView() {
         setEventDraft(draft);
         persistCalendarDraft(draft);
       }
-      const trimmedTitle = draft.title?.trim();
+      const editableTitle = draft.title?.trim() ?? "";
       const eventType = draft.eventType ?? "default";
       const title =
-        trimmedTitle && trimmedTitle !== "(No title)"
-          ? trimmedTitle
-          : eventType === "outOfOffice"
-            ? "Out of office"
-            : "";
+        editableTitle || (eventType === "outOfOffice" ? "Out of office" : "");
       if (!title && !isSlotDraftId(draftId)) {
         committingDraftIdsRef.current.delete(draftId);
         toast.error(t("calendarView.addTitleBeforeCreate"));
@@ -703,6 +706,7 @@ export default function CalendarView() {
       const payload: Parameters<typeof createEvent.mutate>[0] = {
         _tempId: eventId,
         title,
+        titleIsGenerated: !editableTitle,
         description:
           eventType === "outOfOffice" ? "" : (draft.description ?? ""),
         start: semanticFullDay ? draft.start! : start.toISOString(),
@@ -1359,8 +1363,9 @@ export default function CalendarView() {
   const handleQuickEditSave = useCallback(
     async (eventId: string, title: string, accountEmail?: string) => {
       setQuickEditEventId(null);
+      const trimmedTitle = title.trim();
       if (calendarDraftIdFromEventId(eventId)) {
-        updateDraftEvent(eventId, { title: title.trim() });
+        updateDraftEvent(eventId, { title: trimmedTitle });
         return;
       }
       setQuickEditTempIds((current) => {
@@ -1368,9 +1373,9 @@ export default function CalendarView() {
         const { [eventId]: _removed, ...next } = current;
         return next;
       });
-      if (title.trim() && title.trim() !== "(No title)") {
+      if (trimmedTitle) {
         const event = events.find((e) => e.id === eventId);
-        const updates = { title: title.trim() };
+        const updates = buildEventTitleUpdate(trimmedTitle);
         const guestNotification = event
           ? await promptGuestNotification({
               event,
@@ -1392,12 +1397,14 @@ export default function CalendarView() {
 
   const handleTitleSave = useCallback(
     async (eventId: string, title: string, accountEmail?: string) => {
+      const trimmedTitle = title.trim();
+      if (!trimmedTitle) return;
       if (calendarDraftIdFromEventId(eventId)) {
-        updateDraftEvent(eventId, { title });
+        updateDraftEvent(eventId, { title: trimmedTitle });
         return;
       }
       const event = events.find((e) => e.id === eventId);
-      const updates = { title };
+      const updates = buildEventTitleUpdate(trimmedTitle);
       const guestNotification = event
         ? await promptGuestNotification({
             event,
@@ -1430,7 +1437,7 @@ export default function CalendarView() {
       });
       // Delete the event if title was never set
       const ev = events.find((e) => e.id === eventId);
-      if (!ev || ev.title === "(No title)") {
+      if (!ev || !getEditableEventTitle(ev).trim()) {
         deleteEvent.mutate(
           buildDeleteEventMutationInput(
             {

package/corpus/templates/calendar/changelog/2026-07-29-unnamed-events-now-use-a-title-placeholder.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-29
+---
+
+Unnamed events now show an empty title field with an “Add title” placeholder when you edit them.

package/corpus/templates/calendar/server/lib/google-calendar.ts

@@ -881,6 +881,7 @@ export async function listEvents(
           return {
             id: `google-${event.id}`,
             title: event.summary || "Untitled",
+            titleIsGenerated: !event.summary,
             description: event.description || "",
             start: event.start?.dateTime || event.start?.date || "",
             end: event.end?.dateTime || event.end?.date || "",
@@ -1153,6 +1154,7 @@ export async function getEvent(
   return {
     id: `google-${event.id}`,
     title: event.summary || "Untitled",
+    titleIsGenerated: !event.summary,
     description: event.description || "",
     start: event.start?.dateTime || event.start?.date || "",
     end: event.end?.dateTime || event.end?.date || "",

package/corpus/templates/calendar/server/lib/ical-fetcher.ts

@@ -327,6 +327,7 @@ export async function fetchICalEvents(
     .map((e) => ({
       id: `ical-${feedId}-${e.uid}`,
       title: e.summary || "(No title)",
+      titleIsGenerated: !e.summary,
       description: e.description || "",
       start: e.start,
       end: e.end,

package/corpus/templates/calendar/shared/api.ts

@@ -1,6 +1,8 @@
 export interface CalendarEvent {
   id: string;
   title: string;
+  /** Client-facing provenance for a display label synthesized from an absent title. */
+  titleIsGenerated?: boolean;
   description: string;
   start: string; // ISO 8601
   end: string; // ISO 8601

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