typebulb 0.14.2 → 0.14.4

package/dist/agents/claude/styles.css

@@ -92,7 +92,7 @@ body {
   font-size: .8rem;
   /* Drop the inherited 1.55 line-height so the bar's own strut doesn't add
      phantom ascender/descender room above the pills. Everything in the bar
-     is a fixed-height pill or a shimmer text line — both look right at 1. */
+     is a fixed-height pill, which looks right at 1. */
   line-height: 1;
   min-width: 0;
 }
@@ -102,13 +102,13 @@ body {
   gap: .4rem;
   align-items: center;
 }
-/* Chip shape shared by the status-bar pills (interactive: session chip, token
-   counter) and the working indicator (passive). One rule = one source of vertical
-   alignment, no element-type drift between siblings; inline-flex + line-height:1
-   + fixed height centers the glyph run by the box, not by the inherited line-box.
+/* Chip shape shared by the status-bar pills, interactive (session chip) and
+   passive (token counter). One rule = one source of vertical alignment, no
+   element-type drift between siblings; inline-flex + line-height:1 + fixed
+   height centers the glyph run by the box, not by the inherited line-box.
    Opaque so they read cleanly over the message text the transparent strip lets
    through. */
-.pill, .working, .token {
+.pill, .token {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -132,7 +132,16 @@ body {
   margin: 0;
   cursor: pointer;
 }
-.pill:hover { border-color: var(--accent); color: var(--accent); }
+/* `.on` latches the hover accent — the bar's only persistent state cue (every other
+   pill accents on hover alone). */
+.pill:hover, .pill.on { border-color: var(--accent); color: var(--accent); }
+/* Square glyph pill (the prose-mode toggle): width pinned to the pill height rather than
+   padding-driven — the bar's first non-word pill. The emoji can't take currentColor, so it
+   carries state itself: grayscale at rest, color while hovered or on — filtered on the
+   inner span, never the button, or it would wash the accent border too. */
+.pill.glyph { width: 1.7rem; padding: 0; font-size: .9rem; }
+.pill.glyph .glyph-img { filter: grayscale(1); opacity: .75; }
+.pill.glyph:hover .glyph-img, .pill.glyph.on .glyph-img { filter: none; opacity: 1; }
 
 /* The two status-bar chips each anchor an upward popover (token breakdown /
    session list). Wrap = positioning context; the popover anchors bottom/right and
@@ -156,20 +165,23 @@ body {
   box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
 }
 
-/* "working…" indicator: CC is mid-turn. Passive — driven by the live-chain leaf,
-   not a live token stream (the JSONL is flushed in batches, so this can sit lit
-   through a multi-minute buffering window). Shares the chip shape above; only adds
-   room for the pulsing dot. Non-interactive — no cursor / hover accent. */
-.working { gap: .45rem; }
-.working-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--accent);
-  animation: working-pulse 1.4s ease-in-out infinite;
+/* CC mid-turn: the token pill doubles as the working indicator — an accent shimmer
+   over the chip, the count frozen until the turn flushes. Passive — driven by the
+   live-chain leaf, not a live token stream (the JSONL is flushed in batches, so this
+   can sit lit through a multi-minute buffering window). The sweep blends with
+   --panel, not transparent like .launching's: statusbar pills must stay opaque over
+   the message text the strip lets through. */
+.token.busy {
+  border-color: var(--accent);
+  background: linear-gradient(100deg, var(--panel) 30%, color-mix(in srgb, var(--accent) 25%, var(--panel)) 50%, var(--panel) 70%);
+  background-size: 250% 100%;
+  /* Much slower than .launching's sweep: that one paces a ~2s wait, this can sit lit for
+     minutes — at that dwell a fast sweep reads as urgency, not progress. */
+  animation: bulb-shimmer 7s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .token.busy { animation: none; background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
 }
-@keyframes working-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
-@media (prefers-reduced-motion: reduce) { .working-dot { animation: none; opacity: .8; } }
 
 /* Session list — shares the popover chrome (.picker above); these are
    just its own dimensions. */
@@ -336,7 +348,9 @@ a.server-port:hover { text-decoration: underline; }
   visibility: visible; border-color: var(--accent);
   background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%);
   background-size: 250% 100%;
-  animation: bulb-shimmer 1.1s linear infinite;
+  /* One full pass per ~2s wait — slow enough to stay calm, fast enough that the band
+     is guaranteed to cross while the user is actually watching. */
+  animation: bulb-shimmer 2.2s linear infinite;
 }
 @keyframes bulb-shimmer { from { background-position: 250% 0; } to { background-position: -250% 0; } }
 @media (prefers-reduced-motion: reduce) {
@@ -782,7 +796,7 @@ a.server-port:hover { text-decoration: underline; }
   color: var(--accent); border-color: var(--accent);
   background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%);
   background-size: 250% 100%;
-  animation: bulb-shimmer 1.1s linear infinite;
+  animation: bulb-shimmer 2.2s linear infinite;
 }
 @media (prefers-reduced-motion: reduce) {
   .md .bulb-breakout.launching { animation: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }