npm - @firstpick/pi-package-webui - Versions diffs - 0.1.2 → 0.1.4 - Mend

@firstpick/pi-package-webui 0.1.2 → 0.1.4

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.

Files changed (9) hide show

package/README.md +18 -9
package/bin/pi-webui.mjs +1039 -33
package/index.ts +136 -29
package/package.json +3 -2
package/public/app.js +3025 -137
package/public/index.html +43 -3
package/public/service-worker.js +13 -1
package/public/styles.css +1031 -131
package/tests/mobile-static.test.mjs +260 -2

package/public/styles.css CHANGED Viewed

@@ -1,5 +1,6 @@
 :root {
-  color-scheme: dark;
+  --theme-color-scheme: dark;
+  color-scheme: var(--theme-color-scheme);
   /* Catppuccin Mocha core */
   --ctp-rosewater: #f5e0dc;
@@ -23,11 +24,18 @@
   --ctp-base: #1e1e2e;
   --ctp-mantle: #181825;
   --ctp-crust: #11111b;
+  --ctp-text-rgb: 205, 214, 244;
+  --ctp-subtext-rgb: 186, 194, 222;
+  --ctp-overlay-rgb: 108, 112, 134;
+  --ctp-surface-rgb: 49, 50, 68;
+  --ctp-base-rgb: 30, 30, 46;
+  --ctp-mantle-rgb: 24, 24, 37;
+  --ctp-crust-rgb: 17, 17, 27;
   --bg: var(--ctp-crust);
-  --panel: rgba(30, 30, 46, 0.72);
-  --panel-2: rgba(49, 50, 68, 0.78);
-  --panel-3: rgba(24, 24, 37, 0.92);
+  --panel: rgba(var(--ctp-base-rgb), 0.72);
+  --panel-2: rgba(var(--ctp-surface-rgb), 0.78);
+  --panel-3: rgba(var(--ctp-mantle-rgb), 0.92);
   --text: var(--ctp-text);
   --muted: var(--ctp-subtext);
   --border: rgba(180, 190, 254, 0.22);
@@ -37,13 +45,20 @@
   --danger: var(--ctp-red);
   --warning: var(--ctp-yellow);
   --ok: var(--ctp-green);
-  --shadow: rgba(17, 17, 27, 0.78);
+  --shadow: rgba(var(--ctp-crust-rgb), 0.78);
   --glow-mauve: rgba(203, 166, 247, 0.42);
   --glow-blue: rgba(137, 180, 250, 0.36);
   --glow-pink: rgba(245, 194, 231, 0.34);
   --glow-teal: rgba(148, 226, 213, 0.26);
-  --panel-gradient: linear-gradient(145deg, rgba(49, 50, 68, 0.78), rgba(24, 24, 37, 0.86) 52%, rgba(17, 17, 27, 0.9));
+  --panel-gradient: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.78), rgba(var(--ctp-mantle-rgb), 0.86) 52%, rgba(var(--ctp-crust-rgb), 0.9));
   --neon-gradient: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve) 32%, var(--ctp-blue) 66%, var(--ctp-teal));
+  --context-card-gradient: linear-gradient(100deg, rgba(166, 227, 161, 0.62) 0%, rgba(249, 226, 175, 0.66) 36%, rgba(137, 180, 250, 0.64) 62%, rgba(243, 139, 168, 0.78) 100%);
+  --context-active-color: var(--ctp-green);
+  --context-active-glow: rgba(166, 227, 161, 0.42);
+  --background-glow-pink: rgba(245, 194, 231, 0.34);
+  --background-glow-blue: rgba(137, 180, 250, 0.32);
+  --background-glow-teal: rgba(148, 226, 213, 0.20);
+  --button-primary-text: #11111b;
   --visual-viewport-height: 100dvh;
   --visual-viewport-offset-top: 0px;
   --keyboard-inset-bottom: 0px;
@@ -60,10 +75,10 @@ body {
   overflow: hidden;
   color: var(--text);
   background:
-    radial-gradient(circle at 8% -8%, rgba(245, 194, 231, 0.34) 0, transparent 31rem),
-    radial-gradient(circle at 82% 2%, rgba(137, 180, 250, 0.32) 0, transparent 34rem),
-    radial-gradient(circle at 52% 112%, rgba(148, 226, 213, 0.20) 0, transparent 30rem),
-    linear-gradient(135deg, #11111b 0%, #181825 45%, #1e1e2e 100%);
+    radial-gradient(circle at 8% -8%, var(--background-glow-pink) 0, transparent 31rem),
+    radial-gradient(circle at 82% 2%, var(--background-glow-blue) 0, transparent 34rem),
+    radial-gradient(circle at 52% 112%, var(--background-glow-teal) 0, transparent 30rem),
+    linear-gradient(135deg, var(--ctp-crust) 0%, var(--ctp-mantle) 45%, var(--ctp-base) 100%);
 }
 body::before,
 body::after {
@@ -83,13 +98,13 @@ body::before {
 }
 body::after {
   opacity: 0.14;
-  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(205, 214, 244, 0.36) 5px, transparent 6px);
+  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(var(--ctp-text-rgb), 0.36) 5px, transparent 6px);
   mix-blend-mode: screen;
 }
 button, select, textarea, input {
   color: var(--text);
-  background: linear-gradient(180deg, rgba(49, 50, 68, 0.9), rgba(24, 24, 37, 0.88));
+  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
   border: 1px solid var(--border);
   border-radius: 0.7rem;
   font: inherit;
@@ -112,14 +127,14 @@ button:hover {
 }
 button:active { transform: translateY(0); }
 button.primary {
-  color: #11111b;
+  color: var(--button-primary-text);
   font-weight: 800;
   border-color: transparent;
   background: var(--neon-gradient);
   box-shadow: 0 0 1.4rem var(--glow-mauve), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.35);
 }
 button.danger {
-  color: #11111b;
+  color: var(--button-primary-text);
   font-weight: 800;
   background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
   border-color: rgba(243, 139, 168, 0.82);
@@ -136,7 +151,7 @@ select {
   padding: 0.5rem 2.15rem 0.5rem 0.7rem;
   min-width: 8rem;
   color: var(--ctp-text);
-  color-scheme: dark;
+  color-scheme: var(--theme-color-scheme);
   accent-color: var(--ctp-mauve);
   border-color: rgba(180, 190, 254, 0.30);
   background-color: var(--ctp-base);
@@ -144,7 +159,7 @@ select {
     linear-gradient(45deg, transparent 50%, var(--ctp-teal) 50%),
     linear-gradient(135deg, var(--ctp-teal) 50%, transparent 50%),
     linear-gradient(135deg, rgba(245, 194, 231, 0.16), rgba(137, 180, 250, 0.10) 45%, rgba(148, 226, 213, 0.12)),
-    linear-gradient(180deg, rgba(49, 50, 68, 0.98), rgba(24, 24, 37, 0.96));
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.96));
   background-position:
     calc(100% - 1.05rem) 50%,
     calc(100% - 0.72rem) 50%,
@@ -156,7 +171,7 @@ select {
     100% 100%,
     100% 100%;
   background-repeat: no-repeat;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0.55rem 1.3rem rgba(17, 17, 27, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0.55rem 1.3rem rgba(var(--ctp-crust-rgb), 0.22);
 }
 select:hover {
   border-color: rgba(203, 166, 247, 0.58);
@@ -184,11 +199,11 @@ textarea {
   color: var(--ctp-text);
   caret-color: var(--ctp-pink);
   background:
-    linear-gradient(180deg, rgba(17, 17, 27, 0.78), rgba(30, 30, 46, 0.8)),
-    radial-gradient(circle at 0 0, rgba(203, 166, 247, 0.14), transparent 18rem);
-  box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), inset 0 0 2rem rgba(17, 17, 27, 0.42);
+    linear-gradient(180deg, var(--panel-3), var(--panel)),
+    radial-gradient(circle at 0 0, var(--glow-mauve), transparent 18rem);
+  box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), inset 0 0 2rem rgba(var(--ctp-crust-rgb), 0.42);
 }
-textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
+textarea::placeholder { color: rgba(var(--ctp-subtext-rgb), 0.62); }
 #promptInput {
   min-height: calc(1.5em + 1.8rem);
   max-height: min(38vh, 18rem);
@@ -206,9 +221,9 @@ textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
   justify-content: space-between;
   padding: 1rem 1.25rem;
   border-bottom: 1px solid rgba(180, 190, 254, 0.22);
-  background: linear-gradient(90deg, rgba(17, 17, 27, 0.9), rgba(30, 30, 46, 0.7), rgba(24, 24, 37, 0.88));
+  background: linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.9), rgba(var(--ctp-base-rgb), 0.7), rgba(var(--ctp-mantle-rgb), 0.88));
   backdrop-filter: blur(18px) saturate(150%);
-  box-shadow: 0 0.75rem 2.5rem rgba(17, 17, 27, 0.56), 0 0 2rem rgba(203, 166, 247, 0.10);
+  box-shadow: 0 0.75rem 2.5rem rgba(var(--ctp-crust-rgb), 0.56), 0 0 2rem rgba(203, 166, 247, 0.10);
 }
 .topbar::before {
   content: "";
@@ -231,7 +246,7 @@ textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
   color: transparent;
   text-shadow: 0 0 1.6rem var(--glow-mauve);
 }
-.topbar p { margin: 0.25rem 0 0; color: rgba(205, 214, 244, 0.72); }
+.topbar p { margin: 0.25rem 0 0; color: rgba(var(--ctp-text-rgb), 0.72); }
 .top-actions {
   display: flex;
   align-items: center;
@@ -281,7 +296,7 @@ body.side-panel-collapsed .side-panel {
   color: var(--ctp-teal);
   background:
     linear-gradient(120deg, rgba(148, 226, 213, 0.14), rgba(203, 166, 247, 0.10)),
-    linear-gradient(145deg, rgba(30, 30, 46, 0.94), rgba(17, 17, 27, 0.96));
+    linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.94), rgba(var(--ctp-crust-rgb), 0.96));
   box-shadow: 0 0 1.15rem rgba(148, 226, 213, 0.22), 0 0.8rem 2rem rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.06);
 }
 .side-panel-expand-button::before,
@@ -312,7 +327,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   height: 1.08rem;
   border: 1px solid rgba(180, 190, 254, 0.34);
   border-radius: 0.34rem;
-  background: rgba(17, 17, 27, 0.50);
+  background: rgba(var(--ctp-crust-rgb), 0.50);
   box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), 0 0 0.75rem rgba(148, 226, 213, 0.10);
 }
 .side-panel-button-icon::before {
@@ -383,7 +398,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   margin: 0;
   padding: 0.9rem 0.95rem;
   border-bottom: 1px solid rgba(180, 190, 254, 0.16);
-  background: linear-gradient(90deg, rgba(17, 17, 27, 0.96), rgba(30, 30, 46, 0.82));
+  background: linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.96), rgba(var(--ctp-base-rgb), 0.82));
   backdrop-filter: blur(14px) saturate(150%);
 }
 .side-panel-header strong {
@@ -424,7 +439,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   color: var(--ctp-teal);
   background:
     linear-gradient(120deg, rgba(148, 226, 213, 0.12), rgba(203, 166, 247, 0.10)),
-    linear-gradient(145deg, rgba(49, 50, 68, 0.78), rgba(17, 17, 27, 0.86));
+    linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.78), rgba(var(--ctp-crust-rgb), 0.86));
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0.8rem rgba(148, 226, 213, 0.08);
 }
 .side-panel-toggle-button:hover,
@@ -454,15 +469,16 @@ body.side-panel-collapsed .terminal-tabs-shell {
   padding: 0.72rem;
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 0.85rem;
-  background: rgba(17, 17, 27, 0.46);
+  background: rgba(var(--ctp-crust-rgb), 0.46);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(203, 166, 247, 0.06);
 }
 .control-field {
   display: grid;
   gap: 0.42rem;
 }
