Sync tab breathing across all tabs, add icon-less indicators

Replaced per-tab CSS animations with a single --breathe-phase variable
animated on :root via CSS @Property. All breathing tabs read the same
phase so they pulse perfectly in sync.

Changes:
- icon="none" hides the icon but keeps the background glow
- Breathing only on active state (icon=none), done states get static bg
- 16s ease-in-out cycle for a calm, barely-there pulse
- indicator-breathing CSS class separates animated vs static indicators

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JustHereToHelp

frontend/app/tab/tab.scss

@@ -1,6 +1,28 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+// Animate a shared breathing phase on :root so all indicator tabs pulse in sync.
+// Uses CSS @property for an animatable custom property (Chromium 78+).
+@property --breathe-phase {
+    syntax: "<number>";
+    initial-value: 0;
+    inherits: true;
+}
+
+:root {
+    animation: indicatorBreathePhase 16s ease-in-out infinite;
+}
+
+@keyframes indicatorBreathePhase {
+    0%,
+    100% {
+        --breathe-phase: 0;
+    }
+    50% {
+        --breathe-phase: 1;
+    }
+}
+
 .tab {
     position: absolute;
     width: 130px;
@@ -98,10 +120,19 @@
 
     &.has-indicator {
         .tab-inner {
-            animation: indicatorBreathe 5s ease-in-out infinite;
+            background: rgb(from var(--tab-indicator-color) r g b / 0.15);
+        }
+        &.active .tab-inner {
+            background: rgb(from var(--tab-indicator-color) r g b / 0.2);
+        }
+    }
+
+    &.indicator-breathing {
+        .tab-inner {
+            background: rgb(from var(--tab-indicator-color) r g b / calc(0.08 + var(--breathe-phase) * 0.14));
         }
         &.active .tab-inner {
-            animation: indicatorBreatheActive 5s ease-in-out infinite;
+            background: rgb(from var(--tab-indicator-color) r g b / calc(0.12 + var(--breathe-phase) * 0.14));
         }
     }
 
@@ -139,10 +170,16 @@ body:not(.nohover) .tab.dragging {
         background: rgb(from var(--main-text-color) r g b / 0.1);
     }
     &.has-indicator .tab-inner {
-        animation: indicatorBreathe 5s ease-in-out infinite;
+        background: rgb(from var(--tab-indicator-color) r g b / 0.15);
     }
     &.has-indicator.active .tab-inner {
-        animation: indicatorBreatheActive 5s ease-in-out infinite;
+        background: rgb(from var(--tab-indicator-color) r g b / 0.2);
+    }
+    &.indicator-breathing .tab-inner {
+        background: rgb(from var(--tab-indicator-color) r g b / calc(0.08 + var(--breathe-phase) * 0.14));
+    }
+    &.indicator-breathing.active .tab-inner {
+        background: rgb(from var(--tab-indicator-color) r g b / calc(0.12 + var(--breathe-phase) * 0.14));
     }
     .close {
         visibility: visible;
@@ -157,26 +194,6 @@ body.nohover .tab.active .close {
     visibility: visible;
 }
 
-@keyframes indicatorBreathe {
-    0%,
-    100% {
-        background: rgb(from var(--tab-indicator-color) r g b / 0.12);
-    }
-    50% {
-        background: rgb(from var(--tab-indicator-color) r g b / 0.18);
-    }
-}
-
-@keyframes indicatorBreatheActive {
-    0%,
-    100% {
-        background: rgb(from var(--tab-indicator-color) r g b / 0.16);
-    }
-    50% {
-        background: rgb(from var(--tab-indicator-color) r g b / 0.22);
-    }
-}
-
 @keyframes expandWidthAndFadeIn {
     from {
         width: var(--initial-tab-width);

frontend/app/tab/tab.tsx

@@ -225,6 +225,7 @@ const Tab = memo(
                         "before-active": isBeforeActive,
                         "new-tab": isNew,
                         "has-indicator": indicator != null,
+                        "indicator-breathing": indicator != null && indicator.icon === "none",
                     })}
                     style={
                         indicator != null
@@ -248,7 +249,7 @@ const Tab = memo(
                         >
                             {tabData?.name}
                         </div>
-                        {indicator && (
+                        {indicator && indicator.icon !== "none" && (
                             <div
                                 className="tab-indicator pointer-events-none"
                                 style={{ color: indicator.color || "#fbbf24" }}