@agent-native/core 0.95.0 → 0.95.1

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

@@ -33,6 +33,7 @@ import {
   updateGenerationSessionWithSavedFiles,
 } from "../shared/generation-session.js";
 import { assertLockedLayersPreserved } from "../shared/locked-layers.js";
+import { widthToPrefix } from "../shared/responsive-classes.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 /** Editor deep link so external agents can surface "Open design". */
@@ -54,6 +55,43 @@ function isRenderableDesignFile(file: {
   );
 }
 
+type GenerationViewport = "mobile" | "tablet" | "desktop";
+
+const DEFAULT_GENERATION_VIEWPORT: GenerationViewport = "desktop";
+const GENERATION_VIEWPORT_SIZES: Record<
+  GenerationViewport,
+  { width: number; height: number }
+> = {
+  mobile: { width: 390, height: 844 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1440, height: 1024 },
+};
+const GENERATED_FRAME_GAP = 96;
+const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
+  id: `generated-${widthPx}`,
+  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
+  widthPx,
+  prefix: widthToPrefix(widthPx),
+}));
+
+function hasBreakpointSet(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  const breakpoints = (value as { breakpoints?: unknown }).breakpoints;
+  return Array.isArray(breakpoints) && breakpoints.length > 0;
+}
+
+function nextGeneratedFrameX(
+  frames: ReturnType<typeof parseCanvasFrameGeometryById>,
+): number {
+  return Object.values(frames).reduce((furthestRight, frame) => {
+    const x = frame.x ?? 0;
+    const width = frame.width ?? 0;
+    return Math.max(furthestRight, x + width + GENERATED_FRAME_GAP);
+  }, 0);
+}
+
 function jsonValuesEqual(left: unknown, right: unknown): boolean {
   return JSON.stringify(left) === JSON.stringify(right);
 }
@@ -149,7 +187,15 @@ const generateDesignAgentParameters = {
     canvasFrames: {
       type: "string",
       description:
-        "Optional JSON array of overview-canvas placements keyed by filename or fileId.",
+        "Optional JSON array of overview-canvas placements keyed by filename or fileId. " +
+        "Pass explicit x/y/width/height for every generated screen; desktop is 1440x1024.",
+    },
+    primaryViewport: {
+      type: "string",
+      enum: ["mobile", "tablet", "desktop"],
+      description:
+        "The requested primary form factor. Defaults to desktop (1440x1024). " +
+        "Set this from the intake answer when no explicit canvasFrames placement is supplied.",
     },
   },
   required: ["designId", "prompt", "files"],
