Interactive kit · grounded in code

Live anchor — 진행 중 밴드

Live anchor — a page-level 진행 중 band on the three live surfacesOwner (2026-09-08): "I can't help but wonder we need visual anchors at the top for the live session pages." Before this, live status was signaled inconsistently across the three screens a player actually watches a live session from: session detail carried TWO signals already (a header dot that only fades in once scrolled past the hero, plus the hero's own inline badge); match board carried NONE; the spectator scorecard only marked it with a small red dot on the LIVE tab pill. Each phone below shows the DECIDED, shipped state: SessionLiveBand (session-strip-ui.tsx) promoted from card scope to PAGE scope — one pinned band, directly under the header on all three — extended with three facts sharing its one row: elapsed time since the first match started (ElapsedClock + elapsed-formatters.ts's formatElapsedDurationKo, which this gave its first real call site), the round currently being played of how many total, and courts currently in play.Decided (2026-09-17): ships as drawn on all three surfaces, pinned only where each screen's own shell already pins content (no new sticky/absolute mechanism anywhere) — nothing else on any of the three screens was removed or altered. The "two slim stacked bands" alternative below was considered and REJECTED.

복식 친선토 7/24 · 양재 시민의숲

진행 중42분2/4라운드코트 3면

일정

LIVE

결과

순위

1코트김민준·이서연 vs 박준호·최지우

3–2 · 2세트

Spectator scorecardDecided

Then: the header stated date+venue as a plain subtitle; the ONLY live signal anywhere on this screen was a small red dot on the LIVE tab pill (hasLive) — easy to miss unless the viewer noticed which pill carried a dot.Decided (2026-09-17): the band is pinned directly above SegmentedTabs (this screen has no ScrollView at this level, so it stays on screen regardless of which tab is open — pinned for free), carrying the same elapsed/round/court facts as the other two surfaces. The LIVE pill's own red dot STAYS — both signals kept, one glance-level (the band) and one tab-level (the dot), not a replacement.Note: a viewer already on the LIVE tab still sees the round/court facts twice — once in the pinned band, once per-match inside that tab's own rows — accepted as a minor repeat, not a drift risk.

복식 친선

진행 중42분2/4라운드코트 3면

6/10

양재 시민의숲

📅7/24 (토)👥8명 참석🏷코트 4개

1라운드

2라운드

3라운드

김

이

승6-3남복

vs 박준호 · 최지우

+12

최

정

패4-6남복

vs 김민준 · 이서연

-8

Match boardDecided

Then: the screen a host actually RUNS the live session from had no live signal at all — isLive only gated the all-done banner and the start/end CTA, never a badge or dot on TypeHero.Decided (2026-09-17): the same pinned band, above TypeHero — the first live signal this screen has ever had. Its 코트 N면 courts-in-play fact deliberately differs from the hero's own booked-court-count fact — 4 booked, 3 in play right now is a real, useful distinction, not a restatement. Courts-in-play counts every currently in_progress match regardless of round (deriveSessionLiveFacts), not roundMatches — a screen-local concept this domain function doesn't depend on.Note: a 4th fact competing with the existing 3-fact TypeHero row two lines down was accepted as worth it — it reads as a genuinely different, useful number, not a restatement, even though the numbers can occasionally coincide.

진행 중42분2/4라운드코트 3면

🗺️

양재 시민의숲라이브

📅7월 24일 (토)⏰09:00–11:00🌤24°

참여 · 정보 · 대진표 (unchanged below)

Session detailDecided

Then: live was already signaled TWICE — the header's titleLeading PulseDot (fades in only once scrolled past the hero) and the hero's own inline titleBadge (라이브).Decided (2026-09-17): the band is the absolute first flow child — above even the terminal-state banner and the hero — sitting under the collapsing header (still transparent at rest, unaffected). Both existing signals STAY exactly as they were (mirrors compaction-detail.jsx's D3: low value to touch) — three live signals on this one screen (header dot + hero badge + band) is one more than either of the other two surfaces gets, ruled worth it for the elapsed/round/court facts only the band states.Note: the terminal-state Banner (cancelled) and this band are mutually exclusive — a session is never both in_progress and cancelled — so the two never compete for the same slot in practice.

Alternative — two slim stacked bands (described, not drawn)Rejected 2026-09-17

state band — pulse + 진행 중 + elapsed only

progress band — round N/M + courts-in-play, directly beneath it

Instead of one dense 4-item row, split it into two half-height rows stacked directly on top of each other with no gap between them: a red STATE band (pulse + 진행 중 + elapsed — the urgency facts) sits first, and a quieter neutral PROGRESS band (round N/M + courts-in-play — the session-shape facts) sits directly under it. Reads calmer on session detail (doesn't compete as hard with the hero's own red titleBadge two bands down) and gives round/court more room to never truncate on a narrow phone, at the cost of roughly 16-20px more permanently pinned height on every live surface and a second visual weight class to maintain instead of one. REJECTED (2026-09-17) — ships as the single dense row above on all three surfaces instead; the extra permanent height and second weight class weren't worth it for a distinction ("urgency" vs "shape" facts) real users are unlikely to register as two different kinds of information.

Spec (grounding, anatomy)

DECIDED 2026-09-17 (owner question 2026-09-08: do the three live-session surfaces need a visual anchor at the top?). SessionLiveBand promoted from card scope to a page-level pinned band on session detail, match board, and the spectator scorecard, extended with elapsed/round/court facts none of the three stated before this. Shipped as drawn on all three, pinned only where each screen's own shell already pins; the "two slim stacked bands" alternative (described at the bottom, not drawn as phones) was rejected.

grounded in 14 source file(s)

packages/app/src/presentation/components/sessions/session-strip-ui.tsxpackages/app/src/presentation/components/elapsed-clock.tsxpackages/app/src/presentation/utils/elapsed-formatters.tspackages/features/sessions/src/match-board/use-match-board-data.tspackages/features/sessions/src/spectator-scorecard-screen.tsxpackages/features/sessions/src/match-board-screen.tsxpackages/features/sessions/src/session-detail/sections/session-hero-section.tsxpackages/features/sessions/src/session-detail-screen.tsxpackages/ui/src/type-hero.tsxpackages/ui/src/media-hero.tsxpackages/ui/src/glyph-fact-row.tsxpackages/ui/src/collapsing-top-bar.tsxpackages/app/src/config/i18n/ko/sessions.tspackages/app/src/config/i18n/ko/home.ts