@jay-framework/aiditor 0.19.7 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -152,6 +152,7 @@
152
152
  flex-direction: column;
153
153
  align-items: center;
154
154
  min-height: 0;
155
+ position: relative;
155
156
  padding: 20px 40px 72px;
156
157
  overflow-x: visible;
157
158
  overflow-y: hidden;
@@ -513,6 +514,135 @@
513
514
  text-align: center;
514
515
  }
515
516
 
517
+ /* Floating instance switcher (Harmony dynamic-page toolbar) */
518
+ .harmony-instance-switcher {
519
+ position: absolute;
520
+ z-index: 55;
521
+ display: flex;
522
+ align-items: stretch;
523
+ max-width: min(420px, calc(100% - 24px));
524
+ background: var(--harmony-bg-surface);
525
+ border: 1px solid var(--harmony-border);
526
+ border-radius: 999px;
527
+ box-shadow: 0 4px 16px rgba(22, 45, 61, 0.12), 0 1px 3px rgba(22, 45, 61, 0.08);
528
+ pointer-events: auto;
529
+ }
530
+ .harmony-instance-switcher-drag {
531
+ flex-shrink: 0;
532
+ display: flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ width: 34px;
536
+ border: none;
537
+ border-right: 1px solid var(--harmony-border);
538
+ border-radius: 999px 0 0 999px;
539
+ background: transparent;
540
+ color: var(--harmony-text-muted);
541
+ cursor: grab;
542
+ padding: 0;
543
+ touch-action: none;
544
+ user-select: none;
545
+ }
546
+ .harmony-instance-switcher-drag:active { cursor: grabbing; }
547
+ .harmony-instance-switcher-drag-dots {
548
+ display: grid;
549
+ grid-template-columns: repeat(2, 4px);
550
+ gap: 3px;
551
+ }
552
+ .harmony-instance-switcher-drag-dots span {
553
+ width: 4px;
554
+ height: 4px;
555
+ border-radius: 50%;
556
+ background: currentColor;
557
+ opacity: 0.55;
558
+ }
559
+ .harmony-instance-switcher-main {
560
+ display: flex;
561
+ align-items: center;
562
+ min-width: 0;
563
+ gap: 10px;
564
+ padding: 8px 12px 8px 10px;
565
+ }
566
+ .harmony-instance-switcher-label {
567
+ flex: 1;
568
+ min-width: 0;
569
+ overflow: hidden;
570
+ text-overflow: ellipsis;
571
+ white-space: nowrap;
572
+ font-size: 13px;
573
+ font-weight: 500;
574
+ color: var(--harmony-text);
575
+ }
576
+ .harmony-instance-switcher-trigger {
577
+ flex-shrink: 0;
578
+ display: inline-flex;
579
+ align-items: center;
580
+ gap: 6px;
581
+ border: none;
582
+ border-radius: 999px;
583
+ background: var(--harmony-bg-subtle, #f4f5f7);
584
+ color: var(--harmony-text-secondary);
585
+ font-size: 12px;
586
+ font-family: var(--harmony-font);
587
+ padding: 5px 10px;
588
+ cursor: pointer;
589
+ white-space: nowrap;
590
+ }
591
+ .harmony-instance-switcher-trigger:hover {
592
+ background: var(--harmony-bg-hover);
593
+ color: var(--harmony-text);
594
+ }
595
+ .harmony-instance-switcher-trigger--open {
596
+ background: var(--harmony-primary-soft);
597
+ color: var(--harmony-primary);
598
+ }
599
+ .harmony-instance-switcher-chevron {
600
+ font-size: 10px;
601
+ line-height: 1;
602
+ }
603
+ .harmony-instance-switcher-menu {
604
+ position: absolute;
605
+ left: 0;
606
+ top: calc(100% + 8px);
607
+ min-width: max(100%, 220px);
608
+ max-width: min(320px, calc(100vw - 48px));
609
+ max-height: 280px;
610
+ overflow-y: auto;
611
+ background: var(--harmony-bg-surface);
612
+ border: 1px solid var(--harmony-border);
613
+ border-radius: var(--harmony-radius-md, 10px);
614
+ box-shadow: var(--harmony-shadow-lg);
615
+ padding: 6px 0;
616
+ }
617
+ .harmony-instance-switcher-menu--above {
618
+ top: auto;
619
+ bottom: calc(100% + 8px);
620
+ }
621
+ .harmony-instance-switcher-item {
622
+ display: block;
623
+ width: 100%;
624
+ box-sizing: border-box;
625
+ border: none;
626
+ background: transparent;
627
+ color: var(--harmony-text);
628
+ font-size: 13px;
629
+ font-family: var(--harmony-font);
630
+ text-align: left;
631
+ padding: 9px 14px;
632
+ cursor: pointer;
633
+ overflow: hidden;
634
+ text-overflow: ellipsis;
635
+ white-space: nowrap;
636
+ }
637
+ .harmony-instance-switcher-item:hover {
638
+ background: var(--harmony-bg-hover);
639
+ }
640
+ .harmony-instance-switcher-item--selected {
641
+ background: var(--harmony-primary-soft);
642
+ color: var(--harmony-primary);
643
+ font-weight: 600;
644
+ }
645
+
516
646
  .aiditor-logo {
517
647
  font-size: 17px;
518
648
  font-weight: 700;
@@ -594,14 +724,17 @@
594
724
  }
595
725
  .harmony-float-rail {
596
726
  position: absolute;
597
- inset: 0;
727
+ top: 16px;
728
+ left: 16px;
598
729
  z-index: 30;
730
+ display: flex;
731
+ flex-direction: column;
732
+ align-items: flex-start;
733
+ gap: 8px;
599
734
  pointer-events: none;
600
735
  }
601
736
  .harmony-add-btn {
602
- position: absolute;
603
- top: 16px;
604
- left: 16px;
737
+ position: static;
605
738
  display: inline-flex;
606
739
  align-items: center;
607
740
  justify-content: center;
@@ -636,6 +769,63 @@
636
769
  inset 0 1px 2px rgba(22, 45, 61, 0.06),
637
770
  0 1px 2px rgba(22, 45, 61, 0.04);
638
771
  }
772
+ .harmony-stage-action-btn {
773
+ width: 40px;
774
+ min-width: 40px;
775
+ height: 40px;
776
+ padding: 0;
777
+ gap: 0;
778
+ overflow: hidden;
779
+ transition:
780
+ width 0.22s ease,
781
+ min-width 0.22s ease,
782
+ padding 0.22s ease,
783
+ gap 0.22s ease,
784
+ background 0.15s ease,
785
+ border-color 0.15s ease,
786
+ box-shadow 0.15s ease;
787
+ }
788
+ .harmony-stage-action-icon {
789
+ display: inline-flex;
790
+ align-items: center;
791
+ justify-content: center;
792
+ flex-shrink: 0;
793
+ width: 40px;
794
+ height: 40px;
795
+ color: var(--harmony-text);
796
+ }
797
+ .harmony-stage-action-icon svg {
798
+ display: block;
799
+ width: 24px;
800
+ height: 24px;
801
+ }
802
+ .harmony-stage-action-label {
803
+ display: inline-block;
804
+ max-width: 0;
805
+ opacity: 0;
806
+ overflow: hidden;
807
+ white-space: nowrap;
808
+ margin-left: 0;
809
+ transition:
810
+ max-width 0.22s ease,
811
+ opacity 0.18s ease,
812
+ margin-left 0.22s ease;
813
+ }
814
+ .harmony-stage-action-btn:hover,
815
+ .harmony-stage-action-btn:focus-visible,
816
+ .harmony-stage-action-btn.harmony-add-btn-open {
817
+ width: auto;
818
+ min-width: 40px;
819
+ padding-right: 14px;
820
+ gap: 2px;
821
+ }
822
+ .harmony-stage-action-btn:hover .harmony-stage-action-label,
823
+ .harmony-stage-action-btn:focus-visible .harmony-stage-action-label,
824
+ .harmony-stage-action-btn.harmony-add-btn-open .harmony-stage-action-label {
825
+ max-width: 12rem;
826
+ opacity: 1;
827
+ margin-left: -4px;
828
+ }
639
829
  .harmony-stage-icon-btn {
640
830
  position: absolute;
641
831
  left: 20px;
@@ -799,6 +989,7 @@
799
989
  flex-direction: column;
800
990
  align-items: center;
801
991
  min-height: 0;
992
+ position: relative;
802
993
  padding: 20px 40px 72px;
803
994
  gap: 10px;
804
995
  overflow-x: visible;
@@ -1387,14 +1578,46 @@
1387
1578
  flex-direction: column;
1388
1579
  gap: 10px;
1389
1580
  padding: 14px 16px;
1390
- overflow: auto;
1581
+ overflow: hidden;
1391
1582
  box-shadow: var(--harmony-shadow-lg);
1392
1583
  }
1584
+ .video-review-body {
1585
+ display: flex;
1586
+ flex-direction: column;
1587
+ gap: 10px;
1588
+ min-height: 0;
1589
+ flex: 1 1 auto;
1590
+ }
1591
+ .video-review-tools {
1592
+ display: inline-flex;
1593
+ flex-wrap: nowrap;
1594
+ gap: 2px;
1595
+ align-items: center;
1596
+ width: fit-content;
1597
+ }
1598
+ .video-review-tools .visual-tool-btn {
1599
+ padding: 7px 8px;
1600
+ min-width: 28px;
1601
+ }
1602
+ .video-review-capture-root {
1603
+ flex: 0 1 auto;
1604
+ min-height: 0;
1605
+ max-height: min(56vh, 480px);
1606
+ overflow: hidden;
1607
+ }
1608
+ .video-review-capture-root .preview-frame {
1609
+ width: 100%;
1610
+ height: auto;
1611
+ min-height: 0;
1612
+ max-height: min(56vh, 480px);
1613
+ object-fit: contain;
1614
+ display: block;
1615
+ }
1393
1616
  .snapshot-panel { width: min(1200px, 96vw); overflow: hidden; }
1394
1617
  .video-review-header, .snapshot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
1395
1618
  .video-review-title, .snapshot-title { font-size: 15px; font-weight: 600; color: var(--harmony-text); margin: 0; }
1396
1619
  .video-review-meta { font-size: 12px; color: var(--harmony-text-muted); }
1397
- .video-review-tools, .snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
1620
+ .snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
1398
1621
  .video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
1399
1622
  .video-play-pause-btn {
1400
1623
  flex-shrink: 0;
@@ -1446,6 +1669,53 @@
1446
1669
  }
1447
1670
  .video-review-primary:hover, .snapshot-primary:hover { background: var(--harmony-primary-hover); }
1448
1671
  .video-review-primary:disabled, .snapshot-primary:disabled { opacity: 0.45; cursor: not-allowed; }
1672
+ .harmony-modal-close {
1673
+ background: none;
1674
+ border: none;
1675
+ color: var(--harmony-text-muted);
1676
+ cursor: pointer;
1677
+ padding: 4px;
1678
+ line-height: 0;
1679
+ display: inline-flex;
1680
+ align-items: center;
1681
+ justify-content: center;
1682
+ border-radius: var(--harmony-radius-sm);
1683
+ flex-shrink: 0;
1684
+ }
1685
+ .harmony-modal-close:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
1686
+ .video-review-close-confirm-overlay {
1687
+ position: fixed;
1688
+ inset: 0;
1689
+ z-index: 380;
1690
+ background: rgba(22, 45, 61, 0.45);
1691
+ display: flex;
1692
+ align-items: center;
1693
+ justify-content: center;
1694
+ padding: 24px;
1695
+ box-sizing: border-box;
1696
+ }
1697
+ .video-review-close-confirm-dialog {
1698
+ background: var(--harmony-bg-surface);
1699
+ border: 1px solid var(--harmony-border);
1700
+ border-radius: var(--harmony-radius-lg);
1701
+ width: min(400px, 100%);
1702
+ padding: 20px 24px;
1703
+ box-shadow: var(--harmony-shadow-lg);
1704
+ display: flex;
1705
+ flex-direction: column;
1706
+ gap: 16px;
1707
+ }
1708
+ .video-review-close-confirm-msg {
1709
+ margin: 0;
1710
+ font-size: 14px;
1711
+ line-height: 1.45;
1712
+ color: var(--harmony-text);
1713
+ }
1714
+ .video-review-close-confirm-actions {
1715
+ display: flex;
1716
+ justify-content: flex-end;
1717
+ gap: 8px;
1718
+ }
1449
1719
  .snapshot-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
1450
1720
  .snapshot-close:hover { color: var(--harmony-text); }
1451
1721
  .snapshot-body { display: flex; gap: 14px; flex: 1; min-height: 0; overflow: hidden; }
@@ -1500,9 +1770,9 @@
1500
1770
  backdrop-filter: blur(14px);
1501
1771
  -webkit-backdrop-filter: blur(14px);
1502
1772
  display: flex;
1503
- align-items: center;
1504
- justify-content: center;
1505
- padding: 40px 48px;
1773
+ align-items: stretch;
1774
+ justify-content: stretch;
1775
+ padding: 16px;
1506
1776
  box-sizing: border-box;
1507
1777
  }
1508
1778
  .project-settings-overlay {
@@ -1542,22 +1812,108 @@
1542
1812
  width: min(720px, 100%);
1543
1813
  max-height: min(85vh, 720px);
1544
1814
  }
1545
- .add-menu-picker-header {
1815
+ .add-menu-picker-overlay--full {
1816
+ padding: 16px;
1817
+ align-items: stretch;
1818
+ justify-content: stretch;
1819
+ background: rgba(255, 255, 255, 0.72);
1820
+ backdrop-filter: blur(14px);
1821
+ -webkit-backdrop-filter: blur(14px);
1822
+ }
1823
+ .add-menu-picker-dismiss-confirm-overlay {
1824
+ position: fixed;
1825
+ inset: 0;
1826
+ z-index: 380;
1827
+ background: rgba(22, 45, 61, 0.45);
1546
1828
  display: flex;
1547
1829
  align-items: center;
1830
+ justify-content: center;
1831
+ padding: 24px;
1832
+ box-sizing: border-box;
1833
+ }
1834
+ .add-menu-picker-dismiss-confirm-dialog {
1835
+ background: var(--harmony-bg-surface);
1836
+ border: 1px solid var(--harmony-border);
1837
+ border-radius: var(--harmony-radius-lg);
1838
+ width: min(400px, 100%);
1839
+ padding: 20px 24px;
1840
+ box-shadow: var(--harmony-shadow-lg);
1841
+ display: flex;
1842
+ flex-direction: column;
1843
+ gap: 16px;
1844
+ }
1845
+ .add-menu-picker-dismiss-confirm-msg {
1846
+ margin: 0;
1847
+ font-size: 14px;
1848
+ line-height: 1.45;
1849
+ color: var(--harmony-text);
1850
+ }
1851
+ .add-menu-picker-dismiss-confirm-actions {
1852
+ display: flex;
1853
+ justify-content: flex-end;
1548
1854
  gap: 8px;
1549
- padding: 14px 16px;
1855
+ }
1856
+ .add-menu-picker-dialog--full {
1857
+ width: 100%;
1858
+ height: 100%;
1859
+ max-height: none;
1860
+ box-shadow:
1861
+ 0 24px 80px rgba(22, 45, 61, 0.16),
1862
+ 0 8px 24px rgba(22, 45, 61, 0.08);
1863
+ }
1864
+ .add-menu-picker-dialog--browse.add-menu-picker-dialog--full {
1865
+ width: 100%;
1866
+ height: 100%;
1867
+ max-height: none;
1868
+ }
1869
+ .add-menu-picker-header {
1870
+ display: flex;
1871
+ align-items: center;
1872
+ gap: 12px;
1873
+ padding: 20px 28px;
1550
1874
  border-bottom: 1px solid var(--harmony-border);
1551
- background: var(--harmony-bg-subtle);
1875
+ flex-shrink: 0;
1876
+ background: var(--harmony-bg-surface);
1552
1877
  }
1553
1878
  .add-menu-picker-title {
1554
1879
  flex: 1;
1555
- font-size: 14px;
1556
- font-weight: 600;
1880
+ font-size: 20px;
1881
+ font-weight: 700;
1557
1882
  color: var(--harmony-text);
1883
+ letter-spacing: -0.02em;
1558
1884
  }
1559
- .add-menu-picker-back,
1885
+ .add-menu-picker-header-back,
1560
1886
  .add-menu-picker-close {
1887
+ background: none;
1888
+ border: none;
1889
+ color: var(--harmony-text-muted);
1890
+ cursor: pointer;
1891
+ line-height: 1;
1892
+ padding: 4px;
1893
+ border-radius: var(--harmony-radius-sm);
1894
+ }
1895
+ .add-menu-picker-header-back {
1896
+ display: inline-flex;
1897
+ align-items: center;
1898
+ justify-content: center;
1899
+ flex-shrink: 0;
1900
+ line-height: 0;
1901
+ overflow: visible;
1902
+ }
1903
+ .add-menu-picker-header-back-icon {
1904
+ display: block;
1905
+ flex-shrink: 0;
1906
+ width: 30px;
1907
+ height: 30px;
1908
+ color: black;
1909
+ }
1910
+ .add-menu-picker-close { font-size: 22px; }
1911
+ .add-menu-picker-header-back:hover,
1912
+ .add-menu-picker-close:hover {
1913
+ color: var(--harmony-text);
1914
+ background: var(--harmony-bg-hover);
1915
+ }
1916
+ .add-menu-picker-back {
1561
1917
  background: none;
1562
1918
  border: none;
1563
1919
  color: var(--harmony-text-muted);
@@ -1566,9 +1922,7 @@
1566
1922
  line-height: 1;
1567
1923
  padding: 4px 6px;
1568
1924
  }
1569
- .add-menu-picker-close { font-size: 20px; }
1570
- .add-menu-picker-back:hover,
1571
- .add-menu-picker-close:hover { color: var(--harmony-text); }
1925
+ .add-menu-picker-back:hover { color: var(--harmony-text); }
1572
1926
  .add-menu-picker-body {
1573
1927
  padding: 12px 16px 16px;
1574
1928
  overflow: auto;
@@ -1789,7 +2143,7 @@
1789
2143
  }
1790
2144
  .add-menu-picker-search-icon {
1791
2145
  color: var(--harmony-text-muted);
1792
- font-size: 14px;
2146
+ font-size: 30px;
1793
2147
  line-height: 1;
1794
2148
  flex-shrink: 0;
1795
2149
  }
@@ -1803,6 +2157,10 @@
1803
2157
  font-size: 13px;
1804
2158
  outline: none;
1805
2159
  }
2160
+ .add-menu-picker-search-input::-webkit-search-cancel-button {
2161
+ -webkit-appearance: none;
2162
+ display: none;
2163
+ }
1806
2164
  .add-menu-picker-search-input::placeholder {
1807
2165
  color: var(--harmony-text-muted);
1808
2166
  }
@@ -1811,10 +2169,10 @@
1811
2169
  background: none;
1812
2170
  border: none;
1813
2171
  color: var(--harmony-text-muted);
1814
- font-size: 16px;
2172
+ font-size: 22px;
1815
2173
  line-height: 1;
1816
2174
  cursor: pointer;
1817
- padding: 0 2px;
2175
+ padding: 0 4px;
1818
2176
  }
1819
2177
  .add-menu-picker-search-clear:hover { color: var(--harmony-text); }
1820
2178
  .add-menu-picker-search-summary {
@@ -1830,12 +2188,13 @@
1830
2188
  }
1831
2189
  .add-menu-picker-browse-content {
1832
2190
  display: grid;
1833
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
1834
- gap: 10px;
2191
+ grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
2192
+ gap: 12px;
1835
2193
  overflow-y: auto;
1836
2194
  flex: 1;
1837
2195
  min-height: 0;
1838
2196
  align-content: start;
2197
+ grid-auto-rows: minmax(152px, auto);
1839
2198
  }
1840
2199
  .add-menu-picker-browse-row {
1841
2200
  display: contents;
@@ -1854,16 +2213,114 @@
1854
2213
  }
1855
2214
  .add-menu-picker-component-card {
1856
2215
  min-height: 72px;
2216
+ overflow: hidden;
2217
+ box-sizing: border-box;
2218
+ }
2219
+ .add-menu-picker-component-card--preview,
2220
+ .add-menu-picker-component-card--info {
2221
+ display: flex;
2222
+ flex-direction: column;
2223
+ align-items: stretch;
2224
+ gap: 6px;
2225
+ padding: 8px;
2226
+ min-height: 0;
2227
+ height: 100%;
2228
+ text-align: left;
2229
+ }
2230
+ .add-menu-picker-component-card--preview {
2231
+ min-height: 152px;
2232
+ }
2233
+ .add-menu-picker-component-card--info {
2234
+ min-height: 72px;
2235
+ justify-content: flex-start;
2236
+ padding: 10px 12px;
2237
+ gap: 0;
2238
+ }
2239
+ .add-menu-picker-component-preview {
2240
+ display: flex;
2241
+ align-items: center;
2242
+ justify-content: center;
2243
+ width: 100%;
2244
+ height: 112px;
2245
+ flex: 0 0 112px;
2246
+ border-radius: 6px;
2247
+ overflow: hidden;
2248
+ background: var(--harmony-bg-subtle);
2249
+ border: 1px solid var(--harmony-border);
2250
+ }
2251
+ .add-menu-picker-component-thumb {
2252
+ display: block;
2253
+ width: 100%;
2254
+ height: 100%;
2255
+ object-fit: contain;
2256
+ object-position: center;
2257
+ padding: 6px;
2258
+ box-sizing: border-box;
2259
+ }
2260
+ .add-menu-picker-component-thumb--animated {
2261
+ transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
2262
+ }
2263
+ @media (prefers-reduced-motion: no-preference) {
2264
+ .add-menu-picker-component-card--preview:hover .add-menu-picker-component-thumb--animated,
2265
+ .add-menu-picker-component-card--preview:focus-visible .add-menu-picker-component-thumb--animated {
2266
+ transform: scale(1.06);
2267
+ }
2268
+ }
2269
+ .add-menu-picker-component-info-icon {
2270
+ display: none;
2271
+ }
2272
+ .add-menu-picker-component-card--preview .add-menu-picker-component-title,
2273
+ .add-menu-picker-component-card--info .add-menu-picker-component-title {
2274
+ width: 100%;
2275
+ flex-shrink: 0;
2276
+ white-space: nowrap;
2277
+ overflow: hidden;
2278
+ text-overflow: ellipsis;
2279
+ line-height: 1.35;
2280
+ font-size: 12px;
1857
2281
  }
