@spotpatch/runtime 1.12.0 → 1.13.0

package/dist/index.cjs

@@ -1138,6 +1138,15 @@ var UI_Z_INDEX = Object.freeze({
   highlight: 2147483646,
   controls: 2147483647
 });
+var FLOATING_SURFACE_LAYOUT = Object.freeze({
+  compactInset: 8,
+  compactViewportWidth: 520,
+  desktopInset: 24,
+  dragActivationDistance: 6,
+  edgeSnapDistance: 20,
+  workbenchMaxHeight: 620,
+  workbenchMaxWidth: 460
+});
 
 // src/picker/hit-test.ts
 function isInsideSpotPatchUI(element2) {
@@ -1986,6 +1995,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");
@@ -2492,7 +2502,27 @@ function svgElement(document, tagName, attributes) {
   }
   return element2;
 }
-function createBrandMark(document, content) {
+function namespaceSvgIds(svg, prefix) {
+  const safePrefix = prefix.replace(/[^a-zA-Z0-9_-]/gu, "-");
+  const ids = /* @__PURE__ */ new Map();
+  for (const element2 of svg.querySelectorAll("[id]")) {
+    const id = element2.id;
+    const namespacedId = `${safePrefix}-${id}`;
+    ids.set(id, namespacedId);
+    element2.id = namespacedId;
+  }
+  for (const element2 of [svg, ...svg.querySelectorAll("*")]) {
+    for (const attribute of [...element2.attributes]) {
+      let value = attribute.value;
+      for (const [id, namespacedId] of ids) {
+        value = value.replaceAll(`url(#${id})`, `url(#${namespacedId})`);
+        if (value === `#${id}`) value = `#${namespacedId}`;
+      }
+      if (value !== attribute.value) element2.setAttribute(attribute.name, value);
+    }
+  }
+}
+function createBrandMark(document, content, idPrefix) {
   const resolved = resolveBrandMarkContent(content);
   const svg = svgElement(document, "svg", {
     xmlns: SVG_NAMESPACE,
@@ -2502,6 +2532,7 @@ function createBrandMark(document, content) {
     focusable: "false"
   });
   svg.innerHTML = resolved.content;
+  if (idPrefix !== void 0) namespaceSvgIds(svg, idPrefix);
   return svg;
 }
 
@@ -2511,79 +2542,18 @@ function getDataFlowExtension(target2 = globalThis) {
   return target2[DATA_FLOW_EXTENSION_KEY];
 }
 
-// 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/external-handoff-contract.ts
 var EXTERNAL_HANDOFF_EXTENSION_KEY = /* @__PURE__ */ Symbol.for("spotpatch.external-handoff.v1");
 function getExternalHandoffExtension() {
   return globalThis[EXTERNAL_HANDOFF_EXTENSION_KEY];
 }
 
+// src/ui/motion-extension-contract.ts
+var MOTION_EXTENSION_KEY = /* @__PURE__ */ Symbol.for("spotpatch.motion.v1");
+function getFloatingSurfaceMotionExtension() {
+  return globalThis[MOTION_EXTENSION_KEY];
+}
+
 // src/ui/localization.ts
 var import_shared6 = require("@spotpatch/shared");
 var STATUS_EN = Object.freeze({
@@ -2616,6 +2586,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({
@@ -2833,6 +2848,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",
@@ -2919,6 +2939,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.",
@@ -2971,6 +3012,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",
@@ -3057,6 +3103,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",
@@ -3130,13 +3197,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)
@@ -3167,53 +3721,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;
@@ -3282,82 +3803,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;
@@ -3381,18 +3848,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;
@@ -3401,6 +3856,7 @@ function createStyles(document) {
     }
     .spotpatch-repository,
     .spotpatch-locale,
+    .spotpatch-reset-position,
     .spotpatch-close {
       height: 27px;
       border: 1px solid rgb(255 255 255 / 11%);
@@ -3424,6 +3880,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;
@@ -3437,21 +3903,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;
@@ -3815,6 +4268,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,
@@ -3839,8 +4293,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; }
@@ -3856,6 +4310,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({
@@ -3869,10 +4355,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,
@@ -3880,6 +4389,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;
@@ -3893,16 +4406,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");
@@ -3923,8 +4433,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";
@@ -3984,13 +4495,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,
@@ -4003,7 +4521,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");
@@ -4059,13 +4577,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]
   ];
@@ -4079,14 +4598,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 = "";
@@ -4101,12 +4644,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") {
@@ -4241,6 +5046,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         replacement?.setSelectionRange(selectionStart, selectionEnd);
       }
     }
+    requestFloatingSurfaceLayout();
   }
   function updateTargetInstruction(targetId, instruction) {
     currentTargets = currentTargets.map(
@@ -4289,8 +5095,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";
@@ -4304,31 +5108,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;
@@ -4360,13 +5139,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;
@@ -4380,7 +5158,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();
@@ -4392,8 +5170,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;
@@ -4429,8 +5213,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({
@@ -4460,6 +5294,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);
@@ -4468,36 +5307,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,
@@ -4509,8 +5340,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;
@@ -4536,14 +5368,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();
@@ -4567,25 +5402,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 });
@@ -4593,21 +5489,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();
     }
   });
@@ -4674,17 +5576,33 @@ var import_shared8 = require("@spotpatch/shared");
 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"
     });
@@ -6258,9 +7176,9 @@ function installWritableDataProperty(target2, key, replacement, original = ownPr
     }
   };
 }
-function recordWithoutAffectingHost(record2) {
+function recordWithoutAffectingHost(record3) {
   try {
-    record2();
+    record3();
   } catch {
   }
 }