fix(css): tablet By-case strip, compositor-only needs pulse, phone chip height

Tab Layout "By case" at tablet widths (600 to 767px, getDeviceType's
'tablet'): the case boxes could shrink in the tablet's one-row scrolling
strip, so they squeezed and wrapped their tabs inside themselves and every
tab past a box's first line was clipped under the fixed 48px header. The
boxes now dissolve into the chip row as they already do on phones, which
keeps the tablet's own 40px chip geometry. The rule sits in its own
600 to 767px block, not the 768px tablet block, so the desktop path at
768px and up (boxes keep their width, the strip wraps box by box) is
untouched.

Needs-you tile pulse: the glow animated box-shadow on the tile itself, so
the whole tile (DOM-rendered terminal rows included, the whole stage when
zoomed) was repainted every frame for as long as a prompt waited. The tile
keeps its red border; the glow is now a static inset shadow on a
.tile--needs::after overlay (inset because .tile is overflow: hidden and
clips an outer one, z-index 3 above .tile-attach, pointer-events none)
and only its opacity animates. The entering-and-needs animation shorthand
is gone, since it would now blink the whole tile's opacity, and reduced
motion keeps the static ring and hides the overlay.

Welcome chips: the phone block set 36px, below the 40px that styles.css
gives touch screens, and it wins on every phone, so phones got shorter
chips than tablets. It now restates 40px.

Tests: the tablet widths and the 768px boundary in tab-clusters, the
opacity-only pulse overlay in tile-grid-motion, and the phone chip height
in run-mode-ui; each fails against the previous CSS.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

test/tab-clusters.test.ts

@@ -24,6 +24,7 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import vm from 'node:vm';
 import { JSDOM } from 'jsdom';
+import postcss, { type AtRule, type Rule } from 'postcss';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const PUBLIC = join(process.cwd(), 'src/web/public');
@@ -350,4 +351,79 @@ describe('tab layouts by case and ledger (static)', () => {
     );
     expect(mobileCss).toMatch(/:where\(\.header\) \.tab-cluster-label \{\s*display: none;/);
   });
+
+  // The width range a mobile.css rule applies in: the file's own link media
+  // (max-width: 1023px) narrowed by every @media around the rule. `other` marks
+  // a rule that also needs a non-width feature, which therefore cannot be
+  // counted on to apply.
+  const mobileRuleWidths = (rule: Rule) => {
+    let min = 0;
+    let max = 1023;
+    let other = false;
+    for (let node = rule.parent; node && node.type !== 'root'; node = node.parent) {
+      if (node.type !== 'atrule') continue;
+      const at = node as AtRule;
+      if (at.name !== 'media') {
+        other = true;
+        continue;
+      }
+      for (const part of at.params.split(/\s+and\s+/)) {
+        const m = part.trim().match(/^\((min|max)-width:\s*(\d+)px\)$/);
+        if (!m) other = true;
+        else if (m[1] === 'min') min = Math.max(min, Number(m[2]));
+        else max = Math.min(max, Number(m[2]));
+      }
+    }
+    return { min, max, other };
+  };
+  const mobileClusterRules = () => {
+    const rules: Array<{
+      selector: string;
+      decls: Record<string, string>;
+      widths: ReturnType<typeof mobileRuleWidths>;
+    }> = [];
+    postcss.parse(mobileCss).walkRules((rule) => {
+      if (!rule.selector.includes('tab-cluster')) return;
+      const decls: Record<string, string> = {};
+      rule.walkDecls((d) => {
+        decls[d.prop] = d.value;
+      });
+      rules.push({ selector: rule.selector, decls, widths: mobileRuleWidths(rule) });
+    });
+    return rules;
+  };
+
+  it('dissolves the boxes on tablet widths too, where the strip is one scrolling row (600 to 767px)', () => {
+    // getDeviceType() says 'tablet' from 600 to 767px, and updateTabOverflowMode()
+    // never wraps the strip there. A box allowed to shrink in that one-row strip
+    // squeezed and wrapped its tabs inside itself, and every tab past a box's
+    // first line was clipped under the 48px fixed header, unreachable.
+    const rules = mobileClusterRules();
+    const box = '.session-tabs-host > .session-tabs.tabs-clusters > .tab-cluster';
+    for (const width of [360, 599, 600, 700, 744, 767]) {
+      const applies = (r: (typeof rules)[number]) => !r.widths.other && r.widths.min <= width && width <= r.widths.max;
+      expect(
+        rules.some((r) => applies(r) && r.selector === `:where(.header) ${box}` && r.decls.display === 'contents'),
+        `box dissolved at ${width}px`
+      ).toBe(true);
+      expect(
+        rules.some(
+          (r) => applies(r) && r.selector === ':where(.header) .tab-cluster-label' && r.decls.display === 'none'
+        ),
+        `label hidden at ${width}px`
+      ).toBe(true);
+    }
+  });
+
+  it('leaves the desktop strip (768px and up) to styles.css: no mobile.css cluster rule reaches it', () => {
+    // mobile.css is linked up to 1023px, and from 768 getDeviceType() says
+    // 'desktop': the boxes keep their width there and the strip wraps box by
+    // box. The tablet block of mobile.css runs to 768 inclusive, so a cluster
+    // rule put inside it would dissolve the boxes at exactly 768.
+    const rules = mobileClusterRules();
+    expect(rules.length).toBeGreaterThan(0);
+    for (const r of rules) {
+      expect(r.widths.max, `${r.selector} stops below 768px`).toBeLessThan(768);
+    }
+  });
 });