fix(ui): make session lineage lines read as arcs, not straight threads

The lines that join a tab to the workers its codeman skill spawned were
drawn with numbers tuned against two tabs sitting side by side, and they
degraded in exactly the two situations the feature is actually used in.

1. A spawned worker is appended to the END of the strip, so the real span
   between a lead and its worker is 800-1500px. With the dip clamped at
   44px that is a 33px sag: the arc reads as a straight line drawn across
   the terminal instead of a bracket hanging under the strip. The dip now
   grows at 0.085/px and clamps at 104.

2. When the desktop strip wraps (tabs-two-rows / tabs-auto-wrap), a parent
   on row 1 and its child on row 2 are ~14px apart, and the cross-row
   branch drew parent-bottom to child-TOP: a flat line hidden inside the
   row gap, with siblings overprinting each other. Both ends now anchor on
   the tab BOTTOM with the control points below the LOWER row, so a wrapped
   pair gets the same bracket a flat strip gets. That deletes the branch:
   one shape covers both.

Visibility, at 1:1 rather than in a zoomed mockup: 2 -> 2.5px stroke,
4 4 -> 5 5 dashes (lineage-flow moves with them, -16 -> -20), opacity
.55 -> .72, and a second wider glow so the contrast comes from the halo
rather than from more weight, keeping the line under the subagent lines'
3px. A working child is bright (.95) outside the reduced-motion block, so
turning motion off no longer also dims every worker's arc. Sibling nesting
6 -> 8px and the direction dot 3 -> 3.5px to match the heavier stroke.

Verified at 1:1 in a harness driving the real styles.css and the real
computeLineagePath over three layouts (adjacent workers, workers at the
far end of a full strip, wrapped two-row strip) on a dark and a light
skin. test/session-lineage-lines.test.ts pins both regressions.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-08-14 00:28:04 +02:00
parent 4bbe2b7ff6
commit a415948736
7 changed files with 146 additions and 69 deletions
+32 -13
View File
@@ -9257,31 +9257,46 @@ kbd {
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. */
/* ⚠ 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
top of. The weight stays UNDER the subagent lines' 3px so the two layers still
separate, and the second, wider glow is what buys the contrast instead: it lifts
the line off the terminal without thickening it. Dashes scale with the stroke
(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-width: 2;
stroke-dasharray: 4 4;
stroke-width: 2.5;
stroke-dasharray: 5 5;
stroke-linecap: round;
opacity: 0.55;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px var(--session-purple, #a98fe0));
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));
}
/* ⚠ OUTSIDE the reduced-motion block below on purpose. A working child is the case
the line exists to signal, and pairing the brightness with the marching dashes
left every worker's arc at the resting 0.72 for anyone who turns motion off. */
.connection-line.lineage-line--working {
opacity: 0.95;
}
.connection-line.lineage-line:hover {
opacity: 0.9;
stroke-width: 2.5;
opacity: 1;
stroke-width: 3;
}
.lineage-line-dot {
fill: var(--session-purple, #a98fe0);
opacity: 0.7;
filter: drop-shadow(0 0 4px var(--session-purple, #a98fe0));
opacity: 0.85;
filter: drop-shadow(0 0 4px var(--session-purple, #a98fe0)) drop-shadow(0 0 9px var(--session-purple, #a98fe0));
}
/* The child end marches while that worker is actually working, so the line
itself carries the signal. Motion is opt-out-able at the OS level. */
@media (prefers-reduced-motion: no-preference) {
.connection-line.lineage-line--working {
opacity: 0.85;
animation: lineage-flow 1.1s linear infinite;
}
@@ -9291,20 +9306,24 @@ kbd {
}
}
/* Two full dash cycles, so the march loops seamlessly. Tied to `stroke-dasharray`
above: at `5 5` the cycle is 10px, so this is -20 rather than the -16 that
matched the old `4 4`. Leaving them out of step makes the dashes jump once per
iteration. */
@keyframes lineage-flow {
to {
stroke-dashoffset: -16;
stroke-dashoffset: -20;
}
}
@keyframes lineage-dot-pulse {
0%, 100% {
opacity: 0.6;
r: 3;
opacity: 0.75;
r: 3.5;
}
50% {
opacity: 1;
r: 4;
r: 4.5;
}
}