@firstpick/pi-package-webui 0.1.8 → 0.2.0

package/public/index.html

@@ -162,14 +162,14 @@
           </button>
         </div>
         <div class="side-panel-body">
-          <section class="side-panel-section" data-side-panel-section="controls">
+          <section class="side-panel-section collapsed" data-side-panel-section="controls">
             <h2>
-              <button id="sidePanelSectionToggleControls" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionControls" aria-label="Collapse Controls section" title="Collapse Controls section" data-side-panel-section-toggle="controls">
+              <button id="sidePanelSectionToggleControls" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionControls" aria-label="Expand Controls section" title="Expand Controls section" data-side-panel-section-toggle="controls">
                 <span class="side-panel-section-label">Controls</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionControls" class="side-panel-section-content">
+            <div id="sidePanelSectionControls" class="side-panel-section-content" hidden>
               <div class="side-panel-controls">
                 <div class="control-field">
                   <label for="modelSelect">Model</label>
@@ -216,6 +216,10 @@
                   <div id="networkStatus" class="network-status closed">Local only</div>
                   <button id="openNetworkButton" type="button">Open to network</button>
                 </div>
+                <div class="control-field server-control-field">
+                  <label>Server</label>
+                  <button id="stopServerButton" class="danger" type="button" title="Stop the Pi Web UI server and disconnect all browser clients" aria-label="Stop the Pi Web UI server">Stop Server</button>
+                </div>
                 <div class="control-field notification-control-field">
                   <span class="control-label">Notifications</span>
                   <label class="toggle-control" for="agentDoneNotificationsToggle">
@@ -229,58 +233,72 @@
               </div>
             </div>
           </section>
-          <section class="side-panel-section" data-side-panel-section="optional-features">
+          <section class="side-panel-section collapsed" data-side-panel-section="optional-features">
             <h2>
-              <button id="sidePanelSectionToggleOptionalFeatures" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionOptionalFeatures" aria-label="Collapse Optional features section" title="Collapse Optional features section" data-side-panel-section-toggle="optional-features">
+              <button id="sidePanelSectionToggleOptionalFeatures" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionOptionalFeatures" aria-label="Expand Optional features section" title="Expand Optional features section" data-side-panel-section-toggle="optional-features">
                 <span class="side-panel-section-label">Optional features</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionOptionalFeatures" class="side-panel-section-content">
+            <div id="sidePanelSectionOptionalFeatures" class="side-panel-section-content" hidden>
               <div id="optionalFeaturesBox" class="optional-features-box muted">Checking optional features…</div>
             </div>
           </section>
-          <section class="side-panel-section" data-side-panel-section="session">
+          <section class="side-panel-section collapsed" data-side-panel-section="codex-usage">
+            <h2>
+              <button id="sidePanelSectionToggleCodexUsage" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionCodexUsage" aria-label="Expand Codex Usage section" title="Expand Codex Usage section" data-side-panel-section-toggle="codex-usage">
+                <span class="side-panel-section-label">Codex Usage</span>
+                <span class="side-panel-section-chevron" aria-hidden="true">›</span>
+              </button>
+            </h2>
+            <div id="sidePanelSectionCodexUsage" class="side-panel-section-content" hidden>
+              <div class="codex-usage-actions">
+                <button id="refreshCodexUsageButton" type="button">Refresh usage</button>
+              </div>
+              <div id="codexUsageBox" class="codex-usage-box muted">Checking Codex usage…</div>
+            </div>
+          </section>
+          <section class="side-panel-section collapsed" data-side-panel-section="session">
             <h2>
-              <button id="sidePanelSectionToggleSession" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionSession" aria-label="Collapse Session section" title="Collapse Session section" data-side-panel-section-toggle="session">
+              <button id="sidePanelSectionToggleSession" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionSession" aria-label="Expand Session section" title="Expand Session section" data-side-panel-section-toggle="session">
                 <span class="side-panel-section-label">Session</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionSession" class="side-panel-section-content">
