From 62b0039dc5f61b118cc40a8e823fac097252c4c9 Mon Sep 17 00:00:00 2001 From: Codeman maintainer Date: Fri, 14 Aug 2026 10:03:10 +0200 Subject: [PATCH] fix(ui): draw session lineage lines in blue for contrast Follow-up to #285. Violet sits close to the terminal's own dim foreground, so the arcs lost contrast exactly where they cross text, which is most of their length. Blue reads at a glance on the dark skins and on the light ones. Colour still comes from a token every skin block already defines and tunes for its own background (--session-blue instead of --session-purple), so it stays one rule for all seven skins with no per-skin override, and the two blues are not even the same: --session-blue is per palette while the subagent rule hardcodes #3b82f6. Hue no longer separates this layer from the subagent lines, so the separation now rests entirely on shape (a lineage arc hangs under the strip and never reaches a window), weight and dash pattern. Noted in the rule. CSS only: no geometry, no markup, no settings. Co-Authored-By: Claude Opus 5 (1M context) --- docs/session-lineage-lines-plan.md | 10 +++++++--- src/web/public/styles.css | 23 ++++++++++++++++------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/docs/session-lineage-lines-plan.md b/docs/session-lineage-lines-plan.md index bb5c6950..fce5adc4 100644 --- a/docs/session-lineage-lines-plan.md +++ b/docs/session-lineage-lines-plan.md @@ -158,10 +158,14 @@ callers are cheap. Needed: ### 4.5 Styling -`.connection-line.lineage-line`: violet stroke from a `--lineage-line` token, +`.connection-line.lineage-line`: blue stroke from the per-skin `--session-blue` token +(violet until 2026-08-14, changed because it lost contrast against the terminal's own +dim foreground the moment the arc crossed text), `stroke-width: 2.5`, `dasharray 5 5`, `opacity: .72` (`.95` while the child works), -softer than the subagent lines so the two layers read as different things, but the -contrast comes from a **second, wider glow** rather than more weight, because the first +softer than the subagent lines so the two layers still read as different things now that +hue no longer separates them (shape does most of that work: a lineage arc hangs under the +strip and never reaches a window), but the contrast against the terminal comes from a +**second, wider glow** rather than more weight, because the first cut (2px / `4 4` / `.55` / one 5px glow) disappeared into terminal text on a real 1080p desktop. `lineage-flow` marches by two dash cycles, so it moves with the dash array (`5 5` → `-20`). Trap to respect: the skin block nests under diff --git a/src/web/public/styles.css b/src/web/public/styles.css index e518c4c8..4d9795df 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -9329,11 +9329,20 @@ kbd { Deliberately quieter and thinner than the subagent lines above so the two layers read as different things in the same SVG. - Colour comes from --session-purple, which EVERY skin block already defines and + Colour comes from --session-blue, which EVERY skin block already defines and already tunes for its own background, so one rule covers all seven (the four light skins included). Do not add a per-skin `.lineage-line` override inside the html:not([data-skin="og"]) block: a bare class rule in there resolves to (0,2,1) - and would outrank this one from a surprising place. */ + and would outrank this one from a surprising place. + + ⚠ BLUE, NOT THE VIOLET THIS SHIPPED WITH (owner call, 2026-08-14: "make these + lines in blue that they are better visible"). Violet sits close to the terminal's + own dim foreground and lost contrast the moment it crossed text. Hue therefore no + longer separates this layer from the subagent lines, so the separation rests + entirely on SHAPE (this one hangs under the strip and never reaches a window), + weight and dash: keep those differences intact. Per skin the two are not even the + same blue, since --session-blue is tuned per palette while the subagent rule + hardcodes #3b82f6. */ /* ⚠ QUIETER THAN THE SUBAGENT LINES, NOT INVISIBLE. The first cut ran 2px at 0.55 with a single 5px glow, which reads on a design mock and disappears on a real 1080p desktop: a faint thread over terminal text, exactly what it is drawn on @@ -9343,13 +9352,13 @@ kbd { (4 4 on a 2.5px line reads as a dotted smudge), and `lineage-flow` marches by exactly two dash cycles, so it has to move with them. */ .connection-line.lineage-line { - stroke: var(--session-purple, #a98fe0); + stroke: var(--session-blue, #2b8fd9); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linecap: round; opacity: 0.72; - filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px var(--session-purple, #a98fe0)) - drop-shadow(0 0 11px var(--session-purple, #a98fe0)); + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px var(--session-blue, #2b8fd9)) + drop-shadow(0 0 11px var(--session-blue, #2b8fd9)); } /* ⚠ OUTSIDE the reduced-motion block below on purpose. A working child is the case @@ -9365,9 +9374,9 @@ kbd { } .lineage-line-dot { - fill: var(--session-purple, #a98fe0); + fill: var(--session-blue, #2b8fd9); opacity: 0.85; - filter: drop-shadow(0 0 4px var(--session-purple, #a98fe0)) drop-shadow(0 0 9px var(--session-purple, #a98fe0)); + filter: drop-shadow(0 0 4px var(--session-blue, #2b8fd9)) drop-shadow(0 0 9px var(--session-blue, #2b8fd9)); } /* The child end marches while that worker is actually working, so the line