nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/prompt/generatePrompt.js

@@ -5,6 +5,8 @@ import { formatComponentPropBaseline, formatComponentPropValue, } from "../compo
 import { boundRuntimeEvidence, isRuntimeGeneratedSource, normalizeRuntimeTag, normalizeRuntimeText, } from "../runtime/staticHtmlRuntimeIdentity.js";
 import { getSourceCoordinatePolicy } from "../runtime/runtimeConfig.js";
 import { DEFAULT_CUSTOM_INSTRUCTIONS } from "./promptSettings.js";
+import { getCommentsForTarget } from "../comments/store.js";
+import { documentTarget } from "../drafts/model.js";
 const EMPTY_SENTINEL = "<!-- No changes to export -->\n\nThe changes log is empty. Make a change in the Nudge UI inspector first.";
 function renderPrompt(sections, customInstructions) {
     const lines = [
@@ -230,7 +232,10 @@ function renderedInstanceDescription(ref) {
 function structuralChangeLine(change) {
     const target = renderedInstanceDescription(change.target);
     if (change.kind === "delete") {
-        return `- Remove ${target} from the source.`;
+        const invocation = change.target.locator.invocation;
+        return invocation
+            ? `- Remove the ${promptText(`<${invocation.componentName}>`)} invocation at ${invocation.callsiteId} from the source; keep its other invocations. It renders ${target}.`
+            : `- Remove ${target} from the source.`;
     }
     const before = change.destination.before;
     const sourceParent = sourceSiteLabel(change.source.parent);
@@ -244,17 +249,6 @@ function structuralChangeLine(change) {
         ? `- Move ${target} before ${renderedInstanceDescription(before)} in ${destinationParent}.`
         : `- Move ${target} to the end of ${destinationParent}.`;
 }
-function sketchLines(sketches) {
-    const titles = [...new Set(sketches.map((sketch) => sketch.capture.title || "(untitled)"))];
-    return [
-        ...titles.map((title) => `- Page title: ${promptText(title)}`),
-        ...sketches.flatMap((sketch) => [
-            ...(sketch.description ? [`- Description: ${promptText(sketch.description)}`] : []),
-            ...(sketch.annotations ?? []).map((annotation) => `- Annotation ${annotation.number}: ${promptText(annotation.description)}`),
-        ]),
-        "- Interpret the attached frozen screenshot, blue strokes, and numbered annotations as visual feedback. Do not derive selectors, source coordinates, or semantics from the strokes. Use each annotation number to match the note to its numbered dot.",
-    ];
-}
 function renderedInstanceKey(ref) {
     const { sourceSite, locator } = ref;
     return JSON.stringify([
@@ -263,6 +257,7 @@ function renderedInstanceKey(ref) {
         locator.props,
         locator.text,
         locator.ariaLabel ?? null,
+        locator.invocation?.callsiteId ?? null,
     ]);
 }
 /** Export final intent, not the gesture history required to replay the preview. */
@@ -315,10 +310,14 @@ function canonicalizeStructuralChanges(changes) {
     }
     return canonical;
 }
-export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS, sketches = []) {
+/** Counts the final edit intents exported by the prompt, preserving gesture history for undo. */
+export function countPromptChanges(changes, structuralChanges = [], sketchCount = 0) {
+    return canonicalizeChanges([...changes]).length + canonicalizeStructuralChanges(structuralChanges).length + sketchCount;
+}
+export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS, sketches = [], comments = getCommentsForTarget(documentTarget(window.location.href))) {
     const deduplicated = canonicalizeChanges(changes);
     const structuralIntent = canonicalizeStructuralChanges(structuralChanges);
-    if (deduplicated.length === 0 && structuralIntent.length === 0 && sketches.length === 0)
+    if (deduplicated.length === 0 && structuralIntent.length === 0 && sketches.length === 0 && comments.length === 0)
         return EMPTY_SENTINEL;
     const tokenChanges = deduplicated.filter(isTokenChange);
     const componentChanges = deduplicated.filter(isComponentChange);
@@ -398,10 +397,16 @@ export function generatePrompt(changes, frameworkHints, structuralChanges = [],
             lines: structuralIntent.map(structuralChangeLine),
         });
     }
-    if (sketches.length > 0) {
+    if (comments.length > 0) {
         sections.push({
-            heading: "Sketch annotations",
-            lines: sketchLines(sketches),
+            heading: "Element comments",
+            lines: comments.flatMap((comment) => [
+                `### <${comment.tag}> (${comment.target.sourceSite.src || "source unknown"})`,
+                `- Page: ${promptText(comment.route)}`,
+                `- Target: ${renderedInstanceDescription(comment.target)}`,
+                `- Note: ${promptText(comment.note)}`,
+                "",
+            ]),
         });
     }
     return renderPrompt(sections, customInstructions);

package/dist/inspector/runtime/runtimeConfig.d.ts

@@ -39,6 +39,11 @@ export interface NudgeUiRuntimeCapabilities {
      */
     readonly scopingSelectorPattern?: string;
 }
+/** Product features that a host can selectively expose in its inspector UI. */
+export interface NudgeUiRuntimeFeatures {
+    /** Whether Canvas can create filesystem-backed HTML iterations. */
+    readonly canvasIterations?: boolean;
+}
 /**
  * Browser knowledge supplied by a host Adapter before the inspector mounts.
  *
@@ -53,6 +58,8 @@ export interface NudgeUiRuntimeConfig {
     readonly framework: NudgeUiRuntimeFramework;
     readonly stylingSystem: string;
     readonly capabilities: NudgeUiRuntimeCapabilities;
+    /** Product-level feature switches; omitted features remain enabled. */
+    readonly features?: NudgeUiRuntimeFeatures;
     readonly tokenCatalog: readonly TokenDefinition[];
     readonly tokens: readonly TokenEntry[];
     readonly tokenDiagnostics: readonly TokenCatalogDiagnostic[];
@@ -91,6 +98,8 @@ export declare function normalizeNudgeUiRuntimeConfig(input: unknown): NudgeUiRu
 export declare function configureNudgeUiRuntime(config: NudgeUiRuntimeConfig): void;
 /** Returns the immutable runtime snapshot used by shared inspector Modules. */
 export declare function getNudgeUiRuntimeConfig(): NudgeUiRuntimeConfig;
+/** Returns whether a product feature is enabled; omitted flags default to enabled. */
+export declare function isNudgeUiFeatureEnabled(features: NudgeUiRuntimeFeatures | undefined, feature: keyof NudgeUiRuntimeFeatures): boolean;
 /**
  * Whether this document runs the explicit public landing demo (ADR-0014 and
  * ADR-0016). The plugin emits `demo: true` for the flagged demo route and for

package/dist/inspector/runtime/runtimeConfig.js

@@ -98,6 +98,15 @@ function optionalBoolean(input, field) {
     }
     return value;
 }
+function optionalFeatureBoolean(input, field) {
+    const value = input[field];
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== "boolean") {
+        throw new TypeError(`Nudge UI runtime feature "${field}" must be a boolean; received ${JSON.stringify(value)}.`);
+    }
+    return value;
+}
 function optionalNonEmptyString(input, field) {
     const value = input[field];
     if (value === undefined)
@@ -142,6 +151,15 @@ function normalizeCapabilities(input) {
         scopingSelectorPattern: optionalNonEmptyString(input, "scopingSelectorPattern"),
     };
 }
+function normalizeFeatures(input) {
+    if (input === undefined)
+        return undefined;
+    if (!isPlainRecord(input)) {
+        throw new TypeError('Nudge UI runtime configuration field "features" must be an object.');
+    }
+    const canvasIterations = optionalFeatureBoolean(input, "canvasIterations");
+    return canvasIterations === undefined ? {} : { canvasIterations };
+}
 function optionalDemoFlag(input) {
     const value = input.demo;
     if (value === undefined || value === false)
@@ -172,12 +190,14 @@ export function normalizeNudgeUiRuntimeConfig(input) {
     const demo = optionalDemoFlag(input);
     const demoPages = optionalStringArray(input, "demoPages");
     const demoCardLabels = optionalStringArray(input, "demoCardLabels");
+    const features = normalizeFeatures(input.features);
     const normalized = cloneAndFreeze({
         projectId: requireString(input, "projectId"),
         host: requireEnum(input, "host", RUNTIME_HOSTS),
         framework: requireEnum(input, "framework", RUNTIME_FRAMEWORKS),
         stylingSystem: optionalString(input, "stylingSystem"),
         capabilities: normalizeCapabilities(input.capabilities),
+        ...(features === undefined ? {} : { features }),
         tokenCatalog: optionalArray(input, "tokenCatalog"),
         tokens: optionalArray(input, "tokens"),
         tokenDiagnostics: optionalArray(input, "tokenDiagnostics"),
@@ -217,6 +237,10 @@ export function configureNudgeUiRuntime(config) {
 export function getNudgeUiRuntimeConfig() {
     return activeRuntimeConfig;
 }
+/** Returns whether a product feature is enabled; omitted flags default to enabled. */
+export function isNudgeUiFeatureEnabled(features, feature) {
+    return features?.[feature] !== false;
+}
 /**
  * Whether this document runs the explicit public landing demo (ADR-0014 and
  * ADR-0016). The plugin emits `demo: true` for the flagged demo route and for

package/dist/inspector/selection/sourceSite.d.ts

@@ -1,2 +1,14 @@
 /** Stable JSX instrumentation selector, shared by source and instance edits. */
 export declare function sourceSiteSelector(cid: string, src: string): string | null;
+/**
+ * Finds a source site whose position moved because its file gained or lost
+ * lines. It returns a site only when the original renders nothing and exactly
+ * one other position in the same file and component renders matching elements.
+ */
+export declare function relocateSourceSite(doc: Document, site: {
+    readonly cid: string;
+    readonly src: string;
+}, matches: (element: HTMLElement) => boolean): {
+    cid: string;
+    src: string;
+} | null;

package/dist/inspector/selection/sourceSite.js

@@ -1,4 +1,5 @@
 import { escapeAttrValue } from "../projection/cssEscapes.js";
+const SOURCE_POSITION = /^(.+):\d+:\d+$/;
 /** Stable JSX instrumentation selector, shared by source and instance edits. */
 export function sourceSiteSelector(cid, src) {
     if (!cid)
@@ -10,3 +11,30 @@ export function sourceSiteSelector(cid, src) {
     // single formatted line share a managed rule.
     return `[data-cid="${escapeAttrValue(cid)}"][data-src="${escapeAttrValue(src)}"]`;
 }
+/**
+ * Finds a source site whose position moved because its file gained or lost
+ * lines. It returns a site only when the original renders nothing and exactly
+ * one other position in the same file and component renders matching elements.
+ */
+export function relocateSourceSite(doc, site, matches) {
+    const file = SOURCE_POSITION.exec(site.src)?.[1];
+    const exact = sourceSiteSelector(site.cid, site.src);
+    if (!file || !exact)
+        return null;
+    try {
+        if (doc.querySelector(exact))
+            return null;
+        const sites = new Set();
+        const sameFile = `[data-cid="${escapeAttrValue(site.cid)}"][data-src^="${escapeAttrValue(`${file}:`)}"]`;
+        for (const element of doc.querySelectorAll(sameFile)) {
+            const src = element.getAttribute("data-src") ?? "";
+            if (SOURCE_POSITION.exec(src)?.[1] === file && matches(element))
+                sites.add(src);
+        }
+        const [src] = sites;
+        return sites.size === 1 && src ? { cid: site.cid, src } : null;
+    }
+    catch {
+        return null;
+    }
+}

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] }));
 }