1858
2282
  .add-menu-picker-component-card--browse-only {
1859
2283
  opacity: 0.6;
1860
2284
  cursor: default;
1861
2285
  }
2286
+ .add-menu-picker-component-card--selected {
2287
+ border-color: var(--harmony-primary);
2288
+ background: var(--harmony-primary-soft);
2289
+ box-shadow: inset 0 0 0 1px var(--harmony-primary);
2290
+ }
2291
+ .add-menu-picker-category-selected-count {
2292
+ color: var(--harmony-primary);
2293
+ font-weight: 600;
2294
+ }
2295
+ .add-menu-picker-subcategory-selected-count {
2296
+ color: var(--harmony-primary);
2297
+ font-weight: 600;
2298
+ }
2299
+ .add-menu-picker-footer {
2300
+ display: flex;
2301
+ justify-content: flex-end;
2302
+ padding: 12px 16px 16px;
2303
+ border-top: 1px solid var(--harmony-border);
2304
+ flex-shrink: 0;
2305
+ }
2306
+ .add-menu-picker-done-btn {
2307
+ min-width: 120px;
2308
+ }
2309
+ .add-menu-picker-done-btn:disabled {
2310
+ opacity: 0.5;
2311
+ cursor: not-allowed;
2312
+ }
2313
+ .add-menu-picker-load-more-row {
2314
+ display: flex;
2315
+ justify-content: center;
2316
+ padding: 12px 0 4px;
2317
+ grid-column: 1 / -1;
2318
+ }
2319
+ .add-menu-picker-load-more-btn {
2320
+ min-width: 200px;
2321
+ }
1862
2322
  .add-menu-picker-component-title {
1863
2323
  font-weight: 500;
1864
- overflow: hidden;
1865
- text-overflow: ellipsis;
1866
- white-space: nowrap;
1867
2324
  max-width: 100%;
1868
2325
  }
