@cplieger/web-terminal-ui 3.3.1 → 3.4.0

package/README.md

@@ -92,16 +92,20 @@ individual features instead:
 - `presetSingle()` — single-pane desktop UI (context menu, clipboard,
   scroll-to-bottom, predictive echo, connection banner).
 - `presetTouch()` — `presetSingle()` plus the mobile key toolbar.
-- `presetTabbed()` — the generic tabbed UI: `presetTouch()` plus tabs and
-  animations. Tabs are label-only (no activity dots); each tab's title follows
+- `presetTabbed()` — the generic tabbed UI: `presetTouch()` plus tabs, the
+  activity monitor, and animations. Each tab's title is OSC-first — it follows
   the process window title (OSC 0/2) when the program sets one and keeps it
-  updated, otherwise the last command submitted. Requires a server that speaks
-  the session API (`/api/sessions` and `/ws?session=`), such as
-  `web-terminal-server`.
-- `presetAgentTabbed()` — `presetTabbed()` plus the activity monitor, so each
-  tab carries a live status dot (idle / working / done / needs-input) from the
-  server's status SSE. Same title behavior as `presetTabbed`. For an agent shell
-  such as `vibecli`.
+  updated, otherwise the last command submitted. The per-tab activity dot
+  reveals itself only when a session reports OSC 9;4 progress, so a plain shell
+  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 `vibecli`
+  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.
 
 ### Options
 

package/css/00-tokens.css

@@ -12,12 +12,19 @@
      overriding them via createTerminal's `theme` option (which sets them on the
      terminal root) or its own CSS. vibecli sets a purple palette. Everything
      above is the fixed design palette; everything here is the public theme API. */
-  --accent: #a78bfa; /* accent action colour (mobile "+", toggled key button) */
-  --tab-hover-bg: var(--text-active); /* hovered inactive tab / pressed controls */
+  --accent: oklch(72% 0.15 250deg); /* light blue; themed per consumer */
+  --tab-bg: oklch(30% 0 0deg / 90%); /* inactive-tab chip (translucent) */
+  --tab-hover-bg: var(--text-active); /* pressed controls / mobile switcher hovers */
   --tab-active-bg: color-mix(in oklch, var(--text) 22%, var(--surface)); /* active tab fill */
   --tab-active-fg: var(--text); /* active tab text */
+  --tab-active-border: color-mix(in oklch, var(--accent) 90%, transparent); /* accent edge */
   --radius: 0.75rem;
   --radius-inner: 0.5rem;
+  /* Small square icon buttons (e.g. the 24px tab-close x): at that size the
+     0.5rem inner radius is a third of the side and reads as far rounder than
+     the >=42px controls that also use --radius-inner. This third rung of the
+     0.75/0.5/0.25rem ladder keeps a small hover box's corners in proportion. */
+  --radius-sm: 0.25rem;
   --touch-target: 2.75rem; /* 44px — Apple HIG minimum */
   --pill-outer: calc(
     var(--touch-target) + 2 * var(--sp-1) + 2px

package/css/02-app.css

@@ -167,86 +167,6 @@
   display: block;
 }
 
-/* Connection-state banner: bottom-center on touch (lifted above the
-   virtual keyboard via --kb-inset), top-center on desktop. Subtle
-   backdrop blur. Hidden until status.ts sets `.visible`. Distinct from
-   the `.pill` family because it wants to span the full width centrally
-   rather than dock to a corner. */
-.conn-banner {
-  position: fixed;
-  bottom: var(--sp-3);
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: calc(100% - 2 * var(--sp-3));
-  padding: var(--sp-1) var(--sp-3);
-  background: var(--surface);
-  backdrop-filter: var(--blur);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font-ui);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-align: center;
-  z-index: 20;
-  display: none;
-  pointer-events: auto;
-  opacity: 0;
-  transition:
-    opacity var(--dur-standard) var(--ease-standard),
-    display var(--dur-standard) allow-discrete;
-}
-
-.conn-banner.visible {
-  display: block;
-  opacity: 1;
-
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-/* Color coding by notification type */
-.conn-banner[data-state="reconnecting"] {
-  border-color: oklch(70% 0.15 60deg / 40%);
-}
-
-.conn-banner[data-state="offline"] {
-  color: #f55;
-  border-color: oklch(60% 0.2 25deg / 50%);
-}
-
-.conn-banner[data-state="restarted"] {
-  color: #fa5;
-  border-color: oklch(70% 0.15 60deg / 40%);
-}
-
-.conn-banner[data-state="toast"] {
-  border-color: oklch(70% 0.1 160deg / 30%);
-}
-
-/* Virtual keyboard awareness: when the keyboard is open the
-   visualViewport height shrinks. viewport.ts sets --kb-inset on
-   termWrap; we use it here to lift the banner above the keyboard.
-   Falls back to 0px when the variable isn't set (desktop). */
-@media (pointer: coarse) {
-  .conn-banner {
-    bottom: calc(var(--sp-3) + var(--kb-inset, 0px));
-  }
-}
-
-/* Desktop (pointer: fine): move the banner to top-center so it no longer
-   shares the bottom-center anchor with the scroll-to-bottom FAB
-   (.kb-scroll-bottom). Sharing it let the banner (pointer-events:auto,
-   z-index:20) render over the FAB and intercept its click. Touch keeps
-   the bottom placement and the --kb-inset keyboard lift above. */
-@media (pointer: fine) {
-  .conn-banner {
-    top: var(--sp-3);
-    bottom: auto;
-  }
-}
-
 /* Clickable URLs. OSC 8 hyperlinks (base .term-link) underline on HOVER only:
    an application can attach one OSC 8 link to a whole padded/bordered region —
    e.g. a markdown link whose URL wraps inside a table cell, where the terminal
@@ -614,62 +534,3 @@
     transition: none;
   }
 }
-
-/* ===== Context menu ===== */
-.ctx-menu {
-  position: fixed;
-  display: none;
-  flex-direction: column;
-  background: var(--surface);
-  backdrop-filter: var(--blur);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: var(--sp-1);
-  z-index: 30;
-  opacity: 0;
-  scale: 0.95;
-  transition:
-    opacity var(--dur-exit) var(--ease-standard),
-    scale var(--dur-exit) var(--ease-standard),
-    display var(--dur-exit) allow-discrete;
-}
-
-.ctx-menu.visible {
-  display: flex;
-  opacity: 1;
-  scale: 1;
-
-  @starting-style {
-    opacity: 0;
-    scale: 0.95;
-  }
-}
-
-.ctx-menu button {
-  background: transparent;
-  color: var(--text);
-  border: none;
-  border-radius: var(--radius-inner);
-  font-family: var(--font-ui);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  padding: var(--sp-1) var(--sp-3);
-  cursor: pointer;
-  text-align: left;
-}
-
-.ctx-menu button:active {
-  background: var(--text-active);
-}
-
-/* Touch (long-press) menu: bump the rows to the 44px --touch-target
-   standard the rest of the touch UI uses (the key-toolbar grid is
-   repeat(4, var(--touch-target))). Desktop right-click keeps the
-   compact 24px menu. padding-block re-centres the label in the taller box. */
-@media (pointer: coarse) {
-  .ctx-menu button {
-    min-height: var(--touch-target);
-    padding-block: var(--sp-2);
-    touch-action: manipulation;
-  }
-}

package/css/03-primitives.css

@@ -72,6 +72,7 @@
   font-weight: 500;
   text-align: center;
   z-index: 40;
+  pointer-events: none; /* passive status surface: never steal taps from the terminal beneath */
   display: none;
   opacity: 0;
 }

package/css/04-feedback.css

@@ -24,6 +24,7 @@
   font-weight: 500;
   text-align: center;
   z-index: 20;
+  pointer-events: none; /* passive status surface: never steal taps from the terminal beneath */
   display: none;
 }
 
@@ -59,8 +60,15 @@
   background: var(--surface);
   backdrop-filter: var(--blur);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: color-mix(in oklch, var(--text) 70%, transparent);
+  /* Match the tab "+" buttons (and every other .wt-btn), which round to
+     --radius-inner. Both are 44px boxes, so matching the corner radius makes
+     the FAB read as the same-sized button as the new-tab "+" beside/above it
+     rather than a rounder, different-looking control. */
+  border-radius: var(--radius-inner);
+  /* Full --text icon, matching the switcher's keyboard/switch/"+" icons (which
+     use .wt-btn's default color). Was a muted 70% mix that read as grey next to
+     those white bar icons. */
+  color: var(--text);
   z-index: 10;
   display: none;
 }
@@ -70,20 +78,25 @@
   display: inline-flex;
 }
 