-.control-field label {
-  color: rgba(205, 214, 244, 0.74);
+.control-field label,
+.control-field .control-label {
+  color: rgba(var(--ctp-text-rgb), 0.74);
   font-size: 0.72rem;
   font-weight: 900;
   letter-spacing: 0.12em;
@@ -473,6 +489,56 @@ body.side-panel-collapsed .terminal-tabs-shell {
   width: 100%;
   min-width: 0;
 }
+.toggle-control {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.65rem;
+  align-items: center;
+  min-height: 44px;
+  padding: 0.58rem 0.68rem;
+  cursor: pointer;
+  border: 1px solid rgba(180, 190, 254, 0.20);
+  border-radius: 0.72rem;
+  background: rgba(var(--ctp-crust-rgb), 0.58);
+}
+.control-field .toggle-control {
+  color: rgba(var(--ctp-text-rgb), 0.88);
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+}
+.toggle-control input {
+  width: 1.15rem;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  min-height: 1.15rem;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--ctp-mauve);
+  box-shadow: none;
+}
+.toggle-control-label {
+  display: block;
+  color: var(--ctp-text);
+  font-size: 0.82rem;
+  font-weight: 900;
+}
+.toggle-control-hint {
+  display: block;
+  margin-top: 0.16rem;
+  color: rgba(var(--ctp-subtext-rgb), 0.70);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.toggle-control:has(input:checked) {
+  border-color: rgba(148, 226, 213, 0.42);
+  box-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.10);
+}
+.toggle-control:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
 .network-status {
   display: grid;
   gap: 0.42rem;
@@ -480,11 +546,11 @@ body.side-panel-collapsed .terminal-tabs-shell {
   min-height: 5.6rem;
   padding: 0.68rem 0.72rem;
   overflow-wrap: anywhere;
-  color: rgba(205, 214, 244, 0.88);
+  color: rgba(var(--ctp-text-rgb), 0.88);
   white-space: normal;
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 0.72rem;
-  background: rgba(17, 17, 27, 0.62);
+  background: rgba(var(--ctp-crust-rgb), 0.62);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.78rem;
   font-weight: 800;
@@ -495,12 +561,13 @@ body.side-panel-collapsed .terminal-tabs-shell {
   border-color: rgba(249, 226, 175, 0.34);
   box-shadow: 0 0 0.9rem rgba(249, 226, 175, 0.10);
 }
-.network-status.opening {
+.network-status.opening,
+.network-status.closing {
   color: var(--ctp-teal);
   border-color: rgba(148, 226, 213, 0.34);
 }
 .network-status.closed {
-  color: rgba(186, 194, 222, 0.72);
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
 }
 .network-status-heading {
   color: var(--ctp-text);
@@ -509,7 +576,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
 }
 .network-status-detail,
 .network-status-empty {
-  color: rgba(186, 194, 222, 0.68);
+  color: rgba(var(--ctp-subtext-rgb), 0.68);
   font-family: inherit;
   font-size: 0.72rem;
   font-weight: 700;
@@ -527,7 +594,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   min-width: 0;
 }
 .network-status-url-label {
-  color: rgba(186, 194, 222, 0.70);
+  color: rgba(var(--ctp-subtext-rgb), 0.70);
   font-size: 0.68rem;
   font-weight: 900;
   letter-spacing: 0.08em;
@@ -558,6 +625,8 @@ body.side-panel-collapsed .terminal-tabs-shell {
 }
 .terminal-tabs-shell {
+  position: relative;
+  z-index: 20;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -566,9 +635,9 @@ body.side-panel-collapsed .terminal-tabs-shell {
   padding: 0.62rem 0.78rem;
   border-bottom: 1px solid rgba(180, 190, 254, 0.16);
   background:
-    linear-gradient(90deg, rgba(17, 17, 27, 0.96), rgba(30, 30, 46, 0.82), rgba(24, 24, 37, 0.92)),
+    linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.96), rgba(var(--ctp-base-rgb), 0.82), rgba(var(--ctp-mantle-rgb), 0.92)),
     radial-gradient(circle at 0% 0%, rgba(245, 194, 231, 0.12), transparent 18rem);
-  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(17, 17, 27, 0.20);
+  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.20);
 }
 .terminal-tabs-toggle-button { display: none; }
 .terminal-tabs {
@@ -580,6 +649,16 @@ body.side-panel-collapsed .terminal-tabs-shell {
   overflow-x: auto;
   scrollbar-width: thin;
 }
+.terminal-tabs-shell:has(.terminal-tab-group:hover),
+.terminal-tabs-shell:has(.terminal-tab-group:focus-within),
+.terminal-tabs-shell:has(.terminal-tab-group.menu-open) {
+  z-index: 90;
+}
+.terminal-tabs:has(.terminal-tab-group:hover),
+.terminal-tabs:has(.terminal-tab-group:focus-within),
+.terminal-tabs:has(.terminal-tab-group.menu-open) {
+  overflow: visible;
+}
 .terminal-tab {
   display: inline-flex;
   align-items: stretch;
@@ -588,20 +667,139 @@ body.side-panel-collapsed .terminal-tabs-shell {
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 0.82rem;
   overflow: hidden;
-  background: rgba(17, 17, 27, 0.54);
+  background: rgba(var(--ctp-crust-rgb), 0.54);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
 }
+.terminal-tab-group {
+  position: relative;
+  z-index: 1;
+  overflow: visible;
+  isolation: isolate;
+  background: var(--ctp-crust);
+}
+.terminal-tab-group:hover,
+.terminal-tab-group:focus-within {
+  z-index: 100;
+}
+.terminal-tab-group-button {
+  width: 100%;
+}
+.terminal-tab-group-count {
+  flex: 0 0 auto;
+  min-width: 1.35rem;
+  padding: 0.04rem 0.36rem;
+  border: 1px solid rgba(180, 190, 254, 0.18);
+  border-radius: 999px;
+  color: rgba(var(--ctp-subtext-rgb), 0.82);
+  background: rgba(var(--ctp-surface-rgb), 0.46);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.66rem;
+  font-weight: 800;
+  line-height: 1.15;
+  text-align: center;
+}
+.terminal-tab-group-menu {
+  position: absolute;
+  z-index: 100;
+  inset: 100% auto auto 0;
+  display: none;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.38rem;
+  width: max-content;
+  padding-top: 0.38rem;
+  min-width: 100%;
+  max-width: min(18rem, calc(100vw - 2rem));
+  max-height: min(60vh, 24rem);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+.terminal-tab-group:hover .terminal-tab-group-menu,
+.terminal-tab-group:focus-within .terminal-tab-group-menu,
+.terminal-tab-group.menu-open .terminal-tab-group-menu {
+  display: flex;
+}
+.terminal-tab-group-item {
+  display: inline-flex;
+  align-items: stretch;
+  width: min(16rem, calc(100vw - 2rem));
+  min-width: 9rem;
+  max-width: 16rem;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.82rem;
+  overflow: hidden;
+  background: var(--ctp-crust);
+  box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
+}
+.terminal-tab-group-item.active {
+  border-color: rgba(148, 226, 213, 0.54);
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.19), rgba(203, 166, 247, 0.13)),
+    var(--ctp-crust);
+  box-shadow: 0 0 1rem rgba(148, 226, 213, 0.20), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+.terminal-tab-group-item.stopped {
+  opacity: 1;
+  border-color: rgba(243, 139, 168, 0.28);
+}
+.terminal-tab-group-item.activity-working {
+  border-color: rgba(249, 226, 175, 0.56);
+}
+.terminal-tab-group-item.activity-blocked {
+  border-color: rgba(250, 179, 135, 0.62);
+}
+.terminal-tab-group-item.activity-done {
+  border-color: rgba(166, 227, 161, 0.52);
+}
+.terminal-tab-group-add {
+  width: min(16rem, calc(100vw - 2rem));
+  min-height: 2.35rem;
+  padding: 0.38rem 0.72rem;
+  color: var(--ctp-pink);
+  white-space: nowrap;
+  border: 1px solid rgba(245, 194, 231, 0.30);
+  border-radius: 0.78rem;
+  background:
+    linear-gradient(120deg, rgba(245, 194, 231, 0.14), rgba(137, 180, 250, 0.10)),
+    var(--ctp-crust);
+  box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.045);
+}
+.terminal-tab-group-add:hover {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-pink), var(--ctp-blue));
+}
 .terminal-tab.active {
   border-color: rgba(148, 226, 213, 0.54);
   background:
     linear-gradient(120deg, rgba(148, 226, 213, 0.17), rgba(203, 166, 247, 0.12)),
-    rgba(17, 17, 27, 0.60);
+    rgba(var(--ctp-crust-rgb), 0.60);
   box-shadow: 0 0 1rem rgba(148, 226, 213, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
 }
+.terminal-tab-group.active {
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.17), rgba(203, 166, 247, 0.12)),
+    var(--ctp-crust);
+}
 .terminal-tab.stopped {
   opacity: 0.72;
   border-color: rgba(243, 139, 168, 0.28);
 }
+.terminal-tab-group.stopped {
+  opacity: 1;
+}
+.terminal-tab.activity-working {
+  border-color: rgba(249, 226, 175, 0.56);
+  box-shadow: 0 0 1rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.045);
+}
+.terminal-tab.activity-blocked {
+  border-color: rgba(250, 179, 135, 0.62);
+  box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20), inset 0 1px 0 rgba(255,255,255,0.045);
+}
+.terminal-tab.activity-done {
+  border-color: rgba(166, 227, 161, 0.52);
+  box-shadow: 0 0 1rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.045);
+}
 .terminal-tab-button,
 .terminal-tab-close,
 .terminal-new-tab-button {
@@ -620,6 +818,60 @@ body.side-panel-collapsed .terminal-tabs-shell {
   padding: 0.38rem 0.66rem;
   text-align: left;
 }
+.terminal-tab-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.38rem;
+  min-width: 0;
+}
+.terminal-tab-activity-indicator {
+  flex: 0 0 0.58rem;
+  width: 0.58rem;
+  height: 0.58rem;
+  border-radius: 999px;
+  background: rgba(var(--ctp-subtext-rgb), 0.38);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 0.45rem rgba(var(--ctp-subtext-rgb), 0.10);
+}
+.terminal-tab.activity-working .terminal-tab-activity-indicator {
+  background: var(--ctp-yellow);
+  box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
+  animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
+}
+.terminal-tab.activity-blocked .terminal-tab-activity-indicator {
+  background: var(--ctp-peach);
+  box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
+  animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
+}
+.terminal-tab.activity-done .terminal-tab-activity-indicator {
+  background: var(--ctp-green);
+  box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
+}
+.terminal-tab.stopped .terminal-tab-activity-indicator {
+  background: var(--ctp-red);
+  box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
+}
+.terminal-tab-group-item.activity-working .terminal-tab-activity-indicator {
+  background: var(--ctp-yellow);
+  box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
+  animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
+}
+.terminal-tab-group-item.activity-blocked .terminal-tab-activity-indicator {
+  background: var(--ctp-peach);
+  box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
+  animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
+}
+.terminal-tab-group-item.activity-done .terminal-tab-activity-indicator {
+  background: var(--ctp-green);
+  box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
+}
+.terminal-tab-group-item.stopped .terminal-tab-activity-indicator {
+  background: var(--ctp-red);
+  box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
+}
+@keyframes terminal-tab-working-pulse {
+  0%, 100% { transform: scale(0.86); opacity: 0.68; }
+  50% { transform: scale(1.08); opacity: 1; }
+}
 .terminal-tab-button:hover,
 .terminal-tab-close:hover,
 .terminal-new-tab-button:hover {
@@ -633,23 +885,31 @@ body.side-panel-collapsed .terminal-tabs-shell {
   white-space: nowrap;
 }
 .terminal-tab-title {
+  flex: 1 1 auto;
   color: var(--ctp-text);
   font-size: 0.84rem;
   font-weight: 900;
   letter-spacing: 0.03em;
 }
 .terminal-tab-meta {
-  color: rgba(186, 194, 222, 0.62);
+  color: rgba(var(--ctp-subtext-rgb), 0.62);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.68rem;
 }
-.terminal-tab.active .terminal-tab-title {
+.terminal-tab.active .terminal-tab-title,
+.terminal-tab-group-item.active .terminal-tab-title {
   color: var(--ctp-teal);
   text-shadow: 0 0 0.8rem var(--glow-teal);
 }
+.terminal-tab.activity-working .terminal-tab-meta,
+.terminal-tab-group-item.activity-working .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
+.terminal-tab.activity-blocked .terminal-tab-meta,
+.terminal-tab-group-item.activity-blocked .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
+.terminal-tab.activity-done .terminal-tab-meta,
+.terminal-tab-group-item.activity-done .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
 .terminal-tab-close {
   flex: 0 0 2.1rem;
-  color: rgba(186, 194, 222, 0.72);
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
   border-left: 1px solid rgba(180, 190, 254, 0.10);
   font-size: 1.2rem;
   line-height: 1;
@@ -666,7 +926,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   border-radius: 0.78rem;
   background:
     linear-gradient(120deg, rgba(245, 194, 231, 0.12), rgba(137, 180, 250, 0.08)),
-    rgba(17, 17, 27, 0.58);
+    rgba(var(--ctp-crust-rgb), 0.58);
 }
 .terminal-new-tab-button:hover {
   color: #11111b;
@@ -678,7 +938,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   flex: 0 0 auto;
   border-bottom: 1px solid rgba(180, 190, 254, 0.16);
   padding: 0.72rem 0.95rem;
-  color: rgba(205, 214, 244, 0.78);
+  color: rgba(var(--ctp-text-rgb), 0.78);
   background: linear-gradient(90deg, rgba(203, 166, 247, 0.10), rgba(137, 180, 250, 0.05), rgba(148, 226, 213, 0.08));
 }
 .statusbar {
@@ -687,14 +947,14 @@ body.side-panel-collapsed .terminal-tabs-shell {
   display: grid;
   gap: 0.58rem;
   padding: 0.78rem 0.95rem 0.82rem;
-  color: rgba(205, 214, 244, 0.84);
+  color: rgba(var(--ctp-text-rgb), 0.84);
   border-top: 1px solid rgba(245, 194, 231, 0.18);
   border-bottom: 1px solid rgba(148, 226, 213, 0.22);
   background:
     radial-gradient(circle at 6% 0%, rgba(245, 194, 231, 0.13), transparent 15rem),
     radial-gradient(circle at 82% 50%, rgba(148, 226, 213, 0.10), transparent 18rem),
-    linear-gradient(135deg, rgba(17, 17, 27, 0.94), rgba(30, 30, 46, 0.80) 48%, rgba(24, 24, 37, 0.92));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 -0.45rem 1.2rem rgba(17, 17, 27, 0.28);
+    linear-gradient(135deg, rgba(var(--ctp-crust-rgb), 0.94), rgba(var(--ctp-base-rgb), 0.80) 48%, rgba(var(--ctp-mantle-rgb), 0.92));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 -0.45rem 1.2rem rgba(var(--ctp-crust-rgb), 0.28);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.76rem;
   line-height: 1.35;
@@ -723,7 +983,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   display: grid;
   grid-template-columns: minmax(10rem, 1.9fr) minmax(5rem, 0.55fr) minmax(6.5rem, 0.6fr) minmax(7rem, 0.65fr) minmax(12rem, 1.2fr);
   gap: 0.5rem;
-  color: rgba(186, 194, 222, 0.76);
+  color: rgba(var(--ctp-subtext-rgb), 0.76);
 }
 .footer-details-toggle { display: none; }
 .footer-metric,
@@ -731,7 +991,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
   min-width: 0;
   border: 1px solid rgba(180, 190, 254, 0.16);
   background:
-    linear-gradient(180deg, rgba(49, 50, 68, 0.46), rgba(17, 17, 27, 0.34)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.46), rgba(var(--ctp-crust-rgb), 0.34)),
     linear-gradient(90deg, rgba(203, 166, 247, 0.06), rgba(148, 226, 213, 0.03));
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(0, 0, 0, 0.10);
 }
@@ -759,7 +1019,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
 }
 .footer-metric-label,
 .footer-meta-label {
-  color: rgba(186, 194, 222, 0.62);
+  color: rgba(var(--ctp-subtext-rgb), 0.62);
   font-size: 0.64rem;
   font-weight: 950;
   letter-spacing: 0.12em;
@@ -769,7 +1029,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
 .footer-meta-value {
   min-width: 0;
   overflow: hidden;
-  color: rgba(205, 214, 244, 0.94);
+  color: rgba(var(--ctp-text-rgb), 0.94);
   font-weight: 800;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -803,6 +1063,37 @@ button.footer-meta {
   color: var(--ctp-green);
 }
 .footer-context { display: none; }
+.footer-context-card {
+  --context-usage: 0%;
+  --context-active-color: var(--ctp-green);
+  --context-active-glow: rgba(166, 227, 161, 0.42);
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+.footer-context-card.has-context-usage {
+  border-color: rgba(148, 226, 213, 0.30);
+}
+.footer-context-card.has-context-usage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: var(--context-card-gradient);
+  clip-path: inset(0 calc(100% - var(--context-usage)) 0 0);
+}
+.footer-context-card > * {
+  position: relative;
+  z-index: 1;
+}
+.footer-context-card.has-context-usage .footer-metric-label,
+.footer-context-card.has-context-usage .footer-metric-value,
+.footer-context-card.has-context-usage .footer-meta-label,
+.footer-context-card.has-context-usage .footer-meta-value {
+  color: var(--context-active-color);
+  text-shadow: 0 0 0.65rem var(--context-active-glow);
+}
 .footer-context .footer-meta-value {
   color: var(--ctp-teal);
   text-shadow: 0 0 0.6rem rgba(148, 226, 213, 0.22);
@@ -829,8 +1120,8 @@ button.footer-meta {
   border-radius: 0.95rem;
   background:
     radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.13), transparent 12rem),
-    linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
-  box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
+  box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
 }
 .footer-model-picker-title {
   color: var(--ctp-teal);
@@ -845,7 +1136,7 @@ button.footer-meta {
   overflow-wrap: anywhere;
 }
 .footer-model-picker-source {
-  color: rgba(186, 194, 222, 0.68);
+  color: rgba(var(--ctp-subtext-rgb), 0.68);
   font-size: 0.74rem;
 }
 .footer-model-picker-empty {
@@ -854,7 +1145,7 @@ button.footer-meta {
   padding: 0.58rem 0.62rem;
   border: 1px solid rgba(249, 226, 175, 0.18);
   border-radius: 0.72rem;
-  background: rgba(17, 17, 27, 0.48);
+  background: rgba(var(--ctp-crust-rgb), 0.48);
 }
 .footer-model-picker-empty strong {
   color: var(--ctp-yellow);
@@ -884,7 +1175,7 @@ button.footer-meta {
   font-weight: 850;
 }
 .footer-model-option-name {
-  color: rgba(186, 194, 222, 0.68);
+  color: rgba(var(--ctp-subtext-rgb), 0.68);
   font-size: 0.72rem;
 }
 .footer-branch .footer-meta-value {
@@ -914,8 +1205,8 @@ button.footer-meta {
   background:
     radial-gradient(circle at 10% 10%, rgba(166, 227, 161, 0.10), transparent 16rem),
     radial-gradient(circle at 92% 0%, rgba(203, 166, 247, 0.14), transparent 18rem),
-    linear-gradient(145deg, rgba(17, 17, 27, 0.94), rgba(30, 30, 46, 0.82));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 -0.5rem 1.4rem rgba(17, 17, 27, 0.22);
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.94), rgba(var(--ctp-base-rgb), 0.82));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 -0.5rem 1.4rem rgba(var(--ctp-crust-rgb), 0.22);
 }
 .git-workflow-header {
   display: flex;
@@ -953,8 +1244,8 @@ button.footer-meta {
   padding: 0.38rem 0.72rem 0.38rem 1.62rem;
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 999px;
-  color: rgba(186, 194, 222, 0.76);
-  background: rgba(17, 17, 27, 0.42);
+  color: rgba(var(--ctp-subtext-rgb), 0.76);
+  background: rgba(var(--ctp-crust-rgb), 0.42);
   font-size: 0.76rem;
   font-weight: 900;
   letter-spacing: 0.08em;
@@ -968,7 +1259,7 @@ button.footer-meta {
   width: 0.52rem;
   height: 0.52rem;
   border-radius: 999px;
-  background: rgba(108, 112, 134, 0.72);
+  background: rgba(var(--ctp-overlay-rgb), 0.72);
   transform: translateY(-50%);
 }
 .git-workflow-step.active {
@@ -997,9 +1288,9 @@ button.footer-meta {
   padding: 0.78rem;
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 0.82rem;
-  color: rgba(205, 214, 244, 0.88);
+  color: rgba(var(--ctp-text-rgb), 0.88);
   background:
-    linear-gradient(180deg, rgba(17, 17, 27, 0.76), rgba(17, 17, 27, 0.58)),
+    linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.76), rgba(var(--ctp-crust-rgb), 0.58)),
     radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.08), transparent 14rem);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.82rem;
@@ -1012,7 +1303,7 @@ button.footer-meta {
 }
 .widget-area:empty { display: none; }
 .widget {
-  background: rgba(17, 17, 27, 0.72);
+  background: rgba(var(--ctp-crust-rgb), 0.72);
   border: 1px solid rgba(148, 226, 213, 0.24);
   border-radius: 0.8rem;
   padding: 0.7rem;
@@ -1020,6 +1311,120 @@ button.footer-meta {
   white-space: pre-wrap;
   box-shadow: inset 0 0 1.4rem rgba(148, 226, 213, 0.06), 0 0 1rem rgba(148, 226, 213, 0.08);
 }
+.release-npm-widget {
+  display: grid;
+  gap: 0.62rem;
+  padding: 0.72rem;
+  white-space: normal;
+  border-color: rgba(245, 194, 231, 0.34);
+  background:
+    radial-gradient(circle at 4% 0%, rgba(245, 194, 231, 0.16), transparent 16rem),
+    radial-gradient(circle at 96% 12%, rgba(148, 226, 213, 0.12), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-base-rgb), 0.78));
+}
+.release-aur-widget {
+  border-color: rgba(250, 179, 135, 0.34);
+  background:
+    radial-gradient(circle at 4% 0%, rgba(250, 179, 135, 0.14), transparent 16rem),
+    radial-gradient(circle at 96% 12%, rgba(166, 227, 161, 0.12), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-base-rgb), 0.78));
+}
+.release-aur-widget .release-npm-kicker { color: var(--ctp-peach); }
+.release-npm-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 0.7rem;
+  align-items: center;
+}
+.release-npm-title-wrap {
+  display: grid;
+  gap: 0.14rem;
+  min-width: 0;
+}
+.release-npm-kicker {
+  color: var(--ctp-pink);
+  font-size: 0.68rem;
+  font-weight: 950;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.release-npm-title {
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(var(--ctp-text-rgb), 0.96);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.release-npm-meta,
+.release-npm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.42rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+.release-npm-pill {
+  display: inline-flex;
+  align-items: center;
+  max-width: min(32rem, 50vw);
+  min-height: 1.55rem;
+  padding: 0.16rem 0.5rem;
+  overflow: hidden;
+  color: var(--ctp-yellow);
+  border: 1px solid rgba(249, 226, 175, 0.22);
+  border-radius: 999px;
+  background: rgba(var(--ctp-crust-rgb), 0.48);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.release-npm-pill.elapsed { color: var(--ctp-teal); }
+.release-npm-action {
+  min-height: 2rem;
+  padding: 0.38rem 0.62rem;
+  border-radius: 0.62rem;
+  font-size: 0.76rem;
+  font-weight: 850;
+}
+.release-npm-terminal {
+  max-height: min(34rem, 42vh);
+  min-height: 5.25rem;
+  overflow: auto;
+  padding: 0.7rem;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.78rem;
+  background:
+    linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.82), rgba(var(--ctp-mantle-rgb), 0.62)),
+    radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.07), transparent 15rem);
+  box-shadow: inset 0 0 1.5rem rgba(var(--ctp-crust-rgb), 0.36);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.42;
+  overscroll-behavior: contain;
+}
+.release-npm-line {
+  min-width: max-content;
+  min-height: 1.42em;
+  color: rgba(var(--ctp-text-rgb), 0.88);
+  white-space: pre;
+}
+.release-npm-line.command { color: var(--ctp-sky); }
+.release-npm-line.target { color: var(--ctp-pink); font-weight: 850; }
+.release-npm-line.pass { color: var(--ctp-green); }
+.release-npm-line.fail { color: var(--ctp-red); }
+.release-npm-line.warn { color: var(--ctp-yellow); }
+.release-npm-line.info { color: rgba(var(--ctp-subtext-rgb), 0.80); }
+.release-npm-line.event { color: var(--ctp-mauve); }
+.release-npm-controls {
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+.release-npm-log-widget .release-npm-terminal {
+  max-height: min(42rem, 52vh);
+}
 .todo-widget {
   display: grid;
   gap: 0.52rem;
@@ -1028,7 +1433,7 @@ button.footer-meta {
   border-color: rgba(137, 180, 250, 0.32);
   background:
     radial-gradient(circle at 4% 0%, rgba(137, 180, 250, 0.18), transparent 12rem),
-    linear-gradient(145deg, rgba(17, 17, 27, 0.88), rgba(30, 30, 46, 0.74));
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.88), rgba(var(--ctp-base-rgb), 0.74));
 }
 .todo-widget-header {
   display: flex;
@@ -1050,7 +1455,7 @@ button.footer-meta {
   padding: 0.12rem 0.42rem;
   border: 1px solid rgba(137, 180, 250, 0.24);
   border-radius: 999px;
-  background: rgba(17, 17, 27, 0.48);
+  background: rgba(var(--ctp-crust-rgb), 0.48);
   font-size: 0.72rem;
   font-weight: 850;
 }
@@ -1060,7 +1465,7 @@ button.footer-meta {
   height: 0.38rem;
   overflow: hidden;
   border-radius: 999px;
-  background: rgba(49, 50, 68, 0.78);
+  background: rgba(var(--ctp-surface-rgb), 0.78);
   box-shadow: inset 0 0 0 1px rgba(180, 190, 254, 0.10);
 }
 .todo-widget-progress-fill {
@@ -1083,7 +1488,7 @@ button.footer-meta {
   align-items: start;
   gap: 0.48rem;
   min-width: 0;
-  color: rgba(205, 214, 244, 0.92);
+  color: rgba(var(--ctp-text-rgb), 0.92);
 }
 .todo-widget-marker {
   display: inline-grid;
@@ -1097,7 +1502,7 @@ button.footer-meta {
   font-size: 0.74rem;
   font-weight: 950;
   line-height: 1;
-  background: rgba(49, 50, 68, 0.88);
+  background: rgba(var(--ctp-surface-rgb), 0.88);
 }
 .todo-widget-item.done .todo-widget-marker {
   border-color: transparent;
@@ -1118,16 +1523,67 @@ button.footer-meta {
   line-height: 1.35;
 }
 .todo-widget-footer {
-  color: rgba(186, 194, 222, 0.64);
+  color: rgba(var(--ctp-subtext-rgb), 0.64);
   font-size: 0.72rem;
 }
 .chat {
+  position: relative;
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
   padding: 1rem;
   scroll-behavior: smooth;
 }
+.sticky-user-prompt-button[hidden] { display: none; }
+.sticky-user-prompt-button {
+  position: sticky;
+  top: 0;
+  z-index: 12;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.62rem;
+  width: 100%;
+  min-height: 44px;
+  margin: 0 0 0.75rem;
+  padding: 0.52rem 0.72rem;
+  overflow: hidden;
+  text-align: left;
+  border-color: rgba(137, 180, 250, 0.42);
+  border-radius: 0.88rem;
+  backdrop-filter: blur(14px) saturate(145%);
+  background:
+    linear-gradient(120deg, rgba(137, 180, 250, 0.18), rgba(203, 166, 247, 0.16), rgba(148, 226, 213, 0.14)),
+    linear-gradient(180deg, rgba(var(--ctp-mantle-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.94));
+  box-shadow: 0 0.75rem 1.65rem rgba(var(--ctp-crust-rgb), 0.36), 0 0 1rem rgba(137, 180, 250, 0.16);
+}
+.sticky-user-prompt-button:hover {
+  border-color: rgba(148, 226, 213, 0.62);
+  box-shadow: 0 0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.4), 0 0 1.2rem rgba(148, 226, 213, 0.24);
+}
+.sticky-user-prompt-label {
+  color: var(--ctp-blue);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.sticky-user-prompt-text {
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(var(--ctp-text-rgb), 0.94);
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sticky-user-prompt-meta {
+  color: var(--ctp-teal);
+  font-size: 0.72rem;
+  font-weight: 900;
+  white-space: nowrap;
+}
 .jump-to-latest-button[hidden] { display: none; }
 .jump-to-latest-button {
   align-self: center;
@@ -1139,14 +1595,39 @@ button.footer-meta {
   border-color: transparent;
   box-shadow: 0 0 1.2rem var(--glow-teal), 0 0.7rem 1.6rem rgba(0, 0, 0, 0.28);
 }
+.feedback-tray[hidden] { display: none; }
+.feedback-tray {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin: 0 1rem 0.65rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid rgba(203, 166, 247, 0.30);
+  border-radius: 0.85rem;
+  color: rgba(var(--ctp-text-rgb), 0.88);
+  background: linear-gradient(145deg, rgba(203, 166, 247, 0.14), rgba(var(--ctp-mantle-rgb), 0.9));
+  box-shadow: 0 0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.32), 0 0 1rem rgba(203, 166, 247, 0.16);
+}
+.feedback-tray span {
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+}
+.feedback-tray button {
+  min-height: 44px;
+  padding: 0.42rem 0.72rem;
+  font-size: 0.78rem;
+  font-weight: 900;
+}
 .message {
   position: relative;
   margin: 0 0 0.9rem;
   padding: 0.86rem;
   border: 1px solid rgba(180, 190, 254, 0.18);
   border-radius: 0.95rem;
-  background: linear-gradient(145deg, rgba(49, 50, 68, 0.66), rgba(24, 24, 37, 0.7));
-  box-shadow: 0 0.8rem 1.8rem rgba(17, 17, 27, 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
+  background: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.66), rgba(var(--ctp-mantle-rgb), 0.7));
+  box-shadow: 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
 }
 .message::before {
   content: "";
@@ -1160,17 +1641,34 @@ button.footer-meta {
 }
 .message.user {
   border-color: rgba(137, 180, 250, 0.34);
-  background: linear-gradient(145deg, rgba(137, 180, 250, 0.16), rgba(49, 50, 68, 0.58));
+  background: linear-gradient(145deg, rgba(137, 180, 250, 0.16), rgba(var(--ctp-surface-rgb), 0.58));
 }
 .message.assistant {
   border-color: rgba(148, 226, 213, 0.30);
-  background: linear-gradient(145deg, rgba(148, 226, 213, 0.12), rgba(49, 50, 68, 0.58));
+  background: linear-gradient(145deg, rgba(148, 226, 213, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
+}
+.message.thinking,
+.message.toolCall,
+.message.assistantEvent {
+  border-color: rgba(203, 166, 247, 0.26);
+  background: linear-gradient(145deg, rgba(203, 166, 247, 0.10), rgba(var(--ctp-surface-rgb), 0.54));
+}
+.message.thinking .message-role,
+.message.toolCall .message-role,
+.message.assistantEvent .message-role {
+  color: var(--ctp-mauve);
+  text-shadow: 0 0 0.8rem rgba(203, 166, 247, 0.22);
+}
+.message.thinking.streaming.complete .message-role::after {
+  content: " done";
+  color: var(--ctp-green);
+  text-shadow: 0 0 0.7rem var(--glow-teal);
 }
 .message.extension,
 .message.native,
 .message.notice {
   border-color: rgba(203, 166, 247, 0.30);
-  background: linear-gradient(145deg, rgba(203, 166, 247, 0.12), rgba(49, 50, 68, 0.58));
+  background: linear-gradient(145deg, rgba(203, 166, 247, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
 }
 .message.extension .message-role,
 .message.native .message-role,
@@ -1182,14 +1680,66 @@ button.footer-meta {
   border-color: rgba(249, 226, 175, 0.46);
 }
 .message.warn .message-role { color: var(--ctp-yellow); }
-.message.toolResult, .message.bashExecution {
+.message.toolResult, .message.bashExecution, .message.compactionSummary {
   border-color: rgba(249, 226, 175, 0.30);
-  background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(49, 50, 68, 0.58));
+  background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(var(--ctp-surface-rgb), 0.58));
   padding: 0;
 }
 .message.streaming {
   outline: 1px solid rgba(148, 226, 213, 0.72);
-  box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(17, 17, 27, 0.4);
+  box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(var(--ctp-crust-rgb), 0.4);
+}
+.message.run-indicator-message {
+  margin-bottom: 0.5rem;
+  padding: 0.52rem 0.64rem;
+  border-color: rgba(148, 226, 213, 0.46);
+  border-radius: 0.72rem;
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.13), rgba(137, 180, 250, 0.08), rgba(203, 166, 247, 0.08)),
+    rgba(var(--ctp-mantle-rgb), 0.82);
+}
+.message.run-indicator-message.streaming {
+  outline-color: rgba(148, 226, 213, 0.42);
+  box-shadow: 0 0 0.85rem rgba(148, 226, 213, 0.20), 0 0.45rem 1.1rem rgba(var(--ctp-crust-rgb), 0.32);
+}
+.message.run-indicator-message::before {
+  width: 2px;
+  background: linear-gradient(180deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
+  animation: run-indicator-bar-pulse 1.35s ease-in-out infinite;
+}
+.run-indicator-row {
+  display: flex;
+  align-items: center;
+  gap: 0.42rem;
+  flex-wrap: wrap;
+  font-size: 0.82rem;
+}
+.run-indicator-pulse {
+  flex: 0 0 auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--ctp-green);
+  box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.30), 0 0 0.55rem rgba(166, 227, 161, 0.45);
+  animation: run-indicator-pulse 1.1s ease-in-out infinite;
+}
+.run-indicator-text {
+  color: var(--ctp-teal);
+  font-size: 0.8rem;
+  font-weight: 900;
+  letter-spacing: 0.025em;
+}
+.run-indicator-meta {
+  color: rgba(var(--ctp-text-rgb), 0.72);
+  font-size: 0.72rem;
+}
+@keyframes run-indicator-pulse {
+  0%, 100% { transform: scale(0.78); opacity: 0.62; }
+  50% { transform: scale(1.16); opacity: 1; }
+}
+@keyframes run-indicator-bar-pulse {
+  0%, 100% { opacity: 0.55; box-shadow: 0 0 0.75rem rgba(148, 226, 213, 0.35); }
+  50% { opacity: 1; box-shadow: 0 0 1.25rem rgba(166, 227, 161, 0.52); }
 }
 .message.error {
   border-color: rgba(243, 139, 168, 0.72);
@@ -1201,7 +1751,7 @@ button.footer-meta {
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 0.48rem;
-  color: rgba(186, 194, 222, 0.78);
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
   font-size: 0.78rem;
 }
 .message-collapse {
@@ -1230,11 +1780,13 @@ button.footer-meta {
   border-top: 1px solid rgba(249, 226, 175, 0.12);
 }
 .message.toolResult:not(.error) .message-collapse:not([open]) > summary.message-header,
-.message.bashExecution .message-collapse:not([open]) > summary.message-header {
-  color: rgba(186, 194, 222, 0.72);
+.message.bashExecution .message-collapse:not([open]) > summary.message-header,
+.message.compactionSummary .message-collapse:not([open]) > summary.message-header {
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
 }
 .message.toolResult:not(.error) .message-collapse:not([open]) .message-role,
-.message.bashExecution .message-collapse:not([open]) .message-role {
+.message.bashExecution .message-collapse:not([open]) .message-role,
+.message.compactionSummary .message-collapse:not([open]) .message-role {
   color: var(--ctp-yellow);
   text-shadow: 0 0 0.8rem rgba(249, 226, 175, 0.28);
 }
@@ -1245,6 +1797,52 @@ button.footer-meta {
   letter-spacing: 0.12em;
   text-shadow: 0 0 1rem var(--glow-teal);
 }
+.action-feedback-controls {
+  position: absolute;
+  top: calc(100% - 0.18rem);
+  right: 0.55rem;
+  z-index: 8;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  opacity: 0;
+  pointer-events: auto;
+  transform: translateY(-0.12rem) scale(0.98);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.action-feedback-controls:hover,
+.action-feedback-controls:focus-within {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.action-feedback-controls:not(:hover):not(:focus-within) .action-feedback-button {
+  pointer-events: none;
+}
+.action-feedback-button {
+  min-width: 44px;
+  padding: 0.24rem 0.5rem;
+  border-radius: 0.72rem;
+  color: rgba(var(--ctp-text-rgb), 0.86);
+  background: linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.86), rgba(var(--ctp-crust-rgb), 0.92));
+  box-shadow: 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.34);
+}
+.action-feedback-button:hover,
+.action-feedback-button.active {
+  border-color: rgba(148, 226, 213, 0.72);
+  box-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.20), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.34);
+}
+.action-feedback-button.feedback-up.active {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal));
+}
+.action-feedback-button.feedback-down.active {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
+}
+.action-feedback-button.feedback-question.active {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-mauve));
+}
 .text-block, .code-block {
   margin: 0.35rem 0;
   white-space: pre-wrap;
@@ -1252,7 +1850,7 @@ button.footer-meta {
 }
 .code-block {
   overflow: auto;
-  background: rgba(17, 17, 27, 0.82);
+  background: rgba(var(--ctp-crust-rgb), 0.82);
   border: 1px solid rgba(203, 166, 247, 0.20);
   border-radius: 0.75rem;
   padding: 0.72rem;
@@ -1263,7 +1861,7 @@ button.footer-meta {
 details {
   margin: 0.5rem 0;
   padding: 0.6rem;
-  background: rgba(17, 17, 27, 0.46);
+  background: rgba(var(--ctp-crust-rgb), 0.46);
   border: 1px solid rgba(249, 226, 175, 0.15);
   border-radius: 0.72rem;
 }
@@ -1272,7 +1870,7 @@ summary { cursor: pointer; color: var(--warning); }
   border-color: rgba(203, 166, 247, 0.30);
   background:
     linear-gradient(120deg, rgba(203, 166, 247, 0.12), rgba(137, 180, 250, 0.08), rgba(148, 226, 213, 0.06)),
-    rgba(17, 17, 27, 0.55);
+    rgba(var(--ctp-crust-rgb), 0.55);
   box-shadow: inset 0 0 1.1rem rgba(203, 166, 247, 0.06), 0 0 1rem rgba(203, 166, 247, 0.08);
 }
 .thinking-block > summary {
@@ -1295,7 +1893,7 @@ summary { cursor: pointer; color: var(--warning); }
   color: var(--ctp-green);
 }
 .thinking-text {
-  color: rgba(205, 214, 244, 0.82);
+  color: rgba(var(--ctp-text-rgb), 0.82);
   margin-top: 0.55rem;
   font-style: italic;
   white-space: pre-wrap;
@@ -1308,7 +1906,7 @@ summary { cursor: pointer; color: var(--warning); }
   min-height: 0;
   border-top: 1px solid rgba(180, 190, 254, 0.18);
   padding: 0.9rem;
-  background: linear-gradient(180deg, rgba(17, 17, 27, 0.48), rgba(17, 17, 27, 0.82));
+  background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.48), rgba(var(--ctp-crust-rgb), 0.82));
 }
 .composer::before {
   content: "";
@@ -1325,7 +1923,7 @@ summary { cursor: pointer; color: var(--warning); }
   margin-top: 0.5rem;
   max-height: 15rem;
   overflow: auto;
-  background: rgba(17, 17, 27, 0.94);
+  background: rgba(var(--ctp-crust-rgb), 0.94);
   border: 1px solid rgba(203, 166, 247, 0.34);
   border-radius: 0.85rem;
   box-shadow: 0 0.75rem 2rem var(--shadow), 0 0 1.4rem rgba(203, 166, 247, 0.18);
@@ -1344,7 +1942,10 @@ summary { cursor: pointer; color: var(--warning); }
   box-shadow: none;
 }
 .command-suggest-item + .command-suggest-item { border-top: 1px solid rgba(180, 190, 254, 0.08); }
-.command-suggest-item:hover,
+.command-suggest-item:hover {
+  box-shadow: none;
+  transform: none;
+}
 .command-suggest-item.active {
   background: linear-gradient(90deg, rgba(203, 166, 247, 0.20), rgba(137, 180, 250, 0.10), rgba(148, 226, 213, 0.12));
   box-shadow: inset 3px 0 0 var(--ctp-teal), 0 0 1.2rem rgba(148, 226, 213, 0.10);
@@ -1356,6 +1957,18 @@ summary { cursor: pointer; color: var(--warning); }
   font-weight: 900;
   text-shadow: 0 0 0.8rem rgba(166, 227, 161, 0.34);
 }
+.path-suggest-name {
+  color: var(--ctp-teal);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: 0 0 0.8rem rgba(148, 226, 213, 0.28);
+}
+.path-suggest-item.directory .path-suggest-name {
+  color: var(--ctp-yellow);
+  text-shadow: 0 0 0.8rem rgba(249, 226, 175, 0.26);
+}
 .command-suggest-desc {
   color: var(--text);
   overflow: hidden;
@@ -1363,7 +1976,7 @@ summary { cursor: pointer; color: var(--warning); }
   white-space: nowrap;
 }
 .command-suggest-source {
-  color: rgba(186, 194, 222, 0.68);
+  color: rgba(var(--ctp-subtext-rgb), 0.68);
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -1385,7 +1998,7 @@ summary { cursor: pointer; color: var(--warning); }
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  color: rgba(205, 214, 244, 0.74);
+  color: rgba(var(--ctp-text-rgb), 0.74);
   font-size: 0.88rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -1393,16 +2006,31 @@ summary { cursor: pointer; color: var(--warning); }
 .spacer { flex: 1; }
 .composer-new-button,
 .composer-compact-button,
-.composer-git-button {
+.composer-git-button,
+.composer-publish-menu {
   margin-right: 0.45rem;
 }
+.composer-publish-menu {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: stretch;
+  overflow: visible;
+  isolation: isolate;
+}
+.composer-publish-menu:hover,
+.composer-publish-menu:focus-within,
+.composer-publish-menu.open {
+  z-index: 100;
+}
 .composer-compact-button,
-.composer-git-button {
+.composer-git-button,
+.composer-publish-button {
   color: var(--ctp-teal);
   border-color: rgba(148, 226, 213, 0.36);
   background:
     linear-gradient(120deg, rgba(148, 226, 213, 0.13), rgba(203, 166, 247, 0.10)),
-    linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0.85rem rgba(148, 226, 213, 0.08);
 }
 .composer-git-button {
@@ -1410,10 +2038,19 @@ summary { cursor: pointer; color: var(--warning); }
   border-color: rgba(166, 227, 161, 0.38);
   background:
     linear-gradient(120deg, rgba(166, 227, 161, 0.13), rgba(148, 226, 213, 0.10)),
-    linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
+}
+.composer-publish-button {
+  color: var(--ctp-peach);
+  border-color: rgba(250, 179, 135, 0.38);
+  background:
+    linear-gradient(120deg, rgba(250, 179, 135, 0.13), rgba(245, 194, 231, 0.10)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
 }
 .composer-compact-button:hover,
-.composer-git-button:hover {
+.composer-git-button:hover,
+.composer-publish-button:hover,
+.composer-publish-button.menu-open {
   color: #11111b;
   background: linear-gradient(120deg, var(--ctp-teal), var(--ctp-blue), var(--ctp-mauve));
   border-color: transparent;
@@ -1421,6 +2058,59 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-git-button:hover {
   background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
 }
+.composer-publish-button:hover,
+.composer-publish-button.menu-open {
+  background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow), var(--ctp-mauve));
+}
+.composer-publish-menu-panel {
+  position: absolute;
+  z-index: 100;
+  inset: auto auto 100% 0;
+  display: none;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.38rem;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(18rem, calc(100vw - 2rem));
+  max-height: min(60vh, 24rem);
+  padding-bottom: 0.38rem;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+.composer-publish-menu:hover .composer-publish-menu-panel,
+.composer-publish-menu:focus-within .composer-publish-menu-panel,
+.composer-publish-menu.open .composer-publish-menu-panel {
+  display: flex;
+}
+.composer-publish-menu.open .composer-publish-button {
+  border-color: rgba(250, 179, 135, 0.58);
+}
+.composer-publish-menu-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: min(13rem, calc(100vw - 2rem));
+  min-width: 9rem;
+  max-width: 13rem;
+  margin: 0;
+  color: var(--ctp-peach);
+  border: 1px solid rgba(250, 179, 135, 0.30);
+  border-radius: 0.78rem;
+  background:
+    linear-gradient(120deg, rgba(250, 179, 135, 0.12), rgba(249, 226, 175, 0.08)),
+    var(--ctp-crust);
+  text-align: center;
+  white-space: nowrap;
+  box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.045);
+}
+.composer-publish-menu-item:hover,
+.composer-publish-menu-item:focus-visible {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow));
+  box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20);
+}
 .composer-row button[data-tooltip]::before,
 .composer-row button[data-tooltip]::after {
   position: absolute;
@@ -1434,7 +2124,7 @@ summary { cursor: pointer; color: var(--warning); }
   bottom: calc(100% + 0.42rem);
   width: 0.72rem;
   height: 0.72rem;
-  background: rgba(17, 17, 27, 0.96);
+  background: rgba(var(--ctp-crust-rgb), 0.96);
   border-right: 1px solid rgba(166, 227, 161, 0.28);
   border-bottom: 1px solid rgba(166, 227, 161, 0.28);
   transform: translate(-1.2rem, 0.24rem) rotate(45deg);
@@ -1455,8 +2145,8 @@ summary { cursor: pointer; color: var(--warning); }
   border-radius: 0.86rem;
   background:
     radial-gradient(circle at 8% 0%, rgba(166, 227, 161, 0.13), transparent 12rem),
-    linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.94));
-  box-shadow: 0 1rem 2.4rem rgba(17, 17, 27, 0.58), 0 0 1.2rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.055);
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.94));
+  box-shadow: 0 1rem 2.4rem rgba(var(--ctp-crust-rgb), 0.58), 0 0 1.2rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.055);
   font-size: 0.82rem;
   font-weight: 650;
   text-transform: none;
@@ -1485,21 +2175,38 @@ summary { cursor: pointer; color: var(--warning); }
   margin: 0;
   font-size: 0.9rem;
 }
-.details dt { color: rgba(186, 194, 222, 0.66); }
+.details dt { color: rgba(var(--ctp-subtext-rgb), 0.66); }
 .details dd { margin: 0; overflow-wrap: anywhere; }
 .queue-box, .commands-box, .event-log {
-  background: rgba(17, 17, 27, 0.72);
+  background: rgba(var(--ctp-crust-rgb), 0.72);
   border: 1px solid rgba(180, 190, 254, 0.18);
   border-radius: 0.82rem;
   padding: 0.72rem;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
 }
 .commands-box {
-  max-height: 13rem;
+  max-height: min(32rem, 52vh);
   overflow: auto;
   font-size: 0.86rem;
 }
-.command-item { margin-bottom: 0.5rem; }
+.command-item {
+  display: block;
+  width: 100%;
+  min-height: auto;
+  margin: 0 0 0.5rem;
+  padding: 0.48rem 0.56rem;
+  text-align: left;
+  background: rgba(var(--ctp-surface-rgb), 0.18);
+  border-color: rgba(180, 190, 254, 0.12);
+  box-shadow: none;
+}
+.command-item:last-child { margin-bottom: 0; }
+.command-item:hover,
+.command-item:focus-visible {
+  transform: none;
+  background: linear-gradient(90deg, rgba(203, 166, 247, 0.16), rgba(137, 180, 250, 0.08));
+  border-color: rgba(148, 226, 213, 0.45);
+}
 .command-item code {
   color: var(--ctp-green);
   text-shadow: 0 0 0.7rem rgba(166, 227, 161, 0.25);
@@ -1513,18 +2220,104 @@ summary { cursor: pointer; color: var(--warning); }
 .event { padding: 0.3rem 0; border-bottom: 1px solid rgba(180, 190, 254, 0.06); }
 .event.warn { color: var(--warning); }
 .event.error { color: var(--danger); }
-.muted { color: rgba(186, 194, 222, 0.68); }
+.muted { color: rgba(var(--ctp-subtext-rgb), 0.68); }
 .extension-dialog {
   position: relative;
   width: min(42rem, calc(100vw - 2rem));
   border: 1px solid rgba(203, 166, 247, 0.35);
   border-radius: 1rem;
-  background: linear-gradient(145deg, rgba(30, 30, 46, 0.98), rgba(17, 17, 27, 0.98));
+  background: linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.98), rgba(var(--ctp-crust-rgb), 0.98));
   color: var(--text);
   box-shadow: 0 2rem 5rem var(--shadow), 0 0 2rem var(--glow-mauve);
 }
