@cplieger/web-terminal-ui 3.4.3 → 3.4.4

package/README.md

@@ -102,7 +102,7 @@ individual features instead:
 - `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 `vibecli`
+  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.
@@ -143,7 +143,7 @@ The web-terminal family:
 Consumers that ship this UI:
 
 - [`vibekit`](https://github.com/cplieger/vibekit)
-- [`vibecli`](https://github.com/cplieger/vibecli)
+- [`web-terminal-kiro`](https://github.com/cplieger/web-terminal-kiro)
 
 ## Disclaimer
 

package/css/00-tokens.css

@@ -10,7 +10,7 @@
   /* ===== Themeable tokens (the consumer-configurable "template") =====
      These default to the neutral built-in look; a consumer recolors the UI by
      overriding them via createTerminal's `theme` option (which sets them on the
-     terminal root) or its own CSS. vibecli sets a purple palette. Everything
+     terminal root) or its own CSS. web-terminal-kiro sets a purple palette. Everything
      above is the fixed design palette; everything here is the public theme API. */
   --accent: oklch(72% 0.15 250deg); /* light blue; themed per consumer */
   --tab-bg: oklch(30% 0 0deg / 90%); /* inactive-tab chip (translucent) */

package/css/01-reset.css

@@ -14,6 +14,12 @@ body {
   background: var(--bg);
   color-scheme: dark;
   -webkit-font-smoothing: antialiased;
+  /* Disable the browser's landscape text autosizing ("text inflation"): without
+     this, rotating a phone to landscape zooms the text. iOS Safari implements
+     ONLY the -webkit- prefixed form (the unprefixed property is ignored there),
+     so both are required — unprefixed alone left iPhones inflating on rotate. */
+  /* stylelint-disable-next-line property-no-vendor-prefix -- iOS Safari only implements the prefixed form */
+  -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   overscroll-behavior: none;
   /* Disable pinch-to-zoom and double-tap-to-zoom. The viewport meta tag

package/css/05-tabs.css

@@ -72,7 +72,7 @@
 
 /* The active tab reads clearly above the inactive chips: a stronger fill plus an
    accent-coloured edge (inactive chips carry a faint white --border; the active
-   one gets the accent equivalent). Themeable via --accent (vibecli -> purple). */
+   one gets the accent equivalent). Themeable via --accent (web-terminal-kiro -> purple). */
 .wt-tab-active {
   background: var(--tab-active-bg);
   border-color: var(--tab-active-border);
@@ -195,24 +195,21 @@
 }
 
 /* Desktop-strip keyboard button (tabs feature): opens the on-screen key grid on
-   a WIDE touchscreen (an iPad using the multi-tab strip), where there is no
-   mobile switcher to carry one. Built + wired by the SAME factory as the mobile
-   switcher's keyboard button (see makeKbButton in tabs.ts). Uses the shared
-   .wt-btn primitive for its 44px box + centered icon. Hidden on a fine-pointer
-   desktop (a real keyboard is present) and until a keyboardToggle feature is
-   wired ([hidden]); shown only on a coarse pointer at strip widths (the media
-   block below, kept in lockstep with SWITCHER_MEDIA in src/features/tabs.ts).
-   Fixed at the strip's bottom-right — above the fixed bottom strip, with a
-   matching-surface fill — so it caps the strip's right edge and never scrolls
-   with the tabs. */
+   a WIDE touchscreen (an iPad using the multi-tab strip, or a phone rotated to
+   landscape), where there is no mobile switcher to carry one. Built + wired by
+   the SAME factory as the mobile switcher's keyboard button (see makeKbButton
+   in tabs.ts). Uses the shared .wt-btn primitive for its 44px box + centered
+   icon, borderless like the switcher's — the old fixed-overlay styling gave it
+   a border and pinned it right of the "+", which read as a different control
+   the moment a phone rotated to landscape. Now an ordinary flex item inside the
+   strip, before the "+" (kb-then-new, mirroring the mobile switcher's order).
+   Hidden on a fine-pointer desktop (a real keyboard is present) and until a
+   keyboardToggle feature is wired ([hidden]); shown only on a coarse pointer at
+   strip widths (the media block below, kept in lockstep with SWITCHER_MEDIA in
+   src/features/tabs.ts). */
 .wt-tab-kb {
   display: none;
-  position: fixed;
-  right: var(--sp-2);
-  bottom: calc(var(--safe-bottom) + var(--sp-2));
-  z-index: 16;
-  background: var(--surface);
-  border: 1px solid var(--border);
+  flex: none;
 }
 
 /* Grid open: filled so the toggled state reads at a glance (mirrors the
@@ -229,17 +226,13 @@
   color: var(--bg);
 }
 
-/* Show + reserve room only on a WIDE touchscreen (where the desktop strip is
-   used AND a keyboardToggle is wired, hence :not([hidden])): the strip gets
-   matching right padding so the tabs + "+" never scroll under the fixed button. */
+/* Show only on a WIDE touchscreen (where the desktop strip is used AND a
+   keyboardToggle is wired, hence :not([hidden])). In-flow now, so the strip
+   needs no reserved right padding for it. */
 @media (pointer: coarse) and (width >= 601px) {
   .wt-tab-kb:not([hidden]) {
     display: inline-flex;
   }
-
-  .wt-tab-bar {
-    padding-right: calc(var(--touch-target) + 2 * var(--sp-2));
-  }
 }
 
 /* The tab being dragged (reorder) dims while it moves. */

package/css/06-mobile.css

@@ -111,7 +111,7 @@
   /* Right padding reserves room for the close (x) overlaid inside the row. */
   padding: 0 var(--touch-target) 0 var(--sp-2);
   /* The bar row always represents the active tab, so it wears the active-tab
-     fill/foreground the desktop strip uses (themeable; purple in vibecli). */
+     fill/foreground the desktop strip uses (themeable; purple in web-terminal-kiro). */
   background: var(--tab-active-bg);
   color: var(--tab-active-fg);
   border: 1px solid var(--tab-active-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "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",
@@ -13,8 +13,8 @@
   ],
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "tsgo -p tsconfig.json",
-    "typecheck:tests": "tsgo -p tsconfig.test.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "typecheck:tests": "tsc -p tsconfig.test.json",
     "test": "vitest --run",
     "test:watch": "vitest",
     "test:coverage": "vitest --run --coverage",
@@ -29,19 +29,20 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@types/node": "25.9.4",
-    "@vitest/coverage-v8": "4.1.9",
-    "eslint": "10.6.0",
-    "fast-check": "4.8.0",
+    "@types/node": "25.9.5",
+    "@typescript/native": "npm:typescript@7.0.2",
+    "@vitest/coverage-v8": "4.1.10",
+    "eslint": "10.7.0",
+    "fast-check": "4.9.0",
     "happy-dom": "20.10.6",
     "html-validate": "11.5.5",
-    "knip": "6.24.0",
-    "prettier": "3.9.4",
+    "knip": "6.26.0",
+    "prettier": "3.9.5",
     "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
-    "typescript": "6.0.3",
-    "typescript-eslint": "8.62.1",
-    "vitest": "4.1.9"
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "typescript-eslint": "8.63.0",
+    "vitest": "4.1.10"
   },
   "publishConfig": {
     "access": "public"

package/scaffold/index.html

@@ -9,10 +9,12 @@
 <link rel="stylesheet" href="/style.css">
 <!-- [html-validate-disable-next no-style-tag -- critical CSS for instant loading indicator] -->
 <style>
-#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:200;background:#000;font-family:system-ui,-apple-system,sans-serif;color:#b48eff;font-size:18px;transition:opacity .3s ease}
+#loading{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000;color:var(--accent,#6ea8ff);transition:opacity .3s ease}
 #loading.fade{opacity:0}
-#loading .spin{width:32px;height:32px;border:3px solid #b48eff;border-right-color:transparent;border-radius:50%;animation:sp .6s linear infinite}
-@keyframes sp{to{transform:rotate(360deg)}}
+#loading .bar{position:relative;inline-size:min(220px,62vw);block-size:5px;overflow:hidden;border-radius:999px;background:color-mix(in oklch,currentColor 16%,transparent)}
+#loading .bar::before{content:"";position:absolute;inset-block:0;inline-size:42%;border-radius:inherit;background:linear-gradient(90deg,transparent,currentColor 28%,color-mix(in oklch,currentColor,#fff 45%) 50%,currentColor 72%,transparent);filter:drop-shadow(0 0 4px color-mix(in oklch,currentColor 55%,transparent));animation:wt-loading-slide 1.5s cubic-bezier(.65,0,.35,1) infinite}
+@keyframes wt-loading-slide{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
+@media (prefers-reduced-motion:reduce){#loading .bar::before{animation-duration:3s}}
 </style>
 </head>
 <body>
@@ -20,7 +22,7 @@
      element. The loading overlay is a sibling (not a child of the root) so it is
      never cleared; it is faded out once the first frame renders. -->
 <div id="terminal"></div>
-<div id="loading"><div class="spin"></div>Loading…</div>
+<div id="loading" role="status" aria-label="Loading"><div class="bar" aria-hidden="true"></div></div>
 <!-- Deployment-specific: the importmap resolves the bare package specifiers to
      the compiled JS your build emits. Adjust the paths to your build layout. -->
 <script type="importmap">

package/src/features/tabs.ts

@@ -146,7 +146,7 @@ export interface TabsOptions {
   /** Prefer the input-derived title over the process OSC 0/2 title. Default
    *  false (OSC-first: a program that sets its own window title wins, else the
    *  last submitted line). Set true for an agent shell whose program emits a
-   *  non-empty but useless OSC title (kiro-cli under vibecli): the label then
+   *  non-empty but useless OSC title (kiro-cli under web-terminal-kiro): the label then
    *  follows the latest submitted line (live) or the persisted client title (on
    *  reload), and the unreliable OSC title is ignored entirely. presetAgentTabbed
    *  enables this. */
@@ -359,7 +359,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
   }
   // Persist the input-derived tab title server-side so it survives a page reload
   // and shows on other devices. The engine stores it as the session's fallback
-  // title and uses it only when the program emits no OSC title (the vibecli case:
+  // title and uses it only when the program emits no OSC title (the web-terminal-kiro case:
   // kiro-cli emits no usable OSC title, so the latest user message is the label).
   // Best-effort and fire-and-forget: a failure never disrupts the terminal — the
   // locally-derived title still displays, it just is not persisted this time.
@@ -458,20 +458,19 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       bar.className = "wt-tab-bar";
       bar.setAttribute("role", "tablist");
       slot.appendChild(bar);
-      // The "+" button is the last flex item INSIDE the strip. Appending it to
-      // the slot (a sibling of the fixed .wt-tab-bar) flowed it out of the strip
-      // to the root, so it never appeared; inside the flex bar it renders at the
-      // end of the tabs (addTabChrome inserts each tab before it).
+      // Strip-end controls, both flex items INSIDE the strip so they flow after
+      // the tabs (appending them to the slot flowed them out of the strip):
+      // the keyboard button first, then the "+" — mirroring the mobile
+      // switcher's kb-before-new order, so rotating a phone to landscape (which
+      // swaps in this strip) keeps the keyboard button LEFT of the "+" rather
+      // than jumping to its right. 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 deskKb, keeping [tabs… kb +].
+      const deskKb = makeKbButton("wt-tab-kb wt-btn");
+      bar.appendChild(deskKb);
       const newBtn = makeNewButton("wt-tab-new");
       bar.appendChild(newBtn);
-      // Desktop-strip keyboard button, built + wired by the SAME factory as the
-      // mobile switcher's. A SIBLING of the strip (appended to the region slot,
-      // not into .wt-tab-bar) so it never affects the strip's child order; CSS
-      // shows it only on a wide touchscreen (where the strip, not the switcher,
-      // is used) and hides it on a fine-pointer desktop. Un-hidden below only
-      // when a keyboardToggle feature is wired.
-      const deskKb = makeKbButton("wt-tab-kb wt-btn");
-      slot.appendChild(deskKb);
 
       // Pull the terminal surface up off the fixed BOTTOM strip on desktop so
       // the bar does not overlap the last rows. The surface is position:fixed
@@ -522,8 +521,12 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       swBar.append(swKb, swSwitch, swNew);
       // Latest-wins notification state for the switch button's dot: overwritten
       // by each qualifying background-tab event (applyStatus) and cleared when
-      // the list opens (expandSwitcher). "" = no pending cue; the dot is hidden.
+      // the list opens (expandSwitcher) or the raising tab is visited or closed
+      // (acknowledgeSwitchNotify). "" = no pending cue; the dot is hidden.
       let switchNotify: "" | "input" | "done" = "";
+      // The session that raised the pending cue, so arriving on that tab (a
+      // swipe or any switch) acknowledges it without opening the list.
+      let switchNotifyId: string | null = null;
       function paintSwitchDot(): void {
         // Reuse the per-tab status-dot colours (single source, css/05-tabs.css
         // .wt-status-dot[data-status="input"|"done"]) instead of re-declaring
@@ -535,6 +538,21 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           swSwitchDot.dataset["status"] = switchNotify;
         }
       }
+      function clearSwitchNotify(): void {
+        switchNotify = "";
+        switchNotifyId = null;
+        paintSwitchDot();
+      }
+      // acknowledgeSwitchNotify clears the pending cue when its subject session
+      // is reached (switchTo — including a swipe arriving on it) or ceases to
+      // exist (a close/reap): the notification is resolved or moot then, and
+      // only opening the list used to clear it (the reported "swiping to the
+      // concerned tab leaves the dot lit").
+      function acknowledgeSwitchNotify(id: string): void {
+        if (switchNotifyId === id) {
+          clearSwitchNotify();
+        }
+      }
       ctx.region("bottom-switcher", "switcher").appendChild(switcher);
       // The keyboard buttons open the key grid; show them only when a toolbar is
       // wired to drive. Read the toolbar's API lazily at tap time (ctx.use), so
@@ -1223,8 +1241,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         // Opening the list acknowledges any pending background-tab notification:
         // the user is now looking at the tabs, so clear the switch button's dot.
-        switchNotify = "";
-        paintSwitchDot();
+        clearSwitchNotify();
         renderSwitcherList();
         setExpandedState(true);
         ctx.announce("Terminal list expanded");
@@ -1257,8 +1274,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
         paintStatusDot(dot, info.status, info.reportsActivity ?? false);
         const aria = tablist.registerTab(el);
-        // Insert before the "+" button so it stays the last item in the strip.
-        bar.insertBefore(el, newBtn);
+        // Insert before the strip-end controls (keyboard button, then "+") so
+        // they stay the last items in the strip.
+        bar.insertBefore(el, deskKb);
         // 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.
@@ -1390,6 +1408,10 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         // rebuild viewport-first, so the last-known screen paints with no
         // round-trip. Then let the kernel reconnect the WS to it (resume delta).
         activeId = next.id;
+        // Arriving on the tab that raised the switch-button cue resolves it
+        // (a swipe through the tabs must dismiss the dot, not only opening the
+        // list).
+        acknowledgeSwitchNotify(next.id);
         try {
           localStorage.setItem(ACTIVE_TAB_KEY, next.id);
         } catch {
@@ -1522,9 +1544,9 @@ 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 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.
+      // end (before the strip-end controls). 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 {
         for (const el of bar.querySelectorAll<HTMLElement>(".wt-tab:not(.wt-tab-dragging)")) {
           const rect = el.getBoundingClientRect();
@@ -1647,6 +1669,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         // Tombstone this id briefly so a stale status snapshot/poll that predates
         // the server reaping it cannot re-adopt the just-closed tab.
         tombstone(id);
+        // A pending switch-button cue whose subject just closed is moot: clear
+        // it rather than leaving a dot no tab visit can ever resolve.
+        acknowledgeSwitchNotify(id);
         tab.aria.remove();
         // Remove immediately (no exit animation): a lingering element made the
         // "+" teleport after a delay, and made a last-tab replacement appear in
@@ -1711,6 +1736,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           // server reaping these sessions cannot re-adopt (flash back) a just-
           // closed tab -- mirrors the single-close path in dropTab (h-f2).
           tombstone(t.id);
+          acknowledgeSwitchNotify(t.id); // a cue for a closed tab is moot
           t.aria.remove();
           t.el.remove();
           ctx.dropSession(t.id);
@@ -1880,6 +1906,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         // dedicated button.
         if (id !== activeId && (status === "input" || status === "done")) {
           switchNotify = status;
+          switchNotifyId = id;
           paintSwitchDot();
         }
         // Record the raw server title; the displayed label (fallback + de-dup)
@@ -1914,15 +1941,20 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
             return;
           }
           // Adopt a session created in another browser so all clients converge.
+          // Carry the persisted clientTitle through: the SSE snapshot usually
+          // beats the initial GET /api/sessions (whose adoptSession then dedups
+          // and never re-applies its fields), so dropping it here left every
+          // SSE-adopted tab without its persisted title — in preferInputTitle
+          // mode the label then fell back to "New tab" on reload.
           adoptSession({
             id: s.id,
             title: s.title,
-            clientTitle: undefined,
+            clientTitle: s.clientTitle,
             createdAt: s.createdAt,
             status: s.status,
             reportsActivity: s.reportsActivity ?? false,
           });
-          applyStatus(s.id, s.status, s.title, undefined, s.reportsActivity ?? false);
+          applyStatus(s.id, s.status, s.title, s.clientTitle, s.reportsActivity ?? false);
           ensureActive();
           syncChrome();
         });
@@ -1994,7 +2026,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "move";
         }
-        bar.insertBefore(draggingEl, dragTargetBefore(e.clientX) ?? newBtn);
+        bar.insertBefore(draggingEl, dragTargetBefore(e.clientX) ?? deskKb);
       });
       // 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.
@@ -2054,9 +2086,16 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           return;
         }
         const target = e.target as HTMLElement | null;
+        // The tab strip counts as chrome like the switcher: without it, the
+        // desktop-strip keyboard button's own pointerup landed here, closed the
+        // grid, and the button's click then re-opened it — so tapping the button
+        // to CLOSE the grid never worked (a wide-touchscreen / landscape-phone
+        // bug; the switcher's kb button was already exempt via .wt-switcher).
         const inChrome =
           target !== null &&
-          (target.closest(".wt-switcher") !== null || target.closest(".key-toolbar") !== null);
+          (target.closest(".wt-switcher") !== null ||
+            target.closest(".wt-tab-bar") !== null ||
+            target.closest(".key-toolbar") !== null);
         if (inChrome) {
           return;
         }

package/src/presets.ts

@@ -66,7 +66,7 @@ function buildTabbed(preferInputTitle: boolean): TerminalFeature<unknown>[] {
 /** Tabbed UI: the touch features, tabs, the mobile keyboard bar, the activity
  *  monitor, and animations. Requires a server that speaks the session API
  *  (`/api/sessions`, `/ws?session=`, and the status SSE `/api/sessions/events`),
- *  such as `web-terminal-server` or `vibecli`. Each tab's title follows the
+ *  such as `web-terminal-server` or `web-terminal-kiro`. Each tab's title follows the
  *  process OSC 0/2 window title when the program sets one, else the last
  *  submitted line; each tab's activity dot stays hidden until its session
  *  reports activity via OSC 9;4 progress (kiro-cli, Claude Code, …), so a plain
@@ -75,7 +75,7 @@ export function presetTabbed(): TerminalFeature<unknown>[] {
   return buildTabbed(false);
 }
 
-/** Tabbed UI for an agent shell (vibecli). Same features as presetTabbed, but
+/** 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.