@agent-native/core 0.132.2 → 0.133.0

package/corpus/templates/slides/app/components/editor/EditorSidebar.tsx

@@ -1,4 +1,7 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
+import {
+  agentNativePath,
+  appBasePath,
+} from "@agent-native/core/client/api-path";
 import {
   type AttributedRecentEdit,
   type CollabUser,
@@ -13,6 +16,8 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
+import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
 import {
   IconPlus,
   IconGripVertical,
@@ -27,6 +32,7 @@ import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
+import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
 import { GoogleDocImportHint } from "@/components/editor/GoogleDocImportHint";
 import {
   isInsidePortaledLayer,
@@ -41,6 +47,7 @@ import type { Slide } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { addSlideAgentMessage } from "@/lib/agent-visible-message";
 import type { AspectRatio } from "@/lib/aspect-ratios";
+import { TAB_ID } from "@/lib/tab-id";
 
 interface EditorSidebarProps {
   slides: Slide[];
@@ -61,6 +68,11 @@ interface EditorSidebarProps {
   aspectRatio?: AspectRatio;
 }
 
+const DECK_FIT_STATE_KEYS = [
+  appStateKeyForBrowserTab("deck-fit-checks", TAB_ID),
+  "deck-fit-checks",
+];
+
 /** Extract the slide id from a `{kind:"paths",paths:["slides.<id>"]}` edit. */
 function slideIdFromEdit(edit: AttributedRecentEdit): string | null {
   const d = edit.descriptor;
@@ -183,6 +195,7 @@ function SortableSlideThumb({
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
+  onOverflowChange,
   readOnly = false,
 }: {
   slide: Slide;
@@ -195,6 +208,7 @@ function SortableSlideThumb({
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
   aspectRatio?: AspectRatio;
+  onOverflowChange: (info: SlideOverflowInfo) => void;
 }) {
   const t = useT();
   const {
@@ -267,7 +281,11 @@ function SortableSlideThumb({
                   : "rgba(255,255,255,0.06)",
             }}
           >
-            <SlideRenderer slide={slide} aspectRatio={aspectRatio} />
+            <SlideRenderer
+              slide={slide}
+              aspectRatio={aspectRatio}
+              onOverflowChange={onOverflowChange}
+            />
           </div>
         </div>
       </button>
@@ -567,6 +585,85 @@ export default function EditorSidebar({
   const headerAddRef = useRef<HTMLButtonElement>(null);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const thumbScrollRef = useRef<HTMLDivElement>(null);
+  const measurementsRef = useRef(
+    new Map<
+      string,
+      { contentHash: string; info: SlideOverflowInfo; measuredAt: number }
+    >(),
+  );
+  const writeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const writeDeckFitState = useCallback(() => {
+    const currentSlideIds = new Set(slides.map((slide) => slide.id));
+    const measuredSlides = Object.fromEntries(
+      Array.from(measurementsRef.current.entries())
+        .filter(([slideId]) => currentSlideIds.has(slideId))
+        .map(([slideId, measurement]) => [
+          slideId,
+          {
+            contentHash: measurement.contentHash,
+            contentHeight: measurement.info.contentHeight,
+            contentWidth: measurement.info.contentWidth,
+            viewportHeight: measurement.info.viewportHeight,
+            viewportWidth: measurement.info.viewportWidth,
+            verticalOverflow: measurement.info.verticalOverflow,
+            horizontalOverflow: measurement.info.horizontalOverflow,
+            measuredAt: measurement.measuredAt,
+          },
+        ]),
+    );
+    const payload: DeckFitState = {
+      deckId,
+      aspectRatio: aspectRatio ?? "16:9",
+      slides: measuredSlides,
+    };
+    const body = JSON.stringify(payload);
+    for (const key of DECK_FIT_STATE_KEYS) {
+      fetch(agentNativePath(`/_agent-native/application-state/${key}`), {
+        method: "PUT",
+        keepalive: true,
+        headers: {
+          "Content-Type": "application/json",
+          "X-Request-Source": TAB_ID,
+        },
+        body,
+      }).catch(() => {});
+    }
+  }, [aspectRatio, deckId, slides]);
+
+  const handleSlideOverflowChange = useCallback(
+    (slide: Slide, info: SlideOverflowInfo) => {
+      const contentHash = hashSlideContent(slide.content);
+      measurementsRef.current.set(slide.id, {
+        contentHash,
+        info,
+        measuredAt: Date.now(),
+      });
+      if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
+      writeTimerRef.current = setTimeout(() => {
+        writeTimerRef.current = null;
+        writeDeckFitState();
+      }, 0);
+    },
+    [writeDeckFitState],
+  );
+
+  useEffect(() => {
+    measurementsRef.current.clear();
+  }, [deckId, aspectRatio]);
+
+  useEffect(() => {
+    return () => {
+      if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
+      for (const key of DECK_FIT_STATE_KEYS) {
+        fetch(agentNativePath(`/_agent-native/application-state/${key}`), {
+          method: "DELETE",
+          keepalive: true,
+          headers: { "X-Request-Source": TAB_ID },
+        }).catch(() => {});
+      }
+    };
+  }, []);
 
   // Resolve a recent-edit descriptor (`slides.<id>`) to the on-screen rect of
   // that slide's thumbnail button, relative to the scroll container, so the
@@ -682,6 +779,9 @@ export default function EditorSidebar({
               registerButtonRef={registerSlideButton}
               presenceUsers={slidePresence?.get(slide.id) ?? []}
               aspectRatio={aspectRatio}
+              onOverflowChange={(info) =>
+                handleSlideOverflowChange(slide, info)
+              }
             />
           ))}
         </SortableContext>

package/corpus/templates/slides/app/components/editor/PromptDialog.tsx

@@ -200,10 +200,22 @@ export default function PromptPopover({
         className="fixed z-[200] w-[min(420px,calc(100vw-24px))] rounded-xl border border-border bg-popover shadow-2xl shadow-black/60"
         style={{ top: 0, left: 0, visibility: "visible" }}
       >
-        <div className="px-3.5 pt-3 pb-2">
+        <div className="flex items-center justify-between gap-3 px-3.5 pt-3 pb-2">
           <span className="text-sm font-medium text-foreground/90">
             {title}
           </span>
+          {onSkip && (
+            <button
+              type="button"
+              onClick={() => {
+                onSkip();
+                onOpenChange(false);
+              }}
+              className="shrink-0 cursor-pointer text-xs text-primary hover:text-primary/80"
+            >
+              {skipLabel}
+            </button>
+          )}
         </div>
 
         <div className="px-2 pb-2">
@@ -226,21 +238,6 @@ export default function PromptPopover({
           promptText={promptText}
           onSourceContextChange={setGoogleDocContext}
         />
-
-        {onSkip && (
-          <div className="flex justify-end border-t border-border px-3.5 py-2">
-            <button
-              type="button"
-              onClick={() => {
-                onSkip();
-                onOpenChange(false);
-              }}
-              className="cursor-pointer text-xs text-[#609FF8] hover:text-[#7AB2FA]"
-            >
-              {skipLabel}
-            </button>
-          </div>
-        )}
       </div>
     </>
   );

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -1,5 +1,5 @@
 import { agentChat } from "@agent-native/core";
-import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
+import { sendToAgentChatAndConfirm } from "@agent-native/core/client/agent-chat";
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import {
   type AttributedRecentEdit,
@@ -16,6 +16,7 @@ import {
   RecentEditHighlights,
 } from "@agent-native/toolkit/collab-ui";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
+import { hashSlideContent } from "@shared/slide-fit";
 import { IconMaximize, IconZoomIn, IconZoomOut } from "@tabler/icons-react";
 import {
   useState,
@@ -983,9 +984,13 @@ function syncOverflowToAppState(
   payload: {
     slideId: string;
     deckId?: string;
+    contentHash: string;
     contentHeight: number;
+    contentWidth: number;
     viewportHeight: number;
+    viewportWidth: number;
     verticalOverflow: number;
+    horizontalOverflow: number;
   } | null,
 ) {
   const keys = Array.from(
@@ -1159,7 +1164,7 @@ export default function SlideEditor({
     w: number;
     h: number;
   } | null>(null);
-  /** Vertical overflow for the current slide (0 = fits). Reported by the
+  /** Content overflow for the current slide (both axes 0 = fits). Reported by the
    *  renderer so we can prompt the agent to rewrite the slide HTML instead of
    *  silently scaling it down (which created unbalanced right/bottom margins
    *  on slides whose content was too tall for the canvas). */
@@ -1167,6 +1172,9 @@ export default function SlideEditor({
     null,
   );
   const [isAskingAgentToFix, setIsAskingAgentToFix] = useState(false);
+  const repairRequestTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
   const [isOverflowWarningDismissed, setIsOverflowWarningDismissed] =
     useState(false);
   const dims = getAspectRatioDims(aspectRatio);
@@ -1285,6 +1293,10 @@ export default function SlideEditor({
   // Reset overflow state whenever the slide changes — the renderer will
   // report the next measurement (or stay null if the new slide fits).
   useEffect(() => {
+    if (repairRequestTimerRef.current) {
+      clearTimeout(repairRequestTimerRef.current);
+      repairRequestTimerRef.current = null;
+    }
     setOverflowInfo(null);
     setIsAskingAgentToFix(false);
     setIsOverflowWarningDismissed(false);
@@ -1295,19 +1307,27 @@ export default function SlideEditor({
   // measurement never leaks into a different deck/slide context.
   useEffect(() => {
     return () => {
+      if (repairRequestTimerRef.current) {
+        clearTimeout(repairRequestTimerRef.current);
+        repairRequestTimerRef.current = null;
+      }
       syncOverflowToAppState(null);
     };
   }, []);
 
   const handleOverflowChange = useCallback(
     (info: SlideOverflowInfo) => {
-      const overflowing = info.verticalOverflow > 0 ? info : null;
+      const overflowing =
+        info.verticalOverflow > 0 || info.horizontalOverflow > 0 ? info : null;
       // Dedup the React state update — the renderer fires on every
       // measurement (so the action can confirm freshness via the app-state
       // `measuredAt` timestamp), but most measurements report the same
       // value and shouldn't churn the badge UI.
       setOverflowInfo((prev) => {
-        if (prev?.verticalOverflow === overflowing?.verticalOverflow) {
+        if (
+          prev?.verticalOverflow === overflowing?.verticalOverflow &&
+          prev?.horizontalOverflow === overflowing?.horizontalOverflow
+        ) {
           return prev;
         }
         return overflowing;
@@ -1318,16 +1338,26 @@ export default function SlideEditor({
       syncOverflowToAppState({
         slideId: slide.id,
         deckId,
+        contentHash: hashSlideContent(slide.content),
         contentHeight: info.contentHeight,
+        contentWidth: info.contentWidth,
         viewportHeight: info.viewportHeight,
+        viewportWidth: info.viewportWidth,
         verticalOverflow: info.verticalOverflow,
+        horizontalOverflow: info.horizontalOverflow,
       });
     },
     [slide.id, deckId],
   );
 
   const handleAskAgentToFixLayout = useCallback(() => {
-    if (!overflowInfo || overflowInfo.verticalOverflow <= 0) return;
+    if (
+      !overflowInfo ||
+      (overflowInfo.verticalOverflow <= 0 &&
+        overflowInfo.horizontalOverflow <= 0)
+    ) {
+      return;
+    }
     const slideHeading = (() => {
       if (typeof document === "undefined") return null;
       const main = document.querySelector("[data-main-slide-canvas]");
@@ -1337,27 +1367,44 @@ export default function SlideEditor({
     const dimsW = dims.width;
     const dimsH = dims.height;
     setIsAskingAgentToFix(true);
-    sendToAgentChat({
+    if (repairRequestTimerRef.current) {
+      clearTimeout(repairRequestTimerRef.current);
+    }
+    // Delivery only proves that the prompt reached chat, not that an action
+    // changed this slide. Release the control after one bounded repair window
+    // so a stalled or no-op agent run cannot strand the warning UI.
+    repairRequestTimerRef.current = setTimeout(() => {
+      repairRequestTimerRef.current = null;
+      setIsAskingAgentToFix(false);
+    }, 30_000);
+    void sendToAgentChatAndConfirm({
       message: [
-        `The current slide's content vertically overflows the canvas by ${overflowInfo.verticalOverflow}px and needs to be rewritten to fit.`,
+        `The current slide's content overflows the canvas${overflowInfo.verticalOverflow > 0 ? ` vertically by ${overflowInfo.verticalOverflow}px` : ""}${overflowInfo.horizontalOverflow > 0 ? ` horizontally by ${overflowInfo.horizontalOverflow}px` : ""} and needs to be rewritten to fit.`,
         ``,
         `Slide id: \`${slide.id}\``,
         slideHeading ? `Slide heading: "${slideHeading}"` : null,
-        `Canvas size: ${dimsW}x${dimsH}px (16:9 native render).`,
-        `Available content area inside the slide's padding: ${overflowInfo.viewportHeight}px tall.`,
-        `Natural rendered content height: ${overflowInfo.contentHeight}px → overflows by ${overflowInfo.verticalOverflow}px.`,
+        `Canvas size: ${dimsW}x${dimsH}px (native render).`,
+        `Available content area inside the slide's padding: ${overflowInfo.viewportWidth}x${overflowInfo.viewportHeight}px.`,
+        `Natural rendered content: ${overflowInfo.contentWidth}x${overflowInfo.contentHeight}px inside a ${overflowInfo.viewportWidth}x${overflowInfo.viewportHeight}px content area.`,
         ``,
-        `Please use \`view-screen\` to read the current slide HTML, then \`update-slide --fullContent\` to rewrite the slide so its rendered height is at most ${overflowInfo.viewportHeight}px. Options to shrink the layout, in order of preference:`,
+        `Please use \`view-screen\` to read the current slide HTML, then make one bounded \`update-slide --fullContent\` repair so its rendered content fits within ${overflowInfo.viewportWidth}x${overflowInfo.viewportHeight}px. Options to shrink the layout, in order of preference:`,
         `1. Tighten copy — shorten headings/body, drop low-value bullets, replace prose with terse phrases.`,
         `2. Reduce vertical density — fewer stacked cards, smaller gaps, smaller body font (don't go below 16px), shorter labels.`,
         `3. Reduce slide padding (e.g. 40px top/bottom instead of 60-80px) if the layout is genuinely tight.`,
         `4. If the content really can't be compressed without losing meaning, split it across two slides.`,
         ``,
-        `Do NOT solve this by adding \`transform: scale()\` or \`overflow: scroll\`. Preserve existing manually positioned absolute objects, including text boxes; rewrite only the overflowing flow layout so the HTML itself fits ${dimsW}x${dimsH}.`,
+        `Do NOT solve this by adding zoom, \`transform: scale()\`, clipping, or \`overflow: scroll\`. Preserve existing manually positioned absolute objects, including text boxes; rewrite only the overflowing flow layout so the HTML itself fits ${dimsW}x${dimsH}. After the write, verify the result with \`view-screen\`; do not repeat repairs in a loop.`,
       ]
         .filter(Boolean)
         .join("\n"),
       submit: true,
+      chatTarget: "local",
+    }).then((delivery) => {
+      if (!delivery.delivered) {
+        // A missing or delayed chat handoff must not leave the only repair
+        // control permanently disabled with no visible mutation to wait for.
+        setIsAskingAgentToFix(false);
+      }
     });
   }, [overflowInfo, slide.id, dims.width, dims.height]);
   /** Marquee origin (viewport coords). Set on pointerdown. */
@@ -4134,6 +4181,7 @@ export default function SlideEditor({
                         !isOverflowWarningDismissed && (
                           <SlideOverflowWarning
                             verticalOverflow={overflowInfo.verticalOverflow}
+                            horizontalOverflow={overflowInfo.horizontalOverflow}
                             isAskingAgentToFix={isAskingAgentToFix}
                             dismissLabel={t("deckEditor.dismissLayoutWarning")}
                             onFix={handleAskAgentToFixLayout}

package/corpus/templates/slides/app/components/editor/SlideOverflowWarning.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 
 interface SlideOverflowWarningProps {
   verticalOverflow: number;
+  horizontalOverflow?: number;
   isAskingAgentToFix: boolean;
   dismissLabel: string;
   onFix: () => void;
@@ -12,11 +13,20 @@ interface SlideOverflowWarningProps {
 
 export function SlideOverflowWarning({
   verticalOverflow,
+  horizontalOverflow = 0,
   isAskingAgentToFix,
   dismissLabel,
   onFix,
   onDismiss,
 }: SlideOverflowWarningProps) {
+  const overflowLabel = [
+    verticalOverflow > 0 ? `vertical ${verticalOverflow}px` : "",
+    horizontalOverflow > 0 ? `horizontal ${horizontalOverflow}px` : "",
+  ]
+    .filter(Boolean)
+    .join(", ");
+  const visibleOverflowLabel =
+    horizontalOverflow > 0 ? overflowLabel : `${verticalOverflow}px`;
   return (
     <div
       role="status"
@@ -27,7 +37,7 @@ export function SlideOverflowWarning({
     >
       <IconAlertTriangle className="h-3.5 w-3.5 flex-shrink-0" stroke={2} />
       <span className="leading-tight">
-        Layout overflows by {verticalOverflow}px
+        Layout overflows by {visibleOverflowLabel}
       </span>
       <Button
         size="sm"

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -99,9 +99,72 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
     />
   );
 
+  const brand = (
+    <div
+      className={cn(
+        "flex items-center gap-2",
+        collapsed ? "size-8 justify-center" : "min-w-0 flex-1",
+      )}
+    >
+      <img
+        src={appPath("/agent-native-icon-light.svg")}
+        alt=""
+        aria-hidden="true"
+        width={28}
+        height={16}
+        className="block h-4 w-7 shrink-0 object-contain object-center dark:hidden"
+      />
+      <img
+        src={appPath("/agent-native-icon-dark.svg")}
+        alt=""
+        aria-hidden="true"
+        width={28}
+        height={16}
+        className="hidden h-4 w-7 shrink-0 object-contain object-center dark:block"
+      />
+      {!collapsed && (
+        <span className="truncate text-sm font-semibold tracking-tight">
+          {t("navigation.brand")}
+        </span>
+      )}
+    </div>
+  );
+  const brandControl = onToggleCollapsed ? (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onToggleCollapsed}
+          aria-label={
+            collapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+          className={cn(
+            "flex min-w-0 items-center rounded-md text-foreground outline-none transition-colors hover:bg-sidebar-accent/50 focus-visible:ring-2 focus-visible:ring-ring",
+            collapsed
+              ? "size-8 justify-center"
+              : "w-full gap-2 px-1 py-1 text-start",
+          )}
+          data-sidebar-brand-toggle
+        >
+          {brand}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    brand
+  );
+
   if (collapsed) {
     return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground transition-[width] duration-200 ease-out">
+      <aside className="flex h-full w-12 shrink-0 flex-col items-center overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
+        <div className="flex h-12 w-full shrink-0 items-center justify-center border-b border-border">
+          {brandControl}
+        </div>
         <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto pt-1">
           {navItems.map((item) => {
             const Icon = item.icon;
@@ -162,24 +225,8 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
   return (
     <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
-      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
-        <div className="flex items-center gap-2">
-          <img
-            src={appPath("/agent-native-icon-light.svg")}
-            alt=""
-            aria-hidden="true"
-            className="block h-4 w-auto dark:hidden"
-          />
-          <img
-            src={appPath("/agent-native-icon-dark.svg")}
-            alt=""
-            aria-hidden="true"
-            className="hidden h-4 w-auto dark:block"
-          />
-          <span className="text-sm font-semibold tracking-tight">
-            {t("navigation.brand")}
-          </span>
-        </div>
+      <div className="flex h-12 shrink-0 items-center border-b border-border px-4">
+        {brandControl}
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -548,6 +548,10 @@ const messages = {
     figFileTooLarge: "File too large (max {{maxSize}}).",
     figParseFailed: "Could not start Builder indexing for that Figma file.",
     updated: "Design system updated",
+    otherSources: "Other",
+    otherSourcesDescription:
+      "Connect from a website, code, files, or an existing design system.",
+    chooseSourcePrompt: "Choose one source to configure",
     updateFailed: "Failed to update",
     generationStarted: "Design system generation started",
     generationStartedDescription:
@@ -589,6 +593,25 @@ const messages = {
       "e.g. Always open with a single-stat title slide. Never use bullet lists longer than 3 items. Keep slide titles under 6 words...",
     customInstructionsDescription:
       "Saved with the design system. Re-applied every time the agent uses it to generate slides.",
+    sourceLabel: "Source",
+    sourceFigma: "Figma file",
+    sourceCode: "Code files",
+    sourceGitHub: "GitHub repository",
+    sourceMixed: "Multiple sources",
+    sourceBuilder: "Builder Design System Intelligence",
+    sourceIndexing: "Indexing in progress",
+    sourceIndexed: "Indexed",
+    sourceUnavailable: "Results unavailable",
+    sourceIndexingDescription:
+      "Builder is still processing this source. Results will appear here as they are ready.",
+    sourceIndexedDescription: "{{docs}} docs · {{tokens}} tokens indexed",
+    sourceIndexedDocsOnly: "{{docs}} docs indexed",
+    sourceIndexedTokensOnly: "{{tokens}} tokens indexed",
+    sourceUnavailableDescription:
+      "Builder could not load the latest source results.",
+    sourceOpenInBuilder: "Open in Builder",
+    loading: "Loading design system",
+    loadFailed: "We couldn't load this design system. Close and try again.",
     cancel: "Cancel",
     saving: "Saving...",
     saveChanges: "Save Changes",

package/corpus/templates/slides/app/lib/normalize-slide-padding.ts

@@ -1,10 +1,9 @@
 /**
- * Force the canonical `padding: 80px 110px` on the outer `.fmd-slide` wrapper
- * when the agent supplies slide HTML. Models drift on numeric values during
- * regeneration — most often dropping the second padding arg, which collapses
- * horizontal padding from 110px to 80px and looks like the right margin
- * shrunk. AGENTS.md treats `80px 110px` as canonical for every layout, so we
- * normalize server-side rather than trusting the model's output.
+ * Ensure the outer `.fmd-slide` wrapper has a padding declaration.
+ *
+ * Explicit padding is part of the slide layout, so preserve it. In particular,
+ * an overflow repair often needs to reduce vertical padding; rewriting that
+ * value here makes a successful-looking agent edit a no-op in the renderer.
  */
 export function normalizeSlidePadding(html: string): string {
   if (!html.includes('class="fmd-slide"')) return html;
@@ -13,15 +12,9 @@ export function normalizeSlidePadding(html: string): string {
     /(<div\b[^>]*\bclass="fmd-slide"[^>]*\bstyle=")([^"]*)(")/,
     (_match, before, style, after) => {
       const hasPadding = /(?:^|;)\s*padding\s*:/i.test(style);
-      let nextStyle: string;
-      if (hasPadding) {
-        nextStyle = style.replace(
-          /(^|;)\s*padding\s*:\s*[^;]*/i,
-          `$1${style.startsWith("padding") ? "" : " "}padding: 80px 110px`,
-        );
-      } else {
-        nextStyle = `padding: 80px 110px;${style.startsWith(" ") ? "" : " "}${style}`;
-      }
+      const nextStyle = hasPadding
+        ? style
+        : `padding: 80px 110px;${style.startsWith(" ") ? "" : " "}${style}`;
       return `${before}${nextStyle}${after}`;
     },
   );

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -52,7 +52,7 @@ import {
   useSlideComments,
   type CommentThread,
 } from "@/hooks/use-slide-comments";
-import type { AspectRatio } from "@/lib/aspect-ratios";
+import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import {
   deckAccessCheckKey,
   shouldShowDeckEditorSkeleton,
@@ -254,6 +254,7 @@ export default function DeckEditor() {
   }, []);
 
   const deck = getDeck(id || "");
+  const fitDims = getAspectRatioDims(deck?.aspectRatio);
   const currentDeckAccessKey = deckAccessCheckKey(id, org?.orgId);
   const hasTeamJoinOption =
     !org?.orgId &&
@@ -297,12 +298,12 @@ export default function DeckEditor() {
         "Answers:",
         formattedAnswers,
         "",
-        "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels). Keep each slide within the density limits in AGENTS.md; split dense source material across more slides instead of packing it tightly.",
+        `Every slide is rendered into a fixed native canvas (${fitDims.width}x${fitDims.height} CSS pixels; standard padding leaves ${Math.max(0, fitDims.width - 220)}x${Math.max(0, fitDims.height - 160)}px for main content). Keep the main content within that fit budget; split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px.`,
         "",
         `Now generate the slides based on these preferences. Start a manage-progress run, add the first slide as soon as it is ready, then continue one slide at a time so the editor visibly fills in. Use add-slide with --deckId=${id} to add slides sequentially. Wait for each add-slide result before calling it again.`,
       ].join("\n"),
     buildSkipContext: () =>
-      `The user skipped the pre-generation questions for deck ${id}. Proceed with reasonable defaults. Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels); keep each slide within the density limits in AGENTS.md and split dense source material across more slides instead of packing it tightly. Start a manage-progress run, add the first slide as soon as it is ready, then continue sequentially using add-slide with --deckId=${id}. Wait for each add-slide result before calling it again.`,
+      `The user skipped the pre-generation questions for deck ${id}. Proceed with reasonable defaults. Every slide is rendered into a fixed native canvas (${fitDims.width}x${fitDims.height} CSS pixels; standard padding leaves ${Math.max(0, fitDims.width - 220)}x${Math.max(0, fitDims.height - 160)}px for main content); keep each slide within that fit budget and split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px. Start a manage-progress run, add the first slide as soon as it is ready, then continue sequentially using add-slide with --deckId=${id}. Wait for each add-slide result before calling it again.`,
   });
 
   const showQuestionFlow = Boolean(questionFlowQuestions?.length);

package/corpus/templates/slides/app/pages/DesignSystems.tsx

@@ -53,9 +53,9 @@ export default function DesignSystems() {
     setShowSetup(true);
   };
 
-  const handleSetDefault = async (id: string) => {
+  const handleSetDefault = async (id: string, isDefault: boolean) => {
     try {
-      await callAction("set-default-design-system", { id });
+      await callAction("set-default-design-system", { id, isDefault });
       refetch();
     } catch (err) {
       console.error("Failed to set default design system:", err);
@@ -264,9 +264,10 @@ export default function DesignSystems() {
                     data={parsed}
                     isDefault={ds.isDefault}
                     visibility={ds.visibility}
+                    accessRole={ds.accessRole}
                     canManage={ds.canManage}
                     onClick={() => handleCardClick(ds.id)}
-                    onSetDefault={() => handleSetDefault(ds.id)}
+                    onSetDefault={() => handleSetDefault(ds.id, !ds.isDefault)}
                     onDelete={() => setDeleteId(ds.id)}
                     isWorkspaceDefault={workspaceDesignSystem?.id === ds.id}
                     canSetWorkspaceDefault={canManageWorkspaceDefaults}