-.extension-dialog::backdrop { background: rgba(17, 17, 27, 0.78); backdrop-filter: blur(4px); }
+.extension-dialog::backdrop { background: rgba(var(--ctp-crust-rgb), 0.78); backdrop-filter: blur(4px); }
+#dialogMessage {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.45;
+}
+.extension-dialog.guardrail-dialog {
+  border-color: rgba(249, 226, 175, 0.62);
+  box-shadow: 0 2rem 5rem var(--shadow), 0 0 2rem rgba(249, 226, 175, 0.24);
+}
+.extension-dialog.guardrail-dialog #dialogTitle {
+  color: var(--ctp-yellow);
+  text-shadow: 0 0 1rem rgba(249, 226, 175, 0.22);
+}
+.extension-dialog.guardrail-dialog #dialogMessage {
+  margin: 0.6rem 0 0;
+  padding: 0.78rem 0.85rem;
+  border: 1px solid rgba(249, 226, 175, 0.24);
+  border-radius: 0.78rem;
+  background: rgba(var(--ctp-crust-rgb), 0.62);
+  color: var(--ctp-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.88rem;
+}
+.extension-dialog.guardrail-dialog .dialog-options button.guardrail-safe-action {
+  border-color: rgba(166, 227, 161, 0.58);
+  box-shadow: 0 0 1rem rgba(166, 227, 161, 0.18);
+}
+.extension-dialog.guardrail-dialog .dialog-options button.guardrail-allow-action {
+  border-color: rgba(249, 226, 175, 0.46);
+  color: var(--ctp-yellow);
+}
+.extension-dialog.release-dialog {
+  width: min(64rem, calc(100vw - 1.5rem));
+  max-height: min(82vh, 54rem);
+}
+.extension-dialog.release-dialog form {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  max-height: calc(min(82vh, 54rem) - 2rem);
+}
+.extension-dialog.release-dialog #dialogTitle {
+  color: var(--ctp-green);
+  text-shadow: 0 0 1rem rgba(166, 227, 161, 0.20);
+}
+.extension-dialog.release-dialog #dialogMessage {
+  min-height: 14rem;
+  max-height: min(56vh, 34rem);
+  margin: 0.75rem 0 1rem;
+  padding: 0.9rem 1rem;
+  overflow: auto;
+  border: 1px solid rgba(137, 180, 250, 0.25);
+  border-radius: 0.85rem;
+  background: rgba(var(--ctp-crust-rgb), 0.58);
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.88rem;
+  line-height: 1.48;
+}
+.release-dialog-line {
+  display: block;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.release-dialog-heading {
+  margin-top: 0.55rem;
+  color: var(--ctp-blue);
+  font-weight: 800;
+}
+.release-dialog-heading:first-child { margin-top: 0; }
+.release-dialog-success { color: var(--ctp-green); }
+.release-dialog-warning { color: var(--ctp-yellow); }
+.release-dialog-danger { color: var(--ctp-red); }
+.release-dialog-muted { color: rgba(var(--ctp-subtext-rgb), 0.72); }
+.release-dialog-spacer { min-height: 0.55rem; }
+.extension-dialog.release-dialog .dialog-options {
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.7rem;
+}
+.extension-dialog.release-dialog .dialog-options button {
+  text-align: center;
+  font-weight: 800;
+}
+.extension-dialog.release-dialog .dialog-options button.release-cancel-action {
+  border-color: rgba(249, 226, 175, 0.38);
+  color: var(--ctp-yellow);
+}
 .extension-dialog menu {
   display: flex;
   justify-content: flex-end;
@@ -1556,7 +2349,7 @@ summary { cursor: pointer; color: var(--warning); }
   overflow-wrap: anywhere;
   border: 1px solid rgba(166, 227, 161, 0.24);
   border-radius: 0.82rem;
-  background: rgba(17, 17, 27, 0.64);
+  background: rgba(var(--ctp-crust-rgb), 0.64);
   color: var(--ctp-green);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-weight: 850;
@@ -1579,7 +2372,7 @@ summary { cursor: pointer; color: var(--warning); }
   padding: 0.5rem;
   border: 1px solid rgba(249, 226, 175, 0.14);
   border-radius: 0.82rem;
-  background: rgba(17, 17, 27, 0.34);
+  background: rgba(var(--ctp-crust-rgb), 0.34);
 }
 .path-picker-fast-pick {
   display: grid;
@@ -1589,7 +2382,7 @@ summary { cursor: pointer; color: var(--warning); }
   width: 100%;
   border: 1px solid rgba(249, 226, 175, 0.22);
   border-radius: 0.72rem;
-  background: rgba(49, 50, 68, 0.36);
+  background: rgba(var(--ctp-surface-rgb), 0.36);
 }
 .path-picker-fast-pick-button,
 .path-picker-fast-pick-remove {
@@ -1612,7 +2405,7 @@ summary { cursor: pointer; color: var(--warning); }
   min-width: 1.45rem;
   width: 1.45rem;
   padding: 0;
-  color: rgba(186, 194, 222, 0.72);
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
   border-left: 1px solid rgba(249, 226, 175, 0.14);
   font-size: 0.78rem;
 }
@@ -1649,16 +2442,16 @@ summary { cursor: pointer; color: var(--warning); }
   padding: 0.4rem;
   border: 1px solid rgba(180, 190, 254, 0.16);
   border-radius: 0.82rem;
-  background: rgba(17, 17, 27, 0.48);
+  background: rgba(var(--ctp-crust-rgb), 0.48);
 }
 .path-picker-directory {
   justify-content: flex-start;
   width: 100%;
   padding: 0.58rem 0.72rem;
-  color: rgba(205, 214, 244, 0.94);
+  color: rgba(var(--ctp-text-rgb), 0.94);
   text-align: left;
   border-color: rgba(180, 190, 254, 0.14);
-  background: rgba(49, 50, 68, 0.36);
+  background: rgba(var(--ctp-surface-rgb), 0.36);
 }
 .path-picker-directory:hover,
 .path-picker-directory:focus-visible,
@@ -1669,7 +2462,7 @@ summary { cursor: pointer; color: var(--warning); }
   background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
 }
 .path-picker-directory.hidden-directory {
-  color: rgba(186, 194, 222, 0.68);
+  color: rgba(var(--ctp-subtext-rgb), 0.68);
 }
 .path-picker-empty,
 .path-picker-error {
@@ -1680,10 +2473,10 @@ summary { cursor: pointer; color: var(--warning); }
 }
 ::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; }
-::-webkit-scrollbar-track { background: rgba(17, 17, 27, 0.55); }
+::-webkit-scrollbar-track { background: rgba(var(--ctp-crust-rgb), 0.55); }
 ::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, var(--ctp-mauve), var(--ctp-blue), var(--ctp-teal));
-  border: 2px solid rgba(17, 17, 27, 0.88);
+  border: 2px solid rgba(var(--ctp-crust-rgb), 0.88);
   border-radius: 999px;
 }
 ::selection { color: #11111b; background: var(--ctp-pink); }
@@ -1758,7 +2551,7 @@ summary { cursor: pointer; color: var(--warning); }
     line-height: 1.1;
     background:
       linear-gradient(120deg, rgba(148, 226, 213, 0.12), rgba(203, 166, 247, 0.10)),
-      linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+      linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
   }
   .side-panel-toggle-button,
   .side-panel-expand-button {
@@ -1788,14 +2581,47 @@ summary { cursor: pointer; color: var(--warning); }
     border-radius: 0.95rem;
     background:
       radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.12), transparent 12rem),
