@spotpatch/runtime 1.5.0 → 1.5.1

package/dist/index.js

@@ -1050,8 +1050,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) {
@@ -1060,6 +1059,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";
@@ -1077,12 +1087,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";
@@ -1695,7 +1700,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);
@@ -1705,36 +1710,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;
@@ -1746,7 +1751,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);
@@ -1793,24 +1798,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;
@@ -1818,7 +1823,7 @@ var AGENT_PANEL_STYLES = `
     gap: 8px;
     margin: 0;
     color: #929bab;
-    font-size: 13px;
+    font-size: 11px;
   }
   .spotpatch-agent-capability::before {
     width: 6px;
@@ -1848,7 +1853,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 {
@@ -2394,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);
@@ -2926,33 +2950,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;
@@ -3072,7 +3099,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));
@@ -3116,78 +3143,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;
@@ -3195,12 +3236,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;
     }
@@ -3210,30 +3251,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;
@@ -3246,7 +3287,7 @@ function createStyles(document) {
       gap: 6px;
       flex: none;
       color: #a5adba;
-      font-size: 12px;
+      font-size: 11px;
       white-space: nowrap;
     }
     .spotpatch-context-state::before {
@@ -3267,7 +3308,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;
     }
@@ -3278,36 +3319,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;
     }
@@ -3315,30 +3374,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;
@@ -3347,14 +3406,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,
@@ -3364,14 +3423,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;
     }
@@ -3379,13 +3438,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;
@@ -3394,31 +3453,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;
     }
@@ -3427,23 +3485,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;
@@ -3472,9 +3530,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;
@@ -3484,39 +3542,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;
     }
@@ -3526,14 +3589,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,
@@ -3565,11 +3650,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}
   `;
@@ -3672,10 +3759,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");
@@ -3716,21 +3810,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");
@@ -3769,6 +3872,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]"
@@ -3794,6 +3901,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,
@@ -3915,10 +4023,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         MAX_TARGET_INSTRUCTION_CHARACTERS2
       );
     }
+    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
@@ -3953,7 +4065,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;
@@ -3961,14 +4073,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`;
@@ -4018,6 +4130,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;
@@ -4056,6 +4169,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,
@@ -4124,6 +4238,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);
@@ -4149,6 +4264,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 = "";
@@ -4859,11 +4975,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
         }
       ];