@spotpatch/runtime 1.5.0 → 1.5.2

package/dist/index.cjs

@@ -1061,8 +1061,7 @@ function unionRects(rects) {
     height: bottom - top
   });
 }
-function getElementRect(element2, view) {
-  const display = view.getComputedStyle(element2).display;
+function measureElementRect(element2, display) {
   if (display.startsWith("inline")) {
     const lineBoxRect = unionRects(Array.from(element2.getClientRects()));
     if (lineBoxRect !== void 0) {
@@ -1071,6 +1070,17 @@ function getElementRect(element2, view) {
   }
   return toElementRect(element2.getBoundingClientRect());
 }
+function getElementRect(element2, view) {
+  return measureElementRect(element2, view.getComputedStyle(element2).display);
+}
+function getVisibleElementRect(element2, view) {
+  const style = view.getComputedStyle(element2);
+  if (style.display === "none" || style.visibility === "hidden") {
+    return void 0;
+  }
+  const rect = measureElementRect(element2, style.display);
+  return rect.width > 0 && rect.height > 0 ? rect : void 0;
+}
 
 // src/ui/ui-constants.ts
 var UI_MARKER_ATTRIBUTE = "data-spotpatch-ui";
@@ -1088,12 +1098,7 @@ function isInsideSpotPatchUI(element2) {
   return root instanceof ShadowRoot && root.host.hasAttribute(UI_MARKER_ATTRIBUTE);
 }
 function hasVisibleArea(element2, view) {
-  const style = view.getComputedStyle(element2);
-  if (style.display === "none" || style.visibility === "hidden") {
-    return false;
-  }
-  const rect = element2.getBoundingClientRect();
-  return rect.width > 0 && rect.height > 0;
+  return getVisibleElementRect(element2, view) !== void 0;
 }
 function isDocumentRoot(element2) {
   return element2.tagName === "HTML" || element2.tagName === "BODY";
@@ -1699,7 +1704,7 @@ function createButton(document, label, className = "") {
 // src/ui/agent-panel.ts
 var AGENT_PANEL_STYLES = `
   .spotpatch-agent {
-    margin-top: 14px;
+    margin-top: 10px;
     overflow: hidden;
     border: 1px solid var(--spotpatch-border-subtle);
     border-radius: var(--spotpatch-radius-card);
@@ -1709,36 +1714,36 @@ var AGENT_PANEL_STYLES = `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    padding: 14px 16px;
+    gap: 10px;
+    padding: 10px 12px;
     border-bottom: 1px solid rgb(255 255 255 / 7%);
   }
-  .spotpatch-agent-title { color: #eef0f5; font-size: 16px; font-weight: 680; }
+  .spotpatch-agent-title { color: #eef0f5; font-size: 13px; font-weight: 650; }
   .spotpatch-agent-badge {
     border: 1px solid rgb(129 112 247 / 24%);
     border-radius: 999px;
     padding: 3px 7px;
     color: #c5cafa;
     background: rgb(109 93 246 / 9%);
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 650;
   }
-  .spotpatch-agent-setup { padding: 18px; }
-  .spotpatch-agent-selectors { display: grid; grid-template-columns: 1fr; gap: 15px; }
-  .spotpatch-agent-selectors label { min-width: 0; color: var(--spotpatch-text-secondary); font-size: 14px; font-weight: 580; }
+  .spotpatch-agent-setup { padding: 12px; }
+  .spotpatch-agent-selectors { display: grid; grid-template-columns: 1fr; gap: 10px; }
+  .spotpatch-agent-selectors label { min-width: 0; color: var(--spotpatch-text-secondary); font-size: 11.5px; font-weight: 580; }
   .spotpatch-agent select {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: 46px;
-    margin-top: 7px;
+    min-height: 34px;
+    margin-top: 4px;
     border: 1px solid var(--spotpatch-border);
-    border-radius: 12px;
-    padding: 10px 38px 10px 13px;
+    border-radius: 8px;
+    padding: 7px 32px 7px 9px;
     color: #e8ebf2;
     color-scheme: dark;
     background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));
-    font-size: 15px;
+    font-size: 12px;
     font-weight: 560;
     line-height: 1.35;
     outline: none;
@@ -1750,7 +1755,7 @@ var AGENT_PANEL_STYLES = `
   @supports (appearance: base-select) {
     .spotpatch-agent select,
     ::picker(select) { appearance: base-select; }
-    .spotpatch-agent select { padding: 10px 13px; }
+    .spotpatch-agent select { padding: 7px 9px; }
     .spotpatch-agent select::picker-icon {
       color: #9da6b5;
       transition: rotate 180ms cubic-bezier(.2, .8, .2, 1);
@@ -1797,24 +1802,24 @@ var AGENT_PANEL_STYLES = `
   .spotpatch-consent {
     display: flex;
     align-items: flex-start;
-    gap: 10px;
-    margin-top: 16px;
+    gap: 8px;
+    margin-top: 10px;
     color: var(--spotpatch-text-secondary);
     cursor: pointer;
-    font-size: 14px;
-    line-height: 1.6;
+    font-size: 11.5px;
+    line-height: 1.5;
   }
-  .spotpatch-consent input { width: 16px; height: 16px; flex: none; margin: 3px 0 0; accent-color: var(--spotpatch-accent); }
+  .spotpatch-consent input { width: 14px; height: 14px; flex: none; margin: 2px 0 0; accent-color: var(--spotpatch-accent); }
   .spotpatch-workspace-consent {
-    margin-top: 12px;
+    margin-top: 9px;
     border: 1px solid rgb(251 191 36 / 18%);
     border-radius: 10px;
-    padding: 11px 12px;
+    padding: 9px 10px;
     background: rgb(120 53 15 / 9%);
   }
-  .spotpatch-workspace-consent strong { display: block; color: #fde68a; font-size: 13px; font-weight: 620; }
-  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: #aeb6c4; font-size: 12px; line-height: 1.5; }
-  .spotpatch-agent-health-list { display: grid; gap: 8px; margin-top: 14px; }
+  .spotpatch-workspace-consent strong { display: block; color: #fde68a; font-size: 11.5px; font-weight: 620; }
+  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: #aeb6c4; font-size: 10.5px; line-height: 1.45; }
+  .spotpatch-agent-health-list { display: grid; gap: 6px; margin-top: 10px; }
   .spotpatch-agent-workspace,
   .spotpatch-agent-capability {
     display: flex;
@@ -1822,7 +1827,7 @@ var AGENT_PANEL_STYLES = `
     gap: 8px;
     margin: 0;
     color: #929bab;
-    font-size: 13px;
+    font-size: 11px;
   }
   .spotpatch-agent-capability::before {
     width: 6px;
@@ -1852,7 +1857,7 @@ var AGENT_PANEL_STYLES = `
   .spotpatch-agent-workspace[data-state="consent-required"]::before { background: #fbbf24; }
   .spotpatch-agent-workspace[data-state="blocked"] { color: #fecaca; }
   .spotpatch-agent-workspace[data-state="blocked"]::before { background: var(--spotpatch-danger); }
-  .spotpatch-agent-job { padding: 16px; }
+  .spotpatch-agent-job { padding: 12px; }
   .spotpatch-agent-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
   .spotpatch-agent-model { min-width: 0; overflow: hidden; color: #d6dafe; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
   .spotpatch-agent-status {
@@ -1994,11 +1999,7 @@ function createAgentPanel(document, ai, localizer) {
   job.append(jobMeta, phase, error, activity, resultPanel);
   root.append(header, setup, job);
   const testButton = createButton(document, messages.agent.testConnection);
-  const runButton = createButton(
-    document,
-    messages.agent.verifyAndRun,
-    "spotpatch-run"
-  );
+  const runButton = createButton(document, messages.agent.run, "spotpatch-run");
   const cancelButton = createButton(document, messages.agent.cancel);
   const applyButton = createButton(document, messages.agent.apply, "spotpatch-primary");
   const revertButton = createButton(document, messages.agent.revert);
@@ -2043,7 +2044,7 @@ function createAgentPanel(document, ai, localizer) {
   };
   const refreshActions = () => {
     const setupVisible = ai.enabled && selectionVisible && !jobPresented;
-    runButton.textContent = capabilityProbing ? messages.agent.verifying : capabilityReady ? messages.agent.run : messages.agent.verifyAndRun;
+    runButton.textContent = capabilityProbing ? messages.agent.verifying : messages.agent.run;
     runButton.classList.toggle("spotpatch-primary", capabilityReady);
     testButton.hidden = !setupVisible;
     runButton.hidden = !setupVisible;
@@ -2398,6 +2399,25 @@ function calculateDialogPlacement({
 }) {
   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);
@@ -2474,7 +2494,7 @@ var ERROR_MESSAGES_EN = Object.freeze({
   [import_shared6.ERROR_CODES.PROVIDER_AUTH_FAILED]: "The provider rejected authentication. Check the server-side Key.",
   [import_shared6.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "The relay does not match the configured OpenAI-compatible protocol.",
   [import_shared6.ERROR_CODES.MODEL_NOT_ALLOWED]: "The selected model profile is not allowed.",
-  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "The selected model did not complete the required tool-call probe.",
+  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "The selected model did not start or continue the required tool call.",
   [import_shared6.ERROR_CODES.PROVIDER_RATE_LIMITED]: "The provider is rate limited. Wait and try again.",
   [import_shared6.ERROR_CODES.AGENT_BUSY]: "Another write Agent job is still active.",
   [import_shared6.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "The Agent stopped at a configured time, turn, output, or size limit.",
@@ -2509,7 +2529,7 @@ var ERROR_MESSAGES_ZH = Object.freeze({
   [import_shared6.ERROR_CODES.PROVIDER_AUTH_FAILED]: "\u6A21\u578B\u670D\u52A1\u9274\u6743\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u670D\u52A1\u7AEF Key\u3002",
   [import_shared6.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "\u4E2D\u8F6C\u670D\u52A1\u4E0E\u914D\u7F6E\u7684 OpenAI \u517C\u5BB9\u534F\u8BAE\u4E0D\u4E00\u81F4\u3002",
   [import_shared6.ERROR_CODES.MODEL_NOT_ALLOWED]: "\u5F53\u524D\u6A21\u578B\u914D\u7F6E\u672A\u83B7\u6388\u6743\u3002",
-  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "\u5F53\u524D\u6A21\u578B\u672A\u901A\u8FC7\u5FC5\u8981\u7684\u5DE5\u5177\u8C03\u7528\u80FD\u529B\u63A2\u6D4B\u3002",
+  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "\u5F53\u524D\u6A21\u578B\u672A\u5B8C\u6210\u5FC5\u8981\u7684\u5DE5\u5177\u8C03\u7528\u6216\u7ED3\u679C\u7EED\u63A5\u3002",
   [import_shared6.ERROR_CODES.PROVIDER_RATE_LIMITED]: "\u6A21\u578B\u670D\u52A1\u6B63\u5728\u9650\u6D41\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002",
   [import_shared6.ERROR_CODES.AGENT_BUSY]: "\u5F53\u524D\u9879\u76EE\u5DF2\u6709\u4E00\u4E2A\u5199\u5165\u4EFB\u52A1\u6B63\u5728\u8FD0\u884C\u3002",
   [import_shared6.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "Agent \u8FBE\u5230\u65F6\u95F4\u3001\u8F6E\u6B21\u3001\u8F93\u51FA\u6216\u53D8\u66F4\u89C4\u6A21\u9650\u5236\u3002",
@@ -2689,7 +2709,7 @@ var UI_MESSAGES = Object.freeze({
       modelAriaLabel: "AI model",
       providerUnavailable: "Provider configuration is unavailable.",
       consent: (provider) => `I understand selected context and allowed source may be sent to ${provider}; its data policy is my responsibility.`,
-      connectionNotTested: "Connection not tested",
+      connectionNotTested: "Optional connection check not run",
       workspaceNotChecked: "Local workspace not checked",
       checkingWorkspace: "Checking Git workspace and isolated execution\u2026",
       workspaceReady: "Local workspace is ready for isolated execution",
@@ -2706,7 +2726,6 @@ var UI_MESSAGES = Object.freeze({
       consentRequired: "Confirm remote provider data transmission before running AI.",
       toolsReady: "tools and streaming ready",
       testConnection: "Check environment",
-      verifyAndRun: "Verify & run",
       verifying: "Verifying\u2026",
       run: "Run AI",
       cancel: "Cancel agent",
@@ -2825,7 +2844,7 @@ var UI_MESSAGES = Object.freeze({
       modelAriaLabel: "AI \u6A21\u578B",
       providerUnavailable: "\u6A21\u578B\u670D\u52A1\u914D\u7F6E\u4E0D\u53EF\u7528\u3002",
       consent: (provider) => `\u6211\u4E86\u89E3\u9009\u4E2D\u4E0A\u4E0B\u6587\u4E0E\u83B7\u51C6\u6E90\u7801\u53EF\u80FD\u53D1\u9001\u5230 ${provider}\uFF0C\u5E76\u81EA\u884C\u8D1F\u8D23\u5176\u6570\u636E\u7B56\u7565\u3002`,
-      connectionNotTested: "\u5C1A\u672A\u6D4B\u8BD5\u8FDE\u63A5",
+      connectionNotTested: "\u5C1A\u672A\u6267\u884C\u53EF\u9009\u8FDE\u63A5\u68C0\u67E5",
       workspaceNotChecked: "\u5C1A\u672A\u68C0\u67E5\u672C\u5730\u5DE5\u4F5C\u533A",
       checkingWorkspace: "\u6B63\u5728\u68C0\u67E5 Git \u5DE5\u4F5C\u533A\u4E0E\u9694\u79BB\u6267\u884C\u73AF\u5883\u2026\u2026",
       workspaceReady: "\u672C\u5730\u5DE5\u4F5C\u533A\u5DF2\u6EE1\u8DB3\u9694\u79BB\u6267\u884C\u6761\u4EF6",
@@ -2842,7 +2861,6 @@ var UI_MESSAGES = Object.freeze({
       consentRequired: "\u8FD0\u884C AI \u524D\uFF0C\u8BF7\u5148\u786E\u8BA4\u5141\u8BB8\u5411\u8FDC\u7A0B\u6A21\u578B\u670D\u52A1\u4F20\u8F93\u6570\u636E\u3002",
       toolsReady: "\u5DE5\u5177\u8C03\u7528\u4E0E\u6D41\u5F0F\u54CD\u5E94\u5DF2\u5C31\u7EEA",
       testConnection: "\u68C0\u67E5\u8FD0\u884C\u73AF\u5883",
-      verifyAndRun: "\u9A8C\u8BC1\u5E76\u8FD0\u884C",
       verifying: "\u9A8C\u8BC1\u4E2D\u2026\u2026",
       run: "\u8FD0\u884C AI",
       cancel: "\u53D6\u6D88 Agent",
@@ -2928,33 +2946,36 @@ function createUiLocalizer(document, preference = "auto") {
 }
 
 // src/ui/runtime-view.ts
-var DIALOG_FALLBACK_WIDTH = 560;
+var DIALOG_MAX_WIDTH = 460;
+var DIALOG_MAX_HEIGHT = 620;
 var DIALOG_FALLBACK_HEIGHT = Object.freeze({
-  previewing: 640,
-  selected: 720
+  previewing: 560,
+  selected: DIALOG_MAX_HEIGHT
 });
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
     :host {
       all: initial;
-      --spotpatch-bg: #11141a;
-      --spotpatch-bg-raised: #191d25;
-      --spotpatch-bg-input: #0c0f14;
-      --spotpatch-border: #303641;
-      --spotpatch-border-subtle: #262c35;
-      --spotpatch-text: #f4f6fb;
-      --spotpatch-text-secondary: #a4adbd;
-      --spotpatch-text-muted: #7f899a;
-      --spotpatch-accent: #7060ee;
-      --spotpatch-accent-strong: #604ee8;
-      --spotpatch-accent-cyan: #27b8cf;
+      --spotpatch-bg: #0e0e12;
+      --spotpatch-bg-raised: #17171c;
+      --spotpatch-bg-active: #1c1c22;
+      --spotpatch-bg-input: #0b0b0f;
+      --spotpatch-border: #2a2a32;
+      --spotpatch-border-subtle: #232329;
+      --spotpatch-text: #f2f2f5;
+      --spotpatch-text-secondary: #96969f;
+      --spotpatch-text-muted: #686872;
+      --spotpatch-accent: #8b7bff;
+      --spotpatch-accent-strong: #6a5ce8;
+      --spotpatch-accent-cyan: #52a8ff;
       --spotpatch-danger: #fb7185;
       --spotpatch-success: #34d399;
       --spotpatch-warning: #f59e0b;
-      --spotpatch-radius-panel: 24px;
-      --spotpatch-radius-card: 15px;
-      --spotpatch-shadow-panel: 0 28px 72px rgb(0 0 0 / 38%);
+      --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;
@@ -3074,7 +3095,7 @@ function createStyles(document) {
       left: 16px;
       z-index: ${String(UI_Z_INDEX.controls)};
       box-sizing: border-box;
-      width: min(560px, calc(100vw - 32px));
+      width: min(${String(DIALOG_MAX_WIDTH)}px, calc(100vw - 32px));
       color: #edf0f7;
       outline: none;
       filter: drop-shadow(var(--spotpatch-shadow-panel));
@@ -3118,78 +3139,92 @@ function createStyles(document) {
       position: relative;
       z-index: 1;
       display: flex;
-      max-height: min(720px, calc(100vh - 32px));
+      box-sizing: border-box;
+      max-height: min(${String(DIALOG_MAX_HEIGHT)}px, calc(100vh - 32px));
       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 / 7%), inset 0 0 0 1px rgb(2 6 23 / 40%);
+      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: 20px 22px 18px;
-      border-bottom: 1px solid rgb(255 255 255 / 8%);
+      padding: 0 18px 14px;
     }
     .spotpatch-brand-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 16px;
-      margin-bottom: 18px;
+      gap: 12px;
+      margin: 0 -18px 18px;
+      padding: 14px 18px 13px;
+      border-bottom: 1px solid var(--spotpatch-border-subtle);
     }
     .spotpatch-brand {
       display: inline-flex;
       align-items: center;
-      gap: 11px;
+      gap: 10px;
       min-width: 0;
       color: #f8fafc;
     }
     .spotpatch-brand-mark {
-      width: 34px;
-      height: 34px;
+      width: 30px;
+      height: 30px;
       flex: none;
       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: 15px;
-      font-weight: 720;
+      font-size: 13.5px;
+      font-weight: 680;
       letter-spacing: -.01em;
     }
     .spotpatch-brand-context {
       color: #8e98aa;
-      font-size: 11px;
+      font-size: 10.5px;
       font-weight: 560;
       letter-spacing: .02em;
     }
     .spotpatch-header-controls {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
       flex: none;
     }
     .spotpatch-repository,
     .spotpatch-locale,
     .spotpatch-close {
-      height: 30px;
+      height: 27px;
       border: 1px solid rgb(255 255 255 / 11%);
-      border-radius: 9px;
-      background: rgb(255 255 255 / 4%);
+      border-radius: 7px;
+      background: transparent;
     }
     .spotpatch-repository {
       display: inline-flex;
       align-items: center;
-      padding: 0 10px;
-      color: #bcecf2;
+      padding: 0 9px;
+      color: var(--spotpatch-text-secondary);
       font-size: 11px;
       font-weight: 680;
       text-decoration: none;
     }
     .spotpatch-locale {
-      min-width: 38px;
-      padding: 0 9px;
+      min-width: 34px;
+      padding: 0 8px;
       color: #c5cad5;
       cursor: pointer;
       font-size: 12px;
@@ -3197,12 +3232,12 @@ function createStyles(document) {
     }
     .spotpatch-close {
       display: inline-grid;
-      width: 30px;
+      width: 27px;
       padding: 0;
       place-items: center;
       color: #9da5b4;
       cursor: pointer;
-      font-size: 17px;
+      font-size: 15px;
       line-height: 1;
       transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
     }
@@ -3212,30 +3247,30 @@ function createStyles(document) {
     .spotpatch-title {
       margin: 0;
       color: #fff;
-      font-size: 24px;
-      font-weight: 730;
-      letter-spacing: -.025em;
+      font-size: 18px;
+      font-weight: 680;
+      letter-spacing: -.015em;
     }
     .spotpatch-subtitle {
-      max-width: 470px;
-      margin: 6px 0 0;
-      color: #9ca5b5;
-      font-size: 15px;
-      line-height: 1.55;
+      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;
       gap: 8px;
       min-width: 0;
-      margin-top: 16px;
+      margin-top: 14px;
     }
     .spotpatch-target-label {
       min-width: 0;
       overflow: hidden;
       border: 1px solid rgb(129 112 247 / 24%);
       border-radius: 999px;
-      padding: 6px 10px;
+      padding: 4px 10px;
       color: #cdd2ff;
       background: rgb(109 93 246 / 10%);
       font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -3248,7 +3283,7 @@ function createStyles(document) {
       gap: 6px;
       flex: none;
       color: #a5adba;
-      font-size: 12px;
+      font-size: 11px;
       white-space: nowrap;
     }
     .spotpatch-context-state::before {
@@ -3269,7 +3304,7 @@ function createStyles(document) {
     .spotpatch-body {
       min-height: 0;
       overflow: auto;
-      padding: 20px 22px 22px;
+      padding: 0 18px 14px;
       scrollbar-color: rgb(100 116 139 / 50%) transparent;
       scrollbar-width: thin;
     }
@@ -3280,36 +3315,54 @@ function createStyles(document) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 7px;
-      color: #eef0f5;
-      font-size: 14px;
-      font-weight: 680;
+      gap: 10px;
+      margin-bottom: 8px;
+      color: var(--spotpatch-text-secondary);
+      font-size: 11px;
+      font-weight: 650;
+      letter-spacing: .04em;
+      text-transform: uppercase;
     }
     .spotpatch-targets-meta {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 12px;
+      gap: 8px;
+      min-width: 0;
+      letter-spacing: 0;
+      text-transform: none;
     }
-    .spotpatch-target-complete { color: var(--spotpatch-text-secondary); font-size: 12px; font-weight: 560; }
+    .spotpatch-target-complete { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 560; }
     .spotpatch-target-budget {
       color: var(--spotpatch-text-muted);
-      font: 550 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 550 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
     }
+    .spotpatch-target-budget[data-state="ready"] { display: none; }
     .spotpatch-target-budget[data-state="over"] { color: #fda4af; }
     .spotpatch-target-count {
+      margin-left: auto;
       border-radius: 999px;
       padding: 3px 8px;
-      color: #b8bffd;
-      background: rgb(109 93 246 / 11%);
-      font: 650 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      color: var(--spotpatch-text-muted);
+      font: 600 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+    }
+    .spotpatch-target-progress {
+      height: 3px;
+      margin-bottom: 13px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: var(--spotpatch-border-subtle);
+    }
+    .spotpatch-target-progress-fill {
+      width: 0;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--spotpatch-accent), var(--spotpatch-accent-cyan));
+      transition: width 180ms ease;
     }
     .spotpatch-target-list {
       display: grid;
-      gap: 12px;
-      max-height: min(390px, 48vh);
+      gap: 8px;
+      max-height: min(340px, 48vh);
       overflow: auto;
       padding-right: 2px;
     }
@@ -3317,30 +3370,30 @@ function createStyles(document) {
       overflow: hidden;
       border: 1px solid var(--spotpatch-border-subtle);
       border-radius: var(--spotpatch-radius-card);
-      background: rgb(255 255 255 / 2.7%);
+      background: var(--spotpatch-bg-raised);
       transition: border-color 150ms ease, background 150ms ease;
     }
     .spotpatch-target-item[data-active="true"] {
-      border-color: rgb(125 106 248 / 42%);
-      background: rgb(109 93 246 / 6%);
-      box-shadow: inset 3px 0 var(--spotpatch-accent-strong);
+      border-color: rgb(139 123 255 / 34%);
+      background: var(--spotpatch-bg-active);
+      box-shadow: 0 0 0 3px rgb(139 123 255 / 10%);
     }
     .spotpatch-target-summary {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 34px 34px;
+      grid-template-columns: minmax(0, 1fr) 28px 28px;
       align-items: stretch;
-      gap: 4px;
-      padding: 5px;
+      gap: 2px;
+      padding: 4px;
     }
     .spotpatch-target-select {
       display: grid;
-      grid-template-columns: 34px minmax(0, 1fr) auto;
+      grid-template-columns: 24px minmax(0, 1fr) auto;
       align-items: center;
-      gap: 11px;
+      gap: 9px;
       min-width: 0;
       border: 0;
-      border-radius: 11px;
-      padding: 10px 11px;
+      border-radius: 8px;
+      padding: 8px;
       color: inherit;
       background: transparent;
       cursor: pointer;
@@ -3349,14 +3402,14 @@ function createStyles(document) {
     .spotpatch-target-select:hover { background: rgb(255 255 255 / 3.5%); }
     .spotpatch-target-index {
       display: inline-grid;
-      width: 30px;
-      height: 30px;
+      width: 22px;
+      height: 22px;
       place-items: center;
       border: 1px solid rgb(68 202 224 / 25%);
-      border-radius: 9px;
-      color: #9ce7f0;
-      background: rgb(8 145 178 / 10%);
-      font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border-radius: 6px;
+      color: var(--spotpatch-text-secondary);
+      background: var(--spotpatch-bg);
+      font: 650 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
     }
     .spotpatch-target-copy { min-width: 0; }
     .spotpatch-target-name,
@@ -3366,14 +3419,14 @@ function createStyles(document) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-target-name { color: #f2f4f8; font-size: 16px; font-weight: 680; }
-    .spotpatch-target-source { margin-top: 5px; color: var(--spotpatch-text-muted); font: 500 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-name { color: #f2f2f5; font-size: 13px; font-weight: 650; }
+    .spotpatch-target-source { margin-top: 1px; color: var(--spotpatch-text-muted); font: 500 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
     .spotpatch-target-state {
       border-radius: 999px;
-      padding: 4px 8px;
+      padding: 3px 8px;
       color: #a7f3d0;
       background: rgb(16 185 129 / 9%);
-      font-size: 11px;
+      font-size: 10.5px;
       font-weight: 650;
       white-space: nowrap;
     }
@@ -3381,13 +3434,13 @@ function createStyles(document) {
     .spotpatch-target-open,
     .spotpatch-target-remove {
       display: inline-grid;
-      width: 34px;
+      width: 28px;
       height: 100%;
-      min-height: 40px;
+      min-height: 34px;
       padding: 0;
       place-items: center;
       border: 1px solid transparent;
-      border-radius: 10px;
+      border-radius: 7px;
       color: #7f899a;
       background: transparent;
       cursor: pointer;
@@ -3396,31 +3449,30 @@ function createStyles(document) {
     .spotpatch-target-open:hover:not(:disabled) { border-color: rgb(68 202 224 / 30%); color: #c8f7ff; background: rgb(8 145 178 / 11%); }
     .spotpatch-target-remove:hover:not(:disabled) { border-color: rgb(251 113 133 / 24%); color: #fda4af; background: rgb(127 29 29 / 12%); }
     .spotpatch-target-editor {
-      border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 18px;
+      padding: 0 12px 12px;
     }
     .spotpatch-target-editor-head {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
       gap: 12px;
-      margin-bottom: 9px;
+      margin-bottom: 6px;
     }
-    .spotpatch-target-editor-label { color: #dfe3ea; font-size: 15px; font-weight: 650; }
-    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-editor-label { color: var(--spotpatch-text-secondary); font-size: 11px; font-weight: 650; }
+    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
     .spotpatch-target-editor textarea {
       box-sizing: border-box;
       width: 100%;
-      min-height: 126px;
+      min-height: 74px;
       resize: vertical;
       border: 1px solid var(--spotpatch-border);
-      border-radius: 12px;
-      padding: 14px 15px;
+      border-radius: 7px;
+      padding: 9px 10px;
       color: #f8fafc;
       caret-color: #8b7cf7;
       background: var(--spotpatch-bg-input);
-      font-size: 15px;
-      line-height: 1.65;
+      font-size: 12.5px;
+      line-height: 1.55;
       outline: none;
       transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
     }
@@ -3429,23 +3481,23 @@ function createStyles(document) {
     .spotpatch-target-editor textarea:focus {
       border-color: rgb(139 124 247 / 68%);
       background: rgb(3 7 18 / 65%);
-      box-shadow: 0 0 0 3px rgb(109 93 246 / 10%);
+      box-shadow: 0 0 0 2px rgb(109 93 246 / 10%);
     }
     .spotpatch-diagnostics {
-      margin-top: 14px;
+      margin-top: 10px;
       overflow: hidden;
       border: 1px solid rgb(255 255 255 / 8%);
-      border-radius: 13px;
+      border-radius: 9px;
       background: rgb(255 255 255 / 2.5%);
     }
     .spotpatch-diagnostics > summary {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 11px 13px;
+      padding: 9px 11px;
       color: #bfc5d0;
       cursor: pointer;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 650;
       list-style: none;
       user-select: none;
@@ -3474,9 +3526,9 @@ function createStyles(document) {
       margin: 0;
       overflow: auto;
       border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 12px 13px 13px;
+      padding: 10px 11px 11px;
       color: #9ca5b5;
-      font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 10.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
@@ -3486,39 +3538,44 @@ function createStyles(document) {
       margin: 0;
       overflow: auto;
       border: 1px solid rgb(255 255 255 / 9%);
-      border-radius: 14px;
-      padding: 13px;
+      border-radius: 9px;
+      padding: 11px;
       color: #d8ddeb;
       background: rgb(3 7 18 / 55%);
-      font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
     }
     .spotpatch-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 9px;
-      padding: 14px 22px 18px;
+      display: grid;
+      gap: 8px;
+      padding: 10px 18px 14px;
       border-top: 1px solid rgb(255 255 255 / 8%);
-      background: rgb(8 12 22 / 82%);
+      background: rgb(8 8 12 / 86%);
     }
     .spotpatch-editor-feedback {
-      flex-basis: 100%;
       white-space: normal;
     }
+    .spotpatch-secondary-actions,
+    .spotpatch-primary-actions {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .spotpatch-secondary-actions { min-height: 30px; }
     .spotpatch-actions button {
       display: inline-flex;
-      min-height: 40px;
+      min-height: 34px;
       align-items: center;
       justify-content: center;
       border: 1px solid rgb(255 255 255 / 10%);
-      border-radius: 11px;
-      padding: 9px 13px;
-      color: #d8ddeb;
+      border-radius: 9px;
+      padding: 7px 11px;
+      color: var(--spotpatch-text-secondary);
       background: rgb(255 255 255 / 4%);
       cursor: pointer;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 650;
       transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
     }
@@ -3528,14 +3585,36 @@ function createStyles(document) {
       transform: translateY(-1px);
     }
     .spotpatch-actions .spotpatch-primary {
-      min-width: 154px;
+      min-width: 138px;
       flex: 1;
-      border-color: rgb(139 124 247 / 58%);
-      color: #fff;
-      background: var(--spotpatch-accent-strong);
-      box-shadow: 0 9px 24px rgb(55 48 163 / 20%), inset 0 1px rgb(255 255 255 / 14%);
+      border-color: transparent;
+      color: var(--spotpatch-text-on-accent);
+      background: linear-gradient(135deg, var(--spotpatch-accent), var(--spotpatch-accent-strong));
+      box-shadow: 0 8px 20px -8px rgb(139 123 255 / 55%);
     }
+    .spotpatch-actions .spotpatch-primary:hover:not(:disabled) { color: var(--spotpatch-text-on-accent); filter: brightness(1.08); }
     .spotpatch-actions .spotpatch-primary::after { margin-left: 8px; content: "\u2197"; font-size: 12px; }
+    .spotpatch-actions .spotpatch-secondary-action {
+      min-height: 30px;
+      border-style: dashed;
+      padding: 5px 10px;
+      color: var(--spotpatch-text-muted);
+      background: transparent;
+      font-size: 11px;
+    }
+    .spotpatch-actions .spotpatch-icon-action {
+      width: 34px;
+      min-width: 34px;
+      padding: 0;
+      font-size: 0;
+    }
+    .spotpatch-actions .spotpatch-icon-action::before {
+      color: var(--spotpatch-text-secondary);
+      content: attr(data-compact-icon);
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 1;
+    }
     .spotpatch-actions button:disabled { cursor: not-allowed; opacity: .4; transform: none; }
     .spotpatch-actions button:focus-visible,
     .spotpatch-repository:focus-visible,
@@ -3567,11 +3646,13 @@ function createStyles(document) {
     }
     @media (max-width: 520px) {
       .spotpatch-dialog { top: 8px; left: 8px; width: calc(100vw - 16px); }
-      .spotpatch-shell { max-height: calc(100vh - 16px); border-radius: 18px; }
-      .spotpatch-header, .spotpatch-body { padding-left: 16px; padding-right: 16px; }
-      .spotpatch-actions { padding-left: 16px; padding-right: 16px; }
-      .spotpatch-target-select { grid-template-columns: 32px minmax(0, 1fr); }
+      .spotpatch-shell { max-height: calc(100vh - 16px); border-radius: 14px; }
+      .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; }
+      .spotpatch-target-select { grid-template-columns: 24px minmax(0, 1fr); }
       .spotpatch-target-state { display: none; }
+      .spotpatch-repository { display: none; }
     }
     ${AGENT_PANEL_STYLES}
   `;
@@ -3674,10 +3755,17 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   const targetCount = createMarkedElement(document, "span");
   targetCount.className = "spotpatch-target-count";
   targetsMeta.append(targetComplete, targetBudget);
-  targetsHeading.append(targetsTitle, targetCount);
+  targetRow.append(targetCount);
+  targetsHeading.append(targetsTitle, targetsMeta);
+  const targetProgress = createMarkedElement(document, "div");
+  targetProgress.className = "spotpatch-target-progress";
+  targetProgress.setAttribute("aria-hidden", "true");
+  const targetProgressFill = createMarkedElement(document, "div");
+  targetProgressFill.className = "spotpatch-target-progress-fill";
+  targetProgress.append(targetProgressFill);
   const targetList = createMarkedElement(document, "div");
   targetList.className = "spotpatch-target-list";
-  targetsPanel.append(targetsHeading, targetsMeta, targetList);
+  targetsPanel.append(targetsHeading, targetProgress, targetList);
   const diagnostics = createMarkedElement(document, "details");
   diagnostics.className = "spotpatch-diagnostics";
   const diagnosticsLabel = createMarkedElement(document, "summary");
@@ -3718,21 +3806,30 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   );
   const copyButton = createButton(document, messages.actions.copy, "spotpatch-primary");
   const backButton = createButton(document, messages.actions.back);
-  actions.append(
-    editorFeedback,
+  const secondaryActions = createMarkedElement(document, "div");
+  secondaryActions.className = "spotpatch-secondary-actions";
+  const primaryActions = createMarkedElement(document, "div");
+  primaryActions.className = "spotpatch-primary-actions";
+  addTargetButton.classList.add("spotpatch-icon-action");
+  addTargetButton.dataset.compactIcon = "+";
+  agentPanel.testButton.classList.add("spotpatch-icon-action");
+  agentPanel.testButton.dataset.compactIcon = "\u2713";
+  openEditorButton.classList.add("spotpatch-secondary-action");
+  reselectButton.classList.add("spotpatch-secondary-action");
+  secondaryActions.append(openEditorButton, reselectButton);
+  primaryActions.append(
+    agentPanel.testButton,
+    addTargetButton,
     agentPanel.runButton,
     previewButton,
-    agentPanel.testButton,
     agentPanel.cancelButton,
     agentPanel.applyButton,
     agentPanel.revertButton,
     agentPanel.resetButton,
-    addTargetButton,
-    openEditorButton,
-    reselectButton,
     copyButton,
     backButton
   );
+  actions.append(editorFeedback, secondaryActions, primaryActions);
   shell.append(header, body, actions);
   dialog.append(anchor, shell);
   const liveRegion = createMarkedElement(document, "div");
@@ -3771,6 +3868,10 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     }
     return target2.status === "warning" ? messages.targets.statusPartial : messages.targets.statusCollecting;
   }
+  function renderTargetProgress(complete, total) {
+    const ratio = total === 0 ? 0 : complete / total;
+    targetProgressFill.style.width = `${String(ratio * 100)}%`;
+  }
   function instructionInput(targetId) {
     const inputs = targetList.querySelectorAll(
       "textarea[data-target-instruction-id]"
@@ -3796,6 +3897,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       (total, target2) => total + target2.instruction.trim().length,
       0
     );
+    renderTargetProgress(completeCount, targets.length);
     targetCount.textContent = messages.targets.count(targets.length, maximum);
     targetComplete.textContent = messages.targets.complete(
       completeCount,
@@ -3917,10 +4019,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS
       );
     }
+    const completeCount = currentTargets.filter(
+      (target2) => target2.instruction.trim().length > 0
+    ).length;
     targetComplete.textContent = messages.targets.complete(
-      currentTargets.filter((target2) => target2.instruction.trim().length > 0).length,
+      completeCount,
       currentTargets.length
     );
+    renderTargetProgress(completeCount, currentTargets.length);
     const instructionCharacters = currentTargets.reduce(
       (total, target2) => total + target2.instruction.trim().length,
       0
@@ -3955,7 +4061,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     placeDialog();
   }
   function placeDialog() {
-    if (dialog.hidden || currentRect === void 0) {
+    if (dialog.hidden) {
       return;
     }
     const view = document.defaultView;
@@ -3963,14 +4069,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     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_FALLBACK_WIDTH, viewportWidth - 32);
+    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({
-      target: currentRect,
       dialogWidth,
       dialogHeight,
       viewportWidth,
-      viewportHeight
+      viewportHeight,
+      ...currentRect === void 0 ? {} : { target: currentRect }
     });
     dialog.style.left = `${String(placement.left)}px`;
     dialog.style.top = `${String(placement.top)}px`;
@@ -4020,6 +4126,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     addTargetButton.hidden = !selected;
     openEditorButton.hidden = !selected;
     previewButton.hidden = !selected;
+    secondaryActions.hidden = !selected;
     agentPanel.setSelectionVisible(selected);
     copyButton.hidden = !previewing;
     backButton.hidden = !previewing;
@@ -4058,6 +4165,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     } else {
       targetCount.textContent = messages.targets.count(0, currentMaximum);
       targetComplete.textContent = messages.targets.complete(0, 0);
+      renderTargetProgress(0, 0);
       targetBudget.dataset.state = "ready";
       targetBudget.textContent = messages.targets.instructionBudget(
         0,
@@ -4126,6 +4234,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       selectionHighlights.replaceChildren();
       activeSelectionRect = void 0;
       currentRect = void 0;
+      placeDialog();
     },
     showSelection(summaryText, canOpenEditor, canPreview) {
       updateSelection(summaryText, canOpenEditor, canPreview);
@@ -4151,6 +4260,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       renderEditorStatus("idle");
       targetCount.textContent = messages.targets.count(0, 0);
       targetComplete.textContent = messages.targets.complete(0, 0);
+      renderTargetProgress(0, 0);
       targetLabel.textContent = messages.context.selectedElement;
       summary.textContent = "";
       promptOutput.textContent = "";
@@ -4593,10 +4703,7 @@ function createAgentWorkflow(options) {
       providerConsents.add(selection.providerProfileId);
       const workflowRevision = ++revision;
       options.view.setAgentEditingEnabled(false);
-      void Promise.all([
-        probe(workflowRevision),
-        refreshWorkspaceHealth(workflowRevision)
-      ]).then(async ([, health]) => {
+      void refreshWorkspaceHealth(workflowRevision).then(async (health) => {
         if (workflowRevision !== revision) {
           return;
         }
@@ -4859,11 +4966,15 @@ ${summary}`;
       if (!target2.element?.isConnected) {
         return [];
       }
+      const rect = getVisibleElementRect(target2.element, browser.window);
+      if (rect === void 0) {
+        return [];
+      }
       return [
         {
           id: target2.id,
           label: elementLabel(target2.element),
-          rect: getElementRect(target2.element, browser.window),
+          rect,
           active: target2.id === activeTargetId
         }
       ];