From 09d3b9a3bf4cbbb17c24e682606b85cb35d9b5d4 Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Fri, 9 Oct 2026 01:02:57 +0200
Subject: [PATCH] feat(tabs): every agent tab shows its CLI logo, claude
 included

A claude tab drew no harness mark at all and every other agent CLI a
two-letter text pill (DS, CX, ...), so a claude tab read as "no harness"
next to its neighbours. Session tabs (header strip, side rail, sidebar,
phone chips) and the desktop home rail now draw the agent through PR
#532's run-mode-dot <id> slot, the id as data, the same mark the Run
menus and the tile and split headers use. The shell is not an agent and
keeps its SH pill; a CLI added through clis.json gets the slot's plain
dot instead of nothing.

The per-CLI tab pill colours and their light-skin ink overrides are gone
(the monochrome marks follow the tab's own text colour), and the logo
steps aside with the other adornments while a compact rail row renames.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 docs/architecture-invariants.md       |   2 +-
 docs/cli-registry.md                  |   2 +-
 src/web/public/app.js                 |  11 +-
 src/web/public/entrance-animations.js |   1 +
 src/web/public/home-sessions.js       |  21 +--
 src/web/public/styles.css             |  57 ++------
 test/home-sessions.test.ts            |  32 +++--
 test/tab-harness-logo.test.ts         | 181 ++++++++++++++++++++++++++
 8 files changed, 233 insertions(+), 74 deletions(-)
 create mode 100644 test/tab-harness-logo.test.ts

diff --git a/docs/architecture-invariants.md b/docs/architecture-invariants.md
index a4e75588..b01f6507 100644
--- a/docs/architecture-invariants.md
+++ b/docs/architecture-invariants.md
@@ -777,7 +777,7 @@ Further detail: in the Settings section order, the version and the updater lead
 
 **The session list can render as the horizontal header strip (default) or as a collapsible left sidebar** — App Settings → Layout → Tabs → **Session List Layout** (`sessionListLayout: 'header' | 'sidebar'`, in the per-device `displayKeys` set, so it never syncs across devices; also in `SettingsUpdateSchema`, which is `.strict()` — without that entry the server 400s the ENTIRE settings PUT and every unrelated setting silently stops persisting). ⚠️ **There is exactly ONE `#sessionTabs` element and `applySessionListLayout()` RE-PARENTS it** between `#sessionTabsHost` (in `<header>`) and `#sessionSidebarList` (in the `<aside>`, a flex sibling of `.terminal-wrap` so the terminal shrinks and `terminal-ui.js`'s `ResizeObserver` refits xterm on its own). It must never be cloned or rebuilt: `app.$(id)` caches elements by id and NEVER invalidates, and `settings-ui.js` / `webview-tabs.js` resolve the same id independently, so a rebuilt container leaves every consumer writing into a detached orphan — silently, with no error. Everything else is CSS keyed off `html[data-session-list]` / `html[data-sidebar]`, both written by a pre-paint script in `<head>` so the loading skeleton already matches. Consequences: the renderers, drag/keyboard handlers, web tabs (`data-webview-id` rows stay in the same list, keeping the shared Alt+N numbering and the single-active-tab invariant) and the generated gesture bundle (`TAB_SELECTOR`/`DOCK_SELECTOR` match on class names that are unchanged) all need **zero** edits.
 
-⚠️ Collapsed means **different things per viewport**: at 1024px and up the sidebar keeps a 44px icon rail so the ambient signal (status dot, task/subagent/ultracode badges) survives — the Alt+N number, the name/folder and the `sh`/`oc`/`cx`/`gm` mode chip do NOT, because 44px minus paddings and borders is ~34px of content box and the chip lives inside `.tab-info`; below 1024px `mobile.css` turns the sidebar into an off-canvas overlay where collapsed == drawer closed (mirrored into an `.open` class plus `inert`/`aria-hidden`, since `translateX(-100%)` alone leaves every row in the Tab order), it defaults to CLOSED when the user has made no choice, and picking a session or web tab dismisses it. ⚠️ **That 1024px breakpoint is the only handheld test the sidebar may use** (`_isSessionSidebarOverlay()`, mirrored in the pre-paint script): `MobileDetection.getDeviceType()` calls everything from 768px up `'desktop'`, so using it gave 768-1023px the overlay CSS with docked-sidebar logic — drawer opening itself on load, immune to selection and Escape. The toggle chord (default Alt+B) also needs its gate in `terminal-ui.js`'s `attachCustomKeyEventHandler`, or `preventDefault()` in the capture handler still lets xterm write ESC b into the live PTY (same trap as COD-153). The sidebar filter only applies while its input is on screen — `applySidebarFilter()` strips the class in the header strip, the collapsed rail and the closed drawer, because a filter with no reachable control hides sessions permanently. Collapse state lives in its OWN `codeman-sidebar-collapsed` key, **not** in the settings blob — `saveAppSettings()` rebuilds that blob from DOM controls, so a key without a control is wiped on every Save. Solo (`/session/:id`) windows never get a sidebar (three guards: `getSessionListLayout()`, the pre-paint script, and `body.solo-mode`), because `#sessionTabs` parked in a `display:none` subtree measures 0/0 for tab overflow and inline rename. The sidebar CSS block sits at the END of `styles.css`, **after** the `html:not([data-skin="og"])` nesting block, and is layout-only — any colour on `.session-tab` there would render correctly on the `og` skin only. Same for the `mobile.css` block: it must stay at the end of the file or the earlier compact-strip rules clip the list to a 36px sliver. Two surfaces DEFER to the sidebar rather than adapt: **lineage lines are skipped** in sidebar layout (`_appendLineageConnectionLines` early-returns: `computeLineageTree()` routes through a horizontal strip's reserved row gaps or the vertical rail's reserved `--lineage-vertical-gutter`, and the sidebar has neither; a sidebar lineage shape needs its own visual tuning, it is not a by-product of re-parenting), and the **desktop home tab rail** (`shouldShowHomeSessions()`) stays hidden while the sidebar is active, because both dock the session list flush left and the rail would render the same list next to it, z-ordered UNDER it. The subagent/ultracode connectors DO adapt (`_tabAnchor()`/`_tabConnectorPath()` in app.js: right-edge anchor, horizontal bezier), and the lineage strip-scroll listener redraws them on the sidebar's vertical scroll. `_scrollActiveTabIntoView()` owns active-row reveal on BOTH axes: sidebar mode branches to `scrollIntoView({block:'nearest'})` because the horizontal `computeTabScrollLeft` math no-ops against a vertical scroller, and `_fullRenderSessionTabs()` restores `scrollTop` alongside the #257 `scrollLeft` restore or ambient rebuilds yank a mid-scroll sidebar back to the top. Tests: `test/session-list-layout.test.ts`.
+⚠️ Collapsed means **different things per viewport**: at 1024px and up the sidebar keeps a 44px icon rail so the ambient signal (status dot, task/subagent/ultracode badges) survives — the Alt+N number, the name/folder and the harness mark (an agent CLI's `run-mode-dot` logo, a shell's `sh` chip) do NOT, because 44px minus paddings and borders is ~34px of content box and the chip lives inside `.tab-info`; below 1024px `mobile.css` turns the sidebar into an off-canvas overlay where collapsed == drawer closed (mirrored into an `.open` class plus `inert`/`aria-hidden`, since `translateX(-100%)` alone leaves every row in the Tab order), it defaults to CLOSED when the user has made no choice, and picking a session or web tab dismisses it. ⚠️ **That 1024px breakpoint is the only handheld test the sidebar may use** (`_isSessionSidebarOverlay()`, mirrored in the pre-paint script): `MobileDetection.getDeviceType()` calls everything from 768px up `'desktop'`, so using it gave 768-1023px the overlay CSS with docked-sidebar logic — drawer opening itself on load, immune to selection and Escape. The toggle chord (default Alt+B) also needs its gate in `terminal-ui.js`'s `attachCustomKeyEventHandler`, or `preventDefault()` in the capture handler still lets xterm write ESC b into the live PTY (same trap as COD-153). The sidebar filter only applies while its input is on screen — `applySidebarFilter()` strips the class in the header strip, the collapsed rail and the closed drawer, because a filter with no reachable control hides sessions permanently. Collapse state lives in its OWN `codeman-sidebar-collapsed` key, **not** in the settings blob — `saveAppSettings()` rebuilds that blob from DOM controls, so a key without a control is wiped on every Save. Solo (`/session/:id`) windows never get a sidebar (three guards: `getSessionListLayout()`, the pre-paint script, and `body.solo-mode`), because `#sessionTabs` parked in a `display:none` subtree measures 0/0 for tab overflow and inline rename. The sidebar CSS block sits at the END of `styles.css`, **after** the `html:not([data-skin="og"])` nesting block, and is layout-only — any colour on `.session-tab` there would render correctly on the `og` skin only. Same for the `mobile.css` block: it must stay at the end of the file or the earlier compact-strip rules clip the list to a 36px sliver. Two surfaces DEFER to the sidebar rather than adapt: **lineage lines are skipped** in sidebar layout (`_appendLineageConnectionLines` early-returns: `computeLineageTree()` routes through a horizontal strip's reserved row gaps or the vertical rail's reserved `--lineage-vertical-gutter`, and the sidebar has neither; a sidebar lineage shape needs its own visual tuning, it is not a by-product of re-parenting), and the **desktop home tab rail** (`shouldShowHomeSessions()`) stays hidden while the sidebar is active, because both dock the session list flush left and the rail would render the same list next to it, z-ordered UNDER it. The subagent/ultracode connectors DO adapt (`_tabAnchor()`/`_tabConnectorPath()` in app.js: right-edge anchor, horizontal bezier), and the lineage strip-scroll listener redraws them on the sidebar's vertical scroll. `_scrollActiveTabIntoView()` owns active-row reveal on BOTH axes: sidebar mode branches to `scrollIntoView({block:'nearest'})` because the horizontal `computeTabScrollLeft` math no-ops against a vertical scroller, and `_fullRenderSessionTabs()` restores `scrollTop` alongside the #257 `scrollLeft` restore or ambient rebuilds yank a mid-scroll sidebar back to the top. Tests: `test/session-list-layout.test.ts`.
 
 Further detail: with many sessions the horizontal strip stops being scannable, which is why the list can move into the vertical `<aside>` with a filter box and a live count, collapsible to a 44px rail (`--sidebar-width` 260 / `--sidebar-width-collapsed` 44) via **Alt+B** (`toggleSessionSidebar`; Alt, not Ctrl+B, which must reach tmux/readline in the terminal). The setting lives in App Settings → Appearance → Tabs. There is a THIRD host for `#sessionTabs` besides `#sessionTabsHost` and `#sessionSidebarList`: `#tabRail`, the vertical rail. Exactly TWO functions reparent it and they must run in this order: `applySessionListLayout()` first (sidebar wins), then `applyTabOrientation()` (settings-ui.js), which moves the tabs into `#tabRail` only when the sidebar does not own them. ⚠️ `applySessionListLayout()` sets `data-session-list` / `data-sidebar` on `<html>` and must run BEFORE `applyTabWrapSettings()`, which is the one owner of `tabs-two-rows`/`tabs-show-folder` and reads those attributes.
 
diff --git a/docs/cli-registry.md b/docs/cli-registry.md
index c24fd819..655ecfac 100644
--- a/docs/cli-registry.md
+++ b/docs/cli-registry.md
@@ -36,7 +36,7 @@ These are the only writes to `clis.json`. They are serialized, and a file that d
 interface CliEntry {
   id: CliId; // 'codex'
   label: string; // 'Codex' — shown in menus
-  shortBadge: string; // tab badge, e.g. 'CX'
+  shortBadge: string; // short label ("Run CX", the Settings CLI list), e.g. 'CX'; tabs show the run-mode-dot logo instead
   accent: string; // single hex colour
   enabled: boolean;
   stock: boolean; // set by the loader; a custom entry can never claim it
diff --git a/src/web/public/app.js b/src/web/public/app.js
index d8c20a2a..2a4466e6 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -6614,6 +6614,15 @@ class CodemanApp {
       // (direct-PTY, remote SSH, docker). See paneExitLabel().
       const paneExitBadge = paneExitLabel(session.paneExit);
 
+      // Which harness runs here. A shell keeps its SH pill (it is not an agent);
+      // every agent CLI, claude included, shows its logo through PR #532's
+      // `run-mode-dot <id>` slot, the id as DATA, so the tab, the tile and split
+      // headers and the Run menus draw the same mark. An id with no logo rule (a
+      // CLI added through ~/.codeman/clis.json) gets that slot's plain dot.
+      const tabModeHtml = mode === 'shell'
+        ? '<span class="tab-mode shell" aria-hidden="true">sh</span>'
+        : `<span class="tab-harness run-mode-dot ${escapeHtml(mode)}" aria-hidden="true"></span>`;
+
       const inlineSessionActions = this.shouldInlineSessionActions();
       const tabActionsHtml = `<span class="tab-actions"><span class="tab-gear" onclick="event.stopPropagation(); app.openSessionOptions(${escapeHtml(JSON.stringify(id))})" title="Session options" aria-label="Session options" tabindex="0">&#x2699;</span><span class="tab-detach" onclick="event.stopPropagation(); app.detachSession(${escapeHtml(JSON.stringify(id))})" title="Open in a new window" aria-label="Open session in a new window" tabindex="0">&#x29C9;</span><span class="tab-close" onclick="event.stopPropagation(); app.requestCloseSession(${escapeHtml(JSON.stringify(id))})" title="Close session" aria-label="Close session" tabindex="0">&times;</span><button type="button" class="tab-more" onclick="event.stopPropagation(); app.openTabRailActionMenu(event, ${escapeHtml(JSON.stringify(id))})" title="Session actions" aria-label="Session actions">&#x22EF;</button></span>`;
 
@@ -6623,7 +6632,7 @@ class CodemanApp {
           <span class="tab-status ${status}" aria-hidden="true"></span>
           <span class="tab-info">
             <span class="tab-name-row">
-              ${mode === 'shell' ? '<span class="tab-mode shell" aria-hidden="true">sh</span>' : mode === 'opencode' ? '<span class="tab-mode opencode" aria-hidden="true">oc</span>' : mode === 'codex' ? '<span class="tab-mode codex" aria-hidden="true">cx</span>' : mode === 'gemini' ? '<span class="tab-mode gemini" aria-hidden="true">gm</span>' : mode === 'antigravity' ? '<span class="tab-mode antigravity" aria-hidden="true">ag</span>' : mode === 'pi' ? '<span class="tab-mode pi" aria-hidden="true">pi</span>' : mode === 'grok' ? '<span class="tab-mode grok" aria-hidden="true">gk</span>' : mode === 'deepseek' ? '<span class="tab-mode deepseek" aria-hidden="true">ds</span>' : mode === 'omp' ? '<span class="tab-mode omp" aria-hidden="true">om</span>' : ''}
+              ${tabModeHtml}
               <span class="tab-name" data-session-id="${id}" data-full-name="${escapeHtml(name)}">${tabLabel}</span>
               ${paneExitBadge ? `<span class="tab-exited-badge" data-label="${escapeHtml(paneExitBadge)}" aria-hidden="true">${escapeHtml(paneExitBadge)}</span>` : ''}
               ${inlineSessionActions ? tabActionsHtml : ''}
diff --git a/src/web/public/entrance-animations.js b/src/web/public/entrance-animations.js
index 54e3e59a..2fa94275 100644
--- a/src/web/public/entrance-animations.js
+++ b/src/web/public/entrance-animations.js
@@ -692,6 +692,7 @@ Object.assign(CodemanApp.prototype, {
         <span class="tab-number">${base + i + 1}</span>
         <span class="tab-status idle" aria-hidden="true"></span>
         <span class="tab-info"><span class="tab-name-row">
+          <span class="tab-harness run-mode-dot claude" aria-hidden="true"></span>
           <span class="tab-name">w${base + i + 1}-demo</span>
         </span></span>`;
       container.appendChild(tab);
diff --git a/src/web/public/home-sessions.js b/src/web/public/home-sessions.js
index eeb12c53..a0fb9268 100644
--- a/src/web/public/home-sessions.js
+++ b/src/web/public/home-sessions.js
@@ -70,17 +70,13 @@ const HOME_SESSIONS_PILL_LABEL = {
   done: 'done',
 };
 
-/** Short backend badge, mirroring `.tab-mode` in the tab strip. */
+/**
+ * Text badge per backend, mirroring the tab strip: only the shell has one. Every
+ * agent CLI (claude included) shows its logo instead, through the same
+ * `run-mode-dot <id>` slot the strip uses (see _buildHomeSessionRow).
+ */
 const HOME_SESSIONS_MODE_BADGE = {
   shell: 'sh',
-  opencode: 'oc',
-  codex: 'cx',
-  gemini: 'gm',
-  antigravity: 'ag',
-  pi: 'pi',
-  grok: 'gk',
-  deepseek: 'ds',
-  omp: 'om',
 };
 
 Object.assign(CodemanApp.prototype, {
@@ -430,6 +426,13 @@ Object.assign(CodemanApp.prototype, {
       badge.setAttribute('data-i18n-skip', '');
       badge.textContent = row.modeBadge;
       line1.appendChild(badge);
+    } else {
+      // The agent's logo: PR #532's slot, the mode id as data (an id with no
+      // logo rule gets the slot's plain dot).
+      const logo = document.createElement('span');
+      logo.className = `home-sessions-harness run-mode-dot ${row.mode}`;
+      logo.setAttribute('aria-hidden', 'true');
+      line1.appendChild(logo);
     }
     const name = document.createElement('span');
     // .session-name is in the i18n skip list: a session name is user content.
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 7ca9f790..287e585d 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -354,12 +354,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
 html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="catppuccin-latte"], [data-skin="rose-pine-dawn"]) :is(
   .search-filter-chip.active,
   .search-badge-session,
-  .history-view-all-btn,
-  .session-tab .tab-mode.gemini,
-  .session-tab .tab-mode.antigravity,
-  .session-tab .tab-mode.pi,
-  .session-tab .tab-mode.grok,
-  .session-tab .tab-mode.omp
+  .history-view-all-btn
 ) {
   color: var(--accent-d);
 }
@@ -1911,6 +1906,7 @@ html[data-tab-orientation='vertical'].tab-rail-compact
   .session-tab:has(.tab-name-renaming)
   :is(
     .tab-mode,
+    .tab-harness,
     .tab-exited-badge,
     .tab-detached-badge,
     .tab-badge,
@@ -3008,49 +3004,10 @@ body.solo-mode .btn-lifecycle-log {
   color: var(--yellow);
 }
 
-.session-tab .tab-mode.opencode {
-  background: rgba(16, 185, 129, 0.2);
-  color: #10b981;
-}
-
-.session-tab .tab-mode.codex {
-  background: rgba(168, 85, 247, 0.2);
-  color: #a855f7;
-}
-
-.session-tab .tab-mode.gemini {
-  background: rgba(138, 180, 248, 0.2);
-  color: #8ab4f8;
-}
-
-.session-tab .tab-mode.antigravity {
-  background: rgba(34, 211, 238, 0.2);
-  color: #22d3ee;
-}
-.session-tab .tab-mode.omp {
-  background: rgba(129, 140, 248, 0.2);
-  color: #818cf8;
-}
-
-.session-tab .tab-mode.pi {
-  background: rgba(244, 114, 182, 0.2);
-  color: #f472b6;
-}
-
-.session-tab .tab-mode.grok {
-  background: rgba(212, 212, 216, 0.18);
-  color: #d4d4d8;
-}
-
-/* DeepSeek: the vendor's own brand blue. Deliberately NOT added to the
-   light-skin `--accent-d` override list above (which rescues gemini/antigravity/
-   pi/grok, whose pastels wash out on paper backgrounds) — this indigo already
-   carries enough contrast on the light skins, and overriding it would throw away
-   the one cue that separates a dsh tab from its neighbours. */
-.session-tab .tab-mode.deepseek {
-  background: rgba(77, 107, 254, 0.18);
-  color: #7c93ff;
-}
+/* Every agent CLI (claude included) shows its logo instead, in a
+   `.tab-harness.run-mode-dot <id>` slot that the run-mode-dot rules draw: brand
+   marks as is, monochrome ones in the tab's own text colour, so no per-CLI tab
+   colour lives here any more. Only the shell keeps a pill. */
 
 /* Timer Banner - Compact */
 .timer-banner {
@@ -16796,6 +16753,8 @@ html[data-tab-orientation='vertical'] .home-sessions {
   opacity: 0.95;
 }
 
+/* Only the shell has this text pill; an agent row shows its logo instead in a
+   `.home-sessions-harness.run-mode-dot <id>` slot, as the tab strip does. */
 .home-sessions-mode {
   flex-shrink: 0;
   padding: 0 0.35em;
diff --git a/test/home-sessions.test.ts b/test/home-sessions.test.ts
index 67da3e55..8b3ffd96 100644
--- a/test/home-sessions.test.ts
+++ b/test/home-sessions.test.ts
@@ -155,7 +155,7 @@ describe('home sessions column: model', () => {
     ]);
   });
 
-  it('labels a row with its case and a short backend badge', () => {
+  it('labels a row with its case; an agent CLI carries its mode for the logo', () => {
     const app = loadHomeSessionsApp({
       sessions: sessionMap([{ id: 'a', name: 'w1-claudeman', mode: 'codex' }]),
       sessionOrder: ['a'],
@@ -164,33 +164,39 @@ describe('home sessions column: model', () => {
 
     const [row] = app.buildHomeSessionRows();
     expect(row.caseName).toBe('claudeman');
-    expect(row.modeBadge).toBe('cx');
-    // claude is the default backend and gets no badge — the strip does the same.
+    // Agent CLIs show their logo (drawn from row.mode), not a text badge, the
+    // same as the strip; test/tab-harness-logo.test.ts pins the markup.
+    expect(row.mode).toBe('codex');
+    expect(row.modeBadge).toBe('');
     const plain = loadHomeSessionsApp({
       sessions: sessionMap([{ id: 'a', mode: 'claude' }]),
       sessionOrder: ['a'],
       cases: CASES,
     });
-    expect(plain.buildHomeSessionRows()[0].modeBadge).toBe('');
+    expect(plain.buildHomeSessionRows()[0].mode).toBe('claude');
   });
 
-  it('badges every non-claude backend, so a new run mode cannot read as claude here', () => {
-    // The badge map is a per-mode lookup with a '' fallback, so a mode missing from it
-    // is indistinguishable from claude in this rail while the tab strip badges it fine.
+  it('gives only the shell a text badge, and every backend its own mode', () => {
     for (const [mode, badge] of [
       ['shell', 'sh'],
-      ['opencode', 'oc'],
-      ['codex', 'cx'],
-      ['gemini', 'gm'],
-      ['antigravity', 'ag'],
-      ['pi', 'pi'],
+      ['claude', ''],
+      ['opencode', ''],
+      ['codex', ''],
+      ['gemini', ''],
+      ['antigravity', ''],
+      ['pi', ''],
+      ['grok', ''],
+      ['deepseek', ''],
+      ['omp', ''],
     ] as const) {
       const app = loadHomeSessionsApp({
         sessions: sessionMap([{ id: 'a', mode }]),
         sessionOrder: ['a'],
         cases: CASES,
       });
-      expect(app.buildHomeSessionRows()[0].modeBadge).toBe(badge);
+      const [row] = app.buildHomeSessionRows();
+      expect(row.modeBadge, mode).toBe(badge);
+      expect(row.mode, mode).toBe(mode);
     }
   });
 });
diff --git a/test/tab-harness-logo.test.ts b/test/tab-harness-logo.test.ts
new file mode 100644
index 00000000..273206fa
--- /dev/null
+++ b/test/tab-harness-logo.test.ts
@@ -0,0 +1,181 @@
+/**
+ * @fileoverview Every agent tab shows its harness logo (claude included).
+ *
+ * What is pinned, and why it matters:
+ *  - A session tab draws its CLI through PR #532's `run-mode-dot <id>` slot,
+ *    the mode id as data, so the tab, the tile and split headers and the Run
+ *    menus all draw the same mark. Claude used to get nothing at all and the
+ *    other CLIs a two-letter text pill, so a claude tab read as "no harness".
+ *  - The shell is not an agent and keeps its SH pill.
+ *  - A CLI added through ~/.codeman/clis.json still gets the slot (its plain
+ *    dot), and a mode string never reaches the markup unescaped.
+ *  - Every stock agent CLI has a logo rule, so a new stock CLI cannot ship a
+ *    tab that shows only the plain dot.
+ *  - The desktop home rail mirrors the strip.
+ *
+ * The real modules run INSIDE a JSDOM window (runScripts: 'outside-only').
+ *
+ * Port: none.
+ */
+
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { JSDOM } from 'jsdom';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { STOCK_CLIS } from '../src/config/cli-registry/stock.js';
+
+const PUBLIC = join(process.cwd(), 'src/web/public');
+const read = (name: string) => readFileSync(join(PUBLIC, name), 'utf8');
+
+describe('session tab harness logo (app.js)', () => {
+  let CodemanApp: { prototype: Record<string, any> };
+  let window: any;
+  let document: Document;
+
+  beforeAll(async () => {
+    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+      url: 'https://localhost/',
+      runScripts: 'outside-only',
+    });
+    if (dom.window.document.readyState !== 'complete') {
+      await new Promise((resolve) => dom.window.addEventListener('load', resolve));
+    }
+    window = dom.window;
+    document = window.document;
+    window.setInterval = () => 0;
+    window.requestAnimationFrame = () => 0;
+    window.CSS = { escape: (value: string) => value };
+    window.eval(
+      'var MobileDetection = { isTouchDevice: () => false, getDeviceType: () => "desktop" }, KeyboardHandler = {}, ' +
+        'SwipeHandler = {}, VoiceInput = {}, DeepgramProvider = {}, NotificationManager = function(){};\n' +
+        read('constants.js') +
+        '\n' +
+        read('tab-layout-browser.js') +
+        '\n' +
+        read('app.js') +
+        '\n' +
+        read('mobile-overview.js') +
+        '\n' +
+        read('home-sessions.js') +
+        '\n' +
+        read('webview-tabs.js') +
+        '\n;window.__HarnessCodemanApp = CodemanApp;'
+    );
+    CodemanApp = window.__HarnessCodemanApp;
+  });
+
+  function makeApp(sessions: Array<Record<string, unknown>>) {
+    const app = Object.create(CodemanApp.prototype) as Record<string, any>;
+    const root = document.documentElement;
+    root.setAttribute('data-tab-orientation', 'horizontal');
+    root.dataset.tabRailSort = 'activity';
+    root.dataset.tabArrangement = 'classic';
+    document.body.innerHTML = '<div class="session-tabs-host"><div id="sessionTabs" class="session-tabs"></div></div>';
+    app.$ = (id: string) => document.getElementById(id);
+    app.cases = [];
+    app.sessions = new Map(sessions.map((s) => [s.id as string, { status: 'idle', workingDir: '/c/x', ...s }]));
+    app.sessionOrder = sessions.map((s) => s.id as string);
+    app.pendingHooks = new Map();
+    app.webviews = new Map();
+    app.webviewOrder = [];
+    app.activeSessionId = sessions[0]?.id ?? null;
+    app.activeWebviewId = null;
+    app.tabLayout = null;
+    app.collapsedTabGroupIds = new Set();
+    app._hiddenTabGroupByRef = new Map();
+    app._lastTabGroupStructureKey = null;
+    app._inlineRenameActive = false;
+    app.tabAlerts = new Map();
+    app.terminalLoadStates = new Map();
+    app.minimizedSubagents = new Map();
+    app.hasTabDetachOverride = () => false;
+    app.renderSubagentTabBadge = () => '';
+    app.cancelHideSubagentDropdown = () => {};
+    app.updateTabOverflowMode = () => {};
+    app.updateConnectionLines = vi.fn();
+    app._applyTabEntrances = () => {};
+    app._scrollActiveTabIntoView = () => {};
+    app._refreshMobileOverviewIfVisible = () => {};
+    app._refreshHomeSessionsIfVisible = () => {};
+    app.applySidebarFilter = () => {};
+    return app;
+  }
+
+  const tab = (id: string) => document.querySelector<HTMLElement>(`.session-tab[data-id="${id}"]`)!;
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('draws the logo slot for every agent CLI, claude included, and no text pill', () => {
+    const agents = STOCK_CLIS.map((c) => c.id).filter((id) => id !== 'shell');
+    makeApp(agents.map((mode) => ({ id: `s-${mode}`, name: `w1-${mode}`, mode })))._fullRenderSessionTabs();
+    for (const mode of agents) {
+      const logo = tab(`s-${mode}`).querySelector('.tab-name-row > .tab-harness');
+      expect(logo, mode).not.toBeNull();
+      expect(logo!.className, mode).toBe(`tab-harness run-mode-dot ${mode}`);
+      expect(logo!.getAttribute('aria-hidden'), mode).toBe('true');
+      expect(logo!.textContent, mode).toBe('');
+      expect(tab(`s-${mode}`).querySelector('.tab-mode'), mode).toBeNull();
+    }
+  });
+
+  it('treats a session with no mode as claude', () => {
+    makeApp([{ id: 'legacy', name: 'w1-legacy' }])._fullRenderSessionTabs();
+    expect(tab('legacy').querySelector('.tab-harness')?.className).toBe('tab-harness run-mode-dot claude');
+  });
+
+  it('keeps the SH pill for a shell, with no logo slot', () => {
+    makeApp([{ id: 'sh', name: 'w1-shell', mode: 'shell' }])._fullRenderSessionTabs();
+    const pill = tab('sh').querySelector('.tab-mode.shell');
+    expect(pill?.textContent).toBe('sh');
+    expect(tab('sh').querySelector('.tab-harness')).toBeNull();
+  });
+
+  it('gives a registry-added CLI the slot and escapes the mode string', () => {
+    makeApp([
+      { id: 'custom', name: 'w1-custom', mode: 'mycli' },
+      { id: 'hostile', name: 'w1-hostile', mode: 'x"><img src=x onerror=1>' },
+    ])._fullRenderSessionTabs();
+    expect(tab('custom').querySelector('.tab-harness')?.className).toBe('tab-harness run-mode-dot mycli');
+    expect(tab('hostile').querySelector('img')).toBeNull();
+    expect(tab('hostile').querySelectorAll('.tab-name-row > .tab-harness')).toHaveLength(1);
+  });
+
+  it('mirrors the strip on the desktop home rail', () => {
+    const app = makeApp([
+      { id: 'c', name: 'w1-c', mode: 'claude' },
+      { id: 'd', name: 'w1-d', mode: 'deepseek' },
+      { id: 'sh', name: 'w1-sh', mode: 'shell' },
+    ]);
+    app._mobileOverviewCaseFor = () => null;
+    app._mobileOverviewState = () => 'idle';
+    const rows = app.buildHomeSessionRows();
+    const titleOf = (id: string) =>
+      app._buildHomeSessionRow(rows.find((r: any) => r.id === id)).querySelector('.home-sessions-row-title');
+    expect(titleOf('c').querySelector('.home-sessions-harness')?.className).toBe(
+      'home-sessions-harness run-mode-dot claude'
+    );
+    expect(titleOf('c').querySelector('.home-sessions-mode')).toBeNull();
+    expect(titleOf('d').querySelector('.home-sessions-harness')?.className).toBe(
+      'home-sessions-harness run-mode-dot deepseek'
+    );
+    expect(titleOf('sh').querySelector('.home-sessions-mode')?.textContent).toBe('sh');
+    expect(titleOf('sh').querySelector('.home-sessions-harness')).toBeNull();
+  });
+});
+
+describe('harness logo rules (styles.css)', () => {
+  const css = read('styles.css');
+
+  it('has a logo for every stock agent CLI', () => {
+    for (const { id } of STOCK_CLIS) {
+      expect(css, id).toMatch(new RegExp(`\\.run-mode-dot\\.${id} \\{ --run-mode-logo: url\\(`));
+    }
+  });
+
+  it('no longer colours a per-CLI tab pill, and hides the logo while renaming', () => {
+    expect(css).not.toMatch(/\.session-tab \.tab-mode\.(?!shell\b)[a-z]+/);
+    expect(css).toMatch(/\.tab-mode,\s*\.tab-harness,\s*\.tab-exited-badge,/);
+  });
+});