Merge pull request 'docs(maestro): replace the sidebar's activity dot with a rail' (#130) from indicators into main

Reviewed-on: #130

web/src/styles.css

@@ -1393,12 +1393,34 @@ input.leaf-rename:focus {
   color: var(--danger);
 }
 
-.activity-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
+/* docs/SIDEBAR.md: the activity rail replaces the old inline dot. It sits
+   inside the row's own indent gutter (`.tree-leaf` is already positioned),
+   at a `left` set inline per nesting depth — see `activityRailMarkup` in
+   catalog.ts. Idle stays solid and still on purpose: motion is reserved for
+   states that need attention (DESIGN.md's "living signals" rule). */
+.activity-rail {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 5px;
+  border-radius: 2px;
   background: currentColor;
-  flex: 0 0 auto;
+}
+
+.activity-rail[data-activity="active"] {
+  color: var(--live);
+  animation: pulse 2.4s var(--ease-out) infinite;
+}
+.activity-rail[data-activity="idle"] {
+  color: var(--border-strong);
+}
+.activity-rail[data-activity="awaiting-input"] {
+  color: var(--warn);
+  animation: blink 1.2s steps(1) infinite;
+}
+.activity-rail[data-activity="error"] {
+  color: var(--danger);
+  animation: rail-flash 1.4s ease-out infinite;
 }
 
 .activity-duration {
@@ -2593,6 +2615,25 @@ input.leaf-rename:focus {
   }
 }
 
+@keyframes rail-flash {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.25;
+  }
+  30% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+}
+
 /* ---------- responsive ---------- */
 
 @media (max-width: 520px) {
@@ -2642,7 +2683,8 @@ input.leaf-rename:focus {
   }
   .brand-dot,
   [data-status="running"] .leaf-status::before,
-  .tally-live::before {
+  .tally-live::before,
+  .activity-rail {
     animation: none;
   }
 }