These SVG review artifacts demonstrate the two user-visible behaviours covered by PR #9271. They are sanitized and do not include internal Paperclip issue identifiers.
visible-window-stats.svg: summary stats before and after horizontal scroll.kickoff-attribution.svg: stale kickoff chip before/after behaviour.| <svg xmlns="http://www.w3.org/2000/svg" width="1320" height="760" viewBox="0 0 1320 760"> | |
| <style> | |
| .bg { fill: #f7f8fa; } | |
| .panel { fill: #ffffff; stroke: #d8dee8; stroke-width: 1; } | |
| .muted { fill: #64748b; font: 18px Inter, Arial, sans-serif; } | |
| .title { fill: #111827; font: 700 26px Inter, Arial, sans-serif; } | |
| .label { fill: #64748b; font: 15px Inter, Arial, sans-serif; } | |
| .value { fill: #111827; font: 700 28px Inter, Arial, sans-serif; } | |
| .axis { stroke: #cbd5e1; stroke-width: 2; } | |
| .run1 { fill: #5b9bf6; } | |
| .run2 { fill: #f4b740; } | |
| .window { fill: rgba(37, 99, 235, 0.10); stroke: #2563eb; stroke-width: 3; } | |
| .note { fill: #334155; font: 17px Inter, Arial, sans-serif; } | |
| </style> | |
| <rect class="bg" width="1320" height="760" rx="0" /> | |
| <text x="60" y="64" class="title">Work timeline visible-window stats</text> | |
| <text x="60" y="98" class="muted">Same two-run fixture, same page controls. Only the horizontal visible window changes.</text> | |
| <rect x="60" y="140" width="560" height="500" rx="8" class="panel"/> | |
| <text x="92" y="186" class="title">Initial viewport</text> | |
| <text x="92" y="216" class="muted">Visible range: 10:00-11:00</text> | |
| <g transform="translate(92 250)"> | |
| <g><text class="label" x="0" y="0">Runs</text><text class="value" x="0" y="38">1</text></g> | |
| <g transform="translate(130 0)"><text class="label" x="0" y="0">Agents</text><text class="value" x="0" y="38">1</text></g> | |
| <g transform="translate(260 0)"><text class="label" x="0" y="0">Run time</text><text class="value" x="0" y="38">30m</text></g> | |
| <g transform="translate(410 0)"><text class="label" x="0" y="0">Tokens</text><text class="value" x="0" y="38">1.5K</text></g> | |
| </g> | |
| <g transform="translate(92 370)"> | |
| <line x1="0" y1="90" x2="460" y2="90" class="axis"/> | |
| <text x="0" y="126" class="label">10:00</text> | |
| <text x="218" y="126" class="label">11:00</text> | |
| <text x="432" y="126" class="label">12:00</text> | |
| <rect x="0" y="20" width="230" height="110" class="window" rx="4"/> | |
| <rect x="0" y="58" width="115" height="28" class="run1" rx="5"/> | |
| <rect x="230" y="58" width="58" height="28" class="run2" rx="5"/> | |
| <text x="8" y="51" class="label">Run A overlaps</text> | |
| <text x="238" y="51" class="label">Run B starts at boundary</text> | |
| </g> | |
| <rect x="700" y="140" width="560" height="500" rx="8" class="panel"/> | |
| <text x="732" y="186" class="title">Scrolled viewport</text> | |
| <text x="732" y="216" class="muted">Visible range: 10:15-11:05</text> | |
| <g transform="translate(732 250)"> | |
| <g><text class="label" x="0" y="0">Runs</text><text class="value" x="0" y="38">2</text></g> | |
| <g transform="translate(130 0)"><text class="label" x="0" y="0">Agents</text><text class="value" x="0" y="38">2</text></g> | |
| <g transform="translate(260 0)"><text class="label" x="0" y="0">Run time</text><text class="value" x="0" y="38">20m</text></g> | |
| <g transform="translate(410 0)"><text class="label" x="0" y="0">Tokens</text><text class="value" x="0" y="38">1.25K</text></g> | |
| </g> | |
| <g transform="translate(732 370)"> | |
| <line x1="0" y1="90" x2="460" y2="90" class="axis"/> | |
| <text x="0" y="126" class="label">10:00</text> | |
| <text x="218" y="126" class="label">11:00</text> | |
| <text x="432" y="126" class="label">12:00</text> | |
| <rect x="58" y="20" width="192" height="110" class="window" rx="4"/> | |
| <rect x="0" y="58" width="115" height="28" class="run1" rx="5"/> | |
| <rect x="230" y="58" width="58" height="28" class="run2" rx="5"/> | |
| <text x="8" y="51" class="label">15m of Run A</text> | |
| <text x="238" y="51" class="label">5m of Run B</text> | |
| </g> | |
| <text x="60" y="704" class="note">Expected result: summary values are computed from visible overlap only, so runs/agents/time/tokens change as the user scrolls.</text> | |
| </svg> |
