@cplieger/web-terminal-ui 4.7.1 → 4.8.0

package/css/00-tokens.css

@@ -45,10 +45,24 @@
   ); /* subtle edge: the fill lightened + slightly desaturated, matching the inactive chip's faint border rather than a vivid accent outline */
 
   /* Status-dot palette (the activity vocabulary painted in 30-tabs.css; the
-     switcher notification dot reuses the same rules). The working and input
-     rings each derive from their own token in 30-tabs.css, so one override
-     recolors dot + ring together. */
-  --status-working: #d9f99d; /* agent working (pulses): pale lime */
+     switcher notification dot reuses the same rules). The working wave and the
+     input ring each derive from their own token in 30-tabs.css, so one override
+     recolors dot + surround together.
+
+     The trio is the conventional progress scheme — blue in flight, green
+     finished, orange waiting on you — which is why working is a LITERAL copy of
+     the default --accent blue rather than var(--accent): a consumer that
+     rethemes its brand accent to (say) a red should not have its "working" dot
+     follow, and a status vocabulary that shifts hue per consumer stops being a
+     vocabulary. The value being equal to the default accent is a deliberate
+     coincidence of taste, not a dependency.
+
+     Working shares the accent's hue family, so on the ACTIVE tab it sits on an
+     accent-derived fill (--tab-active-bg): measured 5.2:1 against it, and 8.0:1
+     against the bar, both clear of the 3:1 non-text minimum. Hue still never
+     carries state on its own (the wave's motion, and the donut it becomes under
+     prefers-reduced-motion, are the non-hue cues per WCAG 1.4.1). */
+  --status-working: #52a9fe; /* agent working (waves): the same blue as the default --accent */
   --status-done: #22c55e; /* turn finished: solid green */
   --status-input: #fb923c; /* action required: solid orange + ring */
   --radius: 0.75rem;

package/css/30-tabs.css

@@ -555,17 +555,18 @@
 /* Agent working: a solid disc with two animated cues (the status-badge
    "processing" idiom — Ant Design's processing badge, the classic CSS
    live-indicator ripple): the disc keeps full opacity and gently GLOWS (its
-   colors brighten mid-beat), while a ::after ring RIPPLES outward off the
+   colors brighten mid-beat), while a ::after WAVE travels outward off the
    disc's edge and dissolves, re-emitted each cycle. No static ring at rest —
-   the disc + live ripple ARE the working read; input freezes that exact ping
-   at its birth frame (see input below), so motion separates working from
-   input, and the ring separates both from done's bare disc. The old
-   single-layer pulse faded disc + ring together (opacity on the element),
-   which read as a blink and coupled the layers — an element's opacity always
-   multiplies onto its pseudos, so true independence requires animating disc
-   COLORS, not element opacity. Server-side this is driven by the OSC 9;4
-   progress signal, so it tracks agent activity, not the user typing at the
-   prompt. */
+   the disc + live wave ARE the working read. The wave's soft feathered edge is
+   the second axis that separates working from input: input is a HARD-edged 2px
+   ring, held still (see input below), so the pair differs by both motion and
+   edge quality, and the presence of any surround separates both from done's
+   bare disc. The old single-layer pulse faded disc + ring together (opacity on
+   the element), which read as a blink and coupled the layers — an element's
+   opacity always multiplies onto its pseudos, so true independence requires
+   animating disc COLORS, not element opacity. Server-side this is driven by the
+   OSC 9;4 progress signal, so it tracks agent activity, not the user typing at
+   the prompt. */
 :where(.wt-root) .wt-status-dot[data-status="working"] {
   position: relative;
   background: var(--status-working);
@@ -573,40 +574,58 @@
   animation: wt-working-glow 1.2s ease-in-out infinite;
 }
 
