@jay-framework/aiditor 0.19.6 → 0.19.7

package/dist/pages/aiditor/page.jay-html

@@ -29,11 +29,15 @@
       --harmony-shadow-sm: 0 1px 4px rgba(22, 45, 61, 0.06);
       --harmony-shadow-md: 0 4px 24px rgba(22, 45, 61, 0.1);
       --harmony-shadow-lg: 0 8px 40px rgba(22, 45, 61, 0.12);
+      --harmony-shadow-add-btn:
+        0 1px 2px rgba(22, 45, 61, 0.05),
+        0 4px 14px rgba(22, 45, 61, 0.1),
+        0 10px 28px rgba(22, 45, 61, 0.08);
       --harmony-radius-sm: 6px;
       --harmony-radius-md: 10px;
       --harmony-radius-lg: 16px;
       --harmony-radius-pill: 999px;
-      --harmony-sidebar-width: 52px;
+      --harmony-sidebar-width: 72px;
       --harmony-global-bar-height: 52px;
       --harmony-secondary-bar-height: 44px;
       --harmony-font: 'Madefor', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -146,25 +150,69 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      align-items: center;
       min-height: 0;
-      padding: 20px 28px 72px;
-      overflow: hidden;
+      padding: 20px 40px 72px;
+      overflow-x: visible;
+      overflow-y: hidden;
+    }
+
+    .canvas-stage-shell {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      max-width: 100%;
+      align-self: center;
     }
 
     .canvas-window {
+      position: relative;
       flex: 1;
       display: flex;
       flex-direction: column;
       min-height: 0;
-      max-width: 1280px;
       width: 100%;
-      margin: 0 auto;
+      max-width: 100%;
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-lg);
       box-shadow: var(--harmony-shadow-md);
       overflow: hidden;
     }
+    .stage-resize-handle {
+      position: absolute;
+      top: 50%;
+      z-index: 12;
+      width: 10px;
+      height: 56px;
+      border: 1px solid var(--harmony-border-strong);
+      border-radius: var(--harmony-radius-pill);
+      background: var(--harmony-bg-surface);
+      box-shadow: var(--harmony-shadow-sm);
+      cursor: col-resize;
+      touch-action: none;
+    }
+    .stage-resize-handle::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 2px;
+      height: 20px;
+      margin: -10px 0 0 -1px;
+      border-radius: 1px;
+      background: var(--harmony-border-strong);
+    }
+    .stage-resize-handle-left {
+      left: 0;
+      transform: translate(calc(-100% - 8px), -50%);
+    }
+    .stage-resize-handle-right {
+      right: 0;
+      transform: translate(calc(100% + 8px), -50%);
+    }
 
     .canvas-chrome {
       flex-shrink: 0;
@@ -185,30 +233,63 @@
     }
 
     /* Floating annotation toolbar — centered at bottom of canvas stage */
-    .annotate-dock {
+    .annotate-dock-wrap {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 60;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 2px;
-      padding: 5px 8px;
+      gap: 8px;
+      pointer-events: none;
+    }
+    .annotate-dock-wrap > * { pointer-events: auto; }
+    .clear-markers-confirm {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 14px;
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-pill);
       box-shadow: 0 6px 28px rgba(22, 45, 61, 0.14), 0 2px 6px rgba(22, 45, 61, 0.06);
-      pointer-events: auto;
+      font-size: 13px;
+      color: var(--harmony-text);
+      white-space: nowrap;
     }
-    .annotate-dock-label {
+    .clear-markers-confirm-msg { color: var(--harmony-text-secondary); }
+    .clear-markers-cancel-btn,
+    .clear-markers-confirm-btn {
+      border-radius: var(--harmony-radius-pill);
+      padding: 5px 12px;
       font-size: 12px;
       font-weight: 600;
-      color: var(--harmony-text-secondary);
-      padding: 0 8px 0 4px;
+      cursor: pointer;
       white-space: nowrap;
-      border-right: 1px solid var(--harmony-border);
-      margin-right: 4px;
+    }
+    .clear-markers-cancel-btn {
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-text);
+      border: 1px solid var(--harmony-border);
+    }
+    .clear-markers-cancel-btn:hover { background: var(--harmony-bg-hover); }
+    .clear-markers-confirm-btn {
+      background: var(--harmony-danger, #d64545);
+      color: #fff;
+      border: none;
+    }
+    .clear-markers-confirm-btn:hover { opacity: 0.9; }
+    .annotate-dock {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 5px 8px;
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-pill);
+      box-shadow: 0 6px 28px rgba(22, 45, 61, 0.14), 0 2px 6px rgba(22, 45, 61, 0.06);
     }
 
     /* ── Global top bar aliases (legacy class names) ── */
@@ -249,11 +330,187 @@
       color: var(--harmony-text-secondary);
       white-space: nowrap;
     }
-    .harmony-path-select {
+
+    /* Harmony-style nav button (routes / snapshots picker trigger) */
+    .harmony-nav-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      max-width: min(320px, 42vw);
+      padding: 6px 10px;
+      background: transparent;
+      color: var(--harmony-text);
+      border: 1px solid transparent;
+      border-radius: var(--harmony-radius-sm);
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--harmony-font);
+      cursor: pointer;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .harmony-nav-btn:hover {
+      background: var(--harmony-bg-hover);
+    }
+    .harmony-nav-btn-active,
+    .harmony-nav-btn-active:hover {
+      background: var(--harmony-bg-hover);
+      border-color: var(--harmony-primary);
+      box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+    }
+    .harmony-nav-btn-prefix {
+      color: var(--harmony-text-secondary);
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .harmony-nav-btn-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: var(--harmony-font);
+      font-size: 13px;
+      font-weight: 500;
+    }
+    .harmony-nav-btn-chevron {
+      flex-shrink: 0;
+      color: var(--harmony-text);
+      font-size: 11px;
+      line-height: 1;
+    }
+
+    /* Floating routes panel (Harmony site-overview style) */
+    .harmony-routes-panel-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 220;
+      background: rgba(22, 45, 61, 0.12);
+    }
+    .harmony-routes-panel {
+      position: absolute;
+      top: 56px;
+      left: 16px;
+      width: min(380px, calc(100vw - 32px));
+      max-height: min(72vh, 620px);
+      display: flex;
+      flex-direction: column;
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-lg);
+      box-shadow: var(--harmony-shadow-lg);
+      overflow: hidden;
+    }
+    .harmony-routes-panel-header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--harmony-border);
+      background: var(--harmony-bg-subtle, #f8f9fb);
+    }
+    .harmony-routes-panel-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--harmony-text);
+    }
+    .harmony-routes-panel-close {
+      background: none;
+      border: none;
+      color: var(--harmony-text-muted);
+      font-size: 20px;
+      cursor: pointer;
+      line-height: 1;
+      padding: 0 4px;
+    }
+    .harmony-routes-panel-close:hover { color: var(--harmony-text); }
+    .harmony-routes-panel-search-row {
+      flex-shrink: 0;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--harmony-border);
+    }
+    .harmony-routes-panel-search-input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--harmony-font);
+      color: var(--harmony-text);
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-sm);
+      outline: none;
+    }
+    .harmony-routes-panel-search-input:focus {
+      border-color: var(--harmony-primary);
+      box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+    }
+    .harmony-routes-panel-search-input::placeholder {
+      color: var(--harmony-text-muted);
+    }
+    .harmony-routes-panel-body {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+    .harmony-routes-panel-section-title {
+      margin: 0;
+      padding: 10px 16px 6px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--harmony-text-muted);
+    }
+    .harmony-routes-panel-section-title + .harmony-routes-panel-item,
+    .harmony-routes-panel-item + .harmony-routes-panel-section-title {
+      margin-top: 4px;
+      padding-top: 14px;
+      border-top: 1px solid var(--harmony-border);
+    }
+    .harmony-routes-panel-item {
       display: flex;
       align-items: center;
       gap: 8px;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 9px 16px;
+      border: none;
+      background: transparent;
+      color: var(--harmony-text);
+      font-size: 13px;
+      font-family: var(--harmony-mono);
+      text-align: left;
+      cursor: pointer;
+    }
+    .harmony-routes-panel-item:hover {
+      background: var(--harmony-bg-hover);
+    }
+    .harmony-routes-panel-item--selected {
+      background: var(--harmony-primary-soft);
+      color: var(--harmony-primary);
+      font-weight: 600;
+    }
+    .harmony-routes-panel-check {
+      flex-shrink: 0;
+      width: 16px;
+      font-size: 13px;
+      line-height: 1;
+      text-align: center;
+    }
+    .harmony-routes-panel-item-label {
+      flex: 1;
       min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .harmony-routes-panel-empty {
+      margin: 0;
+      padding: 16px;
+      font-size: 13px;
+      color: var(--harmony-text-secondary);
+      text-align: center;
     }
 
     .aiditor-logo {
@@ -290,8 +547,7 @@
     .aiditor-dropdown option { background: #fff; color: var(--harmony-text); }
     .harmony-page-select { flex: 1; min-width: 160px; }
     .preview-path-select { flex: 1; min-width: 0; max-width: 400px; }
-    .path-select-row { display: flex; align-items: center; gap: 8px; width: 100%; }
-    .params-loading-hint { font-size: 11px; color: var(--harmony-text-muted); white-space: nowrap; flex-shrink: 0; }
+    .freeze-select { min-width: 140px; max-width: 220px; font-family: var(--harmony-font); }
 
     /* Harmony buttons */
     .harmony-btn-primary {
@@ -308,6 +564,7 @@
     }
     .harmony-btn-primary:hover { background: var(--harmony-primary-hover); }
     .harmony-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+    .aiditor-publish-btn { min-width: 88px; border-radius: var(--harmony-radius-sm); }
 
     .harmony-btn-secondary {
       background: var(--harmony-bg-surface);
@@ -328,69 +585,255 @@
     .add-page-from-brief-btn { /* inherits harmony-btn-secondary */ }
     .project-settings-btn { /* inherits harmony-btn-secondary */ }
 
-    .harmony-editor-body,
-    .harmony-sidebar,
-    .harmony-secondary-bar { display: none !important; }
-    .harmony-workspace { display: contents; }
-    .preview-visual-tools { display: flex; flex-shrink: 0; gap: 2px; align-items: center; }
-
-    .visual-tool-btn {
-      background: transparent;
-      color: var(--harmony-text-secondary);
-      border: none;
-      border-radius: var(--harmony-radius-sm);
-      padding: 7px 10px;
-      font-size: 12px;
-      cursor: pointer;
-      line-height: 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 34px;
-      min-height: 34px;
-    }
-    .visual-tool-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
-    .visual-tool-on {
-      background: var(--harmony-primary-soft) !important;
-      color: var(--harmony-primary) !important;
-    }
-    .tool-group-sep {
-      width: 1px;
-      background: var(--harmony-border);
-      align-self: stretch;
-      margin: 0 4px;
-      flex-shrink: 0;
-    }
-
-    /* Canvas aliases */
-    .harmony-canvas-area,
-    .canvas-workspace {
+    .harmony-editor-body {
       flex: 1;
       display: flex;
-      flex-direction: column;
       min-height: 0;
-      padding: 20px 28px 72px;
-      gap: 10px;
       overflow: hidden;
+      position: relative;
     }
-    .harmony-canvas-window,
-    .canvas-window {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
+    .harmony-float-rail {
+      position: absolute;
+      inset: 0;
+      z-index: 30;
+      pointer-events: none;
+    }
+    .harmony-add-btn {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 8px 14px;
       background: var(--harmony-bg-surface);
+      color: var(--harmony-text);
       border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-lg);
-      box-shadow: var(--harmony-shadow-md);
-      overflow: hidden;
+      border-radius: var(--harmony-radius-md);
+      box-shadow: var(--harmony-shadow-add-btn);
+      font-size: 13px;
+      font-weight: 600;
+      font-family: var(--harmony-font);
+      cursor: pointer;
+      white-space: nowrap;
+      line-height: 1.2;
+      pointer-events: auto;
     }
-
-    .harmony-canvas-chrome {
-      flex-shrink: 0;
+    .harmony-add-btn:hover {
+      background: var(--harmony-bg-hover);
+      border-color: var(--harmony-border-strong);
+      box-shadow:
+        0 2px 4px rgba(22, 45, 61, 0.06),
+        0 6px 18px rgba(22, 45, 61, 0.12),
+        0 12px 32px rgba(22, 45, 61, 0.09);
+    }
+    .harmony-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .harmony-add-btn-open {
+      background: var(--harmony-bg-hover);
+      border-color: var(--harmony-border-strong);
+      box-shadow:
+        inset 0 1px 2px rgba(22, 45, 61, 0.06),
+        0 1px 2px rgba(22, 45, 61, 0.04);
+    }
+    .harmony-stage-icon-btn {
+      position: absolute;
+      left: 20px;
+      bottom: 20px;
+      z-index: 25;
       display: flex;
       align-items: center;
-      gap: 12px;
+      justify-content: center;
+      width: auto;
+      height: auto;
+      padding: 4px;
+      background: none;
+      border: none;
+      box-shadow: none;
+      color: var(--harmony-text);
+      font-size: 22px;
+      line-height: 1;
+      cursor: pointer;
+      opacity: 0.72;
+    }
+    .harmony-stage-icon-btn:hover { opacity: 1; color: var(--harmony-text); }
+    .harmony-stage-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+    .harmony-add-flyout-backdrop { display: none; position: fixed; inset: 0; z-index: 34; background: transparent; }
+    .harmony-add-flyout-backdrop.harmony-add-flyout-visible { display: block; }
+    .harmony-add-flyout {
+      display: none;
+      position: absolute;
+      top: 56px;
+      left: 16px;
+      z-index: 35;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      min-width: 0;
+    }
+    .harmony-add-flyout.harmony-add-flyout-visible { display: flex; }
+    .harmony-add-flyout-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 220px;
+      padding: 10px 12px;
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-text);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-md);
+      box-shadow: var(--harmony-shadow-md);
+      cursor: pointer;
+      text-align: left;
+      font-family: var(--harmony-font);
+    }
+    .harmony-add-flyout-item:hover { border-color: var(--harmony-border-strong); box-shadow: var(--harmony-shadow-lg); }
+    .harmony-add-flyout-thumb {
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--harmony-radius-sm);
+      border: 1px solid var(--harmony-border);
+      background-size: 24px 24px;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .harmony-add-flyout-thumb-pages {
+      background-color: #e8f0ff;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' stroke='%23116dff' stroke-width='1.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke='%23116dff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    }
+    .harmony-add-flyout-thumb-elements {
+      background-color: #fff4e8;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3C/svg%3E");
+    }
+    .harmony-add-flyout-label { font-size: 14px; font-weight: 500; color: var(--harmony-text); }
+    .harmony-elements-panel {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 32;
+      width: 280px;
+      display: flex;
+      flex-direction: column;
+      background: var(--harmony-bg-surface);
+      border-right: 1px solid var(--harmony-border);
+      box-shadow: var(--harmony-shadow-md);
+    }
+    .harmony-elements-panel-header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--harmony-border);
+    }
+    .harmony-elements-panel-title { font-size: 14px; font-weight: 600; color: var(--harmony-text); }
+    .harmony-elements-panel-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
+    .harmony-elements-panel-close:hover { color: var(--harmony-text); }
+    .harmony-elements-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+    .harmony-elements-panel-hint { margin: 0; font-size: 12px; color: var(--harmony-text-secondary); line-height: 1.45; }
+    .harmony-secondary-bar { display: none !important; }
+    .harmony-workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    .preview-visual-tools { display: flex; flex-shrink: 0; gap: 2px; align-items: center; }
+
+    .visual-tool-btn {
+      background: transparent;
+      color: var(--harmony-text-secondary);
+      border: none;
+      border-radius: var(--harmony-radius-sm);
+      padding: 7px 10px;
+      font-size: 12px;
+      cursor: pointer;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 34px;
+      min-height: 34px;
+    }
+    .visual-tool-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
+    .visual-tool-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+    .visual-tool-btn:disabled:hover { background: transparent; color: var(--harmony-text-secondary); }
+    .send-to-agent-btn { color: var(--harmony-primary) !important; }
+    .send-to-agent-btn:disabled { color: var(--harmony-text-secondary) !important; }
+    .tool-send-icon { display: block; }
+    .tool-glyph {
+      font-family: var(--harmony-font);
+      font-size: 17px;
+      line-height: 1;
+      display: inline-block;
+      user-select: none;
+    }
+    .tool-rec-label {
+      font-family: var(--harmony-font);
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      line-height: 1;
+      display: inline-block;
+      user-select: none;
+    }
+    .visual-tool-on {
+      background: var(--harmony-primary-soft) !important;
+      color: var(--harmony-primary) !important;
+    }
+    .tool-group-sep {
+      width: 1px;
+      background: var(--harmony-border);
+      align-self: stretch;
+      margin: 0 4px;
+      flex-shrink: 0;
+    }
+
+    /* Canvas aliases */
+    .harmony-canvas-area,
+    .canvas-workspace {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 0;
+      padding: 20px 40px 72px;
+      gap: 10px;
+      overflow-x: visible;
+      overflow-y: hidden;
+    }
+    .canvas-stage-shell {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      max-width: 100%;
+      align-self: center;
+    }
+    .harmony-canvas-window,
+    .canvas-window {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      width: 100%;
+      max-width: 100%;
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-lg);
+      box-shadow: var(--harmony-shadow-md);
+      overflow: hidden;
+    }
+
+    .harmony-canvas-chrome {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
       padding: 10px 16px;
       background: var(--harmony-bg-subtle);
       border-bottom: 1px solid var(--harmony-border);
@@ -441,8 +884,6 @@
     }
     .harmony-canvas-content { flex: 1; }
     .preview-frame { width: 100%; height: 100%; min-height: 360px; border: none; display: block; }
-    .preview-frame-tablet { align-self: center; width: 768px; max-width: 100%; }
-    .preview-frame-mobile { align-self: center; width: 390px; max-width: 100%; }
 
     /* ── Visual annotations ── */
     .visual-overlay { position: absolute; inset: 0; z-index: 2; }
@@ -456,6 +897,18 @@
       background: var(--harmony-primary);
       border: 2px solid #fff;
       box-shadow: var(--harmony-shadow-sm);
+      pointer-events: auto;
+      cursor: pointer;
+      z-index: 3;
+    }
+    .point-marker.marker-edit-mode {
+      cursor: grab;
+    }
+    .point-marker.marker-edit-mode:active {
+      cursor: grabbing;
+    }
+    .point-marker-open {
+      box-shadow: 0 0 0 3px var(--harmony-primary-soft), var(--harmony-shadow-sm);
     }
     .point-marker-idx {
       position: absolute;
@@ -477,7 +930,39 @@
       position: absolute;
       border: 2px dashed var(--harmony-primary);
       background: var(--harmony-primary-soft);
-      pointer-events: none;
+      pointer-events: auto;
+      cursor: pointer;
+      z-index: 2;
+    }
+    .area-rect.marker-edit-mode {
+      cursor: grab;
+    }
+    .area-rect.marker-edit-mode:active {
+      cursor: grabbing;
+    }
+    .area-resize-handle {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      margin: -4px 0 0 -4px;
+      border-radius: 2px;
+      background: #fff;
+      border: 1px solid var(--harmony-primary);
+      box-shadow: var(--harmony-shadow-sm);
+      pointer-events: auto;
+      z-index: 2;
+    }
+    .area-resize-nw { left: 0; top: 0; cursor: nwse-resize; }
+    .area-resize-n { left: 50%; top: 0; cursor: ns-resize; }
+    .area-resize-ne { left: 100%; top: 0; cursor: nesw-resize; }
+    .area-resize-e { left: 100%; top: 50%; cursor: ew-resize; }
+    .area-resize-se { left: 100%; top: 100%; cursor: nwse-resize; }
+    .area-resize-s { left: 50%; top: 100%; cursor: ns-resize; }
+    .area-resize-sw { left: 0; top: 100%; cursor: nesw-resize; }
+    .area-resize-w { left: 0; top: 50%; cursor: ew-resize; }
+    .area-rect-open {
+      border-style: solid;
+      box-shadow: 0 0 0 2px var(--harmony-primary-soft);
     }
     .area-marker-idx {
       position: absolute;
@@ -497,37 +982,6 @@
       z-index: 1;
     }
     .area-rect-draft { border-style: solid; border-color: var(--harmony-primary); background: var(--harmony-primary-soft); }
-    .arrow-pending-dot {
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      margin: -5px 0 0 -5px;
-      border-radius: 50%;
-      background: var(--harmony-primary);
-      border: 2px solid #fff;
-      box-shadow: var(--harmony-shadow-sm);
-      pointer-events: none;
-    }
-    .arrow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-    .arrow-svg line { stroke: var(--harmony-primary); stroke-width: 2; marker-end: url(#aiditor-arrowhead); }
-    .arrow-end-pin {
-      position: absolute;
-      width: 22px;
-      height: 22px;
-      margin: -11px 0 0 -11px;
-      border-radius: 50%;
-      background: var(--harmony-primary);
-      color: #fff;
-      border: 2px solid #fff;
-      box-shadow: var(--harmony-shadow-sm);
-      font-size: 11px;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: none;
-      z-index: 3;
-    }
     .visual-popovers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
     .visual-popover {
       position: absolute;
@@ -537,7 +991,7 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
-      padding: 12px 14px;
+      padding: 12px 14px 44px;
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-md);
@@ -549,6 +1003,10 @@
       overflow-x: hidden;
       min-height: 0;
     }
+    .visual-popover-hidden {
+      display: none !important;
+      pointer-events: none;
+    }
     .visual-popover-flip-x { transform: translate(calc(-100% - 14px), 10px); }
     .visual-popover-flip-y { transform: translate(10px, calc(-100% - 14px)); }
     .visual-popover-flip-x.visual-popover-flip-y { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); }
@@ -565,18 +1023,19 @@
       cursor: pointer;
     }
     .visual-annotation-remove:hover { color: var(--harmony-danger); border-color: var(--harmony-danger); }
-    .visual-annotation-run {
-      background: var(--harmony-primary);
-      color: #fff;
-      border: none;
+    .visual-annotation-minimize {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      color: var(--harmony-text-muted);
+      border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-sm);
-      padding: 4px 10px;
-      font-size: 11px;
-      font-weight: 600;
+      padding: 4px 6px;
       cursor: pointer;
+      line-height: 0;
     }
