@agent-native/core 0.128.3 → 0.129.0

package/corpus/templates/design/app/i18n-data.ts

@@ -8,6 +8,7 @@ import {
   keyboardShortcutLabels,
 } from "./i18n-keyboard-shortcuts";
 import { motionDockOverrides } from "./i18n-motion";
+import { responsiveInteractOverrides } from "./i18n-responsive-interact";
 import { designTemplateFeatureOverrides } from "./i18n-template-feature";
 import zhTW from "./i18n/zh-TW";
 
@@ -467,6 +468,18 @@ const enUS = {
           "Responsive edits affect this breakpoint and smaller sizes by default. Change the scope beside the breakpoint control.",
       },
     },
+    responsiveInteract: {
+      device: "Device",
+      width: "Width",
+      widthAbbreviation: "W",
+      height: "Height",
+      heightAbbreviation: "H",
+      zoom: "Zoom",
+      zoomIn: "Zoom in",
+      zoomOut: "Zoom out",
+      zoomToPreset: "Zoom to {{percent}}%",
+      exit: "Exit full-screen preview",
+    },
     screenDeletion: {
       titleOne: "Delete this screen?",
       titleMany: "Delete {{count}} screens?",
@@ -951,7 +964,9 @@ const enUS = {
       copyPrompt: "Copy prompt to your agent",
       abortPreview: "Abort preview and interact",
       agentMessage: "Apply the pending visual style edits to the source.",
-      sentToast: "Style edits sent to the Design agent",
+      sentToast: "Design updates sent to the agent",
+      agentHandoffFailedToast:
+        "Could not reach the agent. The preview was kept so you can retry or copy the prompt.",
       verifiedToast: "Source and runtime structure verified",
       conflictToast:
         "The reloaded runtime did not match the pending structure edit. The preview is still undoable; retry after resolving the source conflict.",
@@ -11140,7 +11155,9 @@ const designPendingVisualStyleOverrides = {
         copyPrompt: "將提示複製給您的代理",
         abortPreview: "中止預覽並互動",
         agentMessage: "將待處理的視覺樣式編輯套用到來源。",
-        sentToast: "樣式編輯已傳送給 Design 代理",
+        sentToast: "設計更新已傳送給代理",
+        agentHandoffFailedToast:
+          "無法連線到代理。預覽已保留，您可以重試或複製提示。",
         verifiedToast: "已驗證來源與執行階段結構",
         conflictToast:
           "重新載入的執行階段與待處理的結構編輯不符。預覽仍可復原；請解決來源衝突後重試。",
@@ -11171,7 +11188,9 @@ const designPendingVisualStyleOverrides = {
         copyPrompt: "将提示复制给你的代理",
         abortPreview: "中止预览并互动",
         agentMessage: "将待处理的视觉样式编辑应用到源文件。",
-        sentToast: "样式编辑已发送给 Design 代理",
+        sentToast: "设计更新已发送给代理",
+        agentHandoffFailedToast:
+          "无法连接到代理。预览已保留，你可以重试或复制提示。",
         verifiedToast: "已验证源文件和运行时结构",
         conflictToast:
           "重新加载的运行时与待处理的结构编辑不匹配。预览仍可撤销；请解决源文件冲突后重试。",
@@ -11203,7 +11222,9 @@ const designPendingVisualStyleOverrides = {
         abortPreview: "Cancelar vista previa e interactuar",
         agentMessage:
           "Aplica las ediciones visuales de estilo pendientes al código fuente.",
-        sentToast: "Ediciones de estilo enviadas al agente de Design",
+        sentToast: "Actualizaciones de diseño enviadas al agente",
+        agentHandoffFailedToast:
+          "No se pudo contactar con el agente. Se conservó la vista previa para que puedas reintentar o copiar el prompt.",
         verifiedToast: "Código y estructura del runtime verificados",
         conflictToast:
           "El runtime recargado no coincide con la edición estructural pendiente. La vista previa aún se puede deshacer; resuelve el conflicto y vuelve a intentarlo.",
@@ -11236,7 +11257,9 @@ const designPendingVisualStyleOverrides = {
         abortPreview: "Annuler l’aperçu et interagir",
         agentMessage:
           "Appliquez les modifications visuelles de style en attente à la source.",
-        sentToast: "Modifications de style envoyées à l’agent Design",
+        sentToast: "Mises à jour du design envoyées à l’agent",
+        agentHandoffFailedToast:
+          "Impossible de joindre l’agent. L’aperçu a été conservé pour réessayer ou copier le prompt.",
         verifiedToast: "Source et structure du runtime vérifiées",
         conflictToast:
           "Le runtime rechargé ne correspond pas à la modification de structure en attente. L’aperçu reste annulable ; résolvez le conflit puis réessayez.",
@@ -11269,7 +11292,9 @@ const designPendingVisualStyleOverrides = {
         abortPreview: "Vorschau abbrechen und interagieren",
         agentMessage:
           "Wende die ausstehenden visuellen Stiländerungen auf die Quelle an.",
-        sentToast: "Stiländerungen an den Design-Agent gesendet",
+        sentToast: "Design-Updates an den Agenten gesendet",
+        agentHandoffFailedToast:
+          "Der Agent konnte nicht erreicht werden. Die Vorschau wurde beibehalten, damit du es erneut versuchen oder den Prompt kopieren kannst.",
         verifiedToast: "Quelle und Laufzeitstruktur überprüft",
         conflictToast:
           "Die neu geladene Laufzeit stimmt nicht mit der ausstehenden Strukturänderung überein. Die Vorschau kann weiterhin rückgängig gemacht werden; löse den Konflikt und versuche es erneut.",
@@ -11302,7 +11327,9 @@ const designPendingVisualStyleOverrides = {
         abortPreview: "プレビューを中止して操作",
         agentMessage:
           "保留中のビジュアルスタイル編集をソースに適用してください。",
-        sentToast: "スタイル編集を Design エージェントに送信しました",
+        sentToast: "デザイン更新をエージェントに送信しました",
+        agentHandoffFailedToast:
+          "エージェントに接続できませんでした。再試行またはプロンプトのコピーができるよう、プレビューは保持されています。",
         verifiedToast: "ソースとランタイム構造を検証しました",
         conflictToast:
           "再読み込みしたランタイムが保留中の構造編集と一致しません。プレビューは元に戻せます。ソースの競合を解決して再試行してください。",
@@ -11334,7 +11361,9 @@ const designPendingVisualStyleOverrides = {
         copyPrompt: "에이전트에 프롬프트 복사",
         abortPreview: "미리보기를 중단하고 상호작용",
         agentMessage: "보류 중인 시각 스타일 편집을 소스에 적용하세요.",
-        sentToast: "스타일 편집을 Design 에이전트로 보냈습니다",
+        sentToast: "디자인 업데이트를 에이전트로 보냈습니다",
+        agentHandoffFailedToast:
+          "에이전트에 연결할 수 없습니다. 다시 시도하거나 프롬프트를 복사할 수 있도록 미리보기를 유지했습니다.",
         verifiedToast: "소스와 런타임 구조를 확인했습니다",
         conflictToast:
           "다시 로드된 런타임이 보류 중인 구조 편집과 일치하지 않습니다. 미리보기는 계속 실행 취소할 수 있으니 소스 충돌을 해결한 뒤 다시 시도하세요.",
@@ -11367,7 +11396,9 @@ const designPendingVisualStyleOverrides = {
         abortPreview: "Cancelar prévia e interagir",
         agentMessage:
           "Aplique as edições visuais de estilo pendentes à origem.",
-        sentToast: "Edições de estilo enviadas ao agente Design",
+        sentToast: "Atualizações de design enviadas ao agente",
+        agentHandoffFailedToast:
+          "Não foi possível acessar o agente. A prévia foi mantida para você tentar novamente ou copiar o prompt.",
         verifiedToast: "Origem e estrutura do runtime verificadas",
         conflictToast:
           "O runtime recarregado não corresponde à edição estrutural pendente. A prévia ainda pode ser desfeita; resolva o conflito e tente novamente.",
@@ -11399,7 +11430,9 @@ const designPendingVisualStyleOverrides = {
         copyPrompt: "Prompt अपने agent को कॉपी करें",
         abortPreview: "Preview रोकें और interact करें",
         agentMessage: "लंबित visual style edits को source पर लागू करें।",
-        sentToast: "Style edits Design agent को भेजे गए",
+        sentToast: "Design updates agent को भेजे गए",
+        agentHandoffFailedToast:
+          "Agent तक नहीं पहुंच सके। Retry या prompt कॉपी करने के लिए preview रखा गया है।",
         verifiedToast: "Source और runtime structure सत्यापित हैं",
         conflictToast:
           "Reload हुआ runtime pending structure edit से मेल नहीं खाता। Preview अभी भी undo किया जा सकता है; source conflict हल करके फिर कोशिश करें।",
@@ -11430,7 +11463,9 @@ const designPendingVisualStyleOverrides = {
         copyPrompt: "نسخ الموجه إلى وكيلك",
         abortPreview: "إلغاء المعاينة والتفاعل",
         agentMessage: "طبّق تعديلات النمط المرئية المعلقة على المصدر.",
-        sentToast: "تم إرسال تعديلات النمط إلى وكيل Design",
+        sentToast: "تم إرسال تحديثات التصميم إلى الوكيل",
+        agentHandoffFailedToast:
+          "تعذر الوصول إلى الوكيل. تم الاحتفاظ بالمعاينة لتتمكن من إعادة المحاولة أو نسخ الموجه.",
         verifiedToast: "تم التحقق من المصدر وبنية وقت التشغيل",
         conflictToast:
           "لا يطابق وقت التشغيل المعاد تحميله تعديل البنية المعلق. لا تزال المعاينة قابلة للتراجع؛ عالج تعارض المصدر ثم أعد المحاولة.",
@@ -15064,6 +15099,7 @@ export const messagesByLocale = {
       designAddLocalhostScreenOverrides["zh-TW"],
       designFillStylesComingSoonOverrides["zh-TW"],
       breakpointBarOverrides["zh-TW"],
+      responsiveInteractOverrides["zh-TW"],
       motionDockOverrides["zh-TW"],
     ),
   ),
@@ -15092,6 +15128,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["zh-CN"],
       designMotionAndBreakpointOverrides["zh-CN"],
       breakpointBarOverrides["zh-CN"],
+      responsiveInteractOverrides["zh-CN"],
       motionDockOverrides["zh-CN"],
       designRuntimeIdentityAndBridgeOverrides["zh-CN"],
       designComponentInstanceOverrides["zh-CN"],
@@ -15170,6 +15207,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["es-ES"],
       designMotionAndBreakpointOverrides["es-ES"],
       breakpointBarOverrides["es-ES"],
+      responsiveInteractOverrides["es-ES"],
       motionDockOverrides["es-ES"],
       designRuntimeIdentityAndBridgeOverrides["es-ES"],
       designComponentInstanceOverrides["es-ES"],
@@ -15250,6 +15288,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["fr-FR"],
       designMotionAndBreakpointOverrides["fr-FR"],
       breakpointBarOverrides["fr-FR"],
+      responsiveInteractOverrides["fr-FR"],
       motionDockOverrides["fr-FR"],
       designRuntimeIdentityAndBridgeOverrides["fr-FR"],
       designComponentInstanceOverrides["fr-FR"],
@@ -15330,6 +15369,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["de-DE"],
       designMotionAndBreakpointOverrides["de-DE"],
       breakpointBarOverrides["de-DE"],
+      responsiveInteractOverrides["de-DE"],
       motionDockOverrides["de-DE"],
       designRuntimeIdentityAndBridgeOverrides["de-DE"],
       designComponentInstanceOverrides["de-DE"],
@@ -15410,6 +15450,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["ja-JP"],
       designMotionAndBreakpointOverrides["ja-JP"],
       breakpointBarOverrides["ja-JP"],
+      responsiveInteractOverrides["ja-JP"],
       motionDockOverrides["ja-JP"],
       designRuntimeIdentityAndBridgeOverrides["ja-JP"],
       designComponentInstanceOverrides["ja-JP"],
@@ -15491,6 +15532,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["ko-KR"],
       designMotionAndBreakpointOverrides["ko-KR"],
       breakpointBarOverrides["ko-KR"],
+      responsiveInteractOverrides["ko-KR"],
       motionDockOverrides["ko-KR"],
       designRuntimeIdentityAndBridgeOverrides["ko-KR"],
       designComponentInstanceOverrides["ko-KR"],
@@ -15570,6 +15612,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["pt-BR"],
       designMotionAndBreakpointOverrides["pt-BR"],
       breakpointBarOverrides["pt-BR"],
+      responsiveInteractOverrides["pt-BR"],
       motionDockOverrides["pt-BR"],
       designRuntimeIdentityAndBridgeOverrides["pt-BR"],
       designComponentInstanceOverrides["pt-BR"],
@@ -15650,6 +15693,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["hi-IN"],
       designMotionAndBreakpointOverrides["hi-IN"],
       breakpointBarOverrides["hi-IN"],
+      responsiveInteractOverrides["hi-IN"],
       motionDockOverrides["hi-IN"],
       designRuntimeIdentityAndBridgeOverrides["hi-IN"],
       designComponentInstanceOverrides["hi-IN"],
@@ -15730,6 +15774,7 @@ export const messagesByLocale = {
       designInteractionStatesOverrides["ar-SA"],
       designMotionAndBreakpointOverrides["ar-SA"],
       breakpointBarOverrides["ar-SA"],
+      responsiveInteractOverrides["ar-SA"],
       motionDockOverrides["ar-SA"],
       designRuntimeIdentityAndBridgeOverrides["ar-SA"],
       designComponentInstanceOverrides["ar-SA"],

package/corpus/templates/design/app/i18n-responsive-interact.ts

@@ -0,0 +1,183 @@
+/**
+ * Localized strings for ResponsiveInteractBar — the full-screen Interact
+ * mode's device/zoom chrome bar.
+ * Used in: app/components/design/ResponsiveInteractBar.tsx.
+ */
+export const responsiveInteractOverrides = {
+  "en-US": {
+    designEditor: {
+      responsiveInteract: {
+        device: "Device",
+        width: "Width",
+        widthAbbreviation: "W",
+        height: "Height",
+        heightAbbreviation: "H",
+        zoom: "Zoom",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        zoomToPreset: "Zoom to {{percent}}%",
+        exit: "Exit full-screen preview",
+      },
+    },
+  },
+  "zh-CN": {
+    designEditor: {
+      responsiveInteract: {
+        device: "设备",
+        width: "宽度",
+        widthAbbreviation: "宽",
+        height: "高度",
+        heightAbbreviation: "高",
+        zoom: "缩放",
+        zoomIn: "放大",
+        zoomOut: "缩小",
+        zoomToPreset: "缩放至 {{percent}}%",
+        exit: "退出全屏预览",
+      },
+    },
+  },
+  "zh-TW": {
+    designEditor: {
+      responsiveInteract: {
+        device: "裝置",
+        width: "寬度",
+        widthAbbreviation: "寬",
+        height: "高度",
+        heightAbbreviation: "高",
+        zoom: "縮放",
+        zoomIn: "放大",
+        zoomOut: "縮小",
+        zoomToPreset: "縮放至 {{percent}}%",
+        exit: "結束全螢幕預覽",
+      },
+    },
+  },
+  "es-ES": {
+    designEditor: {
+      responsiveInteract: {
+        device: "Dispositivo",
+        width: "Ancho",
+        widthAbbreviation: "A",
+        height: "Alto",
+        heightAbbreviation: "Al",
+        zoom: "Zoom",
+        zoomIn: "Acercar",
+        zoomOut: "Alejar",
+        zoomToPreset: "Zoom al {{percent}}%",
+        exit: "Salir de la vista previa a pantalla completa",
+      },
+    },
+  },
+  "fr-FR": {
+    designEditor: {
+      responsiveInteract: {
+        device: "Appareil",
+        width: "Largeur",
+        widthAbbreviation: "L",
+        height: "Hauteur",
+        heightAbbreviation: "H",
+        zoom: "Zoom",
+        zoomIn: "Zoomer",
+        zoomOut: "Dézoomer",
+        zoomToPreset: "Zoom à {{percent}} %",
+        exit: "Quitter l'aperçu plein écran",
+      },
+    },
+  },
+  "de-DE": {
+    designEditor: {
+      responsiveInteract: {
+        device: "Gerät",
+        width: "Breite",
+        widthAbbreviation: "B",
+        height: "Höhe",
+        heightAbbreviation: "H",
+        zoom: "Zoom",
+        zoomIn: "Vergrößern",
+        zoomOut: "Verkleinern",
+        zoomToPreset: "Auf {{percent}}% zoomen",
+        exit: "Vollbildvorschau verlassen",
+      },
+    },
+  },
+  "ja-JP": {
+    designEditor: {
+      responsiveInteract: {
+        device: "デバイス",
+        width: "幅",
+        widthAbbreviation: "幅",
+        height: "高さ",
+        heightAbbreviation: "高",
+        zoom: "ズーム",
+        zoomIn: "拡大",
+        zoomOut: "縮小",
+        zoomToPreset: "{{percent}}% にズーム",
+        exit: "全画面プレビューを終了",
+      },
+    },
+  },
+  "ko-KR": {
+    designEditor: {
+      responsiveInteract: {
+        device: "기기",
+        width: "너비",
+        widthAbbreviation: "너비",
+        height: "높이",
+        heightAbbreviation: "높이",
+        zoom: "확대/축소",
+        zoomIn: "확대",
+        zoomOut: "축소",
+        zoomToPreset: "{{percent}}%로 확대/축소",
+        exit: "전체 화면 미리보기 종료",
+      },
+    },
+  },
+  "pt-BR": {
+    designEditor: {
+      responsiveInteract: {
+        device: "Dispositivo",
+        width: "Largura",
+        widthAbbreviation: "L",
+        height: "Altura",
+        heightAbbreviation: "A",
+        zoom: "Zoom",
+        zoomIn: "Aumentar zoom",
+        zoomOut: "Diminuir zoom",
+        zoomToPreset: "Zoom para {{percent}}%",
+        exit: "Sair da visualização em tela cheia",
+      },
+    },
+  },
+  "hi-IN": {
+    designEditor: {
+      responsiveInteract: {
+        device: "डिवाइस",
+        width: "चौड़ाई",
+        widthAbbreviation: "चौ",
+        height: "ऊंचाई",
+        heightAbbreviation: "ऊं",
+        zoom: "ज़ूम",
+        zoomIn: "ज़ूम इन करें",
+        zoomOut: "ज़ूम आउट करें",
+        zoomToPreset: "{{percent}}% पर ज़ूम करें",
+        exit: "फ़ुल-स्क्रीन पूर्वावलोकन से बाहर निकलें",
+      },
+    },
+  },
+  "ar-SA": {
+    designEditor: {
+      responsiveInteract: {
+        device: "الجهاز",
+        width: "العرض",
+        widthAbbreviation: "ع",
+        height: "الارتفاع",
+        heightAbbreviation: "ر",
+        zoom: "التكبير",
+        zoomIn: "تكبير",
+        zoomOut: "تصغير",
+        zoomToPreset: "تكبير إلى {{percent}}%",
+        exit: "الخروج من المعاينة بملء الشاشة",
+      },
+    },
+  },
+};

package/corpus/templates/design/app/lib/agent-chat.ts

@@ -1,6 +1,7 @@
 import {
   sendToAgentChat,
   sendToAgentChatAndConfirm,
+  sendMcpAppHostMessage,
   type AgentChatMessage,
   type SendToAgentChatAndConfirmResult,
 } from "@agent-native/core/client/agent-chat";
@@ -34,3 +35,62 @@ export function sendToDesignAgentChatAndConfirm(
     options,
   );
 }
+
+export interface DesignSourceHandoffResult {
+  target: "host" | "local";
+  delivered: boolean;
+  reason?: string;
+  tabId?: string;
+}
+
+const DEFAULT_HOST_HANDOFF_TIMEOUT_MS = 15_000;
+
+/**
+ * Pending localhost source edits belong in the coding host when Design is
+ * running as an MCP App. Ordinary Design pages have no host bridge, so they
+ * keep the existing local Design-agent path.
+ *
+ * A rejected host request never falls through to the local agent: the host may
+ * have accepted the turn even when its acknowledgement was lost, and a second
+ * source-writing turn would be unsafe.
+ */
+export async function sendDesignSourceHandoffAndConfirm(
+  opts: AgentChatMessage,
+  options?: { timeoutMs?: number },
+): Promise<DesignSourceHandoffResult> {
+  const hostDelivery = sendMcpAppHostMessage({
+    message: opts.message,
+    context: opts.context,
+    mode: opts.mode,
+    requestMode: opts.requestMode,
+  });
+  if (hostDelivery !== false) {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    const outcome = await Promise.race([
+      hostDelivery
+        .then((delivered) =>
+          delivered
+            ? ({ delivered: true } as const)
+            : ({ delivered: false, reason: "host-rejected" } as const),
+        )
+        .catch(() => ({ delivered: false, reason: "host-rejected" })),
+      new Promise<{ delivered: false; reason: string }>((resolve) => {
+        timeoutId = setTimeout(
+          () => resolve({ delivered: false, reason: "host-timeout" }),
+          Math.max(100, options?.timeoutMs ?? DEFAULT_HOST_HANDOFF_TIMEOUT_MS),
+        );
+      }),
+    ]);
+    if (timeoutId !== undefined) clearTimeout(timeoutId);
+    return {
+      target: "host",
+      ...outcome,
+    };
+  }
+
+  const localDelivery = await sendToDesignAgentChatAndConfirm(opts, options);
+  return {
+    target: "local",
+    ...localDelivery,
+  };
+}

package/corpus/templates/design/app/pages/design-editor/responsive-interact.ts

@@ -0,0 +1,89 @@
+/**
+ * Pure data/logic for the full-screen Interact mode's device chrome bar
+ * (ResponsiveInteractBar). Modeled on builder-internal's
+ * ResponsiveEditingMode/responsive-device-presets, adapted to this app's
+ * shadcn chrome. Kept separate from DEVICE_FRAME_VIEWPORTS in
+ * components/design/types.ts — that record is a fixed 3-category decorative
+ * frame (desktop/tablet/mobile chrome border) used elsewhere in the editor,
+ * not a device-simulation preset list with named devices and exact W×H.
+ */
+
+export type InteractDeviceCategory = "phone" | "tablet" | "desktop" | "custom";
+
+export interface InteractDevicePreset {
+  name: string;
+  width: number;
+  height: number;
+  category: InteractDeviceCategory;
+}
+
+/** Preset name used whenever the user types a width/height directly. */
+export const INTERACT_CUSTOM_DEVICE_NAME = "Custom";
+
+/** Must track ResponsiveInteractBar's `h-12`; the zoom-to-fit math subtracts
+ * it from the viewport to size the device box. */
+export const RESPONSIVE_INTERACT_BAR_HEIGHT = 48;
+
+export const INTERACT_DEVICE_PRESETS: InteractDevicePreset[] = [
+  { name: "iPhone SE", category: "phone", width: 320, height: 568 }, // i18n-ignore: stable device preset name.
+  { name: "iPhone 17", category: "phone", width: 402, height: 874 }, // i18n-ignore: stable device preset name.
+  { name: "iPhone 17 Pro Max", category: "phone", width: 440, height: 956 }, // i18n-ignore: stable device preset name.
+  { name: "Android Compact", category: "phone", width: 412, height: 917 }, // i18n-ignore: stable device preset name.
+  {
+    name: 'iPad Pro 11" Portrait',
+    category: "tablet",
+    width: 834,
+    height: 1194,
+  },
+  {
+    name: 'iPad Pro 11" Landscape',
+    category: "tablet",
+    width: 1194,
+    height: 834,
+  },
+  { name: 'MacBook Air 13"', category: "desktop", width: 1440, height: 900 },
+  {
+    name: INTERACT_CUSTOM_DEVICE_NAME,
+    category: "custom",
+    width: 402,
+    height: 874,
+  },
+];
+
+export const DEFAULT_INTERACT_DEVICE_PRESET = INTERACT_DEVICE_PRESETS[1]!;
+
+export function findInteractDevicePreset(
+  name: string,
+): InteractDevicePreset | undefined {
+  return INTERACT_DEVICE_PRESETS.find((preset) => preset.name === name);
+}
+
+/**
+ * Auto-fit zoom for the full-screen device box, ported from
+ * builder-internal's ResponsiveEditingMode effect (~lines 155-174): only
+ * zooms DOWN so the device fits the available chrome area, never zooms in
+ * past 100% just because there's extra room. Steps to the nearest 5 and
+ * clamps to [minZoom, 100] so the result always lands on a clean number.
+ */
+export function computeInteractZoomToFit(params: {
+  availableWidth: number;
+  availableHeight: number;
+  deviceWidth: number;
+  deviceHeight: number;
+  minZoom?: number;
+}): number {
+  const {
+    availableWidth,
+    availableHeight,
+    deviceWidth,
+    deviceHeight,
+    minZoom = 10,
+  } = params;
+  if (deviceWidth <= 0 || deviceHeight <= 0) return 100;
+  const widthScale = availableWidth / deviceWidth;
+  const heightScale = availableHeight / deviceHeight;
+  const optimalZoom = Math.min(widthScale, heightScale) * 100;
+  if (optimalZoom >= 100) return 100;
+  const stepped = Math.floor(optimalZoom / 5) * 5;
+  return Math.max(minZoom, Math.min(100, stepped));
+}

package/corpus/templates/design/changelog/2026-07-28-design-edits-can-be-applied-through-the-host-coding-agent-fr.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-28
+---
+
+Design edits can be applied through the host coding agent from an inline MCP canvas

package/corpus/templates/design/changelog/2026-07-28-interact-mode-can-preview-designs-in-responsive-device-sizes.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-28
+---
+
+Interact mode can preview designs in responsive device sizes

package/corpus/templates/design/changelog/2026-07-28-interact-mode-now-opens-a-full-screen-responsive-preview-wit.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-28
+---
+
+Interact mode now opens a full-screen responsive preview with device presets, editable width/height, and zoom-to-fit

package/corpus/templates/design/changelog/2026-07-28-show-or-hide-design-editing-chrome-with-cmd-on-apple-devices.md

@@ -1,6 +1,6 @@
 ---
-type: fixed
+type: improved
 date: 2026-07-28
 ---
 
-Show or hide Design editing chrome from Cmd+K, the canvas menu, or Cmd/Ctrl+Shift+\.
+Show or hide Design editing chrome from Cmd+K, the canvas menu, or Figma's Shift+\ shortcut.

package/corpus/templates/design/changelog/2026-07-28-visual-edit-now-always-shows-the-live-running-app-in-the-can.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-28
+---
+
+Visual edit now always shows the live running app in the canvas instead of a frozen HTML snapshot

package/corpus/templates/dispatch/.agents/skills/security/SKILL.md

@@ -163,7 +163,9 @@ private UI after the shell loads. See the `authentication` skill and
 proves *someone* is signed in. To restrict an operation to some teammates, set
 `authorize` on the `defineAction`. It wraps `run`, so it applies at every
 dispatch site (agent tool, HTTP, frontend, MCP, A2A, CLI) — unlike
-`needsApproval`, which is honoured only in the agent loop.
+`needsApproval`, which is honored by the agent loop and MCP 2026 hosts that
+support elicitation, but is not an authorization boundary for every dispatch
+site.
 
 ```ts
 import { coachAccess } from "../lib/access.js"; // defineAppRoles(...)
@@ -203,7 +205,16 @@ export default defineAction({
 });
 ```
 
-When the gate is truthy and the call is not yet approved, the loop emits an `approval_required` event and **stops the turn — `run()` never executes**. The human approves via the chat UI's Approve affordance, which re-issues the turn with the call's stable `approvalKey`; only then does the action run. A predicate gates conditionally (e.g. only external recipients) and **fails closed** — a throw is treated as "approval required".
+When the gate is truthy and the call is not yet approved, the agent loop emits
+an `approval_required` event and **stops the turn — `run()` never executes**.
+The human approves via the chat UI's Approve affordance, which re-issues the
+turn with the call's stable `approvalKey`; only then does the action run. MCP
+2026 hosts receive an `input_required` approval request bound to the exact
+caller, action, and arguments. The signed response state is backed by a durable,
+single-use grant, so denial, expiry, replay, missing host support, or invalid
+state fails closed before `run()`. A predicate gates conditionally (e.g. only
+external recipients) and **fails closed** — a throw is treated as "approval
+required".
 
 Rules:
 

package/corpus/templates/forms/.agents/skills/security/SKILL.md

@@ -163,7 +163,9 @@ private UI after the shell loads. See the `authentication` skill and
 proves *someone* is signed in. To restrict an operation to some teammates, set
 `authorize` on the `defineAction`. It wraps `run`, so it applies at every
 dispatch site (agent tool, HTTP, frontend, MCP, A2A, CLI) — unlike
-`needsApproval`, which is honoured only in the agent loop.
+`needsApproval`, which is honored by the agent loop and MCP 2026 hosts that
+support elicitation, but is not an authorization boundary for every dispatch
+site.
 
 ```ts
 import { coachAccess } from "../lib/access.js"; // defineAppRoles(...)
@@ -203,7 +205,16 @@ export default defineAction({
 });
 ```
 
-When the gate is truthy and the call is not yet approved, the loop emits an `approval_required` event and **stops the turn — `run()` never executes**. The human approves via the chat UI's Approve affordance, which re-issues the turn with the call's stable `approvalKey`; only then does the action run. A predicate gates conditionally (e.g. only external recipients) and **fails closed** — a throw is treated as "approval required".
+When the gate is truthy and the call is not yet approved, the agent loop emits
+an `approval_required` event and **stops the turn — `run()` never executes**.
+The human approves via the chat UI's Approve affordance, which re-issues the
+turn with the call's stable `approvalKey`; only then does the action run. MCP
+2026 hosts receive an `input_required` approval request bound to the exact
+caller, action, and arguments. The signed response state is backed by a durable,
+single-use grant, so denial, expiry, replay, missing host support, or invalid
+state fails closed before `run()`. A predicate gates conditionally (e.g. only
+external recipients) and **fails closed** — a throw is treated as "approval
+required".
 
 Rules: