@jay-framework/aiditor 0.20.0 → 0.21.0

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

@@ -463,19 +463,31 @@
       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 {
+    .harmony-routes-panel-section-title + .harmony-routes-panel-item-row,
+    .harmony-routes-panel-item-row + .harmony-routes-panel-section-title {
       margin-top: 4px;
       padding-top: 14px;
       border-top: 1px solid var(--harmony-border);
     }
+    .harmony-routes-panel-item-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+    .harmony-routes-panel-item-row:hover {
+      background: var(--harmony-bg-hover);
+    }
+    .harmony-routes-panel-item-row--selected {
+      background: var(--harmony-primary-soft);
+    }
     .harmony-routes-panel-item {
       display: flex;
       align-items: center;
       gap: 8px;
-      width: 100%;
+      flex: 1;
+      min-width: 0;
       box-sizing: border-box;
-      padding: 9px 16px;
+      padding: 9px 8px 9px 16px;
       border: none;
       background: transparent;
       color: var(--harmony-text);
@@ -485,10 +497,9 @@
       cursor: pointer;
     }
     .harmony-routes-panel-item:hover {
-      background: var(--harmony-bg-hover);
+      background: transparent;
     }
     .harmony-routes-panel-item--selected {
-      background: var(--harmony-primary-soft);
       color: var(--harmony-primary);
       font-weight: 600;
     }
@@ -506,6 +517,35 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .harmony-routes-panel-open-tab {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-right: 8px;
+      padding: 0;
+      border: none;
+      border-radius: var(--harmony-radius-sm);
+      background: transparent;
+      color: var(--harmony-text-muted);
+      cursor: pointer;
+      transition: color 0.12s ease, background 0.12s ease;
+    }
+    .harmony-routes-panel-open-tab:hover {
+      color: var(--harmony-text);
+      background: transparent;
+    }
+    .harmony-routes-panel-open-tab:focus-visible {
+      outline: 2px solid var(--harmony-primary);
+      outline-offset: 1px;
+    }
+    .harmony-routes-panel-open-tab-icon {
+      display: block;
+      width: 18px;
+      height: 18px;
+    }
     .harmony-routes-panel-empty {
       margin: 0;
       padding: 16px;
@@ -1042,14 +1082,54 @@
     .harmony-url-bar-wrap { flex: 1; min-width: 0; }
     .url-bar-wrap { flex: 1; min-width: 200px; }
     .url-bar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
       font-size: 12px;
       font-family: var(--harmony-mono);
       color: var(--harmony-text-secondary);
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-sm);
-      padding: 7px 12px;
-      word-break: break-all;
+      padding: 4px 4px 4px 12px;
+    }
+    .url-bar-text {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .url-bar-open-tab {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      border-radius: var(--harmony-radius-sm);
+      background: transparent;
+      color: var(--harmony-text-muted);
+      cursor: pointer;
+      transition: color 0.12s ease, background 0.12s ease;
+    }
+    .url-bar-open-tab:hover:not(:disabled) {
+      color: var(--harmony-text);
+      background: var(--harmony-bg-hover);
+    }
+    .url-bar-open-tab:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    .url-bar-open-tab:focus-visible {
+      outline: 2px solid var(--harmony-primary);
+      outline-offset: 1px;
+    }
+    .url-bar-open-tab .harmony-routes-panel-open-tab-icon {
+      width: 24px;
+      height: 24px;
     }
 
     .preview-loading { font-size: 13px; color: var(--harmony-text-muted); }
@@ -1298,6 +1378,19 @@
     .visual-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
     .visual-attachment-remove-file { background: transparent; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
     .visual-attachment-remove-file:hover { color: var(--harmony-danger); }
+    .visual-attachment-chip-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+      flex-shrink: 0;
+    }
+    .visual-attachment-number {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--harmony-primary);
+      line-height: 1;
+    }
     .file-input-hidden { display: none; }
     .visual-error { font-size: 12px; color: var(--harmony-danger); }
     .visual-submit-error { font-size: 12px; color: var(--harmony-danger); margin: 0; padding: 0 2px; }
@@ -2424,6 +2517,71 @@
       color: var(--harmony-text);
       border-bottom-color: var(--harmony-primary);
     }