+            <div id="sidePanelSectionSession" class="side-panel-section-content" hidden>
               <dl id="stateDetails" class="details"></dl>
             </div>
           </section>
-          <section class="side-panel-section" data-side-panel-section="queue">
+          <section class="side-panel-section collapsed" data-side-panel-section="queue">
             <h2>
-              <button id="sidePanelSectionToggleQueue" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionQueue" aria-label="Collapse Queue section" title="Collapse Queue section" data-side-panel-section-toggle="queue">
+              <button id="sidePanelSectionToggleQueue" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionQueue" aria-label="Expand Queue section" title="Expand Queue section" data-side-panel-section-toggle="queue">
                 <span class="side-panel-section-label">Queue</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionQueue" class="side-panel-section-content">
+            <div id="sidePanelSectionQueue" class="side-panel-section-content" hidden>
               <div id="queueBox" class="queue-box muted">No queued messages.</div>
             </div>
           </section>
-          <section class="side-panel-section" data-side-panel-section="commands">
+          <section class="side-panel-section collapsed" data-side-panel-section="commands">
             <h2>
-              <button id="sidePanelSectionToggleCommands" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionCommands" aria-label="Collapse Commands section" title="Collapse Commands section" data-side-panel-section-toggle="commands">
+              <button id="sidePanelSectionToggleCommands" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionCommands" aria-label="Expand Commands section" title="Expand Commands section" data-side-panel-section-toggle="commands">
                 <span class="side-panel-section-label">Commands</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionCommands" class="side-panel-section-content">
+            <div id="sidePanelSectionCommands" class="side-panel-section-content" hidden>
               <div id="commandsBox" class="commands-box muted">Loading…</div>
             </div>
           </section>
-          <section class="side-panel-section" data-side-panel-section="events">
+          <section class="side-panel-section collapsed" data-side-panel-section="events">
             <h2>
-              <button id="sidePanelSectionToggleEvents" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionEvents" aria-label="Collapse Events section" title="Collapse Events section" data-side-panel-section-toggle="events">
+              <button id="sidePanelSectionToggleEvents" class="side-panel-section-toggle" type="button" aria-expanded="false" aria-controls="sidePanelSectionEvents" aria-label="Expand Events section" title="Expand Events section" data-side-panel-section-toggle="events">
                 <span class="side-panel-section-label">Events</span>
                 <span class="side-panel-section-chevron" aria-hidden="true">›</span>
               </button>
             </h2>
-            <div id="sidePanelSectionEvents" class="side-panel-section-content">
+            <div id="sidePanelSectionEvents" class="side-panel-section-content" hidden>
               <div id="eventLog" class="event-log"></div>
             </div>
           </section>

package/public/styles.css

@@ -808,6 +808,83 @@ body.side-panel-collapsed .terminal-tabs-shell {
   background: rgba(var(--ctp-crust-rgb), 0.46);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(148, 226, 213, 0.05);
 }
