nudge-ui 0.2.2 → 0.2.3

package/dist/inspector/agent/client.js

@@ -1,3 +1,4 @@
+import { reportAgentActivity, synchronizeAgentActivity } from "./activity.js";
 import { useEffect, useMemo, useSyncExternalStore } from "react";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { isDemoRuntime } from "../runtime/runtimeConfig.js";
@@ -153,6 +154,7 @@ export class AgentClient {
     started = false;
     connection = "offline";
     listenerActive = false;
+    agentClientName;
     companionReachable = false;
     paired = false;
     pairedElsewhere = false;
@@ -583,6 +585,10 @@ export class AgentClient {
         }, this.discoveryIntervalMs);
     }
     handleEvent(event) {
+        if (event.type === "activity") {
+            reportAgentActivity(this.projectId, event.activity);
+            return;
+        }
         if (event.type === "status" || event.type === "connected") {
             if (event.status.projectId !== this.projectId || event.status.protocolVersion !== AGENT_PROTOCOL_VERSION) {
                 this.handleDisconnect("The agent bridge project or protocol does not match this page.");
@@ -649,6 +655,7 @@ export class AgentClient {
         this.companionReachable = true;
         this.lastError = undefined;
         this.listenerActive = status.listenerActive;
+        this.agentClientName = status.agentClientName;
         this.paired = status.paired;
         this.pairedElsewhere = pairedElsewhere;
         this.connection = statusForConnection(status);
@@ -754,6 +761,7 @@ export class AgentClient {
             state,
             connection: this.connection,
             listenerActive: this.listenerActive,
+            ...(this.agentClientName === undefined ? {} : { agentClientName: this.agentClientName }),
             companionReachable: this.companionReachable,
             paired: this.paired,
             pairedElsewhere: this.pairedElsewhere,
@@ -788,17 +796,20 @@ export class AgentClient {
     }
     publish(stateOverride) {
         this.snapshot = Object.freeze(this.makeSnapshot(stateOverride));
+        synchronizeAgentActivity(this.projectId, this.snapshot.request?.requestId, this.snapshot.paired && this.snapshot.request?.status === "working", this.snapshot.request?.clientDispatchId);
         for (const listener of this.listeners)
             listener();
     }
 }
 let configuredTransport;
 const clients = new Map();
+const consumerCounts = new Map();
 /** Sets a host/test transport for subsequently created project clients. */
 export function configureAgentBridgeTransport(transport) {
     for (const client of clients.values())
         client.stop();
     clients.clear();
+    consumerCounts.clear();
     configuredTransport = transport;
 }
 /** Clears cached clients and their active streams. */
@@ -806,6 +817,22 @@ export function resetAgentClients() {
     for (const client of clients.values())
         client.stop();
     clients.clear();
+    consumerCounts.clear();
+}
+function retainAgentClient(client) {
+    consumerCounts.set(client, (consumerCounts.get(client) ?? 0) + 1);
+}
+function releaseAgentClient(client) {
+    const count = consumerCounts.get(client);
+    // A reset already stopped the client and dropped its consumers.
+    if (count === undefined)
+        return;
+    if (count > 1) {
+        consumerCounts.set(client, count - 1);
+        return;
+    }
+    consumerCounts.delete(client);
+    client.stop();
 }
 export function createAgentClient(options) {
     return new AgentClient({ ...options, transport: options.transport ?? configuredTransport });
@@ -824,8 +851,9 @@ export function getAgentClient(projectId, options = {}) {
 export function useAgentClient(projectId, suppliedClient) {
     const client = useMemo(() => suppliedClient ?? getAgentClient(projectId), [projectId, suppliedClient]);
     useEffect(() => {
+        retainAgentClient(client);
         client.start();
-        return () => client.stop();
+        return () => releaseAgentClient(client);
     }, [client]);
     return useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot);
 }

package/dist/inspector/agent/connectionStatus.js

@@ -23,7 +23,7 @@ export function getAgentConnectionStatus(snapshot) {
     if (snapshot.paired && !snapshot.listenerActive) {
         return {
             kind: "connected-not-listening",
-            label: "Project connected · Ask agent to listen",
+            label: "MCP Ready - Ask agent to listen",
             tone: "accent",
         };
     }

package/dist/inspector/agent/httpTransport.js

@@ -1,4 +1,4 @@
-import { AGENT_PROTOCOL_VERSION, defaultBridgePort, isAgentPromptRequest, } from "./protocol.js";
+import { AGENT_PROTOCOL_VERSION, defaultBridgePort, isAgentPromptRequest, isAgentActivity, } from "./protocol.js";
 import { getActiveCanvasDocument } from "../canvas/activeCanvasDocument.js";
 function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -168,6 +168,7 @@ function statusPayload(value) {
         projectId: status.projectId,
         connection: status.connection,
         listenerActive: status.listenerActive,
+        ...(typeof status.agentClientName === "string" ? { agentClientName: status.agentClientName.slice(0, 120) } : {}),
         paired: status.paired,
         request,
     };
@@ -189,6 +190,8 @@ function eventPayload(value) {
     if (type === "disconnected") {
         return { type: "disconnected", ...(stringValue(event.reason) ? { reason: stringValue(event.reason) } : {}) };
     }
+    if (type === "activity" && isAgentActivity(event.activity))
+        return { type: "activity", activity: event.activity };
     if (type === "canvas-command" && isRecord(event.command)) {
         // The Canvas controller owns command validation. Preserve the shared
         // shape here so the parent stage can consume this event without a second
@@ -322,7 +325,10 @@ export class HttpAgentBridgeTransport {
         const source = new EventSource(eventUrl.href);
         let closed = false;
         const handleMessage = (event) => {
-            const parsed = eventPayload(eventData(event));
+            const value = eventData(event);
+            if (isRecord(value) && "event" in value && (value.protocolVersion !== AGENT_PROTOCOL_VERSION || value.projectId !== request.projectId || value.sessionToken !== request.sessionToken))
+                return;
+            const parsed = eventPayload(value);
             if (parsed)
                 handlers.onEvent(parsed);
         };
@@ -330,6 +336,7 @@ export class HttpAgentBridgeTransport {
         source.addEventListener("status", handleMessage);
         source.addEventListener("connected", handleMessage);
         source.addEventListener("disconnected", handleMessage);
+        source.addEventListener("activity", handleMessage);
         source.addEventListener("canvas-command", handleMessage);
         source.onerror = () => {
             if (closed)

package/dist/inspector/agent/protocol.d.ts

@@ -1,4 +1,4 @@
-import type { AgentStatusSnapshot, CanvasCommand, CanvasCommandAcknowledgement, CanvasCommandResult, AgentSketchAttachment, PairingResponse, PromptDispatchResponse } from "../../internal/agent-protocol.js";
+import type { AgentActivity, AgentStatusSnapshot, CanvasCommand, CanvasCommandAcknowledgement, CanvasCommandResult, AgentSketchAttachment, PairingResponse, PromptDispatchResponse } from "../../internal/agent-protocol.js";
 /**
  * Browser transport port for the shared Nudge agent protocol.
  *
@@ -7,8 +7,8 @@ import type { AgentStatusSnapshot, CanvasCommand, CanvasCommandAcknowledgement,
  * boundary local lets inspector tests use a deterministic fake while the
  * companion remains the owner of MCP and Node-specific code.
  */
-export { AGENT_PROTOCOL_LIMITS, AGENT_PROTOCOL_VERSION, defaultBridgePort, CANVAS_COMMAND_TYPES, canonicalOrigin, isAgentPromptRequest, isAgentSketchAttachment, isAgentSketchAnnotation, isAgentSketchCaptureMetadata, isAgentSketchMetadata, isAgentStatusUpdate, isAllowedOrigin, isCanvasCommand, isCanvasGroup, isCanvasState, isCanonicalOrigin, isProjectIdentity, isSameOriginRoute, protocolError, validateSketchAttachments, validateRoutes, } from "../../internal/agent-protocol.js";
-export type { AgentConnectionState, AgentProjectIdentity, AgentPromptRequest, AgentDeliveredPrompt, AgentSketchAttachment, AgentSketchAnnotation, AgentSketchCaptureMetadata, AgentSketchMetadata, AgentRequestOutcome, AgentRequestStatus, AgentRoute, AgentStatusSnapshot, AgentStatusUpdate, BridgeCanvasCommandEvent, BridgeConnectedEvent, BridgeDisconnectedEvent, BridgeEnvelope, BridgeEvent, BridgeEventType, BridgeStatusEvent, CanvasCommand, CanvasCommandAcknowledgement, CanvasCommandError, CanvasCommandResult, CanvasGroup, CanvasGroupOwner, CanvasState, FitCanvasCommand, FocusCanvasGroupCommand, PairingRequest, PairingResponse, PresentRoutesCommand, PromptDispatchRequest, PromptDispatchResponse, ReadCanvasStateCommand, RemoveCanvasGroupCommand, StatusEventRequest, AgentProtocolVersion, } from "../../internal/agent-protocol.js";
+export { AGENT_PROTOCOL_LIMITS, AGENT_PROTOCOL_VERSION, defaultBridgePort, CANVAS_COMMAND_TYPES, canonicalOrigin, isAgentPromptRequest, isAgentSketchAttachment, isAgentSketchAnnotation, isAgentSketchCaptureMetadata, isAgentSketchMetadata, isAgentStatusUpdate, isAgentActivity, isAllowedOrigin, isCanvasCommand, isCanvasGroup, isCanvasState, isCanonicalOrigin, isProjectIdentity, isSameOriginRoute, protocolError, validateSketchAttachments, validateRoutes, } from "../../internal/agent-protocol.js";
+export type { AgentActivity, BridgeActivityEvent, AgentConnectionState, AgentProjectIdentity, AgentPromptRequest, AgentDeliveredPrompt, AgentSketchAttachment, AgentSketchAnnotation, AgentSketchCaptureMetadata, AgentSketchMetadata, AgentRequestOutcome, AgentRequestStatus, AgentRoute, AgentStatusSnapshot, AgentStatusUpdate, BridgeCanvasCommandEvent, BridgeConnectedEvent, BridgeDisconnectedEvent, BridgeEnvelope, BridgeEvent, BridgeEventType, BridgeStatusEvent, CanvasCommand, CanvasCommandAcknowledgement, CanvasCommandError, CanvasCommandResult, CanvasGroup, CanvasGroupOwner, CanvasState, FitCanvasCommand, FocusCanvasGroupCommand, PairingRequest, PairingResponse, PresentRoutesCommand, PromptDispatchRequest, PromptDispatchResponse, ReadCanvasStateCommand, RemoveCanvasGroupCommand, StatusEventRequest, AgentProtocolVersion, } from "../../internal/agent-protocol.js";
 export interface AgentBridgeEndpointConfig {
     readonly baseUrl?: string;
     readonly healthUrl?: string;
@@ -69,6 +69,9 @@ export interface AgentEventSubscription {
 }
 /** Events delivered by the companion's SSE stream. */
 export type AgentBridgeEvent = {
+    readonly type: "activity";
+    readonly activity: AgentActivity;
+} | {
     readonly type: "status";
     readonly status: AgentStatusSnapshot;
 } | {

package/dist/inspector/agent/protocol.js

@@ -6,4 +6,4 @@
  * boundary local lets inspector tests use a deterministic fake while the
  * companion remains the owner of MCP and Node-specific code.
  */
-export { AGENT_PROTOCOL_LIMITS, AGENT_PROTOCOL_VERSION, defaultBridgePort, CANVAS_COMMAND_TYPES, canonicalOrigin, isAgentPromptRequest, isAgentSketchAttachment, isAgentSketchAnnotation, isAgentSketchCaptureMetadata, isAgentSketchMetadata, isAgentStatusUpdate, isAllowedOrigin, isCanvasCommand, isCanvasGroup, isCanvasState, isCanonicalOrigin, isProjectIdentity, isSameOriginRoute, protocolError, validateSketchAttachments, validateRoutes, } from "../../internal/agent-protocol.js";
+export { AGENT_PROTOCOL_LIMITS, AGENT_PROTOCOL_VERSION, defaultBridgePort, CANVAS_COMMAND_TYPES, canonicalOrigin, isAgentPromptRequest, isAgentSketchAttachment, isAgentSketchAnnotation, isAgentSketchCaptureMetadata, isAgentSketchMetadata, isAgentStatusUpdate, isAgentActivity, isAllowedOrigin, isCanvasCommand, isCanvasGroup, isCanvasState, isCanonicalOrigin, isProjectIdentity, isSameOriginRoute, protocolError, validateSketchAttachments, validateRoutes, } from "../../internal/agent-protocol.js";

package/dist/inspector/agent/verification.d.ts

@@ -1,6 +1,15 @@
+import { type DraftTarget } from "../drafts/model.js";
 import { type ChangeRecord } from "../changes/changesLog.js";
 import { type StructuralChange } from "../projection/structuralProjection.js";
+export interface HandoffOwner {
+    readonly draftId: string;
+    readonly draftRevision: number;
+    readonly target: DraftTarget;
+    readonly frameIds: readonly string[];
+}
+export declare function captureHandoffOwner(cardId?: string | null): HandoffOwner;
 export interface HandoffSnapshot {
+    readonly owner: HandoffOwner;
     readonly changes: readonly ChangeRecord[];
     readonly structuralChanges: readonly StructuralChange[];
 }
@@ -22,7 +31,7 @@ export declare function handoffStructuralFingerprint(change: StructuralChange):
  */
 export declare function verifiedChangeKeys(sentChanges: readonly ChangeRecord[], doc?: Document): Set<string>;
 /** Captures the exact canonical edits associated with one dispatched prompt. */
-export declare function recordAgentDispatch(revision: number, changes: readonly ChangeRecord[], structuralChanges?: readonly StructuralChange[]): void;
+export declare function recordAgentDispatch(revision: number, changes: readonly ChangeRecord[], structuralChanges?: readonly StructuralChange[], owner?: HandoffOwner): void;
 /** Drops a captured revision when the bridge rejects its dispatch. */
 export declare function discardAgentDispatch(revision: number): void;
 /** Returns how many canonical edits were in flight for one dispatch. */
@@ -33,6 +42,7 @@ export declare function getAgentDispatchSize(revision: number): number;
  * records are preserved.
  */
 export declare function verifyAndReconcileHandoff(snapshot: HandoffSnapshot, doc?: Document | null): Promise<number>;
+export declare function documentBelongsToHandoff(doc: Document, owner: HandoffOwner): boolean;
 /** Reconciles the captured records for one completed connected-agent request. */
 export declare function verifyAndReconcileAgentDispatch(revision: number): Promise<number>;
 /** Test/session reset for in-memory dispatch snapshots. */

package/dist/inspector/agent/verification.js

@@ -1,16 +1,24 @@
+import { draftIdForCard } from "../drafts/store.js";
+import { getCanvasCards } from "../canvas/canvasStore.js";
+import { getRegisteredFrames, getCanvasCardIdForDocument } from "../canvas/projection.js";
+import { applicationTarget, targetFromKey, targetKey } from "../drafts/model.js";
 import { changeKey, tokenReference } from "../changes/model.js";
 import { selectorForManagedChange } from "../changes/managedStyleProjection.js";
-import { getWorkspaceChanges } from "../changes/workspaceChanges.js";
-import { getChangesList, isComponentChange, isTextContentChange, isTokenChange, reconcileVerifiedWorkspaceChanges, } from "../changes/changesLog.js";
+import { getActiveDraftChanges, getDraftChanges, reconcileDraftChanges } from "../changes/draftChanges.js";
+import { isComponentChange, isTextContentChange, isTokenChange, } from "../changes/changesLog.js";
 import { verifyPreview } from "../projection/managedStylesheet.js";
 import { resolveRenderedInstance } from "../projection/renderedInstance.js";
-import { documentStateKey, getStructuralChanges, } from "../projection/structuralProjection.js";
+import { documentStateKey, } from "../projection/structuralProjection.js";
 import { resolveTextProjectionTarget, resolveTextProjectionTextNode, } from "../projection/textProjection.js";
-import { applyHostWorkspaceProjection, compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
-import { isCanvasProjectionRevisionCurrent, projectWorkspaceSnapshotToDocument, } from "../canvas/projection.js";
-import { getActiveCanvasDocument } from "../canvas/activeCanvasDocument.js";
-import { getSelectedElement } from "../selection/selectionStore.js";
+import { applyHostDraftProjection, compileDraftProjection, } from "../projection/draftProjection.js";
+import { isCanvasProjectionRevisionCurrent, restoreCanonicalFrameProjection, projectDraftToDocument, } from "../canvas/projection.js";
 import { isEditorShellDocument } from "../runtime/editorShell.js";
+export function captureHandoffOwner(cardId) {
+    const draftId = (cardId && draftIdForCard(cardId)) || getActiveDraftChanges().draftId;
+    const workspace = getDraftChanges(draftId);
+    return { draftId, draftRevision: workspace.revision, target: targetFromKey(draftId) ?? applicationTarget(),
+        frameIds: getCanvasCards().filter((card) => draftIdForCard(card.id) === workspace.draftId).map((card) => card.id) };
+}
 const dispatches = new Map();
 function stableJsonValue(value) {
     if (Array.isArray(value))
@@ -142,8 +150,9 @@ export function verifiedChangeKeys(sentChanges, doc = document) {
     return verified;
 }
 /** Captures the exact canonical edits associated with one dispatched prompt. */
-export function recordAgentDispatch(revision, changes, structuralChanges = []) {
+export function recordAgentDispatch(revision, changes, structuralChanges = [], owner = captureHandoffOwner()) {
     dispatches.set(revision, {
+        owner: structuredClone(owner),
         changes: changes.map((change) => structuredClone(change)),
         structuralChanges: structuralChanges.map((change) => structuredClone(change)),
     });
@@ -186,32 +195,32 @@ function afterBrowserPaint(doc) {
  * observable after removing Nudge's own preview. Newer edits and ambiguous
  * records are preserved.
  */
-export async function verifyAndReconcileHandoff(snapshot, doc = activeVerificationDocument()) {
-    if (!doc)
+export async function verifyAndReconcileHandoff(snapshot, doc = handoffDocument(snapshot.owner)) {
+    if (!doc || !documentBelongsToHandoff(doc, snapshot.owner))
         return 0;
     const applyProjection = async (snapshot) => {
         if (doc === document && !isEditorShellDocument(doc)) {
-            applyHostWorkspaceProjection(compileWorkspaceProjection(snapshot));
+            applyHostDraftProjection(compileDraftProjection(snapshot));
             return "host";
         }
         if (doc === document)
             return null;
-        return projectWorkspaceSnapshotToDocument(doc, snapshot);
+        return projectDraftToDocument(doc, snapshot);
     };
     const sentByKey = new Map(snapshot.changes.map((change) => [changeKey(change), handoffChangeFingerprint(change)]));
-    const current = getChangesList();
+    const current = getDraftChanges(snapshot.owner.draftId).changes;
     const eligible = current.filter((change) => sentByKey.get(changeKey(change)) === handoffChangeFingerprint(change));
     const eligibleKeys = new Set(eligible.map(changeKey));
     const remaining = current.filter((change) => !eligibleKeys.has(changeKey(change)));
     // The same "still unchanged" rule for structural intent: only canonical
     // records byte-identical to the dispatched snapshot may be reconciled.
     const sentStructural = new Map(snapshot.structuralChanges.map((change) => [change.id, handoffStructuralFingerprint(change)]));
-    const currentStructural = getStructuralChanges();
+    const currentStructural = getDraftChanges(snapshot.owner.draftId).structuralChanges;
     const eligibleStructural = currentStructural.filter((change) => sentStructural.get(change.id) === handoffStructuralFingerprint(change));
     const eligibleStructuralIds = new Set(eligibleStructural.map((change) => change.id));
     const remainingStructural = currentStructural.filter((change) => !eligibleStructuralIds.has(change.id));
     try {
-        const currentWorkspace = getWorkspaceChanges();
+        const currentWorkspace = getDraftChanges(snapshot.owner.draftId);
         const previewRevision = await applyProjection({
             revision: currentWorkspace.revision,
             changes: remaining,
@@ -220,6 +229,8 @@ export async function verifyAndReconcileHandoff(snapshot, doc = activeVerificati
         if (previewRevision === null)
             return 0;
         await afterBrowserPaint(doc);
+        if (!documentBelongsToHandoff(doc, snapshot.owner))
+            return 0;
         if (typeof previewRevision === "number"
             && !isCanvasProjectionRevisionCurrent(doc, previewRevision))
             return 0;
@@ -228,27 +239,44 @@ export async function verifyAndReconcileHandoff(snapshot, doc = activeVerificati
         // A user can make another inspector edit while the two-frame verification
         // window is open. Recheck byte identity immediately before reconciliation
         // so a newer value at the same key can never be removed.
-        const currentByKey = new Map(getChangesList().map((change) => [changeKey(change), handoffChangeFingerprint(change)]));
+        const currentByKey = new Map(getDraftChanges(snapshot.owner.draftId).changes.map((change) => [changeKey(change), handoffChangeFingerprint(change)]));
         const stillVerified = new Set([...verified].filter((key) => currentByKey.get(key) === sentByKey.get(key)));
-        const currentStructuralById = new Map(getStructuralChanges().map((change) => [change.id, handoffStructuralFingerprint(change)]));
+        const currentStructuralById = new Map(getDraftChanges(snapshot.owner.draftId).structuralChanges.map((change) => [change.id, handoffStructuralFingerprint(change)]));
         const stillVerifiedStructural = new Set([...verifiedStructural].filter((id) => currentStructuralById.get(id) === sentStructural.get(id)));
         if (typeof previewRevision === "number"
             && !isCanvasProjectionRevisionCurrent(doc, previewRevision))
             return 0;
-        return reconcileVerifiedWorkspaceChanges(stillVerified, stillVerifiedStructural);
+        if (!documentBelongsToHandoff(doc, snapshot.owner))
+            return 0;
+        return reconcileDraftChanges(snapshot.owner.draftId, stillVerified, stillVerifiedStructural);
     }
     finally {
         // Reconciliation reapplies the canonical set. If it was unable to write
         // (for example, a read-only Canvas lease), restore the untouched set here.
-        const canonicalWorkspace = getWorkspaceChanges();
-        await applyProjection(canonicalWorkspace);
+        if (doc === document)
+            await applyProjection(getActiveDraftChanges());
+        else
+            restoreCanonicalFrameProjection(doc);
     }
 }
-function activeVerificationDocument() {
-    const selectedDocument = getSelectedElement()?.domElement.ownerDocument;
-    if (selectedDocument && selectedDocument !== document)
-        return selectedDocument;
-    return getActiveCanvasDocument() ?? (isEditorShellDocument() ? null : document);
+export function documentBelongsToHandoff(doc, owner) {
+    if (owner.target.kind === "application"
+        && targetKey(applicationTarget(doc.location.href)) !== targetKey(owner.target))
+        return false;
+    if (doc === document)
+        return owner.target.kind === "application" && !isEditorShellDocument(doc);
+    const id = getCanvasCardIdForDocument(doc);
+    return !!id && draftIdForCard(id) === owner.draftId;
+}
+function handoffDocument(owner) {
+    for (const [id, frame] of getRegisteredFrames()) {
+        if (draftIdForCard(id) !== owner.draftId)
+            continue;
+        const doc = frame.contentDocument;
+        if (doc && documentBelongsToHandoff(doc, owner))
+            return doc;
+    }
+    return owner.target.kind === "application" && !isEditorShellDocument() ? document : null;
 }
 /** Reconciles the captured records for one completed connected-agent request. */
 export async function verifyAndReconcileAgentDispatch(revision) {

package/dist/inspector/canvas/AgentActivityOverlay.d.ts

@@ -0,0 +1,13 @@
+import { type ActivityFile } from "../agent/activity.js";
+import { type FrameContent } from "./frameContent.js";
+export interface ActivityAttribution {
+    files: readonly ActivityFile[];
+    elements: readonly Element[];
+}
+/** Reuses rendered source identities. Iteration provenance cannot target application source. */
+export declare function attributeActivity(content: FrameContent, document: Document, files: readonly ActivityFile[]): ActivityAttribution;
+export declare function AgentActivityOverlay({ cardId, content, iframe }: {
+    cardId: string;
+    content: FrameContent;
+    iframe: HTMLIFrameElement | null;
+}): import("react").JSX.Element | null;

package/dist/inspector/canvas/AgentActivityOverlay.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const activityStyles = ".canvas-agent-activity {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 12;\n  overflow: hidden;\n  border-radius: 4px;\n}\n\n.canvas-agent-activity__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  max-width: 80%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 4px 10px 4px 4px;\n  border-radius: 20px;\n  background: #242424e8;\n  color: #fff;\n  font: 12px system-ui;\n  box-shadow: 0 2px 12px #0003;\n}\n\n.canvas-agent-activity__label canvas {\n  flex: 0 0 auto;\n}\n\n.canvas-agent-activity__label > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-agent-activity__shimmer {\n  position: absolute;\n  border-radius: 5px;\n  background: linear-gradient(110deg, transparent 20%, rgb(212 212 212 / 0.18) 35%, rgb(212 212 212 / 0.35) 50%, rgb(212 212 212 / 0.18) 65%, transparent 80%);\n  background-size: 250% 100%;\n  animation: nudge-component-shimmer 2.4s ease-in-out infinite;\n}\n\n@keyframes nudge-component-shimmer {\n  from { background-position: 150% 0; }\n  to { background-position: -150% 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-agent-activity__shimmer {\n    animation: none;\n  }\n}\n";
+import { useEffect, useState } from "react";
+import { ThinkingOrb } from "thinking-orbs";
+import { useAgentActivity } from "../agent/activity.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { parseDataSrc } from "../selection/resolveSelection.js";
+import { targetKey } from "../drafts/model.js";
+import { contentEditTarget } from "./frameContent.js";
+/** Reuses rendered source identities. Iteration provenance cannot target application source. */
+export function attributeActivity(content, document, files) {
+    const target = contentEditTarget(content);
+    if (target.kind === "html")
+        return { files: files.filter((file) => file.file === target.path), elements: [] };
+    const matched = new Set();
+    const elements = [];
+    for (const element of document.querySelectorAll("[data-src]")) {
+        const source = parseDataSrc(element.getAttribute("data-src") ?? "");
+        if (!source)
+            continue;
+        for (const file of files) {
+            if (source.file.replace(/^\.\//, "") !== file.file)
+                continue;
+            matched.add(file);
+            if (file.operation !== "edit" || (file.componentId && file.componentId !== element.getAttribute("data-cid")))
+                continue;
+            if (file.line !== undefined && (source.line < file.line || source.line > (file.endLine ?? file.line)))
+                continue;
+            elements.push(element);
+        }
+    }
+    // Highlight outer matches once when one component contains matching descendants.
+    return { files: [...matched], elements: [...new Set(elements)].filter((element, _index, all) => !all.some((parent) => parent !== element && parent.contains(element))) };
+}
+export function AgentActivityOverlay({ cardId, content, iframe }) {
+    const activity = useAgentActivity(getNudgeUiRuntimeConfig().projectId);
+    const [visual, setVisual] = useState({ files: [], highlights: [] });
+    useEffect(() => {
+        if (!activity.requestId || !iframe || !activity.files.length) {
+            setVisual({ files: [], highlights: [] });
+            return;
+        }
+        let detachDocument = () => { };
+        const attachDocument = () => {
+            detachDocument();
+            let document = null;
+            try {
+                document = iframe.contentDocument;
+            }
+            catch {
+                document = null;
+            }
+            if (!document?.defaultView) {
+                setVisual({ files: [], highlights: [] });
+                return;
+            }
+            const view = document.defaultView;
+            const ownedDocument = document;
+            let attribution = attributeActivity(content, ownedDocument, activity.files);
+            let frame = null;
+            let sourceChanged = false;
+            const measure = () => {
+                frame = null;
+                if (sourceChanged) {
+                    attribution = attributeActivity(content, ownedDocument, activity.files);
+                    sourceChanged = false;
+                }
+                const highlights = attribution.elements.slice(0, 64).map((element) => {
+                    const rect = element.getBoundingClientRect();
+                    return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+                }).filter((rect) => rect.width > 0 && rect.height > 0);
+                setVisual((previous) => {
+                    const sameFiles = previous.files.length === attribution.files.length && previous.files.every((file, index) => file === attribution.files[index]);
+                    const sameRects = previous.highlights.length === highlights.length && previous.highlights.every((rect, index) => { const next = highlights[index]; return rect.x === next.x && rect.y === next.y && rect.width === next.width && rect.height === next.height; });
+                    return sameFiles && sameRects ? previous : { files: attribution.files, highlights };
+                });
+            };
+            const schedule = () => { if (frame === null)
+                frame = view.requestAnimationFrame(measure); };
+            const mutations = new MutationObserver((records) => {
+                sourceChanged ||= records.some((record) => record.type === "childList" || record.attributeName === "data-src" || record.attributeName === "data-cid");
+                schedule();
+            });
+            mutations.observe(ownedDocument.documentElement, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["data-src", "data-cid", "class", "style"] });
+            const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+            resize?.observe(ownedDocument.documentElement);
+            for (const element of attribution.elements.slice(0, 64))
+                resize?.observe(element);
+            view.addEventListener("scroll", schedule, true);
+            view.addEventListener("resize", schedule);
+            measure();
+            detachDocument = () => {
+                mutations.disconnect();
+                resize?.disconnect();
+                view.removeEventListener("scroll", schedule, true);
+                view.removeEventListener("resize", schedule);
+                if (frame !== null)
+                    view.cancelAnimationFrame(frame);
+            };
+        };
+        attachDocument();
+        iframe.addEventListener("load", attachDocument);
+        return () => { iframe.removeEventListener("load", attachDocument); detachDocument(); };
+    }, [activity, content, iframe]);
+    const submitted = activity.requestId !== null && activity.targets.includes(cardId)
+        && (!activity.target || targetKey(activity.target) === targetKey(contentEditTarget(content)));
+    const working = activity.requestId !== null && (submitted || visual.files.length > 0);
+    if (!working)
+        return null;
+    return _jsxs("div", { className: "canvas-agent-activity", "data-test": `canvas-agent-activity-${cardId}`, children: [visual.highlights.map((rect, index) => _jsx("div", { className: "canvas-agent-activity__shimmer", "data-test": "canvas-agent-component-shimmer", style: { left: rect.x, top: rect.y, width: rect.width, height: rect.height } }, index)), _jsxs("span", { className: "canvas-agent-activity__label", role: "status", children: [_jsx(ThinkingOrb, { state: "solving", size: 20, theme: "dark", "aria-hidden": "true" }), _jsx("span", { children: "Agent working\u2026" })] }), _jsx("style", { children: activityStyles })] });
+}

package/dist/inspector/canvas/CanvasCard.d.ts

@@ -1,12 +1,19 @@
 import { type ReactElement } from "react";
-import { type CanvasCard, type CanvasPresentation } from "./canvasStore.js";
+import { type CanvasCard } from "./canvasStore.js";
+import { type CanvasPresentation } from "./viewStore.js";
 import type { InspectorSession } from "../session/sessionFactory.js";
 interface CanvasCardProps {
     card: CanvasCard;
     presentation?: CanvasPresentation;
     presentationCard?: boolean;
+    linkedToActive?: boolean;
     onShowFocus?: (cardId: string) => void;
+    onDuplicate?: (cardId: string) => void;
+    onCreateIteration?: (cardId: string, position?: {
+        x: number;
+        y: number;
+    }) => Promise<string>;
     documentOwner?: InspectorSession;
 }
-export declare function CanvasCard({ card, presentation, presentationCard, onShowFocus, documentOwner }: CanvasCardProps): ReactElement;
+export declare function CanvasCard({ card, presentation, presentationCard, linkedToActive, onShowFocus, onDuplicate, onCreateIteration, documentOwner }: CanvasCardProps): ReactElement;
 export {};