-/* Hover brightens the icon + border; press fills the background (the .wt-btn
-   :active fill would otherwise be masked by this button's own surface fill). */
+/* Hover brightens the border; press fills the background (the .wt-btn :active
+   fill would otherwise be masked by this button's own surface fill). The icon
+   is already full --text, so hover no longer needs to change it. */
 .wt-scroll-bottom:hover {
   border-color: color-mix(in oklch, var(--text) 35%, transparent);
-  color: var(--text);
 }
 
 .wt-scroll-bottom:active {
   background: var(--text-active);
 }
 
-/* Mobile + tabbed: lift above the switcher bar and the keyboard (WS3). */
+/* Mobile + tabbed: lift above the switcher bar and the keyboard (WS3), and pull
+   the right edge in to --sp-2 so the button sits directly above the switcher's
+   "+" (whose right edge is inset by the bar's --sp-2 padding). Both are 44px
+   border-box boxes, so matching the right inset lines them up in one vertical
+   column (they were 4px out: the FAB's base --sp-3 vs the "+"'s --sp-2). */
 @media (pointer: coarse) {
   .wt-tabbed .wt-scroll-bottom {
+    right: var(--sp-2);
     bottom: calc(
       var(--wt-switcher-h) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
     );
@@ -158,6 +171,7 @@
   font-family: var(--font-ui);
   font-size: 0.75rem;
   z-index: 24;
+  pointer-events: none; /* passive status surface: never steal taps from the terminal beneath */
   display: none;
 }
 

package/css/05-tabs.css

@@ -32,13 +32,16 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sp-1);
-  /* Browser-style tabs: 140px when there is room, shrinking toward a 90px floor
-     as the strip fills; past the floor the bar scrolls horizontally
-     (.wt-tab-bar has overflow-x: auto). box-sizing keeps the basis a true total. */
+  /* Browser-style tabs: up to 300px per tab when there is room, shrinking toward
+     a 100px floor as the strip fills; past the floor the bar scrolls horizontally
+     (.wt-tab-bar has overflow-x: auto). flex-grow is 0, so the 300px basis is a
+     hard cap — every tab is the same size and never stretches past it, whatever
+     its title; the label truncates instead. box-sizing keeps the basis a true
+     total. */
   box-sizing: border-box;
-  flex: 0 1 140px;
-  min-width: 90px;
-  padding: var(--sp-2) var(--sp-2);
+  flex: 0 1 300px;
+  min-width: 100px;
+  padding: var(--sp-2);
   /* A transparent border is reserved on every tab so toggling the inactive
      outline (below) never shifts the strip's layout. */
   border: 1px solid transparent;
@@ -51,21 +54,28 @@
   user-select: none;
 }
 
-/* Inactive tabs read as outlined chips (so adjacent tabs stay visually
-   separated) and take a subtle fill on hover. */
+/* Inactive tabs read as outlined chips with a subtle dark fill (so adjacent tabs
+   stay separated from the bar and from each other) and lift on hover. */
 .wt-tab:not(.wt-tab-active) {
   border-color: var(--border);
+  background: var(--tab-bg);
 }
 
 .wt-tab:not(.wt-tab-active):hover {
-  background: var(--tab-hover-bg);
+  /* A solid lift over the chip. --tab-hover-bg is a translucent wash meant for a
+     transparent-rest control; replacing the --tab-bg chip with it would read as
+     "more transparent", not "lighter", so bake the same 15% --text lift into the
+     chip colour instead. */
+  background: color-mix(in oklch, var(--tab-bg), var(--text) 15%);
   color: var(--tab-active-fg);
 }
 
-/* The active tab reads clearly above the inactive chips: a stronger fill.
-   Themeable (vibecli tints these purple). */
+/* 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). */
 .wt-tab-active {
   background: var(--tab-active-bg);
+  border-color: var(--tab-active-border);
   color: var(--tab-active-fg);
 }
 
@@ -75,6 +85,7 @@
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 
@@ -91,12 +102,16 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  width: 1.375rem;
-  height: 1.375rem;
+  width: 1.5rem;
+  height: 1.5rem;
   padding: 0;
   background: transparent;
   border: none;
-  border-radius: var(--radius-inner);
+  /* --radius-sm (not --radius-inner): this is a small 24px box, where the
+     inner radius reads as a third of the side and looks far rounder than the
+     larger tab / "+" / menu controls. --radius-sm keeps the hover box in
+     proportion with them. */
+  border-radius: var(--radius-sm);
   color: color-mix(in oklch, var(--text) 60%, transparent);
   cursor: pointer;
 }