+.codex-usage-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.48rem;
+}
+.codex-usage-actions button {
+  min-height: 34px;
+  padding: 0.32rem 0.58rem;
+  font-size: 0.72rem;
+}
+.codex-usage-box {
+  display: grid;
+  gap: 0.58rem;
+  padding: 0.72rem;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.85rem;
+  background: rgba(var(--ctp-crust-rgb), 0.50);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(203, 166, 247, 0.05);
+}
+.codex-usage-summary {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.35rem 0.55rem;
+  align-items: baseline;
+}
+.codex-usage-plan {
+  color: rgba(var(--ctp-text-rgb), 0.94);
+  font-weight: 900;
+}
+.codex-usage-fetched,
+.codex-usage-detail,
+.codex-usage-reset {
+  color: rgba(var(--ctp-subtext-rgb), 0.70);
+  font-size: 0.72rem;
+  line-height: 1.35;
+}
+.codex-usage-unavailable,
+.codex-usage-warning {
+  color: var(--ctp-yellow);
+  font-weight: 800;
+}
+.codex-usage-bucket {
+  display: grid;
+  gap: 0.32rem;
+}
+.codex-usage-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.6rem;
+  align-items: center;
+}
+.codex-usage-label {
+  min-width: 0;
+  color: rgba(var(--ctp-text-rgb), 0.86);
+  font-size: 0.78rem;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+.codex-usage-percent {
+  color: var(--ctp-teal);
+  font-size: 0.82rem;
+}
+.codex-usage-meter {
+  overflow: hidden;
+  height: 0.5rem;
+  border: 1px solid rgba(180, 190, 254, 0.14);
+  border-radius: 999px;
+  background: rgba(var(--ctp-surface-rgb), 0.26);
+}
+.codex-usage-meter-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--ctp-green), var(--ctp-yellow), var(--ctp-peach));
+  box-shadow: 0 0 0.85rem rgba(148, 226, 213, 0.20);
+}
 .optional-feature-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -1608,19 +1685,26 @@ button.footer-meta {
   display: grid;
   gap: 0.62rem;
   padding: 0.72rem;
+  overflow: hidden;
   white-space: normal;
-  border-color: rgba(245, 194, 231, 0.34);
+  border-color: rgba(245, 194, 231, 0.62);
+  border-left: 0.28rem solid rgba(245, 194, 231, 0.88);
   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));
+    radial-gradient(circle at 4% 0%, rgba(245, 194, 231, 0.22), transparent 16rem),
+    radial-gradient(circle at 96% 12%, rgba(148, 226, 213, 0.14), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.92));
+  box-shadow:
+    0 0 0 1px rgba(var(--ctp-crust-rgb), 0.94),
+    0 1rem 2.2rem rgba(0, 0, 0, 0.36),
+    inset 0 0 1.2rem rgba(245, 194, 231, 0.07);
 }
 .release-aur-widget {
-  border-color: rgba(250, 179, 135, 0.34);
+  border-color: rgba(250, 179, 135, 0.62);
+  border-left-color: rgba(250, 179, 135, 0.88);
   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));