1869
2326
  .project-settings-dialog {
@@ -1889,9 +2346,9 @@
1889
2346
  .project-settings-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
1890
2347
  .project-settings-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
1891
2348
  .add-page-slideover {
1892
- width: min(920px, 100%);
1893
- max-height: min(88vh, 860px);
1894
- height: auto;
2349
+ width: 100%;
2350
+ height: 100%;
2351
+ min-height: 0;
1895
2352
  background: var(--harmony-bg-surface);
1896
2353
  border: 1px solid var(--harmony-border);
1897
2354
  border-radius: var(--harmony-radius-lg);
@@ -1915,390 +2372,1365 @@
1915
2372
  .add-page-title { font-size: 20px; font-weight: 700; color: var(--harmony-text); flex: 1; letter-spacing: -0.02em; }
1916
2373
  .add-page-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; border-radius: var(--harmony-radius-sm); }
1917
2374
  .add-page-close:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
1918
- .add-page-body { flex: 1; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
1919
- .add-page-section-label { font-size: 11px; font-weight: 600; color: var(--harmony-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
1920
- .add-page-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
1921
- .add-page-section-header-row .add-page-section-label { margin-bottom: 0; flex: 1; }
1922
- .add-page-fill-from-image-btn {
1923
- background: var(--harmony-bg-subtle);
1924
- color: var(--harmony-primary);
1925
- border: 1px solid var(--harmony-border);
1926
- border-radius: var(--harmony-radius-sm);
1927
- padding: 4px 10px;
1928
- font-size: 11px;
1929
- font-weight: 600;
1930
- cursor: pointer;
2375
+ .add-page-subheader {
2376
+ display: flex;
1931
2377
  flex-shrink: 0;
2378
+ border-bottom: 1px solid var(--harmony-border);
2379
+ background: var(--harmony-bg-surface);
1932
2380
  }
1933
- .add-page-fill-from-image-btn:hover { background: var(--harmony-primary-soft); }
1934
- .add-page-fill-from-image-btn:disabled { opacity: 0.45; cursor: not-allowed; }
1935
- .add-page-suggested-route {
2381
+ .add-page-layout {
2382
+ flex: 1;
1936
2383
  display: flex;
1937
- flex-wrap: wrap;
1938
- align-items: center;
1939
- gap: 8px;
1940
- background: var(--harmony-bg-subtle);
1941
- border: 1px solid var(--harmony-border);
1942
- border-radius: var(--harmony-radius-sm);
1943
- padding: 8px 10px;
1944
- font-size: 12px;
1945
- color: var(--harmony-text-secondary);
1946
- margin-bottom: 8px;
2384
+ min-height: 0;
2385
+ overflow: hidden;
1947
2386
  }
1948
- .add-page-suggested-route code { font-family: var(--harmony-mono); color: var(--harmony-primary); }
1949
- .add-page-brief-fill-popover {
1950
- position: absolute;
1951
- inset: 0;
1952
- z-index: 10;
1953
- background: rgba(255, 255, 255, 0.6);
1954
- backdrop-filter: blur(8px);
1955
- -webkit-backdrop-filter: blur(8px);
2387
+ .add-page-main {
2388
+ flex: 1;
2389
+ min-width: 0;
1956
2390
  display: flex;
1957
- align-items: center;
1958
- justify-content: center;
1959
- padding: 24px;
1960
- box-sizing: border-box;
2391
+ flex-direction: column;
2392
+ min-height: 0;
1961
2393
  }
1962
- .add-page-brief-fill-panel {
1963
- background: var(--harmony-bg-surface);
1964
- border: 1px solid var(--harmony-border);
1965
- border-radius: var(--harmony-radius-md);
1966
- width: min(420px, 100%);
1967
- max-height: 90%;
2394
+ .add-page-main-scroll {
2395
+ flex: 1;
1968
2396
  overflow: auto;
1969
- padding: 14px 16px;
2397
+ padding: 20px 28px;
1970
2398
  display: flex;
1971
2399
  flex-direction: column;
1972
- gap: 10px;
1973
- box-shadow: var(--harmony-shadow-lg);
2400
+ gap: 20px;
2401
+ min-height: 0;
1974
2402
  }
1975
- .add-page-brief-fill-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1976
- .add-page-brief-fill-title { font-size: 13px; font-weight: 600; color: var(--harmony-text); }
1977
- .add-page-brief-fill-context {
1978
- width: 100%;
1979
- min-height: 64px;
1980
- background: var(--harmony-bg-surface);
1981
- color: var(--harmony-text);
1982
- border: 1px solid var(--harmony-border);
1983
- border-radius: var(--harmony-radius-sm);
1984
- padding: 8px;
1985
- font-size: 12px;
1986
- font-family: var(--harmony-mono);
1987
- resize: vertical;
1988
- box-sizing: border-box;
2403
+ .add-page-tabs {
2404
+ flex: 1;
2405
+ display: flex;
2406
+ gap: 4px;
2407
+ padding: 0 28px;
2408
+ min-width: 0;
1989
2409
  }
1990
- .add-page-brief-fill-dropzone {
1991
- border: 1px dashed var(--harmony-border-strong);
1992
- border-radius: var(--harmony-radius-md);
1993
- padding: 14px;
1994
- text-align: center;
2410
+ .add-page-tab {
2411
+ background: none;
2412
+ border: none;
2413
+ border-bottom: 2px solid transparent;
2414
+ margin-bottom: -1px;
2415
+ padding: 12px 16px;
2416
+ font-size: 13px;
2417
+ font-weight: 600;
1995
2418
  color: var(--harmony-text-muted);
1996
- font-size: 12px;
1997
2419
  cursor: pointer;
2420
+ border-radius: var(--harmony-radius-sm) var(--harmony-radius-sm) 0 0;
1998
2421
  }
1999
- .add-page-brief-fill-dropzone-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
2000
- .add-page-brief-fill-context:disabled { opacity: 0.6; cursor: not-allowed; }
2001
- .add-page-brief-fill-dropzone:focus { outline: none; border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2002
- .add-page-brief-fill-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
2003
- .add-page-brief-fill-thumb {
2004
- position: relative;
2005
- width: 72px;
2006
- height: 72px;
2007
- border-radius: var(--harmony-radius-sm);
2008
- overflow: hidden;
2009
- border: 1px solid var(--harmony-border);
2010
- background: var(--harmony-bg-subtle);
2422
+ .add-page-tab:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
2423
+ .add-page-tab--active {
2424
+ color: var(--harmony-text);
2425
+ border-bottom-color: var(--harmony-primary);
2011
2426
  }
2012
- .add-page-brief-fill-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
2013
- .add-page-brief-fill-thumb-remove {
2014
- position: absolute;
2015
- top: 2px;
2016
- right: 2px;
2017
- background: rgba(22, 45, 61, 0.7);
2018
- color: #fff;
2019
- border: none;
2020
- border-radius: 3px;
2021
- width: 18px;
2022
- height: 18px;
2023
- font-size: 12px;
2024
- line-height: 1;
2025
- cursor: pointer;
2026
- padding: 0;
2427
+ .add-page-tab-panel {
2428
+ display: flex;
2429
+ flex-direction: column;
2430
+ gap: 8px;
2431
+ flex: 1;
2432
+ min-height: 0;
2027
2433
  }
2028
- .add-page-brief-fill-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
2029
- .add-page-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
2030
- .add-page-route-input {
2434
+ .add-page-tab-panel .add-page-textarea {
2031
2435
  flex: 1;
2032
- min-width: 160px;
2033
- background: var(--harmony-bg-surface);
2034
- color: var(--harmony-text);
2035
- border: 1px solid var(--harmony-border);
2036
- border-radius: var(--harmony-radius-sm);
2037
- padding: 8px 10px;
2038
- font-size: 13px;
2039
- font-family: var(--harmony-mono);
2040
- box-sizing: border-box;
2436
+ min-height: 200px;
2041
2437
  }
2042
- .add-page-route-input:focus { border-color: var(--harmony-primary); outline: none; box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2043
- .add-page-route-badge { font-size: 10px; color: var(--harmony-primary); background: var(--harmony-primary-soft); padding: 2px 8px; border-radius: 4px; }
2044
- .add-page-field-error { font-size: 12px; color: var(--harmony-danger); margin-top: 4px; }
2045
- .add-page-hint { font-size: 12px; color: var(--harmony-text-muted); margin-top: 4px; }
2046
- .add-page-textarea {
2047
- width: 100%;
2048
- min-height: 120px;
2049
- background: var(--harmony-bg-surface);
2050
- color: var(--harmony-text);
2051
- border: 1px solid var(--harmony-border);
2052
- border-radius: var(--harmony-radius-sm);
2053
- padding: 10px;
2054
- font-size: 12px;
2055
- font-family: var(--harmony-mono);
2056
- resize: vertical;
2057
- box-sizing: border-box;
2058
- outline: none;
2438
+ .add-page-tab-editor {
2439
+ display: flex;
2440
+ flex-direction: column;
2441
+ gap: 8px;
2442
+ flex: 1;
2443
+ min-height: 0;
2059
2444
  }
2060
- .add-page-textarea:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2061
- .add-page-dropzone {
2062
- border: 1px dashed var(--harmony-border-strong);
2445
+ .add-page-references { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
2446
+ .asset-mention-autocomplete {
2447
+ position: fixed;
2448
+ z-index: 12000;
2449
+ min-width: 280px;
2450
+ max-width: min(420px, calc(100vw - 16px));
2451
+ max-height: 320px;
2452
+ display: flex;
2453
+ flex-direction: column;
2454
+ overflow: hidden;
2455
+ padding: 0;
2456
+ border: 1px solid var(--harmony-border);
2063
2457
  border-radius: var(--harmony-radius-md);
2064
- padding: 16px;
2065
- text-align: center;
2066
- color: var(--harmony-text-muted);
2067
- font-size: 12px;
2458
+ background: var(--harmony-bg-surface);
2459
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
2068
2460
  }
2069
- .add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
2070
- .add-page-chip {
2461
+ .asset-mention-autocomplete[hidden] {
2462
+ display: none !important;
2463
+ }
2464
+ .asset-mention-header {
2071
2465
  display: flex;
2072
2466
  align-items: center;
2073
- gap: 8px;
2074
- background: var(--harmony-bg-subtle);
2075
- border: 1px solid var(--harmony-border);
2076
- border-radius: var(--harmony-radius-sm);
2467
+ gap: 6px;
2077
2468
  padding: 6px 8px;
2078
- font-size: 11px;
2469
+ border-bottom: 1px solid var(--harmony-border);
2470
+ flex-shrink: 0;
2471
+ min-width: 0;
2079
2472
  }
2080
- .add-page-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--harmony-text-secondary); }
2081
- .add-page-chip-path { font-size: 10px; color: var(--harmony-text-muted); font-family: var(--harmony-mono); }
2082
- .add-page-chip select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; padding: 2px 4px; }
2083
- .add-page-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
2473
+ .asset-mention-header-back {
2474
+ flex-shrink: 0;
2475
+ width: 28px;
2476
+ height: 28px;
2477
+ border: none;
2478
+ border-radius: var(--harmony-radius-sm);
2479
+ background: transparent;
2480
+ color: var(--harmony-text-muted);
2481
+ font-size: 16px;
2482
+ line-height: 1;
2483
+ cursor: pointer;
2484
+ }
2485
+ .asset-mention-header-back:hover {
2486
+ background: var(--harmony-bg-hover);
2487
+ color: var(--harmony-text);
2488
+ }
2489
+ .asset-mention-header-title {
2490
+ flex: 1;
2491
+ min-width: 0;
2492
+ font-size: 12px;
2493
+ font-weight: 600;
2494
+ color: var(--harmony-text-muted);
2495
+ overflow: hidden;
2496
+ text-overflow: ellipsis;
2497
+ white-space: nowrap;
2498
+ }
2499
+ .asset-mention-header-search-toggle,
2500
+ .asset-mention-header-search-close {
2501
+ flex-shrink: 0;
2502
+ width: 28px;
2503
+ height: 28px;
2504
+ border: none;
2505
+ border-radius: var(--harmony-radius-sm);
2506
+ background: transparent;
2507
+ color: var(--harmony-text-muted);
2508
+ font-size: 22px;
2509
+ line-height: 1;
2510
+ cursor: pointer;
2511
+ }
2512
+ .asset-mention-header-search-toggle {
2513
+ font-size: 24px;
2514
+ }
2515
+ .asset-mention-header-search-toggle:hover,
2516
+ .asset-mention-header-search-close:hover {
2517
+ background: var(--harmony-bg-hover);
2518
+ color: var(--harmony-text);
2519
+ }
2520
+ .asset-mention-header-search-field {
2521
+ flex: 1;
2522
+ min-width: 0;
2523
+ display: flex;
2524
+ align-items: center;
2525
+ gap: 6px;
2526
+ padding: 4px 10px;
2527
+ border: 1px solid var(--harmony-border);
2528
+ border-radius: 999px;
2529
+ background: var(--harmony-bg-surface);
2530
+ }
2531
+ .asset-mention-header-search-icon {
2532
+ color: var(--harmony-text-muted);
2533
+ font-size: 22px;
2534
+ line-height: 1;
2535
+ flex-shrink: 0;
2536
+ }
2537
+ .asset-mention-header-search-input {
2538
+ flex: 1;
2539
+ min-width: 0;
2540
+ border: none;
2541
+ background: transparent;
2542
+ color: var(--harmony-text);
2543
+ font-family: var(--harmony-font);
2544
+ font-size: 13px;
2545
+ outline: none;
2546
+ }
2547
+ .asset-mention-header-search-input::-webkit-search-cancel-button {
2548
+ -webkit-appearance: none;
2549
+ display: none;
2550
+ }
2551
+ .asset-mention-header-search-input::placeholder {
2552
+ color: var(--harmony-text-muted);
2553
+ }
2554
+ .asset-mention-list {
2555
+ overflow: auto;
2556
+ padding: 4px;
2557
+ flex: 1;
2558
+ min-height: 0;
2559
+ }
2560
+ .asset-mention-option {
2561
+ display: flex;
2562
+ align-items: center;
2563
+ gap: 8px;
2564
+ width: 100%;
2565
+ padding: 8px 10px;
2566
+ border: none;
2567
+ border-radius: var(--harmony-radius-sm);
2568
+ background: transparent;
2569
+ color: var(--harmony-text);
2570
+ text-align: left;
2571
+ cursor: pointer;
2572
+ font: inherit;
2573
+ }
2574
+ .asset-mention-option:hover,
2575
+ .asset-mention-option--active {
2576
+ background: var(--harmony-bg-hover);
2577
+ }
2578
+ .asset-mention-option-thumb {
2579
+ width: 20px;
2580
+ height: 20px;
2581
+ border-radius: 3px;
2582
+ object-fit: cover;
2583
+ flex-shrink: 0;
2584
+ }
2585
+ .asset-mention-option-icon {
2586
+ width: 20px;
2587
+ height: 20px;
2588
+ display: inline-flex;
2589
+ align-items: center;
2590
+ justify-content: center;
2591
+ flex-shrink: 0;
2592
+ font-size: 12px;
2593
+ color: var(--harmony-text-muted);
2594
+ border-radius: 3px;
2595
+ background: var(--harmony-bg-subtle);
2596
+ }
2597
+ .asset-mention-option-icon--at {
2598
+ font-weight: 700;
2599
+ color: var(--harmony-primary);
2600
+ background: var(--harmony-primary-soft);
2601
+ }
2602
+ .asset-mention-option-icon--nav {
2603
+ font-size: 16px;
2604
+ font-weight: 600;
2605
+ color: var(--harmony-text-muted);
2606
+ }
2607
+ .asset-mention-option-icon--back {
2608
+ font-size: 14px;
2609
+ font-weight: 600;
2610
+ color: var(--harmony-text-muted);
2611
+ }
2612
+ .asset-mention-option--nav .asset-mention-option-title {
2613
+ font-weight: 500;
2614
+ }
2615
+ .asset-mention-option-text {
2616
+ display: flex;
2617
+ flex-direction: column;
2618
+ min-width: 0;
2619
+ gap: 1px;
2620
+ }
2621
+ .asset-mention-option-title {
2622
+ font-size: 13px;
2623
+ font-weight: 600;
2624
+ line-height: 1.3;
2625
+ overflow: hidden;
2626
+ text-overflow: ellipsis;
2627
+ white-space: nowrap;
2628
+ }
2629
+ .asset-mention-option-subtitle {
2630
+ font-size: 11px;
2631
+ color: var(--harmony-text-muted);
2632
+ line-height: 1.2;
2633
+ overflow: hidden;
2634
+ text-overflow: ellipsis;
2635
+ white-space: nowrap;
2636
+ }
2637
+ .add-page-body { flex: 1; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
2638
+ .add-page-section-label { font-size: 11px; font-weight: 600; color: var(--harmony-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
2639
+ .add-page-tab-editor-actions {
2640
+ display: flex;
2641
+ justify-content: flex-end;
2642
+ flex-shrink: 0;
2643
+ margin-top: 8px;
2644
+ }
2645
+ .add-page-btn--compact {
2646
+ flex: 0 0 auto;
2647
+ padding: 6px 14px;
2648
+ font-size: 12px;
2649
+ min-width: 0;
2650
+ }
2651
+ .add-page-references-row {
2652
+ display: flex;
2653
+ align-items: center;
2654
+ gap: 8px;
2655
+ }
2656
+ .add-page-references-row .add-page-dropzone {
2657
+ flex: 1;
2658
+ min-width: 0;
2659
+ margin: 0;
2660
+ }
2661
+ .add-page-references-row .add-page-btn--compact {
2662
+ flex-shrink: 0;
2663
+ white-space: nowrap;
2664
+ }
2665
+ .add-page-suggested-route {
2666
+ display: flex;
2667
+ flex-wrap: wrap;
2668
+ align-items: center;
2669
+ gap: 8px;
2670
+ background: var(--harmony-bg-subtle);
2671
+ border: 1px solid var(--harmony-border);
2672
+ border-radius: var(--harmony-radius-sm);
2673
+ padding: 8px 10px;
2674
+ font-size: 12px;
2675
+ color: var(--harmony-text-secondary);
2676
+ margin-bottom: 8px;
2677
+ }
2678
+ .add-page-suggested-route code { font-family: var(--harmony-mono); color: var(--harmony-primary); }
2679
+ .add-page-brief-fill-popover {
2680
+ position: absolute;
2681
+ inset: 0;
2682
+ z-index: 10;
2683
+ background: rgba(255, 255, 255, 0.6);
2684
+ backdrop-filter: blur(8px);
2685
+ -webkit-backdrop-filter: blur(8px);
2686
+ display: flex;
2687
+ align-items: center;
2688
+ justify-content: center;
2689
+ padding: 24px;
2690
+ box-sizing: border-box;
2691
+ }
2692
+ .add-page-brief-fill-panel {
2693
+ background: var(--harmony-bg-surface);
2694
+ border: 1px solid var(--harmony-border);
2695
+ border-radius: var(--harmony-radius-md);
2696
+ width: min(420px, 100%);
2697
+ max-height: 90%;
2698
+ overflow: auto;
2699
+ padding: 14px 16px;
2700
+ display: flex;
2701
+ flex-direction: column;
2702
+ gap: 10px;
2703
+ box-shadow: var(--harmony-shadow-lg);
2704
+ }
2705
+ .add-page-brief-fill-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
2706
+ .add-page-brief-fill-title { font-size: 13px; font-weight: 600; color: var(--harmony-text); }
2707
+ .add-page-brief-fill-context {
2708
+ width: 100%;
2709
+ min-height: 64px;
2710
+ background: var(--harmony-bg-surface);
2711
+ color: var(--harmony-text);
2712
+ border: 1px solid var(--harmony-border);
2713
+ border-radius: var(--harmony-radius-sm);
2714
+ padding: 8px;
2715
+ font-size: 12px;
2716
+ font-family: var(--harmony-mono);
2717
+ resize: vertical;
2718
+ box-sizing: border-box;
2719
+ }
2720
+ .add-page-brief-fill-dropzone {
2721
+ border: 1px dashed var(--harmony-border-strong);
2722
+ border-radius: var(--harmony-radius-md);
2723
+ padding: 14px;
2724
+ text-align: center;
2725
+ color: var(--harmony-text-muted);
2726
+ font-size: 12px;
2727
+ cursor: pointer;
2728
+ }
2729
+ .add-page-brief-fill-dropzone-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
2730
+ .add-page-brief-fill-context:disabled { opacity: 0.6; cursor: not-allowed; }
2731
+ .add-page-brief-fill-dropzone:focus { outline: none; border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2732
+ .add-page-brief-fill-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
2733
+ .add-page-brief-fill-thumb {
2734
+ position: relative;
2735
+ width: 72px;
2736
+ height: 72px;
2737
+ border-radius: var(--harmony-radius-sm);
2738
+ overflow: hidden;
2739
+ border: 1px solid var(--harmony-border);
2740
+ background: var(--harmony-bg-subtle);
2741
+ }
2742
+ .add-page-brief-fill-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
2743
+ .add-page-brief-fill-thumb-remove {
2744
+ position: absolute;
2745
+ top: 2px;
2746
+ right: 2px;
2747
+ background: rgba(22, 45, 61, 0.7);
2748
+ color: #fff;
2749
+ border: none;
2750
+ border-radius: 3px;
2751
+ width: 18px;
2752
+ height: 18px;
2753
+ font-size: 12px;
2754
+ line-height: 1;
2755
+ cursor: pointer;
2756
+ padding: 0;
2757
+ }
2758
+ .add-page-brief-fill-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
2759
+ .add-page-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
2760
+ .add-page-route-input {
2761
+ flex: 1;
2762
+ min-width: 160px;
2763
+ background: var(--harmony-bg-surface);
2764
+ color: var(--harmony-text);
2765
+ border: 1px solid var(--harmony-border);
2766
+ border-radius: var(--harmony-radius-sm);
2767
+ padding: 8px 10px;
2768
+ font-size: 13px;
2769
+ font-family: var(--harmony-mono);
2770
+ box-sizing: border-box;
2771
+ }
2772
+ .add-page-route-input:focus { border-color: var(--harmony-primary); outline: none; box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2773
+ .add-page-route-input--error { border-color: var(--harmony-danger); }
2774
+ .add-page-route-input--error:focus { border-color: var(--harmony-danger); box-shadow: 0 0 0 3px var(--harmony-danger-soft); }
2775
+ .add-page-route-badge { font-size: 10px; color: var(--harmony-primary); background: var(--harmony-primary-soft); padding: 2px 8px; border-radius: 4px; }
2776
+ .add-page-field-error { font-size: 12px; color: var(--harmony-danger); margin-top: 4px; }
2777
+ .add-page-hint { font-size: 12px; color: var(--harmony-text-muted); margin-top: 4px; }
2778
+ .add-page-textarea {
2779
+ width: 100%;
2780
+ min-height: 120px;
2781
+ background: var(--harmony-bg-surface);
2782
+ color: var(--harmony-text);
2783
+ border: 1px solid var(--harmony-border);
2784
+ border-radius: var(--harmony-radius-sm);
2785
+ padding: 10px;
2786
+ font-size: 12px;
2787
+ font-family: var(--harmony-mono);
2788
+ resize: none;
2789
+ box-sizing: border-box;
2790
+ outline: none;
2791
+ }
2792
+ .add-page-textarea-wrap {
2793
+ position: relative;
2794
+ flex: 1;
2795
+ display: flex;
2796
+ min-height: 0;
2797
+ }
2798
+ .add-page-textarea-wrap .add-page-textarea {
2799
+ flex: 1;
2800
+ }
2801
+ .add-page-fill-image-btn {
2802
+ position: absolute;
2803
+ bottom: 8px;
2804
+ right: 8px;
2805
+ width: 32px;
2806
+ height: 32px;
2807
+ padding: 0;
2808
+ display: grid;
2809
+ place-items: center;
2810
+ line-height: 0;
2811
+ font-size: 0;
2812
+ background: var(--harmony-bg-surface);
2813
+ border: 1px solid var(--harmony-border);
2814
+ border-radius: var(--harmony-radius-sm);
2815
+ color: var(--harmony-text-muted);
2816
+ cursor: pointer;
2817
+ box-shadow: 0 1px 2px rgba(22, 45, 61, 0.08);
2818
+ z-index: 2;
2819
+ }
2820
+ .add-page-fill-image-btn:hover:not(:disabled) {
2821
+ color: var(--harmony-text);
2822
+ background: var(--harmony-bg-hover);
2823
+ border-color: var(--harmony-border-strong);
2824
+ }
2825
+ .add-page-fill-image-btn:disabled {
2826
+ opacity: 0.5;
2827
+ cursor: not-allowed;
2828
+ }
2829
+ .add-page-fill-image-icon {
2830
+ width: 24px;
2831
+ height: 24px;
2832
+ display: block;
2833
+ margin: auto;
2834
+ flex-shrink: 0;
2835
+ overflow: visible;
2836
+ }
2837
+ .add-page-textarea:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
2838
+ .add-page-dropzone {
2839
+ border: 1px dashed var(--harmony-border-strong);
2840
+ border-radius: var(--harmony-radius-md);
2841
+ padding: 12px 16px;
2842
+ text-align: center;
2843
+ color: var(--harmony-text-muted);
2844
+ font-size: 12px;
2845
+ display: flex;
2846
+ align-items: center;
2847
+ justify-content: center;
2848
+ gap: 12px;
2849
+ flex-wrap: nowrap;
2850
+ }
2851
+ .add-page-dropzone-text {
2852
+ flex: 0 1 auto;
2853
+ }
2854
+ .add-page-dropzone-separator {
2855
+ flex: 0 0 auto;
2856
+ color: var(--harmony-text-muted);
2857
+ }
2858
+ .add-page-dropzone .add-page-btn--compact {
2859
+ flex: 0 0 auto;
2860
+ }
2861
+ .add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
2862
+ .add-page-chip {
2863
+ display: flex;
2864
+ align-items: center;
2865
+ gap: 8px;
2866
+ background: var(--harmony-bg-subtle);
2867
+ border: 1px solid var(--harmony-border);
2868
+ border-radius: var(--harmony-radius-sm);
2869
+ padding: 6px 8px;
2870
+ font-size: 11px;
2871
+ }
2872
+ .add-page-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--harmony-text-secondary); }
2873
+ .add-page-chip-path { font-size: 10px; color: var(--harmony-text-muted); font-family: var(--harmony-mono); }
2874
+ .add-page-chip select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; padding: 2px 4px; }
2875
+ .add-page-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
2084
2876
  .add-page-chip-remove:hover { color: var(--harmony-danger); }
2085
2877
  .add-page-plugins {
2086
2878
  border: 1px solid var(--harmony-border);
2087
2879
  border-radius: var(--harmony-radius-md);
2088
- padding: 10px;
2089
- margin-top: 8px;
2880
+ padding: 10px;
2881
+ margin-top: 8px;
2882
+ display: flex;
2883
+ flex-direction: column;
2884
+ gap: 12px;
2885
+ max-height: 320px;
2886
+ overflow: auto;
2887
+ }
2888
+ .add-menu-panel.add-page-plugins,
2889
+ .annotation-add-menu-panel.add-menu-panel {
2890
+ max-height: min(320px, 42vh);
2891
+ overflow: hidden;
2892
+ gap: 8px;
2893
+ min-height: 0;
2894
+ display: flex;
2895
+ flex-direction: column;
2896
+ }
2897
+ .add-menu-panel .add-page-plugins-zone-title { flex-shrink: 0; }
2898
+ .add-menu-panel .add-menu-panel-attached { flex: 0 1 auto; min-height: 0; max-height: 120px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
2899
+ .add-menu-panel .add-page-plugin-chips { margin-top: 0; }
2900
+ .annotation-add-menu-panel .add-page-plugin-chips,
2901
+ .add-menu-panel .add-page-plugin-chips { align-items: stretch; }
2902
+ .annotation-add-menu-panel .add-page-plugin-chip,
2903
+ .add-menu-panel .add-page-plugin-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
2904
+ .add-menu-panel .add-page-btn,
2905
+ .add-menu-panel .add-page-manage-link,
2906
+ .add-menu-panel .add-page-hint,
2907
+ .add-menu-panel .add-page-field-error,
2908
+ .add-menu-panel .add-menu-route-params,
2909
+ .add-menu-panel .add-page-suggested-route,
2910
+ .add-menu-panel .add-menu-route-confirm { flex-shrink: 0; }
2911
+ .add-menu-panel .add-menu-popover { flex-shrink: 0; min-height: 180px; max-height: min(240px, 36vh); margin-top: 4px; }
2912
+ .add-menu-panel .add-menu-nav { min-height: 140px; }
2913
+ .add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: var(--harmony-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
2914
+ .add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--harmony-border); }
2915
+ .add-page-plugin-row:last-child { border-bottom: none; }
2916
+ .add-page-plugin-label { flex: 1; color: var(--harmony-text-secondary); }
2917
+ .add-page-plugin-btn {
2918
+ background: var(--harmony-bg-subtle);
2919
+ color: var(--harmony-text-secondary);
2920
+ border: 1px solid var(--harmony-border);
2921
+ border-radius: var(--harmony-radius-sm);
2922
+ padding: 2px 8px;
2923
+ font-size: 10px;
2924
+ cursor: pointer;
2925
+ }
2926
+ .add-page-plugin-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
2927
+ .add-page-plugin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
2928
+ .add-page-plugin-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
2929
+ .add-page-setup-ok { color: var(--harmony-success); font-size: 10px; }
2930
+ .add-page-setup-warn { color: var(--harmony-warning); font-size: 10px; }
2931
+ .add-page-setup-error { color: var(--harmony-danger); font-size: 10px; }
2932
+ .add-page-plugin-contract { padding-left: 0; font-size: 11px; color: var(--harmony-text-muted); display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
2933
+ .add-page-plugin-contract-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--harmony-border); }
2934
+ .add-page-plugin-contract-row:last-child { border-bottom: none; }
2935
+ .add-page-plugin-contract-name { flex: 1; color: var(--harmony-text-secondary); font-size: 11px; }
2936
+ .add-page-plugin-contract-added { font-size: 10px; color: var(--harmony-success); }
2937
+ .add-page-plugin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
2938
+ .add-page-plugin-chip {
2939
+ background: var(--harmony-bg-subtle);
2940
+ border: 1px solid var(--harmony-border);
2941
+ border-radius: var(--harmony-radius-sm);
2942
+ padding: 2px 6px;
2943
+ font-size: 10px;
2944
+ color: var(--harmony-text-secondary);
2945
+ display: inline-flex;
2946
+ align-items: center;
2947
+ gap: 4px;
2948
+ max-width: 100%;
2949
+ min-width: 0;
2950
+ }
2951
+ .add-page-plugin-chip-text {
2952
+ flex: 1 1 auto;
2953
+ min-width: 0;
2954
+ overflow: hidden;
2955
+ text-overflow: ellipsis;
2956
+ white-space: nowrap;
2957
+ }
2958
+ .add-page-plugin-chip-thumb {
2959
+ width: 32px;
2960
+ height: 32px;
2961
+ border-radius: 6px;
2962
+ object-fit: cover;
2963
+ flex-shrink: 0;
2964
+ border: 1px solid var(--harmony-border);
2965
+ background: var(--harmony-bg-subtle);
2966
+ }
2967
+ .add-page-plugin-chip-info-icon {
2968
+ display: flex;
2969
+ align-items: center;
2970
+ justify-content: center;
2971
+ width: 32px;
2972
+ height: 32px;
2973
+ border-radius: 6px;
2974
+ flex-shrink: 0;
2975
+ background: var(--harmony-bg-subtle);
2976
+ border: 1px solid var(--harmony-border);
2977
+ color: var(--harmony-text-muted);
2978
+ font-size: 14px;
2979
+ line-height: 1;
2980
+ }
2981
+ .add-page-plugin-chip-sub {
2982
+ color: var(--harmony-text-muted);
2983
+ margin-left: 4px;
2984
+ }
2985
+ .add-page-plugin-chip-remove,
2986
+ .add-page-plugin-chip-at {
2987
+ flex-shrink: 0;
2988
+ }
2989
+ .add-page-plugin-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; padding: 0 2px; }
2990
+ .add-page-plugins-warn { font-size: 11px; color: var(--harmony-warning); margin-top: 4px; }
2991
+ .add-page-install-live { font-size: 11px; color: var(--harmony-text-muted); }
2992
+ .add-page-local-plugin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--harmony-border); }
2993
+ .add-page-local-plugin-form input {
2994
+ background: var(--harmony-bg-surface);
2995
+ color: var(--harmony-text);
2996
+ border: 1px solid var(--harmony-border);
2997
+ border-radius: var(--harmony-radius-sm);
2998
+ padding: 4px 6px;
2999
+ font-size: 11px;
3000
+ }
3001
+ .add-page-plugin-picker {
3002
+ width: 100%;
3003
+ background: var(--harmony-bg-surface);
3004
+ color: var(--harmony-text);
3005
+ border: 1px solid var(--harmony-border);
3006
+ border-radius: var(--harmony-radius-sm);
3007
+ font-size: 12px;
3008
+ padding: 6px 8px;
3009
+ margin-top: 6px;
3010
+ }
3011
+ .add-page-manage-link { font-size: 11px; color: var(--harmony-primary); cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
3012
+ .annotation-binding { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
3013
+ .annotation-add-menu { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
3014
+ .annotation-add-menu-toggle { background: none; border: none; color: var(--harmony-primary); font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
3015
+ .annotation-add-menu-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--harmony-text-secondary); }
3016
+ .change-request-add-menu { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--harmony-border); border-radius: var(--harmony-radius-md); background: var(--harmony-bg-subtle); }
3017
+ .add-menu-route-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
3018
+ .add-menu-popover {
3019
+ border: 1px solid var(--harmony-border);
3020
+ border-radius: var(--harmony-radius-sm);
3021
+ padding: 8px;
3022
+ background: var(--harmony-bg-subtle);
3023
+ margin-top: 6px;
3024
+ display: flex;
3025
+ flex-direction: column;
3026
+ gap: 6px;
3027
+ min-height: 0;
3028
+ max-width: 100%;
3029
+ max-height: min(320px, 50vh);
3030
+ overflow: hidden;
3031
+ }
3032
+ .add-menu-popover-header {
3033
+ display: flex;
3034
+ justify-content: space-between;
3035
+ align-items: center;
3036
+ font-size: 11px;
3037
+ font-weight: 600;
3038
+ color: var(--harmony-text-secondary);
3039
+ border-bottom: 1px solid var(--harmony-border);
3040
+ padding-bottom: 4px;
3041
+ margin-bottom: 4px;
3042
+ flex-shrink: 0;
3043
+ }
3044
+ .add-menu-popover-header button { background: none; border: none; color: var(--harmony-text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
3045
+ .add-menu-popover-header button:hover { color: var(--harmony-text); }
3046
+ .add-menu-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; -webkit-overflow-scrolling: touch; }
3047
+ .add-menu-nav-row { display: contents; }
3048
+ .add-menu-nav-btn {
3049
+ background: var(--harmony-bg-surface);
3050
+ color: var(--harmony-text-secondary);
3051
+ border: 1px solid var(--harmony-border);
3052
+ border-radius: var(--harmony-radius-sm);
3053
+ padding: 4px 8px;
3054
+ font-size: 11px;
3055
+ cursor: pointer;
3056
+ text-align: left;
3057
+ }
3058
+ .add-menu-nav-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); border-color: var(--harmony-primary); }
3059
+ .add-menu-item-btn {
3060
+ background: var(--harmony-primary);
3061
+ color: #fff;
3062
+ border: none;
3063
+ border-radius: var(--harmony-radius-sm);
3064
+ padding: 4px 8px;
3065
+ font-size: 11px;
3066
+ cursor: pointer;
3067
+ text-align: left;
3068
+ }
3069
+ .add-menu-item-btn:hover { background: var(--harmony-primary-hover); }
3070
+ .annotation-binding-preview { font-size: 10px; color: var(--harmony-success); margin: 0; }
3071
+ .annotation-binding-panel label { display: flex; flex-direction: column; gap: 2px; }
3072
+ .annotation-binding-panel select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; }
3073
+ .annotation-binding-scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
3074
+ .annotation-binding-install {
3075
+ background: var(--harmony-primary);
3076
+ color: #fff;
3077
+ border: none;
3078
+ border-radius: var(--harmony-radius-sm);
3079
+ padding: 4px 8px;
3080
+ font-size: 10px;
3081
+ cursor: pointer;
3082
+ align-self: flex-start;
3083
+ }
3084
+ .add-page-footer {
3085
+ display: flex;
3086
+ gap: 12px;
3087
+ justify-content: flex-end;
3088
+ padding: 16px 28px 20px;
3089
+ border-top: 1px solid var(--harmony-border);
3090
+ flex-shrink: 0;
3091
+ background: var(--harmony-bg-surface);
3092
+ }
3093
+ .add-page-footer .add-page-btn { flex: 0 0 auto; min-width: 120px; }
3094
+ .add-page-btn { padding: 10px 20px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
3095
+ .add-page-btn-cancel { background: var(--harmony-bg-surface); color: var(--harmony-text-secondary); }
3096
+ .add-page-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
3097
+ .add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
3098
+ .add-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
3099
+ .add-page-hidden-file { display: none; }
3100
+
3101
+ /* Legacy class aliases (kept for compatibility) */
3102
+ .main-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
3103
+ .main-top-bar { display: none; }
3104
+ .preview-stack { display: contents; }
3105
+ .preview-url-row { display: none; }
3106
+ .reset-btn {
3107
+ background: var(--harmony-bg-surface);
3108
+ border: 1px solid var(--harmony-border);
3109
+ color: var(--harmony-text-secondary);
3110
+ cursor: pointer;
3111
+ font-size: 14px;
3112
+ padding: 8px 12px;
3113
+ border-radius: var(--harmony-radius-pill);
3114
+ line-height: 1;
3115
+ }
3116
+ .reset-btn:hover { color: var(--harmony-text); border-color: var(--harmony-border-strong); }
3117
+ .route-picker-stack { display: contents; }
3118
+
3119
+ .stage-place-toolbar {
3120
+ display: flex;
3121
+ align-items: center;
3122
+ gap: 10px;
3123
+ margin-bottom: 8px;
3124
+ padding: 6px 12px;
3125
+ background: var(--harmony-bg-surface);
3126
+ border: 1px solid var(--harmony-primary);
3127
+ border-radius: var(--harmony-radius-pill);
3128
+ font-size: 12px;
3129
+ color: var(--harmony-text);
3130
+ }
3131
+ .stage-place-toolbar-cancel {
3132
+ background: transparent;
3133
+ border: 1px solid var(--harmony-border);
3134
+ border-radius: 4px;
3135
+ padding: 2px 8px;
3136
+ font-size: 11px;
3137
+ cursor: pointer;
3138
+ }
3139
+
3140
+ /* Page info panel (DL #26) */
3141
+ .page-info-panel {
3142
+ position: fixed;
3143
+ z-index: 100;
3144
+ width: min(480px, calc(100vw - 48px));
3145
+ height: min(640px, calc(100vh - 100px));
3146
+ max-height: min(640px, calc(100vh - 100px));
3147
+ display: flex;
3148
+ flex-direction: column;
3149
+ background: var(--harmony-bg-surface);
3150
+ border: 1px solid var(--harmony-border);
3151
+ border-radius: var(--harmony-radius-lg);
3152
+ box-shadow: var(--harmony-shadow-lg);
3153
+ pointer-events: auto;
3154
+ overflow: hidden;
3155
+ font-family: var(--harmony-font);
3156
+ }
3157
+ .page-info-panel-header {
3158
+ display: flex;
3159
+ align-items: flex-start;
3160
+ justify-content: space-between;
3161
+ gap: 12px;
3162
+ padding: 14px 16px 12px;
3163
+ border-bottom: 1px solid var(--harmony-border);
3164
+ flex-shrink: 0;
3165
+ cursor: grab;
3166
+ user-select: none;
3167
+ background: var(--harmony-bg-surface);
3168
+ }
3169
+ .page-info-panel-header:active { cursor: grabbing; }
3170
+ .page-info-panel-header-text {
3171
+ display: flex;
3172
+ flex-direction: column;
3173
+ gap: 4px;
3174
+ min-width: 0;
3175
+ }
3176
+ .page-info-panel-title {
3177
+ font-size: 18px;
3178
+ font-weight: 700;
3179
+ color: var(--harmony-text);
3180
+ letter-spacing: -0.02em;
3181
+ line-height: 1.2;
3182
+ }
3183
+ .page-info-panel-subtitle {
3184
+ font-size: 12px;
3185
+ line-height: 1.35;
3186
+ color: var(--harmony-text-secondary);
3187
+ }
3188
+ .page-info-panel-body {
3189
+ flex: 1;
3190
+ min-height: 0;
3191
+ overflow: auto;
3192
+ padding: 14px 16px 16px;
3193
+ display: flex;
3194
+ flex-direction: column;
3195
+ gap: 14px;
3196
+ }
3197
+ .page-info-section {
3198
+ display: flex;
3199
+ flex-direction: column;
3200
+ gap: 8px;
3201
+ }
3202
+ .page-info-route-card {
3203
+ padding: 12px;
3204
+ border-radius: var(--harmony-radius-md);
3205
+ background: var(--harmony-bg-subtle);
3206
+ border: 1px solid var(--harmony-border);
3207
+ }
3208
+ .page-info-route-highlight {
3209
+ outline: 2px solid var(--harmony-primary);
3210
+ outline-offset: 2px;
3211
+ }
3212
+ .page-info-route-header {
3213
+ display: flex;
3214
+ align-items: center;
3215
+ justify-content: space-between;
3216
+ gap: 8px;
3217
+ }
3218
+ .page-info-route-actions {
3219
+ display: inline-flex;
3220
+ align-items: center;
3221
+ gap: 4px;
3222
+ flex-shrink: 0;
3223
+ }
3224
+ .page-info-route-icon-btn {
3225
+ display: inline-flex;
3226
+ align-items: center;
3227
+ justify-content: center;
3228
+ width: 18px;
3229
+ height: 28px;
3230
+ padding: 0;
3231
+ border: none;
3232
+ border-radius: var(--harmony-radius-sm);
3233
+ background: transparent;
3234
+ color: var(--harmony-text-muted);
3235
+ cursor: pointer;
3236
+ flex-shrink: 0;
3237
+ overflow: visible;
3238
+ }
3239
+ .page-info-route-icon-btn:hover {
3240
+ color: var(--harmony-text);
3241
+ background: var(--harmony-bg-hover);
3242
+ }
3243
+ .page-info-route-icon {
3244
+ display: block;
3245
+ width: 22px;
3246
+ height: 22px;
3247
+ overflow: visible;
3248
+ }
3249
+ .page-info-route-field {
3250
+ display: flex;
3251
+ align-items: stretch;
3252
+ gap: 8px;
3253
+ }
3254
+ .page-info-route-field--error .page-info-route-value,
3255
+ .page-info-route-field--error .page-info-route-input {
3256
+ border-color: var(--harmony-danger);
3257
+ box-shadow: 0 0 0 1px var(--harmony-danger-soft, rgba(220, 38, 38, 0.15));
3258
+ }
3259
+ .page-info-route-problem {
3260
+ display: inline-flex;
3261
+ align-items: center;
3262
+ justify-content: center;
3263
+ flex-shrink: 0;
3264
+ align-self: center;
3265
+ width: 28px;
3266
+ height: 28px;
3267
+ color: var(--harmony-danger);
3268
+ cursor: help;
3269
+ }
3270
+ .page-info-route-problem-icon {
3271
+ display: block;
3272
+ width: 20px;
3273
+ height: 20px;
3274
+ }
3275
+ .page-info-route-missing-params {
2090
3276
  display: flex;
2091
- flex-direction: column;
2092
- gap: 12px;
2093
- max-height: 320px;
2094
- overflow: auto;
3277
+ flex-wrap: wrap;
3278
+ gap: 6px;
3279
+ margin-top: 8px;
2095
3280
  }
2096
- .add-menu-panel.add-page-plugins,
2097
- .annotation-add-menu-panel.add-menu-panel {
2098
- max-height: min(320px, 42vh);
2099
- overflow: hidden;
2100
- gap: 8px;
2101
- min-height: 0;
3281
+ .page-info-param-chip--add {
3282
+ cursor: pointer;
3283
+ border: 1px dashed var(--harmony-primary);
3284
+ background: var(--harmony-bg-surface);
3285
+ }
3286
+ .page-info-param-chip--add:hover {
3287
+ background: var(--harmony-primary-soft);
3288
+ }
3289
+ .page-info-route-change-confirm-overlay {
3290
+ position: fixed;
3291
+ inset: 0;
3292
+ z-index: 200;
2102
3293
  display: flex;
2103
- flex-direction: column;
3294
+ align-items: center;
3295
+ justify-content: center;
3296
+ padding: 24px;
3297
+ background: rgba(15, 23, 42, 0.45);
3298
+ pointer-events: auto;
2104
3299
  }
2105
- .add-menu-panel .add-page-plugins-zone-title { flex-shrink: 0; }
2106
- .add-menu-panel .add-menu-panel-attached { flex: 0 1 auto; min-height: 0; max-height: 120px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
2107
- .add-menu-panel .add-page-plugin-chips { margin-top: 0; }
2108
- .annotation-add-menu-panel .add-page-plugin-chips,
2109
- .add-menu-panel .add-page-plugin-chips { align-items: stretch; }
2110
- .annotation-add-menu-panel .add-page-plugin-chip,
2111
- .add-menu-panel .add-page-plugin-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
2112
- .add-menu-panel .add-page-btn,
2113
- .add-menu-panel .add-page-manage-link,
2114
- .add-menu-panel .add-page-hint,
2115
- .add-menu-panel .add-page-field-error,
2116
- .add-menu-panel .add-menu-route-params,
2117
- .add-menu-panel .add-page-suggested-route,
2118
- .add-menu-panel .add-menu-route-confirm { flex-shrink: 0; }
2119
- .add-menu-panel .add-menu-popover { flex-shrink: 0; min-height: 180px; max-height: min(240px, 36vh); margin-top: 4px; }
2120
- .add-menu-panel .add-menu-nav { min-height: 140px; }
2121
- .add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: var(--harmony-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
2122
- .add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--harmony-border); }
2123
- .add-page-plugin-row:last-child { border-bottom: none; }
2124
- .add-page-plugin-label { flex: 1; color: var(--harmony-text-secondary); }
2125
- .add-page-plugin-btn {
2126
- background: var(--harmony-bg-subtle);
3300
+ .page-info-route-change-confirm-dialog {
3301
+ width: min(480px, 100%);
3302
+ padding: 20px;
3303
+ border-radius: var(--harmony-radius-lg);
3304
+ background: var(--harmony-bg-surface);
3305
+ border: 1px solid var(--harmony-border);
3306
+ box-shadow: var(--harmony-shadow-lg);
3307
+ }
3308
+ .page-info-route-change-confirm-title {
3309
+ margin: 0 0 8px;
3310
+ font-size: 18px;
3311
+ font-weight: 700;
3312
+ color: var(--harmony-text);
3313
+ }
3314
+ .page-info-route-change-confirm-body {
3315
+ margin: 0 0 16px;
3316
+ font-size: 13px;
3317
+ line-height: 1.5;
2127
3318
  color: var(--harmony-text-secondary);
3319
+ }
3320
+ .page-info-route-change-confirm-routes {
3321
+ margin: 0 0 16px;
3322
+ padding: 10px 12px;
3323
+ border-radius: var(--harmony-radius-sm);
3324
+ background: var(--harmony-bg-subtle);
3325
+ font-family: var(--harmony-mono);
3326
+ font-size: 12px;
3327
+ line-height: 1.5;
3328
+ color: var(--harmony-text);
3329
+ word-break: break-all;
3330
+ }
3331
+ .page-info-route-change-confirm-actions {
3332
+ display: flex;
3333
+ justify-content: flex-end;
3334
+ gap: 8px;
3335
+ }
3336
+ .page-info-route-value {
3337
+ flex: 1;
3338
+ min-width: 0;
3339
+ display: block;
3340
+ font-family: var(--harmony-mono);
3341
+ font-size: 12px;
3342
+ line-height: 1.4;
3343
+ color: var(--harmony-text);
3344
+ background: var(--harmony-bg-surface);
3345
+ border: 1px solid var(--harmony-border);
3346
+ border-radius: var(--harmony-radius-sm);
3347
+ padding: 8px 10px;
3348
+ word-break: break-all;
3349
+ }
3350
+ .page-info-route-input {
3351
+ width: 100%;
3352
+ box-sizing: border-box;
3353
+ font-family: var(--harmony-mono);
3354
+ font-size: 12px;
3355
+ padding: 8px 10px;
2128
3356
  border: 1px solid var(--harmony-border);
2129
3357
  border-radius: var(--harmony-radius-sm);
3358
+ background: var(--harmony-bg-surface);
3359
+ color: var(--harmony-text);
3360
+ }
3361
+ .page-info-route-input:focus {
3362
+ outline: none;
3363
+ border-color: var(--harmony-primary);
3364
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
3365
+ }
3366
+ .page-info-planned-route { margin-top: 4px; }
3367
+ .page-info-route-params {
3368
+ display: flex;
3369
+ flex-wrap: wrap;
3370
+ align-items: center;
3371
+ gap: 6px;
3372
+ }
3373
+ .page-info-param-chip {
3374
+ font-family: var(--harmony-mono);
3375
+ font-size: 11px;
2130
3376
  padding: 2px 8px;
2131
- font-size: 10px;
3377
+ border-radius: var(--harmony-radius-pill);
3378
+ background: var(--harmony-primary-soft);
3379
+ color: var(--harmony-primary);
3380
+ }
3381
+ .page-info-route-confirm {
3382
+ margin-top: 8px;
3383
+ padding-top: 10px;
3384
+ border-top: 1px solid var(--harmony-border);
3385
+ }
3386
+ .page-info-route-confirm-actions {
3387
+ display: flex;
3388
+ justify-content: flex-end;
3389
+ gap: 8px;
3390
+ margin-top: 8px;
3391
+ }
3392
+ .page-info-route-confirm-actions .harmony-btn-primary,
3393
+ .page-info-route-confirm-actions .harmony-btn-secondary {
3394
+ flex: 0 0 auto;
3395
+ min-width: 0;
3396
+ padding: 6px 12px;
3397
+ font-size: 12px;
3398
+ }
3399
+ .page-info-field-error {
3400
+ margin: 0;
3401
+ font-size: 12px;
3402
+ color: var(--harmony-danger);
3403
+ }
3404
+ .page-info-hint {
3405
+ margin: 0;
3406
+ font-size: 12px;
3407
+ line-height: 1.4;
3408
+ color: var(--harmony-text-secondary);
3409
+ }
3410
+ .page-info-hint.page-info-loading { font-style: italic; }
3411
+ .page-info-empty {
3412
+ margin: 0;
3413
+ padding: 12px;
3414
+ font-size: 12px;
3415
+ line-height: 1.45;
3416
+ color: var(--harmony-text-secondary);
3417
+ text-align: center;
3418
+ border: 1px dashed var(--harmony-border);
3419
+ border-radius: var(--harmony-radius-md);
3420
+ background: var(--harmony-bg-subtle);
3421
+ }
3422
+ .page-info-duplicate-warning {
3423
+ font-size: 12px;
3424
+ line-height: 1.4;
3425
+ color: #92400e;
3426
+ background: var(--harmony-warning-soft);
3427
+ border: 1px solid #fcd34d;
3428
+ border-radius: var(--harmony-radius-md);
3429
+ padding: 10px 12px;
3430
+ }
3431
+ .page-info-component-list {
3432
+ display: flex;
3433
+ flex-direction: column;
3434
+ gap: 8px;
3435
+ }
3436
+ .page-info-component-card {
3437
+ width: 100%;
2132
3438
  cursor: pointer;
3439
+ text-align: left;
2133
3440
  }
2134
- .add-page-plugin-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
2135
- .add-page-plugin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
2136
- .add-page-plugin-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
2137
- .add-page-setup-ok { color: var(--harmony-success); font-size: 10px; }
2138
- .add-page-setup-warn { color: var(--harmony-warning); font-size: 10px; }
2139
- .add-page-setup-error { color: var(--harmony-danger); font-size: 10px; }
2140
- .add-page-plugin-contract { padding-left: 0; font-size: 11px; color: var(--harmony-text-muted); display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
2141
- .add-page-plugin-contract-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--harmony-border); }
2142
- .add-page-plugin-contract-row:last-child { border-bottom: none; }
2143
- .add-page-plugin-contract-name { flex: 1; color: var(--harmony-text-secondary); font-size: 11px; }
2144
- .add-page-plugin-contract-added { font-size: 10px; color: var(--harmony-success); }
2145
- .add-page-plugin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
2146
- .add-page-plugin-chip {
3441
+ .page-info-component-card .add-menu-picker-component-info-icon {
3442
+ display: flex;
3443
+ align-items: center;
3444
+ justify-content: center;
3445
+ width: 28px;
3446
+ height: 28px;
3447
+ flex-shrink: 0;
3448
+ border-radius: 6px;
2147
3449
  background: var(--harmony-bg-subtle);
2148
3450
  border: 1px solid var(--harmony-border);
2149
- border-radius: var(--harmony-radius-sm);
2150
- padding: 2px 6px;
3451
+ font-size: 14px;
3452
+ color: var(--harmony-primary);
3453
+ margin-bottom: 2px;
3454
+ }
3455
+ .page-info-component-subtitle {
3456
+ font-size: 11px;
3457
+ color: var(--harmony-text-muted);
3458
+ font-family: var(--harmony-mono);
3459
+ line-height: 1.35;
3460
+ margin-top: 2px;
3461
+ word-break: break-all;
3462
+ }
3463
+ .page-info-component-keyline {
3464
+ margin-top: 6px;
3465
+ font-family: var(--harmony-mono);
2151
3466
  font-size: 10px;
3467
+ font-weight: 600;
3468
+ letter-spacing: 0.02em;
3469
+ text-transform: uppercase;
2152
3470
  color: var(--harmony-text-secondary);
2153
- display: inline-flex;
2154
- align-items: center;
3471
+ }
3472
+ .page-info-component-card.add-menu-picker-component-card--selected .page-info-component-keyline {
3473
+ color: var(--harmony-primary);
3474
+ }
3475
+ .page-info-duplicate-badge {
3476
+ margin-top: 6px;
3477
+ align-self: flex-start;
3478
+ font-size: 10px;
3479
+ font-weight: 600;
3480
+ color: #92400e;
3481
+ background: var(--harmony-warning-soft);
3482
+ border: 1px solid #fcd34d;
3483
+ border-radius: var(--harmony-radius-pill);
3484
+ padding: 2px 8px;
3485
+ }
3486
+ .page-info-main-view {
3487
+ display: flex;
3488
+ flex-direction: column;
3489
+ gap: 14px;
3490
+ }
3491
+ .page-info-inspector {
3492
+ display: flex;
3493
+ flex-direction: column;
3494
+ gap: 10px;
3495
+ flex: 1;
3496
+ min-height: 0;
3497
+ padding-bottom: 24px;
3498
+ }
3499
+ .page-info-inspector-contract {
3500
+ margin: 0 0 8px;
3501
+ font-size: 12px;
3502
+ font-weight: 600;
3503
+ color: var(--harmony-text);
3504
+ font-family: var(--harmony-mono);
3505
+ }
3506
+ .page-info-inspector-error {
3507
+ margin: 0;
3508
+ font-size: 12px;
3509
+ line-height: 1.4;
3510
+ color: var(--harmony-danger);
3511
+ }
3512
+ .page-info-tag-list {
3513
+ list-style: none;
3514
+ margin: 0 0 12px;
3515
+ padding: 0;
3516
+ display: flex;
3517
+ flex-direction: column;
2155
3518
  gap: 4px;
2156
- max-width: 100%;
2157
- min-width: 0;
2158
3519
  }
2159
- .add-page-plugin-chip-text {
2160
- flex: 1 1 auto;
2161
- min-width: 0;
2162
- overflow: hidden;
2163
- text-overflow: ellipsis;
3520
+ .page-info-tag-row {
3521
+ display: grid;
3522
+ grid-template-columns: 1fr auto auto;
3523
+ gap: 6px 8px;
3524
+ align-items: center;
3525
+ padding: 8px 10px;
3526
+ border-radius: var(--harmony-radius-sm);
3527
+ background: var(--harmony-bg-surface);
3528
+ border: 1px solid var(--harmony-border);
3529
+ font-size: 11px;
3530
+ }
3531
+ .page-info-tag-row.page-info-tag--used {
3532
+ border-color: rgba(0, 168, 98, 0.35);
3533
+ background: var(--harmony-success-soft);
3534
+ }
3535
+ .page-info-tag-path {
3536
+ font-family: var(--harmony-mono);
3537
+ font-size: 11px;
3538
+ color: var(--harmony-text);
3539
+ word-break: break-word;
3540
+ }
3541
+ .page-info-tag-kind-pill {
3542
+ font-size: 9px;
3543
+ font-weight: 700;
3544
+ letter-spacing: 0.04em;
3545
+ text-transform: uppercase;
3546
+ color: var(--harmony-text-muted);
3547
+ background: var(--harmony-bg-subtle);
3548
+ border-radius: var(--harmony-radius-pill);
3549
+ padding: 2px 6px;
3550
+ white-space: nowrap;
3551
+ }
3552
+ .page-info-tag-status {
3553
+ font-size: 10px;
3554
+ font-weight: 600;
3555
+ border-radius: var(--harmony-radius-pill);
3556
+ padding: 2px 8px;
2164
3557
  white-space: nowrap;
2165
3558
  }
2166
- .add-page-plugin-chip-sub {
3559
+ .page-info-tag-status--bound {
3560
+ color: var(--harmony-success);
3561
+ background: rgba(0, 168, 98, 0.12);
3562
+ }
3563
+ .page-info-tag-status--available {
2167
3564
  color: var(--harmony-text-muted);
2168
- margin-left: 4px;
3565
+ background: var(--harmony-bg-subtle);
2169
3566
  }
2170
- .add-page-plugin-chip-remove,
2171
- .add-page-plugin-chip-at {
2172
- flex-shrink: 0;
3567
+ .page-info-tag-sample {
3568
+ grid-column: 1 / -1;
3569
+ margin: 0;
3570
+ font-family: var(--harmony-mono);
3571
+ font-size: 10px;
3572
+ color: var(--harmony-text-secondary);
3573
+ word-break: break-all;
3574
+ background: transparent;
2173
3575
  }
2174
- .add-page-plugin-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; padding: 0 2px; }
2175
- .add-page-plugins-warn { font-size: 11px; color: var(--harmony-warning); margin-top: 4px; }
2176
- .add-page-install-live { font-size: 11px; color: var(--harmony-text-muted); }
2177
- .add-page-local-plugin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--harmony-border); }
2178
- .add-page-local-plugin-form input {
2179
- background: var(--harmony-bg-surface);
2180
- color: var(--harmony-text);
2181
- border: 1px solid var(--harmony-border);
2182
- border-radius: var(--harmony-radius-sm);
2183
- padding: 4px 6px;
2184
- font-size: 11px;
3576
+ .add-menu-dock-backdrop {
3577
+ position: fixed;
3578
+ inset: 0;
3579
+ z-index: 94;
3580
+ background: rgba(22, 45, 61, 0.12);
3581
+ pointer-events: auto;
2185
3582
  }
2186
- .add-page-plugin-picker {
2187
- width: 100%;
3583
+ .add-menu-dock-panel {
3584
+ position: fixed;
3585
+ width: min(624px, calc(100vw - 48px));
3586
+ height: min(680px, calc(100vh - 120px));
3587
+ max-height: min(680px, calc(100vh - 120px));
3588
+ z-index: 95;
2188
3589
  background: var(--harmony-bg-surface);
2189
- color: var(--harmony-text);
2190
3590
  border: 1px solid var(--harmony-border);
2191
- border-radius: var(--harmony-radius-sm);
2192
- font-size: 12px;
2193
- padding: 6px 8px;
2194
- margin-top: 6px;
2195
- }
2196
- .add-page-manage-link { font-size: 11px; color: var(--harmony-primary); cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
2197
- .annotation-binding { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
2198
- .annotation-add-menu { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
2199
- .annotation-add-menu-toggle { background: none; border: none; color: var(--harmony-primary); font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
2200
- .annotation-add-menu-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--harmony-text-secondary); }
2201
- .change-request-add-menu { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--harmony-border); border-radius: var(--harmony-radius-md); background: var(--harmony-bg-subtle); }
2202
- .add-menu-route-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
2203
- .add-menu-popover {
2204
- border: 1px solid var(--harmony-border);
2205
- border-radius: var(--harmony-radius-sm);
2206
- padding: 8px;
2207
- background: var(--harmony-bg-subtle);
2208
- margin-top: 6px;
3591
+ border-radius: var(--harmony-radius-lg);
3592
+ box-shadow: var(--harmony-shadow-lg);
2209
3593
  display: flex;
2210
3594
  flex-direction: column;
2211
- gap: 6px;
2212
- min-height: 0;
2213
- max-width: 100%;
2214
- max-height: min(320px, 50vh);
2215
3595
  overflow: hidden;
3596
+ pointer-events: auto;
2216
3597
  }
2217
- .add-menu-popover-header {
3598
+ .add-menu-dock-header {
2218
3599
  display: flex;
2219
- justify-content: space-between;
2220
3600
  align-items: center;
2221
- font-size: 11px;
2222
- font-weight: 600;
2223
- color: var(--harmony-text-secondary);
3601
+ gap: 8px;
3602
+ padding: 12px 14px;
2224
3603
  border-bottom: 1px solid var(--harmony-border);
2225
- padding-bottom: 4px;
2226
- margin-bottom: 4px;
2227
3604
  flex-shrink: 0;
3605
+ cursor: grab;
3606
+ user-select: none;
2228
3607
  }
2229
- .add-menu-popover-header button { background: none; border: none; color: var(--harmony-text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
2230
- .add-menu-popover-header button:hover { color: var(--harmony-text); }
2231
- .add-menu-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; -webkit-overflow-scrolling: touch; }
2232
- .add-menu-nav-row { display: contents; }
2233
- .add-menu-nav-btn {
2234
- background: var(--harmony-bg-surface);
3608
+ .add-menu-dock-header:active { cursor: grabbing; }
3609
+ .add-menu-dock-title {
3610
+ flex: 1;
3611
+ font-size: 18px;
3612
+ font-weight: 700;
3613
+ color: var(--harmony-text);
3614
+ letter-spacing: -0.02em;
3615
+ }
3616
+ .add-menu-dock-subhint {
3617
+ margin: 0;
3618
+ padding: 8px 18px 0;
3619
+ font-size: 12px;
3620
+ line-height: 1.35;
2235
3621
  color: var(--harmony-text-secondary);
2236
- border: 1px solid var(--harmony-border);
2237
- border-radius: var(--harmony-radius-sm);
2238
- padding: 4px 8px;
2239
- font-size: 11px;
2240
- cursor: pointer;
2241
- text-align: left;
3622
+ flex-shrink: 0;
2242
3623
  }
2243
- .add-menu-nav-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); border-color: var(--harmony-primary); }
2244
- .add-menu-item-btn {
2245
- background: var(--harmony-primary);
2246
- color: #fff;
2247
- border: none;
2248
- border-radius: var(--harmony-radius-sm);
2249
- padding: 4px 8px;
2250
- font-size: 11px;
2251
- cursor: pointer;
2252
- text-align: left;
3624
+ .add-menu-dock-body {
3625
+ flex: 1;
3626
+ min-height: 0;
3627
+ overflow: hidden;
3628
+ display: flex;
3629
+ flex-direction: column;
3630
+ padding: 0 0 12px;
2253
3631
  }
2254
- .add-menu-item-btn:hover { background: var(--harmony-primary-hover); }
2255
- .annotation-binding-preview { font-size: 10px; color: var(--harmony-success); margin: 0; }
2256
- .annotation-binding-panel label { display: flex; flex-direction: column; gap: 2px; }
2257
- .annotation-binding-panel select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; }
2258
- .annotation-binding-scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
2259
- .annotation-binding-install {
2260
- background: var(--harmony-primary);
3632
+ .add-menu-dock-body .add-menu-picker-browse {
3633
+ flex: 1;
3634
+ min-height: 0;
3635
+ display: flex;
3636
+ flex-direction: column;
3637
+ overflow: hidden;
3638
+ }
3639
+ .add-menu-dock-body .add-menu-picker-browse-layout {
3640
+ flex: 1;
3641
+ min-height: 0;
3642
+ }
3643
+ .add-menu-picker-component-card--stage-place { cursor: grab; }
3644
+ .add-menu-picker-component-card--stage-place:active { cursor: grabbing; }
3645
+ .stage-drop-catcher {
3646
+ position: absolute;
3647
+ inset: 0;
3648
+ z-index: 10;
3649
+ cursor: grabbing;
3650
+ background: rgba(17, 109, 255, 0.08);
3651
+ outline: 2px dashed var(--harmony-primary);
3652
+ outline-offset: -2px;
3653
+ touch-action: none;
3654
+ }
3655
+ .stage-drop-catcher-hint {
3656
+ position: absolute;
3657
+ top: 12px;
3658
+ left: 50%;
3659
+ transform: translateX(-50%);
3660
+ padding: 6px 12px;
3661
+ background: rgba(22, 45, 61, 0.85);
2261
3662
  color: #fff;
2262
- border: none;
2263
- border-radius: var(--harmony-radius-sm);
2264
- padding: 4px 8px;
2265
- font-size: 10px;
2266
- cursor: pointer;
2267
- align-self: flex-start;
3663
+ border-radius: 8px;
3664
+ font-size: 12px;
3665
+ pointer-events: none;
3666
+ white-space: nowrap;
2268
3667
  }
2269
- .add-page-footer {
3668
+ .stage-drop-ghost {
3669
+ position: fixed;
3670
+ z-index: 10000;
3671
+ transform: translate(-7px, -7px);
3672
+ pointer-events: none;
2270
3673
  display: flex;
2271
- gap: 12px;
2272
- justify-content: flex-end;
2273
- padding: 16px 28px 20px;
2274
- border-top: 1px solid var(--harmony-border);
2275
- flex-shrink: 0;
2276
- background: var(--harmony-bg-surface);
3674
+ align-items: flex-start;
3675
+ gap: 8px;
2277
3676
  }
2278
- .add-page-footer .add-page-btn { flex: 0 0 auto; min-width: 120px; }
2279
- .add-page-btn { padding: 10px 20px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
2280
- .add-page-btn-cancel { background: var(--harmony-bg-surface); color: var(--harmony-text-secondary); }
2281
- .add-page-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
2282
- .add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
2283
- .add-page-hidden-file { display: none; }
2284
-
2285
- /* Legacy class aliases (kept for compatibility) */
2286
- .main-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
2287
- .main-top-bar { display: none; }
2288
- .preview-stack { display: contents; }
2289
- .preview-url-row { display: none; }
2290
- .reset-btn {
3677
+ .stage-drop-ghost-marker {
3678
+ flex: 0 0 auto;
3679
+ width: 14px;
3680
+ height: 14px;
3681
+ border-radius: 50%;
3682
+ background: var(--harmony-primary);
3683
+ border: 2px solid #fff;
3684
+ box-shadow: var(--harmony-shadow-sm);
3685
+ }
3686
+ .stage-drop-ghost-hint {
3687
+ max-width: 220px;
3688
+ padding: 6px 10px;
2291
3689
  background: var(--harmony-bg-surface);
2292
- border: 1px solid var(--harmony-border);
2293
- color: var(--harmony-text-secondary);
3690
+ border: 1px solid var(--harmony-primary);
3691
+ border-radius: 6px;
3692
+ font-size: 12px;
3693
+ line-height: 1.35;
3694
+ color: var(--harmony-text-primary);
3695
+ box-shadow: var(--harmony-shadow-sm);
3696
+ white-space: normal;
3697
+ }
3698
+ .stage-drop-banner {
3699
+ position: absolute;
3700
+ top: 8px;
3701
+ left: 50%;
3702
+ transform: translateX(-50%);
3703
+ z-index: 5;
3704
+ display: flex;
3705
+ align-items: center;
3706
+ gap: 8px;
3707
+ padding: 6px 10px;
3708
+ background: rgba(0, 0, 0, 0.75);
3709
+ color: #fff;
3710
+ border-radius: 8px;
3711
+ font-size: 12px;
3712
+ }
3713
+ .stage-drop-banner-cancel {
3714
+ background: transparent;
3715
+ border: 1px solid rgba(255, 255, 255, 0.5);
3716
+ color: #fff;
3717
+ border-radius: 4px;
3718
+ padding: 2px 8px;
2294
3719
  cursor: pointer;
2295
- font-size: 14px;
2296
- padding: 8px 12px;
2297
- border-radius: var(--harmony-radius-pill);
2298
- line-height: 1;
2299
3720
  }
2300
- .reset-btn:hover { color: var(--harmony-text); border-color: var(--harmony-border-strong); }
2301
- .route-picker-stack { display: contents; }
3721
+ .aiditor-toast {
3722
+ position: fixed;
3723
+ bottom: 24px;
3724
+ left: 50%;
3725
+ transform: translateX(-50%);
3726
+ z-index: 120;
3727
+ padding: 10px 16px;
3728
+ background: rgba(0, 0, 0, 0.85);
3729
+ color: #fff;
3730
+ border-radius: 8px;
3731
+ font-size: 13px;
3732
+ pointer-events: none;
3733
+ }
2302
3734
  </style>
2303
3735
  <script type="application/jay-data">
2304
3736
  data:
@@ -2340,14 +3772,23 @@ data:
2340
3772
  isSelected: boolean
2341
3773
  checkGlyph: string
2342
3774
  cssClass: string
2343
- filteredUrlInstanceRows:
3775
+ showPagesPanelEmptySearch: boolean
3776
+ showInstanceSwitcher: boolean
3777
+ showInstanceSwitcherMenu: boolean
3778
+ instanceSwitcherRows:
2344
3779
  - path: string
3780
+ label: string
2345
3781
  isSelected: boolean
2346
- checkGlyph: string
2347
3782
  cssClass: string
2348
- showRoutesPanelUrlInstances: boolean
2349
- showPagesPanelEmptySearch: boolean
3783
+ instanceSwitcherCurrentLabel: string
3784
+ instanceSwitcherCountLabel: string
3785
+ instanceSwitcherTriggerClass: string
3786
+ instanceSwitcherLeft: string
3787
+ instanceSwitcherTop: string
3788
+ instanceSwitcherTransform: string
3789
+ instanceSwitcherMenuOpensAbove: boolean
2350
3790
  showSnapshotNav: boolean
3791
+ showSnowflakeFeatures: boolean
2351
3792
  showSnapshotPanel: boolean
2352
3793
  snapshotNavBtnClass: string
2353
3794
  snapshotNavBtnLabel: string
@@ -2360,6 +3801,8 @@ data:
2360
3801
  cssClass: string
2361
3802
  showSnapshotPanelEmptySearch: boolean
2362
3803
  showAddMenuPickerModal: boolean
3804
+ showAddMenuPickerDismissConfirm: boolean
3805
+ addMenuPickerDismissConfirmMessage: string
2363
3806
  showAddMenuPickerLoading: boolean
2364
3807
  showAddMenuPickerEmpty: boolean
2365
3808
  showAddMenuPickerBrowse: boolean
@@ -2375,8 +3818,15 @@ data:
2375
3818
  showAddMenuPickerComponents: boolean
2376
3819
  showAddMenuPickerNoComponents: boolean
2377
3820
  showAddMenuPickerNoSearchResults: boolean
3821
+ showAddMenuPickerLoadMore: boolean
3822
+ addMenuPickerLoadMoreLabel: string
3823
+ showAddMenuPickerDone: boolean
3824
+ addMenuPickerDoneDisabled: boolean
3825
+ addMenuPickerDoneLabel: string
2378
3826
  addMenuPickerDialogClass: string
3827
+ addMenuPickerOverlayClass: string
2379
3828
  addMenuPickerHeaderTitle: string
3829
+ showAddMenuPickerHeaderBack: boolean
2380
3830
  addMenuPickerBrowseCategoryTitle: string
2381
3831
  addMenuPickerSearchSummary: string
2382
3832
  addMenuPickerSearchQuery: string
@@ -2386,6 +3836,8 @@ data:
2386
3836
  navKey: string
2387
3837
  label: string
2388
3838
  itemCount: number
3839
+ selectedCount: number
3840
+ showSelectedCount: boolean
2389
3841
  isSelected: boolean
2390
3842
  cssClass: string
2391
3843
  addMenuPickerSubCategoryFilterRows:
@@ -2393,7 +3845,11 @@ data:
2393
3845
  navKey: string
2394
3846
  label: string
2395
3847
  itemCount: number
3848
+ selectedCount: number
2396
3849
  showCount: boolean
3850
+ showSelectedCount: boolean
3851
+ showSubCategoryCount: boolean
3852
+ subCategoryCountLabel: string
2397
3853
  isSelected: boolean
2398
3854
  cssClass: string
2399
3855
  addMenuPickerBrowseRows:
@@ -2404,6 +3860,161 @@ data:
2404
3860
  isPickable: boolean
2405
3861
  showPickable: boolean
2406
3862
  showBrowseOnly: boolean
3863
+ isItemSelected: boolean
3864
+ cardCssClass: string
3865
+ showThumbnail: boolean
3866
+ showInfoIcon: boolean
3867
+ thumbnailUrl: string
3868
+ isAnimatedThumbnail: boolean
3869
+ thumbCssClass: string
3870
+ showPageInfoPanel: boolean
3871
+ pageInfoPanelLeft: number
3872
+ pageInfoPanelTop: number
3873
+ addMenuDockLeft: number
3874
+ addMenuDockTop: number
3875
+ pageInfoComponentRows:
3876
+ - rowKey: string
3877
+ detectedKey: string
3878
+ title: string
3879
+ pluginName: string
3880
+ contractName: string
3881
+ componentKey: string
3882
+ showDuplicateBadge: boolean
3883
+ showComponentKey: boolean
3884
+ showContractSubtitle: boolean
3885
+ contractSubtitle: string
3886
+ isSelected: boolean
3887
+ rowClass: string
3888
+ showPageInfoComponentsEmpty: boolean
3889
+ showPageInfoLoading: boolean
3890
+ showPageInfoComponentsLoading: boolean
3891
+ pageInfoDisplayRoute: string
3892
+ pageInfoDraftRoute: string
3893
+ pageInfoRouteFieldClass: string
3894
+ pageInfoRouteProblemTooltip: string
3895
+ showPageInfoRouteProblem: boolean
3896
+ showPageInfoRouteEditing: boolean
3897
+ showPageInfoRouteEditBtn: boolean
3898
+ showPageInfoRouteApproveBtn: boolean
3899
+ showPageInfoRouteCancelEditBtn: boolean
3900
+ showPageInfoRouteMissingParamChips: boolean
3901
+ pageInfoMissingParamRows:
3902
+ - rowKey: string
3903
+ name: string
3904
+ chipLabel: string
3905
+ showPageInfoRouteChangeConfirm: boolean
3906
+ pageInfoRouteChangeConfirmFrom: string
3907
+ pageInfoRouteChangeConfirmTo: string
3908
+ showPageInfoRouteMigration: boolean
3909
+ showPageInfoRouteParams: boolean
3910
+ pageInfoRouteParamRows:
3911
+ - rowKey: string
3912
+ name: string
3913
+ pageInfoParamCollisionWarning: string
3914
+ pageInfoRouteParamHint: string
3915
+ pageInfoPlannedRoute: string
3916
+ showPageInfoRouteParamConfirm: boolean
3917
+ pageInfoPendingRouteParamTitle: string
3918
+ pageInfoDuplicateKeyWarning: string
3919
+ showPageInfoDuplicateWarning: boolean
3920
+ pageInfoRouteSectionClass: string
3921
+ showPageInfoMainView: boolean
3922
+ showPageInfoInspectorDetail: boolean
3923
+ showPageInfoHeaderBack: boolean
3924
+ pageInfoInspectorDetailTitle: string
3925
+ showPageInfoInspectorLoading: boolean
3926
+ showPageInfoInspectorNoContract: boolean
3927
+ showPageInfoInspectorHasTags: boolean
3928
+ showPageInfoInspectorError: boolean
3929
+ pageInfoInspectorError: string
3930
+ pageInfoInspectorTagRows:
3931
+ - rowKey: string
3932
+ tagPath: string
3933
+ tagKind: string
3934
+ tagDescription: string
3935
+ usedInTemplate: boolean
3936
+ tagUsageClass: string
3937
+ showTagSamples: boolean
3938
+ tagSampleText: string
3939
+ showTagBound: boolean
3940
+ showTagAvailable: boolean
3941
+ showAddMenuDock: boolean
3942
+ showAddMenuDockLoading: boolean
3943
+ showAddMenuDockEmpty: boolean
3944
+ showAddMenuDockBrowse: boolean
3945
+ addMenuDockSearchQuery: string
3946
+ showAddMenuDockBrowseLayout: boolean
3947
+ showAddMenuDockSubCategoryFilters: boolean
3948
+ addMenuDockBrowseCategoryTitle: string
3949
+ showAddMenuDockComponents: boolean
3950
+ showAddMenuDockLoadMore: boolean
3951
+ showAddMenuDockNoComponents: boolean
3952
+ showAddMenuDockNoSearchResults: boolean
3953
+ showAddMenuDockSearchBack: boolean
3954
+ showAddMenuDockSearchClear: boolean
3955
+ showAddMenuDockBrowseTitle: boolean
3956
+ showAddMenuDockSearchSummary: boolean
3957
+ addMenuDockBrowseLayoutClass: string
3958
+ addMenuDockLoadMoreLabel: string
3959
+ addMenuDockLeftNavRows:
3960
+ - rowKey: string
3961
+ navKey: string
3962
+ label: string
3963
+ itemCount: number
3964
+ selectedCount: number
3965
+ showSelectedCount: boolean
3966
+ isSelected: boolean
3967
+ cssClass: string
3968
+ addMenuDockSubCategoryFilterRows:
3969
+ - rowKey: string
3970
+ navKey: string
3971
+ label: string
3972
+ itemCount: number
3973
+ selectedCount: number
3974
+ showCount: boolean
3975
+ showSelectedCount: boolean
3976
+ showSubCategoryCount: boolean
3977
+ subCategoryCountLabel: string
3978
+ isSelected: boolean
3979
+ cssClass: string
3980
+ addMenuDockBrowseRows:
3981
+ - rowKey: string
3982
+ isSectionHeader: boolean
3983
+ label: string
3984
+ itemId: string
3985
+ isPickable: boolean
3986
+ showPickable: boolean
3987
+ showBrowseOnly: boolean
3988
+ isItemSelected: boolean
3989
+ cardCssClass: string
3990
+ showThumbnail: boolean
3991
+ showInfoIcon: boolean
3992
+ thumbnailUrl: string
3993
+ isAnimatedThumbnail: boolean
3994
+ thumbCssClass: string
3995
+ showAddMenuDockSearchMode: boolean
3996
+ addMenuDockSearchSummary: string
3997
+ showAssetMentionPanel: boolean
3998
+ assetMentionLeft: number
3999
+ assetMentionTop: number
4000
+ assetMentionHeaderTitle: string
4001
+ showAssetMentionHeaderBack: boolean
4002
+ showAssetMentionSearchField: boolean
4003
+ assetMentionSearchQuery: string
4004
+ assetMentionRows:
4005
+ - rowKey: string
4006
+ rowIndex: number
4007
+ rowKind: string
4008
+ title: string
4009
+ subtitle: string
4010
+ thumbnailUrl: string
4011
+ showThumbnail: boolean
4012
+ showInfoIcon: boolean
4013
+ showAtIcon: boolean
4014
+ showNavIcon: boolean
4015
+ cssClass: string
4016
+ showToastMessage: boolean
4017
+ toastMessage: string
2407
4018
  isPreviewMode: boolean
2408
4019
  previewUrlBar: string
2409
4020
  previewLoading: boolean
@@ -2481,6 +4092,10 @@ data:
2481
4092
  itemId: string
2482
4093
  title: string
2483
4094
  subtitle: string
4095
+ tooltip: string
4096
+ showThumbnail: boolean
4097
+ showInfoIcon: boolean
4098
+ thumbnailUrl: string
2484
4099
  crAddMenuParamCollisionWarning: string
2485
4100
  crAddMenuRouteParamHint: string
2486
4101
  showCrAddMenuRouteParams: boolean
@@ -2518,16 +4133,17 @@ data:
2518
4133
  isVideoRecording: boolean
2519
4134
  videoRecordTooltip: string
2520
4135
  videoRecordDisabled: boolean
4136
+ showFreezeBtn: boolean
2521
4137
  freezeDisabled: boolean
2522
4138
  sendToAgentDisabled: boolean
2523
4139
  sendToAgentTooltip: string
2524
4140
  showVideoReviewModal: boolean
4141
+ showVideoReviewCloseConfirm: boolean
2525
4142
  videoReviewPreparing: boolean
2526
4143
  videoReviewReady: boolean
2527
4144
  videoReviewError: boolean
2528
4145
  videoReviewErrorText: string
2529
4146
  videoReviewObjectUrl: string
2530
- videoModalToolNoneOn: boolean
2531
4147
  videoModalToolPointOn: boolean
2532
4148
  videoModalToolAreaOn: boolean
2533
4149
  videoPointDisplayItems:
@@ -2535,6 +4151,8 @@ data:
2535
4151
  leftPct: number
2536
4152
  topPct: number
2537
4153
  indexLabel: string
4154
+ markerOpen: boolean
4155
+ markerEditMode: boolean
2538
4156
  showVideoPointMarkers: boolean
2539
4157
  videoAreaDisplayItems:
2540
4158
  - id: string
@@ -2543,6 +4161,8 @@ data:
2543
4161
  widthPct: number
2544
4162
  heightPct: number
2545
4163
  indexLabel: string
4164
+ markerOpen: boolean
4165
+ markerEditMode: boolean
2546
4166
  showVideoAreaItems: boolean
2547
4167
  videoAreaDraftLeftPct: number
2548
4168
  videoAreaDraftTopPct: number
@@ -2553,6 +4173,7 @@ data:
2553
4173
  - id: string
2554
4174
  kindLabel: string
2555
4175
  instruction: string
4176
+ showPopover: boolean
2556
4177
  runDisabled: boolean
2557
4178
  quickSendDisabled: boolean
2558
4179
  leftPct: number
@@ -2573,6 +4194,10 @@ data:
2573
4194
  itemId: string
2574
4195
  title: string
2575
4196
  subtitle: string
4197
+ tooltip: string
4198
+ showThumbnail: boolean
4199
+ showInfoIcon: boolean
4200
+ thumbnailUrl: string
2576
4201
  crAddMenuParamCollisionWarning: string
2577
4202
  crAddMenuRouteParamHint: string
2578
4203
  showCrAddMenuRouteParams: boolean
@@ -2656,6 +4281,10 @@ data:
2656
4281
  itemId: string
2657
4282
  title: string
2658
4283
  subtitle: string
4284
+ tooltip: string
4285
+ showThumbnail: boolean
4286
+ showInfoIcon: boolean
4287
+ thumbnailUrl: string
2659
4288
  crAddMenuParamCollisionWarning: string
2660
4289
  crAddMenuRouteParamHint: string
2661
4290
  showCrAddMenuRouteParams: boolean
@@ -2670,6 +4299,10 @@ data:
2670
4299
  showSnapshotSubmitError: boolean
2671
4300
  snapshotSubmitError: string
2672
4301
  showAddPageComposer: boolean
4302
+ showAddPageContentTab: boolean
4303
+ showAddPageDesignTab: boolean
4304
+ addPageContentTabClass: string
4305
+ addPageDesignTabClass: string
2673
4306
  addPageRoute: string
2674
4307
  addPageContentMd: string
2675
4308
  addPageDesignMd: string
@@ -2730,15 +4363,6 @@ data:
2730
4363
  projectLocalPluginName: string
2731
4364
  projectLocalPackageName: string
2732
4365
  projectLocalPath: string
2733
- showAddMenuPanel: boolean
2734
- showAddMenuChips: boolean
2735
- addMenuChipRows:
2736
- - rowKey: string
2737
- itemId: string
2738
- title: string
2739
- subtitle: string
2740
- annotationId?: string
2741
- showAddMenuEmptyHint: boolean
2742
4366
  addMenuParamCollisionWarning: string
2743
4367
  addMenuRouteParamHint: string
2744
4368
  showAddMenuRouteParams: boolean
@@ -2790,7 +4414,7 @@ data:
2790
4414
  </script>
2791
4415
  </head>
2792
4416
  <body>
2793
- <div class="app-root">
4417
+ <div class="app-root" ref="appRoot">
2794
4418
 
2795
4419
  <div class="setup-screen" if="!isMainVisible">
2796
4420
  <h2 class="setup-title">AIditor</h2>
@@ -2805,7 +4429,7 @@ data:
2805
4429
  <div class="editor-topbar-left harmony-global-left">
2806
4430
  <span class="aiditor-logo"><span class="aiditor-logo-ai">AI</span>ditor</span>
2807
4431
  <div class="harmony-page-select-wrap">
2808
- <span class="harmony-page-label">Routes</span>
4432
+ <span class="harmony-page-label">Pages</span>
2809
4433
  <button
2810
4434
  type="button"
2811
4435
  class="{pageNavBtnClass}"
@@ -2865,12 +4489,12 @@ data:
2865
4489
  class="harmony-routes-panel-search-input"
2866
4490
  ref="pagesPanelSearchInput"
2867
4491
  value="{pagesPanelSearchQuery}"
2868
- placeholder="Search routes and URL instances…"
2869
- aria-label="Search routes and URL instances"
4492
+ placeholder="Search routes…"
4493
+ aria-label="Search routes"
2870
4494
  />
2871
4495
  </div>
2872
4496
  <div class="harmony-routes-panel-body">
2873
- <p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes or URL instances match your search.</p>
4497
+ <p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes match your search.</p>
2874
4498
  <button
2875
4499
  type="button"
2876
4500
  forEach="filteredPageRouteRows"
@@ -2880,19 +4504,7 @@ data:
2880
4504
  data-routes-panel-route=""
2881
4505
  >
2882
4506
  <span class="harmony-routes-panel-check">{checkGlyph}</span>
2883
- <span class="harmony-routes-panel-item-label">{label}</span>
2884
- </button>
2885
- <p class="harmony-routes-panel-section-title" if="showRoutesPanelUrlInstances">URL instances</p>
2886
- <button
2887
- type="button"
2888
- forEach="filteredUrlInstanceRows"
2889
- trackBy="path"
2890
- class="{cssClass}"
2891
- data-preview-path="{path}"
2892
- data-routes-panel-url-instance=""
2893
- >
2894
- <span class="harmony-routes-panel-check">{checkGlyph}</span>
2895
- <span class="harmony-routes-panel-item-label">{path}</span>
4507
+ <span class="harmony-routes-panel-item-label">{label}</span>
2896
4508
  </button>
2897
4509
  </div>
2898
4510
  </div>
@@ -2900,7 +4512,7 @@ data:
2900
4512
 
2901
4513
  <div
2902
4514
  class="harmony-routes-panel-overlay"
2903
- if="showSnapshotPanel"
4515
+ if="showSnapshotNav && showSnapshotPanel"
2904
4516
  ref="snapshotPanelOverlay"
2905
4517
  role="dialog"
2906
4518
  aria-modal="true"
@@ -2942,11 +4554,26 @@ data:
2942
4554
  <div class="harmony-float-rail" aria-label="Editor tools">
2943
4555
  <button
2944
4556
  type="button"
2945
- class="harmony-add-btn harmony-add-page-btn"
4557
+ class="harmony-add-btn harmony-stage-action-btn harmony-stage-add-btn"
4558
+ ref="harmonyStageAddBtn"
4559
+ disabled="isRunning"
4560
+ aria-label="Add request — browse elements and place on the page"
4561
+ title="Add request — browse elements and place on the page"
4562
+ >
4563
+ <span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 8C12.4142 8 12.75 8.33579 12.75 8.75V10.25H14.25C14.6642 10.25 15 10.5858 15 11C15 11.4142 14.6642 11.75 14.25 11.75H12.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V11.75H9.75C9.33579 11.75 9 11.4142 9 11C9 10.5858 9.33579 10.25 9.75 10.25H11.25V8.75C11.25 8.33579 11.5858 8 12 8Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 5C18.2142 5 19 5.78579 19 6.75V15.25C19 16.2142 18.2142 17 17.25 17H8.97656L6.16602 18.874C5.93595 19.0274 5.64031 19.0415 5.39648 18.9111C5.15262 18.7806 5 18.5266 5 18.25V6.75C5 5.78579 5.78579 5 6.75 5H17.25ZM6.75 6.5C6.61421 6.5 6.5 6.61421 6.5 6.75V16.8486L8.33398 15.626L8.42969 15.5713C8.52938 15.5242 8.63886 15.5 8.75 15.5H17.25C17.3858 15.5 17.5 15.3858 17.5 15.25V6.75C17.5 6.61421 17.3858 6.5 17.25 6.5H6.75Z" fill="currentColor"/></svg></span>
4564
+ <span class="harmony-stage-action-label">+ Add Request</span>
4565
+ </button>
4566
+ <button
4567
+ type="button"
4568
+ class="harmony-add-btn harmony-stage-action-btn harmony-add-page-btn"
2946
4569
  ref="harmonyAddPageBtn"
2947
4570
  disabled="isRunning"
2948
- aria-label="Add Page"
2949
- >Add Page</button>
4571
+ aria-label="Add page — create a new page"
4572
+ title="Add page — create a new page"
4573
+ >
4574
+ <span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16.25 14.5C16.6642 14.5 17 14.8358 17 15.25V16.5H18.25C18.6642 16.5 19 16.8358 19 17.25C19 17.6642 18.6642 18 18.25 18H17V19.25C17 19.6642 16.6642 20 16.25 20C15.8358 20 15.5 19.6642 15.5 19.25V18H14.25C13.8358 18 13.5 17.6642 13.5 17.25C13.5 16.8358 13.8358 16.5 14.25 16.5H15.5V15.25C15.5 14.8358 15.8358 14.5 16.25 14.5ZM15 4C16.1 4 17 4.9 17 6V12.25C17 12.66 16.66 13 16.25 13C15.84 13 15.5 12.66 15.5 12.25V6C15.5 5.72 15.28 5.5 15 5.5H7C6.72 5.5 6.5 5.72 6.5 6V16C6.5 16.28 6.72 16.5 7 16.5H11.25C11.66 16.5 12 16.84 12 17.25C12 17.66 11.66 18 11.25 18H7C5.9 18 5 17.1 5 16V6C5 4.9 5.9 4 7 4H15ZM13.25 10.5C13.6642 10.5 14 10.8358 14 11.25C14 11.6642 13.6642 12 13.25 12H8.75C8.33579 12 8 11.6642 8 11.25C8 10.8358 8.33579 10.5 8.75 10.5H13.25ZM13.25 7.5C13.6642 7.5 14 7.83579 14 8.25C14 8.66421 13.6642 9 13.25 9H8.75C8.33579 9 8 8.66421 8 8.25C8 7.83579 8.33579 7.5 8.75 7.5H13.25Z" fill="currentColor"/></svg></span>
4575
+ <span class="harmony-stage-action-label">Add Page</span>
4576
+ </button>
2950
4577
  </div>
2951
4578
 
2952
4579
  <div class="harmony-workspace">
@@ -2966,6 +4593,19 @@ data:
2966
4593
  <div class="stage-resize-handle stage-resize-handle-right" ref="stageResizeRight" title="Drag to resize stage" aria-label="Resize stage width"></div>
2967
4594
  <div class="canvas-window harmony-canvas-window">
2968
4595
  <div class="canvas-chrome harmony-canvas-chrome">
4596
+ <div class="harmony-canvas-chrome-left canvas-chrome-left">
4597
+ <button
4598
+ type="button"
4599
+ class="harmony-add-btn harmony-stage-action-btn harmony-page-info-btn"
4600
+ ref="harmonyAssetsBtn"
4601
+ disabled="isRunning"
4602
+ aria-label="Page info — route and components"
4603
+ title="Page info — route and components"
4604
+ >
4605
+ <span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M14.25 11.5C14.6642 11.5 15 11.8358 15 12.25C15 12.6642 14.6642 13 14.25 13H9.75C9.33579 13 9 12.6642 9 12.25C9 11.8358 9.33579 11.5 9.75 11.5H14.25Z" fill="currentColor"/><path d="M14.25 8.5C14.6642 8.5 15 8.83579 15 9.25C15 9.66421 14.6642 10 14.25 10H9.75C9.33579 10 9 9.66421 9 9.25C9 8.83579 9.33579 8.5 9.75 8.5H14.25Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C17.1 5 18 5.9 18 7V17C18 18.1 17.1 19 16 19H8C6.9 19 6 18.1 6 17V7C6 5.9 6.9 5 8 5H16ZM8 6.5C7.72 6.5 7.5 6.72 7.5 7V17C7.5 17.28 7.72 17.5 8 17.5H16C16.28 17.5 16.5 17.28 16.5 17V7C16.5 6.72 16.28 6.5 16 6.5H8Z" fill="currentColor"/></svg></span>
4606
+ <span class="harmony-stage-action-label">Page Info</span>
4607
+ </button>
4608
+ </div>
2969
4609
  <div class="url-bar-wrap harmony-url-bar-wrap">
2970
4610
  <div class="url-bar">{previewUrlBar}</div>
2971
4611
  </div>
@@ -3084,35 +4724,6 @@ data:
3084
4724
  data-annotation-id="{id}"
3085
4725
  value="{instruction}"
3086
4726
  ></textarea>
3087
- <div class="annotation-add-menu">
3088
- <div class="annotation-add-menu-panel add-menu-panel">
3089
- <div class="add-menu-panel-attached">
3090
- <div if="showMarkerAddMenuChips">
3091
- <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
3092
- <div class="add-page-plugin-chips">
3093
- <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
3094
- </div>
3095
- </div>
3096
- <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
3097
- <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
3098
- <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
3099
- <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
3100
- <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
3101
- <span class="add-page-hint">Route params:</span>
3102
- <button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
3103
- </div>
3104
- <div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
3105
- <div class="add-page-section-label">Planned page route</div>
3106
- <input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
3107
- </div>
3108
- <div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
3109
- <p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
3110
- <button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
3111
- <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
3112
- </div>
3113
- </div>
3114
- </div>
3115
- </div>
3116
4727
  <div class="visual-annotation-files">
3117
4728
  <div class="visual-attach-row">
3118
4729
  <button type="button" class="visual-attach-btn visual-annotation-attach" data-annotation-id="{id}">
@@ -3146,6 +4757,56 @@ data:
3146
4757
  <p class="visual-submit-error" if="showVisualSubmitError">{visualSubmitError}</p>
3147
4758
  </div>
3148
4759
  </div>
4760
+ <div
4761
+ class="harmony-instance-switcher"
4762
+ if="showInstanceSwitcher"
4763
+ ref="instanceSwitcher"
4764
+ style="top: {instanceSwitcherTop}; left: {instanceSwitcherLeft}; transform: {instanceSwitcherTransform};"
4765
+ role="group"
4766
+ aria-label="URL instance"
4767
+ >
4768
+ <button
4769
+ type="button"
4770
+ class="harmony-instance-switcher-drag"
4771
+ ref="instanceSwitcherDragHandle"
4772
+ aria-label="Drag instance switcher"
4773
+ >
4774
+ <span class="harmony-instance-switcher-drag-dots" aria-hidden="true">
4775
+ <span></span><span></span><span></span><span></span><span></span><span></span>
4776
+ </span>
4777
+ </button>
4778
+ <div class="harmony-instance-switcher-main">
4779
+ <span class="harmony-instance-switcher-label">{instanceSwitcherCurrentLabel}</span>
4780
+ <button
4781
+ type="button"
4782
+ class="{instanceSwitcherTriggerClass}"
4783
+ ref="instanceSwitcherTrigger"
4784
+ aria-expanded="{showInstanceSwitcherMenu}"
4785
+ aria-haspopup="listbox"
4786
+ >
4787
+ <span>{instanceSwitcherCountLabel}</span>
4788
+ <span class="harmony-instance-switcher-chevron" aria-hidden="true">▾</span>
4789
+ </button>
4790
+ </div>
4791
+ <div
4792
+ class="{instanceSwitcherMenuOpensAbove ? harmony-instance-switcher-menu--above} harmony-instance-switcher-menu"
4793
+ if="showInstanceSwitcherMenu"
4794
+ ref="instanceSwitcherMenu"
4795
+ role="listbox"
4796
+ aria-label="URL instances"
4797
+ >
4798
+ <button
4799
+ type="button"
4800
+ forEach="instanceSwitcherRows"
4801
+ trackBy="path"
4802
+ class="{cssClass}"
4803
+ data-instance-switcher-item=""
4804
+ data-instance-path="{path}"
4805
+ role="option"
4806
+ aria-selected="{isSelected}"
4807
+ >{label}</button>
4808
+ </div>
4809
+ </div>
3149
4810
 
3150
4811
  <div class="annotate-dock-wrap" if="isPreviewMode && showVisualToolbar">
3151
4812
  <div class="clear-markers-confirm" if="showClearMarkersConfirm" role="alertdialog" aria-live="polite" aria-label="Confirm remove all markers">
@@ -3185,11 +4846,12 @@ data:
3185
4846
  type="button"
3186
4847
  class="visual-tool-btn freeze-btn"
3187
4848
  ref="freezeBtn"
4849
+ if="showFreezeBtn"
3188
4850
  disabled="freezeDisabled"
3189
4851
  title="Freeze the current page state"
3190
4852
  aria-label="Freeze the current page state"
3191
4853
  ><span class="tool-glyph" aria-hidden="true">❄</span></button>
3192
- <span class="tool-group-sep"></span>
4854
+ <span class="tool-group-sep" if="showFreezeBtn"></span>
3193
4855
  <button
3194
4856
  type="button"
3195
4857
  class="visual-tool-btn send-to-agent-btn"
@@ -3254,57 +4916,6 @@ data:
3254
4916
  </div>
3255
4917
  </div>
3256
4918
 
3257
- <div class="add-menu-picker-overlay" if="showAddMenuPickerModal" ref="addMenuPickerOverlay" role="dialog" aria-modal="true" aria-label="Add elements">
3258
- <div class="{addMenuPickerDialogClass}" ref="addMenuPickerDialog">
3259
- <div class="add-menu-picker-header">
3260
- <span class="add-menu-picker-title">{addMenuPickerHeaderTitle}</span>
3261
- <button type="button" class="add-menu-picker-close" ref="addMenuPickerCloseBtn" aria-label="Close">×</button>
3262
- </div>
3263
- <div class="add-menu-picker-body">
3264
- <p class="add-menu-picker-hint" if="showAddMenuPickerLoading">Loading plugin catalog…</p>
3265
- <p class="add-menu-picker-hint" if="showAddMenuPickerEmpty">No Add Menu items yet. Install plugins in Project settings, then try again.</p>
3266
- <div class="add-menu-picker-browse" if="showAddMenuPickerBrowse">
3267
- <div class="add-menu-picker-search-row">
3268
- <button type="button" class="add-menu-picker-back" if="showAddMenuPickerSearchBack" data-add-menu-picker-search-back="1" aria-label="Back to browse">‹</button>
3269
- <div class="add-menu-picker-search-field">
3270
- <span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
3271
- <input type="search" class="add-menu-picker-search-input" ref="addMenuPickerSearchInput" placeholder="Search elements…" value="{addMenuPickerSearchQuery}" />
3272
- <button type="button" class="add-menu-picker-search-clear" if="showAddMenuPickerSearchClear" data-add-menu-picker-search-clear="1" aria-label="Clear search">×</button>
3273
- </div>
3274
- </div>
3275
- <div class="{addMenuPickerBrowseLayoutClass}">
3276
- <nav class="add-menu-picker-sidebar" if="showAddMenuPickerBrowseLayout" aria-label="Categories">
3277
- <button type="button" class="{cssClass}" forEach="addMenuPickerLeftNavRows" trackBy="rowKey" data-add-menu-picker-left-nav="1" data-nav-key="{navKey}">
3278
- <span class="add-menu-picker-category-label">{label}</span>
3279
- <span class="add-menu-picker-category-count">{itemCount}</span>
3280
- </button>
3281
- </nav>
3282
- <div class="add-menu-picker-main">
3283
- <h2 class="add-menu-picker-main-title" if="showAddMenuPickerBrowseTitle">{addMenuPickerBrowseCategoryTitle}</h2>
3284
- <p class="add-menu-picker-search-summary" if="showAddMenuPickerSearchSummary">{addMenuPickerSearchSummary}</p>
3285
- <div class="add-menu-picker-subcategory-scroll" if="showAddMenuPickerSubCategoryFilters">
3286
- <button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollPrev" data-add-menu-picker-subcategory-scroll="1" data-direction="prev" aria-label="Scroll filters left">‹</button>
3287
- <div class="add-menu-picker-subcategories" ref="addMenuPickerSubCategoryFilters">
3288
- <button type="button" class="{cssClass}" forEach="addMenuPickerSubCategoryFilterRows" trackBy="rowKey" data-add-menu-picker-subcategory-filter="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showCount">{itemCount}</span></button>
3289
- </div>
3290
- <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>
3291
- </div>
3292
- <div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
3293
- <div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
3294
- <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
3295
- <button type="button" class="add-menu-picker-component-card" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}"><span class="add-menu-picker-component-title">{label}</span></button>
3296
- <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>
3297
- </div>
3298
- </div>
3299
- <p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
3300
- <p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
3301
- </div>
3302
- </div>
3303
- </div>
3304
- </div>
3305
- </div>
3306
- </div>
3307
-
3308
4919
  <div class="project-settings-overlay" if="showProjectSettingsModal" ref="projectSettingsOverlay" role="dialog" aria-modal="true" aria-label="Project settings">
3309
4920
  <div class="project-settings-dialog">
3310
4921
  <div class="project-settings-header">
@@ -3356,89 +4967,93 @@ data:
3356
4967
  </div>
3357
4968
  </div>
3358
4969
 
3359
- <div class="add-page-overlay" if="showAddPageComposer" ref="addPageOverlay" role="dialog" aria-modal="true" aria-label="Add Page">
4970
+ <div class="add-page-overlay" if="showAddPageComposer && !showAddMenuPickerModal" ref="addPageOverlay" role="dialog" aria-modal="true" aria-label="Add Page">
3360
4971
  <div class="add-page-slideover" ref="addPageSlideover">
3361
4972
  <div class="add-page-header">
3362
4973
  <span class="add-page-title">Add Page</span>
3363
4974
  <button type="button" class="add-page-close" ref="addPageCloseBtn" aria-label="Close">×</button>
3364
4975
  </div>
3365
- <div class="add-page-body">
3366
- <section>
3367
- <div class="add-page-section-label">Page route</div>
3368
- <div class="add-page-route-row">
3369
- <input type="text" class="add-page-route-input" ref="addPageRouteInput" value="{addPageRoute}" placeholder="/pricing or /products/[slug]" />
3370
- <span class="add-page-route-badge" if="addPageIsDynamicRoute">Dynamic route</span>
3371
- </div>
3372
- <p class="add-page-field-error" if="showAddPageRouteError">{addPageRouteError}</p>
3373
- <p class="add-page-field-error" if="addMenuParamCollisionWarning">{addMenuParamCollisionWarning}</p>
3374
- <p class="add-page-hint" if="addMenuRouteParamHint">{addMenuRouteParamHint}</p>
3375
- <div class="add-menu-route-params" ref="addPageRouteParamsPanel" if="showAddMenuRouteParams">
3376
- <span class="add-page-hint">Route params:</span>
3377
- <button type="button" class="add-page-param-btn" forEach="addMenuRouteParamRows" trackBy="rowKey" data-add-menu-param="1" data-param="{name}">[{name}]</button>
3378
- </div>
3379
- <div class="add-page-suggested-route" if="showSuggestedRouteBanner">
3380
- <span>Suggested route: <code>{suggestedRouteLabel}</code></span>
3381
- <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageSuggestedRouteApplyBtn" style="flex:0;padding:4px 10px;font-size:11px">Apply route</button>
3382
- <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageSuggestedRouteDismissBtn" style="flex:0;padding:4px 10px;font-size:11px">Dismiss</button>
3383
- </div>
3384
- </section>
3385
- <section>
3386
- <div class="add-page-section-header-row">
3387
- <div class="add-page-section-label">Content</div>
3388
- <button type="button" class="add-page-fill-from-image-btn" ref="addPageFillContentFromImageBtn" title="Generate markdown from screenshot(s) using AI" disabled="briefFillDisabled">Fill from image</button>
3389
- </div>
3390
- <p class="add-page-hint">Behavior, plugins, contracts, interactions, copy.</p>
3391
- <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>
3392
- <div class="add-page-plugins add-menu-panel" ref="addMenuPanel" aria-live="polite">
3393
- <div class="add-page-plugins-zone-title">Add Menu</div>
3394
- <div class="add-menu-panel-attached">
3395
- <div if="showAddMenuChips" class="add-page-plugin-chips">
3396
- <span class="add-page-plugin-chip" forEach="addMenuChipRows" trackBy="rowKey">
3397
- <span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span>
3398
- <button type="button" class="add-page-plugin-chip-remove" data-add-menu-remove-chip="1" data-item-id="{itemId}" title="Remove">×</button>
3399
- <button type="button" class="add-page-plugin-chip-at" data-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button>
3400
- </span>
3401
- </div>
3402
- <p class="add-page-hint" if="showAddMenuEmptyHint">Install plugins in Project settings to unlock Add Menu items.</p>
3403
- <button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-open="1">+ Add</button>
3404
- </div>
3405
- <div class="add-menu-route-confirm" if="showAddMenuRouteParamConfirm">
3406
- <p><strong>This component needs a dynamic page route</strong></p>
3407
- <p>Adding <strong>{addMenuPendingRouteParamTitle}</strong> will require updating the page URL. Files change only after the agent completes the task.</p>
3408
- <button type="button" class="add-page-btn add-page-btn-primary" data-add-menu-route-confirm="1">Add anyway</button>
3409
- <button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-route-cancel="1">Cancel</button>
3410
- </div>
3411
- </div>
3412
- </section>
3413
- <section>
3414
- <div class="add-page-section-header-row">
3415
- <div class="add-page-section-label">Design</div>
3416
- <button type="button" class="add-page-fill-from-image-btn" ref="addPageFillDesignFromImageBtn" title="Generate markdown from screenshot(s) using AI" disabled="briefFillDisabled">Fill from image</button>
3417
- </div>
3418
- <p class="add-page-hint">Layout, colors, typography, breakpoints.</p>
3419
- <textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home&#10;- Hero: centered H1, muted subtitle (#888)" value="{addPageDesignMd}"></textarea>
3420
- <p class="add-page-hint" if="addPageShowDesignHint">Add a mock or screenshot for better layout fidelity.</p>
3421
- </section>
3422
- <section>
3423
- <div class="add-page-section-label">References</div>
3424
- <div class="add-page-dropzone" ref="addPageReferenceDrop">Drop reference files here</div>
3425
- <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageAttachReferenceBtn" style="margin-top:8px;width:100%">Attach reference</button>
3426
- <input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple />
3427
- <p class="add-page-hint" if="showAddPageUploadHint">{addPageUploadHint}</p>
3428
- <div class="add-page-chips" ref="addPageAttachmentsList" if="showAddPageAttachments">
3429
- <div class="add-page-chip" forEach="addPageAttachmentRows" trackBy="rowKey">
3430
- <span class="add-page-chip-name">{filename}</span>
3431
- <select data-attachment-id="{id}" value="{role}">
3432
- <option value="reference">Reference</option>
3433
- <option value="asset">Asset</option>
3434
- </select>
3435
- <span class="add-page-chip-path">{path}</span>
3436
- <button type="button" class="add-page-chip-remove" data-add-page-remove="{id}">×</button>
3437
- </div>
4976
+ <div class="add-page-subheader">
4977
+ <div class="add-page-tabs" role="tablist" aria-label="Page brief sections">
4978
+ <button type="button" class="{addPageContentTabClass}" ref="addPageContentTabBtn" role="tab" aria-selected="showAddPageContentTab">Content</button>
4979
+ <button type="button" class="{addPageDesignTabClass}" ref="addPageDesignTabBtn" role="tab" aria-selected="showAddPageDesignTab">Design</button>
4980
+ </div>
4981
+ </div>
4982
+ <div class="add-page-layout">
4983
+ <div class="add-page-main">
4984
+ <div class="add-page-main-scroll">
4985
+ <section class="add-page-tab-panel" if="showAddPageContentTab" role="tabpanel">
4986
+ <div>
4987
+ <div class="add-page-section-label">Page URL*</div>
4988
+ <div class="add-page-route-row">
4989
+ <input type="text" class="add-page-route-input {showAddPageRouteError ? add-page-route-input--error}" ref="addPageRouteInput" value="{addPageRoute}" placeholder="/pricing or /products/[slug]" />
4990
+ <span class="add-page-route-badge" if="addPageIsDynamicRoute">Dynamic route</span>
4991
+ </div>
4992
+ <p class="add-page-field-error" if="showAddPageRouteError">{addPageRouteError}</p>
4993
+ <p class="add-page-field-error" if="addMenuParamCollisionWarning">{addMenuParamCollisionWarning}</p>
4994
+ <p class="add-page-hint" if="addMenuRouteParamHint">{addMenuRouteParamHint}</p>
4995
+ <div class="add-menu-route-params" ref="addPageRouteParamsPanel" if="showAddMenuRouteParams">
4996
+ <span class="add-page-hint">Route params:</span>
4997
+ <button type="button" class="add-page-param-btn" forEach="addMenuRouteParamRows" trackBy="rowKey" data-add-menu-param="1" data-param="{name}">[{name}]</button>
4998
+ </div>
4999
+ <div class="add-menu-route-confirm" if="showAddMenuRouteParamConfirm" ref="addMenuPanel">
5000
+ <p><strong>This component needs a dynamic page route</strong></p>
5001
+ <p>Adding <strong>{addMenuPendingRouteParamTitle}</strong> will require updating the page URL. Files change only after the agent completes the task.</p>
5002
+ <button type="button" class="add-page-btn add-page-btn-primary" data-add-menu-route-confirm="1">Add anyway</button>
5003
+ <button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-route-cancel="1">Cancel</button>
5004
+ </div>
5005
+ <div class="add-page-suggested-route" if="showSuggestedRouteBanner">
5006
+ <span>Suggested route: <code>{suggestedRouteLabel}</code></span>
5007
+ <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageSuggestedRouteApplyBtn" style="flex:0;padding:4px 10px;font-size:11px">Apply route</button>
5008
+ <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageSuggestedRouteDismissBtn" style="flex:0;padding:4px 10px;font-size:11px">Dismiss</button>
5009
+ </div>
5010
+ </div>
5011
+ <div class="add-page-tab-editor">
5012
+ <div class="add-page-section-label">Content</div>
5013
+ <p class="add-page-hint">Behavior, plugins, contracts, interactions, copy.</p>
5014
+ <div class="add-page-textarea-wrap">
5015
+ <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>
5016
+ <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>
5017
+ </div>
5018
+ </div>
5019
+ </section>
5020
+ <section class="add-page-tab-panel" if="showAddPageDesignTab" role="tabpanel">
5021
+ <div class="add-page-tab-editor">
5022
+ <div class="add-page-section-label">Design</div>
5023
+ <p class="add-page-hint">Layout, colors, typography, breakpoints.</p>
5024
+ <div class="add-page-textarea-wrap">
5025
+ <textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home&#10;- Hero: centered H1, muted subtitle (#888)" value="{addPageDesignMd}"></textarea>
5026
+ <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>
5027
+ </div>
5028
+ <p class="add-page-hint" if="addPageShowDesignHint">Add a mock or screenshot for better layout fidelity.</p>
5029
+ </div>
5030
+ </section>
5031
+ <section class="add-page-references">
5032
+ <div class="add-page-references-row">
5033
+ <div class="add-page-dropzone" ref="addPageReferenceDrop">
5034
+ <span class="add-page-dropzone-text">Drop <strong>REFERENCES</strong> files here</span>
5035
+ <span class="add-page-dropzone-separator">or</span>
5036
+ <button type="button" class="add-page-btn add-page-btn-cancel add-page-btn--compact" ref="addPageAttachReferenceBtn">Upload from Computer</button>
5037
+ </div>
5038
+ </div>
5039
+ <input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple />
5040
+ <p class="add-page-hint" if="showAddPageUploadHint">{addPageUploadHint}</p>
5041
+ <div class="add-page-chips" ref="addPageAttachmentsList" if="showAddPageAttachments">
5042
+ <div class="add-page-chip" forEach="addPageAttachmentRows" trackBy="rowKey">
5043
+ <span class="add-page-chip-name">{filename}</span>
5044
+ <select data-attachment-id="{id}" value="{role}">
5045
+ <option value="reference">Reference</option>
5046
+ <option value="asset">Asset</option>
5047
+ </select>
5048
+ <span class="add-page-chip-path">{path}</span>
5049
+ <button type="button" class="add-page-chip-remove" data-add-page-remove="{id}">×</button>
5050
+ </div>
5051
+ </div>
5052
+ </section>
5053
+ <p class="add-page-field-error" if="showAddPageComposerError">{addPageComposerError}</p>
5054
+ <p class="add-page-hint" if="showAddPageRunningHint">{addPageRunningHint}</p>
3438
5055
  </div>
3439
- </section>
3440
- <p class="add-page-field-error" if="showAddPageComposerError">{addPageComposerError}</p>
3441
- <p class="add-page-hint" if="showAddPageRunningHint">{addPageRunningHint}</p>
5056
+ </div>
3442
5057
  </div>
3443
5058
  <div class="add-page-footer">
3444
5059
  <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageCancelBtn">Cancel</button>
@@ -3473,6 +5088,304 @@ data:
3473
5088
  </div>
3474
5089
  </div>
3475
5090
 
5091
+ <div
5092
+ class="page-info-panel"
5093
+ if="showPageInfoPanel"
5094
+ ref="pageInfoPanel"
5095
+ role="dialog"
5096
+ aria-label="Page info"
5097
+ style="left: {pageInfoPanelLeft}px; top: {pageInfoPanelTop}px;"
5098
+ >
5099
+ <div class="page-info-panel-header" ref="pageInfoPanelHeader">
5100
+ <button type="button" class="add-menu-picker-header-back" if="showPageInfoHeaderBack" ref="pageInfoInspectorBackBtn" aria-label="Back to page info"><svg class="add-menu-picker-header-back-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9.21973 8.46978C9.51262 8.17688 9.98738 8.17688 10.2803 8.46978C10.5731 8.76268 10.5731 9.23745 10.2803 9.53032L8.56055 11.2501H17.25C17.6642 11.2501 18 11.5858 18 12.0001C17.9999 12.4142 17.6642 12.75 17.25 12.7501H8.56055L10.2803 14.4698C10.5731 14.7627 10.5731 15.2375 10.2803 15.5303C9.9874 15.8232 9.51261 15.8231 9.21973 15.5303L6.21973 12.5303C6.18773 12.4983 6.15977 12.4636 6.13477 12.4278C6.10404 12.3837 6.07744 12.3365 6.05664 12.2862C6.0359 12.2359 6.02106 12.1838 6.01172 12.1309C6.00423 12.0884 6.00001 12.0447 6 12.0001C6 11.9548 6.00403 11.9103 6.01172 11.8672C6.02081 11.8164 6.03505 11.7663 6.05469 11.7178L6.05859 11.7081C6.07937 11.6589 6.10545 11.6125 6.13574 11.5694C6.16035 11.5344 6.18842 11.5011 6.21973 11.4698L9.21973 8.46978Z" fill="currentColor"/></svg></button>
5101
+ <div class="page-info-panel-header-text">
5102
+ <span class="page-info-panel-title" if="showPageInfoMainView">Page info</span>
5103
+ <span class="page-info-panel-title" if="showPageInfoInspectorDetail">{pageInfoInspectorDetailTitle}</span>
5104
+ <span class="page-info-panel-subtitle" if="showPageInfoMainView">Components on this page and what is bound in the template</span>
5105
+ </div>
5106
+ <button type="button" class="add-menu-picker-close" ref="pageInfoPanelCloseBtn" aria-label="Close">×</button>
5107
+ </div>
5108
+ <div class="page-info-panel-body" ref="pageInfoPanelBody">
5109
+ <div class="page-info-main-view" if="showPageInfoMainView">
5110
+ <div class="page-info-route-card page-info-route-section {pageInfoRouteSectionClass}">
5111
+ <div class="page-info-route-header">
5112
+ <div class="add-page-section-label">Route</div>
5113
+ <div class="page-info-route-actions">
5114
+ <button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteEditBtn" ref="pageInfoRouteEditBtn" aria-label="Edit route"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8561 5C16.503 5.00007 17.1344 5.25785 17.5964 5.71973C18.0566 6.18008 18.3161 6.80074 18.3161 7.45996C18.3161 8.49028 17.9061 9.46781 17.1911 10.1953L16.0964 11.29L10.2858 17.0801C10.0636 17.3023 9.78408 17.4628 9.47625 17.5371L9.47722 17.5381L6.5573 18.2676L6.55242 18.2686C5.63667 18.4909 4.81423 17.6687 5.03679 16.7529L5.03777 16.748L5.76824 13.8281C5.8395 13.5241 5.99394 13.2413 6.22527 13.0195L12.0251 7.21973L13.1159 6.12988C13.8492 5.39662 14.8313 5.00005 15.8561 5ZM7.26433 14.1016C7.25283 14.1123 7.23682 14.1341 7.2282 14.1729C7.22678 14.1792 7.22491 14.186 7.22332 14.1924L6.59246 16.7119L9.11394 16.082L9.12371 16.0801C9.15223 16.0734 9.18971 16.0551 9.22527 16.0195L14.9948 10.249L13.0553 8.30957L7.26433 14.1016ZM15.8561 6.5C15.2213 6.50005 14.623 6.74396 14.1764 7.19043L14.1169 7.25L16.0661 9.19922L16.1257 9.13965C16.5677 8.68771 16.8161 8.08737 16.8161 7.45996C16.8161 7.19934 16.7153 6.95987 16.5358 6.78027C16.3579 6.60243 16.109 6.50008 15.8561 6.5Z" fill="currentColor"/></svg></button>
5115
+ <button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteApproveBtn" ref="pageInfoRouteApproveBtn" aria-label="Apply route change"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13.7539 9.52051C14.0189 9.20219 14.4912 9.15886 14.8096 9.42383C15.1278 9.6888 15.1711 10.1612 14.9062 10.4795L11.5762 14.4795C11.4247 14.6614 11.1963 14.7616 10.96 14.749C10.7235 14.7363 10.5061 14.6122 10.375 14.415L9.04492 12.415C8.81594 12.0702 8.91016 11.6043 9.25488 11.375C9.59974 11.146 10.0656 11.2402 10.2949 11.585L11.0674 12.7471L13.7539 9.52051Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5ZM12 6.5C8.97 6.5 6.5 8.97 6.5 12C6.5 15.03 8.97 17.5 12 17.5C15.03 17.5 17.5 15.03 17.5 12C17.5 8.97 15.03 6.5 12 6.5Z" fill="currentColor"/></svg></button>
5116
+ <button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteCancelEditBtn" ref="pageInfoRouteCancelEditBtn" aria-label="Cancel route edit"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13.7197 9.21973C14.0126 8.92683 14.4874 8.92683 14.7803 9.21973C15.0732 9.51262 15.0732 9.98738 14.7803 10.2803L13.0605 12L14.7803 13.7197C15.0732 14.0126 15.0732 14.4874 14.7803 14.7803C14.4874 15.0732 14.0126 15.0732 13.7197 14.7803L12 13.0605L10.2803 14.7803C9.98738 15.0732 9.51262 15.0732 9.21973 14.7803C8.92683 14.4874 8.92683 14.0126 9.21973 13.7197L10.9395 12L9.21973 10.2803C8.92683 9.98738 8.92683 9.51262 9.21973 9.21973C9.51262 8.92683 9.98738 8.92683 10.2803 9.21973L12 10.9395L13.7197 9.21973Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5ZM12 6.5C8.97 6.5 6.5 8.97 6.5 12C6.5 15.03 8.97 17.5 12 17.5C15.03 17.5 17.5 15.03 17.5 12C17.5 8.97 15.03 6.5 12 6.5Z" fill="currentColor"/></svg></button>
5117
+ </div>
5118
+ </div>
5119
+ <div class="page-info-route-field {pageInfoRouteFieldClass}">
5120
+ <code class="page-info-route-value" if="!showPageInfoRouteEditing">{pageInfoDisplayRoute}</code>
5121
+ <input type="text" class="page-info-route-input" if="showPageInfoRouteEditing" ref="pageInfoRouteInput" value="{pageInfoDraftRoute}" placeholder="/products/[slug]" />
5122
+ <span class="page-info-route-problem" if="showPageInfoRouteProblem" title="{pageInfoRouteProblemTooltip}"><svg class="page-info-route-problem-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 3L21 8.29289V15.7071L15.7071 21H8.29289L3 15.7071V8.29289L8.29289 3H15.7071ZM15.293 4H8.706L4 8.706V15.293L8.707 20H15.292L20 15.292V8.707L15.293 4ZM12 15C12.5523 15 13 15.4477 13 16C13 16.5128 12.614 16.9355 12.1166 16.9933L12 17C11.4477 17 11 16.5523 11 16C11 15.4872 11.386 15.0645 11.8834 15.0067L12 15ZM12 7C12.5523 7 13 7.44772 13 8V12C13 12.5128 12.614 12.9355 12.1166 12.9933L12 13C11.4477 13 11 12.5523 11 12V8C11 7.48716 11.386 7.06449 11.8834 7.00673L12 7Z" fill="currentColor"/></svg></span>
5123
+ </div>
5124
+ <div class="page-info-route-missing-params" if="showPageInfoRouteMissingParamChips">
5125
+ <button type="button" class="page-info-param-chip page-info-param-chip--add" forEach="pageInfoMissingParamRows" trackBy="rowKey" data-page-info-missing-param="{name}">{chipLabel}</button>
5126
+ </div>
5127
+ <p class="page-info-field-error" if="pageInfoParamCollisionWarning">{pageInfoParamCollisionWarning}</p>
5128
+ <div class="page-info-route-confirm" if="showPageInfoRouteParamConfirm">
5129
+ <p class="page-info-hint">Adding <strong>{pageInfoPendingRouteParamTitle}</strong> needs a dynamic route.</p>
5130
+ <div class="page-info-route-confirm-actions">
5131
+ <button type="button" class="harmony-btn-secondary" ref="pageInfoRouteParamCancelBtn">Cancel</button>
5132
+ <button type="button" class="harmony-btn-primary" ref="pageInfoRouteParamConfirmBtn">Update route</button>
5133
+ </div>
5134
+ </div>
5135
+ </div>
5136
+ <div class="page-info-duplicate-warning" if="showPageInfoDuplicateWarning">{pageInfoDuplicateKeyWarning}</div>
5137
+ <div class="page-info-section">
5138
+ <div class="add-page-section-label">On this page</div>
5139
+ <p class="page-info-empty" if="showPageInfoComponentsEmpty">No headless components in page.jay-html yet.</p>
5140
+ <p class="page-info-hint page-info-loading" if="showPageInfoComponentsLoading">Scanning page template…</p>
5141
+ <div class="page-info-component-list" if="!showPageInfoComponentsEmpty">
5142
+ <button type="button" class="{rowClass}" forEach="pageInfoComponentRows" trackBy="rowKey" data-page-info-component="1" data-detected-key="{detectedKey}" title="{title}">
5143
+ <span class="add-menu-picker-component-info-icon" aria-hidden="true">▦</span>
5144
+ <span class="add-menu-picker-component-title">{title}</span>
5145
+ <span class="page-info-component-subtitle" if="showContractSubtitle">{contractSubtitle}</span>
5146
+ <span class="page-info-component-keyline" if="showComponentKey">key: {componentKey}</span>
5147
+ <span class="page-info-duplicate-badge" if="showDuplicateBadge">duplicate key</span>
5148
+ </button>
5149
+ </div>
5150
+ </div>
5151
+ </div>
5152
+ <div class="page-info-inspector" if="showPageInfoInspectorDetail">
5153
+ <p class="page-info-hint page-info-loading" if="showPageInfoInspectorLoading">Loading contract tags…</p>
5154
+ <p class="page-info-hint" if="showPageInfoInspectorNoContract">This component has no headless contract (for example a Jay full-stack component). Only plugin headless components expose contract tags.</p>
5155
+ <p class="page-info-inspector-error" if="showPageInfoInspectorError">{pageInfoInspectorError}</p>
5156
+ <ul class="page-info-tag-list" if="showPageInfoInspectorHasTags">
5157
+ <li class="page-info-tag-row {tagUsageClass}" forEach="pageInfoInspectorTagRows" trackBy="rowKey" title="{tagDescription}">
5158
+ <span class="page-info-tag-path">{tagPath}</span>
5159
+ <span class="page-info-tag-kind-pill">{tagKind}</span>
5160
+ <span class="page-info-tag-status page-info-tag-status--bound" if="showTagBound">bound</span>
5161
+ <span class="page-info-tag-status page-info-tag-status--available" if="showTagAvailable">available</span>
5162
+ <code class="page-info-tag-sample" if="showTagSamples">{tagSampleText}</code>
5163
+ </li>
5164
+ </ul>
5165
+ </div>
5166
+ </div>
5167
+ </div>
5168
+
5169
+ <div class="page-info-route-change-confirm-overlay" if="showPageInfoRouteChangeConfirm" ref="pageInfoRouteChangeConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm page route change">
5170
+ <div class="page-info-route-change-confirm-dialog">
5171
+ <h3 class="page-info-route-change-confirm-title">Change page URL?</h3>
5172
+ <p class="page-info-route-change-confirm-body">The page URL is about to change. This can affect links across the site and may affect agent conversation history for this page. The agent will implement this route change now, including moving page files and fixing links that still point to the old URL.</p>
5173
+ <div class="page-info-route-change-confirm-routes">{pageInfoRouteChangeConfirmFrom} → {pageInfoRouteChangeConfirmTo}</div>
5174
+ <div class="page-info-route-change-confirm-actions">
5175
+ <button type="button" class="harmony-btn-secondary" ref="pageInfoRouteChangeCancelBtn">Cancel</button>
5176
+ <button type="button" class="harmony-btn-primary" ref="pageInfoRouteChangeConfirmBtn">Yes, change route</button>
5177
+ </div>
5178
+ </div>
5179
+ </div>
5180
+
5181
+ <div class="add-menu-dock-backdrop" if="showAddMenuDock" ref="addMenuDockBackdrop" aria-hidden="true"></div>
5182
+
5183
+ <div
5184
+ class="add-menu-dock-panel"
5185
+ if="showAddMenuDock"
5186
+ ref="addMenuDockPanel"
5187
+ role="dialog"
5188
+ aria-label="Add elements"
5189
+ style="left: {addMenuDockLeft}px; top: {addMenuDockTop}px;"
5190
+ >
5191
+ <div class="add-menu-dock-header" ref="addMenuDockHeader">
5192
+ <span class="add-menu-dock-title">Add Elements</span>
5193
+ <button type="button" class="add-menu-picker-close" ref="addMenuDockCloseBtn" aria-label="Close">×</button>
5194
+ </div>
5195
+ <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>
5196
+ <div class="add-menu-dock-body">
5197
+ <p class="add-menu-picker-hint" if="showAddMenuDockLoading">Loading catalog…</p>
5198
+ <p class="add-menu-picker-hint" if="showAddMenuDockEmpty">No catalog items — install plugins and run setup.</p>
5199
+ <div class="add-menu-picker-browse" if="showAddMenuDockBrowse">
5200
+ <div class="add-menu-picker-search-row">
5201
+ <button type="button" class="add-menu-picker-back" if="showAddMenuDockSearchBack" data-add-menu-dock-search-back="1" aria-label="Back to browse">‹</button>
5202
+ <div class="add-menu-picker-search-field">
5203
+ <span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
5204
+ <input type="search" class="add-menu-picker-search-input" ref="addMenuDockSearchInput" placeholder="Search elements…" value="{addMenuDockSearchQuery}" />
5205
+ <button type="button" class="add-menu-picker-search-clear" if="showAddMenuDockSearchClear" data-add-menu-dock-search-clear="1" aria-label="Clear search">×</button>
5206
+ </div>
5207
+ </div>
5208
+ <div class="{addMenuDockBrowseLayoutClass}">
5209
+ <nav class="add-menu-picker-sidebar" if="showAddMenuDockBrowseLayout" aria-label="Categories">
5210
+ <button type="button" class="{cssClass}" forEach="addMenuDockLeftNavRows" trackBy="rowKey" data-add-menu-dock-left-nav="1" data-nav-key="{navKey}">
5211
+ <span class="add-menu-picker-category-label">{label}</span>
5212
+ <span class="add-menu-picker-category-count">
5213
+ <span class="add-menu-picker-category-selected-count" if="showSelectedCount">{selectedCount}</span><span if="showSelectedCount"> / </span>{itemCount}
5214
+ </span>
5215
+ </button>
5216
+ </nav>
5217
+ <div class="add-menu-picker-main">
5218
+ <h2 class="add-menu-picker-main-title" if="showAddMenuDockBrowseTitle">{addMenuDockBrowseCategoryTitle}</h2>
5219
+ <p class="add-menu-picker-search-summary" if="showAddMenuDockSearchSummary">{addMenuDockSearchSummary}</p>
5220
+ <div class="add-menu-picker-subcategory-scroll" if="showAddMenuDockSubCategoryFilters">
5221
+ <div class="add-menu-picker-subcategories">
5222
+ <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>
5223
+ </div>
5224
+ </div>
5225
+ <div class="add-menu-picker-browse-content" if="showAddMenuDockComponents">
5226
+ <div class="add-menu-picker-browse-row" forEach="addMenuDockBrowseRows" trackBy="rowKey">
5227
+ <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
5228
+ <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>
5229
+ <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>
5230
+ </div>
5231
+ <div class="add-menu-picker-load-more-row" if="showAddMenuDockLoadMore">
5232
+ <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-dock-load-more="1">{addMenuDockLoadMoreLabel}</button>
5233
+ </div>
5234
+ </div>
5235
+ <p class="add-menu-picker-hint" if="showAddMenuDockNoComponents">No components in this group.</p>
5236
+ <p class="add-menu-picker-hint" if="showAddMenuDockNoSearchResults">No elements match your search.</p>
5237
+ </div>
5238
+ </div>
5239
+ </div>
5240
+ </div>
5241
+ </div>
5242
+
5243
+ <div class="aiditor-toast" if="showToastMessage" role="status" aria-live="polite">{toastMessage}</div>
5244
+
5245
+ <div
5246
+ class="asset-mention-autocomplete"
5247
+ if="showAssetMentionPanel"
5248
+ ref="assetMentionPanel"
5249
+ role="listbox"
5250
+ style="left: {assetMentionLeft}px; top: {assetMentionTop}px;"
5251
+ >
5252
+ <div class="asset-mention-header">
5253
+ <button
5254
+ type="button"
5255
+ class="asset-mention-header-back"
5256
+ if="showAssetMentionHeaderBack"
5257
+ ref="assetMentionHeaderBack"
5258
+ aria-label="Back"
5259
+ >←</button>
5260
+ <div class="asset-mention-header-search-field" if="showAssetMentionSearchField">
5261
+ <span class="asset-mention-header-search-icon" aria-hidden="true">⌕</span>
5262
+ <input
5263
+ type="search"
5264
+ class="asset-mention-header-search-input"
5265
+ ref="assetMentionHeaderSearchInput"
5266
+ placeholder="Search assets…"
5267
+ value="{assetMentionSearchQuery}"
5268
+ aria-label="Search assets"
5269
+ />
5270
+ <button
5271
+ type="button"
5272
+ class="asset-mention-header-search-close"
5273
+ ref="assetMentionHeaderSearchClose"
5274
+ aria-label="Close search"
5275
+ >×</button>
5276
+ </div>
5277
+ <span class="asset-mention-header-title" if="!showAssetMentionSearchField">{assetMentionHeaderTitle}</span>
5278
+ <button
5279
+ type="button"
5280
+ class="asset-mention-header-search-toggle"
5281
+ if="!showAssetMentionSearchField"
5282
+ ref="assetMentionHeaderSearchToggle"
5283
+ aria-label="Search assets"
5284
+ >⌕</button>
5285
+ </div>
5286
+ <div class="asset-mention-list">
5287
+ <button
5288
+ type="button"
5289
+ class="{cssClass}"
5290
+ forEach="assetMentionRows"
5291
+ trackBy="rowKey"
5292
+ ref="assetMentionRow"
5293
+ role="option"
5294
+ data-asset-mention-row-index="{rowIndex}"
5295
+ >
5296
+ <img if="showThumbnail" class="asset-mention-option-thumb" src="{thumbnailUrl}" alt="" />
5297
+ <span if="showInfoIcon" class="asset-mention-option-icon" aria-hidden="true">▦</span>
5298
+ <span if="showAtIcon" class="asset-mention-option-icon asset-mention-option-icon--at" aria-hidden="true">@</span>
5299
+ <span if="showNavIcon" class="asset-mention-option-icon asset-mention-option-icon--nav" aria-hidden="true">›</span>
5300
+ <span class="asset-mention-option-text">
5301
+ <span class="asset-mention-option-title">{title}</span>
5302
+ <span class="asset-mention-option-subtitle" if="subtitle">{subtitle}</span>
5303
+ </span>
5304
+ </button>
5305
+ </div>
5306
+ </div>
5307
+
5308
+ <div class="stage-drop-ghost" ref="stageDropGhost" aria-hidden="true" style="display: none;">
5309
+ <span class="stage-drop-ghost-marker"></span>
5310
+ <span class="stage-drop-ghost-hint"></span>
5311
+ </div>
5312
+
5313
+ <div
5314
+ ref="assetMentionCaretMirror"
5315
+ aria-hidden="true"
5316
+ style="position: absolute; visibility: hidden; pointer-events: none;"
5317
+ ><span ref="assetMentionCaretMirrorSpan"></span></div>
5318
+
5319
+ <div class="{addMenuPickerOverlayClass}" if="showAddMenuPickerModal" ref="addMenuPickerOverlay" role="dialog" aria-modal="true" aria-label="Add Assets">
5320
+ <div class="{addMenuPickerDialogClass}" ref="addMenuPickerDialog">
5321
+ <div class="add-menu-picker-header">
5322
+ <button type="button" class="add-menu-picker-header-back" if="showAddMenuPickerHeaderBack" ref="addMenuPickerBackBtn" aria-label="Back to Add Page"><svg class="add-menu-picker-header-back-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9.21973 8.46978C9.51262 8.17688 9.98738 8.17688 10.2803 8.46978C10.5731 8.76268 10.5731 9.23745 10.2803 9.53032L8.56055 11.2501H17.25C17.6642 11.2501 18 11.5858 18 12.0001C17.9999 12.4142 17.6642 12.75 17.25 12.7501H8.56055L10.2803 14.4698C10.5731 14.7627 10.5731 15.2375 10.2803 15.5303C9.9874 15.8232 9.51261 15.8231 9.21973 15.5303L6.21973 12.5303C6.18773 12.4983 6.15977 12.4636 6.13477 12.4278C6.10404 12.3837 6.07744 12.3365 6.05664 12.2862C6.0359 12.2359 6.02106 12.1838 6.01172 12.1309C6.00423 12.0884 6.00001 12.0447 6 12.0001C6 11.9548 6.00403 11.9103 6.01172 11.8672C6.02081 11.8164 6.03505 11.7663 6.05469 11.7178L6.05859 11.7081C6.07937 11.6589 6.10545 11.6125 6.13574 11.5694C6.16035 11.5344 6.18842 11.5011 6.21973 11.4698L9.21973 8.46978Z" fill="currentColor"/></svg></button>
5323
+ <span class="add-menu-picker-title">{addMenuPickerHeaderTitle}</span>
5324
+ <button type="button" class="add-menu-picker-close" ref="addMenuPickerCloseBtn" aria-label="Close">×</button>
5325
+ </div>
5326
+ <div class="add-menu-picker-body">
5327
+ <p class="add-menu-picker-hint" if="showAddMenuPickerLoading">Loading plugin catalog…</p>
5328
+ <p class="add-menu-picker-hint" if="showAddMenuPickerEmpty">No Add Menu items yet. Install plugins in Project settings, then try again.</p>
5329
+ <div class="add-menu-picker-browse" if="showAddMenuPickerBrowse">
5330
+ <div class="add-menu-picker-search-row">
5331
+ <button type="button" class="add-menu-picker-back" if="showAddMenuPickerSearchBack" data-add-menu-picker-search-back="1" aria-label="Back to browse">‹</button>
5332
+ <div class="add-menu-picker-search-field">
5333
+ <span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
5334
+ <input type="search" class="add-menu-picker-search-input" ref="addMenuPickerSearchInput" placeholder="Search elements…" value="{addMenuPickerSearchQuery}" />
5335
+ <button type="button" class="add-menu-picker-search-clear" if="showAddMenuPickerSearchClear" data-add-menu-picker-search-clear="1" aria-label="Clear search">×</button>
5336
+ </div>
5337
+ </div>
5338
+ <div class="{addMenuPickerBrowseLayoutClass}">
5339
+ <nav class="add-menu-picker-sidebar" if="showAddMenuPickerBrowseLayout" aria-label="Categories">
5340
+ <button type="button" class="{cssClass}" forEach="addMenuPickerLeftNavRows" trackBy="rowKey" data-add-menu-picker-left-nav="1" data-nav-key="{navKey}">
5341
+ <span class="add-menu-picker-category-label">{label}</span>
5342
+ <span class="add-menu-picker-category-count">
5343
+ <span class="add-menu-picker-category-selected-count" if="showSelectedCount">{selectedCount}</span><span if="showSelectedCount"> / </span>{itemCount}
5344
+ </span>
5345
+ </button>
5346
+ </nav>
5347
+ <div class="add-menu-picker-main">
5348
+ <h2 class="add-menu-picker-main-title" if="showAddMenuPickerBrowseTitle">{addMenuPickerBrowseCategoryTitle}</h2>
5349
+ <p class="add-menu-picker-search-summary" if="showAddMenuPickerSearchSummary">{addMenuPickerSearchSummary}</p>
5350
+ <div class="add-menu-picker-subcategory-scroll" if="showAddMenuPickerSubCategoryFilters">
5351
+ <button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollPrev" data-add-menu-picker-subcategory-scroll="1" data-direction="prev" aria-label="Scroll filters left">‹</button>
5352
+ <div class="add-menu-picker-subcategories" ref="addMenuPickerSubCategoryFilters">
5353
+ <button type="button" class="{cssClass}" forEach="addMenuPickerSubCategoryFilterRows" trackBy="rowKey" data-add-menu-picker-subcategory-filter="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showSubCategoryCount">{subCategoryCountLabel}</span></button>
5354
+ </div>
5355
+ <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>
5356
+ </div>
5357
+ <div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
5358
+ <div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
5359
+ <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
5360
+ <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>
5361
+ <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>
5362
+ </div>
5363
+ <div class="add-menu-picker-load-more-row" if="showAddMenuPickerLoadMore">
5364
+ <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-picker-load-more="1">{addMenuPickerLoadMoreLabel}</button>
5365
+ </div>
5366
+ </div>
5367
+ <p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
5368
+ <p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
5369
+ </div>
5370
+ </div>
5371
+ </div>
5372
+ </div>
5373
+ <div class="add-menu-picker-footer" if="showAddMenuPickerDone">
5374
+ <button type="button" class="harmony-btn-primary add-menu-picker-done-btn" data-add-menu-picker-done="1" disabled="addMenuPickerDoneDisabled">{addMenuPickerDoneLabel}</button>
5375
+ </div>
5376
+ </div>
5377
+ </div>
5378
+
5379
+ <div class="add-menu-picker-dismiss-confirm-overlay" if="showAddMenuPickerDismissConfirm" ref="addMenuPickerDismissConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm close">
5380
+ <div class="add-menu-picker-dismiss-confirm-dialog">
5381
+ <p class="add-menu-picker-dismiss-confirm-msg">{addMenuPickerDismissConfirmMessage}</p>
5382
+ <div class="add-menu-picker-dismiss-confirm-actions">
5383
+ <button type="button" class="harmony-btn-secondary" data-add-menu-picker-dismiss-cancel="1">Cancel</button>
5384
+ <button type="button" class="harmony-btn-primary" data-add-menu-picker-dismiss-confirm="1">Close anyway</button>
5385
+ </div>
5386
+ </div>
5387
+ </div>
5388
+
3476
5389
  <div class="file-preview-overlay" if="showFilePreview" ref="filePreviewBackdrop">
3477
5390
  <div class="file-preview-panel">
3478
5391
  <div class="file-preview-header">
@@ -3494,15 +5407,13 @@ data:
3494
5407
  <h2 class="video-review-title">Review recording</h2>
3495
5408
  <p class="video-review-meta" if="videoReviewReady">{videoTimeLabel}</p>
3496
5409
  </div>
3497
- <button type="button" class="video-review-secondary" ref="videoReviewCloseBtn">Close</button>
5410
+ <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>
3498
5411
  </div>
3499
5412
  <p if="videoReviewPreparing">Preparing recording…</p>
3500
5413
  <p class="preview-error" if="videoReviewError">{videoReviewErrorText}</p>
3501
5414
  <!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
3502
- <div if="videoReviewPreparing || videoReviewReady">
5415
+ <div class="video-review-body" if="videoReviewPreparing || videoReviewReady">
3503
5416
  <div class="video-review-tools">
3504
- <button type="button" class="{videoModalToolNoneOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolNoneBtn" title="Select and pan the video" aria-label="Select and pan the video"><span class="tool-glyph" aria-hidden="true">☒</span></button>
3505
- <span class="tool-group-sep"></span>
3506
5417
  <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>
3507
5418
  <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>
3508
5419
  </div>
@@ -3518,19 +5429,33 @@ data:
3518
5429
  ></video>
3519
5430
  <div class="{videoModalOverlayPointerNone ? visual-overlay-none} visual-overlay" ref="videoReviewOverlay">
3520
5431
  <div
3521
- class="point-marker"
5432
+ class="{markerOpen ? point-marker-open} {markerEditMode ? marker-edit-mode} point-marker"
3522
5433
  forEach="videoPointDisplayItems"
3523
5434
  trackBy="id"
5435
+ ref="visualAnnotationMarker"
5436
+ data-visual-annotation-marker="{id}"
3524
5437
  style="left: {leftPct}%; top: {topPct}%;"
3525
5438
  >
3526
5439
  <span class="point-marker-idx">{indexLabel}</span>
3527
5440
  </div>
3528
5441
  <div
3529
- class="area-rect"
5442
+ class="{markerOpen ? area-rect-open} {markerEditMode ? marker-edit-mode} area-rect"
3530
5443
  forEach="videoAreaDisplayItems"
3531
5444
  trackBy="id"
5445
+ ref="visualAnnotationMarker"
5446
+ data-visual-annotation-marker="{id}"
3532
5447
  style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
3533
- ><span class="area-marker-idx">{indexLabel}</span></div>
5448
+ >
5449
+ <span class="area-marker-idx">{indexLabel}</span>
5450
+ <div if="markerEditMode" class="area-resize-handle area-resize-nw" data-area-resize-handle="nw"></div>
5451
+ <div if="markerEditMode" class="area-resize-handle area-resize-n" data-area-resize-handle="n"></div>
5452
+ <div if="markerEditMode" class="area-resize-handle area-resize-ne" data-area-resize-handle="ne"></div>
5453
+ <div if="markerEditMode" class="area-resize-handle area-resize-e" data-area-resize-handle="e"></div>
5454
+ <div if="markerEditMode" class="area-resize-handle area-resize-se" data-area-resize-handle="se"></div>
5455
+ <div if="markerEditMode" class="area-resize-handle area-resize-s" data-area-resize-handle="s"></div>
5456
+ <div if="markerEditMode" class="area-resize-handle area-resize-sw" data-area-resize-handle="sw"></div>
5457
+ <div if="markerEditMode" class="area-resize-handle area-resize-w" data-area-resize-handle="w"></div>
5458
+ </div>
3534
5459
  <div
3535
5460
  class="area-rect area-rect-draft"
3536
5461
  if="showVideoAreaDraftRect"
@@ -3539,7 +5464,7 @@ data:
3539
5464
  </div>
3540
5465
  <div class="visual-popovers" if="showVideoAnnotationPopoversAtPlayhead">
3541
5466
  <div
3542
- class="{popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
5467
+ class="{!showPopover ? visual-popover-hidden} {popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
3543
5468
  forEach="videoAnnotationRows"
3544
5469
  trackBy="id"
3545
5470
  ref="videoAnnotationRow"
@@ -3550,6 +5475,12 @@ data:
3550
5475
  <span class="visual-annotation-kind">{kindLabel}</span>
3551
5476
  <div class="visual-annotation-actions">
3552
5477
  <button type="button" class="visual-annotation-remove" title="Remove annotation">Remove</button>
5478
+ <button
5479
+ type="button"
5480
+ class="visual-annotation-minimize"
5481
+ title="Minimize comment"
5482
+ aria-label="Minimize comment"
5483
+ ><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M4 6l3 3 3-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
3553
5484
  </div>
3554
5485
  </div>
3555
5486
  <textarea
@@ -3558,35 +5489,6 @@ data:
3558
5489
  data-annotation-id="{id}"
3559
5490
  value="{instruction}"
3560
5491
  ></textarea>
3561
- <div class="annotation-add-menu">
3562
- <div class="annotation-add-menu-panel add-menu-panel">
3563
- <div class="add-menu-panel-attached">
3564
- <div if="showMarkerAddMenuChips">
3565
- <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
3566
- <div class="add-page-plugin-chips">
3567
- <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
3568
- </div>
3569
- </div>
3570
- <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
3571
- <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
3572
- <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
3573
- <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
3574
- <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
3575
- <span class="add-page-hint">Route params:</span>
3576
- <button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
3577
- </div>
3578
- <div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
3579
- <div class="add-page-section-label">Planned page route</div>
3580
- <input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
3581
- </div>
3582
- <div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
3583
- <p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
3584
- <button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
3585
- <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
3586
- </div>
3587
- </div>
3588
- </div>
3589
- </div>
3590
5492
  <div class="visual-annotation-files">
3591
5493
  <div class="visual-attach-row">
3592
5494
  <button type="button" class="visual-attach-btn visual-video-annotation-attach" data-annotation-id="{id}">
@@ -3637,14 +5539,24 @@ data:
3637
5539
  <p class="visual-submit-error" if="showVideoSubmitError">{videoSubmitError}</p>
3638
5540
  <p class="visual-submit-progress" if="showVideoSubmitProgress">{videoSubmitProgress}</p>
3639
5541
  <div class="video-review-actions">
3640
- <button type="button" class="video-review-secondary" ref="videoReviewDiscardBtn">Discard recording</button>
5542
+ <button type="button" class="video-review-secondary" ref="videoReviewCancelBtn">Cancel</button>
3641
5543
  <button type="button" class="video-review-primary" ref="videoReviewSendBtn" disabled="videoSendDisabled">Send</button>
3642
5544
  </div>
3643
5545
  </div>
3644
5546
  </div>
3645
5547
  </div>
3646
5548
 
3647
- <div class="snapshot-overlay" if="showSnapshotModal" ref="snapshotBackdrop" tabindex="-1" role="dialog" aria-modal="true" aria-label="Snapshot annotation">
5549
+ <div class="video-review-close-confirm-overlay" if="showVideoReviewCloseConfirm" ref="videoReviewCloseConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm close review">
5550
+ <div class="video-review-close-confirm-dialog">
5551
+ <p class="video-review-close-confirm-msg">Close review? Unsent annotations will be lost unless you cancel.</p>
5552
+ <div class="video-review-close-confirm-actions">
5553
+ <button type="button" class="harmony-btn-secondary" ref="videoReviewCloseConfirmCancelBtn">Cancel</button>
5554
+ <button type="button" class="harmony-btn-primary" ref="videoReviewCloseConfirmBtn">Close anyway</button>
5555
+ </div>
5556
+ </div>
5557
+ </div>
5558
+
5559
+ <div class="snapshot-overlay" if="showSnowflakeFeatures && showSnapshotModal" ref="snapshotBackdrop" tabindex="-1" role="dialog" aria-modal="true" aria-label="Snapshot annotation">
3648
5560
  <div class="snapshot-panel">
3649
5561
  <div class="snapshot-header">
3650
5562
  <h2 class="snapshot-title">Snapshot Annotation</h2>
@@ -3718,35 +5630,6 @@ data:
3718
5630
  data-annotation-id="{id}"
3719
5631
  value="{instruction}"
3720
5632
  ></textarea>
3721
- <div class="annotation-add-menu">
3722
- <div class="annotation-add-menu-panel add-menu-panel">
3723
- <div class="add-menu-panel-attached">
3724
- <div if="showMarkerAddMenuChips">
3725
- <div class="add-page-plugins-zone-title">Add Menu on this marker</div>
3726
- <div class="add-page-plugin-chips">
3727
- <span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
3728
- </div>
3729
- </div>
3730
- <p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
3731
- <button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
3732
- <p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
3733
- <p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
3734
- <div class="add-menu-route-params" if="showCrAddMenuRouteParams">
3735
- <span class="add-page-hint">Route params:</span>
3736
- <button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
3737
- </div>
3738
- <div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
3739
- <div class="add-page-section-label">Planned page route</div>
3740
- <input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
3741
- </div>
3742
- <div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
3743
- <p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
3744
- <button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
3745
- <button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
3746
- </div>
3747
- </div>
3748
- </div>
3749
- </div>
3750
5633
  <div class="visual-annotation-files">
3751
5634
  <div class="visual-attach-row">
3752
5635
  <button type="button" class="visual-attach-btn snapshot-annotation-attach" data-annotation-id="{id}">