@cplieger/web-terminal-ui 3.0.3 → 3.0.4

package/css/03-v3.css

@@ -219,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);
@@ -228,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);
@@ -239,12 +253,14 @@
   text-overflow: ellipsis;
 }
 
-/* The tab close (×) and the add-tab (+) button share one look: a centered,
-   muted square glyph button that shows a box on hover like an active tab. Same
-   size and color so they read as a matched pair (and the + centers vertically
-   in the strip via the shared flex box + the bar's align-items: center). */
-.wt-tab-close,
-.wt-tab-new {
+/* 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;
@@ -255,13 +271,72 @@
   border: none;
   border-radius: var(--radius-inner);
   color: color-mix(in oklch, var(--text) 60%, transparent);
+  font: inherit;
   font-size: 1rem;
   line-height: 1;
   cursor: pointer;
 }
 
-.wt-tab-close:hover,
+.wt-tab-close:hover {
+  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;
+  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);
 }
@@ -363,7 +438,8 @@
 
 .wt-animate .wt-tab,
 .wt-animate .wt-tab-close,
-.wt-animate .wt-tab-new {
+.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);

package/package.json

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

@@ -91,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 = `
@@ -172,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,
@@ -222,6 +229,11 @@ 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
+      // 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
@@ -475,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;
       }
 
@@ -513,7 +538,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           }
         });
         ctx.announce(`Switched to ${next.display}`);
-        focusInput();
+        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
@@ -606,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) {
@@ -695,6 +744,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       newBtn.addEventListener("click", () => {
         void create();
       });
+      closeAllBtn.addEventListener("click", () => {
+        void closeAll();
+      });
       overviewBtn.addEventListener("click", () => {
         openOverview();
       });
@@ -819,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();