From f3a5cad789810c46dee8cb42c22d49fae7629cfb Mon Sep 17 00:00:00 2001
From: Miguel Palhas <mpalhas@gmail.com>
Date: Thu, 10 Sep 2026 21:53:18 +0100
Subject: [PATCH] feat(maestro): widen sidebar activity rail from 5px to 7px

Makes the coloured state bars more visible at a glance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/SIDEBAR.md                             | 2 +-
 web/src/components/sidebar/ActivityRail.tsx | 4 ++--
 web/src/styles.css                          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/SIDEBAR.md b/docs/SIDEBAR.md
index 4524d2a..8df077a 100644
--- a/docs/SIDEBAR.md
+++ b/docs/SIDEBAR.md
@@ -70,7 +70,7 @@ command. `<duration>` follows in the rail's colour when shown. There is no
 state word and no second badge: the rail exists so the state is still legible
 when a row is dimmed or the terminal renders the duration in the default fg.
 
-In the **web client** the rail is a 5px bar pinned to the row's own left
+In the **web client** the rail is a 7px bar pinned to the row's own left
 edge, square corners, spanning the full card height edge to edge — it
 shifts outward with nesting depth along with the row's own padding, since
 it is positioned relative to the row. It carries motion only for states that
diff --git a/web/src/components/sidebar/ActivityRail.tsx b/web/src/components/sidebar/ActivityRail.tsx
index 6db0a59..9b54873 100644
--- a/web/src/components/sidebar/ActivityRail.tsx
+++ b/web/src/components/sidebar/ActivityRail.tsx
@@ -1,4 +1,4 @@
-// docs/SIDEBAR.md: a 5px bar pinned to the row's own left edge, square
+// docs/SIDEBAR.md: a 7px bar pinned to the row's own left edge, square
 // corners, full card height. It paints for every card, Idle included, and it
 // carries the accessible name of the state so status is never colour-only.
 
@@ -37,7 +37,7 @@ export function ActivityRail({ activity }: { activity: ActivityState | string |
   const word = STATE_WORDS[slug] ?? STATE_WORDS.idle;
   return (
     <span
-      className={`absolute left-0 top-0 bottom-0 w-[5px] ${RAIL_CLASS[slug] ?? RAIL_CLASS.idle}`}
+      className={`absolute left-0 top-0 bottom-0 w-[7px] ${RAIL_CLASS[slug] ?? RAIL_CLASS.idle}`}
       data-activity={slug}
       role="img"
       title={word}
diff --git a/web/src/styles.css b/web/src/styles.css
index 7fab52f..7b8fc28 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1623,7 +1623,7 @@ input.leaf-rename:focus {
   top: 0;
   bottom: 0;
   left: 0;
-  width: 5px;
+  width: 7px;
   background: currentColor;
 }