nudge-ui 0.2.2 → 0.2.3

package/dist/inspector/settings/SettingsDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-import { IconColorSwatch, IconPlugConnected, IconSettings, IconX, } from "@tabler/icons-react";
+import { IconColorSwatch, IconPlugConnected, IconSettings, IconX, IconTrash, } from "@tabler/icons-react";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { McpConnectionContent, } from "../agent/McpConnectionDialog.js";
 import { PromptSettingsFields, } from "../prompt/PromptSettingsDialog.js";
@@ -10,10 +10,17 @@ import { useSelectedElement } from "../selection/selectionStore.js";
 import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
 import { getRegisteredFrames } from "../canvas/projection.js";
 import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { portalContainer } from "../ui/portalContainer.js";
+import { clearRestoreCount, clearSession } from "../canvas/sessionStore.js";
+import { hasWriteLease } from "../canvas/workspaceLease.js";
+import { cancelSketchInteraction } from "../sketch/interaction.js";
+import { closeSketchNote } from "../sketch/sketchNote.js";
+import { clearSketchClipboardHandoff } from "../sketch/handoff.js";
+import { clearSketchesForProject } from "../sketch/store.js";
 const SETTINGS_SECTIONS = [
     {
         id: "instructions",
-        label: "Custom instructions",
+        label: "Instructions",
         icon: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
     },
     {
@@ -27,11 +34,6 @@ const SETTINGS_SECTIONS = [
         icon: _jsx(IconColorSwatch, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
     },
 ];
-function portalContainer() {
-    return typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
-}
 /** Provides one settings surface for prompt, MCP, and token configuration. */
 export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }) {
     const [activeSection, setActiveSection] = useState(initialSection);
@@ -52,5 +54,16 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
         if (open)
             setActiveSection(initialSection);
     }, [initialSection, open]);
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: SETTINGS_SECTIONS.map((section) => (_jsxs("button", { className: `settings__nav-item${activeSection === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeSection === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeSection === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeSection === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onTakeOver: onTakeOver, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeSection === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
+    function resetCanvas() {
+        if (!hasWriteLease())
+            return;
+        cancelSketchInteraction();
+        closeSketchNote();
+        clearSketchClipboardHandoff();
+        clearSession();
+        clearRestoreCount();
+        void clearSketchesForProject(projectId).catch(() => undefined);
+        onOpenChange(false);
+    }
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: SETTINGS_SECTIONS.map((section) => (_jsxs("button", { className: `settings__nav-item${activeSection === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeSection === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) }), _jsxs("button", { className: "settings__nav-item settings__reset-canvas", "data-test": "settings-reset-canvas", type: "button", onClick: resetCanvas, children: [_jsx(IconTrash, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "settings__nav-item-label", children: "Reset canvas" })] })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeSection === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: "Custom instructions" }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeSection === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onTakeOver: onTakeOver, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeSection === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
 }

package/dist/inspector/shell/AgentStatusButton.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { type AgentClientSnapshot } from "../agent/client.js";
+import type { SettingsSection } from "../settings/SettingsDialog.js";
+export interface AgentStatusButtonProps {
+    onOpenSettings: (section: SettingsSection) => void;
+}
+export declare function AgentStatusButton({ onOpenSettings }: AgentStatusButtonProps): ReactElement;
+/** Renders the connection snapshot provided by the project client. */
+export declare function AgentStatusButtonView({ agent, onOpenSettings }: AgentStatusButtonProps & {
+    agent: AgentClientSnapshot;
+}): ReactElement;