-      linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
-    box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+      linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
+    box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
   }
   body.mobile-tabs-expanded .terminal-tabs { display: flex; }
+  .terminal-tabs:has(.terminal-tab-group:hover),
+  .terminal-tabs:has(.terminal-tab-group:focus-within),
+  .terminal-tabs:has(.terminal-tab-group.menu-open) {
+    overflow: auto;
+  }
   .terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
+  .terminal-tab-group {
+    flex-wrap: wrap;
+  }
+  .terminal-tab-group:hover,
+  .terminal-tab-group:focus-within,
+  .terminal-tab-group.menu-open {
+    flex-basis: 100%;
+  }
+  .terminal-tab-group-menu {
+    position: static;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    min-width: 0;
+    margin: 0.34rem;
+    padding-top: 0;
+    overflow: visible;
+  }
+  .terminal-tab-group-item,
+  .terminal-tab-group-add {
+    width: 100%;
+    min-width: min(11rem, 100%);
+    max-width: 100%;
+    flex: 0 0 auto;
+  }
   .terminal-tab-button,
   .terminal-tab-close,
-  .terminal-new-tab-button { min-height: 44px; }
+  .terminal-new-tab-button,
+  .terminal-tab-group-add { min-height: 44px; }
   .terminal-tab-button { padding: 0.32rem 0.52rem; }
   .terminal-tab-title { font-size: 0.78rem; }
   .terminal-tab-meta { display: none; }
