@cplieger/web-terminal-ui 3.0.1 → 3.0.3

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);
@@ -233,40 +234,51 @@
 }
 
 .wt-tab-label {
-  max-width: 14ch;
+  max-width: 20ch;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.wt-tab-close {
+/* 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 {
+  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;
-}
-
-.wt-tab-close:hover {
-  opacity: 1;
+  color: color-mix(in oklch, var(--text) 60%, transparent);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
 }
 
-.wt-tab-new {
-  background: transparent;
-  border: none;
+.wt-tab-close:hover,
+.wt-tab-new:hover {
+  background: var(--text-active);
   color: var(--text);
-  cursor: pointer;
-  font-size: 1.1rem;
-  padding: 0 var(--sp-2);
-  border-radius: var(--radius-inner);
 }
 
-/* Shift the terminal down so the fixed tab bar does not overlap the first
-   rows. The tab bar is ~36px tall; the terminal padding-top absorbs it. */
-.wt-tab-bar ~ .term,
-:has(> .wt-tab-bar) .term {
-  padding-top: 40px;
+/* Push the terminal surface below the fixed tab strip so it does not overlap
+   the first rows. The tabs feature marks the surface (.wt-with-topbar) and keeps
+   the measured strip height in --wt-tabbar-h. The surface is position:fixed
+   inset:0, so a top offset is what clears it. Desktop only: the strip is hidden
+   on a coarse pointer, where the switcher docks to the bottom instead, so the
+   surface stays full-height there. (The prior `.wt-tab-bar ~ .term` /
+   `:has(> .wt-tab-bar) .term` rule never matched: the bar lives inside a
+   display:contents region, so it is neither a DOM sibling nor an ancestor of
+   .term.) */
+@media (pointer: fine) {
+  .term.wt-with-topbar {
+    top: var(--wt-tabbar-h, 40px);
+  }
 }
 
 /* ===== Activity dots (activityMonitor via tabs) =====
@@ -278,36 +290,59 @@
   height: 9px;
   border-radius: 50%;
   flex: none;
-  background: color-mix(in oklch, var(--text) 40%, transparent);
+  /* Default / idle (a new session with no turn yet): a hollow grey dot, so
+     "nothing has happened" reads as an outline rather than a filled state.
+     The fill (solid vs hollow) is the non-hue cue that separates the idle state
+     from the filled done/working/input states (WCAG 1.4.1). */
+  background: transparent;
+  border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
 }
 
+.wt-status-dot[data-status="idle"] {
+  background: transparent;
+  border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
+}
+
+/* Agent working: solid pulsing purple, matching Kiro IDE's "thinking" color
+   (#a78bfa). Motion is the primary non-hue cue. Server-side this is driven by
+   the OSC 9;4 progress signal, so it tracks agent activity, not the user typing
+   at the prompt. */
 .wt-status-dot[data-status="working"] {
-  background: oklch(75% 0.15 90deg);
+  background: #a78bfa;
+  border-color: #a78bfa;
   animation: wt-pulse 1.2s ease-in-out infinite;
 }
 
-.wt-status-dot[data-status="idle"] {
-  background: color-mix(in oklch, var(--text) 40%, transparent);
+/* Agent done / ready: solid green, matching Kiro IDE's "Ready" (#22c55e), no
+   motion. The filled dot distinguishes it from the hollow idle without hue. */
+.wt-status-dot[data-status="done"] {
+  background: #22c55e;
+  border-color: #22c55e;
 }
 
+/* User action required (permission / approval): solid amber matching Kiro IDE's
+   "waiting-approval" (#fbbf24), plus a ring so it reads as "needs you" via shape
+   as well as hue. It persists until you act on or switch into the tab. */
 .wt-status-dot[data-status="input"] {
-  background: oklch(70% 0.18 25deg);
-  /* A ring so needs-input reads distinctly without relying on hue alone. */
-  box-shadow: 0 0 0 2px oklch(70% 0.18 25deg / 40%);
+  background: #fbbf24;
+  border-color: #fbbf24;
+  box-shadow: 0 0 0 2px oklch(85% 0.16 85deg / 40%);
 }
 
+/* Exited: a dim hollow dot, static; distinct from idle by its lower opacity. */
 .wt-status-dot[data-status="exited"] {
   background: transparent;
-  border: 1px solid color-mix(in oklch, var(--text) 40%, transparent);
+  border: 1.5px solid color-mix(in oklch, var(--text) 30%, transparent);
+  opacity: 0.5;
 }
 
-/* Reduced-motion (or animations feature off): drop the pulse, keep the color. */
 @keyframes wt-pulse {
   50% {
     opacity: 0.4;
   }
 }
 
+/* Reduced-motion (or the animations feature off): drop the pulse, keep color. */
 @media (prefers-reduced-motion: reduce) {
   .wt-status-dot[data-status="working"] {
     animation: none;
@@ -326,8 +361,12 @@
     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 {
+  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.1",
+  "version": "3.0.3",
   "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

@@ -32,7 +32,16 @@ interface SessionInfo {
 
 interface Tab {
   id: string;
+  /** The raw server title (the OSC 0/2 window title the process set), possibly
+   *  empty before the process sets one. The displayed label is derived from it
+   *  with a numbered fallback and de-duplication (see relabelAll). */
   title: string;
+  /** A stable per-session number for the "Tab N" fallback when the process has
+   *  set no title. Monotonic across the page so a tab's number never changes
+   *  under it when a sibling closes. */
+  num: number;
+  /** The computed, de-duplicated label actually shown in the chrome. */
+  display: string;
   createdAt: string;
   store: LineStore;
   el: HTMLElement;
@@ -41,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 {
@@ -152,8 +166,25 @@ 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).
       const newBtn = fromHTML(NEW_HTML);
-      slot.appendChild(newBtn);
+      bar.appendChild(newBtn);
+
+      // 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,
+      // so a top offset (gated to a fine pointer in CSS, since the strip is
+      // hidden on a coarse pointer where the switcher docks to the bottom
+      // instead) is what clears it. A ResizeObserver keeps the offset in step
+      // with the real strip height rather than a hard-coded guess.
+      const surface = ctx.surface();
+      surface.classList.add("wt-with-topbar");
+      const barResize = new ResizeObserver(() => {
+        surface.style.setProperty("--wt-tabbar-h", `${String(bar.offsetHeight)}px`);
+      });
+      barResize.observe(bar);
 
       // --- Mobile bottom-switcher (bottom-switcher region) ---
       const switcher = fromHTML(SWITCHER_HTML);
@@ -190,6 +221,112 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       let overviewOpen = false;
       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. 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 {
+        // 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 (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) {
+          const base = labelFor(t);
+          counts.set(base, (counts.get(base) ?? 0) + 1);
+        }
+        const seen = new Map<string, number>();
+        for (const t of tabList) {
+          const base = labelFor(t);
+          let display = base;
+          if ((counts.get(base) ?? 0) > 1) {
+            const k = (seen.get(base) ?? 0) + 1;
+            seen.set(base, k);
+            if (k > 1) {
+              display = `${base} (${String(k)})`;
+            }
+          }
+          t.display = display;
+          t.label.textContent = display;
+          t.aria.setLabel(display);
+        }
+      }
+
+      // --- 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 });
@@ -210,7 +347,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
       function syncMobile(): void {
         const idx = tabList.findIndex((t) => t.id === activeId);
         const active = idx >= 0 ? tabList[idx] : undefined;
-        swLabel.textContent = active ? active.title : "";
+        swLabel.textContent = active ? active.display : "";
         swDot.dataset["status"] = active?.dot.dataset["status"] ?? "idle";
         swPos.textContent =
           tabList.length > 1 ? `${String(idx + 1)} / ${String(tabList.length)}` : "";
@@ -240,7 +377,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           const rselect = pick(row, ".wt-sheet-select");
           const rclose = pick(row, ".wt-sheet-close");
           rdot.dataset["status"] = t.dot.dataset["status"] ?? "idle";
-          rlabel.textContent = t.title;
+          rlabel.textContent = t.display;
           if (t.id === activeId) {
             row.classList.add("wt-sheet-row-active");
             rselect.setAttribute("aria-current", "true");
@@ -261,6 +398,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
 
       // syncChrome refreshes every surface after any state change. Idempotent.
       function syncChrome(): void {
+        relabelAll();
         paintActive();
         syncMobile();
         if (overviewOpen) {
@@ -303,16 +441,16 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         if (!label || !dot || !close) {
           throw new Error("web-terminal-ui: tab chrome missing parts");
         }
-        const title = info.title || "terminal";
-        label.textContent = title;
         dot.dataset["status"] = info.status || "idle";
         const aria = tablist.registerTab(el);
-        aria.setLabel(title);
-        bar.appendChild(el);
+        // Insert before the "+" button so it stays the last item in the strip.
+        bar.insertBefore(el, newBtn);
 
         const tab: Tab = {
           id: info.id,
-          title,
+          title: info.title,
+          num: ++tabSeq,
+          display: "",
           createdAt: info.createdAt,
           store: new LineStore(),
           el,
@@ -322,6 +460,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           scrollTop: 0,
           following: true,
         };
+        // Set an initial label immediately (relabelAll refines it with de-dup
+        // once the tab is in tabList and syncChrome runs).
+        tab.display = labelFor(tab);
+        label.textContent = tab.display;
+        aria.setLabel(tab.display);
         el.addEventListener("click", (e) => {
           if ((e.target as HTMLElement).closest(".wt-tab-close")) {
             return; // handled by the close button
@@ -354,6 +497,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();
@@ -368,7 +512,7 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
             surface.scrollTop = savedTop;
           }
         });
-        ctx.announce(`Switched to ${next.title}`);
+        ctx.announce(`Switched to ${next.display}`);
         focusInput();
       }
 
@@ -496,10 +640,11 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           return;
         }
         t.dot.dataset["status"] = status || "idle";
-        if (title && title !== t.title) {
+        // Record the raw server title; the displayed label (fallback + de-dup)
+        // is recomputed by relabelAll via syncChrome, which the callers run
+        // right after applyStatus.
+        if (title !== undefined) {
           t.title = title;
-          t.label.textContent = title;
-          t.aria.setLabel(title);
         }
       }
 
@@ -545,6 +690,8 @@ 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();
       });
@@ -651,13 +798,18 @@ 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);
           }
+          barResize.disconnect();
+          surface.classList.remove("wt-with-topbar");
+          surface.style.removeProperty("--wt-tabbar-h");
           clearCatchup();
           closeOverview();
           for (const t of tabList) {