fix(perf): bulletproof Linux gate via vite-define + kill tab-status-grid wave

claude · claude · commit 521dbf84a809 · 2026-05-07T17:27:23.000+08:00
v2.5.0 gated the SMIL steam morph on `navigator.userAgent.includes('linux')`,
but live testing on Ubuntu 26.04 + KDE Plasma Wayland + WebKit 2.52 still
showed coffee-cli + WebKitWebProcess pegging cores — the UA gate didn't
actually fire. WebKit2GTK's UA string is configurable per-distro / per-Tauri-
version and is not a load-bearing signal.

Switch to a build-time constant `__IS_LINUX__` injected by vite via `define`,
resolved to `process.platform === 'linux'` at compile time. Each platform's
installer is built on its own CI runner (ubuntu-22.04 / windows-latest /
macos-13), so the constant is locked into the binary at build time — no
runtime detection, no UA dependency, zero misfire risk.

Also gate the tab-status-grid (the "dynamic island" status indicator on
claude/codex/opencode tabs): 9 dots × 1.2s opacity-loop infinites, each
with a `box-shadow: 0 0 3px` halo. WebKit2GTK + Cairo doesn't promote
small inline elements to compositor layers, so every opacity tick re-rasters
the box-shadow blur on CPU; with N tabs that's 9N indefinite repaints.
Linux now gets a single static 5px colored dot — same idle/working/waiting
color signal (green/orange/blue), zero animation cost.

Win/Mac unaffected — WebView2 (Chromium) and WKWebView (Core Animation)
both auto-promote opacity-animated layers and run them on the GPU
compositor thread, so the wave/snake/ripple stay free.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src-ui/src/components/center/CenterPanel.css b/src-ui/src/components/center/CenterPanel.css
@@ -199,6 +199,25 @@
 .status-waiting .tab-status-dot:nth-child(8) { animation-delay: 0.15s; }
 .status-waiting .tab-status-dot:nth-child(9) { animation-delay: 0.3s; }
 
+/* Linux variant — single static dot, no animation, no box-shadow blur.
+   The 9-dot wave/snake/ripple loops + box-shadow halos peg WebKit2GTK +
+   Cairo (no compositor-thread opacity for non-promoted layers; box-shadow
+   blur re-rasters on CPU each frame). Sized up to 5px so a lone dot reads
+   as deliberate. Color still conveys idle/working/waiting via the status-
+   class background-color rules above; we override box-shadow here to kill
+   the halo. Specificity (0,2,0) matches the status-* rules and source
+   order wins. */
+.tab-status-grid--static {
+  grid-template-columns: 5px;
+  grid-template-rows: 5px;
+}
+.tab-status-grid--static .tab-status-dot {
+  width: 5px;
+  height: 5px;
+  animation: none;
+  box-shadow: none;
+}
+
 /* ─── Terminal Wrapper ─── */
 
 .terminal-wrapper {
diff --git a/src-ui/src/components/center/CenterPanel.tsx b/src-ui/src/components/center/CenterPanel.tsx
@@ -169,7 +169,7 @@ const SvgInstaller = () => (
               brand icon and together they pegged WebKit + coffee-cli at
               ~1.2 cores idle on Wayland (verified live via SSH /proc
               sampling). Static `d` on Linux = no steam drift, full glyph. */}
-          {!navigator.userAgent.toLowerCase().includes('linux') && (
+          {!__IS_LINUX__ && (
             <animate
               attributeName="d"
               dur="3s"
@@ -1141,8 +1141,17 @@ export function CenterPanel() {
                     session.tool === 'vibeid' || session.tool === 'insights_prerun'
                       ? 'working'
                       : (session.agentStatus === 'wait_input' ? 'waiting' : session.agentStatus ?? 'idle')
-                  }`}>
-                    {Array.from({ length: 9 }, (_, i) => <div key={i} className="tab-status-dot" />)}
+                  }${__IS_LINUX__ ? ' tab-status-grid--static' : ''}`}>
+                    {/* Linux gate — the 9 dot wave/snake/ripple animations are
+                        opacity-loop infinites with box-shadow halos. WebKit2GTK
+                        + Cairo doesn't promote these to compositor layers, so
+                        each frame re-rasters the box-shadow blur on CPU; with
+                        N tabs that's 9N indefinite repaints. Linux gets a
+                        single static colored dot instead — same idle/working/
+                        waiting color signal, zero animation cost. */}
+                    {__IS_LINUX__
+                      ? <div className="tab-status-dot tab-status-dot--solo" />
+                      : Array.from({ length: 9 }, (_, i) => <div key={i} className="tab-status-dot" />)}
                   </div>
                 )}
                 <button
diff --git a/src-ui/src/components/center/ChatReader.tsx b/src-ui/src/components/center/ChatReader.tsx
@@ -239,7 +239,7 @@ export function ChatReader({ sessionId }: { sessionId: string }) {
                       <path fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                         d="M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4">
                         {/* Linux gate — see Explorer.tsx brand-icon for full rationale. */}
-                        {!navigator.userAgent.toLowerCase().includes('linux') && (
+                        {!__IS_LINUX__ && (
                           <animate attributeName="d" dur="3s" repeatCount="indefinite"
                             values="M8 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4;M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4"/>
                         )}
diff --git a/src-ui/src/components/center/DosPlayer.tsx b/src-ui/src/components/center/DosPlayer.tsx
@@ -496,7 +496,7 @@ export function DosPlayer({ sessionId }: { sessionId: string }) {
                     <path fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                       d="M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4">
                       {/* Linux gate — see Explorer.tsx brand-icon for full rationale. */}
-                      {!navigator.userAgent.toLowerCase().includes('linux') && (
+                      {!__IS_LINUX__ && (
                         <animate attributeName="d" dur="3s" repeatCount="indefinite"
                           values="M8 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4;M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4"/>
                       )}
diff --git a/src-ui/src/components/center/TierTerminal.tsx b/src-ui/src/components/center/TierTerminal.tsx
@@ -1103,7 +1103,7 @@ function TierTerminalImpl({
                     <path fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                       d="M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4">
                       {/* Linux gate — see Explorer.tsx brand-icon for full rationale. */}
-                      {!navigator.userAgent.toLowerCase().includes('linux') && (
+                      {!__IS_LINUX__ && (
                         <animate attributeName="d" dur="3s" repeatCount="indefinite"
                           values="M8 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4;M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4"/>
                       )}
diff --git a/src-ui/src/components/left/Explorer.tsx b/src-ui/src/components/left/Explorer.tsx
@@ -1103,7 +1103,7 @@ export function Explorer() {
                     SMIL). Static `d` on Linux means the steam stops drifting
                     upward but the cup glyph itself is fully intact. */}
                 <path fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4">
-                  {!navigator.userAgent.toLowerCase().includes('linux') && (
+                  {!__IS_LINUX__ && (
                     <animate attributeName="d" dur="3s" repeatCount="indefinite" values="M8 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 0c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4;M8 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M12 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4M16 -8c0 2 -2 2 -2 4s2 2 2 4s-2 2 -2 4s2 2 2 4"/>
                   )}
                 </path>
diff --git a/src-ui/src/global.d.ts b/src-ui/src/global.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+// Build-time platform constant injected by vite.config.ts via `define`.
+// True iff the binary was built on a Linux CI runner. Used to gate
+// CPU-expensive WebKit2GTK animations (SMIL path morphs in masks, dot
+// grids with box-shadow opacity loops) that are essentially free on
+// WebView2 / WKWebView but peg cores on TextureMapper + Cairo.
+declare const __IS_LINUX__: boolean;
diff --git a/src-ui/vite.config.ts b/src-ui/vite.config.ts
@@ -12,6 +12,15 @@ export default defineConfig({
   },
   // Allow Tauri IPC
   envPrefix: ['VITE_', 'TAURI_'],
+  // Build-time platform constant. Each platform's installer is built on its
+  // own CI runner (release.yml: ubuntu-22.04 / windows-latest / macos-13),
+  // so process.platform here = the target platform of the binary being
+  // produced. Far more reliable than navigator.userAgent — WebKit2GTK's UA
+  // string is configurable and has been observed to omit "Linux" on some
+  // distro/Tauri-version combos, defeating the runtime gate.
+  define: {
+    __IS_LINUX__: JSON.stringify(process.platform === 'linux'),
+  },
   build: {
     // Tauri supports es2021
     target: ['es2021', 'chrome105', 'safari15'],
