**Note** from Bead: Time Line Web Component · [canonical source](https://redfish.acequia.io/guerin/.agents/ade9cea6-f50e-4922-8266-4bdd14ed9c73/2026-06-19/notes/00-orientation.md) · session 2026-06-19 · discussion: Talk: Time Line Web Component
**Read this first.** This bead designs a **reusable timeline web component** and the **`time-cursor` contract** it speaks, so that the timelines scattered across realtime.earth and alert.live stop being re-invented per app and start agreeing.
## The frame The senior-architect bead (`b2d9f6e1`, note `01-four-least-action-sketches.md`) found that **every app reinvents a clock; none shares one** — yet the incident-viewer already *is* a UTC master clock. Its **Sketch B** named the seam: > **plane 2 / TIME** — how "now" is shared → a master **time-cursor**. > - **B1 (tight):** one transport drives all; scrubbing in one app moves all. Great for incident > replay; couples lifecycles. > - **B2 (loose):** each app keeps its own clock; a shared "session" channel links them on demand. > Partition-tolerant (matches decentralized-cache `4456cd24`). Sub-question: **push (WS/SSE) vs > pull (poll)**. > - **Least-action:** promote the incident-viewer transport bar to a ~50-line shared module + a > `time-cursor` event apps emit/consume. This bead is the deep-dive on that plane. Two halves: 1. **The visual component** (the timeline widget UX/UI) — the thing on screen you scrub. 2. **The contract** (`time-cursor`) — how that widget's "now" propagates to/from the rest of the page and, optionally, other apps/peers. Keep them separate: the *widget* can be shared even if the *cross-app binding* stays B2-loose.
## The three timelines we already have (anchors) | App | Bead | Time model | Axis precision | Scrub interaction | Data binding | |---|---|---|---|---|---| | **firewatch camera-grid** | `65783732` (bound) | UTC ms, zoomed to imagery extent | day/hour ticks (6h/1h) | `pointerdown/move` → `seekFromX` → `updateWall` every event | per-camera frame-density lanes; playhead picks nearest frame ±30min | | **set-space-time** | `09fd1bf6` | calendar year (`YYYY`) | 1–100yr adaptive ticks | drag a **dot** to set its `calendarDate`; click to select | lane-packed dots, one per photo; pose sidecars | | **incident-viewer Epic-4** | `be9c3efd` | UTC master clock | transport bar | transport scrub drives model `t` + chase-cam | the de-facto master; track + model + TOA all read `t` | Live: - https://redfish.acequia.io/guerin/apps/camera-grid/ - https://santafe.live/set-space-time/ - https://redfish.acequia.io/guerin/apps/incident-viewer/index.html **What they share (the latent component grammar):** a horizontal axis mapping time→x; adaptive ticks chosen by view span; zoom/pan; a set of marks (dots / density bars / track samples); a playhead or a selection; a hit-test + tooltip. **Where they diverge:** time precision (year vs UTC ms), the mark semantics (one-photo dot vs frame-density lane vs continuous track), and whether the interaction is *scrub a playhead* (camera-grid, incident-viewer) or *edit a mark's time* (set-space-time). The component must support both **scrub** and **edit** modes, and a pluggable **time scale** (year ↔ ms).
## The design questions (foreground these, do not pre-answer) 1. **Scrub vs edit as one component or two modes?** camera-grid scrubs a playhead; set-space-time drags dots to *author* time. Is that one widget with a mode flag, or two widgets sharing a render core? 2. **Time precision as a pluggable scale.** Year-precision (set-space-time) and UTC-ms (the others) want the same axis/tick/zoom math over a swappable scale + formatter. What's the scale interface? 3. **Mark layer = STAC?** Should the marks be driven directly by **STAC temporal extents** and the **three-clock model** (capture / harvest / retention) from stac-camera-telemetry `31f69717`? That makes the timeline a STAC view, not a bespoke per-app structure (ties to catalog `90f902e0`). 4. **The `time-cursor` contract.** What does the event carry — a single instant, or an instant + a tolerance window (camera-grid already uses ±30min)? Who is authoritative when two widgets bind? 5. **B1 vs B2 (the big one, gated on Stephen).** Global singleton cursor vs local clocks with opt-in session bind; **push vs pull** transport. Couples to decentralized-cache-management `4456cd24`. 6. **realtime mode vs replay mode.** realtime.earth wants a *live* "now" that advances and a "follow live / detach to scrub" toggle; alert.live/incident-replay wants a *bounded* extent you scrub freely. Same component, two modes — what's the toggle's UX? 7. **Interaction conformance.** Heavy scrubs must use **process-latest-on-complete** (`.ai/process-latest-on-complete-UI-pattern.md`). camera-grid currently does **not** (see `notes/01`). The shared component should bake the pattern in so no app re-derives it.
## Starting orientation (first moves) - Do **not** open with one finished component. Per the sketch-ux skill + Stephen's standing feedback, lead with **2–4 rough sketches** that foreground questions 1, 5, and 6 with alternatives. - Likely sketch axes: (A) scrub-vs-edit seam; (B) the time-cursor contract shape (instant vs instant+window; singleton vs bindable); (C) realtime "follow-live/detach" toggle; (D) the STAC-driven mark layer. - Pull the **sketch-ux** skill (`https://redfish.acequia.io/skills/sketch-ux/SKILL.md`) before drawing. - Consult roles as needed: **uxui-senior-designer** (the widget UX), **senior-architect** `b2d9f6e1` (the convergence seam — this bead *is* its plane-2 deep-dive), **image-pose-ux-ui** / pose-ux-ui (pose+time coupling, since marks carry pose), and the **STAC lead** `31f69717` / `90f902e0` (temporal-extent binding).
## What not to write to The firewatch / incident-viewer / set-space-time app trees are owned by their beads. Findings go to this bead's `notes/` and `artifacts/`, and are **offered** to those beads' `uploads/` docks — never edited in place. Stephen's global `guerin/{notes,skills,chats}` spaces are off-limits.
## Pointers - senior-architect Sketch B: https://redfish.acequia.io/guerin/.agents/b2d9f6e1-4c3a-4e58-8a1f-7d0c5b9e2a64/2026-06-18/notes/01-four-least-action-sketches.md - camera-grid source: `c:\Users\steph\Documents\sites\redfish.acequia.io\guerin\apps\camera-grid\` (`index.js`, `timeline.js`) - process-latest-on-complete: `c:\Users\steph\Documents\sites\.ai\process-latest-on-complete-UI-pattern.md` - three-clock model: https://redfish.acequia.io/guerin/.agents/31f69717-3c68-4a0d-85d3-9515ec2e91ff/about.md
## References (bead cross-links) - Bead: Senior Architect · [canonical](https://redfish.acequia.io/guerin/.agents/b2d9f6e1-4c3a-4e58-8a1f-7d0c5b9e2a64/) - Bead: Stac Camera Telemetry · [canonical](https://redfish.acequia.io/guerin/.agents/31f69717-3c68-4a0d-85d3-9515ec2e91ff/)