@jay-framework/aiditor 0.20.0 → 0.22.0

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

@@ -289,7 +289,7 @@
       padding: 5px 8px;
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-pill);
+      border-radius: 8px;
       box-shadow: 0 6px 28px rgba(22, 45, 61, 0.14), 0 2px 6px rgba(22, 45, 61, 0.06);
     }
 
@@ -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; }
@@ -1576,11 +1669,21 @@
       max-height: 94vh;
       display: flex;
       flex-direction: column;
-      gap: 10px;
-      padding: 14px 16px;
+      gap: 24px;
+      padding: 32px 32px;
       overflow: hidden;
       box-shadow: var(--harmony-shadow-lg);
     }
+    .video-review-panel { position: relative; }
+    .video-review-header { align-items: flex-start; padding-right: 28px; }
+    .video-review-panel .harmony-modal-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 1;
+    }
+    .video-review-header, .snapshot-header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+    .snapshot-header { align-items: center; }
     .video-review-body {
       display: flex;
       flex-direction: column;
@@ -1588,23 +1691,25 @@
       min-height: 0;
       flex: 1 1 auto;
     }
-    .video-review-tools {
-      display: inline-flex;
-      flex-wrap: nowrap;
-      gap: 2px;
-      align-items: center;
-      width: fit-content;
-    }
-    .video-review-tools .visual-tool-btn {
-      padding: 7px 8px;
-      min-width: 28px;
-    }
     .video-review-capture-root {
+      position: relative;
       flex: 0 1 auto;
       min-height: 0;
       max-height: min(56vh, 480px);
       overflow: hidden;
     }
+    .video-review-toolbar-wrap {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 12;
+      pointer-events: none;
+    }
+    .video-review-toolbar-wrap > * { pointer-events: auto; }
+    .video-review-toolbar-wrap .annotate-dock {
+      border-radius: 8px;
+    }
     .video-review-capture-root .preview-frame {
       width: 100%;
       height: auto;
@@ -1612,11 +1717,15 @@
       max-height: min(56vh, 480px);
       object-fit: contain;
       display: block;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 8px;
+      box-sizing: border-box;
     }
     .snapshot-panel { width: min(1200px, 96vw); overflow: hidden; }
-    .video-review-header, .snapshot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
     .video-review-title, .snapshot-title { font-size: 15px; font-weight: 600; color: var(--harmony-text); margin: 0; }