@@ -171,6 +217,9 @@ const generateDesignAction = defineAction({
     "When `designSystemId` is provided, first use `get-design-system` and apply " +
     "its `agentContext` tokens/docs before writing the file content; do not " +
     "treat the id alone as enough design-system context. " +
+    "Every web design must be responsive. Use a desktop 1440x1024 primary " +
+    "canvas by default, or set `primaryViewport` for an explicitly mobile- or " +
+    "tablet-primary design; this action adds responsive editor breakpoints. " +
     "Do not report a design as ready until this action succeeds. " +
     "When adding multiple screens or states, pass canvasFrames with filenames " +
     "and x/y/width/height so the new screens appear placed on the overview canvas.",
@@ -304,6 +353,14 @@ const generateDesignAction = defineAction({
           "Reference each screen by filename or fileId and include x/y/width/height " +
           "from generate-screens regions or your planned canvas layout.",
       ),
+    primaryViewport: z
+      .enum(["mobile", "tablet", "desktop"])
+      .optional()
+      .default(DEFAULT_GENERATION_VIEWPORT)
+      .describe(
+        "Primary generated viewport. Defaults to desktop (1440x1024); set " +
+          "mobile or tablet only when that is the requested form factor.",
+      ),
   }),
   mcpApp: {
     compactCatalog: true,
@@ -323,6 +380,7 @@ const generateDesignAction = defineAction({
     projectType,
     tweaks,
     canvasFrames,
+    primaryViewport,
   }) => {
     await assertAccess("design", designId, "editor");
     if (designSystemId) {
@@ -515,7 +573,7 @@ const generateDesignAction = defineAction({
     }));
     await mutateDesignData({
       designId,
-      mutate: (prevData) => {
+      mutate: (prevData, { updatedAt }) => {
         const mergedData: Record<string, unknown> = {
           ...prevData,
           lastPrompt: prompt,
@@ -525,34 +583,74 @@ const generateDesignAction = defineAction({
         if (normalizedTweaks !== undefined) {
           mergedData.tweaks = normalizedTweaks;
         }
-        if (canvasFrames !== undefined) {
-          const savedByFileId = new Map(
-            savedFiles.map((file) => [file.id, file]),
-          );
-          const savedByFilename = new Map(
-            savedFiles.map((file) => [file.filename, file]),
-          );
-          const existingByFileId = new Map(
-            existingFiles.map((file) => [file.id, file]),
-          );
-          const merged = mergeCanvasFramePlacements({
-            existing: prevData.canvasFrames,
-            placements: canvasFrames,
-            resolveFileId: (placement) => {
-              if (placement.fileId) {
-                return savedByFileId.has(placement.fileId) ||
-                  existingByFileId.has(placement.fileId)
-                  ? placement.fileId
-                  : undefined;
-              }
-              return placement.filename
-                ? (savedByFilename.get(placement.filename)?.id ??
-                    existingByName.get(placement.filename)?.id)
+        const savedByFileId = new Map(
+          savedFiles.map((file) => [file.id, file]),
+        );
+        const savedByFilename = new Map(
+          savedFiles.map((file) => [file.filename, file]),
+        );
+        const existingByFileId = new Map(
+          existingFiles.map((file) => [file.id, file]),
+        );
+        const merged = mergeCanvasFramePlacements({
+          existing: prevData.canvasFrames,
+          placements: canvasFrames ?? [],
+          resolveFileId: (placement) => {
+            if (placement.fileId) {
+              return savedByFileId.has(placement.fileId) ||
+                existingByFileId.has(placement.fileId)
+                ? placement.fileId
                 : undefined;
-            },
+            }
+            return placement.filename
+              ? (savedByFilename.get(placement.filename)?.id ??
+                  existingByName.get(placement.filename)?.id)
+              : undefined;
+          },
+        });
+        const viewport = GENERATION_VIEWPORT_SIZES[primaryViewport];
+        let nextX = nextGeneratedFrameX(merged.canvasFrames);
+        const generationFrames = [...merged.placedFrames];
+        for (const file of savedFiles) {
+          const source = files.find(
+            (candidate) => candidate.filename === file.filename,
+          );
+          if (!source || !isRenderableDesignFile(source)) continue;
+          const current = merged.canvasFrames[file.id] ?? {};
+          if (
+            current.x !== undefined &&
+            current.y !== undefined &&
+            current.width !== undefined &&
+            current.height !== undefined
+          ) {
+            continue;
+          }
+          const frame = {
+            x: current.x ?? nextX,
+            y: current.y ?? 0,
+            width: current.width ?? viewport.width,
+            height: current.height ?? viewport.height,
+            z: current.z ?? generationFrames.length,
+            ...(current.rotation === undefined
+              ? {}
+              : { rotation: current.rotation }),
+          };
+          merged.canvasFrames[file.id] = frame;
+          generationFrames.push({
+            fileId: file.id,
+            filename: file.filename,
+            frame,
           });
-          mergedData.canvasFrames = merged.canvasFrames;
-          placedFrames = merged.placedFrames;
+          nextX = frame.x + frame.width + GENERATED_FRAME_GAP;
+        }
+        mergedData.canvasFrames = merged.canvasFrames;
+        placedFrames = generationFrames;
+        if (!hasBreakpointSet(mergedData.breakpointSet)) {
+          mergedData.breakpointSet = {
+            id: "generated-responsive",
+            breakpoints: DEFAULT_RESPONSIVE_BREAKPOINTS,
+          };
+          mergedData.breakpointSetUpdatedAt = updatedAt;
         }
         return mergedData;
       },
@@ -566,12 +664,10 @@ const generateDesignAction = defineAction({
         ) {
           return false;
         }
-        if (canvasFrames === undefined) return true;
-
         const currentFrames = parseCanvasFrameGeometryById(
           current.canvasFrames,
         );
-        return Boolean(
+        const framesApplied = Boolean(
           placedFrames?.every(({ fileId, frame }) => {
             const currentFrame = currentFrames[fileId];
             return (
@@ -583,6 +679,7 @@ const generateDesignAction = defineAction({
             );
           }),
         );
+        return framesApplied && hasBreakpointSet(current.breakpointSet);
       },
     });
 

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

@@ -19,6 +19,7 @@ import {
   type CanvasFramePlacement,
 } from "../shared/canvas-frames.js";
 import { isUniqueConstraintViolation } from "../shared/db-conflict.js";
+import { widthToPrefix } from "../shared/responsive-classes.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 const VARIANT_GAP = 96;
@@ -27,8 +28,22 @@ const MOBILE_WIDTH = 390;
 const MOBILE_HEIGHT = 844;
 const TABLET_WIDTH = 768;
 const TABLET_HEIGHT = 1024;
-const DESKTOP_WIDTH = 1280;
-const DESKTOP_HEIGHT = 900;
+const DESKTOP_WIDTH = 1440;
+const DESKTOP_HEIGHT = 1024;
+const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
+  id: `generated-${widthPx}`,
+  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
+  widthPx,
+  prefix: widthToPrefix(widthPx),
+}));
+
+function hasBreakpointSet(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  const breakpoints = (value as { breakpoints?: unknown }).breakpoints;
+  return Array.isArray(breakpoints) && breakpoints.length > 0;
+}
 
 function designDeepLink(designId: string): string {
   return buildDeepLink({
@@ -951,6 +966,15 @@ export default defineAction({
           canvasFrames: mergedFrames.canvasFrames,
           screenMetadata: previousMetadata,
           designVariantSets: previousVariantSets,
+          ...(hasBreakpointSet(current.breakpointSet)
+            ? {}
+            : {
+                breakpointSet: {
+                  id: "generated-responsive",
+                  breakpoints: DEFAULT_RESPONSIVE_BREAKPOINTS,
+                },
+                breakpointSetUpdatedAt: updatedAt,
+              }),
           updatedAt,
         };
       },
@@ -968,13 +992,17 @@ export default defineAction({
           ? variantSets[variantSetId]
           : null;
         const persistedScreens = Array.isArray(set?.screens) ? set.screens : [];
-        return screens.every(
-          (screen) =>
-            isRecord(canvasFrames[screen.id]) &&
-            isRecord(metadata[screen.id]) &&
-            persistedScreens.some(
-              (persisted) => isRecord(persisted) && persisted.id === screen.id,
-            ),
+        return (
+          hasBreakpointSet(current.breakpointSet) &&
+          screens.every(
+            (screen) =>
+              isRecord(canvasFrames[screen.id]) &&
+              isRecord(metadata[screen.id]) &&
+              persistedScreens.some(
+                (persisted) =>
+                  isRecord(persisted) && persisted.id === screen.id,
+              ),
+          )
         );
       },
     });

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

@@ -249,9 +249,6 @@ const EDITOR_BRIDGE_VAR_NAMES = [
   "--design-editor-component-strong-color",
   "--design-editor-component-contrast-color",
   "--design-editor-measure-color",
-  "--background",
-  "--foreground",
-  "--border",
 ];
 
 function readEditorBridgeThemeVars(): Record<string, string> {
@@ -1949,6 +1946,15 @@ export function DesignCanvas({
     // iframe document here; the bridge replays inspector state after that load.
   }, [content, contentKey, runtimeReplacementContent, runtimeReplacementKey]);
 
+  useEffect(() => {
+    if (!interactMode) return;
+    // Interact renders the authoritative persisted source because the editor
+    // bridge is intentionally absent. Keep that same source as the next
+    // edit-mode baseline so leaving Interact cannot resurrect the older
+    // bridge-managed snapshot and make the design visibly jump backward.
+    setRenderedContent(content);
+  }, [content, interactMode]);
+
   usePinchZoom({
     containerRef: scrollContainerRef,
     zoom,

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

@@ -42,6 +42,7 @@ import {
   type PenPath,
 } from "@shared/pen-path";
 import {
+  IconArrowsMaximize,
   IconCopy,
   IconDots,
   IconHandClick,
@@ -393,6 +394,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
+  interactMode = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
   directlyHoveredScreenId,
@@ -7531,8 +7533,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   }}
                   editorChromeScaleX={canvasZoom / 100}
                   editorChromeScaleY={canvasZoom / 100}
-                  editMode={boardEditMode}
-                  interactMode={false}
+                  editMode={boardEditMode && !interactMode}
+                  interactMode={interactMode}
                   scaleMode={boardIsActive && effectiveTool === "scale"}
                   clearSelectionRequest={boardClearSelectionRequest}
                   selectedSelector={
@@ -7602,6 +7604,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 !isBreakpointSelectionTarget(screen)
               }
               showFullView={fullViewIdSet.has(screen.id)}
+              interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
                 fileDragOverFrameId !== null &&
@@ -8859,6 +8862,7 @@ interface ScreenProps {
   isSelected: boolean;
   isTopScreen: boolean;
   showFullView: boolean;
+  interactMode: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
   isFileDragOver: boolean;
@@ -8926,6 +8930,7 @@ const Screen = memo(function Screen({
   isSelected,
   isTopScreen,
   showFullView,
+  interactMode,
   isDirectlyHovered,
   isFileDragOver,
   hasHoveredChild,
@@ -9022,9 +9027,12 @@ const Screen = memo(function Screen({
   const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
   const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
   // Keep frame actions inside their own frame so closely spaced screens cannot
-  // cover one another. Narrow frames collapse Interact to its familiar icon;
+  // cover one another. Narrow frames collapse the action to its familiar icon;
   // the accessible name and native tooltip preserve the action's meaning.
   const compactFullView = frameScreenWidth < FRAME_HEADER_BUTTON_COMPACT_WIDTH;
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const labelInfoMaxWidth = Math.max(
     64,
     frameScreenWidth -
@@ -9157,8 +9165,8 @@ const Screen = memo(function Screen({
             transformOrigin: "right center",
             transition: getChromeLabelTransition(chromeSettling),
           }}
-          aria-label={t("designEditor.modes.interact")}
-          title={t("designEditor.modes.interact")}
+          aria-label={frameActionLabel}
+          title={frameActionLabel}
           onClick={(event) => onEdit(screen.id, event)}
           onMouseDown={(event) => {
             event.preventDefault();
@@ -9167,9 +9175,13 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
         >
-          <IconHandClick className="size-3 shrink-0" />
+          {interactMode ? (
+            <IconArrowsMaximize className="size-3 shrink-0" />
+          ) : (
+            <IconHandClick className="size-3 shrink-0" />
+          )}
           <span className={cn("truncate", compactFullView && "sr-only")}>
-            {t("designEditor.modes.interact")}
+            {frameActionLabel}
           </span>
         </button>
       </div>
@@ -9394,6 +9406,7 @@ const Screen = memo(function Screen({
           renderBreakpointContent={renderBreakpointContent}
           activeBreakpointWidth={screen.activeBreakpointWidth}
           isScreenSelected={isSelected}
+          interactMode={interactMode}
           penActive={penActive}
           creationToolActive={creationToolActive}
           cullTier={cullTier}
@@ -9518,6 +9531,7 @@ function BreakpointPreviewRow({
   renderBreakpointContent,
   activeBreakpointWidth,
   isScreenSelected,
+  interactMode,
   penActive,
   creationToolActive,
   cullTier,
@@ -9559,6 +9573,7 @@ function BreakpointPreviewRow({
    *  mirrors `Screen`'s own `isSelected`, used so a breakpoint frame's chrome
    *  reads as "part of a selected group" the same way the base frame does. */
   isScreenSelected: boolean;
+  interactMode: boolean;
   penActive: boolean;
   creationToolActive: boolean;
   /** Uses the owning screen's exact culling lifecycle: never-seen/evicted
@@ -9595,6 +9610,9 @@ function BreakpointPreviewRow({
   canEdit?: boolean;
 }) {
   const t = useT();
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const breakpointWidths = screen.breakpointWidths ?? [];
   // Place additional frames to the right of the primary, starting after the gap
   let offsetX = primaryGeometry.width + BREAKPOINT_FRAME_GAP;
@@ -9884,8 +9902,8 @@ function BreakpointPreviewRow({
                     transform: `scale(${chromeScale})`,
                     transformOrigin: "right center",
                   }}
-                  aria-label={t("designEditor.modes.interact")}
-                  title={t("designEditor.modes.interact")}
+                  aria-label={frameActionLabel}
+                  title={frameActionLabel}
                   onClick={(e) => {
                     e.stopPropagation();
                     activateThisFrame(e);
@@ -9896,7 +9914,11 @@ function BreakpointPreviewRow({
                     e.stopPropagation();
                   }}
                 >
-                  <IconHandClick className="size-3" />
+                  {interactMode ? (
+                    <IconArrowsMaximize className="size-3" />
+                  ) : (
+                    <IconHandClick className="size-3" />
+                  )}
                 </button>
               ) : null}
               <span

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

@@ -340,7 +340,7 @@ function OptionButton({
         compact ? "px-2.5 py-1.5" : "px-3 py-2",
         selected
           ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
       )}
     >
       <span
@@ -418,7 +418,7 @@ function ColorOptions({
               "group inline-flex min-h-8 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5 text-start transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0",
               selected
                 ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
             )}
           >
             <span

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

@@ -77,7 +77,15 @@ export function TweaksPanelContent({
         data-tweaks-help
         className="mt-2 border-t border-border/60 pt-2 !text-[10px] leading-relaxed text-muted-foreground/70"
       >
-        {t("designEditor.tweaksHelp")}
+        {t("designEditor.tweaksHelp")}{" "}
+        <a
+          href="/docs/template-design#tweaks"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
+        >
+          {t("designEditor.tweaksDocs")}
+        </a>
       </p>
     </div>
   );

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -910,10 +910,12 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
 
   function selectionTargetForHit(hit: Element | null): Element | null {
     if (!hit || isDocumentRootElement(hit)) return hit;
-    if (selectedEl && hit !== selectedEl && selectedEl.contains(hit))
-      return hit;
-    if (hasStableOwnSource(hit)) return hit;
-    return closestStableSourceElement(hit) || hit;
+    // Select the deepest element under the pointer on the first click. The
+    // bridge can mint a pending node id and build a source-equivalent selector
+    // for id-less descendants, so climbing to the nearest tagged ancestor is
+    // no longer necessary and makes ordinary list labels select their parent
+    // container instead.
+    return hit;
   }
 
   function freshRuntimeNodeId(prefix: string): string {
@@ -1929,7 +1931,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   var transformBadge = document.createElement("div");
   transformBadge.setAttribute("data-agent-native-transform-badge", "");
   transformBadge.style.cssText =
-    "position:fixed;z-index:100000;display:none;pointer-events:none;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--background) / 0.96);color:hsl(var(--foreground));font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;box-shadow:0 8px 20px color-mix(in srgb, hsl(var(--foreground)) 16%, transparent);";
+    "position:fixed;z-index:100000;display:none;pointer-events:none;border:1px solid rgba(255,255,255,0.16);border-radius:4px;background:rgba(24,24,27,0.96);color:rgba(255,255,255,0.96);font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;box-shadow:0 8px 20px rgba(0,0,0,0.28);";
   document.body.appendChild(transformBadge);
 
   var spacingBadge = document.createElement("div");

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -130,6 +130,9 @@ export interface MultiScreenCanvasProps {
    * transformed directly from the overview canvas. */
   lockedScreenIds?: ReadonlySet<string> | readonly string[];
   fullViewScreenIds?: string[];
+  /** Lets every live frame receive native pointer interaction while the
+   * overview camera and frame chrome remain available. */
+  interactMode?: boolean;
   activeScreenHasHoveredChild?: boolean;
   hoveredChildScreenId?: string | null;
   directlyHoveredScreenId?: string | null;

package/corpus/templates/design/app/global.css

@@ -84,6 +84,11 @@
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
   --design-editor-control-border: hsl(var(--border));
+  --design-editor-question-option-bg: color-mix(
+    in srgb,
+    var(--design-editor-control-bg) 58%,
+    transparent
+  );
   --design-editor-canvas-bg: hsl(0 0% 92%);
   --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
   --design-editor-skeleton-panel-ghost-bg: color-mix(
@@ -162,6 +167,11 @@
   --design-editor-panel-raised-bg: hsl(0 0% 18%);
   --design-editor-control-bg: hsl(0 0% 18%);
   --design-editor-control-border: hsl(0 0% 24%);
+  --design-editor-question-option-bg: color-mix(
+    in srgb,
+    var(--design-editor-control-bg) 58%,
+    transparent
+  );
   --design-editor-canvas-bg: hsl(0 0% 10%);
   --design-editor-skeleton-canvas-bg: hsl(0 0% 11%);
 }

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -16,6 +16,9 @@ function designQuestionsStateKey(designId: string | undefined): string {
   return designId ? `show-questions:${designId}` : "show-questions";
 }
 
+const RESPONSIVE_GENERATION_REQUIREMENTS =
+  'Responsive behavior is mandatory for every web design. Read the form-factor answer above: for Desktop or Both/responsive, call generate-design with `primaryViewport: "desktop"` and a 1440x1024 canvas frame; use `primaryViewport: "mobile"` only for an explicitly mobile-primary choice. Use mobile-first responsive CSS, then take desktop and mobile screenshots and fix any overflow before reporting the design complete.';
+
 /**
  * Polls design-scoped question state. When the agent writes structured
  * questions, the editor surfaces a full-canvas overlay for only this design.
@@ -40,6 +43,8 @@ export function useQuestionFlow(
         "Answers:",
         formattedAnswers,
         "",
+        RESPONSIVE_GENERATION_REQUIREMENTS,
+        "",
         designId
           ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into a complete but compact product UI in the chosen direction. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the feature list is too large for one reliable edit. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
@@ -89,6 +94,8 @@ export function useQuestionFlow(
         "Answers:",
         formattedAnswers,
         "",
+        RESPONSIVE_GENERATION_REQUIREMENTS,
+        "",
         designId
           ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into a complete but compact product UI in the chosen direction. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the feature list is too large for one reliable edit. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
@@ -105,8 +112,8 @@ export function useQuestionFlow(
     sendContinuation(
       "Skip the questions — decide for me.",
       designId
-        ? `The user skipped the pre-generation questions for design ${designId}. Proceed with reasonable defaults. Generate one polished first direction unless the original prompt explicitly requested options.`
-        : "The user skipped the pre-generation questions. Proceed with reasonable defaults. Generate one polished first direction unless the original prompt explicitly requested options.",
+        ? `The user skipped the pre-generation questions for design ${designId}. Proceed with reasonable defaults. ${RESPONSIVE_GENERATION_REQUIREMENTS} Generate one polished first direction unless the original prompt explicitly requested options.`
+        : `The user skipped the pre-generation questions. Proceed with reasonable defaults. ${RESPONSIVE_GENERATION_REQUIREMENTS} Generate one polished first direction unless the original prompt explicitly requested options.`,
     );
   }, [designId, sendContinuation]);
 

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -699,6 +699,7 @@ const messages = {
     closeTweaks: "關閉調整",
     tweaksHelp:
       "調整項是疊加在基礎設計上的中斷點與狀態專屬視覺覆寫。重設控制項可回到繼承值。",
+    tweaksDocs: "深入瞭解。",
     noTweakControls: "還沒有調整控制項。",
     extensions: "擴充功能",
     addExtension: "擴充功能",