+    radial-gradient(circle at 4% 0%, rgba(250, 179, 135, 0.20), transparent 16rem),
+    radial-gradient(circle at 96% 12%, rgba(166, 227, 161, 0.14), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.92));
 }
 .release-aur-widget .release-npm-kicker { color: var(--ctp-peach); }
 .release-npm-header {
@@ -1664,9 +1748,9 @@ button.footer-meta {
   padding: 0.16rem 0.5rem;
   overflow: hidden;
   color: var(--ctp-yellow);
-  border: 1px solid rgba(249, 226, 175, 0.22);
+  border: 1px solid rgba(249, 226, 175, 0.32);
   border-radius: 999px;
-  background: rgba(var(--ctp-crust-rgb), 0.48);
+  background: rgba(var(--ctp-crust-rgb), 0.72);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.72rem;
   font-weight: 800;
@@ -1681,61 +1765,150 @@ button.footer-meta {
   font-size: 0.76rem;
   font-weight: 850;
 }
+.release-npm-stream-header {
+  display: flex;
+  align-items: center;
+  gap: 0.46rem;
+  min-width: 0;
+  padding: 0.36rem 0.52rem;
+  border: 1px solid rgba(137, 180, 250, 0.26);
+  border-radius: 0.62rem;
+  color: rgba(var(--ctp-text-rgb), 0.92);
+  background: rgba(var(--ctp-crust-rgb), 0.76);
+  box-shadow: inset 0 0 0 1px rgba(var(--ctp-text-rgb), 0.04);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+.release-npm-stream-dot {
+  flex: 0 0 auto;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  background: var(--ctp-green);
+  box-shadow: 0 0 0.72rem rgba(166, 227, 161, 0.62);
+}
+.release-npm-stream-dot.live { animation: release-npm-live-pulse 1.35s ease-in-out infinite; }
+.release-npm-stream-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.release-npm-stream-count {
+  margin-left: auto;
+  color: rgba(var(--ctp-subtext-rgb), 0.84);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+}
 .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);
+  padding: 0.78rem 0.62rem;
+  border: 1px solid rgba(137, 180, 250, 0.42);
   border-radius: 0.78rem;
+  color: rgba(var(--ctp-text-rgb), 0.96);
   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);
+    linear-gradient(180deg, rgba(3, 4, 10, 0.98), rgba(var(--ctp-crust-rgb), 0.96)),
+    radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.10), transparent 15rem);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--ctp-text-rgb), 0.05),
+    inset 0 0 1.7rem rgba(0, 0, 0, 0.42);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.78rem;
-  line-height: 1.42;
+  line-height: 1.5;
   overscroll-behavior: contain;
 }
 .release-npm-line {
-  min-width: max-content;
-  min-height: 1.42em;
-  color: rgba(var(--ctp-text-rgb), 0.88);
+  display: block;
+  width: max-content;
+  min-width: 100%;
+  min-height: 1.5em;
+  margin: 0 -0.18rem;
+  padding: 0 0.42rem;
+  border-left: 2px solid rgba(var(--ctp-overlay-rgb), 0.24);
+  color: rgba(var(--ctp-text-rgb), 0.94);
   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-line:nth-child(odd) { background: rgba(var(--ctp-text-rgb), 0.025); }
+.release-npm-line.command { color: var(--ctp-sky); border-left-color: rgba(137, 220, 235, 0.68); }
+.release-npm-line.target { color: var(--ctp-pink); border-left-color: rgba(245, 194, 231, 0.72); font-weight: 850; }
+.release-npm-line.pass { color: var(--ctp-green); border-left-color: rgba(166, 227, 161, 0.72); }
+.release-npm-line.fail { color: var(--ctp-red); border-left-color: rgba(243, 139, 168, 0.78); }
+.release-npm-line.warn { color: var(--ctp-yellow); border-left-color: rgba(249, 226, 175, 0.74); }
+.release-npm-line.info { color: rgba(var(--ctp-subtext-rgb), 0.88); border-left-color: rgba(186, 194, 222, 0.44); }
+.release-npm-line.event { color: var(--ctp-mauve); border-left-color: rgba(203, 166, 247, 0.72); }
 .release-npm-controls {
-  color: rgba(var(--ctp-subtext-rgb), 0.72);
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
   font-size: 0.75rem;
   line-height: 1.35;
 }
 .release-npm-log-widget .release-npm-terminal {
   max-height: min(42rem, 52vh);
 }
+@keyframes release-npm-live-pulse {
+  0%, 100% { opacity: 0.58; transform: scale(0.82); }
+  50% { opacity: 1; transform: scale(1.08); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .release-npm-stream-dot.live { animation: none; }
+}
 .todo-widget {
   display: grid;
-  gap: 0.52rem;
-  padding: 0.68rem 0.76rem;
+  gap: 0;
+  margin: 0.16rem 0;
+  padding: 0.42rem 0.5rem;
   white-space: normal;
-  border-color: rgba(137, 180, 250, 0.32);
+  border-color: rgba(137, 180, 250, 0.28);
   background:
-    radial-gradient(circle at 4% 0%, rgba(137, 180, 250, 0.18), transparent 12rem),
-    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.88), rgba(var(--ctp-base-rgb), 0.74));
+    radial-gradient(circle at 4% 0%, rgba(137, 180, 250, 0.14), transparent 10rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.86), rgba(var(--ctp-base-rgb), 0.68));
 }
+.todo-widget[open] {
+  gap: 0.36rem;
+  padding-bottom: 0.5rem;
+}
+.todo-widget-summary {
+  display: grid;
+  gap: 0.32rem;
+  min-width: 0;
+  color: rgba(var(--ctp-text-rgb), 0.84);
+  cursor: pointer;
+  list-style: none;
+}
+.todo-widget-summary::-webkit-details-marker { display: none; }
 .todo-widget-header {
   display: flex;
   align-items: center;
-  gap: 0.48rem;
+  gap: 0.34rem;
   min-width: 0;
 }
