@firstpick/pi-package-webui 0.1.3 → 0.1.5

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.
package/public/index.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <div id="tabBar" class="terminal-tabs" role="tablist" aria-label="Pi terminal tabs">
30
30
  <button id="newTabButton" class="terminal-new-tab-button" type="button" title="Start a separate isolated Pi terminal">+ Tab</button>
31
31
  </div>
32
+ <button id="closeAllTabsButton" class="terminal-close-all-button" type="button" title="Close all terminal tabs">Close all Tabs</button>
32
33
  </header>
33
34
  <div id="widgetArea" class="widget-area"></div>
34
35
  <div id="chat" class="chat" aria-live="polite">
@@ -76,6 +77,26 @@
76
77
  aria-label="Start guided Git workflow: git add dot, run git-staged-msg, preview messages, commit short or long, then git push. Cancel is available at each step."
77
78
  data-tooltip="Guided Git workflow:&#10;1. Run git add .&#10;2. Run /git-staged-msg&#10;3. Preview short + long messages&#10;4. Commit with short or long message&#10;5. Run git push&#10;Cancel is available at each step."
78
79
  >Git workflow</button>
80
+ <div class="composer-publish-menu">
81
+ <button
82
+ id="publishButton"
83
+ class="composer-publish-button"
84
+ type="button"
85
+ title="Choose a publish workflow"
86
+ aria-label="Open publish workflows"
87
+ aria-haspopup="menu"
88
+ aria-expanded="false"
89
+ aria-controls="publishMenu"
90
+ >Publish</button>
91
+ <div id="publishMenu" class="composer-publish-menu-panel" role="menu" aria-label="Publish workflows">
92
+ <button id="releaseNpmButton" class="composer-publish-menu-item" type="button" role="menuitem" data-command="/release-npm">
93
+ <span>NPM Release</span>
94
+ </button>
95
+ <button id="releaseAurButton" class="composer-publish-menu-item" type="button" role="menuitem" data-command="/release-aur">
96
+ <span>AUR Release</span>
97
+ </button>
98
+ </div>
99
+ </div>
79
100
  </div>
80
101
  <div class="spacer"></div>
81
102
  <button
@@ -141,8 +162,20 @@
141
162
  <div id="networkStatus" class="network-status closed">Local only</div>
142
163
  <button id="openNetworkButton" type="button">Open to network</button>
143
164
  </div>
165
+ <div class="control-field notification-control-field">
166
+ <span class="control-label">Notifications</span>
167
+ <label class="toggle-control" for="agentDoneNotificationsToggle">
168
+ <input id="agentDoneNotificationsToggle" type="checkbox" />
169
+ <span>
170
+ <span class="toggle-control-label">Agent done notifications</span>
171
+ <span id="agentDoneNotificationsStatus" class="toggle-control-hint">Off</span>
172
+ </span>
173
+ </label>
174
+ </div>
144
175
  <button id="abortButton" type="button" class="danger">Abort</button>
145
176
  </div>
177
+ <h2>Optional features</h2>
178
+ <div id="optionalFeaturesBox" class="optional-features-box muted">Checking optional features…</div>
146
179
  <h2>Session</h2>
147
180
  <dl id="stateDetails" class="details"></dl>
148
181
  <h2>Queue</h2>
@@ -1,4 +1,4 @@
1
- const CACHE_NAME = "pi-webui-pwa-v6";
1
+ const CACHE_NAME = "pi-webui-pwa-v12";
2
2
  const APP_SHELL = [
3
3
  "/",
4
4
  "/index.html",
package/public/styles.css CHANGED
@@ -63,6 +63,7 @@
63
63
  --visual-viewport-offset-top: 0px;
64
64
  --keyboard-inset-bottom: 0px;
65
65
 
66
+ font-size: 80%;
66
67
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
67
68
  }
68
69
 
@@ -476,7 +477,8 @@ body.side-panel-collapsed .terminal-tabs-shell {
476
477
  display: grid;
477
478
  gap: 0.42rem;
478
479
  }
