@spotpatch/runtime 1.8.0 → 1.10.0

package/dist/index.js

@@ -1,6 +1,27 @@
+import {
+  createDataFlowRuntime,
+  getDataFlowRuntime,
+  installDataFlowPrelude,
+  mergeComponentDataFlowReport,
+  mergePageDataFlowReport
+} from "./chunk-QY5T4DPA.js";
+import {
+  getDataFlowExtension
+} from "./chunk-NII5OBAN.js";
+import {
+  getExternalHandoffExtension
+} from "./chunk-XBD55BCF.js";
+import {
+  UI_MARKER_ATTRIBUTE,
+  UI_Z_INDEX,
+  createButton,
+  createMarkedElement
+} from "./chunk-7ES63LA7.js";
+
 // src/controller/runtime-controller.ts
 import { createReact18Adapter } from "@spotpatch/react-adapter";
 import {
+  DATA_FLOW_SCHEMA_VERSION as DATA_FLOW_SCHEMA_VERSION2,
   MAX_ANNOTATION_INSTRUCTION_CHARACTERS as MAX_ANNOTATION_INSTRUCTION_CHARACTERS3
 } from "@spotpatch/shared";
 
@@ -76,6 +97,7 @@ function createAnnotation(input) {
 
 // src/api/runtime-api.ts
 import {
+  DATA_FLOW_SCHEMA_VERSION,
   SPOTPATCH_ENDPOINTS,
   SPOTPATCH_TOKEN_HEADER,
   getAgentJobEndpoint
@@ -337,15 +359,36 @@ function parseJson(text2) {
     throw new RuntimeApiError();
   }
 }
-async function readJsonEnvelope(response) {
+async function readJsonEnvelope(response, maximumBytes = MAX_JSON_RESPONSE_BYTES) {
   const payload = parseJson(
-    await readBoundedText(response, MAX_JSON_RESPONSE_BYTES)
+    await readBoundedText(response, maximumBytes)
   );
   if (!response.ok) {
     throw new RuntimeApiError(readFailureCode(payload));
   }
   return readSuccessData(payload);
 }
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function isReportCompleteness(value) {
+  return isRecord2(value) && typeof value.complete === "boolean" && typeof value.visitedModules === "number" && typeof value.visitedCallsites === "number" && typeof value.frontierCount === "number";
+}
+function isDataFlowCapability(value) {
+  return isRecord2(value) && typeof value.enabled === "boolean" && (value.staticAnalysis === "available" || value.staticAnalysis === "partial" || value.staticAnalysis === "unavailable") && value.runtimeObservation === "dispatch-only" && value.responseShape === "consumed-fields-only" && value.aiAssistance === "disabled" && Array.isArray(value.reasons);
+}
+function isDataFlowDependency(value) {
+  return isRecord2(value) && typeof value.id === "string" && typeof value.kind === "string" && typeof value.direction === "string" && typeof value.execution === "string" && typeof value.proof === "string" && typeof value.association === "string" && Array.isArray(value.parameters) && isRecord2(value.response) && isStringArray(value.response.consumedFields) && isStringArray(value.evidenceIds) && isStringArray(value.observationIds);
+}
+function isDataFlowReportBase(value) {
+  return isRecord2(value) && value.schemaVersion === DATA_FLOW_SCHEMA_VERSION && typeof value.reportId === "string" && isRecord2(value.baseline) && typeof value.baseline.registryEpoch === "string" && typeof value.baseline.analyzerVersion === "string" && isStringArray(value.baseline.analyzedSourceVersions) && isDataFlowCapability(value.capability) && Array.isArray(value.dependencies) && value.dependencies.every(isDataFlowDependency) && Array.isArray(value.evidence) && Array.isArray(value.diagnostics) && isReportCompleteness(value.completeness);
+}
+function isComponentDataFlowReport(value) {
+  return isDataFlowReportBase(value) && isRecord2(value) && isRecord2(value.component) && isRecord2(value.component.source) && typeof value.component.source.fileId === "string" && typeof value.component.source.sourceVersion === "string";
+}
+function isPageDataFlowReport(value) {
+  return isDataFlowReportBase(value);
+}
 function parseCapability(value, expected) {
   if (!isAgentCapabilitySnapshot(value) || value.providerProfileId !== expected.providerProfileId || value.modelProfileId !== expected.modelProfileId) {
     throw new RuntimeApiError();
@@ -397,7 +440,7 @@ function createRuntimeApi(options) {
     }
     pendingRequests.clear();
   }
-  async function requestJson(endpoint, method, body) {
+  async function requestJson(endpoint, method, body, maximumResponseBytes = MAX_JSON_RESPONSE_BYTES) {
     const abortController = new AbortController();
     pendingRequests.add(abortController);
     try {
@@ -410,7 +453,7 @@ function createRuntimeApi(options) {
         ...body === void 0 ? {} : { body: JSON.stringify(body) },
         signal: abortController.signal
       });
-      return await readJsonEnvelope(response);
+      return await readJsonEnvelope(response, maximumResponseBytes);
     } finally {
       pendingRequests.delete(abortController);
     }
@@ -504,6 +547,30 @@ function createRuntimeApi(options) {
       }
       return Object.freeze({ ...data });
     },
+    async componentDataFlowReport(request) {
+      const data = await requestJson(
+        SPOTPATCH_ENDPOINTS.dataFlowComponentReport,
+        "POST",
+        request,
+        options.dataFlowReportMaxBytes
+      );
+      if (!isComponentDataFlowReport(data)) {
+        throw new RuntimeApiError();
+      }
+      return deepFreeze(data);
+    },
+    async pageDataFlowReport(request) {
+      const data = await requestJson(
+        SPOTPATCH_ENDPOINTS.dataFlowPageReport,
+        "POST",
+        request,
+        options.dataFlowReportMaxBytes
+      );
+      if (!isPageDataFlowReport(data)) {
+        throw new RuntimeApiError();
+      }
+      return deepFreeze(data);
+    },
     async openEditor(request) {
       const data = await requestJson(SPOTPATCH_ENDPOINTS.openEditor, "POST", request);
       if (!isRecord2(data) || data.editor !== "auto" && data.editor !== "vscode" && data.editor !== "cursor") {
@@ -1071,13 +1138,6 @@ function getVisibleElementRect(element2, view) {
   return rect.width > 0 && rect.height > 0 ? rect : void 0;
 }
 
-// src/ui/ui-constants.ts
-var UI_MARKER_ATTRIBUTE = "data-spotpatch-ui";
-var UI_Z_INDEX = Object.freeze({
-  highlight: 2147483646,
-  controls: 2147483647
-});
-
 // src/picker/hit-test.ts
 function isInsideSpotPatchUI(element2) {
   if (element2.closest(`[${UI_MARKER_ATTRIBUTE}]`) !== null) {
@@ -1683,20 +1743,6 @@ import {
   SPOTPATCH_REPOSITORY_URL
 } from "@spotpatch/shared";
 
-// src/ui/dom.ts
-function createMarkedElement(document, tagName) {
-  const element2 = document.createElement(tagName);
-  element2.setAttribute(UI_MARKER_ATTRIBUTE, "");
-  return element2;
-}
-function createButton(document, label, className = "") {
-  const button = createMarkedElement(document, "button");
-  button.type = "button";
-  button.className = className;
-  button.textContent = label;
-  return button;
-}
-
 // src/ui/agent-panel.ts
 var AGENT_PANEL_STYLES = `
   .spotpatch-agent {
@@ -2552,6 +2598,8 @@ var STATUS_ZH = Object.freeze({
   reverted: "\u5DF2\u64A4\u9500",
   failed: "\u5931\u8D25"
 });
+var EXTERNAL_HANDOFF_ERROR_EN = "The external Agent handoff request failed.";
+var EXTERNAL_HANDOFF_ERROR_ZH = "\u5916\u90E8 Agent \u4EA4\u63A5\u8BF7\u6C42\u5931\u8D25\u3002";
 var ERROR_MESSAGES_EN = Object.freeze({
   [ERROR_CODES2.INVALID_REQUEST]: "The Agent request was rejected as invalid.",
   [ERROR_CODES2.INVALID_TOKEN]: "The local SpotPatch session expired.",
@@ -2560,6 +2608,9 @@ var ERROR_MESSAGES_EN = Object.freeze({
   [ERROR_CODES2.SOURCE_OUTSIDE_ROOT]: "The selected source is outside the project.",
   [ERROR_CODES2.SOURCE_TOO_LARGE]: "The selected source exceeds the safety limit.",
   [ERROR_CODES2.EDITOR_OPEN_FAILED]: "The editor request failed.",
+  [ERROR_CODES2.DATA_FLOW_DISABLED]: "Component data-flow analysis is disabled.",
+  [ERROR_CODES2.DATA_FLOW_SOURCE_STALE]: "The selected source changed. Select the component again.",
+  [ERROR_CODES2.DATA_FLOW_ANALYSIS_CANCELLED]: "Component data-flow analysis was cancelled.",
   [ERROR_CODES2.AI_DISABLED]: "AI execution is disabled in Vite configuration.",
   [ERROR_CODES2.PROVIDER_NOT_CONFIGURED]: "The provider Key environment variable is missing on the Vite process.",
   [ERROR_CODES2.PROVIDER_AUTH_FAILED]: "The provider rejected authentication. Check the server-side Key.",
@@ -2570,6 +2621,24 @@ var ERROR_MESSAGES_EN = Object.freeze({
   [ERROR_CODES2.AGENT_BUSY]: "Another write Agent job is still active.",
   [ERROR_CODES2.AGENT_LIMIT_EXCEEDED]: "The Agent stopped at a configured time, turn, output, or size limit.",
   [ERROR_CODES2.AGENT_CANCELLED]: "The Agent job was cancelled.",
+  [ERROR_CODES2.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_EN,
+  [ERROR_CODES2.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_EN,
   [ERROR_CODES2.WORKTREE_DIRTY]: "Confirm inclusion of local changes before running AI.",
   [ERROR_CODES2.WORKTREE_NOT_REPOSITORY]: "Vite root must be an initialized Git repository root.",
   [ERROR_CODES2.WORKTREE_OPERATION_IN_PROGRESS]: "Finish the active merge, rebase, cherry-pick, or revert.",
@@ -2595,6 +2664,9 @@ var ERROR_MESSAGES_ZH = Object.freeze({
   [ERROR_CODES2.SOURCE_OUTSIDE_ROOT]: "\u9009\u4E2D\u6E90\u7801\u4F4D\u4E8E\u9879\u76EE\u6839\u76EE\u5F55\u4E4B\u5916\u3002",
   [ERROR_CODES2.SOURCE_TOO_LARGE]: "\u9009\u4E2D\u6E90\u7801\u8D85\u8FC7\u5B89\u5168\u5927\u5C0F\u9650\u5236\u3002",
   [ERROR_CODES2.EDITOR_OPEN_FAILED]: "\u7F16\u8F91\u5668\u6253\u5F00\u8BF7\u6C42\u5931\u8D25\u3002",
+  [ERROR_CODES2.DATA_FLOW_DISABLED]: "\u7EC4\u4EF6\u6570\u636E\u94FE\u8DEF\u5206\u6790\u672A\u542F\u7528\u3002",
+  [ERROR_CODES2.DATA_FLOW_SOURCE_STALE]: "\u9009\u4E2D\u6E90\u7801\u5DF2\u7ECF\u53D8\u5316\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u7EC4\u4EF6\u3002",
+  [ERROR_CODES2.DATA_FLOW_ANALYSIS_CANCELLED]: "\u7EC4\u4EF6\u6570\u636E\u94FE\u8DEF\u5206\u6790\u5DF2\u53D6\u6D88\u3002",
   [ERROR_CODES2.AI_DISABLED]: "Vite \u914D\u7F6E\u672A\u542F\u7528 AI \u6267\u884C\u3002",
   [ERROR_CODES2.PROVIDER_NOT_CONFIGURED]: "\u542F\u52A8 Vite \u7684\u8FDB\u7A0B\u4E2D\u7F3A\u5C11\u6A21\u578B\u670D\u52A1 Key \u73AF\u5883\u53D8\u91CF\u3002",
   [ERROR_CODES2.PROVIDER_AUTH_FAILED]: "\u6A21\u578B\u670D\u52A1\u9274\u6743\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u670D\u52A1\u7AEF Key\u3002",
@@ -2605,6 +2677,24 @@ var ERROR_MESSAGES_ZH = Object.freeze({
   [ERROR_CODES2.AGENT_BUSY]: "\u5F53\u524D\u9879\u76EE\u5DF2\u6709\u4E00\u4E2A\u5199\u5165\u4EFB\u52A1\u6B63\u5728\u8FD0\u884C\u3002",
   [ERROR_CODES2.AGENT_LIMIT_EXCEEDED]: "Agent \u8FBE\u5230\u65F6\u95F4\u3001\u8F6E\u6B21\u3001\u8F93\u51FA\u6216\u53D8\u66F4\u89C4\u6A21\u9650\u5236\u3002",
   [ERROR_CODES2.AGENT_CANCELLED]: "Agent \u4EFB\u52A1\u5DF2\u53D6\u6D88\u3002",
+  [ERROR_CODES2.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [ERROR_CODES2.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_ZH,
   [ERROR_CODES2.WORKTREE_DIRTY]: "\u8FD0\u884C AI \u524D\uFF0C\u8BF7\u660E\u786E\u540C\u610F\u5C06\u5F53\u524D\u672C\u5730\u4FEE\u6539\u7EB3\u5165\u9694\u79BB\u57FA\u7EBF\u3002",
   [ERROR_CODES2.WORKTREE_NOT_REPOSITORY]: "Vite \u6839\u76EE\u5F55\u4E0D\u662F\u5DF2\u521D\u59CB\u5316 Git \u4ED3\u5E93\u7684\u9876\u5C42\u76EE\u5F55\u3002",
   [ERROR_CODES2.WORKTREE_OPERATION_IN_PROGRESS]: "\u8BF7\u5148\u5B8C\u6210\u5F53\u524D merge\u3001rebase\u3001cherry-pick \u6216 revert\uFF0C\u518D\u8FD0\u884C AI\u3002",
@@ -3029,6 +3119,15 @@ var DIALOG_FALLBACK_HEIGHT = Object.freeze({
   previewing: 560,
   selected: DIALOG_MAX_HEIGHT
 });
+function resolveStyleNonce(document) {
+  const nonces = new Set(
+    [...document.querySelectorAll("script[nonce]")].map((script) => script.nonce?.trim() ?? "").filter(Boolean)
+  );
+  if (nonces.size !== 1) {
+    return void 0;
+  }
+  return nonces.values().next().value;
+}
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
@@ -3739,7 +3838,18 @@ function summaryLine(summary, prefix) {
   const line = summary.split("\n").find((candidate) => candidate.startsWith(`${prefix}: `));
   return line?.slice(prefix.length + 2).trim();
 }
-function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: false }), localePreference = "auto") {
+function createUnavailableDataFlowPanel(document, changesRoot, diagnosticsRoot) {
+  changesRoot.append(diagnosticsRoot);
+  return Object.freeze({
+    root: changesRoot,
+    refreshButton: createButton(document, ""),
+    styles: document.createElement("style"),
+    dispose: () => void 0,
+    render: () => void 0,
+    resetView: () => void 0
+  });
+}
+function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: false }), localePreference = "auto", dataFlowEnabled = false, externalAgentEnabled = false, framework = "vite", sessionId = "") {
   const localizer = createUiLocalizer(document, localePreference);
   let messages = localizer.messages();
   const host = document.createElement("spotpatch-root");
@@ -3855,7 +3965,29 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   summary.className = "spotpatch-summary";
   diagnostics.append(diagnosticsLabel, summary);
   const agentPanel = createAgentPanel(document, ai, localizer);
-  selectionPanel.append(targetsPanel, diagnostics, agentPanel.root);
+  const changesPanel = createMarkedElement(document, "div");
+  const externalHandoffPanel = externalAgentEnabled ? getExternalHandoffExtension()?.createPanel(
+    document,
+    framework,
+    localizer.locale,
+    sessionId,
+    localizer.subscribe,
+    placeDialog
+  ) : void 0;
+  changesPanel.append(
+    targetsPanel,
+    agentPanel.root,
+    ...externalHandoffPanel === void 0 ? [] : [externalHandoffPanel.root]
+  );
+  const dataFlowPanel = getDataFlowExtension()?.createPanel(
+    document,
+    dataFlowEnabled,
+    localizer.locale,
+    changesPanel,
+    diagnostics,
+    placeDialog
+  ) ?? createUnavailableDataFlowPanel(document, changesPanel, diagnostics);
+  selectionPanel.append(dataFlowPanel.root);
   const previewPanel = createMarkedElement(document, "div");
   previewPanel.className = "spotpatch-preview-panel";
   previewPanel.hidden = true;
@@ -3898,6 +4030,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     agentPanel.testButton,
     addTargetButton,
     agentPanel.runButton,
+    ...externalHandoffPanel === void 0 ? [] : [externalHandoffPanel.sendButton],
     previewButton,
     agentPanel.cancelButton,
     agentPanel.applyButton,
@@ -3913,8 +4046,19 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   liveRegion.className = "spotpatch-live";
   liveRegion.setAttribute("aria-live", "polite");
   liveRegion.setAttribute("aria-atomic", "true");
-  shadowRoot.append(
+  const styles2 = [
     createStyles(document),
+    dataFlowPanel.styles,
+    ...externalHandoffPanel === void 0 ? [] : [externalHandoffPanel.styles]
+  ];
+  const styleNonce = resolveStyleNonce(document);
+  if (styleNonce !== void 0) {
+    for (const style of styles2) {
+      style.nonce = styleNonce;
+    }
+  }
+  shadowRoot.append(
+    ...styles2,
     selectionHighlights,
     highlight,
     dialog,
@@ -3932,6 +4076,13 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   let currentTargets = [];
   let currentMaximum = 0;
   let currentEditorFeedbackState = "idle";
+  let currentDataFlowState = Object.freeze({
+    component: Object.freeze({
+      status: dataFlowEnabled ? "idle" : "disabled"
+    }),
+    page: Object.freeze({ status: dataFlowEnabled ? "idle" : "disabled" }),
+    observationCount: 0
+  });
   function renderEditorStatus(state) {
     currentEditorFeedbackState = state;
     editorFeedback.dataset.state = state;
@@ -4189,6 +4340,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     openEditorButton.disabled = !canOpenEditor;
     previewButton.disabled = !canPreview;
     agentPanel.setContextReady(canPreview);
+    externalHandoffPanel?.setContextReady(canPreview);
     updateContextOverview(summaryText);
     placeDialog();
   }
@@ -4205,6 +4357,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     previewButton.hidden = !selected;
     secondaryActions.hidden = !selected;
     agentPanel.setSelectionVisible(selected);
+    externalHandoffPanel?.setSelectionVisible(selected);
     copyButton.hidden = !previewing;
     backButton.hidden = !previewing;
     title.textContent = previewing ? messages.dialog.previewTitle : messages.dialog.editTitle;
@@ -4233,6 +4386,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     previewButton.textContent = messages.actions.preview;
     copyButton.textContent = messages.actions.copy;
     backButton.textContent = messages.actions.back;
+    dataFlowPanel.render(currentDataFlowState);
     triggerButton.title = messages.trigger.title(shortcut);
     triggerButton.textContent = currentStatus === "inspecting" ? messages.trigger.stop : messages.trigger.select;
     renderPanelStatus(currentStatus);
@@ -4271,6 +4425,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     repositoryLink,
     previewButton,
     copyButton,
+    dataFlowRefreshButton: dataFlowPanel.refreshButton,
     backButton,
     closeButton,
     agentProviderSelect: agentPanel.providerSelect,
@@ -4284,6 +4439,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     agentApplyButton: agentPanel.applyButton,
     agentRevertButton: agentPanel.revertButton,
     agentResetButton: agentPanel.resetButton,
+    ...externalHandoffPanel === void 0 ? {} : { externalHandoffPanel },
     renderStatus(status) {
       const inspecting = status === "inspecting";
       triggerButton.setAttribute("aria-pressed", String(inspecting));
@@ -4291,6 +4447,11 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       renderPanelStatus(status);
     },
     renderEditorStatus,
+    renderDataFlow(state) {
+      currentDataFlowState = state;
+      dataFlowPanel.render(state);
+      placeDialog();
+    },
     showHighlight(rect, label) {
       currentRect = rect;
       highlight.hidden = false;
@@ -4327,6 +4488,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       currentCanPreview = enabled;
       previewButton.disabled = !enabled;
       agentPanel.setContextReady(enabled);
+      externalHandoffPanel?.setContextReady(enabled);
     },
     hideSelection() {
       dialog.hidden = true;
@@ -4351,8 +4513,11 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       currentCanPreview = false;
       agentPanel.setContextReady(false);
       agentPanel.setSelectionVisible(false);
+      externalHandoffPanel?.setContextReady(false);
+      externalHandoffPanel?.setSelectionVisible(false);
       agentPanel.setEditingEnabled(true);
       agentPanel.resetJob();
+      dataFlowPanel.resetView();
     },
     hideSelectionTemporarily() {
       dialog.hidden = true;
@@ -4382,6 +4547,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       });
       openEditorButton.disabled = !currentCanOpenEditor;
       previewButton.disabled = !enabled || !currentCanPreview;
+      externalHandoffPanel?.setContextReady(enabled && currentCanPreview);
       agentPanel.setEditingEnabled(enabled);
       placeDialog();
     },
@@ -4421,6 +4587,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       diagnostics.removeEventListener("toggle", placeDialog);
       localeButton.removeEventListener("click", localizer.toggle);
       unsubscribeLocale();
+      dataFlowPanel.dispose();
+      externalHandoffPanel?.dispose();
       agentPanel.dispose();
       host.remove();
     }
@@ -4913,9 +5081,19 @@ function resolveBrowserDependencies(dependencies) {
 }
 function createController(config, dependencies = {}) {
   const browser = resolveBrowserDependencies(dependencies);
-  const view = dependencies.view ?? createRuntimeView(browser.document, config.shortcut, config.ai, config.locale);
+  const view = dependencies.view ?? createRuntimeView(
+    browser.document,
+    config.shortcut,
+    config.ai,
+    config.locale,
+    config.dataFlow.enabled,
+    config.externalAgent.enabled,
+    config.framework,
+    config.sessionId
+  );
   const api = dependencies.api ?? createRuntimeApi({
     apiBase: config.apiBase,
+    dataFlowReportMaxBytes: config.dataFlow.limits.reportMaxBytes,
     fetch: browser.window.fetch.bind(browser.window),
     sessionToken: config.sessionToken
   });
@@ -4927,6 +5105,9 @@ function createController(config, dependencies = {}) {
   const restoredSelection = selectionSession.load();
   const sourceResolver = createSourceResolver({
     adapter: dependencies.reactAdapter ?? createReact18Adapter({
+      ...config.dataFlow.enabled ? {
+        getComponentRegistration: (component) => getDataFlowExtension()?.getComponentRegistration(component)
+      } : {},
       maxComponentDepth: config.budget.maxComponentDepth
     }),
     onAdapterError() {
@@ -4950,6 +5131,8 @@ function createController(config, dependencies = {}) {
       apiStatus: marker === void 0 ? "not-required" : target2.code === void 0 ? "failed" : "connected",
       code: target2.code,
       collectionStatus: "ready",
+      dataFlowReport: void 0,
+      dataFlowStatus: "idle",
       element: void 0,
       elementContext: target2.element,
       instruction: target2.instruction,
@@ -4964,6 +5147,9 @@ function createController(config, dependencies = {}) {
   let workflowSelectionActive = false;
   let sessionRevision = 0;
   let editorRequestRevision = 0;
+  let dataFlowRequestRevision = 0;
+  let pageDataFlowReport;
+  let pageDataFlowStatus = "idle";
   let addingTarget = false;
   let previewPrompt = "";
   let previousFocus;
@@ -4978,6 +5164,90 @@ function createController(config, dependencies = {}) {
   function activeTarget() {
     return targets.find((target2) => target2.id === activeTargetId) ?? targets.at(-1);
   }
+  function dataFlowRequest(target2) {
+    const react2 = target2.resolution.react;
+    if (react2.componentSourceId !== void 0 && react2.sourceVersion !== void 0) {
+      return Object.freeze({
+        schemaVersion: DATA_FLOW_SCHEMA_VERSION2,
+        componentSourceId: react2.componentSourceId,
+        sourceVersion: react2.sourceVersion
+      });
+    }
+    const marker = target2.marker;
+    return marker === void 0 ? void 0 : Object.freeze({
+      schemaVersion: DATA_FLOW_SCHEMA_VERSION2,
+      fileId: marker.fileId,
+      line: marker.line,
+      column: marker.column
+    });
+  }
+  function renderDataFlowView() {
+    const dataFlowClient = getDataFlowExtension();
+    const observations = dataFlowClient?.observations(browser.window.location.pathname) ?? [];
+    const current = activeTarget();
+    view.renderDataFlow({
+      component: Object.freeze({
+        status: config.dataFlow.enabled ? current?.dataFlowStatus ?? "idle" : "disabled",
+        ...current?.dataFlowReport === void 0 ? {} : {
+          report: dataFlowClient?.mergeComponentReport(
+            current.dataFlowReport,
+            observations
+          ) ?? current.dataFlowReport
+        }
+      }),
+      page: Object.freeze({
+        status: config.dataFlow.enabled ? pageDataFlowStatus : "disabled",
+        ...pageDataFlowReport === void 0 ? {} : {
+          report: dataFlowClient?.mergePageReport(pageDataFlowReport, observations) ?? pageDataFlowReport
+        }
+      }),
+      observationCount: observations.length
+    });
+  }
+  async function loadDataFlowReports() {
+    if (!config.dataFlow.enabled) {
+      renderDataFlowView();
+      return;
+    }
+    const current = activeTarget();
+    const currentRequest = current === void 0 ? void 0 : dataFlowRequest(current);
+    const pageTargets = targets.flatMap((target2) => {
+      const request = dataFlowRequest(target2);
+      return request === void 0 ? [] : [request];
+    });
+    const revision = ++dataFlowRequestRevision;
+    const selectionRevision = sessionRevision;
+    if (current !== void 0) current.dataFlowStatus = "loading";
+    pageDataFlowStatus = pageTargets.length === 0 ? "idle" : "loading";
+    renderDataFlowView();
+    const [componentResult, pageResult] = await Promise.allSettled([
+      currentRequest === void 0 ? Promise.resolve(void 0) : api.componentDataFlowReport(currentRequest),
+      pageTargets.length === 0 ? Promise.resolve(void 0) : api.pageDataFlowReport({
+        schemaVersion: DATA_FLOW_SCHEMA_VERSION2,
+        targets: pageTargets
+      })
+    ]);
+    if (!mounted || revision !== dataFlowRequestRevision || selectionRevision !== sessionRevision) {
+      return;
+    }
+    if (current !== void 0 && targets.includes(current)) {
+      if (componentResult.status === "fulfilled") {
+        current.dataFlowReport = componentResult.value;
+        current.dataFlowStatus = componentResult.value === void 0 ? "idle" : "ready";
+      } else {
+        current.dataFlowReport = void 0;
+        current.dataFlowStatus = "error";
+      }
+    }
+    if (pageResult.status === "fulfilled") {
+      pageDataFlowReport = pageResult.value;
+      pageDataFlowStatus = pageResult.value === void 0 ? "idle" : "ready";
+    } else {
+      pageDataFlowReport = void 0;
+      pageDataFlowStatus = "error";
+    }
+    renderDataFlowView();
+  }
   function snapshotTarget(target2) {
     if (target2.elementContext === void 0 || target2.styles === void 0) {
       return void 0;
@@ -5142,10 +5412,14 @@ ${summary}`;
     sessionRevision += 1;
     api.cancelPending();
     agentWorkflow.disposeSelection();
+    externalHandoffWorkflow?.cancelPending();
     clearCollectionTimers();
     resizeObserver?.disconnect();
     targets = [];
     activeTargetId = void 0;
+    dataFlowRequestRevision += 1;
+    pageDataFlowReport = void 0;
+    pageDataFlowStatus = "idle";
     selectionOpen = false;
     workflowSelectionActive = false;
     addingTarget = false;
@@ -5200,6 +5474,7 @@ ${summary}`;
         workflowSelectionActive = true;
       }
       refreshSelectionView(true);
+      void loadDataFlowReports();
       view.focusTargetInstruction(activeTargetId);
       persistSelection();
       return;
@@ -5256,6 +5531,13 @@ ${summary}`;
     },
     view
   });
+  const externalHandoffWorkflow = config.externalAgent.enabled && view.externalHandoffPanel !== void 0 ? getExternalHandoffExtension()?.createWorkflow(
+    browser.window.fetch.bind(browser.window),
+    view.externalHandoffPanel,
+    selectedAnnotation,
+    config.sessionToken,
+    browser.window
+  ) : void 0;
   async function loadSourceContext(target2, revision) {
     const marker = target2.marker;
     if (marker === void 0) {
@@ -5350,6 +5632,7 @@ ${summary}`;
       transition({ type: "SELECT" });
       view.hideHighlight();
       refreshSelectionView(true);
+      void loadDataFlowReports();
       view.focusTargetInstruction(duplicate.id);
       view.announce(view.messages().announcements.duplicate);
       return;
@@ -5381,7 +5664,9 @@ ${summary}`;
       styles: void 0,
       instruction: "",
       apiStatus: marker === void 0 ? "not-required" : "loading",
-      collectionStatus: "loading"
+      collectionStatus: "loading",
+      dataFlowReport: void 0,
+      dataFlowStatus: "idle"
     };
     targets.push(target2);
     activeTargetId = target2.id;
@@ -5391,6 +5676,7 @@ ${summary}`;
     view.hideHighlight();
     resizeObserver?.observe(element2);
     refreshSelectionView(true);
+    void loadDataFlowReports();
     selectionOpen = true;
     view.focusTargetInstruction(target2.id);
     scheduleBrowserContextCollection(target2, revision);
@@ -5495,11 +5781,15 @@ ${summary}`;
       }
       view.hideSelectionTemporarily();
       view.hideSelectionHighlights();
+      pageDataFlowReport = void 0;
+      pageDataFlowStatus = "idle";
+      renderDataFlowView();
       selectionSession.clear();
       view.announce(view.messages().announcements.allTargetsRemoved);
       return;
     }
     refreshSelectionView();
+    void loadDataFlowReports();
     persistSelection();
     view.announce(view.messages().announcements.targetRemoved);
   }
@@ -5662,16 +5952,21 @@ ${summary}`;
     }
     activeTargetId = targetId;
     refreshSelectionView();
+    void loadDataFlowReports();
     view.focusTargetInstruction(targetId);
   }
   function handleReselect() {
     beginReselect();
   }
+  function handleDataFlowRefresh() {
+    void loadDataFlowReports();
+  }
   function mount() {
     if (mounted) {
       return;
     }
     mounted = true;
+    externalHandoffWorkflow?.mount();
     view.renderStatus(state.status);
     browser.document.addEventListener("pointermove", handlePointerMove, true);
     browser.document.addEventListener("click", handleClick, true);
@@ -5685,6 +5980,7 @@ ${summary}`;
     view.targetList.addEventListener("input", handleTargetListInput);
     view.targetList.addEventListener("keydown", handleTargetListKeydown);
     view.openEditorButton.addEventListener("click", handleOpenEditorButtonClick);
+    view.dataFlowRefreshButton.addEventListener("click", handleDataFlowRefresh);
     view.previewButton.addEventListener("click", handlePreview);
     view.copyButton.addEventListener("click", handleCopy);
     view.backButton.addEventListener("click", handleBack);
@@ -5737,6 +6033,7 @@ ${summary}`;
       api.cancelPending();
       api.dispose();
       agentWorkflow.disposeSelection();
+      externalHandoffWorkflow?.dispose();
       sourceResolver.dispose();
       return;
     }
@@ -5755,6 +6052,7 @@ ${summary}`;
     view.targetList.removeEventListener("input", handleTargetListInput);
     view.targetList.removeEventListener("keydown", handleTargetListKeydown);
     view.openEditorButton.removeEventListener("click", handleOpenEditorButtonClick);
+    view.dataFlowRefreshButton.removeEventListener("click", handleDataFlowRefresh);
     view.previewButton.removeEventListener("click", handlePreview);
     view.copyButton.removeEventListener("click", handleCopy);
     view.backButton.removeEventListener("click", handleBack);
@@ -5799,6 +6097,7 @@ ${summary}`;
     api.cancelPending();
     api.dispose();
     agentWorkflow.disposeSelection();
+    externalHandoffWorkflow?.dispose();
     sourceResolver.dispose();
     view.dispose();
     state = INITIAL_RUNTIME_STATE;
@@ -5817,6 +6116,11 @@ function bootstrapSpotPatch(config) {
 }
 export {
   UI_MARKER_ATTRIBUTE,
-  bootstrapSpotPatch
+  bootstrapSpotPatch,
+  createDataFlowRuntime,
+  getDataFlowRuntime,
+  installDataFlowPrelude,
+  mergeComponentDataFlowReport,
+  mergePageDataFlowReport
 };
 //# sourceMappingURL=index.js.map