@cplieger/web-terminal-ui 3.0.2 → 3.0.4

package/css/03-v3.css

@@ -204,6 +204,7 @@
   left: 0;
   right: 0;
   display: flex;
+  align-items: center;
   gap: 2px;
   padding: var(--sp-1);
   background: var(--surface);
@@ -218,6 +219,9 @@
   align-items: center;
   gap: var(--sp-1);
   padding: var(--sp-1) 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;
   border-radius: var(--radius-inner);
   color: color-mix(in oklch, var(--text) 70%, transparent);
   font-family: var(--font-ui);
@@ -227,6 +231,17 @@
   user-select: none;
 }
 
+/* Inactive tabs read as outlined chips (so adjacent tabs stay visually
+   separated) and take a subtle fill on hover. */
+.wt-tab:not(.wt-tab-active) {
+  border-color: var(--border);
+}
+
+.wt-tab:not(.wt-tab-active):hover {
+  background: var(--text-active);
+  color: var(--text);
+}
+
 .wt-tab-active {
   background: color-mix(in oklch, var(--text) 10%, var(--surface));
   color: var(--text);
@@ -238,28 +253,92 @@
   text-overflow: ellipsis;
 }
 
+/* A little breathing room after the activity dot, before the label. */
+.wt-tab-dot {
+  margin-right: 2px;
+}
+
+/* The tab close (×): a centered, muted square glyph button with a box on hover.
+   font: inherit so the glyph uses the UI font and centers cleanly in its box. */
 .wt-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0;
   background: transparent;
   border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0 var(--sp-1);
   border-radius: var(--radius-inner);
-  opacity: 0.6;
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
 }
 
 .wt-tab-close:hover {
-  opacity: 1;
+  background: var(--text-active);
+  color: var(--text);
 }
 
+/* On an inactive tab the close appears only on hover, kept in the layout via
+   visibility so the tab width never jumps; on the active tab it is always shown. */
+.wt-tab:not(.wt-tab-active) .wt-tab-close {
+  visibility: hidden;
+}
+
+.wt-tab:not(.wt-tab-active):hover .wt-tab-close {
+  visibility: visible;
+}
+
+/* The add-tab (+) button: its hover box matches an active tab's box (it
+   stretches to the strip height and uses the same active-tab fill), it centers
+   its glyph, and a left margin keeps its hover box clear of the last tab's. */
 .wt-tab-new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 1.875rem;
+  margin-left: var(--sp-2);
+  padding: 0 var(--sp-1);
   background: transparent;
   border: none;
