@cplieger/web-terminal-ui 4.3.0 → 4.4.0

package/README.md

@@ -128,12 +128,15 @@ are importable from `…/features/<name>` (`clipboard`, `context-menu`,
   keeps clean, label-only tabs. Requires a server that speaks the session API
   (`/api/sessions` and `/ws?session=`), such as `web-terminal-server`.
 - `presetAgentTabbed()` — the same feature set as `presetTabbed()` (activity
-  monitor included), but with `preferInputTitle`: each tab's label follows the
-  latest submitted line (persisted server-side and recovered on reload) and the
-  program's OSC 0/2 title is ignored — for an agent shell such as `web-terminal-kiro`
-  whose program emits a non-empty but useless OSC title. Its status dots
-  (idle / working / done / needs-input) come from the same activity monitor,
-  driven by the server's status SSE and its OSC-9 classifier.
+  monitor included), tuned for an agent shell such as `web-terminal-kiro`: with
+  `preferInputTitle`, each tab's label follows the latest submitted line
+  (persisted server-side and recovered on reload) and the program's non-empty
+  but useless OSC 0/2 title is ignored; and with `presumeReports`, the idle
+  activity dot shows from tab creation instead of waiting for the session's
+  first OSC 9;4 signal — every session is an agent, so there is nothing to
+  prove. Its status dots (idle / working / done / needs-input) come from the
+  same activity monitor, driven by the server's status SSE and its OSC-9
+  classifier.
 
 ### Options
 

package/css/30-tabs.css

@@ -13,10 +13,10 @@
 
 :where(.wt-root) .wt-tab-bar {
   /* Absolute against .wt-root, like all chrome (identical geometry in
-     wt-viewport mode; see 01-scope.css). The bar itself never scrolls: the
-     tabs + "+" scroll inside .wt-tab-scroll (below), so the keyboard button —
-     the bar's last flex item, outside the scroller — stays pinned at the right
-     edge however many tabs are open. */
+     wt-viewport mode; see 01-scope.css). The bar itself never scrolls: only
+     the tabs scroll, inside .wt-tab-scroll (below); the "+" and the keyboard
+     button are fixed bar items after it, so both stay visible at the bar's
+     right edge however many tabs are open. */
   position: absolute;
   bottom: var(--safe-bottom);
   left: 0;
@@ -32,17 +32,22 @@
   z-index: 15;
 }
 
-/* The scrolling tab list inside the bar: the tabs plus the "+", which floats
-   right of the last tab and scrolls with the list. Horizontal scrolling lives
-   HERE, not on the bar, so the strip-end keyboard button never scrolls away.
-   flex: 1 + min-width: 0 make it shrink to leave room for the keyboard button
-   when that is shown (a wide touchscreen) and stretch to the full bar width
-   when it is hidden (a fine-pointer desktop), so the tabs reclaim the space. */
+/* The scrolling tab list inside the bar: the tabs and nothing else — the "+"
+   and the keyboard button are fixed bar siblings after it. Horizontal
+   scrolling lives HERE, not on the bar, so neither control ever scrolls away.
+   flex: 0 1 auto + min-width: 0 shrink-WRAP the list: while the tabs fit, the
+   scroller is exactly as wide as its content and the "+" trails the last tab
+   across the bar gap (visually identical to living in the list); once the
+   tabs overflow, the scroller caps at the space the fixed controls leave and
+   the "+" reads as pinned at the bar's right edge (with the keyboard button,
+   when shown on a wide touchscreen, anchored to its right). The tabs feature
+   also maps a vertical wheel over the bar to scrollLeft here — the strip has
+   no vertical scroll to spend it on. */
 :where(.wt-root) .wt-tab-scroll {
   display: flex;
   align-items: center;
   gap: var(--sp-1);
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow-x: auto;
   /* A wheel/trackpad/touch scroll that runs out of tabs must not chain into
@@ -164,9 +169,12 @@
   }
 }
 
-/* The add-tab (+) button: its hover box matches an active tab's fill and
-   stretches to the strip height; the 2px strip gap (not a custom margin) spaces
-   it from the last tab. Its glyph is an inline SVG. */
+/* The add-tab (+) button: a fixed bar item OUTSIDE the tab scroller (it never
+   scrolls away with an overflowing list; the shrink-wrapped scroller keeps it
+   visually trailing the last tab while the tabs fit — see .wt-tab-scroll). Its
+   hover box matches an active tab's fill and stretches to the strip height;
+   the bar gap (not a custom margin) spaces it from the list. Its glyph is an
+   inline SVG. */
 :where(.wt-root) .wt-tab-new {
   display: inline-flex;
   align-items: center;
@@ -226,8 +234,10 @@
    tab scroller: pinned at the bar's right edge in the same column as the
    scroll-to-bottom button floating above it (both 44px boxes whose right edge
    sits --sp-2 from the root's right edge), where an overflowing tab list can
-   never push or scroll it away; the "+" stays with the tabs inside the
-   scroller. Hidden on a fine-pointer desktop (a real keyboard is present; the
+   never push or scroll it away — margin-left: auto (below) keeps it there
+   whatever the tab count. The "+" is likewise a fixed bar item outside the
+   scroller, but it TRAILS the tab list (the auto margin sits between them)
+   and packs up against the kb only when the strip overflows. Hidden on a fine-pointer desktop (a real keyboard is present; the
    scroller then stretches to the full bar width) and until a keyboardToggle
    feature is wired ([hidden]); shown only on a coarse pointer at strip widths
    (the .wt-narrow complement below; the breakpoint itself is the kernel's,
@@ -235,6 +245,11 @@
 :where(.wt-root) .wt-tab-kb {
   display: none;
   flex: none;
+  /* Pin at the bar's FAR right edge always: the auto margin absorbs whatever
+     width the shrink-wrapped scroller + "+" leave free, so the kb button's
+     position is independent of the tab count (the "+" trails the tab list and
+     only packs up against the kb once the strip overflows). */
+  margin-left: auto;
 }
 
 /* Grid open: filled so the toggled state reads at a glance (mirrors the
@@ -342,8 +357,11 @@
    tabs feature adds .wt-reports to that dot (paintStatusDot). A program that
    emits no OSC 9 signal (a plain bash/sh) has no activity concept, so its tabs
    stay clean, label-only; a progress-reporting agent (kiro-cli, Claude Code)
-   lights up. The element stays in the DOM either way (JS sets data-status
-   regardless), so revealing it is a pure CSS switch. */
+   lights up. An agent-shell consumer can PRESUME the report instead (tabs'
+   presumeReports option, on in presetAgentTabbed): .wt-reports is then set
+   from tab creation, so the idle dot shows immediately rather than popping in
+   after the agent's first signal. The element stays in the DOM either way (JS
+   sets data-status regardless), so revealing it is a pure CSS switch. */
 :where(.wt-root) .wt-status-dot {
   display: none;
   width: 9px;
@@ -376,19 +394,43 @@
   border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
 }
 
-/* Agent working: solid pulsing dot (--status-working; pale lime by default —
-   its high lightness keeps it clear on every tab state) wearing the same 2px
-   ring as input, so the two agent-turn states share one silhouette: a live
-   turn pulses (dot + ring together), a turn blocked on the user is that same
-   silhouette frozen and recolored (input, below). Motion separates working
-   from input; the ring separates both from done's bare disc. Server-side this
-   is driven by the OSC 9;4 progress signal, so it tracks agent activity, not
-   the user typing at the prompt. */
+/* Agent working: two INDEPENDENTLY animated layers on one element make the
+   "alive" read (the status-badge "processing" idiom — Ant Design's processing
+   badge, the classic CSS live-indicator ripple): the solid disc keeps full
+   opacity and gently GLOWS (its colors brighten mid-beat), while a ::after
+   ring — born exactly on the static 2px ring — RIPPLES outward and dissolves,
+   re-emitted each cycle. The static ring itself never moves, so working keeps
+   input's exact rest silhouette (a live turn ripples; a turn blocked on the
+   user is that same silhouette frozen — see input below). Motion separates
+   working from input; 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. */
 :where(.wt-root) .wt-status-dot[data-status="working"] {
+  position: relative;
   background: var(--status-working);
   border-color: var(--status-working);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
-  animation: wt-pulse 1.2s ease-in-out infinite;
+  animation: wt-working-glow 1.2s ease-in-out infinite;
+}
+
+/* The ripple layer: at scale(1) its 2px border overlays the static ring's
+   9->13px band exactly (inset -2px), 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.) */
+: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;
 }
 
 /* Agent done / ready: solid disc (--status-done), no motion. The default green
@@ -421,39 +463,58 @@
   opacity: 0.5;
 }
 
-@keyframes wt-pulse {
+/* The disc's glow beat: base -> brighter -> base, then a rest until the next
+   cycle. Colors are set at EVERY frame, which both drives the glow and pins
+   the paint — a dot entering working in the same frame input/done ends can
+   never re-pulse the previously rasterized paint (the hazard the old
+   opacity-only pulse had to pin box-shadow against). Element opacity stays 1
+   throughout; see the layer-independence note on the working rule. */
+@keyframes wt-working-glow {
   0%,
+  70%,
   100% {
-    /* Pin the animated layer's paint as well as its opacity. When working begins
-       in the same frame that input/done ends, an opacity-only animation can
-       pulse the previously rasterized input/done paint (the input ring
-       included, hence the box-shadow pin). */
     background-color: var(--status-working);
     border-color: var(--status-working);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
-    opacity: 1;
   }
 
-  50% {
-    background-color: var(--status-working);
-    border-color: var(--status-working);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
+  35% {
+    background-color: color-mix(in oklch, var(--status-working) 78%, #fff);
+    border-color: color-mix(in oklch, var(--status-working) 78%, #fff);
+  }
+}
+
+/* The ripple wave: one emission per cycle, launching off the static ring and
+   dissolving by ~2.1x. Opacity starts at the static ring's own 40% weight so
+   the wave reads as the ring letting go of a copy, not a new brighter object. */
+@keyframes wt-working-ripple {
+  0% {
+    transform: scale(1);
     opacity: 0.4;
   }
+
+  100% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
 }
 
-/* Reduced-motion (or the animations feature off): drop the pulse, keep color. */
+/* Reduced-motion: drop the working motion (glow + ripple), keep color. */
 @media (prefers-reduced-motion: reduce) {
   :where(.wt-root) .wt-status-dot[data-status="working"] {
     animation: none;
-    /* The pulse is what separates working from input's frozen silhouette; with
-       motion removed, punch an inner hole (dot -> donut) so working differs
-       from input (solid ringed disc) and done (bare disc) by shape, not hue
-       alone (WCAG 1.4.1). The outer ring stays. */
+    /* Motion is what separates working from input's frozen silhouette; with
+       it removed, punch an inner hole (dot -> donut) so working differs from
+       input (solid ringed disc) and done (bare disc) by shape, not hue alone
+       (WCAG 1.4.1). The outer ring stays. */
     box-shadow:
       inset 0 0 0 2px var(--bg),
       0 0 0 2px color-mix(in srgb, var(--status-working) 40%, transparent);
   }
+
+  /* The ripple layer disappears entirely (not just paused mid-wave). */
+  :where(.wt-root) .wt-status-dot[data-status="working"]::after {
+    content: none;
+  }
 }
 
 /* ===== Catching-up cue (tabs feature, sections 12/13) =====

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "4.3.0",
+  "version": "4.4.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",

package/src/features/tabs/index.ts

@@ -100,6 +100,13 @@ export interface TabsOptions {
    *  reload), and the unreliable OSC title is ignored entirely. presetAgentTabbed
    *  enables this. */
   preferInputTitle?: boolean;
+  /** Presume every session reports activity (an agent shell, where the program
+   *  always emits OSC 9;4 progress): each tab's dot is visible as idle from
+   *  creation instead of popping in seconds later when the agent has booted
+   *  far enough to first report — the server's sticky reportsActivity flag
+   *  then merely confirms. Default false (evidence-driven reveal: a plain
+   *  shell keeps clean, label-only tabs). presetAgentTabbed enables this. */
+  presumeReports?: boolean;
 }
 
 // looksLikeHardwareKey reports whether a keydown could only have come from a
@@ -135,6 +142,12 @@ function looksLikeHardwareKey(ev: KeyboardEvent): boolean {
 export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
   const apiBase = opts.apiBase ?? DEFAULT_API_BASE;
   const preferInputTitle = opts.preferInputTitle ?? false;
+  const presumeReports = opts.presumeReports ?? false;
+  // reportsOf floors the server's per-session reportsActivity flag with the
+  // consumer's presumption (see TabsOptions.presumeReports): an agent shell
+  // shows the idle dot from tab creation instead of waiting out the agent's
+  // boot-to-first-OSC-9;4 window.
+  const reportsOf = (reports?: boolean): boolean => presumeReports || (reports ?? false);
   // The session REST client (model.ts): every call timeout-bounded, list
   // shape-guarded, title persistence fire-and-forget.
   const api = createSessionAPI(apiBase);
@@ -225,17 +238,20 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
 
       // --- Desktop tab strip (top-bar region) ---
       // Two layers: the bar itself never scrolls; an inner scroller
-      // (.wt-tab-scroll, the tablist) holds the tabs plus the "+", which floats
-      // right of the tab list and scrolls WITH it when many tabs overflow. The
-      // keyboard button sits OUTSIDE the scroller as the bar's last flex item,
-      // pinned at the bar's right edge in the scroll-to-bottom button's column
-      // (an overflowing tab list can never push or scroll it away). On a fine
-      // pointer it is display:none (CSS), and the scroller stretches to the
-      // full bar width so the tabs reclaim that space. Both controls are built
-      // + wired by the same shared factories as the mobile switcher's; the kb
-      // button is CSS-gated to a wide touchscreen and un-hidden below only when
-      // a keyboardToggle is wired. addTabChrome inserts each tab before newBtn,
-      // keeping the scroller [tabs… +].
+      // (.wt-tab-scroll, the tablist) holds ONLY the tabs. The "+" and the
+      // keyboard button sit OUTSIDE the scroller as fixed bar items in the
+      // order [scroller | + | kb], so an overflowing tab list can never push
+      // or scroll either control away. The scroller shrink-wraps its content
+      // (CSS flex: 0 1 auto), so while the tabs fit the "+" trails the last
+      // tab exactly as if it were in the list, while the kb button (a wide
+      // touchscreen; hidden on a fine pointer) stays pinned at the bar's FAR
+      // right edge via margin-left: auto whatever the tab count. Once the
+      // tabs overflow, the scroller caps at the remaining bar width and the
+      // "+" packs right, up against the kb. Both controls are built + wired
+      // by the same shared factories as the mobile switcher's; the kb button
+      // is CSS-gated to a wide touchscreen and un-hidden below only when a
+      // keyboardToggle is wired. addTabChrome appends each tab to the
+      // scroller's end.
       const slot = ctx.region("top-bar", "tabs");
       const bar = document.createElement("div");
       bar.className = "wt-tab-bar";
@@ -245,9 +261,38 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       scroller.setAttribute("role", "tablist");
       bar.appendChild(scroller);
       const newBtn = makeNewButton("wt-tab-new");
-      scroller.appendChild(newBtn);
+      bar.appendChild(newBtn);
       const deskKb = makeKbButton("wt-tab-kb wt-btn");
       bar.appendChild(deskKb);
+      // A vertical mouse wheel anywhere over the strip scrolls the tab list
+      // horizontally — the strip has no vertical dimension to spend the delta
+      // on, and this is the affordance browser tab bars train. Bound on the
+      // BAR so the empty strip area and the fixed controls translate too.
+      // Horizontal-dominant deltas (a trackpad pan) keep native handling, and
+      // a wheel over a non-overflowing strip falls through untouched. The
+      // listener is non-passive because a translated tick must preventDefault
+      // so an embedding page (wt-container mode) does not also scroll.
+      bar.addEventListener(
+        "wheel",
+        (e) => {
+          if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {
+            return; // horizontal-dominant: native scroll already handles it
+          }
+          if (scroller.scrollWidth <= scroller.clientWidth) {
+            return; // nothing to scroll: let the page have the wheel
+          }
+          e.preventDefault();
+          // deltaMode: 0 = pixels, 1 = lines (Firefox wheel), 2 = pages.
+          const step =
+            e.deltaMode === 1
+              ? e.deltaY * 32
+              : e.deltaMode === 2
+                ? e.deltaY * scroller.clientWidth
+                : e.deltaY;
+          scroller.scrollLeft += step;
+        },
+        { passive: false },
+      );
 
       // Pull the terminal surface up off the docked BOTTOM strip on desktop so
       // the bar does not overlap the last rows. The surface is absolute
@@ -515,13 +560,27 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         ctx.surface().querySelector<HTMLElement>(".term-input")?.focus({ preventScroll: true });
       }
 
-      // paintActive updates the desktop strip's active state.
+      // paintActive updates the desktop strip's active state. When the ACTIVE
+      // TAB CHANGES (tracked via lastRevealedActive — not on every chrome
+      // sync, so a user browsing a scrolled strip is never yanked back by an
+      // unrelated repaint), the newly active chip is brought into view in the
+      // overflowed scroller; inline: "nearest" is a no-op when it is already
+      // visible. The typeof guard covers happy-dom, which lacks
+      // scrollIntoView.
+      let lastRevealedActive = "";
       function paintActive(): void {
         for (const t of tabList) {
           const on = t.id === activeId;
           t.el.classList.toggle("wt-tab-active", on);
           t.aria.setSelected(on);
         }
+        if (activeId && activeId !== lastRevealedActive) {
+          lastRevealedActive = activeId;
+          const active = tabList.find((t) => t.id === activeId);
+          if (active && typeof active.el.scrollIntoView === "function") {
+            active.el.scrollIntoView({ block: "nearest", inline: "nearest" });
+          }
+        }
       }
 
       // syncMobile updates the bottom bar: active label + dot, and the aggregate
@@ -866,11 +925,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (!label || !dot || !close) {
           throw new Error("web-terminal-ui: tab chrome missing parts");
         }
-        paintStatusDot(dot, info.status, info.reportsActivity ?? false);
+        paintStatusDot(dot, info.status, reportsOf(info.reportsActivity));
         const aria = tablist.registerTab(el);
-        // Insert before the "+" so it stays the last item of the scrolling tab
-        // list (the keyboard button lives outside the scroller, at the bar end).
-        scroller.insertBefore(el, newBtn);
+        // Append to the scroller's end: the tab list is ALL the scroller holds
+        // (the "+" and keyboard button are fixed bar items outside it).
+        scroller.appendChild(el);
         // Runtime-added tabs animate in; initial tabs do not (see `started`).
         // The timer (not animationend) also clears the class on the hidden mobile
         // strip, where the animation never fires.
@@ -895,7 +954,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           aria,
           scrollTop: 0,
           following: true,
-          reports: info.reportsActivity ?? false,
+          reports: reportsOf(info.reportsActivity),
         };
         // Set an initial label immediately (relabelAll refines it with de-dup
         // once the tab is in tabList and syncChrome runs).
@@ -1183,8 +1242,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       }
 
       // dragTargetBefore returns the first tab whose horizontal midpoint is past
-      // x (the element the dragged tab should sit before), or null to drop at the
-      // end (before the "+"). syncOrderFromDom rebuilds tabList to
+      // x (the element the dragged tab should sit before), or null to drop at
+      // the end of the tab list. syncOrderFromDom rebuilds tabList to
       // match the strip's DOM order after a drag, so position indicators, the
       // switcher, and close-to-the-right/left all follow the visible order.
       function dragTargetBefore(x: number): HTMLElement | null {
@@ -1211,8 +1270,8 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
-      // moveTab shifts a tab one slot left or right in tabList and re-inserts
-      // every tab element in list order (before the "+") so the DOM matches.
+      // moveTab shifts a tab one slot left or right in tabList and re-appends
+      // every tab element in list order so the DOM matches.
       // It is the single-pointer / non-drag alternative to the drag-and-drop
       // reorder (WCAG 2.5.7), surfaced as Move left / Move right in the tab
       // context menu.
@@ -1228,7 +1287,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         tabList.splice(to, 0, tab);
         for (const item of tabList) {
-          scroller.insertBefore(item.el, newBtn);
+          scroller.appendChild(item.el);
         }
         syncChrome();
         ctx.announce(`Moved ${tab.display} to position ${String(to + 1)}`);
@@ -1623,7 +1682,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
               info.status,
               info.title,
               info.clientTitle,
-              info.reportsActivity ?? false,
+              reportsOf(info.reportsActivity),
             );
           }
           // A tab the server no longer lists was reaped/closed elsewhere (or
@@ -1657,7 +1716,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           // SSE-adopted tab without its persisted title — in preferInputTitle
           // mode the label then fell back to "New tab" on reload.
           adoptSession(s);
-          applyStatus(s.id, s.status, s.title, s.clientTitle, s.reportsActivity ?? false);
+          applyStatus(s.id, s.status, s.title, s.clientTitle, reportsOf(s.reportsActivity));
           ensureActive();
           syncChrome();
         });
@@ -1694,7 +1753,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "move";
         }
-        scroller.insertBefore(draggingEl, dragTargetBefore(e.clientX) ?? newBtn);
+        scroller.insertBefore(draggingEl, dragTargetBefore(e.clientX));
       });
       // Active-row close (x): closes the current tab (mirrors a listed row's x).
       // stopPropagation so it is not read as a tap/swipe on the row surface.

package/src/presets/agent-tabbed.ts

@@ -4,12 +4,19 @@ import type { TerminalFeature } from "../kernel/types.js";
 import { buildTabbed } from "./tabbed.js";
 
 /** Tabbed UI for an agent shell (web-terminal-kiro). Same features as
- *  presetTabbed, but with `preferInputTitle`: the agent's program (kiro-cli)
- *  emits a non-empty but useless OSC 0/2 title, so each tab's label follows the
- *  latest submitted line (persisted server-side and recovered on reload) and
- *  the OSC title is ignored. The agent-vs-generic status distinction remains
- *  server-side (a status classifier mapping OSC 9 notifications to
- *  done/needs-input). */
+ *  presetTabbed, tuned for sessions that ARE agents:
+ *  - `preferInputTitle`: the agent's program (kiro-cli) emits a non-empty but
+ *    useless OSC 0/2 title, so each tab's label follows the latest submitted
+ *    line (persisted server-side and recovered on reload) and the OSC title
+ *    is ignored.
+ *  - `presumeReports`: every session's program is an agent that WILL report
+ *    OSC 9;4 progress, so the idle activity dot shows from tab creation
+ *    instead of popping in seconds later when the agent has booted far enough
+ *    to first report; the server's sticky reportsActivity flag then merely
+ *    confirms. (presetTabbed keeps the evidence-driven reveal instead: a
+ *    plain shell never grows a meaningless dot.)
+ *  The agent-vs-generic status distinction remains server-side (a status
+ *  classifier mapping OSC 9 notifications to done/needs-input). */
 export function presetAgentTabbed(): TerminalFeature<unknown>[] {
   return buildTabbed(true);
 }

package/src/presets/tabbed.ts

@@ -14,19 +14,26 @@ import { presetSingle } from "./single.js";
  *  externally-driven mobile toolbar (its grid is opened from a keyboard button
  *  in the tab bar, not its own toggle), the activity monitor (the status-SSE
  *  data source), tabs wired to both, and animations. The activity dot reveals
- *  itself per tab only when a session reports activity (OSC 9;4), so the
- *  monitor is always included — a plain shell just never shows a dot. The
+ *  itself per tab only when a session reports activity (OSC 9;4) — or from tab
+ *  creation when the agent composition presumes it — so the monitor is always
+ *  included; a plain shell under presetTabbed just never shows a dot. The
  *  toolbar and monitor are ordered before tabs because tabs reads their APIs
  *  via ctx.use. Shared by presetTabbed and presetAgentTabbed (agent-tabbed.ts),
- *  which differ only in the title source. */
-export function buildTabbed(preferInputTitle: boolean): TerminalFeature<unknown>[] {
+ *  which differ only in the agent-shell tuning: input-derived titles
+ *  (preferInputTitle) + presumed activity reporting (presumeReports). */
+export function buildTabbed(agentShell: boolean): TerminalFeature<unknown>[] {
   const kb = mobileToolbar({ externalToggle: true });
   const monitor = activityMonitor();
   return [
     ...presetSingle(),
     kb,
     monitor,
-    tabs({ keyboardToggle: kb, activityMonitor: monitor, preferInputTitle }),
+    tabs({
+      keyboardToggle: kb,
+      activityMonitor: monitor,
+      preferInputTitle: agentShell,
+      presumeReports: agentShell,
+    }),
     animations(),
   ];
 }