479
- .control-field label {
480
+ .control-field label,
481
+ .control-field .control-label {
480
482
  color: rgba(var(--ctp-text-rgb), 0.74);
481
483
  font-size: 0.72rem;
482
484
  font-weight: 900;
@@ -488,6 +490,56 @@ body.side-panel-collapsed .terminal-tabs-shell {
488
490
  width: 100%;
489
491
  min-width: 0;
490
492
  }
493
+ .toggle-control {
494
+ display: grid;
495
+ grid-template-columns: auto minmax(0, 1fr);
496
+ gap: 0.65rem;
497
+ align-items: center;
498
+ min-height: 44px;
499
+ padding: 0.58rem 0.68rem;
500
+ cursor: pointer;
501
+ border: 1px solid rgba(180, 190, 254, 0.20);
502
+ border-radius: 0.72rem;
503
+ background: rgba(var(--ctp-crust-rgb), 0.58);
504
+ }
505
+ .control-field .toggle-control {
506
+ color: rgba(var(--ctp-text-rgb), 0.88);
507
+ font-size: inherit;
508
+ font-weight: inherit;
509
+ letter-spacing: normal;
510
+ text-transform: none;
511
+ }
512
+ .toggle-control input {
513
+ width: 1.15rem;
514
+ min-width: 1.15rem;
515
+ height: 1.15rem;
516
+ min-height: 1.15rem;
517
+ margin: 0;
518
+ cursor: pointer;
519
+ accent-color: var(--ctp-mauve);
520
+ box-shadow: none;
521
+ }
522
+ .toggle-control-label {
523
+ display: block;
524
+ color: var(--ctp-text);
525
+ font-size: 0.82rem;
526
+ font-weight: 900;
527
+ }
528
+ .toggle-control-hint {
529
+ display: block;
530
+ margin-top: 0.16rem;
531
+ color: rgba(var(--ctp-subtext-rgb), 0.70);
532
+ font-size: 0.72rem;
533
+ font-weight: 700;
534
+ }
535
+ .toggle-control:has(input:checked) {
536
+ border-color: rgba(148, 226, 213, 0.42);
537
+ box-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.10);
538
+ }
539
+ .toggle-control:has(input:disabled) {
540
+ cursor: not-allowed;
541
+ opacity: 0.62;
542
+ }
491
543
  .network-status {
492
544
  display: grid;
493
545
  gap: 0.42rem;
@@ -572,6 +624,103 @@ body.side-panel-collapsed .terminal-tabs-shell {
572
624
  .side-panel-controls .danger {
573
625
  margin-top: 0.15rem;
574
626
  }
627
+ .optional-features-box {
628
+ display: grid;
629
+ gap: 0.6rem;
630
+ padding: 0.72rem;
631
+ border: 1px solid rgba(180, 190, 254, 0.16);
632
+ border-radius: 0.85rem;
633
+ background: rgba(var(--ctp-crust-rgb), 0.46);
634
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(148, 226, 213, 0.05);
635
+ }
636
+ .optional-feature-row {
637
+ display: grid;
638
+ grid-template-columns: minmax(0, 1fr) auto;
639
+ gap: 0.62rem;
640
+ align-items: start;
641
+ min-width: 0;
642
+ padding: 0.62rem;
643
+ border: 1px solid rgba(180, 190, 254, 0.14);
644
+ border-radius: 0.72rem;
645
+ background: rgba(var(--ctp-crust-rgb), 0.55);
646
+ }
647
+ .optional-feature-row.enabled {
648
+ border-color: rgba(166, 227, 161, 0.28);
649
+ }
650
+ .optional-feature-row.disabled {
651
+ border-color: rgba(249, 226, 175, 0.28);
652
+ }
653
+ .optional-feature-row.missing {
654
+ border-color: rgba(243, 139, 168, 0.25);
655
+ }
656
+ .optional-feature-main {
657
+ display: grid;
658
+ gap: 0.28rem;
659
+ min-width: 0;
660
+ }
661
+ .optional-feature-title {
662
+ display: flex;
663
+ flex-wrap: wrap;
664
+ gap: 0.42rem;
665
+ align-items: center;
666
+ min-width: 0;
667
+ }
668
+ .optional-feature-title strong {
669
+ color: rgba(var(--ctp-text-rgb), 0.94);
670
+ font-size: 0.82rem;
671
+ }
672
+ .optional-feature-pill {
673
+ display: inline-flex;
674
+ align-items: center;
675
+ min-height: 1.15rem;
676
+ padding: 0.12rem 0.42rem;
677
+ border-radius: 999px;
678
+ color: var(--ctp-subtext);
679
+ border: 1px solid rgba(180, 190, 254, 0.18);
680
+ background: rgba(var(--ctp-surface-rgb), 0.55);
681
+ font-size: 0.64rem;
682
+ font-weight: 900;
683
+ letter-spacing: 0.08em;
684
+ text-transform: uppercase;
685
+ }
686
+ .optional-feature-pill.enabled {
687
+ color: var(--ctp-green);
688
+ border-color: rgba(166, 227, 161, 0.32);
689
+ }
690
+ .optional-feature-pill.disabled {
691
+ color: var(--ctp-yellow);
692
+ border-color: rgba(249, 226, 175, 0.32);
693
+ }
694
+ .optional-feature-pill.missing {
695
+ color: var(--ctp-red);
696
+ border-color: rgba(243, 139, 168, 0.32);
697
+ }
698
+ .optional-feature-detail,
699
+ .optional-feature-description {
700
+ color: rgba(var(--ctp-subtext-rgb), 0.74);
701
+ font-size: 0.72rem;
702
+ line-height: 1.35;
703
+ }
704
+ .optional-feature-package {
705
+ width: fit-content;
706
+ max-width: 100%;
707
+ overflow-wrap: anywhere;
708
+ color: rgba(var(--ctp-teal-rgb), 0.86);
709
+ font-size: 0.68rem;
710
+ }
711
+ .optional-feature-action {
712
+ min-width: 5.2rem;
713
+ white-space: nowrap;
714
+ }
715
+ .optional-feature-action.install {
716
+ color: var(--ctp-yellow);
717
+ border-color: rgba(249, 226, 175, 0.32);
718
+ }
719
+ .optional-feature-action.install:not(:disabled):hover {
720
+ color: #11111b;
721
+ border-color: transparent;
722
+ background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach));
723
+ }
575
724
 
576
725
  .terminal-tabs-shell {
577
726
  position: relative;
@@ -589,6 +738,23 @@ body.side-panel-collapsed .terminal-tabs-shell {
589
738
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.20);
590
739
  }
591
740
  .terminal-tabs-toggle-button { display: none; }
741
+ .terminal-close-all-button {
742
+ flex: 0 0 auto;
743
+ min-height: 2.35rem;
744
+ padding: 0.38rem 0.7rem;
745
+ color: var(--ctp-red);
746
+ white-space: nowrap;
747
+ border-color: rgba(243, 139, 168, 0.32);
748
+ background:
749
+ linear-gradient(120deg, rgba(243, 139, 168, 0.12), rgba(250, 179, 135, 0.08)),
750
+ rgba(var(--ctp-crust-rgb), 0.62);
751
+ }
752
+ .terminal-close-all-button:hover,
753
+ .terminal-close-all-button:focus-visible {
754
+ color: #11111b;
755
+ border-color: transparent;
756
+ background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
757
+ }
592
758
  .terminal-tabs {
593
759
  display: flex;
594
760
  align-items: center;
@@ -867,6 +1033,9 @@ body.side-panel-collapsed .terminal-tabs-shell {
867
1033
  color: #11111b;
868
1034
  background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
869
1035
  }
1036
+ .terminal-tab-group-close {
1037
+ border-left-color: rgba(243, 139, 168, 0.18);
1038
+ }
870
1039
  .terminal-new-tab-button {
871
1040
  flex: 0 0 auto;
872
1041
  padding: 0.45rem 0.72rem;
@@ -1260,6 +1429,120 @@ button.footer-meta {
1260
1429
  white-space: pre-wrap;
1261
1430
  box-shadow: inset 0 0 1.4rem rgba(148, 226, 213, 0.06), 0 0 1rem rgba(148, 226, 213, 0.08);
1262
1431
  }
1432
+ .release-npm-widget {
1433
+ display: grid;
1434
+ gap: 0.62rem;
1435
+ padding: 0.72rem;
1436
+ white-space: normal;
1437
+ border-color: rgba(245, 194, 231, 0.34);
1438
+ background:
1439
+ radial-gradient(circle at 4% 0%, rgba(245, 194, 231, 0.16), transparent 16rem),
1440
+ radial-gradient(circle at 96% 12%, rgba(148, 226, 213, 0.12), transparent 18rem),
1441
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-base-rgb), 0.78));
1442
+ }
1443
+ .release-aur-widget {
1444
+ border-color: rgba(250, 179, 135, 0.34);
1445
+ background:
1446
+ radial-gradient(circle at 4% 0%, rgba(250, 179, 135, 0.14), transparent 16rem),
1447
+ radial-gradient(circle at 96% 12%, rgba(166, 227, 161, 0.12), transparent 18rem),
1448
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-base-rgb), 0.78));
1449
+ }
1450
+ .release-aur-widget .release-npm-kicker { color: var(--ctp-peach); }
1451
+ .release-npm-header {
1452
+ display: grid;
1453
+ grid-template-columns: minmax(0, 1fr) auto auto;
1454
+ gap: 0.7rem;
1455
+ align-items: center;
1456
+ }
1457
+ .release-npm-title-wrap {
1458
+ display: grid;
1459
+ gap: 0.14rem;
1460
+ min-width: 0;
1461
+ }
1462
+ .release-npm-kicker {
1463
+ color: var(--ctp-pink);
1464
+ font-size: 0.68rem;
1465
+ font-weight: 950;
1466
+ letter-spacing: 0.16em;
1467
+ text-transform: uppercase;
1468
+ }
1469
+ .release-npm-title {
1470
+ min-width: 0;
1471
+ overflow: hidden;
1472
+ color: rgba(var(--ctp-text-rgb), 0.96);
1473
+ text-overflow: ellipsis;
1474
+ white-space: nowrap;
1475
+ }
1476
+ .release-npm-meta,
1477
+ .release-npm-actions {
1478
+ display: flex;
1479
+ flex-wrap: wrap;
1480
+ gap: 0.42rem;
1481
+ align-items: center;
1482
+ justify-content: flex-end;
1483
+ }
1484
+ .release-npm-pill {
1485
+ display: inline-flex;
1486
+ align-items: center;
1487
+ max-width: min(32rem, 50vw);
1488
+ min-height: 1.55rem;
1489
+ padding: 0.16rem 0.5rem;
1490
+ overflow: hidden;
1491
+ color: var(--ctp-yellow);
1492
+ border: 1px solid rgba(249, 226, 175, 0.22);
1493
+ border-radius: 999px;
1494
+ background: rgba(var(--ctp-crust-rgb), 0.48);
1495
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1496
+ font-size: 0.72rem;
1497
+ font-weight: 800;
1498
+ text-overflow: ellipsis;
1499
+ white-space: nowrap;
1500
+ }
1501
+ .release-npm-pill.elapsed { color: var(--ctp-teal); }
1502
+ .release-npm-action {
1503
+ min-height: 2rem;
1504
+ padding: 0.38rem 0.62rem;
1505
+ border-radius: 0.62rem;
1506
+ font-size: 0.76rem;
1507
+ font-weight: 850;
1508
+ }
1509
+ .release-npm-terminal {
1510
+ max-height: min(34rem, 42vh);
1511
+ min-height: 5.25rem;
1512
+ overflow: auto;
1513
+ padding: 0.7rem;
1514
+ border: 1px solid rgba(180, 190, 254, 0.16);
1515
+ border-radius: 0.78rem;
1516
+ background:
1517
+ linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.82), rgba(var(--ctp-mantle-rgb), 0.62)),
1518
+ radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.07), transparent 15rem);
1519
+ box-shadow: inset 0 0 1.5rem rgba(var(--ctp-crust-rgb), 0.36);
1520
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1521
+ font-size: 0.78rem;
1522
+ line-height: 1.42;
1523
+ overscroll-behavior: contain;
1524
+ }
1525
+ .release-npm-line {
1526
+ min-width: max-content;
1527
+ min-height: 1.42em;
1528
+ color: rgba(var(--ctp-text-rgb), 0.88);
1529
+ white-space: pre;
1530
+ }
1531
+ .release-npm-line.command { color: var(--ctp-sky); }
1532
+ .release-npm-line.target { color: var(--ctp-pink); font-weight: 850; }
1533
+ .release-npm-line.pass { color: var(--ctp-green); }
1534
+ .release-npm-line.fail { color: var(--ctp-red); }
1535
+ .release-npm-line.warn { color: var(--ctp-yellow); }
1536
+ .release-npm-line.info { color: rgba(var(--ctp-subtext-rgb), 0.80); }
1537
+ .release-npm-line.event { color: var(--ctp-mauve); }
1538
+ .release-npm-controls {
1539
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
1540
+ font-size: 0.75rem;
1541
+ line-height: 1.35;
1542
+ }
1543
+ .release-npm-log-widget .release-npm-terminal {
1544
+ max-height: min(42rem, 52vh);
1545
+ }
1263
1546
  .todo-widget {
1264
1547
  display: grid;
1265
1548
  gap: 0.52rem;
@@ -1464,6 +1747,13 @@ button.footer-meta {
1464
1747
  background: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.66), rgba(var(--ctp-mantle-rgb), 0.7));
1465
1748
  box-shadow: 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
1466
1749
  }
1750
+ .message.action-enter {
1751
+ animation: action-card-slide-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
1752
+ }
1753
+ @keyframes action-card-slide-in {
1754
+ from { opacity: 0; transform: translateY(0.42rem); }
1755
+ to { opacity: 1; transform: translateY(0); }
1756
+ }
1467
1757
  .message::before {
1468
1758
  content: "";
1469
1759
  position: absolute;
@@ -1614,6 +1904,18 @@ button.footer-meta {
1614
1904
  padding: 0 0.9rem 0.85rem;
1615
1905
  border-top: 1px solid rgba(249, 226, 175, 0.12);
1616
1906
  }
1907
+ .tool-result-preview {
1908
+ padding: 0 0.9rem 0.85rem;
1909
+ border-top: 1px solid rgba(249, 226, 175, 0.10);
1910
+ }
1911
+ .message-collapse[open] + .tool-result-preview {
1912
+ display: none;
1913
+ }
1914
+ .tool-result-preview-text {
1915
+ max-height: none;
1916
+ margin: 0;
1917
+ color: rgba(var(--ctp-text-rgb), 0.78);
1918
+ }
1617
1919
  .message.toolResult:not(.error) .message-collapse:not([open]) > summary.message-header,
1618
1920
  .message.bashExecution .message-collapse:not([open]) > summary.message-header,
1619
1921
  .message.compactionSummary .message-collapse:not([open]) > summary.message-header {
@@ -1777,7 +2079,10 @@ summary { cursor: pointer; color: var(--warning); }
1777
2079
  box-shadow: none;
1778
2080
  }
1779
2081
  .command-suggest-item + .command-suggest-item { border-top: 1px solid rgba(180, 190, 254, 0.08); }
1780
- .command-suggest-item:hover,
2082
+ .command-suggest-item:hover {
2083
+ box-shadow: none;
2084
+ transform: none;
2085
+ }
1781
2086
  .command-suggest-item.active {
1782
2087
  background: linear-gradient(90deg, rgba(203, 166, 247, 0.20), rgba(137, 180, 250, 0.10), rgba(148, 226, 213, 0.12));
1783
2088
  box-shadow: inset 3px 0 0 var(--ctp-teal), 0 0 1.2rem rgba(148, 226, 213, 0.10);
@@ -1838,11 +2143,26 @@ summary { cursor: pointer; color: var(--warning); }
1838
2143
  .spacer { flex: 1; }
1839
2144
  .composer-new-button,
1840
2145
  .composer-compact-button,
1841
- .composer-git-button {
2146
+ .composer-git-button,
2147
+ .composer-publish-menu {
1842
2148
  margin-right: 0.45rem;
1843
2149
  }
2150
+ .composer-publish-menu {
2151
+ position: relative;
2152
+ z-index: 1;
2153
+ display: inline-flex;
2154
+ align-items: stretch;
2155
+ overflow: visible;
2156
+ isolation: isolate;
2157
+ }
2158
+ .composer-publish-menu:hover,
2159
+ .composer-publish-menu:focus-within,
2160
+ .composer-publish-menu.open {
2161
+ z-index: 100;
2162
+ }
1844
2163
  .composer-compact-button,
1845
- .composer-git-button {
2164
+ .composer-git-button,
2165
+ .composer-publish-button {
1846
2166
  color: var(--ctp-teal);
1847
2167
  border-color: rgba(148, 226, 213, 0.36);
1848
2168
  background:
@@ -1857,8 +2177,17 @@ summary { cursor: pointer; color: var(--warning); }
1857
2177
  linear-gradient(120deg, rgba(166, 227, 161, 0.13), rgba(148, 226, 213, 0.10)),
1858
2178
  linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
1859
2179
  }
2180
+ .composer-publish-button {
2181
+ color: var(--ctp-peach);
2182
+ border-color: rgba(250, 179, 135, 0.38);
2183
+ background:
2184
+ linear-gradient(120deg, rgba(250, 179, 135, 0.13), rgba(245, 194, 231, 0.10)),
2185
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
2186
+ }
1860
2187
  .composer-compact-button:hover,
1861
- .composer-git-button:hover {
2188
+ .composer-git-button:hover,
2189
+ .composer-publish-button:hover,
2190
+ .composer-publish-button.menu-open {
1862
2191
  color: #11111b;
1863
2192
  background: linear-gradient(120deg, var(--ctp-teal), var(--ctp-blue), var(--ctp-mauve));
1864
2193
  border-color: transparent;
@@ -1866,6 +2195,59 @@ summary { cursor: pointer; color: var(--warning); }
1866
2195
  .composer-git-button:hover {
1867
2196
  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
1868
2197
  }
2198
+ .composer-publish-button:hover,
2199
+ .composer-publish-button.menu-open {
2200
+ background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow), var(--ctp-mauve));
2201
+ }
2202
+ .composer-publish-menu-panel {
2203
+ position: absolute;
2204
+ z-index: 100;
2205
+ inset: auto auto 100% 0;
2206
+ display: none;
2207
+ flex-direction: column;
2208
+ align-items: stretch;
2209
+ gap: 0.38rem;
2210
+ width: max-content;
2211
+ min-width: 100%;
2212
+ max-width: min(18rem, calc(100vw - 2rem));
2213
+ max-height: min(60vh, 24rem);
2214
+ padding-bottom: 0.38rem;
2215
+ overflow: auto;
2216
+ scrollbar-width: thin;
2217
+ }
2218
+ .composer-publish-menu:hover .composer-publish-menu-panel,
2219
+ .composer-publish-menu:focus-within .composer-publish-menu-panel,
2220
+ .composer-publish-menu.open .composer-publish-menu-panel {
2221
+ display: flex;
2222
+ }
2223
+ .composer-publish-menu.open .composer-publish-button {
2224
+ border-color: rgba(250, 179, 135, 0.58);
2225
+ }
2226
+ .composer-publish-menu-item {
2227
+ display: inline-flex;
2228
+ align-items: center;
2229
+ justify-content: center;
2230
+ width: min(13rem, calc(100vw - 2rem));
2231
+ min-width: 9rem;
2232
+ max-width: 13rem;
2233
+ margin: 0;
2234
+ color: var(--ctp-peach);
2235
+ border: 1px solid rgba(250, 179, 135, 0.30);
2236
+ border-radius: 0.78rem;
2237
+ background:
2238
+ linear-gradient(120deg, rgba(250, 179, 135, 0.12), rgba(249, 226, 175, 0.08)),
2239
+ var(--ctp-crust);
2240
+ text-align: center;
2241
+ white-space: nowrap;
2242
+ box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.045);
2243
+ }
2244
+ .composer-publish-menu-item:hover,
2245
+ .composer-publish-menu-item:focus-visible {
2246
+ color: #11111b;
2247
+ border-color: transparent;
2248
+ background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow));
2249
+ box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20);
2250
+ }
1869
2251
  .composer-row button[data-tooltip]::before,
1870
2252
  .composer-row button[data-tooltip]::after {
1871
2253
  position: absolute;
@@ -2018,6 +2400,61 @@ summary { cursor: pointer; color: var(--warning); }
2018
2400
  border-color: rgba(249, 226, 175, 0.46);
2019
2401
  color: var(--ctp-yellow);
2020
2402
  }
2403
+ .extension-dialog.release-dialog {
2404
+ width: min(64rem, calc(100vw - 1.5rem));
2405
+ max-height: min(82vh, 54rem);
2406
+ }
2407
+ .extension-dialog.release-dialog form {
2408
+ display: grid;
2409
+ grid-template-rows: auto minmax(0, 1fr) auto auto;
2410
+ max-height: calc(min(82vh, 54rem) - 2rem);
2411
+ }
2412
+ .extension-dialog.release-dialog #dialogTitle {
2413
+ color: var(--ctp-green);
2414
+ text-shadow: 0 0 1rem rgba(166, 227, 161, 0.20);
2415
+ }
2416
+ .extension-dialog.release-dialog #dialogMessage {
2417
+ min-height: 14rem;
2418
+ max-height: min(56vh, 34rem);
2419
+ margin: 0.75rem 0 1rem;
2420
+ padding: 0.9rem 1rem;
2421
+ overflow: auto;
2422
+ border: 1px solid rgba(137, 180, 250, 0.25);
2423
+ border-radius: 0.85rem;
2424
+ background: rgba(var(--ctp-crust-rgb), 0.58);
2425
+ color: var(--text);
2426
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2427
+ font-size: 0.88rem;
2428
+ line-height: 1.48;
2429
+ }
2430
+ .release-dialog-line {
2431
+ display: block;
2432
+ white-space: pre-wrap;
2433
+ overflow-wrap: anywhere;
2434
+ }
2435
+ .release-dialog-heading {
2436
+ margin-top: 0.55rem;
2437
+ color: var(--ctp-blue);
2438
+ font-weight: 800;
2439
+ }
2440
+ .release-dialog-heading:first-child { margin-top: 0; }
2441
+ .release-dialog-success { color: var(--ctp-green); }
2442
+ .release-dialog-warning { color: var(--ctp-yellow); }
2443
+ .release-dialog-danger { color: var(--ctp-red); }
2444
+ .release-dialog-muted { color: rgba(var(--ctp-subtext-rgb), 0.72); }
2445
+ .release-dialog-spacer { min-height: 0.55rem; }
2446
+ .extension-dialog.release-dialog .dialog-options {
2447
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
2448
+ gap: 0.7rem;
2449
+ }
2450
+ .extension-dialog.release-dialog .dialog-options button {
2451
+ text-align: center;
2452
+ font-weight: 800;
2453
+ }
2454
+ .extension-dialog.release-dialog .dialog-options button.release-cancel-action {
2455
+ border-color: rgba(249, 226, 175, 0.38);
2456
+ color: var(--ctp-yellow);
2457
+ }
2021
2458
  .extension-dialog menu {
2022
2459
  display: flex;
2023
2460
  justify-content: flex-end;
@@ -2237,7 +2674,7 @@ summary { cursor: pointer; color: var(--warning); }
2237
2674
  body.side-panel-collapsed .terminal-tabs-shell { padding-right: 2.75rem; }
2238
2675
  .terminal-tabs-toggle-button {
2239
2676
  display: block;
2240
- width: min(14rem, calc(100vw - 4rem));
2677
+ width: min(14rem, calc(100vw - 8.8rem));
2241
2678
  min-height: 28px;
2242
2679
  padding: 0.16rem 0.58rem;
2243
2680
  overflow: hidden;
@@ -2265,8 +2702,14 @@ summary { cursor: pointer; color: var(--warning); }
2265
2702
  top: calc(0.12rem + env(safe-area-inset-top));
2266
2703
  right: 0.42rem;
2267
2704
  }
2705
+ .terminal-close-all-button {
2706
+ min-height: 28px;
2707
+ padding: 0.16rem 0.46rem;
2708
+ border-radius: 0.58rem;
2709
+ font-size: 0.72rem;
2710
+ line-height: 1.1;
2711
+ }
2268
2712
  .terminal-tabs {
2269
- position: absolute;
2270
2713
  left: 0.55rem;
2271
2714
  right: 0.55rem;
2272
2715
  top: calc(100% + 0.35rem);
@@ -2341,7 +2784,24 @@ summary { cursor: pointer; color: var(--warning); }
2341
2784
  overflow: auto;
2342
2785
  padding: 0.36rem 0.55rem;
2343
2786
  }
2344
- .widget-area .widget:not(.todo-widget) { display: none; }
2787
+ .widget-area .widget:not(.todo-widget):not(.release-npm-widget) { display: none; }
2788
+ .release-npm-widget {
2789
+ gap: 0.45rem;
2790
+ padding: 0.55rem;
2791
+ }
2792
+ .release-npm-header {
2793
+ grid-template-columns: minmax(0, 1fr);
2794
+ align-items: stretch;
2795
+ }
2796
+ .release-npm-meta,
2797
+ .release-npm-actions { justify-content: flex-start; }
2798
+ .release-npm-terminal {
2799
+ max-height: min(28dvh, 16rem);
2800
+ min-height: 4rem;
2801
+ padding: 0.52rem;
2802
+ font-size: 0.72rem;
2803
+ }
2804
+ .release-npm-pill { max-width: 100%; }
2345
2805
  .todo-widget {
2346
2806
  gap: 0.38rem;
2347
2807
  margin: 0.2rem 0;
@@ -2583,7 +3043,38 @@ summary { cursor: pointer; color: var(--warning); }
2583
3043
  .composer-actions-panel > #steerButton,
2584
3044
  #newSessionButton,
2585
3045
  #compactButton,
2586
- #gitWorkflowButton { grid-column: span 1; }
3046
+ #gitWorkflowButton,
3047
+ .composer-actions-panel > .composer-publish-menu { grid-column: span 1; }
3048
+ .composer-actions-panel > .composer-publish-menu {
3049
+ width: 100%;
3050
+ margin-right: 0;
3051
+ }
3052
+ .composer-actions-panel > .composer-publish-menu.open {
3053
+ display: grid;
3054
+ grid-column: 1 / -1;
3055
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3056
+ gap: 0.42rem;
3057
+ }
3058
+ .composer-actions-panel > .composer-publish-menu.open .composer-publish-button,
3059
+ .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
3060
+ grid-column: 1 / -1;
3061
+ }
3062
+ .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
3063
+ position: static;
3064
+ flex-direction: column;
3065
+ width: 100%;
3066
+ min-width: 0;
3067
+ max-width: 100%;
3068
+ max-height: none;
3069
+ margin-left: 0;
3070
+ padding-bottom: 0;
3071
+ overflow: visible;
3072
+ }
3073
+ .composer-actions-panel > .composer-publish-menu .composer-publish-menu-item {
3074
+ width: 100%;
3075
+ max-width: 100%;
3076
+ flex: 1 1 0;
3077
+ }
2587
3078
  .command-suggest {
2588
3079
  max-height: 35dvh;
2589
3080
  font-size: 0.86rem;
@@ -2637,6 +3128,13 @@ summary { cursor: pointer; color: var(--warning); }
2637
3128
  overflow: auto;
2638
3129
  border-radius: 1rem 1rem 0 0;
2639
3130
  }
3131
+ .extension-dialog.release-dialog form {
3132
+ max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem - env(safe-area-inset-top));
3133
+ }
3134
+ .extension-dialog.release-dialog #dialogMessage {
3135
+ min-height: 10rem;
3136
+ max-height: 48dvh;
3137
+ }
2640
3138
  .extension-dialog menu {
2641
3139
  position: sticky;
2642
3140
  bottom: 0;