package/dist/inspector/shell/AgentStatusButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconRobot } from "@tabler/icons-react";
+import { useAgentClient } from "../agent/client.js";
+import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
+import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+import { Button } from "../ui/Button.js";
+import { Tooltip } from "../ui/Tooltip.js";
+/** Renders a known MCP client logo, or a generic robot avatar. */
+function ConnectedAgentAvatar({ name }) {
+    const harness = name?.toLowerCase().match(/(?:^|[^a-z])(codex|claude|cursor)(?:$|[^a-z])/)?.[1];
+    return (_jsx("span", { className: "agent-status-button__avatars", role: "img", "aria-label": harness === "codex" ? "Codex" : harness === "claude" ? "Claude" : harness === "cursor" ? "Cursor" : "Agent", children: harness === "codex" ? _jsx(CodexAvatar, {})
+            : harness === "claude" ? _jsx(ClaudeAvatar, {})
+                : harness === "cursor" ? _jsx(CursorAvatar, {})
+                    : _jsx("span", { className: "agent-status-button__avatar", children: _jsx(IconRobot, { size: 24, color: "#000", "aria-hidden": "true" }) }) }));
+}
+function CodexAvatar() {
+    return (_jsx("span", { className: "agent-status-button__avatar", children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", children: _jsx("path", { fill: "#000", d: "M20.686 10.184a4.92 4.92 0 0 0-.435-4.092 5.1 5.1 0 0 0-2.35-2.093 5.17 5.17 0 0 0-3.15-.324A5.13 5.13 0 0 0 12.53 2.25a5.2 5.2 0 0 0-2.648-.14 5.15 5.15 0 0 0-2.364 1.185 5.05 5.05 0 0 0-1.447 2.19 5.1 5.1 0 0 0-1.953.85A5 5 0 0 0 2.693 7.9a4.98 4.98 0 0 0 .627 5.914 4.92 4.92 0 0 0 .432 4.092A5.1 5.1 0 0 0 6.104 20c.99.435 2.093.548 3.151.324.478.53 1.065.955 1.722 1.243a5.1 5.1 0 0 0 2.087.433 5.16 5.16 0 0 0 3.018-.968 5.05 5.05 0 0 0 1.858-2.537 5.1 5.1 0 0 0 1.953-.849 5 5 0 0 0 1.425-1.568 4.99 4.99 0 0 0-.632-5.894m-7.622 10.507a3.8 3.8 0 0 1-2.43-.867l.12-.067 4.037-2.299a.67.67 0 0 0 .332-.568v-5.614l1.706.974a.06.06 0 0 1 .032.043v4.653a3.73 3.73 0 0 1-1.114 2.646 3.83 3.83 0 0 1-2.683 1.099m-8.161-3.438a3.68 3.68 0 0 1-.452-2.511l.12.07 4.041 2.3a.66.66 0 0 0 .66 0l4.935-2.808v1.944a.07.07 0 0 1-.027.051l-4.09 2.326a3.85 3.85 0 0 1-2.88.373 3.8 3.8 0 0 1-2.307-1.745M3.84 8.58a3.78 3.78 0 0 1 1.998-1.644v4.73a.63.63 0 0 0 .328.564l4.912 2.796-1.707.973a.07.07 0 0 1-.06 0l-4.08-2.322a3.76 3.76 0 0 1-1.758-2.267 3.7 3.7 0 0 1 .367-2.83m14.02 3.213L12.934 8.97 14.635 8a.07.07 0 0 1 .06 0l4.08 2.326a3.77 3.77 0 0 1 1.467 1.508 3.7 3.7 0 0 1-.338 3.999 3.8 3.8 0 0 1-1.7 1.246v-4.73a.65.65 0 0 0-.343-.556m1.7-2.52-.12-.07-4.034-2.319a.66.66 0 0 0-.663 0L9.811 9.691V7.748a.05.05 0 0 1 .024-.051l4.08-2.323a3.84 3.84 0 0 1 4.073.174 3.76 3.76 0 0 0 1.332 1.63c.279.657.361 1.378.24 2.08zM8.88 12.72l-1.707-.97a.07.07 0 0 1-.032-.047v-4.64c.001-.712.207-1.409.595-2.01s.94-1.079 1.594-1.38a3.85 3.85 0 0 1 4.042.512l-.12.067-4.036 2.298a.67.67 0 0 0-.332.568zm.927-1.971 2.198-1.25 2.202 1.25v2.5l-2.194 1.25-2.202-1.25z" }) }) }));
+}
+function ClaudeAvatar() {
+    return (_jsx("span", { className: "agent-status-button__avatar", children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", children: _jsx("path", { fill: "#e8704e", d: "m5.924 15.296 3.934-2.206.066-.192-.066-.106h-.192l-.658-.04-2.248-.061-1.95-.081-1.888-.101-.476-.102L2 11.82l.046-.293.4-.268.572.05 1.266.086 1.898.132 1.377.08 2.041.213h.324l.046-.131-.112-.081-.086-.081-1.964-1.33L5.68 8.79l-1.114-.81-.602-.41-.304-.384-.132-.84.547-.602.734.05.188.051.744.572 1.59 1.23 2.076 1.527.304.253.121-.086.015-.06-.137-.228-1.129-2.04L7.377 4.94l-.536-.86-.142-.517a2.5 2.5 0 0 1-.086-.607l.623-.845L7.58 2l.83.111.35.304.516 1.179.835 1.857 1.297 2.524.38.749.202.693.076.213h.131v-.122l.107-1.421.197-1.746.193-2.246.065-.633.314-.759.623-.41.486.233.4.572-.055.37-.238 1.542-.466 2.419-.304 1.619h.177l.203-.203.82-1.087 1.377-1.72.608-.684.709-.753.455-.36h.861l.633.941-.284.972-.886 1.123-.734.951-1.053 1.417-.658 1.133.06.091.158-.015 2.38-.506 1.285-.233 1.535-.263.693.324.076.329-.273.673-1.64.405-1.925.384-2.866.678-.035.025.04.051 1.292.121.551.03h1.352l2.517.188.658.435.395.531-.066.405-1.012.516-1.368-.324-3.19-.759-1.093-.273h-.152v.091l.911.89 1.671 1.508 2.091 1.943.107.48-.269.38-.283-.04-1.838-1.381-.709-.623-1.605-1.35h-.106v.141l.37.542 1.954 2.934.1.9-.14.294-.507.177-.557-.101-1.144-1.604-1.18-1.806-.952-1.62-.117.067-.562 6.046-.263.308-.607.233-.507-.384-.268-.623.268-1.23.324-1.603.264-1.275.238-1.584.141-.526-.01-.035-.116.015-1.195 1.64-1.818 2.453-1.438 1.538-.344.137-.598-.309.056-.551.334-.491 1.99-2.53 1.2-1.568.775-.906-.005-.132h-.046l-5.286 3.43-.942.122-.405-.38.05-.622.193-.202 1.59-1.093z" }) }) }));
+}
+function CursorAvatar() {
+    return (_jsx("span", { className: "agent-status-button__avatar", children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", children: _jsx("path", { fill: "#000", d: "M11.576 2.11 3.359 6.731a.7.7 0 0 0-.262.256.7.7 0 0 0-.097.349v9.323c0 .25.138.48.359.604l8.214 4.625a.87.87 0 0 0 .853 0l8.215-4.625a.7.7 0 0 0 .262-.255.7.7 0 0 0-.097-.349V7.337a.7.7 0 0 0-.096-.35.7.7 0 0 0-.263-.255l-8.216-4.623a.88.88 0 0 0-.851 0m-7.56 5.173H19.87c.225 0 .367.24.254.43l-7.928 13.387c-.053.089-.196.053-.196-.05v-8.77a.48.48 0 0 0-.252-.425l-7.787-4.38c-.094-.053-.055-.192.052-.192" }) }) }));
+}
+export function AgentStatusButton({ onOpenSettings }) {
+    const runtimeConfig = useNudgeUiRuntimeConfig();
+    const agent = useAgentClient(runtimeConfig.projectId);
+    return _jsx(AgentStatusButtonView, { agent: agent, onOpenSettings: onOpenSettings });
+}
+/** Renders the connection snapshot provided by the project client. */
+export function AgentStatusButtonView({ agent, onOpenSettings }) {
+    const status = getAgentConnectionStatus(agent);
+    const connected = agent.paired || agent.pairedElsewhere;
+    const listening = connected && agent.listenerActive;
+    return (_jsx(Tooltip, { content: connected ? status.label : "Agent & MCP settings", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", className: "agent-status-button", "aria-label": connected ? `MCP · ${status.label}` : "Settings", "data-test": "settings-button", "data-mcp-connected": connected ? "true" : "false", "data-mcp-listening": listening ? "true" : "false", onClick: () => onOpenSettings("mcp"), children: [connected ? _jsx(ConnectedAgentAvatar, { name: agent.agentClientName }) : _jsxs("span", { className: "agent-status-button__avatars", children: [_jsx(CodexAvatar, {}), _jsx(ClaudeAvatar, {}), _jsx(CursorAvatar, {})] }), _jsx("span", { className: "agent-status-button__label", children: connected ? "MCP" : "Settings" }), connected ? (_jsx("span", { className: "agent-status-button__dot", "data-test": "agent-status-dot", "aria-hidden": "true" })) : null] }) }));
+}

package/dist/inspector/shell/AppShell.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorShell } from "./InspectorShell.js";
 import { CanvasWorkspace } from "../canvas/CanvasWorkspace.js";
 import { CanvasElementOverlay } from "../canvas/CanvasElementOverlay.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { readNudgeUiEditorTarget } from "../../transport/editor.js";
+import { TooltipGroup } from "../ui/Tooltip.js";
+import { CommentsOverlay } from "../comments/CommentsOverlay.js";
 export function AppShell() {
     const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
     const primaryUrl = typeof window === "undefined"
         ? null
         : readNudgeUiEditorTarget(window.location.href);
-    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+    return (_jsxs(TooltipGroup, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, canvasEnabled ? _jsx(CommentsOverlay, {}) : null, _jsx(InspectorShell, {})] }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useSyncExternalStore } from "react";
-import { isElementChange, useChanges, revertChange } from "../changes/changesLog.js";
+import { IconArrowBackUp } from "@tabler/icons-react";
+import { isComponentChange, isElementChange, isTextContentChange, isTokenChange, useChanges, revertChange, } from "../changes/changesLog.js";
 import { StaleChangeIndicator } from "../canvas/StaleChangeIndicator.js";
 import { Button } from "../ui/Button.js";
 import { Disclosure } from "../ui/Disclosure.js";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { presentChange } from "../changes/presentation.js";
 import { getStructuralChanges, getStructuralChangeDiagnostics, getStructuralDiagnosticRevision, revertStructuralChange, subscribeStructuralChanges, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { getRenderedInstanceChangeDiagnostics, getRenderedInstanceDiagnosticRevision, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
 import { getTextContentChangeDiagnostics, getTextProjectionDiagnosticRevision, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
 import { SketchChanges } from "../sketch/SketchChanges.js";
 import { useSketchStore } from "../sketch/store.js";
+import { useFrameComments } from "../comments/store.js";
+import { countPromptChanges } from "../prompt/generatePrompt.js";
 function groupChanges(changes) {
     const map = new Map();
     for (const change of changes) {
@@ -20,7 +25,6 @@ function groupChanges(changes) {
             group = {
                 key,
                 label: presentation.groupLabel,
-                file: presentation.file,
                 changes: [],
             };
             map.set(key, group);
@@ -29,9 +33,6 @@ function groupChanges(changes) {
     }
     return Array.from(map.values());
 }
-function sourceFile(change) {
-    return change.target.sourceSite.src.split(":").slice(0, -2).join(":") || change.target.sourceSite.src;
-}
 function structuralParentLabel(change, side) {
     const parent = side === "source" ? change.source.parent : change.destination.parent;
     const tag = side === "source" ? change.presentation.sourceParentTag : change.presentation.destinationParentTag;
@@ -60,8 +61,26 @@ function structuralReasonLabel(reason) {
 function structuralDiagnosticText(diagnostic) {
     return `${diagnostic.document}: ${diagnostic.status}${diagnostic.reason ? ` (${structuralReasonLabel(diagnostic.reason)})` : ""}`;
 }
+function changeTargetLabel(change, presentation) {
+    if (isComponentChange(change))
+        return change.target.componentName;
+    if (isTextContentChange(change))
+        return change.target.sourceSite.cid;
+    if (isTokenChange(change))
+        return change.tokenName;
+    return isElementChange(change) ? change.cid : presentation.groupLabel;
+}
+function changeActionLabel(change, presentation) {
+    if (isTextContentChange(change))
+        return "Changed text";
+    return `Changed ${presentation.propertyLabel}`;
+}
+function RevertButton({ dataTest, dataProperty, onClick, }) {
+    return (_jsx(Tooltip, { content: "Revert", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", className: "changes__revert", "data-test": dataTest, "data-property": dataProperty, label: "Revert change", onClick: onClick, children: _jsx(IconArrowBackUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }));
+}
 export function ChangesLog({ onClearSession }) {
     const changes = useChanges();
+    const comments = useFrameComments();
     const sketchStore = useSketchStore();
     const sketches = sketchStore.items;
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
@@ -71,26 +90,27 @@ export function ChangesLog({ onClearSession }) {
     useSyncExternalStore(subscribeRenderedInstanceDiagnostics, getRenderedInstanceDiagnosticRevision, getRenderedInstanceDiagnosticRevision);
     useSyncExternalStore(subscribeTextProjectionDiagnostics, getTextProjectionDiagnosticRevision, getTextProjectionDiagnosticRevision);
     const groups = useMemo(() => groupChanges(changes), [changes]);
-    const total = changes.length + structuralChanges.length + sketches.length;
-    if (total === 0 && sketchStore.error === null)
+    const total = countPromptChanges(changes, structuralChanges, sketches.length);
+    const hasLoggedChanges = total > 0 || sketchStore.error !== null;
+    if (!hasLoggedChanges && comments.length === 0)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Disclosure, { className: "changes", "data-test": "changes-log", triggerDataTest: "changes-toggle", title: "Changes", badge: total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, panelClassName: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
-                                    const presentation = presentChange(change);
-                                    const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
-                                        && change.instanceOverride
-                                        ? getRenderedInstanceChangeDiagnostics(change.instanceOverride.id)
-                                        : [];
-                                    const textDiagnostics = change.kind === "text-content"
-                                        ? getTextContentChangeDiagnostics(change.id)
-                                        : [];
-                                    return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "change-revert", "data-property": presentation.property, onClick: () => revertChange(change), children: "Revert" })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
-                                })] }, group.key))), structuralChanges.map((change) => (_jsxs("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__group-file", children: sourceFile(change) })] }), _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
-                                                        ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
-                                                            ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
-                                                            : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
-                                                        : "Visible" }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: change.kind === "move"
-                                                        ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
-                                                            ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
-                                                            : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
-                                                        : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id))), _jsx(SketchChanges, {})] })) }), onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [hasLoggedChanges ? _jsx(Disclosure, { className: "changes", "data-test": "changes-log", triggerDataTest: "changes-toggle", title: "Changes", badge: total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, panelClassName: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsx("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: group.changes.map((change, i) => {
+                                const presentation = presentChange(change);
+                                const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
+                                    && change.instanceOverride
+                                    ? getRenderedInstanceChangeDiagnostics(change.instanceOverride.id)
+                                    : [];
+                                const textDiagnostics = change.kind === "text-content"
+                                    ? getTextContentChangeDiagnostics(change.id)
+                                    : [];
+                                return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__target", "data-test": "change-target", children: changeTargetLabel(change, presentation) }), _jsx("span", { className: "changes__action", "data-test": "change-action", children: changeActionLabel(change, presentation) }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`)))] }), _jsx(RevertButton, { dataTest: "change-revert", dataProperty: presentation.property, onClick: () => revertChange(change) })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
+                            }) }, group.key))), structuralChanges.map((change) => (_jsx("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsx("span", { className: "changes__target", "data-test": "structural-target", children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__action", "data-test": "structural-action", children: change.kind === "move" ? "Moved" : "Deleted" }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
+                                                            ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
+                                                                ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
+                                                                : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
+                                                            : "Visible" }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: change.kind === "move"
+                                                            ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
+                                                                ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
+                                                                : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
+                                                            : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`)))] }), _jsx(RevertButton, { dataTest: "dom-change-revert", onClick: () => revertStructuralChange(change.id) })] }) }, change.id))), _jsx(SketchChanges, {})] })) }) : null, onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
 }

package/dist/inspector/shell/CopyPromptButton.js

@@ -1,32 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { iterationId } from "../canvas/frameContent.js";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { IconCheck, IconCopy, IconPlugConnected, IconSend, } from "@tabler/icons-react";
+import { IconArtboard, IconBoltFilled, IconCheck, IconChevronDown, IconCopy, IconPlugConnected, IconSend, } from "@tabler/icons-react";
 import { useChanges } from "../changes/changesLog.js";
-import { generatePrompt } from "../prompt/generatePrompt.js";
-import { copyToClipboard } from "../prompt/copyToClipboard.js";
+import { countPromptChanges } from "../prompt/generatePrompt.js";
 import { loadCustomInstructions, saveCustomInstructions } from "../prompt/promptSettings.js";
 import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
 import { SettingsDialog } from "../settings/SettingsDialog.js";
 import { Button } from "../ui/Button.js";
+import { portalContainer } from "../ui/portalContainer.js";
 import { StatusCallout } from "../ui/StatusCallout.js";
 import { getStructuralChanges, subscribeStructuralChanges } from "../projection/structuralProjection.js";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
-import { createPromptRevision, getAgentClient, useAgentClient, } from "../agent/client.js";
+import { getAgentClient, useAgentClient } from "../agent/client.js";
 import { createAgentPresentationAdapter } from "../canvas/agentPresentation.js";
-import { discardAgentDispatch, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
-import { getClipboardHandoffRevision, getLastClipboardReconciledCount, recordClipboardHandoff, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
-import { useSketches, markSketchesDispatching, markSketchesHandingOff, settleSketchDispatch } from "../sketch/store.js";
-import { createSketchAttachments, createSketchHandoffSnapshot, sketchMetadataForHandoff, } from "../sketch/handoff.js";
+import { verifyAndReconcileAgentDispatch } from "../agent/verification.js";
+import { getClipboardHandoffRevision, getLastClipboardReconciledCount, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
+import { useSketches, settleSketchDispatch } from "../sketch/store.js";
 import { SketchLayersPanel } from "../sketch/SketchLayersPanel.js";
 import { isSendPromptShortcut, SEND_PROMPT_HOTKEY_EVENT } from "./shortcuts.js";
+import { getFocusedCardId, getSelectedCardId, useCanvasCards, useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
+import { getEditableCardId, sketchBelongsToCard, useDrafts } from "../drafts/store.js";
+import { copyHandoff, deliverHandoff, prepareHandoff, prepareIterationImplementationPrompt } from "../workspace/handoff.js";
+import { copyToClipboard } from "../prompt/copyToClipboard.js";
+import { useFrameComments } from "../comments/store.js";
+import { reconcileComments } from "../comments/verification.js";
+import { getRegisteredFrames } from "../canvas/projection.js";
 export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
     const changes = useChanges();
+    const comments = useFrameComments();
+    useDrafts();
     const sketches = useSketches();
-    const pendingSketches = sketches.filter((item) => item.status === "pending");
+    const selectedDraftCardId = useSelectedCardId();
+    const focusedDraftCardId = useFocusedCardId();
+    const activeDraftCardId = getEditableCardId(selectedDraftCardId, focusedDraftCardId);
+    const canvasCards = useCanvasCards();
+    const activeContent = canvasCards.find((card) => card.id === activeDraftCardId)?.content;
+    const activeArtifactId = iterationId(activeContent);
+    const visibleSketches = sketches.filter((item) => sketchBelongsToCard(item.document, activeDraftCardId));
+    const pendingSketches = visibleSketches.filter((item) => item.status === "pending");
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
     useSyncExternalStore(subscribeClipboardHandoff, getClipboardHandoffRevision, getClipboardHandoffRevision);
     const reconciledCount = getLastClipboardReconciledCount();
     const [copied, setCopied] = useState(false);
+    const [preparing, setPreparing] = useState(false);
+    const handoffBusy = useRef(false);
+    const [saveMessage, setSaveMessage] = useState(null);
     const [agentCompletionStatus, setAgentCompletionStatus] = useState(null);
     const [sketchFallback, setSketchFallback] = useState(null);
     const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
@@ -39,8 +59,13 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     const agent = useAgentClient(runtimeConfig.projectId, agentClient);
     const agentRef = useRef(agent);
     agentRef.current = agent;
-    const hasChanges = changes.length + structuralChanges.length + pendingSketches.length > 0;
-    const changeCount = changes.length + structuralChanges.length + sketches.length;
+    const hasChanges = Boolean(activeArtifactId) || countPromptChanges(changes, structuralChanges, pendingSketches.length) + comments.length > 0;
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), 1500);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
     useEffect(() => {
         setCustomInstructions(loadCustomInstructions(runtimeConfig.projectId));
     }, [runtimeConfig.projectId]);
@@ -61,6 +86,13 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             return;
         let active = true;
         void verifyAndReconcileAgentDispatch(revision)
+            .then(async (removed) => {
+            for (const [, iframe] of getRegisteredFrames()) {
+                if (iframe.contentDocument)
+                    await reconcileComments(iframe.contentDocument);
+            }
+            return removed;
+        })
             .then((removed) => {
             if (!active)
                 return;
@@ -95,95 +127,116 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         && !connecting
         && !working;
     const canSend = agent.paired && agent.listenerActive && !working;
-    const disabled = connecting || working || (!canConnect && !hasChanges);
+    const changeCount = countPromptChanges(changes, structuralChanges, canSend ? pendingSketches.length : 0) + comments.length;
+    const disabled = preparing || connecting || working || (!canConnect && !hasChanges);
     const agentStatus = getAgentConnectionStatus(agent);
     const statusAction = agentStatus.action;
-    const label = copied
-        ? "Copied!"
-        : connecting
-            ? "Connecting…"
-            : working
-                ? "Agent working…"
-                : canConnect
-                    ? "Connect agent"
-                    : canSend
-                        ? "Send prompt"
-                        : "Copy prompt";
+    const label = preparing
+        ? "Saving iteration…"
+        : copied
+            ? "Copied!"
+            : connecting
+                ? "Connecting…"
+                : working
+                    ? "Agent working…"
+                    : canConnect && !activeArtifactId
+                        ? "Connect agent"
+                        : canSend && !activeArtifactId
+                            ? "Send prompt"
+                            : "Copy prompt";
     const icon = copied
         ? _jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-        : canConnect || connecting
+        : !activeArtifactId && (canConnect || connecting)
             ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-            : canSend || working
+            : !activeArtifactId && (canSend || working)
                 ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
                 : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" });
     async function onClick() {
-        if (disabled)
-            return;
-        if (canConnect) {
-            await agentClient.connect();
+        if (disabled || handoffBusy.current)
             return;
+        handoffBusy.current = true;
+        setPreparing(Boolean(activeArtifactId) && !canConnect);
+        try {
+            await handoff();
         }
-        const hints = {
-            framework: runtimeConfig.framework,
-            stylingSystem: runtimeConfig.stylingSystem,
-        };
-        const sketchHandoff = createSketchHandoffSnapshot(pendingSketches);
-        const sketchMetadata = sketchHandoff ? sketchMetadataForHandoff(sketchHandoff) : [];
-        const text = generatePrompt(changes, hints, structuralChanges, customInstructions, sketchMetadata);
-        setAgentCompletionStatus(null);
-        setSketchFallback(null);
-        if (canSend) {
-            const revision = createPromptRevision(changes, structuralChanges, sketchMetadata);
-            recordAgentDispatch(revision, changes, structuralChanges);
-            const clientDispatchId = sketchHandoff?.localBatchId ?? `dispatch-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-            let attachments = undefined;
-            try {
-                if (sketchHandoff) {
-                    await markSketchesDispatching(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId);
-                    attachments = await createSketchAttachments(sketchHandoff);
-                }
-                const response = await agentClient.dispatchPrompt(text, revision, {
-                    clientDispatchId,
-                    ...(attachments === undefined ? {} : { attachments }),
-                });
-                if (response) {
-                    if (sketchHandoff) {
-                        await markSketchesHandingOff(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId, response.request.requestId);
-                    }
-                    return;
+        finally {
+            handoffBusy.current = false;
+            setPreparing(false);
+        }
+    }
+    async function copyIterationPrompt(target) {
+        if (!activeArtifactId || disabled || handoffBusy.current)
+            return;
+        handoffBusy.current = true;
+        setCopied(false);
+        setPreparing(true);
+        try {
+            const request = {
+                cardId: getEditableCardId(getSelectedCardId(), getFocusedCardId()),
+                hints: { framework: runtimeConfig.framework, stylingSystem: runtimeConfig.stylingSystem },
+                customInstructions,
+                pendingSketches,
+            };
+            if (target === "application") {
+                const prompt = await prepareIterationImplementationPrompt(request);
+                try {
+                    await copyToClipboard(prompt);
                 }
-                if (sketchHandoff) {
-                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId);
-                    discardAgentDispatch(revision);
-                    const latestAgent = agentClient.getSnapshot();
-                    setSketchFallback({
-                        prompt: text,
-                        error: latestAgent.request?.error
-                            ?? latestAgent.error
-                            ?? "The agent did not accept the sketch attachments.",
-                    });
-                    return;
+                catch {
+                    throw new Error("The iteration was saved, but the prompt could not be copied. Try again.");
                 }
             }
-            catch (error) {
-                discardAgentDispatch(revision);
-                if (sketchHandoff) {
-                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId).catch(() => undefined);
-                    setSketchFallback({
-                        prompt: text,
-                        error: error instanceof Error ? error.message : "The sketch could not be sent to the agent.",
-                    });
-                    return;
+            else {
+                const prepared = await prepareHandoff(request);
+                try {
+                    await copyHandoff(prepared);
+                }
+                catch {
+                    throw new Error("The iteration was saved, but the prompt could not be copied. Try again.");
                 }
             }
-            discardAgentDispatch(revision);
+            setSaveMessage(null);
+            setCopied(true);
+        }
+        catch (error) {
+            setSaveMessage(error instanceof Error ? error.message : "The prompt could not be copied. Try again.");
+        }
+        finally {
+            handoffBusy.current = false;
+            setPreparing(false);
         }
-        await copyToClipboard(text);
-        if (changes.length > 0 || structuralChanges.length > 0) {
-            recordClipboardHandoff(changes, structuralChanges);
+    }
+    async function handoff() {
+        if (disabled)
+            return;
+        if (canConnect) {
+            await agentClient.connect();
+            return;
         }
+        let prepared;
+        try {
+            prepared = await prepareHandoff({
+                cardId: getEditableCardId(getSelectedCardId(), getFocusedCardId()),
+                hints: { framework: runtimeConfig.framework, stylingSystem: runtimeConfig.stylingSystem },
+                customInstructions,
+                pendingSketches,
+            });
+            setSaveMessage(null);
+        }
+        catch (error) {
+            setSaveMessage(error instanceof Error ? error.message : "The HTML iteration could not be saved.");
+            return;
+        }
+        setAgentCompletionStatus(null);
+        setSketchFallback(null);
+        const outcome = await deliverHandoff(prepared, runtimeConfig.projectId, canSend ? agentClient : null);
+        if (outcome.kind === "sketch-failed") {
+            setSketchFallback({ handoff: outcome.handoff, error: outcome.error });
+            return;
+        }
+        if (outcome.kind === "sent")
+            return;
         setCopied(true);
-        window.setTimeout(() => setCopied(false), 1500);
     }
     useEffect(() => {
         function onKeydown(event) {
@@ -231,12 +284,8 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         }
         openMcpConnection();
     }
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "data-agent-listening": agentStatus.kind === "listening" ? "true" : undefined, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, agentStatus.kind === "listening" ? (_jsx("span", { className: "copy-prompt__agent-listening", "data-test": "agent-listening-indicator", role: "status", "aria-label": "Agent listening" })) : null] }), _jsx(SketchLayersPanel, {}), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
-                            void copyToClipboard(sketchFallback.prompt).then(() => {
-                                if (changes.length > 0 || structuralChanges.length > 0) {
-                                    recordClipboardHandoff(changes, structuralChanges);
-                                }
-                                setSketchFallback(null);
-                            }).catch(() => undefined);
+    const promptButton = (_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": preparing || working || connecting ? "true" : undefined, onClick: activeArtifactId ? undefined : onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, activeArtifactId ? _jsx(IconChevronDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) : null] }));
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [activeArtifactId ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] }) }) })] }, activeDraftCardId)) : promptButton, _jsx(SketchLayersPanel, {}), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "agent-verified-hint", role: "status", children: "Changes implemented" })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
+                            void copyHandoff(sketchFallback.handoff).then(() => setSketchFallback(null)).catch(() => undefined);
                         }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onTakeOver: () => agentClient.takeOver(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }