@cplieger/web-terminal-ui 3.0.0 → 3.0.2

package/css/03-v3.css

@@ -233,7 +233,7 @@
 }
 
 .wt-tab-label {
-  max-width: 14ch;
+  max-width: 20ch;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -262,11 +262,19 @@
   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 +286,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;

package/package.json

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

@@ -18,6 +18,10 @@ import type { ClipboardApi } from "./clipboard.js";
 const LONG_PRESS_MS = 500;
 const LONG_PRESS_MOVE_PX = 10;
 const EDGE_MARGIN = 8;
+// When the menu can't fit below the anchor (a long-press near the bottom edge or
+// above the keyboard), it opens above the point. This gap lifts it clear of the
+// fingertip so the touch does not cover the menu items.
+const MENU_GAP = 16;
 
 export interface ContextMenuOptions {
   /** The clipboard feature value, so the menu can offer Copy/Paste through its
@@ -91,16 +95,33 @@ export function contextMenu(opts: ContextMenuOptions = {}): TerminalFeature {
         if (menu.childElementCount === 0) {
           return; // nothing to offer
         }
-        // Make visible (so it has measurable size) then clamp inside the
-        // viewport. position:fixed => x/y are viewport coordinates.
+        // Make visible (so it has measurable size), then place it within the
+        // VISIBLE viewport. position:fixed => x/y are viewport coordinates; the
+        // visual viewport (when present) is the area above the on-screen
+        // keyboard, so clamping to it keeps the menu off the keyboard too.
         menu.classList.add("visible");
+        const vv = window.visualViewport;
+        const viewLeft = vv ? vv.offsetLeft : 0;
+        const viewTop = vv ? vv.offsetTop : 0;
+        const viewWidth = vv ? vv.width : window.innerWidth;
+        const viewHeight = vv ? vv.height : window.innerHeight;
+        const menuW = menu.offsetWidth;
+        const menuH = menu.offsetHeight;
         const left = Math.max(
-          EDGE_MARGIN,
-          Math.min(x, window.innerWidth - menu.offsetWidth - EDGE_MARGIN),
+          viewLeft + EDGE_MARGIN,
+          Math.min(x, viewLeft + viewWidth - menuW - EDGE_MARGIN),
         );
-        const top = Math.max(
-          EDGE_MARGIN,
-          Math.min(y, window.innerHeight - menu.offsetHeight - EDGE_MARGIN),
+        // Open just below the point; but if that would overflow the visible
+        // bottom (a long-press near the bottom edge, where the user naturally
+        // taps), flip above the finger so the menu is neither clipped off-screen
+        // nor hidden under the fingertip.
+        let top = y;
+        if (y + menuH + EDGE_MARGIN > viewTop + viewHeight) {
+          top = y - menuH - MENU_GAP;
+        }
+        top = Math.max(
+          viewTop + EDGE_MARGIN,
+          Math.min(top, viewTop + viewHeight - menuH - EDGE_MARGIN),
         );
         menu.style.left = `${String(left)}px`;
         menu.style.top = `${String(top)}px`;

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;
@@ -152,8 +161,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 +216,44 @@ 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: 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.
+      function labelFor(tab: Tab): string {
+        return 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.
+      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);
+        }
+      }
 
       function focusInput(): void {
         ctx.surface().querySelector<HTMLElement>(".term-input")?.focus({ preventScroll: true });
@@ -210,7 +274,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 +304,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 +325,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 +368,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 +387,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
@@ -496,10 +566,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);
         }
       }
 
@@ -658,6 +729,9 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           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) {