-    .visual-annotation-run:hover { background: var(--harmony-primary-hover); }
-    .visual-annotation-run:disabled { opacity: 0.45; cursor: not-allowed; }
+    .visual-annotation-minimize:hover { color: var(--harmony-primary); border-color: var(--harmony-primary); }
     .visual-annotation-instruction {
       width: 100%;
       min-height: 48px;
@@ -592,6 +1051,34 @@
     }
     .visual-annotation-instruction:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
     .visual-annotation-files { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
+    .visual-annotation-quick-send {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-sm);
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-primary);
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(22, 45, 61, 0.1);
+      z-index: 3;
+      line-height: 0;
+    }
+    .visual-annotation-quick-send:hover:not(:disabled) {
+      background: var(--harmony-primary-soft);
+      border-color: var(--harmony-primary);
+    }
+    .visual-annotation-quick-send:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      color: var(--harmony-text-secondary);
+    }
     .visual-attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
     .visual-attach-btn {
       background: var(--harmony-bg-subtle);
@@ -625,7 +1112,7 @@
     .visual-submit-error { font-size: 12px; color: var(--harmony-danger); margin: 0; padding: 0 2px; }
     .visual-submit-progress { font-size: 12px; color: var(--harmony-primary); margin: 0; padding: 0 2px; }
 
-    .video-record-btn { border-color: var(--harmony-primary) !important; color: var(--harmony-primary) !important; }
+    .video-record-btn { color: var(--harmony-primary) !important; }
     .video-record-active { animation: pulse-rec 1.2s ease-in-out infinite; }
     @keyframes pulse-rec { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
 
@@ -641,9 +1128,24 @@
       height: 200px;
       box-shadow: 0 -2px 12px rgba(22, 45, 61, 0.06);
     }
-    .bottom-panel-collapsed { max-height: 32px; overflow: hidden; }
+    .bottom-panel-collapsed {
+      height: auto !important;
+      max-height: none;
+      overflow: visible;
+    }
+    .bottom-panel-collapsed .bottom-panel-resize,
+    .bottom-panel-collapsed .bottom-panel-body {
+      display: none;
+    }
     .bottom-panel-resize { height: 4px; cursor: ns-resize; background: transparent; flex-shrink: 0; }
     .bottom-panel-resize:hover, .bottom-panel-resize:active { background: var(--harmony-primary); }
+    .bottom-panel-body {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
     .bottom-panel-header {
       display: flex;
       align-items: center;
@@ -676,6 +1178,40 @@
     .bottom-panel-spacer { flex: 1; }
     .bottom-panel-clear { background: none; border: none; color: var(--harmony-text-muted); font-size: 11px; cursor: pointer; padding: 2px 6px; }
     .bottom-panel-clear:hover { color: var(--harmony-text); }
+    .bottom-panel-stop {
+      background: var(--harmony-danger-soft, rgba(220, 38, 38, 0.12));
+      border: 1px solid var(--harmony-danger, #dc2626);
+      color: var(--harmony-danger, #dc2626);
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+      padding: 2px 8px;
+      border-radius: 4px;
+      margin-right: 6px;
+    }
+    .bottom-panel-stop:hover { background: var(--harmony-danger, #dc2626); color: #fff; }
+    .bottom-panel-stop-hidden {
+      visibility: hidden;
+      pointer-events: none;
+    }
+    .bottom-panel-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      flex-shrink: 0;
+    }
+    .agent-stop-confirm-anchor {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    .agent-stop-confirm-float {
+      position: absolute;
+      right: 0;
+      bottom: calc(100% + 8px);
+      z-index: 30;
+      pointer-events: auto;
+    }
     .output-panel {
       overflow-y: auto;
       padding: 8px 16px;
@@ -690,12 +1226,28 @@
     }
     .chunk { color: var(--harmony-text); }
     .chunk-status { color: var(--harmony-text-muted); font-style: italic; }
+    .chunk-stopped-user {
+      color: var(--harmony-warning, #b45309);
+      font-weight: 700;
+      margin-top: 14px;
+      padding-top: 10px;
+      border-top: 1px dashed var(--harmony-border);
+    }
     .chunk-tool { color: var(--harmony-primary); }
     .chunk-error { color: var(--harmony-danger); }
     .chunk-thinking { color: var(--harmony-text-muted); font-style: italic; }
     .chunk-result { color: var(--harmony-success); }
     .chunk-user { color: var(--harmony-text); }
     .chunk-user-prefix { color: var(--harmony-text-muted); }
+    .chunk-divider {
+      color: var(--harmony-text-muted);
+      font-size: 11px;
+      font-style: italic;
+      text-align: center;
+      border-top: 1px solid var(--harmony-border);
+      margin: 12px 0 8px;
+      padding-top: 10px;
+    }
     .agent-chat-row {
       display: flex;
       gap: 8px;
@@ -909,54 +1461,410 @@
       overflow: hidden;
       border: 1px solid var(--harmony-border);
     }
-    .snapshot-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
-    .snapshot-img-overlay { position: absolute; inset: 0; z-index: 2; }
-    .snapshot-img-overlay-none { pointer-events: none; }
-    .snapshot-annotations-panel { flex: 1; min-width: 220px; max-width: 340px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
-    .snapshot-annotation-card {
-      background: var(--harmony-bg-subtle);
-      border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-md);
-      padding: 10px 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
+    .snapshot-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
+    .snapshot-img-overlay { position: absolute; inset: 0; z-index: 2; }
+    .snapshot-img-overlay-none { pointer-events: none; }
+    .snapshot-annotations-panel { flex: 1; min-width: 220px; max-width: 340px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
+    .snapshot-annotation-card {
+      position: relative;
+      background: var(--harmony-bg-subtle);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-md);
+      padding: 10px 12px 44px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .snapshot-annotation-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+    .snapshot-annotation-kind { font-size: 11px; color: var(--harmony-primary); font-weight: 600; }
+    .snapshot-annotation-remove {
+      background: transparent;
+      color: var(--harmony-text-muted);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-sm);
+      padding: 4px 8px;
+      font-size: 11px;
+      cursor: pointer;
+    }
+    .snapshot-annotation-remove:hover { color: var(--harmony-danger); border-color: var(--harmony-danger); }
+    .snapshot-empty-hint { color: var(--harmony-text-muted); font-size: 12px; font-style: italic; padding: 8px 0; }
+    .snapshot-discard-confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--harmony-danger); }
+    .snapshot-discard-confirm-msg { flex: 1; }
+
+    /* ── Add Page modal (Harmony-style centered dialog) ── */
+    .add-page-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 300;
+      background: rgba(255, 255, 255, 0.72);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 48px;
+      box-sizing: border-box;
+    }
+    .project-settings-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 350;
+      background: rgba(22, 45, 61, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    .add-menu-picker-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 360;
+      background: rgba(22, 45, 61, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    .add-menu-picker-dialog {
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-lg);
+      width: min(480px, 100%);
+      max-height: min(80vh, 640px);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      box-shadow: var(--harmony-shadow-lg);
+    }
+    .add-menu-picker-dialog--browse {
+      width: min(720px, 100%);
+      max-height: min(85vh, 720px);
+    }
+    .add-menu-picker-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--harmony-border);
+      background: var(--harmony-bg-subtle);
+    }
+    .add-menu-picker-title {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--harmony-text);
+    }
+    .add-menu-picker-back,
+    .add-menu-picker-close {
+      background: none;
+      border: none;
+      color: var(--harmony-text-muted);
+      font-size: 13px;
+      cursor: pointer;
+      line-height: 1;
+      padding: 4px 6px;
+    }
+    .add-menu-picker-close { font-size: 20px; }
+    .add-menu-picker-back:hover,
+    .add-menu-picker-close:hover { color: var(--harmony-text); }
+    .add-menu-picker-body {
+      padding: 12px 16px 16px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex: 1;
+      min-height: 0;
+    }
+    .add-menu-picker-hint {
+      font-size: 12px;
+      color: var(--harmony-text-muted);
+      margin: 0;
+    }
+    .add-menu-picker-plugin-btn,
+    .add-menu-picker-component-card {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 2px;
+      width: 100%;
+      text-align: left;
+      padding: 10px 12px;
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-md);
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-text);
+      font-family: var(--harmony-font);
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .add-menu-picker-plugin-btn:hover,
+    .add-menu-picker-component-card:hover {
+      background: var(--harmony-bg-hover);
+      border-color: var(--harmony-border-strong);
+    }
+    .add-menu-picker-plugin-meta,
+    .add-menu-picker-component-sub {
+      font-size: 11px;
+      color: var(--harmony-text-muted);
+    }
+    .add-menu-picker-browse {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .add-menu-picker-plugin-tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .add-menu-picker-plugin-tab {
+      padding: 6px 12px;
+      border: 1px solid var(--harmony-border);
+      border-radius: 999px;
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-text-muted);
+      font-family: var(--harmony-font);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .add-menu-picker-plugin-tab:hover {
+      background: var(--harmony-bg-hover);
+      color: var(--harmony-text);
+    }
+    .add-menu-picker-plugin-tab--selected {
+      background: var(--harmony-bg-subtle);
+      color: var(--harmony-text);
+      font-weight: 600;
+      border-color: var(--harmony-border-strong);
+    }
+    .add-menu-picker-browse-layout {
+      display: flex;
+      gap: 0;
+      flex: 1;
+      min-height: 0;
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-md);
+      overflow: hidden;
+    }
+    .add-menu-picker-sidebar {
+      display: flex;
+      flex-direction: column;
+      width: 168px;
+      flex-shrink: 0;
+      border-right: 1px solid var(--harmony-border);
+      background: var(--harmony-bg-subtle);
+      overflow-y: auto;
+      padding: 8px 6px;
+      gap: 2px;
+    }
+    .add-menu-picker-category-btn {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      width: 100%;
+      text-align: left;
+      padding: 8px 10px;
+      border: none;
+      border-radius: var(--harmony-radius-md);
+      background: transparent;
+      color: var(--harmony-text);
+      font-family: var(--harmony-font);
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .add-menu-picker-category-btn:hover {
+      background: var(--harmony-bg-hover);
+    }
+    .add-menu-picker-category-btn--selected {
+      background: var(--harmony-bg-surface);
+      font-weight: 600;
+      box-shadow: inset 0 0 0 1px var(--harmony-border);
+    }
+    .add-menu-picker-category-count {
+      font-size: 11px;
+      color: var(--harmony-text-muted);
+    }
+    .add-menu-picker-main {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      padding: 14px 16px 16px;
+      overflow: hidden;
+    }
+    .add-menu-picker-main-title {
+      margin: 0 0 12px;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--harmony-text);
+    }
+    .add-menu-picker-subcategories {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 8px;
+      overflow-x: auto;
+      flex: 1;
+      min-width: 0;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    .add-menu-picker-subcategories::-webkit-scrollbar { display: none; }
+    .add-menu-picker-subcategory-scroll {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 14px;
+      min-width: 0;
+    }
+    .add-menu-picker-subcategory-scroll-btn {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-sm);
+      background: var(--harmony-bg-surface);
+      color: var(--harmony-text-muted);
+      font-size: 16px;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0;
+    }
+    .add-menu-picker-subcategory-scroll-btn:hover {
+      color: var(--harmony-text);
+      background: var(--harmony-bg-hover);
+    }
+    .add-menu-picker-subcategory-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      padding: 6px 12px;
+      border: none;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--harmony-text-muted);
+      font-family: var(--harmony-font);
+      font-size: 13px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .add-menu-picker-subcategory-btn:hover {
+      color: var(--harmony-text);
+      background: var(--harmony-bg-hover);
+    }
+    .add-menu-picker-subcategory-btn--selected {
+      background: var(--harmony-bg-subtle);
+      color: var(--harmony-text);
+      font-weight: 600;
+      box-shadow: inset 0 0 0 1px var(--harmony-border);
+    }
+    .add-menu-picker-subcategory-count {
+      font-size: 12px;
+      color: var(--harmony-text-muted);
+      font-weight: 400;
+    }
+    .add-menu-picker-search-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 10px;
+      min-width: 0;
+    }
+    .add-menu-picker-search-field {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--harmony-border);
+      border-radius: 999px;
+      background: var(--harmony-bg-surface);
+    }
+    .add-menu-picker-search-icon {
+      color: var(--harmony-text-muted);
+      font-size: 14px;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+    .add-menu-picker-search-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      color: var(--harmony-text);
+      font-family: var(--harmony-font);
+      font-size: 13px;
+      outline: none;
+    }
+    .add-menu-picker-search-input::placeholder {
+      color: var(--harmony-text-muted);
+    }
+    .add-menu-picker-search-clear {
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      color: var(--harmony-text-muted);
+      font-size: 16px;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0 2px;
+    }
+    .add-menu-picker-search-clear:hover { color: var(--harmony-text); }
+    .add-menu-picker-search-summary {
+      margin: 0 0 12px;
+      font-size: 13px;
+      color: var(--harmony-text-muted);
+    }
+    .add-menu-picker-browse-layout--search {
+      border: none;
+    }
+    .add-menu-picker-browse-layout--search .add-menu-picker-main {
+      padding-top: 0;
+    }
+    .add-menu-picker-browse-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 10px;
+      overflow-y: auto;
+      flex: 1;
+      min-height: 0;
+      align-content: start;
+    }
+    .add-menu-picker-browse-row {
+      display: contents;
     }
-    .snapshot-annotation-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-    .snapshot-annotation-kind { font-size: 11px; color: var(--harmony-primary); font-weight: 600; }
-    .snapshot-annotation-remove {
-      background: transparent;
+    .add-menu-picker-section-title {
+      margin: 8px 0 4px;
+      font-size: 13px;
+      font-weight: 600;
       color: var(--harmony-text-muted);
-      border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-sm);
-      padding: 4px 8px;
-      font-size: 11px;
-      cursor: pointer;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      grid-column: 1 / -1;
     }
-    .snapshot-annotation-remove:hover { color: var(--harmony-danger); border-color: var(--harmony-danger); }
-    .snapshot-empty-hint { color: var(--harmony-text-muted); font-size: 12px; font-style: italic; padding: 8px 0; }
-    .snapshot-discard-confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--harmony-danger); }
-    .snapshot-discard-confirm-msg { flex: 1; }
-
-    /* ── Add Page slideover ── */
-    .add-page-overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 300;
-      background: rgba(22, 45, 61, 0.35);
-      display: flex;
-      justify-content: flex-end;
+    .add-menu-picker-browse-content .add-menu-picker-component-card {
+      width: auto;
     }
-    .project-settings-overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 350;
-      background: rgba(22, 45, 61, 0.4);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      box-sizing: border-box;
+    .add-menu-picker-component-card {
+      min-height: 72px;
+    }
+    .add-menu-picker-component-card--browse-only {
+      opacity: 0.6;
+      cursor: default;
+    }
+    .add-menu-picker-component-title {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
     }
     .project-settings-dialog {
       background: var(--harmony-bg-surface);
@@ -981,28 +1889,33 @@
     .project-settings-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
     .project-settings-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
     .add-page-slideover {
-      width: min(480px, 100vw);
-      height: 100%;
+      width: min(920px, 100%);
+      max-height: min(88vh, 860px);
+      height: auto;
       background: var(--harmony-bg-surface);
-      border-left: 1px solid var(--harmony-border);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-lg);
       display: flex;
       flex-direction: column;
-      box-shadow: var(--harmony-shadow-lg);
+      box-shadow:
+        0 24px 80px rgba(22, 45, 61, 0.16),
+        0 8px 24px rgba(22, 45, 61, 0.08);
       position: relative;
+      overflow: hidden;
     }
     .add-page-header {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 14px 16px;
+      gap: 12px;
+      padding: 20px 28px;
       border-bottom: 1px solid var(--harmony-border);
       flex-shrink: 0;
-      background: var(--harmony-bg-subtle);
+      background: var(--harmony-bg-surface);
     }
