@spotpatch/runtime 1.11.0 → 1.13.0

package/dist/index.js

@@ -1,22 +1,27 @@
+import {
+  getDataFlowExtension
+} from "./chunk-NII5OBAN.js";
 import {
   createDataFlowRuntime,
   getDataFlowRuntime,
   installDataFlowPrelude,
   mergeComponentDataFlowReport,
   mergePageDataFlowReport
-} from "./chunk-QY5T4DPA.js";
-import {
-  getDataFlowExtension
-} from "./chunk-NII5OBAN.js";
+} from "./chunk-2WA6XVA4.js";
 import {
   getExternalHandoffExtension
-} from "./chunk-BXRMVHNT.js";
+} from "./chunk-ASRUAKA5.js";
 import {
+  createBrandMark,
+  getFloatingSurfaceMotionExtension
+} from "./chunk-P7W3F4UA.js";
+import {
+  FLOATING_SURFACE_LAYOUT,
   UI_MARKER_ATTRIBUTE,
   UI_Z_INDEX,
   createButton,
   createMarkedElement
-} from "./chunk-7ES63LA7.js";
+} from "./chunk-P6X75LO5.js";
 
 // src/controller/runtime-controller.ts
 import { createReact18Adapter } from "@spotpatch/react-adapter";
@@ -1978,6 +1983,7 @@ function createAgentPanel(document, ai, localizer) {
   root.hidden = !ai.enabled;
   const header = createMarkedElement(document, "div");
   header.className = "spotpatch-agent-head";
+  header.setAttribute("data-spotpatch-agent-identity", "");
   const title = createMarkedElement(document, "span");
   title.className = "spotpatch-agent-title";
   const badge = createMarkedElement(document, "span");
@@ -2419,151 +2425,6 @@ function createAgentPanel(document, ai, localizer) {
   });
 }
 
