From e8eebe49407de8947bf509d5cf04d9080ee4edf7 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Mon, 21 Sep 2026 07:02:13 +0800
Subject: Real historical replay: timeline pins load run's own checkpoint GLBs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- renderTimeline rebuilds #timeline-track after each snapshot and wires
  click-to-pin on completed checkpoints (kept placeholder nodes otherwise)
- selection loads the pinned run's own steps/<n>-*.glb (generation/
  ownership guards apply), pins survive live snapshots, 跟随最新 restores
  live scope, replay pauses/scrubs through 已完成 versions
- placeholder fallback now clearly labeled (占位…) only before any run
- acceptance: historical_replay_regression (9 checks) pins mid-run,
  asserts no auto-follow strays, late-older-response precedence, served
  checkpoint sha256 vs CLI reference, and viewport geometry change
- fix: timeline-track id missing in index.html crashed renderTimeline
  (null firstChild), leaving static placeholder nodes non-clickable
- driver: 71/71 checks, zero console/page errors
---
 public/styles.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'public/styles.css')

diff --git a/public/styles.css b/public/styles.css
index 6346df5..a925e58 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -540,6 +540,31 @@ button:focus-visible {
   background: var(--gold);
 }
 
+.timeline-step-real {
+  cursor: pointer;
+}
+
+.timeline-step-real:hover .timeline-version {
+  color: var(--ivory);
+}
+
+.timeline-step-active .timeline-dot {
+  border-color: var(--ivory);
+  box-shadow: 0 0 0 3px rgba(215, 169, 72, 0.35);
+}
+
+#follow-button[disabled] {
+  border-color: var(--line-bright);
+  color: var(--muted);
+  cursor: default;
+  opacity: 0.45;
+}
+
+#follow-button[disabled]:hover {
+  background: transparent;
+  color: var(--muted);
+}
+
 .timeline-version {
   color: var(--gold-soft);
   font-size: 0.68rem;
@@ -557,6 +582,11 @@ button:focus-visible {
   font-size: 0.68rem;
 }
 
+.timeline-actions {
+  display: flex;
+  gap: 10px;
+}
+
 .replay-button {
   min-height: 44px;
   padding: 8px 16px;
-- 
cgit v1.2.3