+    .add-page-tab--generating {
+      color: var(--harmony-primary);
+    }
+    .add-page-brief-generating-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      background: rgba(255, 255, 255, 0.78);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+      border-radius: var(--harmony-radius-sm);
+      pointer-events: auto;
+    }
+    .add-page-brief-generating-overlay .add-page-hint {
+      margin: 0;
+      font-size: 13px;
+      color: var(--harmony-text-secondary);
+    }
+    .add-page-brief-generating-stop {
+      flex: 0;
+      padding: 4px 12px;
+      font-size: 12px;
+    }
+    .add-page-textarea:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+    .add-page-discard-confirm-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 30;
+      background: rgba(22, 45, 61, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    .add-page-discard-confirm-dialog {
+      background: var(--harmony-bg-surface);
+      border: 1px solid var(--harmony-border);
+      border-radius: var(--harmony-radius-lg);
+      width: min(400px, 100%);
+      padding: 20px 24px;
+      box-shadow: var(--harmony-shadow-lg);
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .add-page-discard-confirm-msg {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.45;
+      color: var(--harmony-text);
+    }
+    .add-page-discard-confirm-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
     .add-page-tab-panel {
       display: flex;
       flex-direction: column;
@@ -2461,6 +2619,9 @@
     .asset-mention-autocomplete[hidden] {
       display: none !important;
     }
+    .asset-mention-autocomplete--above {
+      transform: translateY(-100%);
+    }
     .asset-mention-header {
       display: flex;
       align-items: center;
@@ -2689,12 +2850,28 @@
       padding: 24px;
       box-sizing: border-box;
     }
+    .add-page-brief-fill-popover-stack {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      width: min(420px, 100%);
+      max-height: 90%;
+    }
+    .add-page-brief-fill-stop-confirm {
+      align-self: center;
+      max-width: 100%;
+      white-space: normal;
+      text-align: center;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
     .add-page-brief-fill-panel {
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
       border-radius: var(--harmony-radius-md);
-      width: min(420px, 100%);
-      max-height: 90%;
+      width: 100%;
+      max-height: 100%;
       overflow: auto;
       padding: 14px 16px;
       display: flex;
@@ -2858,6 +3035,11 @@
     .add-page-dropzone .add-page-btn--compact {
       flex: 0 0 auto;
     }
+    .add-page-dropzone--disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
     .add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
     .add-page-chip {
       display: flex;
@@ -3772,6 +3954,7 @@ data:
       isSelected: boolean
       checkGlyph: string
       cssClass: string
+      rowCssClass: string
     showPagesPanelEmptySearch: boolean
     showInstanceSwitcher: boolean
     showInstanceSwitcherMenu: boolean
@@ -3997,6 +4180,7 @@ data:
     showAssetMentionPanel: boolean
     assetMentionLeft: number
     assetMentionTop: number
+    assetMentionOpensAbove: boolean
     assetMentionHeaderTitle: string
     showAssetMentionHeaderBack: boolean
     showAssetMentionSearchField: boolean
@@ -4017,6 +4201,7 @@ data:
     toastMessage: string
     isPreviewMode: boolean
     previewUrlBar: string
+    previewUrlBarOpenTabDisabled: boolean
     previewLoading: boolean
     previewError: string
     selectedPreviewPath: string
@@ -4083,6 +4268,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4119,11 +4305,13 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
     recordingDraftAttachmentChips:
     - key: string
       name: string
       thumbUrl: string
       annotationId: string
+      numberLabel: string
     showRecordingDraftPopover: boolean
     showVisualAnnotationsPanel: boolean
     showVisualSubmitError: boolean
@@ -4185,6 +4373,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4272,6 +4461,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4396,12 +4586,24 @@ data:
     briefFillContextNotes: string
     briefFillPopoverError: string
     showBriefFillPopoverError: boolean
-    briefFillDisabled: boolean
+    briefFillContentDisabled: boolean
+    briefFillDesignDisabled: boolean
     briefFillInputDisabled: boolean
     briefFillDropzoneClass: string
     addPageBriefFillGenerateDisabled: boolean
-    briefFillStatusHint: string
-    showBriefFillStatusHint: boolean
+    contentTabGeneratingHint: string
+    designTabGeneratingHint: string
+    showContentTabGeneratingHint: boolean
+    showDesignTabGeneratingHint: boolean
+    contentGenError: string
+    designGenError: string
+    showContentTabGenError: boolean
+    showDesignTabGenError: boolean
+    addPageContentMdDisabled: boolean
+    addPageDesignMdDisabled: boolean
+    addPageReferencesDisabled: boolean
+    addPageReferencesDropzoneClass: string
+    showAddPageDiscardConfirm: boolean
     showBriefFillThumbnails: boolean
     addPageBriefFillThumbRows:
     - rowKey: string
@@ -4495,17 +4697,31 @@ data:
       </div>
       <div class="harmony-routes-panel-body">
         <p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes match your search.</p>
-        <button
-          type="button"
+        <div
           forEach="filteredPageRouteRows"
           trackBy="url"
-          class="{cssClass}"
-          data-route-url="{url}"
-          data-routes-panel-route=""
+          class="{rowCssClass}"
         >
-          <span class="harmony-routes-panel-check">{checkGlyph}</span>
-          <span class="harmony-routes-panel-item-label">{label}</span>
-        </button>
+          <button
+            type="button"
+            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>
+          <button
+            type="button"
+            class="harmony-routes-panel-open-tab"
+            data-route-url="{url}"
+            data-routes-panel-open-tab=""
+            aria-label="Open route in new tab"
+            title="Open in new tab"
+          >
+            <span class="harmony-routes-panel-open-tab-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 5C11.6642 5 12 5.33579 12 5.75C12 6.16421 11.6642 6.5 11.25 6.5H7C6.72421 6.5 6.5 6.72421 6.5 7V17C6.5 17.2758 6.72421 17.5 7 17.5H17C17.2758 17.5 17.5 17.2758 17.5 17V12.75C17.5 12.3358 17.8358 12 18.25 12C18.6642 12 19 12.3358 19 12.75V17C19 18.1042 18.1042 19 17 19H7C5.89579 19 5 18.1042 5 17V7C5 5.89579 5.89579 5 7 5H11.25Z" fill="currentColor"/><path d="M18.25 5C18.6642 5 19 5.33579 19 5.75V9.25C19 9.66421 18.6642 10 18.25 10C17.8358 10 17.5 9.66421 17.5 9.25V7.56055L15.2803 9.78027C14.9874 10.0732 14.5126 10.0732 14.2197 9.78027C13.9268 9.48738 13.9268 9.01262 14.2197 8.71973L16.4395 6.5H14.75C14.3358 6.5 14 6.16421 14 5.75C14 5.33579 14.3358 5 14.75 5H18.25Z" fill="currentColor"/></svg></span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -4607,7 +4823,19 @@ data:
             </button>
           </div>
           <div class="url-bar-wrap harmony-url-bar-wrap">
-            <div class="url-bar">{previewUrlBar}</div>
+            <div class="url-bar">
+              <span class="url-bar-text">{previewUrlBar}</span>
+              <button
+                type="button"
+                class="url-bar-open-tab"
+                ref="previewUrlBarOpenTabBtn"
+                disabled="previewUrlBarOpenTabDisabled"
+                aria-label="Open preview in new tab"
+                title="Open in new tab"
+              >
+                <span class="harmony-routes-panel-open-tab-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 5C11.6642 5 12 5.33579 12 5.75C12 6.16421 11.6642 6.5 11.25 6.5H7C6.72421 6.5 6.5 6.72421 6.5 7V17C6.5 17.2758 6.72421 17.5 7 17.5H17C17.2758 17.5 17.5 17.2758 17.5 17V12.75C17.5 12.3358 17.8358 12 18.25 12C18.6642 12 19 12.3358 19 12.75V17C19 18.1042 18.1042 19 17 19H7C5.89579 19 5 18.1042 5 17V7C5 5.89579 5.89579 5 7 5H11.25Z" fill="currentColor"/><path d="M18.25 5C18.6642 5 19 5.33579 19 5.75V9.25C19 9.66421 18.6642 10 18.25 10C17.8358 10 17.5 9.66421 17.5 9.25V7.56055L15.2803 9.78027C14.9874 10.0732 14.5126 10.0732 14.2197 9.78027C13.9268 9.48738 13.9268 9.01262 14.2197 8.71973L16.4395 6.5H14.75C14.3358 6.5 14 6.16421 14 5.75C14 5.33579 14.3358 5 14.75 5H18.25Z" fill="currentColor"/></svg></span>
+              </button>
+            </div>
           </div>
           <div class="canvas-chrome-right harmony-breakpoint-tools" if="showVisualToolbar">
             <button type="button" class="{breakpointDesktopOn ? visual-tool-on} visual-tool-btn" ref="breakpointDesktopBtn" title="Desktop (1280px)"><svg width="16" height="13" viewBox="0 0 16 13" fill="none"><rect x="0.7" y="0.7" width="14.6" height="9.1" rx="1.1" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 9.8v2M10.5 9.8v2M3.5 11.8h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
@@ -4687,13 +4915,16 @@ data:
                 <div class="visual-attachment-chip">
                   <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
                   <span class="visual-attachment-name">{name}</span>
-                  <button
-                    type="button"
-                    class="visual-attachment-remove-file"
-                    data-annotation-id="{annotationId}"
-                    data-att-key="{key}"
-                    aria-label="Remove attachment"
-                  >×</button>
+                  <div class="visual-attachment-chip-actions">
+                    <button
+                      type="button"
+                      class="visual-attachment-remove-file"
+                      data-annotation-id="{annotationId}"
+                      data-att-key="{key}"
+                      aria-label="Remove attachment"
+                    >×</button>
+                    <span class="visual-attachment-number">{numberLabel}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -4734,13 +4965,16 @@ data:
                 <div class="visual-attachment-chip">
                   <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
                   <span class="visual-attachment-name">{name}</span>
-                  <button
-                    type="button"
-                    class="visual-attachment-remove-file"
-                    data-annotation-id="{annotationId}"
-                    data-att-key="{key}"
-                    aria-label="Remove attachment"
-                  >×</button>
+                  <div class="visual-attachment-chip-actions">
+                    <button
+                      type="button"
+                      class="visual-attachment-remove-file"
+                      data-annotation-id="{annotationId}"
+                      data-att-key="{key}"
+                      aria-label="Remove attachment"
+                    >×</button>
+                    <span class="visual-attachment-number">{numberLabel}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -5012,9 +5246,14 @@ data:
               <div class="add-page-section-label">Content</div>
               <p class="add-page-hint">Behavior, plugins, contracts, interactions, copy.</p>
               <div class="add-page-textarea-wrap">
-                <textarea class="add-page-textarea" ref="addPageContentMd" placeholder="# Pricing page&#10;- Headless: none (static marketing page)&#10;- Show 3 tiers: Starter / Pro / Enterprise" value="{addPageContentMd}"></textarea>
-                <button type="button" class="add-page-fill-image-btn" ref="addPageFillContentFromImageBtn" title="Fill content from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill content from images" disabled="briefFillDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
+                <textarea class="add-page-textarea" ref="addPageContentMd" placeholder="# Pricing page&#10;- Headless: none (static marketing page)&#10;- Show 3 tiers: Starter / Pro / Enterprise" value="{addPageContentMd}" disabled="addPageContentMdDisabled"></textarea>
+                <div class="add-page-brief-generating-overlay" if="showContentTabGeneratingHint">
+                  <p class="add-page-hint">{contentTabGeneratingHint}</p>
+                  <button type="button" class="add-page-btn add-page-btn-cancel add-page-brief-generating-stop" ref="addPageBriefFillStopContentBtn">Stop</button>
+                </div>
+                <button type="button" class="add-page-fill-image-btn" ref="addPageFillContentFromImageBtn" title="Fill content from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill content from images" disabled="briefFillContentDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
               </div>
+              <p class="add-page-field-error" if="showContentTabGenError">{contentGenError}</p>
             </div>
           </section>
           <section class="add-page-tab-panel" if="showAddPageDesignTab" role="tabpanel">
@@ -5022,21 +5261,26 @@ data:
               <div class="add-page-section-label">Design</div>
               <p class="add-page-hint">Layout, colors, typography, breakpoints.</p>
               <div class="add-page-textarea-wrap">
-                <textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home&#10;- Hero: centered H1, muted subtitle (#888)" value="{addPageDesignMd}"></textarea>
-                <button type="button" class="add-page-fill-image-btn" ref="addPageFillDesignFromImageBtn" title="Fill design from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill design from images" disabled="briefFillDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
+                <textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home&#10;- Hero: centered H1, muted subtitle (#888)" value="{addPageDesignMd}" disabled="addPageDesignMdDisabled"></textarea>
+                <div class="add-page-brief-generating-overlay" if="showDesignTabGeneratingHint">
+                  <p class="add-page-hint">{designTabGeneratingHint}</p>
+                  <button type="button" class="add-page-btn add-page-btn-cancel add-page-brief-generating-stop" ref="addPageBriefFillStopDesignBtn">Stop</button>
+                </div>
+                <button type="button" class="add-page-fill-image-btn" ref="addPageFillDesignFromImageBtn" title="Fill design from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill design from images" disabled="briefFillDesignDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
               </div>
+              <p class="add-page-field-error" if="showDesignTabGenError">{designGenError}</p>
               <p class="add-page-hint" if="addPageShowDesignHint">Add a mock or screenshot for better layout fidelity.</p>
             </div>
           </section>
           <section class="add-page-references">
             <div class="add-page-references-row">
-              <div class="add-page-dropzone" ref="addPageReferenceDrop">
+              <div class="{addPageReferencesDropzoneClass}" ref="addPageReferenceDrop">
                 <span class="add-page-dropzone-text">Drop <strong>REFERENCES</strong> files here</span>
                 <span class="add-page-dropzone-separator">or</span>
-                <button type="button" class="add-page-btn add-page-btn-cancel add-page-btn--compact" ref="addPageAttachReferenceBtn">Upload from Computer</button>
+                <button type="button" class="add-page-btn add-page-btn-cancel add-page-btn--compact" ref="addPageAttachReferenceBtn" disabled="addPageReferencesDisabled">Upload from Computer</button>
               </div>
             </div>
-            <input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple />
+            <input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple disabled="addPageReferencesDisabled" />
             <p class="add-page-hint" if="showAddPageUploadHint">{addPageUploadHint}</p>
             <div class="add-page-chips" ref="addPageAttachmentsList" if="showAddPageAttachments">
               <div class="add-page-chip" forEach="addPageAttachmentRows" trackBy="rowKey">
@@ -5060,28 +5304,38 @@ data:
       <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageCreateBtn" disabled="addPageCreateDisabled">Create page</button>
     </div>
     <div class="add-page-brief-fill-popover" if="showBriefFillPopover" ref="addPageBriefFillPopover">
-      <div class="add-page-brief-fill-panel">
-        <div class="add-page-brief-fill-header">
-          <span class="add-page-brief-fill-title">Fill from image</span>
-          <button type="button" class="add-page-close" ref="addPageBriefFillCloseBtn" aria-label="Close">×</button>
-        </div>
-        <p class="add-page-hint">Add at least one screenshot. Optional notes help the AI (e.g. Image 1 = desktop, Image 2 = mobile).</p>
-        <label class="add-page-hint">Context notes
-          <textarea class="add-page-brief-fill-context" ref="addPageBriefFillContextNotes" placeholder="Route: /pricing&#10;Match header from home&#10;Image 2 = mobile frame" value="{briefFillContextNotes}" disabled="briefFillInputDisabled"></textarea>
-        </label>
-        <div class="{briefFillDropzoneClass}" ref="addPageBriefFillDropzone" tabindex="0">Paste (⌘V), drag-drop, or click to upload (max 5 images)</div>
-        <input type="file" class="add-page-hidden-file" ref="addPageBriefFillFileInput" accept="image/*" multiple disabled="briefFillInputDisabled" />
-        <div class="add-page-brief-fill-thumbs" ref="addPageBriefFillThumbnails" if="showBriefFillThumbnails">
-          <div class="add-page-brief-fill-thumb" forEach="addPageBriefFillThumbRows" trackBy="rowKey">
-            <img src="{thumbUrl}" alt="{name}" />
-            <button type="button" class="add-page-brief-fill-thumb-remove" data-brief-fill-remove="{index}" disabled="removeDisabled">×</button>
+      <div class="add-page-brief-fill-popover-stack">
+        <div class="add-page-brief-fill-panel">
+          <div class="add-page-brief-fill-header">
+            <span class="add-page-brief-fill-title">Fill from image</span>
+            <button type="button" class="add-page-close" ref="addPageBriefFillCloseBtn" aria-label="Close">×</button>
+          </div>
+          <p class="add-page-hint">Add at least one screenshot. Optional notes help the AI (e.g. Image 1 = desktop, Image 2 = mobile).</p>
+          <label class="add-page-hint">Context notes
+            <textarea class="add-page-brief-fill-context" ref="addPageBriefFillContextNotes" placeholder="Route: /pricing&#10;Match header from home&#10;Image 2 = mobile frame" value="{briefFillContextNotes}" disabled="briefFillInputDisabled"></textarea>
+          </label>
+          <div class="{briefFillDropzoneClass}" ref="addPageBriefFillDropzone" tabindex="0">Paste (⌘V), drag-drop, or click to upload (max 5 images)</div>
+          <input type="file" class="add-page-hidden-file" ref="addPageBriefFillFileInput" accept="image/*" multiple disabled="briefFillInputDisabled" />
+          <div class="add-page-brief-fill-thumbs" ref="addPageBriefFillThumbnails" if="showBriefFillThumbnails">
+            <div class="add-page-brief-fill-thumb" forEach="addPageBriefFillThumbRows" trackBy="rowKey">
+              <img src="{thumbUrl}" alt="{name}" />
+              <button type="button" class="add-page-brief-fill-thumb-remove" data-brief-fill-remove="{index}" disabled="removeDisabled">×</button>
+            </div>
+          </div>
+          <p class="add-page-field-error" if="showBriefFillPopoverError">{briefFillPopoverError}</p>
+          <div class="add-page-brief-fill-actions">
+            <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageBriefFillCancelBtn">Cancel</button>
+            <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageBriefFillGenerateBtn" disabled="addPageBriefFillGenerateDisabled" style="flex:0">Generate</button>
           </div>
         </div>
-        <p class="add-page-field-error" if="showBriefFillPopoverError">{briefFillPopoverError}</p>
-        <p class="add-page-hint" if="showBriefFillStatusHint">{briefFillStatusHint}</p>
-        <div class="add-page-brief-fill-actions">
-          <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageBriefFillCancelBtn">Cancel</button>
-          <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageBriefFillGenerateBtn" disabled="addPageBriefFillGenerateDisabled" style="flex:0">Generate</button>
+      </div>
+    </div>
+    <div class="add-page-discard-confirm-overlay" if="showAddPageDiscardConfirm" ref="addPageDiscardConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm discard Add Page draft">
+      <div class="add-page-discard-confirm-dialog">
+        <p class="add-page-discard-confirm-msg">Discard Add Page draft? Unsaved content, design notes, and attachments will be lost.</p>
+        <div class="add-page-discard-confirm-actions">
+          <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageDiscardDismissBtn">Keep editing</button>
+          <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageDiscardConfirmBtn" style="flex:0">Discard</button>
         </div>
       </div>
     </div>
@@ -5185,11 +5439,11 @@ data:
   if="showAddMenuDock"
   ref="addMenuDockPanel"
   role="dialog"
-  aria-label="Add elements"
+  aria-label="+ Add Requests"
   style="left: {addMenuDockLeft}px; top: {addMenuDockTop}px;"
 >
   <div class="add-menu-dock-header" ref="addMenuDockHeader">
-    <span class="add-menu-dock-title">Add Elements</span>
+    <span class="add-menu-dock-title">+ Add Requests</span>
     <button type="button" class="add-menu-picker-close" ref="addMenuDockCloseBtn" aria-label="Close">×</button>
   </div>
   <p class="add-menu-dock-subhint">Drag elements onto the page preview to place them. Click reference items to add @mentions when a marker is focused.</p>
@@ -5243,7 +5497,7 @@ data:
 <div class="aiditor-toast" if="showToastMessage" role="status" aria-live="polite">{toastMessage}</div>
 
 <div
-  class="asset-mention-autocomplete"
+  class="{assetMentionOpensAbove ? asset-mention-autocomplete--above} asset-mention-autocomplete"
   if="showAssetMentionPanel"
   ref="assetMentionPanel"
   role="listbox"
@@ -5499,13 +5753,16 @@ data:
                 <div class="visual-attachment-chip">
                   <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
                   <span class="visual-attachment-name">{name}</span>
-                  <button
-                    type="button"
-                    class="visual-attachment-remove-file"
-                    data-annotation-id="{annotationId}"
-                    data-att-key="{key}"
-                    aria-label="Remove attachment"
-                  >×</button>
+                  <div class="visual-attachment-chip-actions">
+                    <button
+                      type="button"
+                      class="visual-attachment-remove-file"
+                      data-annotation-id="{annotationId}"
+                      data-att-key="{key}"
+                      aria-label="Remove attachment"
+                    >×</button>
+                    <span class="visual-attachment-number">{numberLabel}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -5640,13 +5897,16 @@ data:
               <div class="visual-attachment-chip">
                 <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
                 <span class="visual-attachment-name">{name}</span>
-                <button
-                  type="button"
-                  class="visual-attachment-remove-file"
-                  data-annotation-id="{annotationId}"
-                  data-att-key="{key}"
-                  aria-label="Remove attachment"
-                >×</button>
+                <div class="visual-attachment-chip-actions">
+                  <button
+                    type="button"
+                    class="visual-attachment-remove-file"
+                    data-annotation-id="{annotationId}"
+                    data-att-key="{key}"
+                    aria-label="Remove attachment"
+                  >×</button>
+                  <span class="visual-attachment-number">{numberLabel}</span>
+                </div>
               </div>
             </div>
           </div>