@spotpatch/runtime 1.7.1 → 1.9.0

package/dist/index.d.cts

@@ -1,4 +1,7 @@
 import { SpotPatchRuntimeConfig } from '@spotpatch/shared';
+export { D as DataFlowComponentRegistration, a as DataFlowInvocationToken, b as DataFlowRequestFrame, c as DataFlowRequestMetadata, d as DataFlowRuntime, e as DataFlowTriggerMetadata, f as createDataFlowRuntime, g as getDataFlowRuntime, i as installDataFlowPrelude } from './data-flow-runtime-B3itbieT.cjs';
+export { mergeComponentDataFlowReport, mergePageDataFlowReport } from './data-flow.cjs';
+import '@spotpatch/shared/data-flow-runtime';
 
 type RuntimeConfig = SpotPatchRuntimeConfig;
 

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 import { SpotPatchRuntimeConfig } from '@spotpatch/shared';
+export { D as DataFlowComponentRegistration, a as DataFlowInvocationToken, b as DataFlowRequestFrame, c as DataFlowRequestMetadata, d as DataFlowRuntime, e as DataFlowTriggerMetadata, f as createDataFlowRuntime, g as getDataFlowRuntime, i as installDataFlowPrelude } from './data-flow-runtime-B3itbieT.js';
+export { mergeComponentDataFlowReport, mergePageDataFlowReport } from './data-flow.js';
+import '@spotpatch/shared/data-flow-runtime';
 
 type RuntimeConfig = SpotPatchRuntimeConfig;
 

package/dist/index.js

@@ -1,6 +1,22 @@
+import {
+  createDataFlowRuntime,
+  getDataFlowRuntime,
+  installDataFlowPrelude,
+  mergeComponentDataFlowReport,
+  mergePageDataFlowReport
+} from "./chunk-QY5T4DPA.js";
+import {
+  UI_MARKER_ATTRIBUTE,
+  UI_Z_INDEX,
+  createButton,
+  createMarkedElement,
+  getDataFlowExtension
+} from "./chunk-AXKYJRAM.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 +92,7 @@ function createAnnotation(input) {
 
 // src/api/runtime-api.ts
 import {
+  DATA_FLOW_SCHEMA_VERSION,
   SPOTPATCH_ENDPOINTS,
   SPOTPATCH_TOKEN_HEADER,
   getAgentJobEndpoint
@@ -337,15 +354,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 +435,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 +448,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 +542,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 +1133,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 +1738,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 {
@@ -2560,6 +2601,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.",
@@ -2595,6 +2639,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",
@@ -2775,14 +2822,14 @@ var UI_MESSAGES = Object.freeze({
       mode: "Execution mode",
       review: "Review",
       autoGated: "Auto gated",
-      trustedFast: "Trusted fast",
+      trustedFast: "Trusted direct",
       provider: "Provider",
       model: "Model",
       providerAriaLabel: "AI provider",
       modelAriaLabel: "AI model",
       providerUnavailable: "Provider configuration is unavailable.",
       consent: (provider) => `I understand selected context and allowed source may be sent to ${provider}; its data policy is my responsibility.`,
-      trustedFastConsent: (provider) => `Enable trusted fast mode for ${provider}: send allowed project context, include current local changes, and directly apply AI changes after required checks, including file deletions and configuration changes.`,
+      trustedFastConsent: (provider) => `Enable trusted direct mode for ${provider}: send allowed project context, include current local changes, skip project validation checks, and immediately apply AI changes, including file deletions and configuration changes.`,
       connectionNotTested: "Optional connection check not run",
       workspaceNotChecked: "Local workspace not checked",
       checkingWorkspace: "Checking Git workspace and isolated execution\u2026",
@@ -2794,7 +2841,7 @@ var UI_MESSAGES = Object.freeze({
       capabilityVerified: "Agent capability verified",
       capabilityVerifiedAnnouncement: "AI provider capability verified.",
       testingCapability: "Testing authentication, tools, continuation, and streaming\u2026",
-      applying: "Applying validated changes to the project.",
+      applying: "Applying changes to the project.",
       cancelling: "Cancelling Agent job.",
       reverting: "Reverting the applied Agent change.",
       consentRequired: "Confirm remote provider data transmission before running AI.",
@@ -2913,14 +2960,14 @@ var UI_MESSAGES = Object.freeze({
       mode: "\u6267\u884C\u65B9\u5F0F",
       review: "\u5BA1\u9605\u6A21\u5F0F",
       autoGated: "\u53D7\u63A7\u81EA\u52A8\u6A21\u5F0F",
-      trustedFast: "\u53EF\u4FE1\u5FEB\u901F\u6A21\u5F0F",
+      trustedFast: "\u53EF\u4FE1\u6781\u901F\u6A21\u5F0F",
       provider: "\u6A21\u578B\u670D\u52A1",
       model: "\u6A21\u578B",
       providerAriaLabel: "AI \u6A21\u578B\u670D\u52A1",
       modelAriaLabel: "AI \u6A21\u578B",
       providerUnavailable: "\u6A21\u578B\u670D\u52A1\u914D\u7F6E\u4E0D\u53EF\u7528\u3002",
       consent: (provider) => `\u6211\u4E86\u89E3\u9009\u4E2D\u4E0A\u4E0B\u6587\u4E0E\u83B7\u51C6\u6E90\u7801\u53EF\u80FD\u53D1\u9001\u5230 ${provider}\uFF0C\u5E76\u81EA\u884C\u8D1F\u8D23\u5176\u6570\u636E\u7B56\u7565\u3002`,
-      trustedFastConsent: (provider) => `\u4E3A ${provider} \u542F\u7528\u53EF\u4FE1\u5FEB\u901F\u6A21\u5F0F\uFF1A\u53D1\u9001\u83B7\u51C6\u7684\u9879\u76EE\u4E0A\u4E0B\u6587\u3001\u7EB3\u5165\u5F53\u524D\u672C\u5730\u4FEE\u6539\uFF0C\u5E76\u5728\u5FC5\u9700\u68C0\u67E5\u901A\u8FC7\u540E\u76F4\u63A5\u5E94\u7528 AI \u53D8\u66F4\uFF0C\u5305\u62EC\u5220\u9664\u6587\u4EF6\u4E0E\u914D\u7F6E\u53D8\u66F4\u3002`,
+      trustedFastConsent: (provider) => `\u4E3A ${provider} \u542F\u7528\u53EF\u4FE1\u6781\u901F\u6A21\u5F0F\uFF1A\u53D1\u9001\u83B7\u51C6\u7684\u9879\u76EE\u4E0A\u4E0B\u6587\u3001\u7EB3\u5165\u5F53\u524D\u672C\u5730\u4FEE\u6539\u3001\u8DF3\u8FC7\u9879\u76EE\u9A8C\u8BC1\u68C0\u67E5\uFF0C\u5E76\u7ACB\u5373\u5E94\u7528 AI \u53D8\u66F4\uFF0C\u5305\u62EC\u5220\u9664\u6587\u4EF6\u4E0E\u914D\u7F6E\u53D8\u66F4\u3002`,
       connectionNotTested: "\u5C1A\u672A\u6267\u884C\u53EF\u9009\u8FDE\u63A5\u68C0\u67E5",
       workspaceNotChecked: "\u5C1A\u672A\u68C0\u67E5\u672C\u5730\u5DE5\u4F5C\u533A",
       checkingWorkspace: "\u6B63\u5728\u68C0\u67E5 Git \u5DE5\u4F5C\u533A\u4E0E\u9694\u79BB\u6267\u884C\u73AF\u5883\u2026\u2026",
@@ -2932,7 +2979,7 @@ var UI_MESSAGES = Object.freeze({
       capabilityVerified: "Agent \u80FD\u529B\u9A8C\u8BC1\u901A\u8FC7",
       capabilityVerifiedAnnouncement: "AI \u6A21\u578B\u670D\u52A1\u80FD\u529B\u9A8C\u8BC1\u901A\u8FC7\u3002",
       testingCapability: "\u6B63\u5728\u9A8C\u8BC1\u9274\u6743\u3001\u5DE5\u5177\u8C03\u7528\u3001\u8FDE\u7EED\u8C03\u7528\u4E0E\u6D41\u5F0F\u54CD\u5E94\u2026\u2026",
-      applying: "\u6B63\u5728\u5C06\u5DF2\u9A8C\u8BC1\u53D8\u66F4\u5E94\u7528\u5230\u9879\u76EE\u3002",
+      applying: "\u6B63\u5728\u5C06\u53D8\u66F4\u5E94\u7528\u5230\u9879\u76EE\u3002",
       cancelling: "\u6B63\u5728\u53D6\u6D88 Agent \u4EFB\u52A1\u3002",
       reverting: "\u6B63\u5728\u64A4\u9500\u5DF2\u5E94\u7528\u7684 Agent \u53D8\u66F4\u3002",
       consentRequired: "\u8FD0\u884C AI \u524D\uFF0C\u8BF7\u5148\u786E\u8BA4\u5141\u8BB8\u5411\u8FDC\u7A0B\u6A21\u578B\u670D\u52A1\u4F20\u8F93\u6570\u636E\u3002",
@@ -3739,7 +3786,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) {
   const localizer = createUiLocalizer(document, localePreference);
   let messages = localizer.messages();
   const host = document.createElement("spotpatch-root");
@@ -3855,7 +3913,17 @@ 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");
+  changesPanel.append(targetsPanel, agentPanel.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;
@@ -3915,6 +3983,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   liveRegion.setAttribute("aria-atomic", "true");
   shadowRoot.append(
     createStyles(document),
+    dataFlowPanel.styles,
     selectionHighlights,
     highlight,
     dialog,
@@ -3932,6 +4001,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;
@@ -4233,6 +4309,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 +4348,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     repositoryLink,
     previewButton,
     copyButton,
+    dataFlowRefreshButton: dataFlowPanel.refreshButton,
     backButton,
     closeButton,
     agentProviderSelect: agentPanel.providerSelect,
@@ -4291,6 +4369,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;
@@ -4353,6 +4436,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       agentPanel.setSelectionVisible(false);
       agentPanel.setEditingEnabled(true);
       agentPanel.resetJob();
+      dataFlowPanel.resetView();
     },
     hideSelectionTemporarily() {
       dialog.hidden = true;
@@ -4421,6 +4505,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       diagnostics.removeEventListener("toggle", placeDialog);
       localeButton.removeEventListener("click", localizer.toggle);
       unsubscribeLocale();
+      dataFlowPanel.dispose();
       agentPanel.dispose();
       host.remove();
     }
@@ -4913,9 +4998,16 @@ 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
+  );
   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 +5019,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 +5045,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 +5061,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 +5078,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;
@@ -5146,6 +5330,9 @@ ${summary}`;
     resizeObserver?.disconnect();
     targets = [];
     activeTargetId = void 0;
+    dataFlowRequestRevision += 1;
+    pageDataFlowReport = void 0;
+    pageDataFlowStatus = "idle";
     selectionOpen = false;
     workflowSelectionActive = false;
     addingTarget = false;
@@ -5200,6 +5387,7 @@ ${summary}`;
         workflowSelectionActive = true;
       }
       refreshSelectionView(true);
+      void loadDataFlowReports();
       view.focusTargetInstruction(activeTargetId);
       persistSelection();
       return;
@@ -5350,6 +5538,7 @@ ${summary}`;
       transition({ type: "SELECT" });
       view.hideHighlight();
       refreshSelectionView(true);
+      void loadDataFlowReports();
       view.focusTargetInstruction(duplicate.id);
       view.announce(view.messages().announcements.duplicate);
       return;
@@ -5381,7 +5570,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 +5582,7 @@ ${summary}`;
     view.hideHighlight();
     resizeObserver?.observe(element2);
     refreshSelectionView(true);
+    void loadDataFlowReports();
     selectionOpen = true;
     view.focusTargetInstruction(target2.id);
     scheduleBrowserContextCollection(target2, revision);
@@ -5495,11 +5687,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,11 +5858,15 @@ ${summary}`;
     }
     activeTargetId = targetId;
     refreshSelectionView();
+    void loadDataFlowReports();
     view.focusTargetInstruction(targetId);
   }
   function handleReselect() {
     beginReselect();
   }
+  function handleDataFlowRefresh() {
+    void loadDataFlowReports();
+  }
   function mount() {
     if (mounted) {
       return;
@@ -5685,6 +5885,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);
@@ -5755,6 +5956,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);
@@ -5817,6 +6019,11 @@ function bootstrapSpotPatch(config) {
 }
 export {
   UI_MARKER_ATTRIBUTE,
-  bootstrapSpotPatch
+  bootstrapSpotPatch,
+  createDataFlowRuntime,
+  getDataFlowRuntime,
+  installDataFlowPrelude,
+  mergeComponentDataFlowReport,
+  mergePageDataFlowReport
 };
 //# sourceMappingURL=index.js.map