-    .video-review-meta { font-size: 12px; color: var(--harmony-text-muted); }
+    .video-review-title { font-size: 20px; }
+    .video-review-subtitle { font-size: 16px; color: var(--harmony-text-secondary); margin: 4px 0 0; line-height: 1.35; }
+    .video-review-time { flex-shrink: 0; font-size: 12px; color: var(--harmony-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
     .snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
     .video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
     .video-play-pause-btn {
@@ -2001,8 +2110,6 @@
       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 {
@@ -2010,8 +2117,8 @@
       flex-direction: column;
       width: 168px;
       flex-shrink: 0;
+      align-self: stretch;
       border-right: 1px solid var(--harmony-border);
-      background: var(--harmony-bg-subtle);
       overflow-y: auto;
       padding: 8px 6px;
       gap: 2px;
@@ -2127,7 +2234,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      margin-bottom: 10px;
+      margin-bottom: 0;
       min-width: 0;
     }
     .add-menu-picker-search-field {
@@ -2135,8 +2242,8 @@
       min-width: 0;
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
+      gap: 6px;
+      padding: 5px 10px;
       border: 1px solid var(--harmony-border);
       border-radius: 999px;
       background: var(--harmony-bg-surface);
@@ -2144,7 +2251,7 @@
     .add-menu-picker-search-icon {
       color: var(--harmony-text-muted);
       font-size: 30px;
-      line-height: 1;
+      line-height: 0;
       flex-shrink: 0;
     }
     .add-menu-picker-search-input {
@@ -2187,14 +2294,137 @@
       padding-top: 0;
     }
     .add-menu-picker-browse-content {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+      display: flex;
+      flex-direction: column;
       gap: 12px;
       overflow-y: auto;
       flex: 1;
       min-height: 0;
-      align-content: start;
-      grid-auto-rows: minmax(152px, auto);
+    }
+    .add-menu-folder-breadcrumb {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+      font-size: 13px;
+      color: var(--harmony-text-secondary, #666);
+      margin-bottom: 4px;
+    }
+    .add-menu-folder-breadcrumb-segment {
+      background: none;
+      border: none;
+      padding: 0;
+      color: var(--harmony-link, #116dff);
+      cursor: pointer;
+      font: inherit;
+    }
+    .add-menu-folder-breadcrumb-segment:hover {
+      text-decoration: underline;
+    }
+    .add-menu-folder-breadcrumb-sep {
+      color: var(--harmony-text-secondary, #666);
+      pointer-events: none;
+    }
+    .add-menu-folder-breadcrumb-current {
+      color: var(--harmony-text-primary, #162d3d);
+      font-weight: 500;
+    }
+    .add-menu-folder-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 6px;
+      margin-bottom: 2px;
+    }
+    .add-menu-folder-card {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: flex-start;
+      gap: 4px;
+      padding: 6px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      cursor: pointer;
+      text-align: center;
+      min-height: 0;
+      min-width: 0;
+      font: inherit;
+      color: inherit;
+    }
+    .add-menu-folder-card:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+    .add-menu-folder-card:active {
+      background: rgba(0, 122, 255, 0.14);
+    }
+    /* viewBox is broken in jay-html (compiler emits viewbox); scale path via transform instead. */
+    .add-menu-folder-card-preview {
+      display: flex;
+      align-items: center;
+    }
+    .add-menu-folder-card-preview svg {
+      display: block;
+      width: 95%;
+      height: 100%;
+    }
+    .add-menu-folder-card-label {
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 1.25;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      width: 100%;
+      text-align: center;
+      color: var(--harmony-text-primary, #162d3d);
+    }
+    .add-menu-folder-card-count {
+      font-size: 10px;
+      line-height: 1.2;
+      color: var(--harmony-text-secondary, #666);
+      text-align: center;
+    }
+    .add-menu-browse-band--small-strip {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 6px;
+    }
+    .add-menu-browse-band--medium-band {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      align-items: stretch;
+    }
+    .add-menu-browse-band--slots-3 {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+      align-items: start;
+    }
+    /* S|M|S — one small per side; avoid 2×2 quad + row stretch (tall narrow cards). */
+    .add-menu-browse-band--slots-3 .add-menu-browse-quad {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+      width: 100%;
+      align-self: start;
+    }
+    .add-menu-browse-slot {
+      min-width: 0;
+    }
+    .add-menu-browse-slot--large {
+      grid-column: 1 / -1;
+    }
+    .add-menu-browse-quad {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      gap: 4px;
+      min-height: 0;
+      aspect-ratio: 1;
+    }
+    .add-menu-picker-browse-block {
+      display: contents;
     }
     .add-menu-picker-browse-row {
       display: contents;
@@ -2206,13 +2436,32 @@
       color: var(--harmony-text-muted);
       text-transform: uppercase;
       letter-spacing: 0.04em;
-      grid-column: 1 / -1;
     }
-    .add-menu-picker-browse-content .add-menu-picker-component-card {
-      width: auto;
+    .add-menu-picker-component-card--size-large .add-menu-picker-component-preview,
+    .add-menu-picker-component-card--size-medium .add-menu-picker-component-preview {
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+      min-height: 0;
+      aspect-ratio: 10 / 7;
+    }
+    .add-menu-picker-component-card--size-large .add-menu-picker-component-preview {
+      aspect-ratio: 20 / 7;
+    }
+    .add-menu-picker-component-card--size-small .add-menu-picker-component-preview {
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+      min-height: 0;
+      aspect-ratio: 1;
+    }
+    .add-menu-picker-browse-content .add-menu-picker-component-card,
+    .add-menu-browse-band--small-strip .add-menu-picker-component-card,
+    .add-menu-browse-band--medium-band .add-menu-picker-component-card {
+      width: 100%;
     }
     .add-menu-picker-component-card {
-      min-height: 72px;
+      min-height: 0;
       overflow: hidden;
       box-sizing: border-box;
     }
@@ -2228,7 +2477,11 @@
       text-align: left;
     }
     .add-menu-picker-component-card--preview {
-      min-height: 152px;
+      min-height: 0;
+    }
+    .add-menu-picker-component-card--size-small.add-menu-picker-component-card--preview {
+      padding: 6px;
+      gap: 4px;
     }
     .add-menu-picker-component-card--info {
       min-height: 72px;
@@ -2246,20 +2499,35 @@
       border-radius: 6px;
       overflow: hidden;
       background: var(--harmony-bg-subtle);
-      border: 1px solid var(--harmony-border);
+    }
+    .add-menu-picker-component-card--preview .add-menu-picker-component-preview {
+      border: none;
     }
     .add-menu-picker-component-thumb {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: cover;
       object-position: center;
-      padding: 6px;
+      padding: 0;
       box-sizing: border-box;
     }
     .add-menu-picker-component-thumb--animated {
       transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
+    .add-menu-picker-component-thumb--gif {
+      object-fit: cover;
+      padding: 0;
+    }
+    .add-menu-picker-component-preview--html {
+      padding: 0;
+      border: none;
+      background: transparent;
+    }
+    .add-menu-picker-component-preview--html > .am-preview {
+      width: 100%;
+      height: 100%;
+    }
   @media (prefers-reduced-motion: no-preference) {
     .add-menu-picker-component-card--preview:hover .add-menu-picker-component-thumb--animated,
     .add-menu-picker-component-card--preview:focus-visible .add-menu-picker-component-thumb--animated {
@@ -2424,6 +2692,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 +2794,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 +3025,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 +3210,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;
@@ -3615,7 +3972,7 @@
     }
     .add-menu-dock-subhint {
       margin: 0;
-      padding: 8px 18px 0;
+      padding: 2px 18px 6px;
       font-size: 12px;
       line-height: 1.35;
       color: var(--harmony-text-secondary);
@@ -3627,7 +3984,7 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      padding: 0 0 12px;
+      padding: 0;
     }
     .add-menu-dock-body .add-menu-picker-browse {
       flex: 1;
@@ -3635,10 +3992,20 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      padding: 0;
+      gap: 0;
+    }
+    .add-menu-dock-body .add-menu-picker-search-row {
+      padding: 0 16px 10px;
+      margin-bottom: 0;
+      border-bottom: 1px solid var(--harmony-border);
+      flex-shrink: 0;
     }
     .add-menu-dock-body .add-menu-picker-browse-layout {
       flex: 1;
       min-height: 0;
+      margin: 0;
+      width: 100%;
     }
     .add-menu-picker-component-card--stage-place { cursor: grab; }
     .add-menu-picker-component-card--stage-place:active { cursor: grabbing; }
@@ -3772,6 +4139,7 @@ data:
       isSelected: boolean
       checkGlyph: string
       cssClass: string
+      rowCssClass: string
     showPagesPanelEmptySearch: boolean
     showInstanceSwitcher: boolean
     showInstanceSwitcherMenu: boolean
@@ -3852,21 +4220,111 @@ data:
       subCategoryCountLabel: string
       isSelected: boolean
       cssClass: string
-    addMenuPickerBrowseRows:
+    addMenuPickerBrowseBlocks:
+    - blockKey: string
+      kind: string
+      showSectionHeader: boolean
+      showBand: boolean
+      sectionLabel: string
+      bandKind: string
+      bandCssClass: string
+      showSmallStrip: boolean
+      showMediumBand: boolean
+      stripCells:
+      - rowKey: string
+        isSectionHeader: boolean
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        showBrowseOnly: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+      bandSlots:
+      - slotKey: string
+        slotKind: string
+        slotCssClass: string
+        showMediumSlot: boolean
+        showLargeSlot: boolean
+        showSmallQuad: boolean
+        rowKey: string
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+        quadRows:
+        - rowKey: string
+          label: string
+          itemId: string
+          isPickable: boolean
+          showPickable: boolean
+          isItemSelected: boolean
+          cardCssClass: string
+          showImage: boolean
+          showGif: boolean
+          showHtmlFragment: boolean
+          imageUrl: string
+          gifUrl: string
+          posterUrl: string
+          previewHtml: html-string
+          showGifAutoplay: boolean
+          showGifPoster: boolean
+          showGifReducedInfoIcon: boolean
+          showThumbnail: boolean
+          showInfoIcon: boolean
+          thumbnailUrl: string
+          isAnimatedThumbnail: boolean
+          thumbCssClass: string
+          browseSize: string
+    showAddMenuPickerBreadcrumb: boolean
+    showAddMenuPickerFolderGrid: boolean
+    showAddMenuPickerEmptyFolder: boolean
+    addMenuPickerBrowseBreadcrumbSegments:
+    - segmentKey: string
+      navKey: string
+      label: string
+      isLast: boolean
+    addMenuPickerBrowseFolderRows:
     - rowKey: string
-      isSectionHeader: boolean
+      navKey: string
+      segment: string
       label: string
-      itemId: string
-      isPickable: boolean
-      showPickable: boolean
-      showBrowseOnly: boolean
-      isItemSelected: boolean
-      cardCssClass: string
-      showThumbnail: boolean
-      showInfoIcon: boolean
-      thumbnailUrl: string
-      isAnimatedThumbnail: boolean
-      thumbCssClass: string
+      itemCountLabel: string
+      totalItemCount: number
     showPageInfoPanel: boolean
     pageInfoPanelLeft: number
     pageInfoPanelTop: number
@@ -3977,26 +4435,117 @@ data:
       subCategoryCountLabel: string
       isSelected: boolean
       cssClass: string
-    addMenuDockBrowseRows:
+    addMenuDockBrowseBlocks:
+    - blockKey: string
+      kind: string
+      showSectionHeader: boolean
+      showBand: boolean
+      sectionLabel: string
+      bandKind: string
+      bandCssClass: string
+      showSmallStrip: boolean
+      showMediumBand: boolean
+      stripCells:
+      - rowKey: string
+        isSectionHeader: boolean
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        showBrowseOnly: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+      bandSlots:
+      - slotKey: string
+        slotKind: string
+        slotCssClass: string
+        showMediumSlot: boolean
+        showLargeSlot: boolean
+        showSmallQuad: boolean
+        rowKey: string
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+        quadRows:
+        - rowKey: string
+          label: string
+          itemId: string
+          isPickable: boolean
+          showPickable: boolean
+          isItemSelected: boolean
+          cardCssClass: string
+          showImage: boolean
+          showGif: boolean
+          showHtmlFragment: boolean
+          imageUrl: string
+          gifUrl: string
+          posterUrl: string
+          previewHtml: html-string
+          showGifAutoplay: boolean
+          showGifPoster: boolean
+          showGifReducedInfoIcon: boolean
+          showThumbnail: boolean
+          showInfoIcon: boolean
+          thumbnailUrl: string
+          isAnimatedThumbnail: boolean
+          thumbCssClass: string
+          browseSize: string
+    showAddMenuDockBreadcrumb: boolean
+    showAddMenuDockFolderGrid: boolean
+    showAddMenuDockEmptyFolder: boolean
+    addMenuDockBrowseBreadcrumbSegments:
+    - segmentKey: string
+      navKey: string
+      label: string
+      isLast: boolean
+    addMenuDockBrowseFolderRows:
     - rowKey: string
-      isSectionHeader: boolean
+      navKey: string
+      segment: string
       label: string
-      itemId: string
-      isPickable: boolean
-      showPickable: boolean
-      showBrowseOnly: boolean
-      isItemSelected: boolean
-      cardCssClass: string
-      showThumbnail: boolean
-      showInfoIcon: boolean
-      thumbnailUrl: string
-      isAnimatedThumbnail: boolean
-      thumbCssClass: string
+      itemCountLabel: string
+      totalItemCount: number
     showAddMenuDockSearchMode: boolean
     addMenuDockSearchSummary: string
     showAssetMentionPanel: boolean
     assetMentionLeft: number
     assetMentionTop: number
+    assetMentionOpensAbove: boolean
     assetMentionHeaderTitle: string
     showAssetMentionHeaderBack: boolean
     showAssetMentionSearchField: boolean
@@ -4017,6 +4566,7 @@ data:
     toastMessage: string
     isPreviewMode: boolean
     previewUrlBar: string
+    previewUrlBarOpenTabDisabled: boolean
     previewLoading: boolean
     previewError: string
     selectedPreviewPath: string
@@ -4083,6 +4633,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4119,11 +4670,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 +4738,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4272,6 +4826,7 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+        numberLabel: string
       addMenuSectionOpen: boolean
       showAddMenuControls: boolean
       showMarkerAddMenuChips: boolean
@@ -4396,12 +4951,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 +5062,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 +5188,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 +5280,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 +5330,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 +5611,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 +5626,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 +5669,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,14 +5804,14 @@ 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>
+  <p class="add-menu-dock-subhint">Browse ready change requests from your plugins. Drag one onto the page preview to mark where it should apply, or click a reference item to @mention it in your instruction.</p>
   <div class="add-menu-dock-body">
     <p class="add-menu-picker-hint" if="showAddMenuDockLoading">Loading catalog…</p>
     <p class="add-menu-picker-hint" if="showAddMenuDockEmpty">No catalog items — install plugins and run setup.</p>
@@ -5222,17 +5841,44 @@ data:
               <button type="button" class="{cssClass}" forEach="addMenuDockSubCategoryFilterRows" trackBy="rowKey" data-add-menu-dock-subcategory="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showSubCategoryCount">{subCategoryCountLabel}</span></button>
             </div>
           </div>
-          <div class="add-menu-picker-browse-content" if="showAddMenuDockComponents">
-            <div class="add-menu-picker-browse-row" forEach="addMenuDockBrowseRows" trackBy="rowKey">
-              <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
-              <button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showThumbnail"><img class="{thumbCssClass}" src="{thumbnailUrl}" alt="" /></span><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><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 class="add-menu-picker-browse-content" if="showAddMenuDockComponents" ref="addMenuDockBrowseContent">
+            <nav class="add-menu-folder-breadcrumb" if="showAddMenuDockBreadcrumb" aria-label="Folder path">
+              <span forEach="addMenuDockBrowseBreadcrumbSegments" trackBy="segmentKey">
+                <button type="button" class="add-menu-folder-breadcrumb-segment" if="!isLast" data-add-menu-dock-breadcrumb="1" data-nav-key="{navKey}">{label}</button>
+                <span class="add-menu-folder-breadcrumb-sep" if="!isLast">›</span>
+                <span class="add-menu-folder-breadcrumb-current" if="isLast">{label}</span>
+              </span>
+            </nav>
+            <div class="add-menu-folder-grid" if="showAddMenuDockFolderGrid">
+              <button type="button" class="add-menu-folder-card" forEach="addMenuDockBrowseFolderRows" trackBy="rowKey" data-add-menu-dock-folder-nav="1" data-nav-key="{navKey}" title="{label} ({itemCountLabel})">
+                <span class="add-menu-folder-card-preview" aria-hidden="true"><svg width="52" height="52" fill="none" xmlns="http://www.w3.org/2000/svg"><path transform="translate(-1,2) translate(-4.5,-5.5) scale(4)" d="M8.69043 6C9.30186 6.00015 9.86718 6.31743 10.1836 6.84473L10.8828 8.00098H16.2402C17.2043 8.0011 17.9902 8.78684 17.9902 9.75098V17.1914C17.9953 17.2112 18 17.2307 18 17.251C17.9997 17.665 17.6641 18.001 17.25 18.001H6.75C5.78595 18.001 5.00027 17.215 5 16.251V7.75098C5 6.78676 5.78579 6 6.75 6H8.69043Z" fill="#5aa8f0"/></svg></span>
+                <span class="add-menu-folder-card-label">{label}</span>
+                <span class="add-menu-folder-card-count">{itemCountLabel}</span>
+              </button>
+            </div>
+            <div class="add-menu-picker-browse-block" forEach="addMenuDockBrowseBlocks" trackBy="blockKey">
+              <h3 class="add-menu-picker-section-title" if="showSectionHeader">{sectionLabel}</h3>
+              <div if="showBand" class="{bandCssClass}">
+                <div forEach="stripCells" trackBy="rowKey">
+                  <button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                </div>
+                <div forEach="bandSlots" trackBy="slotKey" class="{slotCssClass}">
+                  <button type="button" class="{cardCssClass}" if="showMediumSlot" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  <button type="button" class="{cardCssClass}" if="showLargeSlot" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  <div class="add-menu-browse-quad" if="showSmallQuad">
+                    <div forEach="quadRows" trackBy="rowKey">
+                      <button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="add-menu-picker-load-more-row" if="showAddMenuDockLoadMore">
               <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-dock-load-more="1">{addMenuDockLoadMoreLabel}</button>
             </div>
           </div>
           <p class="add-menu-picker-hint" if="showAddMenuDockNoComponents">No components in this group.</p>
+          <p class="add-menu-picker-hint" if="showAddMenuDockEmptyFolder">No items in this folder.</p>
           <p class="add-menu-picker-hint" if="showAddMenuDockNoSearchResults">No elements match your search.</p>
         </div>
       </div>
@@ -5243,7 +5889,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"
@@ -5354,17 +6000,44 @@ data:
               </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="{cardCssClass}" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showThumbnail"><img class="{thumbCssClass}" src="{thumbnailUrl}" alt="" /></span><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><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 class="add-menu-picker-browse-content" if="showAddMenuPickerComponents" ref="addMenuPickerBrowseContent">
+              <nav class="add-menu-folder-breadcrumb" if="showAddMenuPickerBreadcrumb" aria-label="Folder path">
+                <span forEach="addMenuPickerBrowseBreadcrumbSegments" trackBy="segmentKey">
+                  <button type="button" class="add-menu-folder-breadcrumb-segment" if="!isLast" data-add-menu-picker-breadcrumb="1" data-nav-key="{navKey}">{label}</button>
+                  <span class="add-menu-folder-breadcrumb-sep" if="!isLast">›</span>
+                  <span class="add-menu-folder-breadcrumb-current" if="isLast">{label}</span>
+                </span>
+              </nav>
+              <div class="add-menu-folder-grid" if="showAddMenuPickerFolderGrid">
+                <button type="button" class="add-menu-folder-card" forEach="addMenuPickerBrowseFolderRows" trackBy="rowKey" data-add-menu-picker-folder-nav="1" data-nav-key="{navKey}" title="{label} ({itemCountLabel})">
+                  <span class="add-menu-folder-card-preview" aria-hidden="true"><svg width="52" height="52" fill="none" xmlns="http://www.w3.org/2000/svg"><path transform="translate(-1,2) translate(-4.5,-5.5) scale(4)" d="M8.69043 6C9.30186 6.00015 9.86718 6.31743 10.1836 6.84473L10.8828 8.00098H16.2402C17.2043 8.0011 17.9902 8.78684 17.9902 9.75098V17.1914C17.9953 17.2112 18 17.2307 18 17.251C17.9997 17.665 17.6641 18.001 17.25 18.001H6.75C5.78595 18.001 5.00027 17.215 5 16.251V7.75098C5 6.78676 5.78579 6 6.75 6H8.69043Z" fill="#5aa8f0"/></svg></span>
+                  <span class="add-menu-folder-card-label">{label}</span>
+                  <span class="add-menu-folder-card-count">{itemCountLabel}</span>
+                </button>
+              </div>
+              <div class="add-menu-picker-browse-block" forEach="addMenuPickerBrowseBlocks" trackBy="blockKey">
+                <h3 class="add-menu-picker-section-title" if="showSectionHeader">{sectionLabel}</h3>
+                <div if="showBand" class="{bandCssClass}">
+                  <div forEach="stripCells" trackBy="rowKey">
+                    <button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  </div>
+                  <div forEach="bandSlots" trackBy="slotKey" class="{slotCssClass}">
+                    <button type="button" class="{cardCssClass}" if="showMediumSlot" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    <button type="button" class="{cardCssClass}" if="showLargeSlot" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    <div class="add-menu-browse-quad" if="showSmallQuad">
+                      <div forEach="quadRows" trackBy="rowKey">
+                        <button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div class="add-menu-picker-load-more-row" if="showAddMenuPickerLoadMore">
                 <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-picker-load-more="1">{addMenuPickerLoadMoreLabel}</button>
               </div>
             </div>
             <p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
+            <p class="add-menu-picker-hint" if="showAddMenuPickerEmptyFolder">No items in this folder.</p>
             <p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
           </div>
         </div>
@@ -5405,7 +6078,7 @@ data:
     <div class="video-review-header">
       <div>
         <h2 class="video-review-title">Review recording</h2>
-        <p class="video-review-meta" if="videoReviewReady">{videoTimeLabel}</p>
+        <p class="video-review-subtitle">Pause, mark spots on the frame, and add a short comment for each.</p>
       </div>
       <button type="button" class="harmony-modal-close" ref="videoReviewCloseBtn" aria-label="Close"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M11.0214 0.219132C10.7292 -0.0730476 10.2555 -0.0730476 9.96334 0.219132L5.69238 4.49009L1.42142 0.219132C1.12924 -0.0730477 0.655524 -0.0730475 0.363345 0.219132C0.0743381 0.508139 0.0707425 0.97559 0.355269 1.26901L4.64238 5.69009L0.217383 10.1151C-0.0725663 10.405 -0.0725667 10.8751 0.217383 11.1651C0.507332 11.455 0.977433 11.455 1.26738 11.1651L5.69238 6.74009L10.1174 11.1651C10.4073 11.455 10.8774 11.455 11.1674 11.1651C11.4573 10.8751 11.4573 10.405 11.1674 10.1151L6.74238 5.69009L11.0295 1.26901C11.314 0.97559 11.3104 0.508138 11.0214 0.219132Z" fill="currentColor"/></svg></button>
     </div>
@@ -5413,12 +6086,14 @@ data:
     <p class="preview-error" if="videoReviewError">{videoReviewErrorText}</p>
     <!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
     <div class="video-review-body" if="videoReviewPreparing || videoReviewReady">
-      <div class="video-review-tools">
-        <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">
+        <div class="video-review-toolbar-wrap">
+          <div class="annotate-dock preview-visual-tools">
+            <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>
+        </div>
         <video
           class="preview-frame"
           ref="videoReviewPlayer"
@@ -5499,13 +6174,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>
@@ -5522,19 +6200,20 @@ data:
       <div class="video-review-transport">
         <button type="button" class="video-play-pause-btn" ref="videoPlayPauseBtn" title="Play or pause" aria-label="Play or pause">{videoPlayPauseGlyph}</button>
         <div class="video-timeline-wrap" ref="videoReviewTimelineWrap">
-        <input type="range" class="video-timeline" ref="videoTimeline" min="0" max="1000" value="0" step="1" />
-        <div class="video-timeline-markers" if="showVideoAnnotationsPanel">
-          <span
-            class="video-timeline-marker"
-            forEach="videoTimelineMarkers"
-            trackBy="key"
-            data-aiditor-timeline-marker=""
-            data-time-sec="{timeSec}"
-            style="left: {leftPct}%;"
-            title="{label}"
-          ></span>
-        </div>
+          <input type="range" class="video-timeline" ref="videoTimeline" min="0" max="1000" value="0" step="1" />
+          <div class="video-timeline-markers" if="showVideoAnnotationsPanel">
+            <span
+              class="video-timeline-marker"
+              forEach="videoTimelineMarkers"
+              trackBy="key"
+              data-aiditor-timeline-marker=""
+              data-time-sec="{timeSec}"
+              style="left: {leftPct}%;"
+              title="{label}"
+            ></span>
+          </div>
         </div>
+        <span class="video-review-time" if="videoReviewReady">{videoTimeLabel}</span>
       </div>
       <p class="visual-submit-error" if="showVideoSubmitError">{videoSubmitError}</p>
       <p class="visual-submit-progress" if="showVideoSubmitProgress">{videoSubmitProgress}</p>
@@ -5640,13 +6319,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>