-/* The ripple layer: at scale(1) its 2px border hugs the disc's edge (inset
-   -2px, the 9->13px band), then the wave detaches, expanding and fading.
-   transform + opacity only, so it composites without repaints. It exists only
-   in the working state — no stale layer to pin when a dot changes status.
-   (The switcher notification dot never shows working — input/done only — so
-   its position: absolute placement never meets this rule's
-   position: relative.) */
+/* The ripple layer: a feathered radial BAND (not a hairline border) that starts
+   hugging the disc's edge (inset -2px, the 9->13px box) and then travels
+   outward, dissolving. The band is painted as a radial-gradient — soft on both
+   edges, so it reads as a wave of light leaving the disc rather than a ring
+   outline shrinking in opacity; scaling the layer scales the feather with it,
+   which is what makes the wave visibly dissipate as it grows. transform +
+   opacity only, so it composites without repaints (a gradient background is
+   rasterized once, unlike an animated box-shadow spread, which repaints every
+   frame). It exists only in the working state — no stale layer to pin when a
+   dot changes status. (The switcher notification dot never shows working —
+   input/done only — so its position: absolute placement never meets this
+   rule's position: relative.)
+
+   The final scale is deliberately capped at today's 27px footprint: the mobile
+   overview row (.wt-switcher-row-select) clips at overflow: hidden 12.5px from
+   the dot's center, and a wave wider than ~25px picks up a visible straight
+   edge there. Visibility comes from the band's weight and timing, not size. */
 :where(.wt-root) .wt-status-dot[data-status="working"]::after {
   content: "";
   position: absolute;
   inset: -2px;
-  border: 2px solid var(--status-working);
   border-radius: 50%;
-  animation: wt-working-ripple 1.2s ease-in-out infinite;
+  background: radial-gradient(
+    closest-side,
+    transparent 44%,
+    var(--status-working) 76%,
+    transparent 100%
+  );
+  animation: wt-working-ripple 1.2s linear infinite;
 }
 
 /* Agent done / ready: solid disc (--status-done), no motion. The default green
-   matches Kiro IDE's "Ready" (#22c55e), darker and more saturated than
-   working's default pale lime so the two states differ by lightness as well as
-   motion. */
+   matches Kiro IDE's "Ready" (#22c55e). It sits at almost exactly working's
+   default lightness now that working is the accent blue (both ~72% OKLab L), so
+   the pair separates by hue plus the wave's motion rather than by lightness —
+   and under prefers-reduced-motion by shape, since working becomes a donut. */
 :where(.wt-root) .wt-status-dot[data-status="done"] {
   background: var(--status-done);
   border-color: var(--status-done);
 }
 
-/* User action required (permission / approval): the working ping frozen at
-   its birth frame — solid dot + the same 2px ring at the ripple's 30% birth
-   opacity, motionless (--status-input; the default orange is shifted away
-   from the old amber so it separates from both default-lime working and green
-   done). The stillness is the message: the agent's turn is mid-flight but
-   blocked on you. The ring keeps it distinct from done's bare disc without
-   leaning on hue; it derives from the same token, so a theme override
-   recolors dot + ring together. It persists until you act on or switch into
-   the tab. */
+/* User action required (permission / approval): a solid dot inside a static,
+   HARD-edged 2px ring, motionless (--status-input; the default orange is
+   shifted away from the old amber so it separates from both blue working and
+   green done). The stillness plus the hard edge is the message: the
+   agent's turn is mid-flight but blocked on you, and the surround is a fixed
+   outline rather than working's soft travelling wave. (Before the wave landed,
+   working's ripple was a 2px ring too and this state was literally that ping
+   frozen at its birth frame; the two now differ by edge quality as well as
+   motion, which reads more distinctly at 9px.) The ring derives from the same
+   token as the dot, so a theme override recolors both together. It persists
+   until you act on or switch into the tab. */
 :where(.wt-root) .wt-status-dot[data-status="input"] {
   background: var(--status-input);
   border-color: var(--status-input);
@@ -641,13 +660,33 @@
 }
 
 /* The ripple wave: one emission per cycle, launching off the disc's edge and
-   dissolving by ~2.1x. The 0.3 birth opacity matches the input ring's frozen
-   weight, so a live ping and a stuck one read as the same object — subtle
-   against the bar now that no static ring doubles it at birth. */
+   dissolving by ~2.1x. Two things are load-bearing and were both wrong in the
+   first version (the wave was there but nobody could see it):
+
+   - The travel is LINEAR while the opacity is shaped separately. An ease-in-out
+     shared by both properties spends the slow opening on top of the disc, where
+     the wave is indistinguishable from it, and then accelerates away exactly as
+     the opacity collapses — so the wave was only ever visible while it was
+     still merged with the disc. Constant-speed travel plus its own opacity
+     envelope keeps the wave legible across most of the cycle.
+   - The wave is BRIGHT at birth (0.95 after a 12% ramp-in, not 0.3) and holds
+     usable weight through the travel. The ramp-in is short enough to read as
+     instant while stopping the emission from popping in.
+
+   The disc's own glow shares this 1.2s period so the two cues stay phase-locked;
+   change both or neither. */
 @keyframes wt-working-ripple {
   0% {
     transform: scale(1);
-    opacity: 0.3;
+    opacity: 0.15;
+  }
+
+  12% {
+    opacity: 0.95;
+  }
+
+  70% {
+    opacity: 0.45;
   }
 
   100% {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "type": "module",
   "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: a composable kernel + feature modules (tabs, activity monitor, mobile toolbar, context menu, IME, predictive echo, viewport handling) and CSS. One createTerminal() call.",
   "license": "GPL-3.0-or-later",