+.todo-widget-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
+  font-size: 0.98rem;
+  font-weight: 950;
+  line-height: 1;
+  transition: transform 0.16s ease, color 0.16s ease;
+}
+.todo-widget[open] .todo-widget-toggle {
+  color: var(--ctp-blue);
+  transform: rotate(90deg);
+}
 .todo-widget-title {
+  min-width: 0;
   color: var(--ctp-blue);
+  font-size: 0.72rem;
   font-weight: 950;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -1744,58 +1917,68 @@ button.footer-meta {
 .todo-widget-meta {
   display: inline-flex;
   align-items: center;
-  min-height: 1.35rem;
-  padding: 0.12rem 0.42rem;
-  border: 1px solid rgba(137, 180, 250, 0.24);
+  min-height: 1.08rem;
+  padding: 0.06rem 0.34rem;
+  border: 1px solid rgba(137, 180, 250, 0.22);
   border-radius: 999px;
-  background: rgba(var(--ctp-crust-rgb), 0.48);
-  font-size: 0.72rem;
+  background: rgba(var(--ctp-crust-rgb), 0.44);
+  font-size: 0.66rem;
   font-weight: 850;
+  line-height: 1;
 }
 .todo-widget-count { color: var(--ctp-green); }
 .todo-widget-meta { color: var(--ctp-yellow); }
 .todo-widget-progress {
-  height: 0.38rem;
+  height: 0.26rem;
   overflow: hidden;
   border-radius: 999px;
-  background: rgba(var(--ctp-surface-rgb), 0.78);
-  box-shadow: inset 0 0 0 1px rgba(180, 190, 254, 0.10);
+  background: rgba(var(--ctp-surface-rgb), 0.70);
+  box-shadow: inset 0 0 0 1px rgba(180, 190, 254, 0.08);
 }
 .todo-widget-progress-fill {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-teal), var(--ctp-green));
-  box-shadow: 0 0 0.85rem rgba(148, 226, 213, 0.42);
+  box-shadow: 0 0 0.65rem rgba(148, 226, 213, 0.34);
+}
+.todo-widget-body {
+  display: grid;
+  gap: 0.3rem;
+  max-height: min(13rem, 28vh);
+  overflow: auto;
+  padding-right: 0.12rem;
+  overscroll-behavior: contain;
 }
 .todo-widget-list {
   display: grid;
-  gap: 0.34rem;
+  gap: 0.24rem;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .todo-widget-item {
   display: grid;
-  grid-template-columns: 1.35rem minmax(0, 1fr);
+  grid-template-columns: 1.05rem minmax(0, 1fr);
   align-items: start;
-  gap: 0.48rem;
+  gap: 0.34rem;
   min-width: 0;
-  color: rgba(var(--ctp-text-rgb), 0.92);
+  color: rgba(var(--ctp-text-rgb), 0.90);
+  font-size: 0.78rem;
 }
 .todo-widget-marker {
   display: inline-grid;
   place-items: center;
-  width: 1.12rem;
-  height: 1.12rem;
-  margin-top: 0.06rem;
-  border: 1px solid rgba(180, 190, 254, 0.32);
-  border-radius: 0.34rem;
+  width: 0.92rem;
+  height: 0.92rem;
+  margin-top: 0.08rem;
+  border: 1px solid rgba(180, 190, 254, 0.30);
+  border-radius: 0.3rem;
   color: #11111b;
-  font-size: 0.74rem;
+  font-size: 0.62rem;
   font-weight: 950;
   line-height: 1;
-  background: rgba(var(--ctp-surface-rgb), 0.88);
+  background: rgba(var(--ctp-surface-rgb), 0.86);
 }
 .todo-widget-item.done .todo-widget-marker {
   border-color: transparent;
@@ -1813,11 +1996,11 @@ button.footer-meta {
 .todo-widget-text {
   min-width: 0;
   overflow-wrap: anywhere;
-  line-height: 1.35;
+  line-height: 1.28;
 }
 .todo-widget-footer {
   color: rgba(var(--ctp-subtext-rgb), 0.64);
-  font-size: 0.72rem;
+  font-size: 0.68rem;
 }
 .chat {
   position: relative;
@@ -1923,11 +2106,12 @@ button.footer-meta {
   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.action-enter {
-  animation: action-card-slide-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  animation: action-card-slide-in 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 @keyframes action-card-slide-in {
-  from { opacity: 0; transform: translateY(0.42rem); }
-  to { opacity: 1; transform: translateY(0); }
+  0% { opacity: 0; transform: translate3d(0, 1.45rem, 0) scale(0.985); }
+  60% { opacity: 1; }
+  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
 }
 .message::before {
   content: "";
@@ -1959,11 +2143,6 @@ button.footer-meta {
   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 {
@@ -2457,10 +2636,6 @@ summary { cursor: pointer; color: var(--warning); }
   letter-spacing: 0.14em;
   text-shadow: 0 0 0.7rem var(--glow-teal);
 }
-.thinking-block.streaming-thinking.complete > summary::after {
-  content: " done";
-  color: var(--ctp-green);
-}
 .thinking-text {
   color: rgba(var(--ctp-text-rgb), 0.82);
   margin-top: 0.55rem;
@@ -3470,33 +3645,62 @@ summary { cursor: pointer; color: var(--warning); }
   }
   .release-npm-meta,
   .release-npm-actions { justify-content: flex-start; }
+  .release-npm-stream-header {
+    padding: 0.3rem 0.42rem;
+    font-size: 0.66rem;
+    letter-spacing: 0.07em;
+  }
+  .release-npm-stream-count { font-size: 0.62rem; }
   .release-npm-terminal {
     max-height: min(28dvh, 16rem);
     min-height: 4rem;
-    padding: 0.52rem;
+    padding: 0.52rem 0.42rem;
     font-size: 0.72rem;
   }
+  .release-npm-line {
+    margin: 0 -0.12rem;
+    padding: 0 0.32rem;
+  }
   .release-npm-pill { max-width: 100%; }
   .todo-widget {
-    gap: 0.38rem;
-    margin: 0.2rem 0;
-    padding: 0.52rem 0.58rem;
-    border-radius: 0.72rem;
+    gap: 0;
+    margin: 0.12rem 0;
+    padding: 0.36rem 0.42rem;
+    border-radius: 0.66rem;
+  }
+  .todo-widget[open] {
+    gap: 0.28rem;
+    padding-bottom: 0.42rem;
   }
-  .todo-widget-header { gap: 0.34rem; }
-  .todo-widget-title { font-size: 0.7rem; }
+  .todo-widget-summary { gap: 0.24rem; }
+  .todo-widget-header { gap: 0.26rem; }
+  .todo-widget-toggle {
+    width: 0.9rem;
+    height: 0.9rem;
+    font-size: 0.88rem;
+  }
+  .todo-widget-title { font-size: 0.66rem; }
   .todo-widget-count,
-  .todo-widget-meta { font-size: 0.66rem; }
-  .todo-widget-list { gap: 0.26rem; }
+  .todo-widget-meta {
+    min-height: 0.98rem;
+    padding: 0.04rem 0.28rem;
+    font-size: 0.6rem;
+  }
+  .todo-widget-progress { height: 0.22rem; }
+  .todo-widget-body {
+    gap: 0.24rem;
+    max-height: min(9rem, 20dvh);
+  }
+  .todo-widget-list { gap: 0.2rem; }
   .todo-widget-item {
-    grid-template-columns: 1.12rem minmax(0, 1fr);
-    gap: 0.36rem;
-    font-size: 0.78rem;
+    grid-template-columns: 0.98rem minmax(0, 1fr);
+    gap: 0.28rem;
+    font-size: 0.74rem;
   }
   .todo-widget-marker {
-    width: 0.96rem;
-    height: 0.96rem;
-    font-size: 0.66rem;
+    width: 0.82rem;
+    height: 0.82rem;
+    font-size: 0.58rem;
   }
   .chat {
     padding: 0.62rem 0.58rem;