typebulb 0.52.0 → 0.52.2

package/dist/agents/claude/styles.css

@@ -161,13 +161,10 @@ body {
 /* `.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.
-   Glyph content (emoji span / the Anthropic SVG) is vertically symmetric, so plain flex
-   centering is exact for it — and cap/alphabetic trim mis-seats a replaced SVG (it trims to
-   TEXT metrics), so opt glyph pills back out of the word-pill recipe. */
+/* Square glyph pill: width pinned to the pill height rather than padding-driven. Glyph content
+   (emoji span / the Anthropic SVG) is vertically symmetric, so plain flex centering is exact for it
+   — and cap/alphabetic trim mis-seats a replaced SVG (it trims to TEXT metrics), so opt glyph pills
+   back out of the word-pill recipe. */
 .pill.glyph {
   display: inline-flex;
   align-items: center;
@@ -320,19 +317,25 @@ body {
   -webkit-text-fill-color: transparent;
 }
 .shimmer-slow { --shimmer-speed: 7s; }
+/* Summary's text-only working cue sits on a white surface in the light theme. Widen and deepen its
+   blue sweep there so the seven-second motion remains plainly visible; dark's calibrated treatment
+   stays untouched. */
+html:not([data-theme="dark"]) .turn-view > .shimmer-text {
+  background-image: linear-gradient(100deg, currentColor 20%, var(--accent) 40%, color-mix(in srgb, var(--accent) 70%, var(--fg)) 50%, var(--accent) 60%, currentColor 80%) !important;
+}
 @keyframes bulb-shimmer { from { background-position: 250% 0; } to { background-position: -250% 0; } }
 @media (prefers-reduced-motion: reduce) {
   .shimmer { animation: none !important; background: color-mix(in srgb, var(--accent) 15%, var(--shimmer-base, transparent)) !important; }
   .shimmer-text { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor; }
 }
 
-/* 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 — hence shimmer-slow). The sweep
-   blends with --panel, not transparent like the launch buttons': statusbar pills must
-   stay opaque over the message text the strip lets through. */
-.token.busy { border-color: var(--accent); --shimmer-base: var(--panel); --shimmer-mix: 25%; }
+/* THE WORKING STATE for an opaque word pill — the token chip mid-turn. Only the shimmer's knobs live
+   here; the sweep itself is the shared .shimmer above, composed by `busyPill()` (ui.ts) so a new busy
+   pill cannot land at its own speed or its own base colour. The sweep blends with --panel, not
+   transparent like the launch buttons': a word pill sits over message text and must keep covering it.
+   shimmer-slow because these can sit lit for minutes (the JSONL flushes in batches, so the token chip
+   rides a whole buffering window). */
+.pill-busy { border-color: var(--accent); --shimmer-base: var(--panel); --shimmer-mix: 25%; }
 
 /* ── The composer (TB-Agent-Composer.md): the prompt panel under the transcript. In flow (not
    overlaid like the statusbar) — it owns real height and must never cover content. ── */
@@ -701,8 +704,8 @@ body {
 .reasoning-select:hover { border-color: var(--accent); }
 .reasoning-select:focus { outline: none; border-color: var(--accent); }
 
-/* The Anthropic brand glyph stands in for the word on the default pill (same square footprint as the
-   prose toggle). currentColor tracks the pill's muted→accent state; grayscale at rest like the monkey. */
+/* The Anthropic brand glyph stands in for the word on the default pill. currentColor tracks the
+   pill's muted→accent state; grayscale at rest like the other compact glyph controls. */
 .anthropic-glyph { display: block; }
 .pill.glyph .anthropic-glyph { filter: grayscale(1); opacity: .8; }
 .pill.glyph:hover .anthropic-glyph { filter: none; opacity: 1; }
@@ -1013,6 +1016,19 @@ a.server-port:hover { text-decoration: underline; }
 .trust-modal-h { font-size: 1rem; font-weight: 600; color: var(--fg); }
 .trust-modal-b { font-size: .85rem; color: var(--fg); line-height: 1.45; }
 .trust-modal-warn { font-size: .78rem; color: var(--muted); line-height: 1.4; }
+/* Summary’s first-use setup is deliberately informational: the normal interruption chrome makes
+   the compact .env recipe legible without pretending the reader made a risky choice. */
+.summary-setup { width: min(390px, 100%); }
+.summary-setup-keys {
+  padding: .55rem .65rem;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--fg);
+  font: .78rem/1.6 ui-monospace, Menlo, Consolas, monospace;
+  white-space: pre-line;
+  user-select: text;
+}
 .trust-modal-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
 .trust-no, .trust-yes {
   font: inherit; font-size: .82rem; appearance: none; margin: 0; cursor: pointer;
@@ -1100,10 +1116,10 @@ a.server-port:hover { text-decoration: underline; }
 .gitdiff-close { flex: none; display: inline-flex; padding: 0 .15rem; color: var(--muted); }
 .gitdiff-close .icon { width: 10px; height: 10px; }
 .gitdiff-close:hover { color: var(--accent); }
-/* Doc open ⇒ the transcript-scoped pills hide: prose toggle, model switcher, session picker all act
-   on the conversation, which isn't on screen (the token pill stays — its shimmer says the live diff
-   may still grow). display only, never unmount — the model pill's superSelect must keep its mount. */
-.statusbar-actions.doc-open :is(.prose-pill, .model-wrap, .sid-wrap) { display: none; }
+/* Doc open ⇒ transcript-scoped pills hide: model switcher and session picker act on a conversation
+   that is not on screen (the token pill stays — its shimmer says the live diff may still grow).
+   Display only, never unmount — the model pill's superSelect must keep its mount. */
+.statusbar-actions.doc-open :is(.model-wrap, .sid-wrap) { display: none; }
 
 /* The diff doc — takes the transcript's slot in .chat (same flex geometry as .messages). Full-bleed
    like a code surface (no --content-max column: diff lines want the width); the body is the scroll
@@ -1870,8 +1886,18 @@ html[data-theme="dark"] .masthead-logo.dark { display: block; }
    (#draftThinkingPre). Durable rows stay uncapped: finished thinking IS reading material. */
 .draft .thinking pre { max-height: 220px; overflow-y: auto; }
 
-/* Copy button: an .overlay-pill revealed on bubble-hover. */
-.bubble:hover .copy { opacity: 1; }
+/* The bubble's hover-revealed copy-pill row. The direct-child reveal avoids firing an inline bulb's
+   own controls when the reader merely hovers the outer assistant bubble. */
+.bubble-controls {
+  position: absolute;
+  bottom: .5rem;
+  right: 0;              /* flush with the content column's right edge (prose / statusbar pills) */
+  display: flex;
+  gap: .4rem;
+}
+.bubble-controls .overlay-pill { position: static; }
+.bubble:hover > .bubble-controls .overlay-pill,
+.bubble-controls .overlay-pill:focus-visible { opacity: 1; }
 /* "copied" flash: eases into accent on click (CopyButton is a Component, so its
    node persists across re-renders and the transition actually runs). The color
    transition lives only on .done, not the base pill, so hover stays instant — the
@@ -1884,4 +1910,33 @@ html[data-theme="dark"] .masthead-logo.dark { display: block; }
 }
 /* Assistant bubbles carry no padding, so the shared .5rem bottom would float the
    pill above the last line — pin it to the text's bottom edge. */
-.bubble.assistant .copy { bottom: 0; }
+.bubble.assistant > .bubble-controls { bottom: 0; }
+
+/* A turn's local representation selector (turnView.ts). It is a tab bar made of restrained
+   hyperlink-like buttons, not pills: Raw is the full chronological trace for one turn, Reply is its
+   exact prose, and Summary is the generated compression. Normal flow above the selected body means
+   every switch resizes only below itself. */
+.turn-views-row {
+  display: flex;
+  align-items: baseline;
+  gap: .35rem;
+  margin: 0 0 .35rem;
+  font-size: .8rem;
+  line-height: 1.3;
+}
+.turn-view {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+.turn-view:hover, .turn-view.on { color: var(--accent); }
+.turn-view.on { border-bottom-color: var(--accent); }
+.turn-view.err { color: var(--err); }
+.turn-view:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
+.turn-view-sep { color: var(--border); user-select: none; }