@@ -1815,7 +2641,24 @@ summary { cursor: pointer; color: var(--warning); }
     overflow: auto;
     padding: 0.36rem 0.55rem;
   }
-  .widget-area .widget:not(.todo-widget) { display: none; }
+  .widget-area .widget:not(.todo-widget):not(.release-npm-widget) { display: none; }
+  .release-npm-widget {
+    gap: 0.45rem;
+    padding: 0.55rem;
+  }
+  .release-npm-header {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+  }
+  .release-npm-meta,
+  .release-npm-actions { justify-content: flex-start; }
+  .release-npm-terminal {
+    max-height: min(28dvh, 16rem);
+    min-height: 4rem;
+    padding: 0.52rem;
+    font-size: 0.72rem;
+  }
+  .release-npm-pill { max-width: 100%; }
   .todo-widget {
     gap: 0.38rem;
     margin: 0.2rem 0;
@@ -1841,6 +2684,14 @@ summary { cursor: pointer; color: var(--warning); }
     padding: 0.62rem 0.58rem;
     scroll-padding-bottom: calc(12rem + var(--keyboard-inset-bottom, 0px));
   }
+  .sticky-user-prompt-button {
+    grid-template-columns: minmax(0, 1fr) auto;
+    margin: 0 0 0.5rem;
+    padding: 0.48rem 0.58rem;
+    gap: 0.48rem;
+  }
+  .sticky-user-prompt-label { display: none; }
+  .sticky-user-prompt-text { font-size: 0.78rem; }
   .jump-to-latest-button {
     min-height: 44px;
     margin: 0.35rem auto;
@@ -1858,6 +2709,17 @@ summary { cursor: pointer; color: var(--warning); }
     font-size: 0.72rem;
   }
   .message-role { letter-spacing: 0.08em; }
+  .feedback-tray {
+    align-items: stretch;
+    flex-direction: column;
+    margin: 0 0.58rem 0.52rem;
+  }
+  .feedback-tray button { width: 100%; }
+  .action-feedback-controls {
+    top: calc(100% - 0.12rem);
+    right: 0.34rem;
+    gap: 0.28rem;
+  }
   .code-block {
     padding: 0.58rem;
     font-size: 0.78rem;
@@ -1930,8 +2792,8 @@ summary { cursor: pointer; color: var(--warning); }
     position: sticky;
     bottom: 0;
     padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
-    background: linear-gradient(180deg, rgba(17, 17, 27, 0.92), rgba(17, 17, 27, 0.98));
-    box-shadow: 0 -0.85rem 1.8rem rgba(17, 17, 27, 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
+    background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-crust-rgb), 0.98));
+    box-shadow: 0 -0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
   }
   #promptInput {
     min-height: calc(1.45em + 1.5rem);
@@ -1955,7 +2817,7 @@ summary { cursor: pointer; color: var(--warning); }
     border-color: rgba(249, 226, 175, 0.34);
     background:
       linear-gradient(120deg, rgba(249, 226, 175, 0.12), rgba(203, 166, 247, 0.10)),
-      linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+      linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
   }
   body.mobile-keyboard-open .terminal-tabs-shell,
   body.mobile-keyboard-open .widget-area,
@@ -2004,8 +2866,8 @@ summary { cursor: pointer; color: var(--warning); }
     border-radius: 0.95rem;
     background:
       radial-gradient(circle at 8% 0%, rgba(249, 226, 175, 0.12), transparent 12rem),
-      linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
-    box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+      linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
+    box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
   }
   body.composer-actions-open .composer-actions-panel { display: grid; }
   .composer-actions-panel label {
@@ -2038,7 +2900,38 @@ summary { cursor: pointer; color: var(--warning); }
   .composer-actions-panel > #steerButton,
   #newSessionButton,
   #compactButton,
-  #gitWorkflowButton { grid-column: span 1; }
+  #gitWorkflowButton,
+  .composer-actions-panel > .composer-publish-menu { grid-column: span 1; }
+  .composer-actions-panel > .composer-publish-menu {
+    width: 100%;
+    margin-right: 0;
+  }
+  .composer-actions-panel > .composer-publish-menu.open {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.42rem;
+  }
+  .composer-actions-panel > .composer-publish-menu.open .composer-publish-button,
+  .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
+    grid-column: 1 / -1;
+  }
+  .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
+    position: static;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    max-height: none;
+    margin-left: 0;
+    padding-bottom: 0;
+    overflow: visible;
+  }
+  .composer-actions-panel > .composer-publish-menu .composer-publish-menu-item {
+    width: 100%;
+    max-width: 100%;
+    flex: 1 1 0;
+  }
   .command-suggest {
     max-height: 35dvh;
     font-size: 0.86rem;
@@ -2058,7 +2951,7 @@ summary { cursor: pointer; color: var(--warning); }
     padding: 0;
     border: 0;
     border-radius: 0;
-    background: rgba(17, 17, 27, 0.62);
+    background: rgba(var(--ctp-crust-rgb), 0.62);
     box-shadow: none;
     backdrop-filter: blur(4px);
   }
@@ -2092,12 +2985,19 @@ summary { cursor: pointer; color: var(--warning); }
     overflow: auto;
     border-radius: 1rem 1rem 0 0;
   }
+  .extension-dialog.release-dialog form {
+    max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem - env(safe-area-inset-top));
+  }
+  .extension-dialog.release-dialog #dialogMessage {
+    min-height: 10rem;
+    max-height: 48dvh;
+  }
   .extension-dialog menu {
     position: sticky;
     bottom: 0;
     flex-wrap: wrap;
     padding-bottom: env(safe-area-inset-bottom);
-    background: linear-gradient(180deg, transparent, rgba(17, 17, 27, 0.96) 35%);
+    background: linear-gradient(180deg, transparent, rgba(var(--ctp-crust-rgb), 0.96) 35%);
   }
   .extension-dialog menu button { flex: 1 1 9rem; }
   .composer-row button[data-tooltip]:not(.tooltip-open)::before,