-  color: var(--text);
-  cursor: pointer;
+  border-radius: var(--radius-inner);
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  font: inherit;
   font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.wt-tab-new:hover {
+  background: color-mix(in oklch, var(--text) 10%, var(--surface));
+  color: var(--text);
+}
+
+/* Close-all: a right-anchored text button (pushed to the far end of the strip). */
+.wt-tab-closeall {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  margin-left: auto;
   padding: 0 var(--sp-2);
+  background: transparent;
+  border: none;
   border-radius: var(--radius-inner);
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.wt-tab-closeall:hover {
+  background: var(--text-active);
+  color: var(--text);
 }
 
 /* Push the terminal surface below the fixed tab strip so it does not overlap
@@ -357,8 +436,13 @@
     display var(--dur-standard) allow-discrete;
 }
 
-.wt-animate .wt-tab {
-  transition: background-color var(--dur-micro) var(--ease-standard);
+.wt-animate .wt-tab,
+.wt-animate .wt-tab-close,
+.wt-animate .wt-tab-new,
+.wt-animate .wt-tab-closeall {
+  transition:
+    background-color var(--dur-micro) var(--ease-standard),
+    color var(--dur-micro) var(--ease-standard);
 }
 
 /* ===== Mobile bottom-switcher (tabs feature, section 12) =====

package/package.json

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

package/src/features/tabs.ts

@@ -50,6 +50,11 @@ interface Tab {
   aria: TabHandle;
   scrollTop: number;
   following: boolean;
+  /** A title derived from the first line the user submitted into this tab, used
+   *  in preference to the process window title (kiro-cli's OSC 0 title is only
+   *  the cwd for a live session, so it never reflects the conversation).
+   *  Undefined until the first non-empty, non-slash submission. */
+  derived?: string;
 }
 
 export interface TabsApi {
@@ -86,6 +91,8 @@ const TAB_HTML = `
 
 const NEW_HTML = `<button type="button" class="wt-tab-new" aria-label="New terminal">+</button>`;
 
+const CLOSEALL_HTML = `<button type="button" class="wt-tab-closeall" aria-label="Close all terminals">Close all</button>`;
+
 // Mobile bottom-switcher: the active tab (dot + label + position) as a tap/swipe
 // surface, plus a >=44px overview control that carries the aggregate badge.
 const SWITCHER_HTML = `
@@ -167,6 +174,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       // end of the tabs (addTabChrome inserts each tab before it).
       const newBtn = fromHTML(NEW_HTML);
       bar.appendChild(newBtn);
+      // A right-anchored "Close all" button (CSS margin-left: auto pushes it to
+      // the far end of the strip). Desktop only, since it lives inside the bar,
+      // which is hidden on a coarse pointer.
+      const closeAllBtn = fromHTML(CLOSEALL_HTML);
+      bar.appendChild(closeAllBtn);
 
       // Push the terminal surface below the fixed strip on desktop so the bar
       // does not overlap the first rows. The surface is position:fixed inset:0,
@@ -217,21 +229,29 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       let lastFocus: HTMLElement | null = null;
       let hintShown = false;
       let tabSeq = 0; // monotonic source for the "Tab N" fallback number
-
-      // labelFor is a tab's base label before de-duplication: the server title
-      // (the OSC 0/2 window title the process set, e.g. kiro-cli's
-      // "kiro: <first message>" when chat.terminalTitle is on) when present,
-      // else a stable "Tab N". This is the fix for every tab reading "terminal":
-      // a real title flows through, and untitled tabs are numbered, not generic.
+      // On a touch device, focusing the hidden input opens the virtual keyboard.
+      // A switch triggered by tapping/swiping the tab UI must not do that (it is
+      // disruptive), so the input is focused on a switch only with a fine
+      // pointer; on touch the user taps the terminal itself to open the keyboard.
+      const coarse = window.matchMedia("(pointer: coarse)").matches;
+
+      // labelFor is a tab's base label before de-duplication. Preference order:
+      // the title derived from the user's first submitted line (best for a chat
+      // like kiro-cli, whose OSC 0 title only ever reflects the cwd for a live
+      // session), then the process window title (OSC 0/2, e.g. a shell's), then
+      // a stable "Tab N". This fixes both the generic "terminal" label and the
+      // static "kiro: /workspace" one: a tab now names itself from what you type.
       function labelFor(tab: Tab): string {
-        return tab.title.trim() || `Tab ${String(tab.num)}`;
+        // derived is only ever set to a non-empty value, so ?? and || agree on
+        // it; the || on the (possibly empty) window title falls through to "Tab N".
+        return (tab.derived?.trim() ?? tab.title.trim()) || `Tab ${String(tab.num)}`;
       }
 
       // relabelAll recomputes every tab's display label with de-duplication:
-      // when two tabs resolve to the same base label (fresh vibecli tabs share
-      // the cwd-derived title until their first message gives each a distinct
-      // one), the second and later get a " (k)" suffix in creation order, so the
-      // strip never shows two identical labels.
+      // when two tabs resolve to the same base label (e.g. two tabs whose first
+      // submitted line was identical, or two shells with the same window title),
+      // the second and later get a " (k)" suffix in creation order, so the strip
+      // never shows two identical labels.
       function relabelAll(): void {
         const counts = new Map<string, number>();
         for (const t of tabList) {
@@ -255,6 +275,71 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
+      // --- Title derivation from the user's first submitted line ---
+      // kiro-cli's OSC 0 title is only the cwd for a live session (it reloads its
+      // session title just when the session id changes, not per turn), so the
+      // useful, updating title for a chat is the user's first message. The kernel
+      // routes input to the active session, so an input observer's bytes belong
+      // to activeId. A tiny line editor tracks the current input line (handling
+      // backspace and skipping the escape sequences arrow keys and bracketed
+      // paste emit) and locks the tab's title on the first non-empty, non-slash
+      // submission. Best-effort: an odd editing sequence just yields no derived
+      // title, falling back to the window title or "Tab N".
+      const MAX_DERIVED = 60;
+      let lineBytes: number[] = [];
+      let escState = 0; // 0 normal, 1 saw ESC, 2 in CSI, 3 in SS3 (one more byte)
+      function resetInputLine(): void {
+        lineBytes = [];
+        escState = 0;
+      }
+      function deriveTitleFromInput(bytes: Uint8Array): void {
+        const t = tabList.find((x) => x.id === activeId);
+        if (!t || t.derived !== undefined) {
+          return; // no active tab, or its first submission is already captured
+        }
+        for (const b of bytes) {
+          if (escState === 1) {
+            escState = b === 0x5b ? 2 : b === 0x4f ? 3 : 0; // ESC [ = CSI, ESC O = SS3
+            continue;
+          }
+          if (escState === 2) {
+            if (b >= 0x40 && b <= 0x7e) {
+              escState = 0; // CSI final byte
+            }
+            continue;
+          }
+          if (escState === 3) {
+            escState = 0; // SS3 final byte
+            continue;
+          }
+          if (b === 0x1b) {
+            escState = 1; // ESC: start of an escape sequence
+          } else if (b === 0x0d || b === 0x0a) {
+            const line = new TextDecoder().decode(new Uint8Array(lineBytes)).trim();
+            lineBytes = [];
+            if (line && !line.startsWith("/")) {
+              t.derived = line.slice(0, MAX_DERIVED);
+              syncChrome();
+              return;
+            }
+          } else if (b === 0x7f || b === 0x08) {
+            // Backspace: drop one codepoint (pop UTF-8 continuation bytes + lead).
+            while (lineBytes.length > 0) {
+              const last = lineBytes[lineBytes.length - 1];
+              if (last === undefined || (last & 0xc0) !== 0x80) {
+                break;
+              }
+              lineBytes.pop();
+            }
+            lineBytes.pop();
+          } else if (b === 0x03) {
+            lineBytes = []; // Ctrl-C: cancel the current line
+          } else if (b >= 0x20) {
+            lineBytes.push(b); // printable ASCII or a UTF-8 byte
+          }
+        }
+      }
+
       function focusInput(): void {
         ctx.surface().querySelector<HTMLElement>(".term-input")?.focus({ preventScroll: true });
       }
@@ -402,6 +487,19 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           e.stopPropagation();
           void close_(tab.id);
         });
+        // Middle-click closes the tab (#8). Suppress the middle-click default on
+        // mousedown so the browser's autoscroll/paste affordance does not fire.
+        el.addEventListener("mousedown", (e) => {
+          if (e.button === 1) {
+            e.preventDefault();
+          }
+        });
+        el.addEventListener("auxclick", (e) => {
+          if (e.button === 1) {
+            e.preventDefault();
+            void close_(tab.id);
+          }
+        });
         return tab;
       }
 
@@ -424,6 +522,7 @@ 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;
+        resetInputLine(); // a partial line typed in the old tab does not carry over
         ctx.render.bind(next.store);
         ctx.notifySwitch({ id: next.id });
         armCatchup();
@@ -438,8 +537,10 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
             surface.scrollTop = savedTop;
           }
         });
-        ctx.announce(`Switched to ${next.title}`);
-        focusInput();
+        ctx.announce(`Switched to ${next.display}`);
+        if (!coarse) {
+          focusInput(); // desktop only; on touch this would pop the keyboard (#7)
+        }
       }
 
       // armCatchup shows the "catching up" cue only if the resume delta has not
@@ -532,6 +633,28 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         await dropTab(id, true);
       }
 
+      // closeAll closes every tab (killing each process) and leaves one fresh
+      // terminal. Destructive - each tab is a running agent - so it confirms.
+      async function closeAll(): Promise<void> {
+        if (tabList.length === 0) {
+          return;
+        }
+        if (!window.confirm(`Close all ${String(tabList.length)} terminals?`)) {
+          return;
+        }
+        const victims = [...tabList];
+        tabList.length = 0;
+        activeId = null;
+        for (const t of victims) {
+          t.aria.remove();
+          t.el.remove();
+          ctx.dropSession(t.id);
+          await apiClose(t.id);
+        }
+        syncChrome();
+        await create(); // there is always at least one terminal open
+      }
+
       // One-time "swipe to switch" hint on first multi-tab state, mobile only.
       function maybeSwipeHint(): void {
         if (hintShown || tabList.length < 2) {
@@ -616,9 +739,14 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       }
 
       // --- Event wiring ---
+      // Derive each tab's title from the first line the user submits into it.
+      const offInput = ctx.registerInputObserver(deriveTitleFromInput);
       newBtn.addEventListener("click", () => {
         void create();
       });
+      closeAllBtn.addEventListener("click", () => {
+        void closeAll();
+      });
       overviewBtn.addEventListener("click", () => {
         openOverview();
       });
@@ -722,10 +850,12 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           create,
           close: close_,
           switchTo,
-          list: () => tabList.map((t) => ({ id: t.id, title: t.title, active: t.id === activeId })),
+          list: () =>
+            tabList.map((t) => ({ id: t.id, title: t.display, active: t.id === activeId })),
         },
         teardown() {
           offStatus?.();
+          offInput();
           if (pollTimer !== null) {
             clearInterval(pollTimer);
           }
@@ -741,6 +871,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           tabList.length = 0;
           bar.remove();
           newBtn.remove();
+          closeAllBtn.remove();
           switcher.remove();
           sheet.remove();
           scrim.remove();