-    .add-page-title { font-size: 14px; font-weight: 600; color: var(--harmony-text); flex: 1; }
-    .add-page-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
-    .add-page-close:hover { color: var(--harmony-text); }
-    .add-page-body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
+    .add-page-title { font-size: 20px; font-weight: 700; color: var(--harmony-text); flex: 1; letter-spacing: -0.02em; }
+    .add-page-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; border-radius: var(--harmony-radius-sm); }
+    .add-page-close:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
+    .add-page-body { flex: 1; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
     .add-page-section-label { font-size: 11px; font-weight: 600; color: var(--harmony-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
     .add-page-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
     .add-page-section-header-row .add-page-section-label { margin-bottom: 0; flex: 1; }
@@ -1037,11 +1950,13 @@
       position: absolute;
       inset: 0;
       z-index: 10;
-      background: rgba(22, 45, 61, 0.4);
+      background: rgba(255, 255, 255, 0.6);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 16px;
+      padding: 24px;
       box-sizing: border-box;
     }
     .add-page-brief-fill-panel {
@@ -1190,6 +2105,10 @@
     .add-menu-panel .add-page-plugins-zone-title { flex-shrink: 0; }
     .add-menu-panel .add-menu-panel-attached { flex: 0 1 auto; min-height: 0; max-height: 120px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
     .add-menu-panel .add-page-plugin-chips { margin-top: 0; }
+    .annotation-add-menu-panel .add-page-plugin-chips,
+    .add-menu-panel .add-page-plugin-chips { align-items: stretch; }
+    .annotation-add-menu-panel .add-page-plugin-chip,
+    .add-menu-panel .add-page-plugin-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
     .add-menu-panel .add-page-btn,
     .add-menu-panel .add-page-manage-link,
     .add-menu-panel .add-page-hint,
@@ -1231,9 +2150,26 @@
       padding: 2px 6px;
       font-size: 10px;
       color: var(--harmony-text-secondary);
-      display: flex;
+      display: inline-flex;
       align-items: center;
       gap: 4px;
+      max-width: 100%;
+      min-width: 0;
+    }
+    .add-page-plugin-chip-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .add-page-plugin-chip-sub {
+      color: var(--harmony-text-muted);
+      margin-left: 4px;
+    }
+    .add-page-plugin-chip-remove,
+    .add-page-plugin-chip-at {
+      flex-shrink: 0;
     }
     .add-page-plugin-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; padding: 0 2px; }
     .add-page-plugins-warn { font-size: 11px; color: var(--harmony-warning); margin-top: 4px; }
@@ -1330,8 +2266,17 @@
       cursor: pointer;
       align-self: flex-start;
     }
-    .add-page-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--harmony-border); flex-shrink: 0; background: var(--harmony-bg-subtle); }
-    .add-page-btn { flex: 1; padding: 10px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
+    .add-page-footer {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      padding: 16px 28px 20px;
+      border-top: 1px solid var(--harmony-border);
+      flex-shrink: 0;
+      background: var(--harmony-bg-surface);
+    }
+    .add-page-footer .add-page-btn { flex: 0 0 auto; min-width: 120px; }
+    .add-page-btn { padding: 10px 20px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
     .add-page-btn-cancel { background: var(--harmony-bg-surface); color: var(--harmony-text-secondary); }
     .add-page-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
     .add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
@@ -1354,7 +2299,6 @@
     }
     .reset-btn:hover { color: var(--harmony-text); border-color: var(--harmony-border-strong); }
     .route-picker-stack { display: contents; }
-    .arrow-svg defs polygon { fill: #116dff; }
   </style>
   <script type="application/jay-data">
 data:
@@ -1368,11 +2312,13 @@ data:
     hasImage: boolean
     isRunning: boolean
     chunks:
-    - text: string
+    - id: string
+      text: string
       cssClass: string
       filePath: string
       toolName: string
       showUserPrefix: boolean
+      isDivider: boolean
     agentChatMessage: string
     showAgentChatInput: boolean
     agentChatInputDisabled: boolean
@@ -1383,16 +2329,85 @@ data:
     pageSelectOptions:
     - url: string
       label: string
-    selectedRouteSelectValue: string
     hasPages: boolean
+    showPagesPanel: boolean
+    pageNavBtnClass: string
+    pageNavBtnLabel: string
+    pagesPanelSearchQuery: string
+    filteredPageRouteRows:
+    - url: string
+      label: string
+      isSelected: boolean
+      checkGlyph: string
+      cssClass: string
+    filteredUrlInstanceRows:
+    - path: string
+      isSelected: boolean
+      checkGlyph: string
+      cssClass: string
+    showRoutesPanelUrlInstances: boolean
+    showPagesPanelEmptySearch: boolean
+    showSnapshotNav: boolean
+    showSnapshotPanel: boolean
+    snapshotNavBtnClass: string
+    snapshotNavBtnLabel: string
+    snapshotPanelSearchQuery: string
+    filteredSnapshotRows:
+    - value: string
+      label: string
+      isSelected: boolean
+      checkGlyph: string
+      cssClass: string
+    showSnapshotPanelEmptySearch: boolean
+    showAddMenuPickerModal: boolean
+    showAddMenuPickerLoading: boolean
+    showAddMenuPickerEmpty: boolean
+    showAddMenuPickerBrowse: boolean
+    showAddMenuPickerBrowseLayout: boolean
+    showAddMenuPickerSearchMode: boolean
+    showAddMenuPickerSearchBack: boolean
+    showAddMenuPickerSearchClear: boolean
+    showAddMenuPickerBrowseTitle: boolean
+    showAddMenuPickerSearchSummary: boolean
+    showAddMenuPickerSubCategoryFilters: boolean
+    showAddMenuPickerSubCategoryScrollPrev: boolean
+    showAddMenuPickerSubCategoryScrollNext: boolean
+    showAddMenuPickerComponents: boolean
+    showAddMenuPickerNoComponents: boolean
+    showAddMenuPickerNoSearchResults: boolean
+    addMenuPickerDialogClass: string
+    addMenuPickerHeaderTitle: string
+    addMenuPickerBrowseCategoryTitle: string
+    addMenuPickerSearchSummary: string
+    addMenuPickerSearchQuery: string
+    addMenuPickerBrowseLayoutClass: string
+    addMenuPickerLeftNavRows:
+    - rowKey: string
+      navKey: string
+      label: string
+      itemCount: number
+      isSelected: boolean
+      cssClass: string
+    addMenuPickerSubCategoryFilterRows:
+    - rowKey: string
+      navKey: string
+      label: string
+      itemCount: number
+      showCount: boolean
+      isSelected: boolean
+      cssClass: string
+    addMenuPickerBrowseRows:
+    - rowKey: string
+      isSectionHeader: boolean
+      label: string
+      itemId: string
+      isPickable: boolean
+      showPickable: boolean
+      showBrowseOnly: boolean
     isPreviewMode: boolean
     previewUrlBar: string
     previewLoading: boolean
-    paramsLoadingHint: string
     previewError: string
-    showPathSelect: boolean
-    previewPathOptions:
-    - path: string
     selectedPreviewPath: string
     showPreviewIframe: boolean
     previewSrc: string
@@ -1402,6 +2417,8 @@ data:
     bottomPanelClass: string
     bottomPanelToggleGlyph: string
     showBottomPanelRunning: boolean
+    showAgentStopConfirm: boolean
+    agentStopBtnClass: string
     showFilePreview: boolean
     filePreviewPath: string
     filePreviewContent: string
@@ -1409,15 +2426,21 @@ data:
     filePreviewImageSrc: string
     filePreviewLoading: boolean
     showVisualToolbar: boolean
+    showClearMarkersConfirm: boolean
+    clearMarkersConfirmText: string
     visualToolNoneOn: boolean
     visualToolPointOn: boolean
     visualToolAreaOn: boolean
-    visualToolArrowOn: boolean
+    visualMarkerToolsDisabled: boolean
+    visualPointMarkerTooltip: string
+    visualAreaMarkerTooltip: string
     visualPointDisplayItems:
     - id: string
       leftPct: number
       topPct: number
       indexLabel: string
+      markerOpen: boolean
+      markerEditMode: boolean
     showVisualPointMarkers: boolean
     visualAreaDisplayItems:
     - id: string
@@ -1426,32 +2449,20 @@ data:
       widthPct: number
       heightPct: number
       indexLabel: string
+      markerOpen: boolean
+      markerEditMode: boolean
     showVisualAreaItems: boolean
     areaDraftLeftPct: number
     areaDraftTopPct: number
     areaDraftWidthPct: number
     areaDraftHeightPct: number
     showAreaDraftRect: boolean
-    visualArrowDisplayItems:
-    - id: string
-      x1Pct: number
-      y1Pct: number
-      x2Pct: number
-      y2Pct: number
-    visualArrowPinItems:
-    - id: string
-      leftPct: number
-      topPct: number
-      indexLabel: string
-    hasVisualArrowLines: boolean
-    showArrowPending: boolean
-    arrowPendingLeftPct: number
-    arrowPendingTopPct: number
     visualAnnotationRows:
     - id: string
       kindLabel: string
       instruction: string
-      runDisabled: boolean
+      showPopover: boolean
+      quickSendDisabled: boolean
       leftPct: number
       topPct: number
       popoverFlipX: boolean
@@ -1470,15 +2481,6 @@ data:
         itemId: string
         title: string
         subtitle: string
-      addMenuSelectedCategory: string
-      showAddMenuItemPicker: boolean
-      markerPickerNavRows:
-      - rowKey: string
-        label: string
-        value: string
-        kind: enum (category | subCategory | item)
-      showMarkerPickerLoading: boolean
-      showMarkerPickerCatalogEmpty: boolean
       crAddMenuParamCollisionWarning: string
       crAddMenuRouteParamHint: string
       showCrAddMenuRouteParams: boolean
@@ -1514,9 +2516,11 @@ data:
     visualOverlayPointerNone: boolean
     showVideoRecordUi: boolean
     isVideoRecording: boolean
-    videoRecordLabel: string
+    videoRecordTooltip: string
     videoRecordDisabled: boolean
     freezeDisabled: boolean
+    sendToAgentDisabled: boolean
+    sendToAgentTooltip: string
     showVideoReviewModal: boolean
     videoReviewPreparing: boolean
     videoReviewReady: boolean
@@ -1526,7 +2530,6 @@ data:
     videoModalToolNoneOn: boolean
     videoModalToolPointOn: boolean
     videoModalToolAreaOn: boolean
-    videoModalToolArrowOn: boolean
     videoPointDisplayItems:
     - id: string
       leftPct: number
@@ -1546,26 +2549,12 @@ data:
     videoAreaDraftWidthPct: number
     videoAreaDraftHeightPct: number
     showVideoAreaDraftRect: boolean
-    videoArrowDisplayItems:
-    - id: string
-      x1Pct: number
-      y1Pct: number
-      x2Pct: number
-      y2Pct: number
-    videoArrowPinItems:
-    - id: string
-      leftPct: number
-      topPct: number
-      indexLabel: string
-    hasVideoArrowLines: boolean
-    showVideoArrowPending: boolean
-    videoArrowPendingLeftPct: number
-    videoArrowPendingTopPct: number
     videoAnnotationRows:
     - id: string
       kindLabel: string
       instruction: string
       runDisabled: boolean
+      quickSendDisabled: boolean
       leftPct: number
       topPct: number
       popoverFlipX: boolean
@@ -1584,15 +2573,6 @@ data:
         itemId: string
         title: string
         subtitle: string
-      addMenuSelectedCategory: string
-      showAddMenuItemPicker: boolean
-      markerPickerNavRows:
-      - rowKey: string
-        label: string
-        value: string
-        kind: enum (category | subCategory | item)
-      showMarkerPickerLoading: boolean
-      showMarkerPickerCatalogEmpty: boolean
       crAddMenuParamCollisionWarning: string
       crAddMenuRouteParamHint: string
       showCrAddMenuRouteParams: boolean
@@ -1621,12 +2601,12 @@ data:
     breakpointDesktopOn: boolean
     breakpointTabletOn: boolean
     breakpointMobileOn: boolean
+    stageWidthPx: number
     showSnapshotModal: boolean
     snapshotImageSrc: string
     snapshotToolNoneOn: boolean
     snapshotToolPointOn: boolean
     snapshotToolAreaOn: boolean
-    snapshotToolArrowOn: boolean
     snapshotCanSubmit: boolean
     snapshotShowDiscardConfirm: boolean
     snapshotOverlayPointerNone: boolean
@@ -1635,6 +2615,7 @@ data:
       leftPct: number
       topPct: number
       indexLabel: string
+      markerEditMode: boolean
     showSnapshotPointMarkers: boolean
     snapshotAreaDisplayItems:
     - id: string
@@ -1643,32 +2624,19 @@ data:
       widthPct: number
       heightPct: number
       indexLabel: string
+      markerEditMode: boolean
     showSnapshotAreaItems: boolean
     snapshotAreaDraftLeftPct: number
     snapshotAreaDraftTopPct: number
     snapshotAreaDraftWidthPct: number
     snapshotAreaDraftHeightPct: number
     showSnapshotAreaDraft: boolean
-    snapshotArrowDisplayItems:
-    - id: string
-      x1Pct: number
-      y1Pct: number
-      x2Pct: number
-      y2Pct: number
-    snapshotArrowPinItems:
-    - id: string
-      leftPct: number
-      topPct: number
-      indexLabel: string
-    hasSnapshotArrowLines: boolean
-    showSnapshotArrowPending: boolean
-    snapshotArrowPendingLeftPct: number
-    snapshotArrowPendingTopPct: number
     snapshotAnnotationItems:
     - id: string
       indexLabel: string
       kindLabel: string
       instruction: string
+      quickSendDisabled: boolean
       kind: string
       leftPct: number
       topPct: number
@@ -1688,15 +2656,6 @@ data:
         itemId: string
         title: string
         subtitle: string
-      addMenuSelectedCategory: string
-      showAddMenuItemPicker: boolean
-      markerPickerNavRows:
-      - rowKey: string
-        label: string
-        value: string
-        kind: enum (category | subCategory | item)
-      showMarkerPickerLoading: boolean
-      showMarkerPickerCatalogEmpty: boolean
       crAddMenuParamCollisionWarning: string
       crAddMenuRouteParamHint: string
       showCrAddMenuRouteParams: boolean
@@ -1780,25 +2739,14 @@ data:
       subtitle: string
       annotationId?: string
     showAddMenuEmptyHint: boolean
-    showAddMenuPopover: boolean
-    addMenuNavRows:
-    - rowKey: string
-      label: string
-      value: string
-      kind: enum (category | subCategory | item)
-    addMenuSelectedCategory: string
-    showMarkerAddMenuPopover: boolean
-    markerAddMenuPopoverLeftPct: number
-    markerAddMenuPopoverTopPct: number
-    markerAddMenuPickerAnnotationId: string
-    markerAddMenuNavRows:
+    addMenuParamCollisionWarning: string
+    addMenuRouteParamHint: string
+    showAddMenuRouteParams: boolean
+    addMenuRouteParamRows:
     - rowKey: string
-      label: string
-      value: string
-      kind: enum (category | subCategory | item)
-    markerAddMenuSelectedCategory: string
-    showMarkerAddMenuPickerLoading: boolean
-    showMarkerAddMenuPickerCatalogEmpty: boolean
+      name: string
+    showAddMenuRouteParamConfirm: boolean
+    addMenuPendingRouteParamTitle: string
     crAddMenuParamCollisionWarning: string
     crAddMenuRouteParamHint: string
     showCrAddMenuRouteParams: boolean
@@ -1809,20 +2757,17 @@ data:
     crPendingRouteParamTitle: string
     showCrPlannedRoutePanel: boolean
     crPlannedRoute: string
-    addMenuParamCollisionWarning: string
-    addMenuRouteParamHint: string
-    showAddMenuRouteParams: boolean
-    addMenuRouteParamRows:
-    - rowKey: string
-      name: string
-    showAddMenuRouteParamConfirm: boolean
-    addMenuPendingRouteParamTitle: string
     showAddPageResultBanner: boolean
     addPageResultBannerClass: string
     addPageResultBannerMessage: string
     showAddPageRetry: boolean
     showAddPageFixWithAiditor: boolean
     showAddPageFromBriefBtn: boolean
+    hasPublishScript: boolean
+    publishDisabled: boolean
+    publishTooltip: string
+    publishBtnLabel: string
+    isPublishing: boolean
     showBriefFillPopover: boolean
     briefFillContextNotes: string
     briefFillPopoverError: string
@@ -1860,36 +2805,151 @@ data:
     <div class="editor-topbar-left harmony-global-left">
       <span class="aiditor-logo"><span class="aiditor-logo-ai">AI</span>ditor</span>
       <div class="harmony-page-select-wrap">
-        <span class="harmony-page-label">Page</span>
-        <select
-          class="aiditor-dropdown harmony-page-select"
-          ref="pageRouteSelect"
-          value="{selectedRouteSelectValue}"
-          aria-label="Page route"
+        <span class="harmony-page-label">Routes</span>
+        <button
+          type="button"
+          class="{pageNavBtnClass}"
+          ref="pageNavBtn"
+          aria-label="Select route"
+          aria-expanded="{showPagesPanel}"
+          aria-haspopup="dialog"
         >
-          <option value="" disabled>Select a route…</option>
-          <option forEach="pageSelectOptions" trackBy="url" value="{url}">{label}</option>
-        </select>
+          <span class="harmony-nav-btn-label">{pageNavBtnLabel}</span>
+          <span class="harmony-nav-btn-chevron" aria-hidden="true">▾</span>
+        </button>
       </div>
-      <div class="path-select-row harmony-path-select" if="showPathSelect">
-        <select
-          class="aiditor-dropdown preview-path-select"
-          ref="previewPathSelect"
-          value="{selectedPreviewPath}"
-          aria-label="URL instance"
+      <div class="harmony-page-select-wrap" if="showSnapshotNav">
+        <span class="harmony-page-label">Snapshots</span>
+        <button
+          type="button"
+          class="{snapshotNavBtnClass}"
+          ref="snapshotNavBtn"
+          aria-label="Select snapshot"
+          aria-expanded="{showSnapshotPanel}"
+          aria-haspopup="dialog"
         >
-          <option forEach="previewPathOptions" trackBy="path" value="{path}">{path}</option>
-        </select>
-        <span class="params-loading-hint" if="paramsLoadingHint">{paramsLoadingHint}</span>
+          <span class="harmony-nav-btn-label">{snapshotNavBtnLabel}</span>
+          <span class="harmony-nav-btn-chevron" aria-hidden="true">▾</span>
+        </button>
       </div>
     </div>
     <div class="editor-topbar-right harmony-global-right">
-      <button type="button" class="harmony-btn-secondary project-settings-btn" ref="projectSettingsBtn" disabled="isRunning">Settings</button>
-      <button type="button" class="harmony-btn-primary add-page-open-btn" ref="addPageOpenBtn" disabled="isRunning">+ Add Page</button>
       <button type="button" class="harmony-btn-secondary add-page-from-brief-btn" ref="addPageFromBriefBtn" if="showAddPageFromBriefBtn" disabled="isRunning">Page Briefs</button>
+      <button
+        type="button"
+        class="harmony-btn-primary aiditor-publish-btn"
+        ref="publishBtn"
+        disabled="publishDisabled"
+        title="{publishTooltip}"
+        aria-label="{publishTooltip}"
+      >{publishBtnLabel}</button>
     </div>
   </header>
 
+  <div
+    class="harmony-routes-panel-overlay"
+    if="showPagesPanel"
+    ref="pagesPanelOverlay"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Routes"
+  >
+    <div class="harmony-routes-panel" ref="pagesPanelDialog">
+      <div class="harmony-routes-panel-header">
+        <span class="harmony-routes-panel-title">Routes</span>
+        <button type="button" class="harmony-routes-panel-close" ref="pagesPanelCloseBtn" aria-label="Close">×</button>
+      </div>
+      <div class="harmony-routes-panel-search-row">
+        <input
+          type="search"
+          class="harmony-routes-panel-search-input"
+          ref="pagesPanelSearchInput"
+          value="{pagesPanelSearchQuery}"
+          placeholder="Search routes and URL instances…"
+          aria-label="Search routes and URL instances"
+        />
+      </div>
+      <div class="harmony-routes-panel-body">
+        <p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes or URL instances match your search.</p>
+        <button
+          type="button"
+          forEach="filteredPageRouteRows"
+          trackBy="url"
+          class="{cssClass}"
+          data-route-url="{url}"
+          data-routes-panel-route=""
+        >
+          <span class="harmony-routes-panel-check">{checkGlyph}</span>
+          <span class="harmony-routes-panel-item-label">{label}</span>
+        </button>
+        <p class="harmony-routes-panel-section-title" if="showRoutesPanelUrlInstances">URL instances</p>
+        <button
+          type="button"
+          forEach="filteredUrlInstanceRows"
+          trackBy="path"
+          class="{cssClass}"
+          data-preview-path="{path}"
+          data-routes-panel-url-instance=""
+        >
+          <span class="harmony-routes-panel-check">{checkGlyph}</span>
+          <span class="harmony-routes-panel-item-label">{path}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="harmony-routes-panel-overlay"
+    if="showSnapshotPanel"
+    ref="snapshotPanelOverlay"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Snapshots"
+  >
+    <div class="harmony-routes-panel" ref="snapshotPanelDialog">
+      <div class="harmony-routes-panel-header">
+        <span class="harmony-routes-panel-title">Snapshots</span>
+        <button type="button" class="harmony-routes-panel-close" ref="snapshotPanelCloseBtn" aria-label="Close">×</button>
+      </div>
+      <div class="harmony-routes-panel-search-row">
+        <input
+          type="search"
+          class="harmony-routes-panel-search-input"
+          ref="snapshotPanelSearchInput"
+          value="{snapshotPanelSearchQuery}"
+          placeholder="Search snapshots…"
+          aria-label="Search snapshots"
+        />
+      </div>
+      <div class="harmony-routes-panel-body">
+        <p class="harmony-routes-panel-empty" if="showSnapshotPanelEmptySearch">No snapshots match your search.</p>
+        <button
+          type="button"
+          forEach="filteredSnapshotRows"
+          trackBy="value"
+          class="{cssClass}"
+          data-snapshot-value="{value}"
+          data-snapshot-panel-item=""
+        >
+          <span class="harmony-routes-panel-check">{checkGlyph}</span>
+          <span class="harmony-routes-panel-item-label">{label}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="harmony-editor-body">
+    <div class="harmony-float-rail" aria-label="Editor tools">
+      <button
+        type="button"
+        class="harmony-add-btn harmony-add-page-btn"
+        ref="harmonyAddPageBtn"
+        disabled="isRunning"
+        aria-label="Add Page"
+      >Add Page</button>
+    </div>
+
+    <div class="harmony-workspace">
   <input
     type="file"
     class="file-input-hidden"
@@ -1899,13 +2959,13 @@ data:
 
   <div class="editor-stage">
     <div class="canvas-workspace harmony-canvas-area" if="isPreviewMode">
-      <div class="preview-loading" if="previewLoading">{paramsLoadingHint}</div>
+      <div class="preview-loading" if="previewLoading">Loading…</div>
       <div class="preview-error" if="previewError">{previewError}</div>
-      <div class="canvas-window harmony-canvas-window" if="showPreviewIframe">
+      <div class="canvas-stage-shell" if="showPreviewIframe" style="width: {stageWidthPx}px;">
+        <div class="stage-resize-handle stage-resize-handle-left" ref="stageResizeLeft" title="Drag to resize stage" aria-label="Resize stage width"></div>
+        <div class="stage-resize-handle stage-resize-handle-right" ref="stageResizeRight" title="Drag to resize stage" aria-label="Resize stage width"></div>
+        <div class="canvas-window harmony-canvas-window">
         <div class="canvas-chrome harmony-canvas-chrome">
-          <div class="canvas-chrome-left harmony-canvas-chrome-left">
-            <span class="canvas-page-badge harmony-canvas-page-badge">Preview</span>
-          </div>
           <div class="url-bar-wrap harmony-url-bar-wrap">
             <div class="url-bar">{previewUrlBar}</div>
           </div>
@@ -1915,54 +2975,42 @@ data:
             <button type="button" class="{breakpointMobileOn ? visual-tool-on} visual-tool-btn" ref="breakpointMobileBtn" title="Mobile (390px)"><svg width="8" height="14" viewBox="0 0 8 14" fill="none"><rect x="0.7" y="0.7" width="6.6" height="12.6" rx="1.1" stroke="currentColor" stroke-width="1.4"/><line x1="2.5" y1="11.5" x2="5.5" y2="11.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
           </div>
         </div>
-        <div class="{breakpointTabletOn ? preview-frame-tablet} {breakpointMobileOn ? preview-frame-mobile} preview-frame-wrap harmony-canvas-content" ref="previewCaptureRoot">
+        <div class="preview-frame-wrap harmony-canvas-content" ref="previewCaptureRoot">
         <iframe class="preview-frame" ref="previewIframe" src="{previewSrc}" title="Page preview"></iframe>
         <div class="{visualOverlayPointerNone ? visual-overlay-none} visual-overlay" ref="visualOverlay">
           <div
-            class="point-marker"
+            class="{markerOpen ? point-marker-open} {markerEditMode ? marker-edit-mode} point-marker"
             forEach="visualPointDisplayItems"
             trackBy="id"
+            ref="visualAnnotationMarker"
+            data-visual-annotation-marker="{id}"
             style="left: {leftPct}%; top: {topPct}%;"
           >
             <span class="point-marker-idx">{indexLabel}</span>
           </div>
           <div
-            class="area-rect"
+            class="{markerOpen ? area-rect-open} {markerEditMode ? marker-edit-mode} area-rect"
             forEach="visualAreaDisplayItems"
             trackBy="id"
+            ref="visualAnnotationMarker"
+            data-visual-annotation-marker="{id}"
             style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
-          ><span class="area-marker-idx">{indexLabel}</span></div>
+          >
+            <span class="area-marker-idx">{indexLabel}</span>
+            <div if="markerEditMode" class="area-resize-handle area-resize-nw" data-area-resize-handle="nw"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-n" data-area-resize-handle="n"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-ne" data-area-resize-handle="ne"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-e" data-area-resize-handle="e"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-se" data-area-resize-handle="se"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-s" data-area-resize-handle="s"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-sw" data-area-resize-handle="sw"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-w" data-area-resize-handle="w"></div>
+          </div>
           <div
             class="area-rect area-rect-draft"
             if="showAreaDraftRect"
             style="left: {areaDraftLeftPct}%; top: {areaDraftTopPct}%; width: {areaDraftWidthPct}%; height: {areaDraftHeightPct}%;"
           ></div>
-          <div
-            class="arrow-pending-dot"
-            if="showArrowPending"
-            style="left: {arrowPendingLeftPct}%; top: {arrowPendingTopPct}%;"
-          ></div>
-          <svg class="arrow-svg" if="hasVisualArrowLines" viewBox="0 0 100 100" preserveAspectRatio="none">
-            <defs>
-              <marker id="aiditor-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
-                <polygon points="0 0, 8 4, 0 8" fill="#116dff" />
-              </marker>
-            </defs>
-            <line
-              forEach="visualArrowDisplayItems"
-              trackBy="id"
-              x1="{x1Pct}"
-              y1="{y1Pct}"
-              x2="{x2Pct}"
-              y2="{y2Pct}"
-            />
-          </svg>
-          <div
-            class="arrow-end-pin"
-            forEach="visualArrowPinItems"
-            trackBy="id"
-            style="left: {leftPct}%; top: {topPct}%;"
-          >{indexLabel}</div>
         </div>
         <div class="visual-popovers" if="showVisualAnnotationsPanel">
           <div
@@ -2011,7 +3059,7 @@ data:
             </div>
           </div>
           <div
-            class="{popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
+            class="{!showPopover ? visual-popover-hidden} {popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
             forEach="visualAnnotationRows"
             trackBy="id"
             ref="annotationRow"
@@ -2024,10 +3072,10 @@ data:
                 <button type="button" class="visual-annotation-remove" title="Remove annotation">Remove</button>
                 <button
                   type="button"
-                  class="visual-annotation-run"
-                  disabled="runDisabled"
-                  title="Capture preview and send all annotations"
-                >Run</button>
+                  class="visual-annotation-minimize"
+                  title="Minimize comment"
+                  aria-label="Minimize comment"
+                ><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M4 6l3 3 3-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
               </div>
             </div>
             <textarea
@@ -2037,18 +3085,16 @@ data:
               value="{instruction}"
             ></textarea>
             <div class="annotation-add-menu">
-              <button type="button" class="annotation-add-menu-toggle">Add Menu (optional)</button>
-              <div class="annotation-add-menu-panel add-menu-panel" if="showAddMenuControls">
+              <div class="annotation-add-menu-panel add-menu-panel">
                 <div class="add-menu-panel-attached">
                 <div if="showMarkerAddMenuChips">
                   <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
                   <div class="add-page-plugin-chips">
-                    <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button></span>
+                    <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
                   </div>
                 </div>
                 <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
                 <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
-                <button type="button" class="add-page-manage-link" data-marker-add-menu-manage="1">Manage plugins…</button>
                 <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
                 <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
                 <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
@@ -2065,22 +3111,6 @@ data:
                   <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
                 </div>
                 </div>
-                <div class="add-menu-popover" if="showAddMenuItemPicker">
-                  <div class="add-menu-popover-header">
-                    <span if="!addMenuSelectedCategory">Pick a category</span>
-                    <span if="addMenuSelectedCategory">Pick an item</span>
-                    <button type="button" data-marker-add-menu-close="1">×</button>
-                  </div>
-                  <p class="add-page-hint" if="showMarkerPickerLoading">Loading catalog…</p>
-                  <p class="add-page-hint" if="showMarkerPickerCatalogEmpty">Add Menu catalog is empty. Run <code>yarn setup ui-kit --force</code> (and other plugins) in the project, then click + Add again.</p>
-                  <div class="add-menu-nav">
-                    <div class="add-menu-nav-row" forEach="markerPickerNavRows" trackBy="rowKey">
-                      <button type="button" class="add-menu-nav-btn" if="kind===category" data-marker-add-menu-category="1" data-category="{value}">{label}</button>
-                      <button type="button" class="add-menu-nav-btn" if="kind===subCategory" data-marker-add-menu-subcategory="1" data-subcategory="{value}">{label}</button>
-                      <button type="button" class="add-menu-item-btn" if="kind===item" data-marker-add-menu-pick="1" data-item-id="{value}">{label}</button>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
             <div class="visual-annotation-files">
@@ -2103,35 +3133,82 @@ data:
                 </div>
               </div>
             </div>
+            <button
+              type="button"
+              class="visual-annotation-quick-send"
+              disabled="quickSendDisabled"
+              title="Send comments to agent"
+              aria-label="Send comments to agent"
+            ><svg class="tool-send-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 2L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M14 2L9.5 14L7 9L2 6.5L14 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
           </div>
         </div>
       </div>
-        </div>
       <p class="visual-submit-error" if="showVisualSubmitError">{visualSubmitError}</p>
-    </div>
+        </div>
+      </div>
 
-    <div class="annotate-dock preview-visual-tools" if="isPreviewMode && showVisualToolbar">
-      <span class="annotate-dock-label">Annotate</span>
-      <button type="button" class="{visualToolNoneOn ? visual-tool-on} visual-tool-btn" ref="visualToolNoneBtn" title="Select">⤢</button>
-      <button type="button" class="{visualToolPointOn ? visual-tool-on} visual-tool-btn" ref="visualToolPointBtn" title="Point">⊙</button>
-      <button type="button" class="{visualToolAreaOn ? visual-tool-on} visual-tool-btn" ref="visualToolAreaBtn" title="Area">▢</button>
-      <button type="button" class="{visualToolArrowOn ? visual-tool-on} visual-tool-btn" ref="visualToolArrowBtn" title="Arrow">↗</button>
+    <div class="annotate-dock-wrap" if="isPreviewMode && showVisualToolbar">
+      <div class="clear-markers-confirm" if="showClearMarkersConfirm" role="alertdialog" aria-live="polite" aria-label="Confirm remove all markers">
+        <span class="clear-markers-confirm-msg">{clearMarkersConfirmText}</span>
+        <button type="button" class="clear-markers-cancel-btn" ref="clearMarkersCancelBtn">Cancel</button>
+        <button type="button" class="clear-markers-confirm-btn" ref="clearMarkersConfirmBtn">Remove all</button>
+      </div>
+      <div class="annotate-dock preview-visual-tools">
+      <button type="button" class="{visualToolNoneOn ? visual-tool-on} visual-tool-btn" ref="visualToolNoneBtn" title="Clear all markers and return to normal preview" aria-label="Clear all markers and return to normal preview"><span class="tool-glyph" aria-hidden="true">☒</span></button>
+      <span class="tool-group-sep"></span>
+      <button
+        type="button"
+        class="{visualToolPointOn ? visual-tool-on} visual-tool-btn"
+        ref="visualToolPointBtn"
+        disabled="visualMarkerToolsDisabled"
+        title="{visualPointMarkerTooltip}"
+        aria-label="{visualPointMarkerTooltip}"
+      ><span class="tool-glyph" aria-hidden="true">⊚</span></button>
+      <button
+        type="button"
+        class="{visualToolAreaOn ? visual-tool-on} visual-tool-btn"
+        ref="visualToolAreaBtn"
+        disabled="visualMarkerToolsDisabled"
+        title="{visualAreaMarkerTooltip}"
+        aria-label="{visualAreaMarkerTooltip}"
+      ><span class="tool-glyph" aria-hidden="true">▢</span></button>
       <span class="tool-group-sep"></span>
       <button
         type="button"
         class="{isVideoRecording ? video-record-active} video-record-btn visual-tool-btn"
         ref="videoRecordBtn"
         disabled="videoRecordDisabled"
-        title="Record preview"
-      >{videoRecordLabel}</button>
+        title="{videoRecordTooltip}"
+        aria-label="{videoRecordTooltip}"
+      ><span class="tool-rec-label" if="!isVideoRecording" aria-hidden="true">REC</span><span class="tool-rec-label" if="isVideoRecording" aria-hidden="true">⏹</span></button>
       <button
         type="button"
         class="visual-tool-btn freeze-btn"
         ref="freezeBtn"
         disabled="freezeDisabled"
-        title="Freeze page state"
-      >❄</button>
+        title="Freeze the current page state"
+        aria-label="Freeze the current page state"
+      ><span class="tool-glyph" aria-hidden="true">❄</span></button>
+      <span class="tool-group-sep"></span>
+      <button
+        type="button"
+        class="visual-tool-btn send-to-agent-btn"
+        ref="sendToAgentBtn"
+        disabled="sendToAgentDisabled"
+        title="{sendToAgentTooltip}"
+        aria-label="{sendToAgentTooltip}"
+      ><svg class="tool-send-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 2L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M14 2L9.5 14L7 9L2 6.5L14 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
+      </div>
     </div>
+    </div>
+    <button
+      type="button"
+      class="harmony-stage-icon-btn project-settings-btn"
+      ref="projectSettingsBtn"
+      disabled="isRunning"
+      aria-label="Project settings"
+      title="Project settings"
+    >⚙</button>
   </div>
   <div class="add-page-result-slot" ref="addPageResultBannerSlot">
     <div class="{addPageResultBannerClass} add-page-result-banner" if="showAddPageResultBanner">
@@ -2145,19 +3222,86 @@ data:
   <div class="{bottomPanelClass}">
     <div class="bottom-panel-resize" ref="bottomPanelResize"></div>
     <div class="bottom-panel-header" ref="bottomPanelHeader">
-      <span class="bottom-panel-title">AI Assistant</span>
+      <span class="bottom-panel-title">AI Agent</span>
       <span class="bottom-panel-running" if="showBottomPanelRunning"></span>
       <span class="bottom-panel-spacer"></span>
-      <button type="button" class="bottom-panel-clear" ref="bottomPanelClearBtn">Clear</button>
-      <button type="button" class="bottom-panel-toggle" ref="bottomPanelToggleBtn">{bottomPanelToggleGlyph}</button>
+      <div class="bottom-panel-header-actions">
+        <div class="agent-stop-confirm-anchor">
+          <div class="clear-markers-confirm agent-stop-confirm-float" if="showAgentStopConfirm" ref="agentStopConfirmDialog" role="alertdialog" aria-live="polite" aria-label="Confirm stop agent">
+            <span class="clear-markers-confirm-msg">Stop the agent? Work in progress will be cancelled.</span>
+            <button type="button" class="clear-markers-cancel-btn" ref="agentStopCancelBtn">Cancel</button>
+            <button type="button" class="clear-markers-confirm-btn" ref="agentStopConfirmBtn">Stop</button>
+          </div>
+          <button type="button" class="{agentStopBtnClass}" ref="agentStopBtn" if="showBottomPanelRunning">Stop</button>
+        </div>
+        <button type="button" class="bottom-panel-clear" ref="bottomPanelClearBtn">Clear</button>
+        <button type="button" class="bottom-panel-toggle" ref="bottomPanelToggleBtn">{bottomPanelToggleGlyph}</button>
+      </div>
     </div>
+    <div class="bottom-panel-body">
     <div class="output-panel" ref="outputScroll">
-      <div class="{cssClass}" forEach="chunks" trackBy="text"><span if="showUserPrefix" class="chunk-user-prefix">You: </span><span if="filePath" class="chunk-tool-prefix">&gt; {toolName} </span><a if="filePath" class="file-link" href="#" data-path="{filePath}">{filePath}</a><span if="!filePath">{text}</span></div>
+      <div forEach="chunks" trackBy="id">
+        <div if="isDivider" class="chunk chunk-divider">{text}</div>
+        <div if="!isDivider" class="{cssClass}"><span if="showUserPrefix" class="chunk-user-prefix">You: </span><span if="filePath" class="chunk-tool-prefix">&gt; {toolName} </span><a if="filePath" class="file-link" href="#" data-path="{filePath}">{filePath}</a><span if="!filePath">{text}</span></div>
+      </div>
     </div>
     <div class="agent-chat-row" if="showAgentChatInput">
       <textarea class="agent-chat-input" ref="agentChatInput" rows="1" value="{agentChatMessage}" placeholder="{agentChatPlaceholder}" disabled="agentChatInputDisabled" aria-label="Message to agent"></textarea>
       <button type="button" class="agent-chat-send" ref="agentChatSendBtn" disabled="agentChatSendDisabled" aria-label="Send message">Send</button>
     </div>
+    </div>
+  </div>
+  </div>
+</div>
+
+<div class="add-menu-picker-overlay" if="showAddMenuPickerModal" ref="addMenuPickerOverlay" role="dialog" aria-modal="true" aria-label="Add elements">
+  <div class="{addMenuPickerDialogClass}" ref="addMenuPickerDialog">
+    <div class="add-menu-picker-header">
+      <span class="add-menu-picker-title">{addMenuPickerHeaderTitle}</span>
+      <button type="button" class="add-menu-picker-close" ref="addMenuPickerCloseBtn" aria-label="Close">×</button>
+    </div>
+    <div class="add-menu-picker-body">
+      <p class="add-menu-picker-hint" if="showAddMenuPickerLoading">Loading plugin catalog…</p>
+      <p class="add-menu-picker-hint" if="showAddMenuPickerEmpty">No Add Menu items yet. Install plugins in Project settings, then try again.</p>
+      <div class="add-menu-picker-browse" if="showAddMenuPickerBrowse">
+        <div class="add-menu-picker-search-row">
+          <button type="button" class="add-menu-picker-back" if="showAddMenuPickerSearchBack" data-add-menu-picker-search-back="1" aria-label="Back to browse">‹</button>
+          <div class="add-menu-picker-search-field">
+            <span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
+            <input type="search" class="add-menu-picker-search-input" ref="addMenuPickerSearchInput" placeholder="Search elements…" value="{addMenuPickerSearchQuery}" />
+            <button type="button" class="add-menu-picker-search-clear" if="showAddMenuPickerSearchClear" data-add-menu-picker-search-clear="1" aria-label="Clear search">×</button>
+          </div>
+        </div>
+        <div class="{addMenuPickerBrowseLayoutClass}">
+          <nav class="add-menu-picker-sidebar" if="showAddMenuPickerBrowseLayout" aria-label="Categories">
+            <button type="button" class="{cssClass}" forEach="addMenuPickerLeftNavRows" trackBy="rowKey" data-add-menu-picker-left-nav="1" data-nav-key="{navKey}">
+              <span class="add-menu-picker-category-label">{label}</span>
+              <span class="add-menu-picker-category-count">{itemCount}</span>
+            </button>
+          </nav>
+          <div class="add-menu-picker-main">
+            <h2 class="add-menu-picker-main-title" if="showAddMenuPickerBrowseTitle">{addMenuPickerBrowseCategoryTitle}</h2>
+            <p class="add-menu-picker-search-summary" if="showAddMenuPickerSearchSummary">{addMenuPickerSearchSummary}</p>
+            <div class="add-menu-picker-subcategory-scroll" if="showAddMenuPickerSubCategoryFilters">
+              <button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollPrev" data-add-menu-picker-subcategory-scroll="1" data-direction="prev" aria-label="Scroll filters left">‹</button>
+              <div class="add-menu-picker-subcategories" ref="addMenuPickerSubCategoryFilters">
+                <button type="button" class="{cssClass}" forEach="addMenuPickerSubCategoryFilterRows" trackBy="rowKey" data-add-menu-picker-subcategory-filter="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showCount">{itemCount}</span></button>
+              </div>
+              <button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollNext" data-add-menu-picker-subcategory-scroll="1" data-direction="next" aria-label="Scroll filters right">›</button>
+            </div>
+            <div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
+              <div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
+                <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
+                <button type="button" class="add-menu-picker-component-card" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}"><span class="add-menu-picker-component-title">{label}</span></button>
+                <div class="add-menu-picker-component-card add-menu-picker-component-card--browse-only" if="showBrowseOnly"><span class="add-menu-picker-component-title" title="{label}">{label}</span></div>
+              </div>
+            </div>
+            <p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
+            <p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -2250,28 +3394,13 @@ data:
           <div class="add-menu-panel-attached">
           <div if="showAddMenuChips" class="add-page-plugin-chips">
             <span class="add-page-plugin-chip" forEach="addMenuChipRows" trackBy="rowKey">
-              {title}<span class="add-page-plugin-chip-sub">{subtitle}</span>
+              <span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span>
               <button type="button" class="add-page-plugin-chip-remove" data-add-menu-remove-chip="1" data-item-id="{itemId}" title="Remove">×</button>
               <button type="button" class="add-page-plugin-chip-at" data-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button>
             </span>
           </div>
           <p class="add-page-hint" if="showAddMenuEmptyHint">Install plugins in Project settings to unlock Add Menu items.</p>
           <button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-open="1">+ Add</button>
-          <button type="button" class="add-page-manage-link" data-add-menu-manage-plugins="1">Manage plugins…</button>
-          </div>
-          <div class="add-menu-popover" if="showAddMenuPopover">
-            <div class="add-menu-popover-header">
-              <span if="!addMenuSelectedCategory">Pick a category</span>
-              <span if="addMenuSelectedCategory">Pick an item</span>
-              <button type="button" data-add-menu-close="1">×</button>
-            </div>
-            <div class="add-menu-nav">
-              <div class="add-menu-nav-row" forEach="addMenuNavRows" trackBy="rowKey">
-                <button type="button" class="add-menu-nav-btn" if="kind===category" data-add-menu-category="1" data-category="{value}">{label}</button>
-                <button type="button" class="add-menu-nav-btn" if="kind===subCategory" data-add-menu-subcategory="1" data-subcategory="{value}">{label}</button>
-                <button type="button" class="add-menu-item-btn" if="kind===item" data-add-menu-pick="1" data-item-id="{value}">{label}</button>
-              </div>
-            </div>
           </div>
           <div class="add-menu-route-confirm" if="showAddMenuRouteParamConfirm">
             <p><strong>This component needs a dynamic page route</strong></p>
@@ -2342,23 +3471,6 @@ data:
       </div>
     </div>
   </div>
-  <div class="{bottomPanelClass}">
-    <div class="bottom-panel-resize" ref="bottomPanelResize"></div>
-    <div class="bottom-panel-header" ref="bottomPanelHeader">
-      <span class="bottom-panel-title">AI Assistant</span>
-      <span class="bottom-panel-running" if="showBottomPanelRunning"></span>
-      <span class="bottom-panel-spacer"></span>
-      <button type="button" class="bottom-panel-clear" ref="bottomPanelClearBtn">Clear</button>
-      <button type="button" class="bottom-panel-toggle" ref="bottomPanelToggleBtn">{bottomPanelToggleGlyph}</button>
-    </div>
-    <div class="output-panel" ref="outputScroll">
-      <div class="{cssClass}" forEach="chunks" trackBy="text"><span if="showUserPrefix" class="chunk-user-prefix">You: </span><span if="filePath" class="chunk-tool-prefix">&gt; {toolName} </span><a if="filePath" class="file-link" href="#" data-path="{filePath}">{filePath}</a><span if="!filePath">{text}</span></div>
-    </div>
-    <div class="agent-chat-row" if="showAgentChatInput">
-      <textarea class="agent-chat-input" ref="agentChatInput" rows="1" value="{agentChatMessage}" placeholder="{agentChatPlaceholder}" disabled="agentChatInputDisabled" aria-label="Message to agent"></textarea>
-      <button type="button" class="agent-chat-send" ref="agentChatSendBtn" disabled="agentChatSendDisabled" aria-label="Send message">Send</button>
-    </div>
-  </div>
 </div>
 
 <div class="file-preview-overlay" if="showFilePreview" ref="filePreviewBackdrop">
@@ -2389,10 +3501,10 @@ data:
     <!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
     <div if="videoReviewPreparing || videoReviewReady">
       <div class="video-review-tools">
-        <button type="button" class="{videoModalToolNoneOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolNoneBtn" title="Select">⤢</button>
-        <button type="button" class="{videoModalToolPointOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolPointBtn" title="Point">⊙</button>
-        <button type="button" class="{videoModalToolAreaOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolAreaBtn" title="Area">▢</button>
-        <button type="button" class="{videoModalToolArrowOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolArrowBtn" title="Arrow">↗</button>
+        <button type="button" class="{videoModalToolNoneOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolNoneBtn" title="Select and pan the video" aria-label="Select and pan the video"><span class="tool-glyph" aria-hidden="true">☒</span></button>
+        <span class="tool-group-sep"></span>
+        <button type="button" class="{videoModalToolPointOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolPointBtn" title="Add a point marker" aria-label="Add a point marker"><span class="tool-glyph" aria-hidden="true">⊚</span></button>
+        <button type="button" class="{videoModalToolAreaOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolAreaBtn" title="Add an area marker" aria-label="Add an area marker"><span class="tool-glyph" aria-hidden="true">▢</span></button>
       </div>
       <input type="file" class="file-input-hidden" ref="videoReviewAttachFileInput" multiple />
       <div class="preview-frame-wrap video-review-capture-root" ref="videoReviewCaptureRoot">
@@ -2424,32 +3536,6 @@ data:
             if="showVideoAreaDraftRect"
             style="left: {videoAreaDraftLeftPct}%; top: {videoAreaDraftTopPct}%; width: {videoAreaDraftWidthPct}%; height: {videoAreaDraftHeightPct}%;"
           ></div>
-          <div
-            class="arrow-pending-dot"
-            if="showVideoArrowPending"
-            style="left: {videoArrowPendingLeftPct}%; top: {videoArrowPendingTopPct}%;"
-          ></div>
-          <svg class="arrow-svg" if="hasVideoArrowLines" viewBox="0 0 100 100" preserveAspectRatio="none">
-            <defs>
-              <marker id="aiditor-video-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
-                <polygon points="0 0, 8 4, 0 8" fill="#116dff" />
-              </marker>
-            </defs>
-            <line
-              forEach="videoArrowDisplayItems"
-              trackBy="id"
-              x1="{x1Pct}"
-              y1="{y1Pct}"
-              x2="{x2Pct}"
-              y2="{y2Pct}"
-            />
-          </svg>
-          <div
-            class="arrow-end-pin"
-            forEach="videoArrowPinItems"
-            trackBy="id"
-            style="left: {leftPct}%; top: {topPct}%;"
-          >{indexLabel}</div>
         </div>
         <div class="visual-popovers" if="showVideoAnnotationPopoversAtPlayhead">
           <div
@@ -2473,18 +3559,16 @@ data:
               value="{instruction}"
             ></textarea>
             <div class="annotation-add-menu">
-              <button type="button" class="annotation-add-menu-toggle">Add Menu (optional)</button>
-              <div class="annotation-add-menu-panel add-menu-panel" if="showAddMenuControls">
+              <div class="annotation-add-menu-panel add-menu-panel">
                 <div class="add-menu-panel-attached">
                 <div if="showMarkerAddMenuChips">
                   <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
                   <div class="add-page-plugin-chips">
-                    <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button></span>
+                    <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
                   </div>
                 </div>
                 <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
                 <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
-                <button type="button" class="add-page-manage-link" data-marker-add-menu-manage="1">Manage plugins…</button>
                 <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
                 <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
                 <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
@@ -2501,22 +3585,6 @@ data:
                   <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
                 </div>
                 </div>
-                <div class="add-menu-popover" if="showAddMenuItemPicker">
-                  <div class="add-menu-popover-header">
-                    <span if="!addMenuSelectedCategory">Pick a category</span>
-                    <span if="addMenuSelectedCategory">Pick an item</span>
-                    <button type="button" data-marker-add-menu-close="1">×</button>
-                  </div>
-                  <p class="add-page-hint" if="showMarkerPickerLoading">Loading catalog…</p>
-                  <p class="add-page-hint" if="showMarkerPickerCatalogEmpty">Add Menu catalog is empty. Run <code>yarn setup ui-kit --force</code> (and other plugins) in the project, then click + Add again.</p>
-                  <div class="add-menu-nav">
-                    <div class="add-menu-nav-row" forEach="markerPickerNavRows" trackBy="rowKey">
-                      <button type="button" class="add-menu-nav-btn" if="kind===category" data-marker-add-menu-category="1" data-category="{value}">{label}</button>
-                      <button type="button" class="add-menu-nav-btn" if="kind===subCategory" data-marker-add-menu-subcategory="1" data-subcategory="{value}">{label}</button>
-                      <button type="button" class="add-menu-item-btn" if="kind===item" data-marker-add-menu-pick="1" data-item-id="{value}">{label}</button>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
             <div class="visual-annotation-files">
@@ -2539,6 +3607,13 @@ data:
                 </div>
               </div>
             </div>
+            <button
+              type="button"
+              class="visual-annotation-quick-send"
+              disabled="quickSendDisabled"
+              title="Send comments to agent"
+              aria-label="Send comments to agent"
+            ><svg class="tool-send-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 2L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M14 2L9.5 14L7 9L2 6.5L14 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
           </div>
         </div>
       </div>
@@ -2576,13 +3651,13 @@ data:
       <button type="button" class="snapshot-close" ref="snapshotCloseBtn" aria-label="Close">✕</button>
     </div>
     <div class="snapshot-tools">
-      <button type="button" class="{snapshotToolPointOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolPointBtn" title="Point" aria-label="Point tool">⊙</button>
-      <button type="button" class="{snapshotToolAreaOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolAreaBtn" title="Area" aria-label="Area tool">▢</button>
-      <button type="button" class="{snapshotToolArrowOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolArrowBtn" title="Arrow" aria-label="Arrow tool">↗</button>
-      <button type="button" class="{snapshotToolNoneOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolNoneBtn" title="Select" aria-label="Select tool">⤢</button>
+      <button type="button" class="{snapshotToolNoneOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolNoneBtn" title="Select and pan the snapshot" aria-label="Select and pan the snapshot"><span class="tool-glyph" aria-hidden="true">☒</span></button>
       <span class="tool-group-sep"></span>
-      <button type="button" class="visual-tool-btn" ref="snapshotUndoBtn" title="Undo last marker" aria-label="Undo">↩</button>
-      <button type="button" class="visual-tool-btn" ref="snapshotClearBtn" title="Clear all markers" aria-label="Clear all">✕ Clear</button>
+      <button type="button" class="{snapshotToolPointOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolPointBtn" title="Add a point marker" aria-label="Add a point marker"><span class="tool-glyph" aria-hidden="true">⊚</span></button>
+      <button type="button" class="{snapshotToolAreaOn ? visual-tool-on} visual-tool-btn" ref="snapshotToolAreaBtn" title="Add an area marker" aria-label="Add an area marker"><span class="tool-glyph" aria-hidden="true">▢</span></button>
+      <span class="tool-group-sep"></span>
+      <button type="button" class="visual-tool-btn" ref="snapshotUndoBtn" title="Undo last marker" aria-label="Undo last marker"><span class="tool-glyph" aria-hidden="true">↩</span></button>
+      <button type="button" class="visual-tool-btn" ref="snapshotClearBtn" title="Clear all markers" aria-label="Clear all markers"><span class="tool-glyph" aria-hidden="true">✕</span></button>
     </div>
     <input type="file" class="file-input-hidden" ref="snapshotAttachFileInput" multiple />
     <div class="snapshot-body">
@@ -2590,50 +3665,38 @@ data:
         <img class="snapshot-img" ref="snapshotImg" src="{snapshotImageSrc}" alt="Captured snapshot" draggable="false" />
         <div class="{snapshotOverlayPointerNone ? snapshot-img-overlay-none} snapshot-img-overlay" ref="snapshotOverlay">
           <div
-            class="point-marker"
+            class="{markerEditMode ? marker-edit-mode} point-marker"
             forEach="snapshotPointDisplayItems"
             trackBy="id"
+            data-snapshot-annotation-marker="{id}"
+            data-snapshot-annotation-kind="point"
             style="left: {leftPct}%; top: {topPct}%;"
           >
             <span class="point-marker-idx">{indexLabel}</span>
           </div>
           <div
-            class="area-rect"
+            class="{markerEditMode ? marker-edit-mode} area-rect"
             forEach="snapshotAreaDisplayItems"
             trackBy="id"
+            data-snapshot-annotation-marker="{id}"
+            data-snapshot-annotation-kind="area"
             style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
-          ><span class="area-marker-idx">{indexLabel}</span></div>
+          >
+            <span class="area-marker-idx">{indexLabel}</span>
+            <div if="markerEditMode" class="area-resize-handle area-resize-nw" data-area-resize-handle="nw"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-n" data-area-resize-handle="n"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-ne" data-area-resize-handle="ne"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-e" data-area-resize-handle="e"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-se" data-area-resize-handle="se"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-s" data-area-resize-handle="s"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-sw" data-area-resize-handle="sw"></div>
+            <div if="markerEditMode" class="area-resize-handle area-resize-w" data-area-resize-handle="w"></div>
+          </div>
           <div
             class="area-rect area-rect-draft"
             if="showSnapshotAreaDraft"
             style="left: {snapshotAreaDraftLeftPct}%; top: {snapshotAreaDraftTopPct}%; width: {snapshotAreaDraftWidthPct}%; height: {snapshotAreaDraftHeightPct}%;"
           ></div>
-          <div
-            class="arrow-pending-dot"
-            if="showSnapshotArrowPending"
-            style="left: {snapshotArrowPendingLeftPct}%; top: {snapshotArrowPendingTopPct}%;"
-          ></div>
-          <svg class="arrow-svg" if="hasSnapshotArrowLines" viewBox="0 0 100 100" preserveAspectRatio="none">
-            <defs>
-              <marker id="aiditor-snapshot-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
-                <polygon points="0 0, 8 4, 0 8" fill="#116dff" />
-              </marker>
-            </defs>
-            <line
-              forEach="snapshotArrowDisplayItems"
-              trackBy="id"
-              x1="{x1Pct}"
-              y1="{y1Pct}"
-              x2="{x2Pct}"
-              y2="{y2Pct}"
-            />
-          </svg>
-          <div
-            class="arrow-end-pin"
-            forEach="snapshotArrowPinItems"
-            trackBy="id"
-            style="left: {leftPct}%; top: {topPct}%;"
-          >{indexLabel}</div>
         </div>
       </div>
       <div class="snapshot-annotations-panel">
@@ -2656,18 +3719,16 @@ data:
             value="{instruction}"
           ></textarea>
           <div class="annotation-add-menu">
-            <button type="button" class="annotation-add-menu-toggle">Add Menu (optional)</button>
-            <div class="annotation-add-menu-panel add-menu-panel" if="showAddMenuControls">
+            <div class="annotation-add-menu-panel add-menu-panel">
               <div class="add-menu-panel-attached">
               <div if="showMarkerAddMenuChips">
                 <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
                 <div class="add-page-plugin-chips">
-                  <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button></span>
+                  <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
                 </div>
               </div>
               <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
               <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
-              <button type="button" class="add-page-manage-link" data-marker-add-menu-manage="1">Manage plugins…</button>
               <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
               <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
               <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
@@ -2684,22 +3745,6 @@ data:
                 <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
               </div>
               </div>
-              <div class="add-menu-popover" if="showAddMenuItemPicker">
-                <div class="add-menu-popover-header">
-                  <span if="!addMenuSelectedCategory">Pick a category</span>
-                  <span if="addMenuSelectedCategory">Pick an item</span>
-                  <button type="button" data-marker-add-menu-close="1">×</button>
-                </div>
-                <p class="add-page-hint" if="showMarkerPickerLoading">Loading catalog…</p>
-                <p class="add-page-hint" if="showMarkerPickerCatalogEmpty">Add Menu catalog is empty. Run <code>yarn setup ui-kit --force</code> (and other plugins) in the project, then click + Add again.</p>
-                <div class="add-menu-nav">
-                  <div class="add-menu-nav-row" forEach="markerPickerNavRows" trackBy="rowKey">
-                    <button type="button" class="add-menu-nav-btn" if="kind===category" data-marker-add-menu-category="1" data-category="{value}">{label}</button>
-                    <button type="button" class="add-menu-nav-btn" if="kind===subCategory" data-marker-add-menu-subcategory="1" data-subcategory="{value}">{label}</button>
-                    <button type="button" class="add-menu-item-btn" if="kind===item" data-marker-add-menu-pick="1" data-item-id="{value}">{label}</button>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
           <div class="visual-annotation-files">
@@ -2722,6 +3767,13 @@ data:
               </div>
             </div>
           </div>
+          <button
+            type="button"
+            class="visual-annotation-quick-send"
+            disabled="quickSendDisabled"
+            title="Send comments to agent"
+            aria-label="Send comments to agent"
+          ><svg class="tool-send-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 2L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M14 2L9.5 14L7 9L2 6.5L14 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
         </div>
       </div>
     </div>
@@ -2738,6 +3790,7 @@ data:
   </div>
 </div>
 
+</div>
 </div>
 </body>
 </html>