-// src/ui/brand-mark-content.ts
-var BRAND_MARK_CONTENT = `
-  <defs>
-    <linearGradient id="locator-gradient" x1="76" y1="92" x2="436" y2="374" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#B61CFF" />
-      <stop offset="0.38" stop-color="#6D35FF" />
-      <stop offset="0.72" stop-color="#168EFF" />
-      <stop offset="1" stop-color="#00D9E9" />
-    </linearGradient>
-    <linearGradient id="left-code-gradient" x1="165" y1="166" x2="236" y2="258" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#A51EFF" />
-      <stop offset="1" stop-color="#653BFF" />
-    </linearGradient>
-    <linearGradient id="right-code-gradient" x1="276" y1="166" x2="347" y2="258" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#158DFF" />
-      <stop offset="1" stop-color="#00D8E9" />
-    </linearGradient>
-    <linearGradient id="bolt-gradient" x1="270" y1="111" x2="252" y2="365" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#6840FF" />
-      <stop offset="0.48" stop-color="#257BFF" />
-      <stop offset="1" stop-color="#00CBEF" />
-    </linearGradient>
-  </defs>
-  <path
-    fill="url(#locator-gradient)"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M256 52C345.47 52 418 124.53 418 214C418 267.55 391.98 316.24 354.04 348.02L256 468L157.96 348.02C120.02 316.24 94 267.55 94 214C94 124.53 166.53 52 256 52ZM256 88C186.41 88 130 144.41 130 214C130 258.2 152.76 297.08 187.2 319.57L256 403.8L324.8 319.57C359.24 297.08 382 258.2 382 214C382 144.41 325.59 88 256 88Z"
-  />
-  <rect x="238" y="20" width="36" height="84" rx="4" fill="url(#locator-gradient)" />
-  <rect x="62" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
-  <rect x="366" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
-  <path
-    d="M213.5 160L158 211.5L213.5 263L238 236.5L211 211.5L238 186.5L213.5 160Z"
-    fill="url(#left-code-gradient)"
-  />
-  <path
-    d="M298.5 160L354 211.5L298.5 263L274 236.5L301 211.5L274 186.5L298.5 160Z"
-    fill="url(#right-code-gradient)"
-  />
-  <path
-    d="M283 108L232 212L266 253L238 369L302 237L267 198L283 108Z"
-    fill="url(#bolt-gradient)"
-  />
-`;
-
-// src/ui/brand-mark.ts
-var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function resolveBrandMarkContent(override) {
-  if (override !== void 0) {
-    return { content: override, viewBox: "0 0 512 512" };
-  }
-  const injected = typeof __SPOTPATCH_BRAND_MARK_CONTENT__ === "string" ? __SPOTPATCH_BRAND_MARK_CONTENT__ : void 0;
-  if (typeof injected === "string") {
-    return { content: injected, viewBox: "0 0 512 512" };
-  }
-  return true ? { content: BRAND_MARK_CONTENT, viewBox: "0 0 512 512" } : { content: FALLBACK_BRAND_MARK_CONTENT, viewBox: "0 0 1 1" };
-}
-function svgElement(document, tagName, attributes) {
-  const element2 = document.createElementNS(SVG_NAMESPACE, tagName);
-  for (const [name, value] of Object.entries(attributes)) {
-    element2.setAttribute(name, value);
-  }
-  return element2;
-}
-function createBrandMark(document, content) {
-  const resolved = resolveBrandMarkContent(content);
-  const svg = svgElement(document, "svg", {
-    xmlns: SVG_NAMESPACE,
-    class: "spotpatch-brand-mark",
-    viewBox: resolved.viewBox,
-    "aria-hidden": "true",
-    focusable: "false"
-  });
-  svg.innerHTML = resolved.content;
-  return svg;
-}
-
-// src/ui/dialog-placement.ts
-var VIEWPORT_MARGIN = 16;
-var TARGET_GAP = 14;
-var TARGET_INSET = 24;
-var ANCHOR_INSET = 22;
-function clamp(value, minimum, maximum) {
-  return Math.min(Math.max(value, minimum), Math.max(minimum, maximum));
-}
-function calculateDialogPlacement({
-  dialogHeight,
-  dialogWidth,
-  target: target2,
-  viewportHeight,
-  viewportWidth
-}) {
-  const maxLeft = viewportWidth - dialogWidth - VIEWPORT_MARGIN;
-  const maxTop = viewportHeight - dialogHeight - VIEWPORT_MARGIN;
-  const viewportLeft = clamp(
-    (viewportWidth - dialogWidth) / 2,
-    VIEWPORT_MARGIN,
-    maxLeft
-  );
-  const viewportTop = clamp(
-    (viewportHeight - dialogHeight) / 2,
-    VIEWPORT_MARGIN,
-    maxTop
-  );
-  if (target2 === void 0) {
-    return Object.freeze({
-      anchorX: clamp(dialogWidth / 2, ANCHOR_INSET, dialogWidth - ANCHOR_INSET),
-      anchorY: clamp(dialogHeight / 2, ANCHOR_INSET, dialogHeight - ANCHOR_INSET),
-      left: viewportLeft,
-      mode: "viewport",
-      top: viewportTop
-    });
-  }
-  const targetCenterX = target2.x + target2.width / 2;
-  const targetCenterY = target2.y + target2.height / 2;
-  const centeredLeft = clamp(targetCenterX - dialogWidth / 2, VIEWPORT_MARGIN, maxLeft);
-  const centeredTop = clamp(targetCenterY - dialogHeight / 2, VIEWPORT_MARGIN, maxTop);
-  let left = centeredLeft;
-  let top = centeredTop;
-  let mode = "viewport";
-  if (target2.width >= dialogWidth + TARGET_INSET * 2 && target2.height >= dialogHeight + TARGET_INSET * 2) {
-    mode = "center";
-  } else if (target2.y - dialogHeight - TARGET_GAP >= VIEWPORT_MARGIN) {
-    top = target2.y - dialogHeight - TARGET_GAP;
-    mode = "above";
-  } else if (target2.y + target2.height + TARGET_GAP + dialogHeight <= viewportHeight - VIEWPORT_MARGIN) {
-    top = target2.y + target2.height + TARGET_GAP;
-    mode = "below";
-  } else if (target2.x + target2.width + TARGET_GAP + dialogWidth <= viewportWidth - VIEWPORT_MARGIN) {
-    left = target2.x + target2.width + TARGET_GAP;
-    mode = "right";
-  } else if (target2.x - dialogWidth - TARGET_GAP >= VIEWPORT_MARGIN) {
-    left = target2.x - dialogWidth - TARGET_GAP;
-    mode = "left";
-  }
-  return Object.freeze({
-    anchorX: clamp(targetCenterX - left, ANCHOR_INSET, dialogWidth - ANCHOR_INSET),
-    anchorY: clamp(targetCenterY - top, ANCHOR_INSET, dialogHeight - ANCHOR_INSET),
-    left,
-    mode,
-    top
-  });
-}
-
 // src/ui/localization.ts
 import {
   ERROR_CODES as ERROR_CODES2
@@ -2598,6 +2459,51 @@ var STATUS_ZH = Object.freeze({
   reverted: "\u5DF2\u64A4\u9500",
   failed: "\u5931\u8D25"
 });
+var EXECUTION_ACTIVITY_EN = Object.freeze({
+  prepare: "Preparing context",
+  dispatch: "Dispatching context",
+  discover: "Discovering project files",
+  search: "Searching source",
+  read: "Reading",
+  patch: "Generating a minimal patch",
+  check: "Running",
+  audit: "Auditing proposed changes",
+  apply: "Applying verified changes",
+  sync: "Returning results to SpotPatch",
+  unknown: "Processing the current task"
+});
+var EXECUTION_ACTIVITY_ZH = Object.freeze({
+  prepare: "\u6B63\u5728\u51C6\u5907\u4E0A\u4E0B\u6587",
+  dispatch: "\u6B63\u5728\u6D3E\u53D1\u4E0A\u4E0B\u6587",
+  discover: "\u6B63\u5728\u67E5\u627E\u9879\u76EE\u6587\u4EF6",
+  search: "\u6B63\u5728\u641C\u7D22\u6E90\u7801",
+  read: "\u6B63\u5728\u8BFB\u53D6",
+  patch: "\u6B63\u5728\u751F\u6210\u6700\u5C0F\u4FEE\u6539\u8865\u4E01",
+  check: "\u6B63\u5728\u8FD0\u884C",
+  audit: "\u6B63\u5728\u5BA1\u8BA1\u5019\u9009\u4FEE\u6539",
+  apply: "\u6B63\u5728\u5E94\u7528\u5DF2\u9A8C\u8BC1\u4FEE\u6539",
+  sync: "\u6B63\u5728\u5C06\u7ED3\u679C\u56DE\u6D41 SpotPatch",
+  unknown: "\u6B63\u5728\u5904\u7406\u5F53\u524D\u4EFB\u52A1"
+});
+var EXECUTION_LANE_LABELS = Object.freeze({
+  prepare: "prepare",
+  dispatch: "dispatch",
+  discover: "list",
+  search: "search",
+  read: "read",
+  patch: "patch",
+  check: "check",
+  audit: "audit",
+  apply: "apply",
+  sync: "sync",
+  unknown: "agent"
+});
+function executionActivityAction(labels, kind, detail) {
+  return detail === void 0 || detail.length === 0 ? labels[kind] : `${labels[kind]} ${detail}`;
+}
+function executionActivityLane(kind, detail) {
+  return detail === void 0 || detail.length === 0 ? EXECUTION_LANE_LABELS[kind] : `${EXECUTION_LANE_LABELS[kind]} \xB7 ${detail}`;
+}
 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({
@@ -2815,6 +2721,11 @@ var UI_MESSAGES = Object.freeze({
       previewTitle: "Review the request",
       previewSubtitle: "Verify the complete context before it leaves the browser."
     }),
+    floatingSurface: Object.freeze({
+      dragHandle: "Drag to move the SpotPatch workbench",
+      resetPosition: "Reset workbench position",
+      positionReset: "SpotPatch position reset to the lower-right corner."
+    }),
     context: Object.freeze({
       collecting: "Collecting context",
       ready: "Context ready",
@@ -2901,6 +2812,27 @@ var UI_MESSAGES = Object.freeze({
       noOutput: "No output.",
       status: (status) => STATUS_EN[status]
     }),
+    execution: Object.freeze({
+      claude: "Claude",
+      codex: "Codex",
+      receivingTitle: "Receiving context",
+      dispatchingTitle: (identity) => `Handing off to ${identity}`,
+      runningTitle: (target2) => `Modifying ${target2}`,
+      expandedRunningTitle: (identity) => `${identity} is making changes`,
+      completedTitle: "Change complete",
+      expandedCompletedTitle: "Changes complete",
+      failedTitle: "Execution failed",
+      receivingStatus: "Receiving",
+      dispatchingStatus: "Dispatching",
+      runningStatus: "Running",
+      checkingStatus: "Checking",
+      completedStatus: "Done",
+      failedStatus: "Failed",
+      resultReturned: "The result is back in SpotPatch",
+      resultSummary: (files) => `${String(files)} ${files === 1 ? "file" : "files"}`,
+      activityAction: (kind, detail) => executionActivityAction(EXECUTION_ACTIVITY_EN, kind, detail),
+      activityLane: executionActivityLane
+    }),
     announcements: Object.freeze({
       adapterDisabled: "React inspection was disabled after an adapter failure.",
       selectionEnabled: "Element selection enabled.",
@@ -2953,6 +2885,11 @@ var UI_MESSAGES = Object.freeze({
       previewTitle: "\u5BA1\u9605\u4FEE\u6539\u8BF7\u6C42",
       previewSubtitle: "\u53D1\u9001\u7ED9 AI \u524D\uFF0C\u8BF7\u6838\u5BF9\u5B8C\u6574\u4E0A\u4E0B\u6587\u4E0E\u6BCF\u9879\u76EE\u6807\u8BF4\u660E\u3002"
     }),
+    floatingSurface: Object.freeze({
+      dragHandle: "\u62D6\u62FD\u4EE5\u79FB\u52A8 SpotPatch \u5DE5\u4F5C\u53F0",
+      resetPosition: "\u91CD\u7F6E\u5DE5\u4F5C\u53F0\u4F4D\u7F6E",
+      positionReset: "SpotPatch \u5DF2\u6062\u590D\u5230\u53F3\u4E0B\u89D2\u3002"
+    }),
     context: Object.freeze({
       collecting: "\u6B63\u5728\u91C7\u96C6\u4E0A\u4E0B\u6587",
       ready: "\u4E0A\u4E0B\u6587\u5DF2\u5C31\u7EEA",
@@ -3039,6 +2976,27 @@ var UI_MESSAGES = Object.freeze({
       noOutput: "\u6CA1\u6709\u8F93\u51FA\u3002",
       status: (status) => STATUS_ZH[status]
     }),
+    execution: Object.freeze({
+      claude: "Claude",
+      codex: "Codex",
+      receivingTitle: "\u6B63\u5728\u63A5\u6536\u4E0A\u4E0B\u6587",
+      dispatchingTitle: (identity) => `\u6B63\u5728\u4EA4\u63A5\u7ED9 ${identity}`,
+      runningTitle: (target2) => `\u6B63\u5728\u4FEE\u6539 ${target2}`,
+      expandedRunningTitle: (identity) => `${identity} \u6B63\u5728\u6267\u884C\u4FEE\u6539`,
+      completedTitle: "\u4FEE\u6539\u5B8C\u6210",
+      expandedCompletedTitle: "\u4FEE\u6539\u5DF2\u5B8C\u6210",
+      failedTitle: "\u6267\u884C\u5931\u8D25",
+      receivingStatus: "\u63A5\u6536\u4E2D",
+      dispatchingStatus: "\u6D3E\u53D1\u4E2D",
+      runningStatus: "\u6267\u884C\u4E2D",
+      checkingStatus: "\u68C0\u67E5\u4E2D",
+      completedStatus: "\u5B8C\u6210",
+      failedStatus: "\u5931\u8D25",
+      resultReturned: "\u7ED3\u679C\u5DF2\u56DE\u6D41 SpotPatch",
+      resultSummary: (files) => `${String(files)} \u4E2A\u6587\u4EF6`,
+      activityAction: (kind, detail) => executionActivityAction(EXECUTION_ACTIVITY_ZH, kind, detail),
+      activityLane: executionActivityLane
+    }),
     announcements: Object.freeze({
       adapterDisabled: "React \u9002\u914D\u5668\u5F02\u5E38\uFF0C\u672C\u6B21\u4F1A\u8BDD\u5DF2\u505C\u7528 React \u68C0\u67E5\u3002",
       selectionEnabled: "\u5143\u7D20\u9009\u62E9\u5DF2\u542F\u7528\u3002",
@@ -3112,13 +3070,500 @@ function createUiLocalizer(document, preference = "auto") {
   });
 }
 
-// src/ui/runtime-view.ts
-var DIALOG_MAX_WIDTH = 460;
-var DIALOG_MAX_HEIGHT = 620;
-var DIALOG_FALLBACK_HEIGHT = Object.freeze({
-  previewing: 560,
-  selected: DIALOG_MAX_HEIGHT
+// src/state/floating-surface-session.ts
+var STORAGE_PREFIX2 = "spotpatch:floating-surface:";
+var SNAPSHOT_VERSION2 = 1;
+var MAX_SNAPSHOT_CHARACTERS2 = 1024;
+function record2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+}
+function finiteRatio(value) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+}
+function alignment(value) {
+  return value === "start" || value === "end";
+}
+function parseSnapshot2(value) {
+  const snapshot = record2(value);
+  if (snapshot?.version !== SNAPSHOT_VERSION2 || !alignment(snapshot.horizontal) || !alignment(snapshot.vertical) || !finiteRatio(snapshot.xRatio) || !finiteRatio(snapshot.yRatio)) {
+    return void 0;
+  }
+  return Object.freeze({
+    horizontal: snapshot.horizontal,
+    vertical: snapshot.vertical,
+    xRatio: snapshot.xRatio,
+    yRatio: snapshot.yRatio
+  });
+}
+function createFloatingSurfaceSession(window, sessionId) {
+  const key = `${STORAGE_PREFIX2}${sessionId}`;
+  let storage;
+  try {
+    storage = window.sessionStorage;
+  } catch {
+    storage = void 0;
+  }
+  return Object.freeze({
+    clear() {
+      try {
+        storage?.removeItem(key);
+      } catch {
+      }
+    },
+    load() {
+      let serialized;
+      try {
+        serialized = storage?.getItem(key) ?? null;
+      } catch {
+        return void 0;
+      }
+      if (serialized === null || serialized.length > MAX_SNAPSHOT_CHARACTERS2) {
+        return void 0;
+      }
+      try {
+        return parseSnapshot2(JSON.parse(serialized));
+      } catch {
+        return void 0;
+      }
+    },
+    save(position) {
+      try {
+        storage?.setItem(
+          key,
+          JSON.stringify({ version: SNAPSHOT_VERSION2, ...position })
+        );
+      } catch {
+      }
+    }
+  });
+}
+
+// src/ui/floating-surface-position.ts
+var DEFAULT_FLOATING_SURFACE_POSITION = Object.freeze({
+  horizontal: "end",
+  vertical: "end",
+  xRatio: 1,
+  yRatio: 1
 });
+function clamp(value, minimum, maximum) {
+  return Math.min(Math.max(value, minimum), maximum);
+}
+function finiteNonNegative(value) {
+  return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+function boundedRatio(value) {
+  return Number.isFinite(value) ? clamp(value, 0, 1) : 0.5;
+}
+function normalizedViewport(viewport) {
+  return Object.freeze({
+    height: finiteNonNegative(viewport.height),
+    left: Number.isFinite(viewport.left) ? viewport.left : 0,
+    top: Number.isFinite(viewport.top) ? viewport.top : 0,
+    width: finiteNonNegative(viewport.width)
+  });
+}
+function horizontalAnchor(rect, alignment2) {
+  return alignment2 === "end" ? rect.left + rect.width : rect.left;
+}
+function verticalAnchor(rect, alignment2) {
+  return alignment2 === "end" ? rect.top + rect.height : rect.top;
+}
+function normalizedCoordinate(coordinate, origin, length) {
+  if (length <= 0) {
+    return 0.5;
+  }
+  return boundedRatio((coordinate - origin) / length);
+}
+function positionFromAnchor(anchor, viewport, horizontal, vertical) {
+  return Object.freeze({
+    horizontal,
+    vertical,
+    xRatio: normalizedCoordinate(anchor.x, viewport.left, viewport.width),
+    yRatio: normalizedCoordinate(anchor.y, viewport.top, viewport.height)
+  });
+}
+function resolveFloatingSurfaceRect(position, size, viewport) {
+  const width = finiteNonNegative(size.width);
+  const height = finiteNonNegative(size.height);
+  const normalized = normalizedViewport(viewport);
+  const viewportWidth = normalized.width;
+  const viewportHeight = normalized.height;
+  const leftBoundary = normalized.left;
+  const topBoundary = normalized.top;
+  const rightBoundary = leftBoundary + viewportWidth;
+  const bottomBoundary = topBoundary + viewportHeight;
+  const anchorX = leftBoundary + boundedRatio(position.xRatio) * viewportWidth;
+  const anchorY = topBoundary + boundedRatio(position.yRatio) * viewportHeight;
+  const requestedLeft = position.horizontal === "end" ? anchorX - width : anchorX;
+  const requestedTop = position.vertical === "end" ? anchorY - height : anchorY;
+  const maximumLeft = Math.max(leftBoundary, rightBoundary - width);
+  const maximumTop = Math.max(topBoundary, bottomBoundary - height);
+  return Object.freeze({
+    height,
+    left: clamp(requestedLeft, leftBoundary, maximumLeft),
+    top: clamp(requestedTop, topBoundary, maximumTop),
+    width
+  });
+}
+function snapFloatingSurfaceRect(rect, viewport, snapDistance) {
+  const distance = finiteNonNegative(snapDistance);
+  const width = finiteNonNegative(rect.width);
+  const height = finiteNonNegative(rect.height);
+  const normalized = normalizedViewport(viewport);
+  const viewportRight = normalized.left + normalized.width;
+  const viewportBottom = normalized.top + normalized.height;
+  const maximumLeft = Math.max(normalized.left, viewportRight - width);
+  const maximumTop = Math.max(normalized.top, viewportBottom - height);
+  const requestedLeft = clamp(rect.left, normalized.left, maximumLeft);
+  const requestedTop = clamp(rect.top, normalized.top, maximumTop);
+  const leftDistance = Math.abs(requestedLeft - normalized.left);
+  const rightDistance = Math.abs(viewportRight - (requestedLeft + width));
+  const topDistance = Math.abs(requestedTop - normalized.top);
+  const bottomDistance = Math.abs(viewportBottom - (requestedTop + height));
+  const left = Math.min(leftDistance, rightDistance) <= distance ? leftDistance <= rightDistance ? normalized.left : viewportRight - width : requestedLeft;
+  const top = Math.min(topDistance, bottomDistance) <= distance ? topDistance <= bottomDistance ? normalized.top : viewportBottom - height : requestedTop;
+  return Object.freeze({ height, left, top, width });
+}
+function positionFromFloatingSurfaceRect(rect, viewport, previous) {
+  const bounded = snapFloatingSurfaceRect(rect, viewport, 0);
+  const centerX = bounded.left + bounded.width / 2;
+  const centerY = bounded.top + bounded.height / 2;
+  const viewportCenterX = viewport.left + finiteNonNegative(viewport.width) / 2;
+  const viewportCenterY = viewport.top + finiteNonNegative(viewport.height) / 2;
+  const horizontal = centerX === viewportCenterX ? previous.horizontal : centerX < viewportCenterX ? "start" : "end";
+  const vertical = centerY === viewportCenterY ? previous.vertical : centerY < viewportCenterY ? "start" : "end";
+  return positionFromAnchor(
+    {
+      x: horizontalAnchor(bounded, horizontal),
+      y: verticalAnchor(bounded, vertical)
+    },
+    viewport,
+    horizontal,
+    vertical
+  );
+}
+
+// src/ui/floating-surface-controller.ts
+function finite(value, fallback = 0) {
+  return Number.isFinite(value) ? value : fallback;
+}
+function distanceBetween(first, second) {
+  return Math.hypot(first.x - second.x, first.y - second.y);
+}
+function isPrimaryPointer(event) {
+  return event.button === 0 && event.isPrimary;
+}
+function surfaceSize(surface) {
+  const rect = surface.getBoundingClientRect();
+  return Object.freeze({
+    height: Math.max(0, finite(rect.height)),
+    width: Math.max(0, finite(rect.width))
+  });
+}
+function requestFrame(window, callback) {
+  if (typeof window.requestAnimationFrame === "function") {
+    return window.requestAnimationFrame(callback);
+  }
+  return window.setTimeout(() => {
+    callback(Date.now());
+  }, 0);
+}
+function cancelFrame(window, frame) {
+  if (typeof window.cancelAnimationFrame === "function") {
+    window.cancelAnimationFrame(frame);
+    return;
+  }
+  window.clearTimeout(frame);
+}
+function createFloatingSurfaceController(window, session, layout) {
+  let position = session.load() ?? DEFAULT_FLOATING_SURFACE_POSITION;
+  let drag;
+  let frame;
+  let suppressClickFor;
+  let suppressClickTimer;
+  let disposed = false;
+  const surfaces = /* @__PURE__ */ new Set();
+  const cleanup = /* @__PURE__ */ new Set();
+  function viewport() {
+    const visualViewport = window.visualViewport;
+    const width = Math.max(0, finite(visualViewport?.width ?? window.innerWidth));
+    const height = Math.max(0, finite(visualViewport?.height ?? window.innerHeight));
+    const inset = width <= layout.compactViewportWidth ? layout.compactInset : layout.desktopInset;
+    return Object.freeze({
+      height: Math.max(0, height - inset * 2),
+      left: finite(visualViewport?.offsetLeft ?? 0) + inset,
+      top: finite(visualViewport?.offsetTop ?? 0) + inset,
+      width: Math.max(0, width - inset * 2)
+    });
+  }
+  function isCompact() {
+    return viewport().width + layout.compactInset * 2 <= layout.compactViewportWidth;
+  }
+  function apply(surface) {
+    if (surface.hidden) {
+      return void 0;
+    }
+    if (surface.dataset.motionMorphing === "true" && surface.dataset.floatingPositioned === "true") {
+      return void 0;
+    }
+    const size = surfaceSize(surface);
+    if (size.width === 0 || size.height === 0) {
+      return void 0;
+    }
+    const rect = resolveFloatingSurfaceRect(position, size, viewport());
+    surface.style.left = `${String(rect.left)}px`;
+    surface.style.top = `${String(rect.top)}px`;
+    surface.style.right = "auto";
+    surface.style.bottom = "auto";
+    surface.dataset.floatingPositioned = "true";
+    return rect;
+  }
+  function reconcile() {
+    if (disposed) {
+      return;
+    }
+    if (frame !== void 0) {
+      cancelFrame(window, frame);
+      frame = void 0;
+    }
+    for (const surface of surfaces) {
+      apply(surface);
+    }
+  }
+  function requestReconcile() {
+    if (disposed || frame !== void 0) {
+      return;
+    }
+    frame = requestFrame(window, () => {
+      frame = void 0;
+      reconcile();
+    });
+  }
+  function commit(nextPosition) {
+    position = nextPosition;
+    session.save(position);
+  }
+  function finishDrag(commitPosition) {
+    const current = drag;
+    if (current === void 0) {
+      return;
+    }
+    drag = void 0;
+    current.handle.dataset.dragging = "false";
+    current.surface.dataset.dragging = "false";
+    try {
+      if (current.handle.hasPointerCapture(current.pointerId)) {
+        current.handle.releasePointerCapture(current.pointerId);
+      }
+    } catch {
+    }
+    if (commitPosition) {
+      const rect = apply(current.surface);
+      if (rect !== void 0) {
+        const snapped = snapFloatingSurfaceRect(
+          rect,
+          viewport(),
+          layout.edgeSnapDistance
+        );
+        commit(positionFromFloatingSurfaceRect(snapped, viewport(), position));
+        apply(current.surface);
+      }
+    } else {
+      position = session.load() ?? DEFAULT_FLOATING_SURFACE_POSITION;
+      reconcile();
+    }
+  }
+  function updateDrag(event) {
+    const current = drag;
+    if (current === void 0) {
+      return;
+    }
+    if (event.pointerId !== current.pointerId) {
+      return;
+    }
+    const pointer = Object.freeze({ x: event.clientX, y: event.clientY });
+    const start = Object.freeze({ x: current.startX, y: current.startY });
+    if (current.handle.dataset.dragging !== "true" && distanceBetween(pointer, start) < layout.dragActivationDistance) {
+      return;
+    }
+    if (current.handle.dataset.dragging !== "true") {
+      current.onDragStart?.();
+    }
+    current.handle.dataset.dragging = "true";
+    current.surface.dataset.dragging = "true";
+    position = positionFromAnchor(
+      {
+        x: pointer.x + current.anchorOffsetX,
+        y: pointer.y + current.anchorOffsetY
+      },
+      viewport(),
+      position.horizontal,
+      position.vertical
+    );
+    requestReconcile();
+    event.preventDefault();
+  }
+  function addListener(target2, type, listener, options) {
+    target2.addEventListener(type, listener, options);
+    cleanup.add(() => {
+      target2.removeEventListener(type, listener, options);
+    });
+  }
+  function attachDraggable(handle, surface, options = {}) {
+    const onPointerDown = (event) => {
+      if (disposed || drag !== void 0 || !isPrimaryPointer(event) || options.canStartDrag?.(event) === false) {
+        return;
+      }
+      const rect = apply(surface) ?? surface.getBoundingClientRect();
+      const anchorX = position.horizontal === "end" ? rect.left + rect.width : rect.left;
+      const anchorY = position.vertical === "end" ? rect.top + rect.height : rect.top;
+      drag = Object.freeze({
+        anchorOffsetX: anchorX - event.clientX,
+        anchorOffsetY: anchorY - event.clientY,
+        handle,
+        ...options.onDragStart === void 0 ? {} : { onDragStart: options.onDragStart },
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        suppressClickOnDrag: options.suppressClickOnDrag ?? false,
+        surface
+      });
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    };
+    const onLostPointerCapture = (event) => {
+      if (drag?.pointerId === event.pointerId) {
+        finishDrag(handle.dataset.dragging === "true");
+      }
+    };
+    const onClickCapture = (event) => {
+      if (suppressClickFor !== handle) {
+        return;
+      }
+      suppressClickFor = void 0;
+      if (suppressClickTimer !== void 0) {
+        window.clearTimeout(suppressClickTimer);
+        suppressClickTimer = void 0;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    addListener(handle, "pointerdown", (event) => {
+      onPointerDown(event);
+    });
+    addListener(handle, "lostpointercapture", (event) => {
+      onLostPointerCapture(event);
+    });
+    addListener(
+      handle,
+      "click",
+      (event) => {
+        onClickCapture(event);
+      },
+      true
+    );
+  }
+  function reset() {
+    finishDrag(false);
+    position = DEFAULT_FLOATING_SURFACE_POSITION;
+    session.clear();
+    reconcile();
+  }
+  function cancelOnWindowBlur() {
+    finishDrag(false);
+  }
+  function cancelOnEscape(event) {
+    if (event.key !== "Escape" || drag === void 0) {
+      return;
+    }
+    finishDrag(false);
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  function endPointer(event) {
+    if (drag?.pointerId !== event.pointerId) {
+      return;
+    }
+    const current = drag;
+    const moved = current.handle.dataset.dragging === "true";
+    finishDrag(moved);
+    if (moved && current.suppressClickOnDrag) {
+      suppressClickFor = current.handle;
+      suppressClickTimer = window.setTimeout(() => {
+        suppressClickFor = void 0;
+        suppressClickTimer = void 0;
+      }, 0);
+    }
+  }
+  function cancelPointer(event) {
+    if (drag?.pointerId === event.pointerId) {
+      finishDrag(false);
+    }
+  }
+  addListener(window, "pointermove", (event) => {
+    updateDrag(event);
+  });
+  addListener(window, "pointerup", (event) => {
+    endPointer(event);
+  });
+  addListener(window, "pointercancel", (event) => {
+    cancelPointer(event);
+  });
+  addListener(window, "resize", requestReconcile);
+  addListener(window, "blur", cancelOnWindowBlur);
+  addListener(
+    window,
+    "keydown",
+    (event) => {
+      cancelOnEscape(event);
+    },
+    true
+  );
+  window.visualViewport?.addEventListener("resize", requestReconcile);
+  window.visualViewport?.addEventListener("scroll", requestReconcile);
+  cleanup.add(
+    () => window.visualViewport?.removeEventListener("resize", requestReconcile)
+  );
+  cleanup.add(
+    () => window.visualViewport?.removeEventListener("scroll", requestReconcile)
+  );
+  return Object.freeze({
+    attachDraggable,
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      finishDrag(false);
+      if (frame !== void 0) {
+        cancelFrame(window, frame);
+        frame = void 0;
+      }
+      if (suppressClickTimer !== void 0) {
+        window.clearTimeout(suppressClickTimer);
+        suppressClickTimer = void 0;
+      }
+      suppressClickFor = void 0;
+      for (const disposeListener of cleanup) {
+        disposeListener();
+      }
+      cleanup.clear();
+      surfaces.clear();
+    },
+    isCompact,
+    reconcile,
+    registerSurface(surface) {
+      surfaces.add(surface);
+    },
+    requestReconcile,
+    reset
+  });
+}
+
+// src/ui/runtime-view.ts
+var SUCCESS_SETTLE_MS = 1500;
 function resolveStyleNonce(document) {
   const nonces = new Set(
     [...document.querySelectorAll("script[nonce]")].map((script) => script.nonce?.trim() ?? "").filter(Boolean)
@@ -3149,53 +3594,20 @@ function createStyles(document) {
       --spotpatch-success: #34d399;
       --spotpatch-warning: #f59e0b;
       --spotpatch-text-on-accent: #0b0b12;
-      --spotpatch-radius-panel: 16px;
       --spotpatch-radius-card: 10px;
-      --spotpatch-shadow-panel: 0 30px 60px -20px rgb(0 0 0 / 70%);
-      color-scheme: dark;
       color: var(--spotpatch-text);
       font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
       font-size: 14px;
       line-height: 1.5;
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
     }
     [hidden] { display: none !important; }
     button, textarea, select { font: inherit; }
-    button { -webkit-tap-highlight-color: transparent; }
-    .spotpatch-trigger {
+    .spotpatch-floating-surface {
       position: fixed;
-      right: 24px;
-      bottom: 24px;
+      right: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
+      bottom: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
       z-index: ${String(UI_Z_INDEX.controls)};
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      min-height: 44px;
-      border: 1px solid rgb(255 255 255 / 12%);
-      border-radius: 999px;
-      padding: 10px 17px;
-      color: #f8fafc;
-      background: #171b23;
-      box-shadow: 0 12px 34px rgb(0 0 0 / 25%), inset 0 1px rgb(255 255 255 / 5%);
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 650;
-      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
-    }
-    .spotpatch-trigger::before {
-      width: 9px;
-      height: 9px;
-      border-radius: 999px;
-      background: var(--spotpatch-accent);
-      box-shadow: 0 0 0 4px rgb(99 102 241 / 10%);
-      content: "";
-    }
-    .spotpatch-trigger:hover { transform: translateY(-1px); border-color: rgb(129 140 248 / 52%); }
-    .spotpatch-trigger[aria-pressed="true"] {
-      border-color: rgb(124 58 237 / 55%);
-      background: #24203b;
-      box-shadow: 0 14px 42px rgb(76 29 149 / 24%), inset 0 1px rgb(255 255 255 / 10%);
+      isolation: isolate;
     }
     .spotpatch-highlight {
       position: fixed;
@@ -3264,82 +3676,28 @@ function createStyles(document) {
       background: #5546dc;
     }
     .spotpatch-dialog {
-      --spotpatch-anchor-x: 50%;
-      --spotpatch-anchor-y: 50%;
-      position: fixed;
-      top: 16px;
-      left: 16px;
-      z-index: ${String(UI_Z_INDEX.controls)};
+      position: relative;
       box-sizing: border-box;
-      width: min(${String(DIALOG_MAX_WIDTH)}px, calc(100vw - 32px));
-      color: #edf0f7;
+      width: min(${String(FLOATING_SURFACE_LAYOUT.workbenchMaxWidth)}px, calc(100vw - ${String(FLOATING_SURFACE_LAYOUT.desktopInset * 2)}px));
       outline: none;
-      filter: drop-shadow(var(--spotpatch-shadow-panel));
     }
-    .spotpatch-anchor {
-      position: absolute;
-      z-index: 0;
-      width: 14px;
-      height: 14px;
-      border: 1px solid rgb(255 255 255 / 12%);
-      background: var(--spotpatch-bg);
-      transform: rotate(45deg);
-    }
-    .spotpatch-dialog[data-placement="above"] .spotpatch-anchor {
-      bottom: -6px;
-      left: calc(var(--spotpatch-anchor-x) - 7px);
-      border-top: 0;
-      border-left: 0;
-    }
-    .spotpatch-dialog[data-placement="below"] .spotpatch-anchor {
-      top: -6px;
-      left: calc(var(--spotpatch-anchor-x) - 7px);
-      border-right: 0;
-      border-bottom: 0;
-    }
-    .spotpatch-dialog[data-placement="left"] .spotpatch-anchor {
-      top: calc(var(--spotpatch-anchor-y) - 7px);
-      right: -6px;
-      border-bottom: 0;
-      border-left: 0;
-    }
-    .spotpatch-dialog[data-placement="right"] .spotpatch-anchor {
-      top: calc(var(--spotpatch-anchor-y) - 7px);
-      left: -6px;
-      border-top: 0;
-      border-right: 0;
-    }
-    .spotpatch-dialog[data-placement="center"] .spotpatch-anchor,
-    .spotpatch-dialog[data-placement="viewport"] .spotpatch-anchor { display: none; }
     .spotpatch-shell {
       position: relative;
       z-index: 1;
       display: flex;
       box-sizing: border-box;
-      max-height: min(${String(DIALOG_MAX_HEIGHT)}px, calc(100vh - 32px));
+      max-height: min(${String(FLOATING_SURFACE_LAYOUT.workbenchMaxHeight)}px, calc(100vh - ${String(FLOATING_SURFACE_LAYOUT.desktopInset * 2)}px));
       overflow: hidden;
       flex-direction: column;
-      border: 1px solid var(--spotpatch-border);
-      border-radius: var(--spotpatch-radius-panel);
-      background: var(--spotpatch-bg);
-      box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 0 60px -32px rgb(139 123 255 / 20%);
-    }
-    .spotpatch-shell::before {
-      position: absolute;
-      z-index: 2;
-      top: 0;
-      right: 20%;
-      left: 20%;
-      height: 1px;
-      background: linear-gradient(90deg, transparent, var(--spotpatch-accent), var(--spotpatch-accent-cyan), transparent);
-      content: "";
-      opacity: .65;
-      pointer-events: none;
     }
     .spotpatch-header {
       position: relative;
       padding: 0 18px 14px;
     }
+    .spotpatch-header[data-spotpatch-drag-handle] { cursor: grab; touch-action: none; user-select: none; }
+    .spotpatch-header[data-dragging="true"] { cursor: grabbing; }
+    .spotpatch-header button,
+    .spotpatch-header a { cursor: pointer; user-select: auto; }
     .spotpatch-brand-row {
       display: flex;
       align-items: center;
@@ -3363,18 +3721,6 @@ function createStyles(document) {
       filter: drop-shadow(0 6px 12px rgb(76 29 149 / 22%));
     }
     .spotpatch-brand-copy { display: grid; min-width: 0; gap: 1px; }
-    .spotpatch-brand-name {
-      color: #fff;
-      font-size: 13.5px;
-      font-weight: 680;
-      letter-spacing: -.01em;
-    }
-    .spotpatch-brand-context {
-      color: #8e98aa;
-      font-size: 10.5px;
-      font-weight: 560;
-      letter-spacing: .02em;
-    }
     .spotpatch-header-controls {
       display: inline-flex;
       align-items: center;
@@ -3383,6 +3729,7 @@ function createStyles(document) {
     }
     .spotpatch-repository,
     .spotpatch-locale,
+    .spotpatch-reset-position,
     .spotpatch-close {
       height: 27px;
       border: 1px solid rgb(255 255 255 / 11%);
@@ -3406,6 +3753,16 @@ function createStyles(document) {
       font-size: 12px;
       font-weight: 650;
     }
+    .spotpatch-reset-position {
+      display: inline-grid;
+      width: 27px;
+      padding: 0;
+      place-items: center;
+      color: #c5cad5;
+      cursor: pointer;
+      font-size: 15px;
+      line-height: 1;
+    }
     .spotpatch-close {
       display: inline-grid;
       width: 27px;
@@ -3419,21 +3776,8 @@ function createStyles(document) {
     }
     .spotpatch-close:hover,
     .spotpatch-locale:hover,
+    .spotpatch-reset-position:hover,
     .spotpatch-repository:hover { border-color: rgb(129 112 247 / 45%); color: #fff; background: rgb(109 93 246 / 10%); }
-    .spotpatch-title {
-      margin: 0;
-      color: #fff;
-      font-size: 18px;
-      font-weight: 680;
-      letter-spacing: -.015em;
-    }
-    .spotpatch-subtitle {
-      max-width: 390px;
-      margin: 4px 0 0;
-      color: var(--spotpatch-text-secondary);
-      font-size: 12.5px;
-      line-height: 1.5;
-    }
     .spotpatch-target-row {
       display: flex;
       align-items: center;
@@ -3797,6 +4141,7 @@ function createStyles(document) {
     .spotpatch-target-open:focus-visible,
     .spotpatch-target-remove:focus-visible,
     .spotpatch-close:focus-visible,
+    .spotpatch-reset-position:focus-visible,
     .spotpatch-trigger:focus-visible,
     .spotpatch-target-select:focus-visible,
     .spotpatch-target-editor textarea:focus-visible,
@@ -3821,8 +4166,8 @@ function createStyles(document) {
       .spotpatch-diagnostics > summary::before { transition: none; }
     }
     @media (max-width: 520px) {
-      .spotpatch-dialog { top: 8px; left: 8px; width: calc(100vw - 16px); }
-      .spotpatch-shell { max-height: calc(100vh - 16px); border-radius: 14px; }
+      .spotpatch-dialog { width: calc(100vw - 16px); }
+      .spotpatch-shell { max-height: calc(100dvh - 16px); }
       .spotpatch-header, .spotpatch-body { padding-left: 14px; padding-right: 14px; }
       .spotpatch-brand-row { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
       .spotpatch-actions { padding-right: 14px; padding-left: 14px; }
@@ -3838,6 +4183,38 @@ function summaryLine(summary, prefix) {
   const line = summary.split("\n").find((candidate) => candidate.startsWith(`${prefix}: `));
   return line?.slice(prefix.length + 2).trim();
 }
+function startsOnInteractiveControl(event) {
+  const target2 = event.target;
+  return target2 instanceof Element && target2.closest(
+    "a, button, input, select, textarea, summary, [contenteditable='true']"
+  ) !== null;
+}
+function createFallbackExecutionIsland(document) {
+  const root = createButton(document, "", "spotpatch-execution-island");
+  root.hidden = true;
+  root.setAttribute("aria-hidden", "true");
+  const logo = createBrandMark(
+    document,
+    void 0,
+    "spotpatch-fallback-execution-island"
+  );
+  logo.classList.add("spotpatch-execution-logo");
+  const copy = createMarkedElement(document, "span");
+  root.append(logo, copy);
+  return Object.freeze({
+    canExpand: () => false,
+    isExpanded: () => false,
+    root,
+    setExpanded: () => void 0,
+    render(projection) {
+      const text2 = [projection.headline, projection.action, projection.meta].filter((value) => value.length > 0).join(" \xB7 ");
+      copy.textContent = text2;
+      root.setAttribute("aria-label", text2);
+    },
+    dispose() {
+    }
+  });
+}
 function createUnavailableDataFlowPanel(document, changesRoot, diagnosticsRoot) {
   changesRoot.append(diagnosticsRoot);
   return Object.freeze({
@@ -3851,10 +4228,33 @@ function createUnavailableDataFlowPanel(document, changesRoot, diagnosticsRoot)
 }
 function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: false }), localePreference = "auto", dataFlowEnabled = false, externalAgentEnabled = false, framework = "vite", sessionId = "") {
   const localizer = createUiLocalizer(document, localePreference);
+  const associatedWindow = document.defaultView;
+  if (associatedWindow === null) {
+    throw new Error("SpotPatch requires a document with an associated window.");
+  }
+  const runtimeWindow = associatedWindow;
+  const floatingSurface = createFloatingSurfaceController(
+    runtimeWindow,
+    createFloatingSurfaceSession(runtimeWindow, sessionId),
+    FLOATING_SURFACE_LAYOUT
+  );
   let messages = localizer.messages();
+  let currentStatus = "idle";
+  let plannerVisible = false;
+  let executionSuppressed = false;
+  let executionProjection;
+  let pendingAgentMotion;
+  let successSettleKey;
+  let settledSuccessKey;
+  let successSettleTimer;
+  let observedExecutionStartedAt;
   const host = document.createElement("spotpatch-root");
   host.setAttribute(UI_MARKER_ATTRIBUTE, "");
   const shadowRoot = host.attachShadow({ mode: "open" });
+  const floatingSurfaceRoot = createMarkedElement(document, "div");
+  floatingSurfaceRoot.className = "spotpatch-floating-surface";
+  floatingSurfaceRoot.dataset.scene = "pill";
+  floatingSurfaceRoot.dataset.tone = "neutral";
   const triggerButton = createButton(
     document,
     messages.trigger.select,
@@ -3862,6 +4262,10 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   );
   triggerButton.title = messages.trigger.title(shortcut);
   triggerButton.setAttribute("aria-pressed", "false");
+  const motionExtension = getFloatingSurfaceMotionExtension();
+  const motionExecutionIsland = motionExtension?.createExecutionIsland(document);
+  const executionIslandView = motionExecutionIsland ?? createFallbackExecutionIsland(document);
+  const executionIsland = executionIslandView.root;
   const highlight = createMarkedElement(document, "div");
   highlight.className = "spotpatch-highlight";
   highlight.hidden = true;
@@ -3875,16 +4279,13 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   dialog.className = "spotpatch-dialog";
   dialog.hidden = true;
   dialog.tabIndex = -1;
-  dialog.dataset.placement = "viewport";
   dialog.setAttribute("role", "dialog");
   dialog.setAttribute("aria-labelledby", "spotpatch-selection-title");
-  const anchor = createMarkedElement(document, "span");
-  anchor.className = "spotpatch-anchor";
-  anchor.setAttribute("aria-hidden", "true");
   const shell = createMarkedElement(document, "div");
   shell.className = "spotpatch-shell";
   const header = createMarkedElement(document, "header");
   header.className = "spotpatch-header";
+  header.setAttribute("data-spotpatch-drag-handle", "");
   const brandRow = createMarkedElement(document, "div");
   brandRow.className = "spotpatch-brand-row";
   const brand = createMarkedElement(document, "div");
@@ -3905,8 +4306,9 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   repositoryLink.target = "_blank";
   repositoryLink.rel = "noopener noreferrer";
   const localeButton = createButton(document, "", "spotpatch-locale");
+  const resetPositionButton = createButton(document, "\u2316", "spotpatch-reset-position");
   const closeButton = createButton(document, "\xD7", "spotpatch-close");
-  headerControls.append(repositoryLink, localeButton, closeButton);
+  headerControls.append(repositoryLink, localeButton, resetPositionButton, closeButton);
   brandRow.append(brand, headerControls);
   const title = createMarkedElement(document, "h2");
   title.id = "spotpatch-selection-title";
@@ -3966,13 +4368,20 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   diagnostics.append(diagnosticsLabel, summary);
   const agentPanel = createAgentPanel(document, ai, localizer);
   const changesPanel = createMarkedElement(document, "div");
+  function requestFloatingSurfaceLayout() {
+    if (plannerVisible) {
+      floatingSurface.requestReconcile();
+    }
+  }
   const externalHandoffPanel = externalAgentEnabled ? getExternalHandoffExtension()?.createPanel(
     document,
     framework,
     localizer.locale,
     sessionId,
     localizer.subscribe,
-    placeDialog
+    requestFloatingSurfaceLayout,
+    renderExternalDispatch,
+    renderExternalControl
   ) : void 0;
   changesPanel.append(
     targetsPanel,
@@ -3985,7 +4394,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     localizer.locale,
     changesPanel,
     diagnostics,
-    placeDialog
+    requestFloatingSurfaceLayout
   ) ?? createUnavailableDataFlowPanel(document, changesPanel, diagnostics);
   selectionPanel.append(dataFlowPanel.root);
   const previewPanel = createMarkedElement(document, "div");
@@ -4041,13 +4450,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   );
   actions.append(editorFeedback, secondaryActions, primaryActions);
   shell.append(header, body, actions);
-  dialog.append(anchor, shell);
+  dialog.append(shell);
   const liveRegion = createMarkedElement(document, "div");
   liveRegion.className = "spotpatch-live";
   liveRegion.setAttribute("aria-live", "polite");
   liveRegion.setAttribute("aria-atomic", "true");
   const styles2 = [
     createStyles(document),
+    ...motionExtension === void 0 ? [] : [motionExtension.createStyles(document)],
     dataFlowPanel.styles,
     ...externalHandoffPanel === void 0 ? [] : [externalHandoffPanel.styles]
   ];
@@ -4061,14 +4471,38 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     ...styles2,
     selectionHighlights,
     highlight,
-    dialog,
-    triggerButton,
+    floatingSurfaceRoot,
     liveRegion
   );
+  floatingSurfaceRoot.append(triggerButton, dialog, executionIsland);
   document.documentElement.append(host);
-  let currentRect;
-  let activeSelectionRect;
-  let currentStatus = "idle";
+  floatingSurface.registerSurface(floatingSurfaceRoot);
+  const motionController = motionExtension === void 0 || motionExecutionIsland === void 0 ? void 0 : motionExtension.createController(
+    document,
+    Object.freeze({
+      execution: motionExecutionIsland.elements,
+      pill: triggerButton,
+      planner: dialog,
+      surface: floatingSurfaceRoot
+    }),
+    floatingSurface.reconcile
+  );
+  const cancelMotionOnDrag = () => {
+    motionController?.cancel();
+  };
+  floatingSurface.attachDraggable(triggerButton, floatingSurfaceRoot, {
+    onDragStart: cancelMotionOnDrag,
+    suppressClickOnDrag: true
+  });
+  floatingSurface.attachDraggable(header, floatingSurfaceRoot, {
+    canStartDrag: (event) => !floatingSurface.isCompact() && !startsOnInteractiveControl(event),
+    onDragStart: cancelMotionOnDrag
+  });
+  floatingSurface.attachDraggable(executionIsland, floatingSurfaceRoot, {
+    onDragStart: cancelMotionOnDrag,
+    suppressClickOnDrag: true
+  });
+  floatingSurface.reconcile();
   let currentCanOpenEditor = false;
   let currentCanPreview = false;
   let currentSummaryText = "";
@@ -4083,12 +4517,274 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     page: Object.freeze({ status: dataFlowEnabled ? "idle" : "disabled" }),
     observationCount: 0
   });
+  function currentTargetSummary() {
+    const target2 = currentTargets.find((candidate) => candidate.active);
+    return target2 === void 0 ? Object.freeze({
+      label: messages.context.selectedElement,
+      source: ""
+    }) : Object.freeze({ label: target2.label, source: target2.source });
+  }
+  function currentTargetContext() {
+    const target2 = currentTargetSummary();
+    return target2.source.length === 0 ? target2.label : `${target2.label} \xB7 ${target2.source}`;
+  }
+  function beginObservedExecution() {
+    observedExecutionStartedAt = (/* @__PURE__ */ new Date()).toISOString();
+    return observedExecutionStartedAt;
+  }
+  function observedExecutionStart() {
+    return observedExecutionStartedAt ?? beginObservedExecution();
+  }
+  function clearSuccessSettle(resetKeys) {
+    if (successSettleTimer !== void 0) {
+      runtimeWindow.clearTimeout(successSettleTimer);
+      successSettleTimer = void 0;
+    }
+    if (resetKeys) {
+      successSettleKey = void 0;
+      settledSuccessKey = void 0;
+    }
+  }
+  function showSuccessUntilSettled(key) {
+    if (settledSuccessKey === key) return false;
+    if (successSettleKey === key) return true;
+    clearSuccessSettle(false);
+    successSettleKey = key;
+    successSettleTimer = runtimeWindow.setTimeout(() => {
+      successSettleTimer = void 0;
+      if (!host.isConnected) return;
+      settledSuccessKey = key;
+      executionProjection = void 0;
+      observedExecutionStartedAt = void 0;
+      executionSuppressed = false;
+      plannerVisible = false;
+      renderFloatingSurfaceMotion();
+    }, SUCCESS_SETTLE_MS);
+    return true;
+  }
+  function externalAgentIdentity(kind) {
+    return kind.startsWith("claude") ? messages.execution.claude : kind.startsWith("codex") ? messages.execution.codex : kind;
+  }
+  function projectAgentActivity(item) {
+    return Object.freeze({
+      ...item.detail === void 0 ? {} : { detail: item.detail },
+      key: item.key,
+      kind: item.kind,
+      label: messages.execution.activityLane(item.kind, item.detail),
+      state: item.state
+    });
+  }
+  function motionActivity(key, kind, detail, state = "active") {
+    return Object.freeze({
+      ...detail === void 0 ? {} : { detail },
+      key,
+      kind,
+      label: messages.execution.activityLane(kind, detail),
+      state
+    });
+  }
+  function renderFloatingSurfaceMotion() {
+    const capturing = currentStatus === "inspecting";
+    const pillActive = !plannerVisible || capturing;
+    const projection = pillActive ? {
+      scene: capturing ? "capturing" : "pill",
+      tone: capturing ? "capturing" : "neutral",
+      headline: triggerButton.textContent,
+      action: "",
+      meta: "",
+      recentActivities: Object.freeze([])
+    } : !executionSuppressed && executionProjection !== void 0 ? executionProjection : {
+      scene: "planner",
+      tone: "ready",
+      headline: messages.dialog.editTitle,
+      action: messages.dialog.editSubtitle,
+      meta: messages.context.ready,
+      recentActivities: Object.freeze([])
+    };
+    if (motionController !== void 0) {
+      motionController.render(projection, () => {
+        executionIslandView.render(projection);
+      });
+      return;
+    }
+    executionIslandView.render(projection);
+    floatingSurfaceRoot.dataset.scene = projection.scene;
+    floatingSurfaceRoot.dataset.tone = projection.tone;
+    const plannerActive = projection.scene === "planner";
+    triggerButton.hidden = !pillActive;
+    triggerButton.inert = !pillActive;
+    dialog.hidden = !plannerActive;
+    dialog.inert = !plannerActive;
+    dialog.setAttribute("aria-hidden", String(!plannerActive));
+    executionIsland.hidden = pillActive || plannerActive;
+    executionIsland.inert = pillActive || plannerActive;
+    executionIsland.setAttribute("aria-hidden", String(pillActive || plannerActive));
+    floatingSurface.reconcile();
+  }
+  function renderExternalDispatch(dispatch) {
+    if (dispatch === null) {
+      pendingAgentMotion = void 0;
+      observedExecutionStartedAt = void 0;
+    } else if (pendingAgentMotion !== void 0 && dispatch.phase !== "failed" && dispatch.phase !== "delivery-unknown") {
+      startStagedAgentRequest();
+    } else if (dispatch.phase === "failed" || dispatch.phase === "delivery-unknown") {
+      pendingAgentMotion = void 0;
+    }
+    if (dispatch !== null && !executionSuppressed) {
+      const failed = dispatch.phase === "failed" || dispatch.phase === "delivery-unknown";
+      const completed = dispatch.phase === "completed";
+      const startedAt = failed || completed ? void 0 : observedExecutionStart();
+      if (failed || completed) observedExecutionStartedAt = void 0;
+      const successKey = `dispatch:${String(dispatch.revision)}`;
+      if (completed && !showSuccessUntilSettled(successKey)) {
+        executionProjection = void 0;
+        renderFloatingSurfaceMotion();
+        return;
+      }
+      const identity = externalAgentIdentity(dispatch.adapterKind);
+      const target2 = currentTargetSummary();
+      const activityKind = dispatch.phase === "queued" || dispatch.phase === "dispatching" || dispatch.phase === "dispatched" ? "dispatch" : completed ? "sync" : "unknown";
+      const activity = motionActivity(
+        `dispatch:${String(dispatch.revision)}:${dispatch.phase}`,
+        activityKind,
+        dispatch.phase,
+        failed ? "failure" : completed ? "success" : "active"
+      );
+      const scene = failed ? "failed" : completed ? "success" : dispatch.phase === "working" ? "running" : "handoff";
+      executionProjection = {
+        scene,
+        tone: failed ? "danger" : completed ? "success" : "running",
+        headline: completed ? messages.execution.completedTitle : failed ? messages.execution.failedTitle : scene === "running" ? messages.execution.runningTitle(target2.label) : messages.execution.dispatchingTitle(identity),
+        action: completed ? messages.execution.resultReturned : target2.source,
+        expandedHeadline: completed ? messages.execution.expandedCompletedTitle : failed ? messages.execution.failedTitle : scene === "running" ? messages.execution.expandedRunningTitle(identity) : messages.execution.dispatchingTitle(identity),
+        expandedAction: completed ? messages.execution.resultReturned : currentTargetContext(),
+        meta: failed ? messages.execution.failedStatus : completed ? messages.execution.completedStatus : scene === "running" ? messages.execution.runningStatus : messages.execution.dispatchingStatus,
+        activity,
+        recentActivities: Object.freeze([activity]),
+        ...startedAt === void 0 ? {} : { startedAt }
+      };
+    } else if (dispatch === null) {
+      executionProjection = void 0;
+    }
+    renderFloatingSurfaceMotion();
+  }
+  function renderExternalControl(status) {
+    const task = status?.task;
+    if (status === void 0 || task === void 0 || executionSuppressed) return;
+    const phase = task.managedPhase;
+    const failed = phase === "failed" || phase === "cleanup-warning";
+    const completed = phase === "completed" || phase === "review-required";
+    const cancelled = phase === "cancelled";
+    if (failed || cancelled) {
+      pendingAgentMotion = void 0;
+    } else if (pendingAgentMotion !== void 0) {
+      startStagedAgentRequest();
+    }
+    if (cancelled) {
+      executionProjection = void 0;
+      observedExecutionStartedAt = void 0;
+      renderFloatingSurfaceMotion();
+      return;
+    }
+    const startedAt = failed || completed ? void 0 : observedExecutionStart();
+    if (failed || completed) observedExecutionStartedAt = void 0;
+    if (phase === "completed" && !showSuccessUntilSettled(`managed:${String(task.revision)}`)) {
+      executionProjection = void 0;
+      renderFloatingSurfaceMotion();
+      return;
+    }
+    const scene = failed ? "failed" : completed ? "success" : phase === "preparing" ? "handoff" : "running";
+    const tone = failed ? "danger" : completed ? "success" : "running";
+    const identity = messages.execution.codex;
+    const target2 = currentTargetSummary();
+    const activityKind = phase === "preparing" ? "prepare" : phase === "auditing" ? "audit" : phase === "validating" ? "check" : phase === "applying" ? "apply" : completed ? "sync" : "unknown";
+    const latestCheck = task.checks.at(-1);
+    const latestFile = task.files.at(-1);
+    const activityDetail = phase === "validating" ? latestCheck?.id : phase === "auditing" || phase === "applying" ? latestFile?.path : void 0;
+    const activity = motionActivity(
+      `managed:${String(task.revision)}:${phase}:${activityDetail ?? ""}`,
+      activityKind,
+      activityDetail,
+      failed ? "failure" : completed ? "success" : "active"
+    );
+    const recentActivities = Object.freeze([
+      ...task.files.slice(-2).map(
+        (file) => motionActivity(
+          `managed-file:${String(task.revision)}:${file.path}`,
+          "patch",
+          file.path,
+          "success"
+        )
+      ),
+      ...task.checks.slice(-2).map(
+        (check) => motionActivity(
+          `managed-check:${String(task.revision)}:${check.id}`,
+          "check",
+          check.id,
+          check.outcome === "passed" ? "success" : "failure"
+        )
+      ),
+      activity
+    ]);
+    executionProjection = {
+      scene,
+      tone,
+      headline: completed ? messages.execution.completedTitle : failed ? messages.execution.failedTitle : scene === "handoff" ? messages.execution.dispatchingTitle(identity) : phase === "validating" ? messages.execution.activityAction("check", activityDetail) : messages.execution.runningTitle(target2.label),
+      action: completed ? task.files.length === 0 ? messages.execution.resultReturned : messages.execution.resultSummary(task.files.length) : target2.source,
+      expandedHeadline: completed ? messages.execution.expandedCompletedTitle : failed ? messages.execution.failedTitle : scene === "handoff" ? messages.execution.dispatchingTitle(identity) : messages.execution.expandedRunningTitle(identity),
+      expandedAction: completed ? messages.execution.resultReturned : currentTargetContext(),
+      meta: failed ? messages.execution.failedStatus : completed ? messages.execution.completedStatus : phase === "validating" ? messages.execution.checkingStatus : scene === "handoff" ? messages.execution.dispatchingStatus : messages.execution.runningStatus,
+      activity,
+      recentActivities,
+      ...startedAt === void 0 ? {} : { startedAt }
+    };
+    renderFloatingSurfaceMotion();
+  }
+  function beginAgentRequest(target2, agentCard) {
+    if (!plannerVisible) {
+      return;
+    }
+    clearSuccessSettle(true);
+    const startedAt = beginObservedExecution();
+    executionSuppressed = false;
+    const activity = motionActivity(
+      `dispatch-start:${currentTargetContext()}`,
+      "dispatch",
+      currentTargetContext()
+    );
+    executionProjection = {
+      scene: "agent-charging",
+      tone: "running",
+      headline: messages.execution.receivingTitle,
+      action: currentTargetContext(),
+      expandedHeadline: messages.execution.receivingTitle,
+      expandedAction: currentTargetContext(),
+      meta: messages.execution.receivingStatus,
+      activity,
+      recentActivities: Object.freeze([activity]),
+      startedAt
+    };
+    renderFloatingSurfaceMotion();
+    motionController?.dispatch(target2, agentCard);
+  }
+  function stageAgentRequest(source2, target2) {
+    if (!plannerVisible || source2.disabled) return;
+    pendingAgentMotion = Object.freeze({ source: source2, target: target2 });
+  }
+  function startStagedAgentRequest() {
+    const pending = pendingAgentMotion;
+    pendingAgentMotion = void 0;
+    if (pending === void 0 || !pending.source.isConnected || !pending.target.isConnected) {
+      return;
+    }
+    beginAgentRequest(pending.source, pending.target);
+  }
   function renderEditorStatus(state) {
     currentEditorFeedbackState = state;
     editorFeedback.dataset.state = state;
     editorFeedback.hidden = state === "idle";
     editorFeedback.textContent = state === "opening" ? messages.announcements.editorOpening : state === "success" ? messages.announcements.editorOpened : state === "error" ? messages.announcements.editorFailed : "";
-    placeDialog();
+    requestFloatingSurfaceLayout();
   }
   function statusText(target2) {
     if (target2.status === "ready") {
@@ -4223,6 +4919,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         replacement?.setSelectionRange(selectionStart, selectionEnd);
       }
     }
+    requestFloatingSurfaceLayout();
   }
   function updateTargetInstruction(targetId, instruction) {
     currentTargets = currentTargets.map(
@@ -4271,8 +4968,6 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   }
   function showSelectionHighlights(targets) {
     selectionHighlights.replaceChildren();
-    activeSelectionRect = targets.find((target2) => target2.active)?.rect;
-    currentRect = activeSelectionRect;
     for (const [index, target2] of targets.entries()) {
       const box = createMarkedElement(document, "div");
       box.className = "spotpatch-selection-highlight";
@@ -4286,31 +4981,6 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       box.append(label);
       selectionHighlights.append(box);
     }
-    placeDialog();
-  }
-  function placeDialog() {
-    if (dialog.hidden) {
-      return;
-    }
-    const view = document.defaultView;
-    const viewportWidth = view?.innerWidth ?? document.documentElement.clientWidth;
-    const viewportHeight = view?.innerHeight ?? document.documentElement.clientHeight;
-    const measured = dialog.getBoundingClientRect();
-    const status = currentStatus === "previewing" ? "previewing" : "selected";
-    const dialogWidth = measured.width > 0 ? measured.width : Math.min(DIALOG_MAX_WIDTH, viewportWidth - 32);
-    const dialogHeight = measured.height > 0 ? measured.height : Math.min(DIALOG_FALLBACK_HEIGHT[status], viewportHeight - 32);
-    const placement = calculateDialogPlacement({
-      dialogWidth,
-      dialogHeight,
-      viewportWidth,
-      viewportHeight,
-      ...currentRect === void 0 ? {} : { target: currentRect }
-    });
-    dialog.style.left = `${String(placement.left)}px`;
-    dialog.style.top = `${String(placement.top)}px`;
-    dialog.style.setProperty("--spotpatch-anchor-x", `${String(placement.anchorX)}px`);
-    dialog.style.setProperty("--spotpatch-anchor-y", `${String(placement.anchorY)}px`);
-    dialog.dataset.placement = placement.mode;
   }
   function updateContextOverview(summaryText) {
     const summaryMessages = messages.summary;
@@ -4342,13 +5012,12 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     agentPanel.setContextReady(canPreview);
     externalHandoffPanel?.setContextReady(canPreview);
     updateContextOverview(summaryText);
-    placeDialog();
+    requestFloatingSurfaceLayout();
   }
   function renderPanelStatus(status) {
     currentStatus = status;
     const selected = status === "selected";
     const previewing = status === "previewing";
-    triggerButton.hidden = selected || previewing;
     selectionPanel.hidden = !selected;
     previewPanel.hidden = !previewing;
     reselectButton.hidden = !selected;
@@ -4362,7 +5031,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     backButton.hidden = !previewing;
     title.textContent = previewing ? messages.dialog.previewTitle : messages.dialog.editTitle;
     subtitle.textContent = previewing ? messages.dialog.previewSubtitle : messages.dialog.editSubtitle;
-    placeDialog();
+    renderFloatingSurfaceMotion();
   }
   function applyMessages() {
     messages = localizer.messages();
@@ -4374,8 +5043,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     localeButton.textContent = messages.alternateLocaleName;
     localeButton.title = messages.switchLocale;
     localeButton.setAttribute("aria-label", messages.switchLocale);
+    resetPositionButton.title = messages.floatingSurface.resetPosition;
+    resetPositionButton.setAttribute(
+      "aria-label",
+      messages.floatingSurface.resetPosition
+    );
     closeButton.setAttribute("aria-label", messages.dialog.close);
     closeButton.title = messages.dialog.close;
+    header.title = messages.floatingSurface.dragHandle;
     targetsPanel.setAttribute("aria-label", messages.targets.ariaLabel);
     targetsTitle.textContent = messages.targets.title;
     diagnosticsTitle.textContent = messages.diagnostics.title;
@@ -4411,8 +5086,58 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       contextState.textContent = messages.context.collecting;
     }
   }
-  diagnostics.addEventListener("toggle", placeDialog);
+  function announce(message) {
+    liveRegion.textContent = "";
+    liveRegion.textContent = message;
+  }
+  function resetFloatingSurfacePosition() {
+    floatingSurface.reset();
+    announce(messages.floatingSurface.positionReset);
+  }
+  diagnostics.addEventListener("toggle", requestFloatingSurfaceLayout);
   localeButton.addEventListener("click", localizer.toggle);
+  resetPositionButton.addEventListener("click", resetFloatingSurfacePosition);
+  const onAgentRun = () => {
+    stageAgentRequest(agentPanel.runButton, agentPanel.root);
+  };
+  const onExternalSend = () => {
+    if (externalHandoffPanel !== void 0) {
+      stageAgentRequest(externalHandoffPanel.sendButton, externalHandoffPanel.root);
+    }
+  };
+  const onExecutionOpen = () => {
+    if (executionIslandView.canExpand() && !executionIslandView.isExpanded()) {
+      if (motionController === void 0) {
+        executionIslandView.setExpanded(true);
+        floatingSurface.reconcile();
+      } else {
+        motionController.updateLayout(() => {
+          executionIslandView.setExpanded(true);
+        });
+      }
+      return;
+    }
+    clearSuccessSettle(false);
+    executionSuppressed = true;
+    renderFloatingSurfaceMotion();
+  };
+  const onExecutionKeyDown = (event) => {
+    if (event.key !== "Escape" || !executionIslandView.isExpanded()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (motionController === void 0) {
+      executionIslandView.setExpanded(false);
+      floatingSurface.reconcile();
+    } else {
+      motionController.updateLayout(() => {
+        executionIslandView.setExpanded(false);
+      });
+    }
+  };
+  agentPanel.runButton.addEventListener("click", onAgentRun);
+  externalHandoffPanel?.sendButton.addEventListener("click", onExternalSend);
+  executionIsland.addEventListener("click", onExecutionOpen);
+  executionIsland.addEventListener("keydown", onExecutionKeyDown);
   const unsubscribeLocale = localizer.subscribe(applyMessages);
   applyMessages();
   return Object.freeze({
@@ -4442,6 +5167,11 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     ...externalHandoffPanel === void 0 ? {} : { externalHandoffPanel },
     renderStatus(status) {
       const inspecting = status === "inspecting";
+      if (status === "idle" || inspecting) {
+        plannerVisible = false;
+      } else {
+        plannerVisible = true;
+      }
       triggerButton.setAttribute("aria-pressed", String(inspecting));
       triggerButton.textContent = inspecting ? messages.trigger.stop : messages.trigger.select;
       renderPanelStatus(status);
@@ -4450,36 +5180,28 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     renderDataFlow(state) {
       currentDataFlowState = state;
       dataFlowPanel.render(state);
-      placeDialog();
+      requestFloatingSurfaceLayout();
     },
     showHighlight(rect, label) {
-      currentRect = rect;
       highlight.hidden = false;
       highlight.style.transform = `translate(${String(rect.x)}px, ${String(rect.y)}px)`;
       highlight.style.width = `${String(rect.width)}px`;
       highlight.style.height = `${String(rect.height)}px`;
       highlightLabel.textContent = label;
       targetLabel.textContent = label;
-      placeDialog();
     },
     hideHighlight() {
-      currentRect = activeSelectionRect;
       highlight.hidden = true;
       highlightLabel.textContent = "";
-      placeDialog();
     },
     showSelectionHighlights,
     hideSelectionHighlights() {
       selectionHighlights.replaceChildren();
-      activeSelectionRect = void 0;
-      currentRect = void 0;
-      placeDialog();
     },
     showSelection(summaryText, canOpenEditor, canPreview) {
       updateSelection(summaryText, canOpenEditor, canPreview);
-      triggerButton.hidden = true;
-      dialog.hidden = false;
-      placeDialog();
+      plannerVisible = true;
+      renderPanelStatus(currentStatus === "previewing" ? "previewing" : "selected");
     },
     updateSelection,
     renderTargets,
@@ -4491,8 +5213,9 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       externalHandoffPanel?.setContextReady(enabled);
     },
     hideSelection() {
-      dialog.hidden = true;
-      triggerButton.hidden = false;
+      plannerVisible = false;
+      executionSuppressed = false;
+      executionProjection = void 0;
       targetList.replaceChildren();
       currentTargets = [];
       currentMaximum = 0;
@@ -4518,14 +5241,17 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       agentPanel.setEditingEnabled(true);
       agentPanel.resetJob();
       dataFlowPanel.resetView();
+      renderFloatingSurfaceMotion();
     },
     hideSelectionTemporarily() {
-      dialog.hidden = true;
-      triggerButton.hidden = false;
+      plannerVisible = false;
+      executionSuppressed = false;
+      executionProjection = void 0;
+      renderFloatingSurfaceMotion();
     },
     showPreview(prompt) {
       promptOutput.textContent = prompt;
-      placeDialog();
+      requestFloatingSurfaceLayout();
     },
     readAgentSelection() {
       return agentPanel.readSelection();
@@ -4549,25 +5275,86 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       previewButton.disabled = !enabled || !currentCanPreview;
       externalHandoffPanel?.setContextReady(enabled && currentCanPreview);
       agentPanel.setEditingEnabled(enabled);
-      placeDialog();
+      requestFloatingSurfaceLayout();
     },
     renderAgentCapability(state, message, capabilitySnapshot, errorCode) {
       agentPanel.renderCapability(state, message, capabilitySnapshot, errorCode);
+      if (state === "error") {
+        pendingAgentMotion = void 0;
+        renderFloatingSurfaceMotion();
+      }
       const agentReady = state === "ready" && capabilitySnapshot?.state === "agent-ready";
       previewButton.classList.toggle("spotpatch-primary", !agentReady);
-      placeDialog();
+      requestFloatingSurfaceLayout();
     },
     renderAgentWorkspaceHealth(state, snapshot, errorCode) {
       agentPanel.renderWorkspaceHealth(state, snapshot, errorCode);
-      placeDialog();
+      if (state === "blocked") {
+        pendingAgentMotion = void 0;
+        renderFloatingSurfaceMotion();
+      }
+      requestFloatingSurfaceLayout();
     },
     renderAgentJob(snapshot, result, activities, errorCode) {
       agentPanel.renderJob(snapshot, result, activities, errorCode);
-      placeDialog();
+      if (pendingAgentMotion !== void 0 && snapshot.status !== "failed" && snapshot.status !== "cancelled") {
+        startStagedAgentRequest();
+      }
+      if (snapshot.status === "failed" || snapshot.status === "cancelled") {
+        pendingAgentMotion = void 0;
+      }
+      const successful = snapshot.status === "awaiting-review" || snapshot.status === "applied" || snapshot.status === "completed" || snapshot.status === "reverted";
+      const failed = snapshot.status === "failed";
+      const cancelled = snapshot.status === "cancelled";
+      const terminalSuccess = snapshot.status === "applied" || snapshot.status === "completed" || snapshot.status === "reverted";
+      const scene = successful ? "success" : failed ? "failed" : snapshot.status === "queued" || snapshot.status === "preparing" ? "handoff" : "running";
+      if (!executionSuppressed) {
+        if (terminalSuccess && !showSuccessUntilSettled(`job:${snapshot.jobId}:${snapshot.status}`)) {
+          executionProjection = void 0;
+          renderFloatingSurfaceMotion();
+          requestFloatingSurfaceLayout();
+          return;
+        }
+        const identity = snapshot.providerLabel;
+        const target2 = currentTargetSummary();
+        const projectedActivities = Object.freeze(activities.map(projectAgentActivity));
+        const latestActivity = activities.at(-1);
+        const phaseKind = snapshot.status === "queued" || snapshot.status === "preparing" ? "prepare" : snapshot.status === "validating" ? "check" : snapshot.status === "applying" || snapshot.status === "reverting" ? "apply" : snapshot.status === "awaiting-review" || successful ? "sync" : "unknown";
+        const phaseActivity = motionActivity(
+          `job-phase:${snapshot.jobId}:${snapshot.status}:${snapshot.updatedAt}`,
+          phaseKind,
+          void 0,
+          successful ? "success" : failed ? "failure" : "active"
+        );
+        const activity = snapshot.status === "running" && latestActivity !== void 0 ? projectAgentActivity(latestActivity) : phaseActivity;
+        executionProjection = cancelled ? void 0 : {
+          scene,
+          tone: successful ? "success" : failed ? "danger" : "running",
+          headline: successful ? messages.execution.completedTitle : failed ? messages.execution.failedTitle : scene === "handoff" ? messages.execution.dispatchingTitle(identity) : snapshot.status === "validating" ? messages.execution.activityAction(
+            "check",
+            latestActivity?.detail
+          ) : snapshot.status === "applying" || snapshot.status === "reverting" ? messages.execution.activityAction(phaseKind) : messages.execution.runningTitle(target2.label),
+          action: successful ? result === void 0 || result.files.length === 0 ? messages.execution.resultReturned : messages.execution.resultSummary(result.files.length) : latestActivity?.detail ?? target2.source,
+          expandedHeadline: successful ? messages.execution.expandedCompletedTitle : failed ? messages.execution.failedTitle : scene === "handoff" ? messages.execution.dispatchingTitle(identity) : messages.execution.expandedRunningTitle(identity),
+          expandedAction: successful ? result === void 0 || result.files.length === 0 ? messages.execution.resultReturned : messages.execution.resultSummary(result.files.length) : currentTargetContext(),
+          meta: successful ? messages.execution.completedStatus : failed ? messages.execution.failedStatus : snapshot.status === "validating" ? messages.execution.checkingStatus : scene === "handoff" ? messages.execution.dispatchingStatus : messages.execution.runningStatus,
+          activity,
+          recentActivities: projectedActivities.length === 0 ? Object.freeze([phaseActivity]) : projectedActivities,
+          startedAt: snapshot.createdAt
+        };
+      }
+      renderFloatingSurfaceMotion();
+      requestFloatingSurfaceLayout();
     },
     resetAgentJob() {
       agentPanel.resetJob();
-      placeDialog();
+      observedExecutionStartedAt = void 0;
+      if (executionProjection !== void 0) {
+        executionProjection = void 0;
+        executionSuppressed = false;
+        renderFloatingSurfaceMotion();
+      }
+      requestFloatingSurfaceLayout();
     },
     focusTargetInstruction(targetId) {
       instructionInput(targetId)?.focus({ preventScroll: true });
@@ -4575,21 +5362,27 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     focusPrompt() {
       promptOutput.focus({ preventScroll: true });
     },
-    announce(message) {
-      liveRegion.textContent = "";
-      liveRegion.textContent = message;
-    },
+    announce,
     locale: localizer.locale,
     messages: localizer.messages,
     agentWorkspaceConsentGranted: agentPanel.workspaceConsentGranted,
     subscribeLocale: localizer.subscribe,
     dispose() {
-      diagnostics.removeEventListener("toggle", placeDialog);
+      diagnostics.removeEventListener("toggle", requestFloatingSurfaceLayout);
       localeButton.removeEventListener("click", localizer.toggle);
+      resetPositionButton.removeEventListener("click", resetFloatingSurfacePosition);
+      agentPanel.runButton.removeEventListener("click", onAgentRun);
+      externalHandoffPanel?.sendButton.removeEventListener("click", onExternalSend);
+      executionIsland.removeEventListener("click", onExecutionOpen);
+      executionIsland.removeEventListener("keydown", onExecutionKeyDown);
       unsubscribeLocale();
       dataFlowPanel.dispose();
       externalHandoffPanel?.dispose();
       agentPanel.dispose();
+      motionController?.dispose();
+      executionIslandView.dispose();
+      clearSuccessSettle(true);
+      floatingSurface.dispose();
       host.remove();
     }
   });
@@ -4658,17 +5451,33 @@ import {
 function capabilityKey(providerProfileId, modelProfileId) {
   return `${providerProfileId}:${modelProfileId}`;
 }
+var TOOL_ACTIVITY_KIND = Object.freeze({
+  list_files: "discover",
+  search_text: "search",
+  read_file: "read",
+  replace_text: "patch",
+  apply_patch: "patch",
+  run_check: "check"
+});
+function toolActivityKind(toolName) {
+  return TOOL_ACTIVITY_KIND[toolName] ?? "unknown";
+}
 function activityFromEvent(event) {
   if (event.type === "tool") {
+    const detail = event.data.relativePath ?? event.data.checkLabel;
     return Object.freeze({
       key: `tool:${String(event.data.turn)}:${event.data.toolCallId}`,
-      label: `${event.data.toolName} \xB7 ${event.data.state}`,
+      kind: toolActivityKind(event.data.toolName),
+      ...detail === void 0 ? {} : { detail },
+      label: `${event.data.toolName}${detail === void 0 ? "" : ` \xB7 ${detail}`} \xB7 ${event.data.state}`,
       state: event.data.state === "started" ? "active" : event.data.state === "succeeded" ? "success" : "failure"
     });
   }
   if (event.type === "check") {
     return Object.freeze({
       key: `check:${event.data.result.checkId}:${String(event.sequence)}`,
+      kind: "check",
+      detail: event.data.result.label,
       label: `${event.data.result.label} \xB7 ${event.data.result.status}`,
       state: event.data.result.status === "passed" ? "success" : event.data.result.status === "failed" || event.data.result.status === "timed-out" ? "failure" : "info"
     });