@@ -116,6 +131,16 @@
   visibility: visible;
 }
 
+/* Coarse pointer (an iPad using the strip): no hover fires, so an inactive tab's close
+   would be unreachable without first activating the tab. Reveal every tab's close there,
+   matching the always-visible mobile switcher closes. Kept in lockstep with the strip-shown
+   gate (pointer: coarse, width >= 601px). */
+@media (pointer: coarse) and (width >= 601px) {
+  .wt-tab:not(.wt-tab-active) .wt-tab-close {
+    visibility: visible;
+  }
+}
+
 /* 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. */
@@ -126,21 +151,25 @@
   flex: none;
   /* Square box that matches the tab height (a stretched flex item ignores
      aspect-ratio against its SVG's intrinsic width, so size it explicitly). The
-     tab height is the close-button (1.375rem) + vertical padding (2×sp-2) +
+     tab height is the close-button (1.5rem) + vertical padding (2×sp-2) +
      border. */
-  width: calc(1.375rem + 2 * var(--sp-2) + 2px);
-  height: calc(1.375rem + 2 * var(--sp-2) + 2px);
+  width: calc(1.5rem + 2 * var(--sp-2) + 2px);
+  height: calc(1.5rem + 2 * var(--sp-2) + 2px);
   padding: 0;
   background: transparent;
   border: none;
   border-radius: var(--radius-inner);
-  color: color-mix(in oklch, var(--text) 60%, transparent);
+  /* The "+" is the primary action, so carry it in the accent colour (a light
+     blue by default; consumer-themed) — matching the mobile switcher's "+"
+     (.wt-switcher-new) rather than the muted grey the close / tab controls use. */
+  color: var(--accent);
   cursor: pointer;
 }
 
 .wt-tab-new:hover {
+  /* Keep the accent glyph on hover (no colour override) so the "+" stays the
+     accent colour like the mobile "+"; hover only adds the fill. */
   background: var(--tab-active-bg);
-  color: var(--tab-active-fg);
 }
 
 /* The +/x icons are inline SVG so they center exactly in their flex-centered
@@ -165,6 +194,54 @@
   height: 16px;
 }
 
+/* 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. */
+.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);
+}
+
+/* Grid open: filled so the toggled state reads at a glance (mirrors the
+   switcher keyboard button). */
+.wt-tab-kb.wt-active {
+  background: var(--tab-hover-bg);
+  color: var(--tab-active-fg);
+}
+
+/* Sticky-Ctrl armed: invert (matches the switcher keyboard button + the armed
+   Ctrl key) so a pending Ctrl is visible with the grid closed. */
+.wt-tab-kb.wt-armed {
+  background: var(--text);
+  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. */
+@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. */
 .wt-tab-dragging {
   opacity: 0.5;
@@ -217,10 +294,12 @@
    overlap the last rows (a mirror of the old top offset). The tabs feature
    marks the surface (.wt-with-tabbar) and keeps the measured strip height in
    --wt-tabbar-h; the surface is position:fixed inset:0, so a bottom offset
-   clears it. Desktop only: on a coarse pointer the strip is hidden and the
-   mobile switcher's inset is applied through viewport.ts (--wt-reserve-bottom)
-   instead. */
-@media (pointer: fine) {
+   clears it. Applies whenever the desktop strip is shown — a fine pointer OR a
+   wide viewport (an iPad) — the complement of the narrow-coarse switcher gate in
+   css/06-mobile.css (kept in lockstep with SWITCHER_MEDIA in tabs.ts). On the
+   narrow-coarse phone the strip is hidden and the mobile switcher's inset is
+   applied through viewport.ts (--wt-reserve-bottom) instead. */
+@media (pointer: fine), (width >= 601px) {
   .term.wt-with-tabbar {
     bottom: var(--wt-tabbar-h, 44px);
   }
@@ -308,5 +387,9 @@
 @media (prefers-reduced-motion: reduce) {
   .wt-status-dot[data-status="working"] {
     animation: none;
+    /* The pulse is working's ONLY non-hue cue; with motion removed,
+       add a static shape cue (an inner hole -> a ring) so working differs
+       from done (a solid green disc) by shape, not hue alone (WCAG 1.4.1). */
+    box-shadow: inset 0 0 0 2px var(--bg);
   }
 }