**Bead** `ade9cea6-f50e-4922-8266-4bdd14ed9c73` · [canonical URI](https://redfish.acequia.io/guerin/.agents/ade9cea6-f50e-4922-8266-4bdd14ed9c73/) · discussion: Talk: Time Line Web Component This page is the wiki facet of a [bead](https://redfish.acequia.io/guerin/.agents/); the bead is the source of truth.
> Hatched 2026-06-19 to think through the **system architecture and the UX/UI of timelines** across > **realtime.earth** and **alert.live / santafe.live**. The deep-dive on the senior-architect bead's > **plane 2 / Sketch B — the master time-cursor** ([`b2d9f6e1`](https://redfish.acequia.io/guerin/.agents/b2d9f6e1-4c3a-4e58-8a1f-7d0c5b9e2a64/about.md)): > every app reinvents a clock; none shares one. This bead designs the shared **timeline web component** > (and the `time-cursor` contract) that the firewatch camera-grid, the incident-viewer, the > set-space-time photo timeline, and the STAC-cataloged sources all emit and consume.
## Identity - **URI:** https://redfish.acequia.io/guerin/.agents/ade9cea6-f50e-4922-8266-4bdd14ed9c73/ - **Local origin:** `c:\Users\steph\Documents\sites\redfish.acequia.io\guerin\.agents\ade9cea6-f50e-4922-8266-4bdd14ed9c73\` - **GUID:** `ade9cea6-f50e-4922-8266-4bdd14ed9c73` - **Slug:** time-line-web-component - **Created:** 2026-06-19 - **Body:** CV (out-of-browser writer — shell + filesystem + WebDAV via bearer) - **Currently animated by:** Claude (CV), invoked by Stephen - **Posture:** design task / region of exploration — produce the timeline-component architecture + UX/UI design, led by **sketches** (sketch-ux method), not a finished solution.
## Motivation (why a GUID) Stephen asked to "think through the system architecture and the UX/UI of timelines in realtime.earth and alert.live." Three live timelines already exist and disagree: - **firewatch camera-grid** ([`65783732`](https://redfish.acequia.io/guerin/.agents/65783732-7907-4a36-983a-3b015e75e80b/about.md), bound) — a canvas UTC scrubber with per-camera frame-density lanes; the playhead swaps every camera tile to its nearest frame. Live: https://redfish.acequia.io/guerin/apps/camera-grid/ - **set-space-time** ([`09fd1bf6`](https://redfish.acequia.io/guerin/.agents/09fd1bf6-fbb1-451c-83c1-19e5f8c8220b/about.md)) — the santafe.live photo pose-timeline; year-precision dots in lanes, drag a dot to set its `calendarDate`. Live: https://santafe.live/set-space-time/ - **incident-viewer Epic-4** ([`be9c3efd`](https://redfish.acequia.io/guerin/.agents/be9c3efd-ed6e-440e-9e88-653db538931d/about.md)) — the de-facto **UTC master clock** + transport bar; chase-cam rides a track over it. Live: https://redfish.acequia.io/guerin/apps/incident-viewer/index.html The senior-architect bead already framed the convergence question (Sketch B): is "now" a **global singleton** (B1: one transport drives all) or a **local clock that opt-in binds** (B2: partition-tolerant session channel, push vs pull)? This bead drives that plane deeper into an actual **reusable web component** — the visual timeline widget plus the `time-cursor` event contract — and designs its UX/UI for both the realtime/streaming (realtime.earth) and the incident-replay (alert.live) contexts.
## Mechanism (what this bead does) - Surveys the three existing timelines and inventories their shared vs divergent grammar (axis, ticks, lanes, playhead, scrub interaction, time precision, data binding). - Designs the **timeline web component**: its attributes/properties, the `time-cursor` event it emits/consumes, how it binds to STAC temporal extents (the three-clock model — capture / harvest / retention — from stac-camera-telemetry `31f69717`), and the global-singleton-vs-local-clock seam. - Designs the **UX/UI** via low-fidelity sketches that foreground the design questions and alternatives (per the sketch-ux skill + feedback_ux-sketch-to-foreground-questions). - Audits the existing apps against the project's interaction patterns (e.g. process-latest-on-complete during scrub — see `notes/01`). What does **not** go here: the production component code does not live in this bead unless Stephen asks for a `repo/` build; this is design-first. It does not edit the firewatch / incident-viewer / set-space-time apps in place — findings are offered to those beads' docks.
## Folder Layout ``` ade9cea6-f50e-4922-8266-4bdd14ed9c73/ ├── about.md # this file ├── uploads/ │ └── README.md # inbound dock ├── repo/ │ └── camera-grid/ # git working copy (NOT deployed; gated on Stephen) └── 2026-06-19/ ├── notes/ │ ├── 00-orientation.md # READ FIRST — frame, anchors, design questions │ ├── 01-process-latest-on-complete-audit.md # scrub-pattern audit of camera-grid │ └── 02-camera-grid-timeline-update-plan.md # the update: plan + done + caching analysis ├── chats/ │ └── 2026-06-19-timeline-web-component.md # verbatim chat log ├── skills/ # (empty; seed if a capability crystallizes) └── artifacts/ # (empty; sketches/spec land here at refinement) ``` **`repo/camera-grid/`** — a git working copy of the camera-grid app (imported from firewatch `65783732` repo @ `ad6a2d1`), carrying the **process-latest-on-complete scrub** + **service-worker frame cache** changes. Kept here **until Stephen decides to deploy**. Local test: `cd repo/camera-grid && PORT=5180 node .serve.mjs` → **http://localhost:5180/**.
## Session Log
- **2026-06-21 (cont. 4)** — **Deployed** the camera-grid (+ plume) to the public site path **https://redfish.acequia.io/guerin/apps/camera-grid/** (`deploy.sh`, WebDAV bearer; verified live). Built the **`OrientedMap`** shared component (`repo/camera-grid/oriented-map.js`: frustum wedges + green FOV-centerlines + red UV→bearing ray) and adopted it in the **plume** map (frustums sweep with the scrubber, hover→ray; commit `beadc7a`) — the cross-app **consistency** mechanism Debbie owns (feedback_debbie-cross-app-uxui-consistency). camera-grid `index.js` still has its own inline copy; migrating it onto `OrientedMap` is the next consistency step. Opened the **oriented-imagery** bead [`52670670`](https://redfish.acequia.io/guerin/.agents/52670670-fcb1-42ba-90c7-e63e4fc2f231/) (the component's home + **ESRI OIC** and **KML PhotoOverlay/NetworkLink** read/write, mapped to the panosphere φ–θ). Removed a stray screenshot from the repo (`5e7dac1`). - **2026-06-21 (cont. 3)** — **Sandy Plume slice — first light** (commit `cc1874e`; `repo/camera-grid/` `plume.html`+`plume.js`, served at `/plume.html`, **not deployed**): the note-06 smallest slice end-to-end — auto-select a co-viewing camera cluster (forward ray-crossing), per-camera raster **mask** brush, **space-carve** (silhouette intersection over a 32³-ish voxel grid via the inverse level-mount projection), a rotatable **3D voxel preview** (stand-in for the taos render-pane) + a Leaflet **footprint**. CDP-verified: 3 Sandy cams carve 1609 voxels, no errors. Detail in [notes/08](2026-06-21/notes/08-sandy-plume-slice-first-light.md). Also this session: **tie-points** bead opened ([`fecb418a`](https://redfish.acequia.io/guerin/.agents/fecb418a-6530-48e0-a6fb-c596c664008e/), annotation/augmentation/tie-point vocab + Debbie's point-placement note 01); annotation made **mobile-friendly** (✓ button + tap-first-vertex finish, delete→long-press/right-click menu; commits `9a902b4`/`739fc6a`). - **2026-06-21 (cont. 2)** — Deferred the **panorama** to a future timeline-responsive tab (`PANO_ENABLED=false`; commit `984a35a`); added **`?stac=col1,col2`** loading (camera STAC → wall, adsb STAC → heading glyphs; `984a35a`) against the wildcad/forager STACs; made the **timeline collapsible** (per-camera channels ⇄ aggregate density **heatmap**) with the **inspected camera highlighted amber** (`62419d6`); added an always-on **green FOV-centerline** per frustum (proto-triangulation; `ef21717`). Captured the spatial roadmap (multi-point triangulation, full-screen selectable grid, **DEM/GP3T UV→geopoint derived STAC**, annotation channels, the **stitcher** calibration workflow, the panorama tab) in [notes/07]. Opened two sibling beads: **social-foraging** [`d2798c01`](https://redfish.acequia.io/guerin/.agents/d2798c01-dce5-412a-8be7-b85806f72214/) (personal STACs, events/invites, derivative-by-space-time-relevance, stitchers) and **scene-description** [`bb0dd4b5`](https://redfish.acequia.io/guerin/.agents/bb0dd4b5-09a3-4d98-ac0f-eadc3ad52949/) (wildfire/smoke/plume/outdoor relevance metadata). App still local-git only; deploy gated on Stephen. - **2026-06-21 (cont.)** — Red UV→heading ray now works in **grid view** (tile hover) and the projection is **object-fit-accurate** (`imgUV`); inspector ruler+annotation SVG snap to the displayed image (commit `891f50f`). Renamed the raster tool **paint→mask** (one annotation type for hand-painted + frame-diff plume masks). Two design notes added: **[notes/05]** uxui-senior-designer critique of individual-camera mode (focus/toolbar/coupling; top fix = reflow frame to ~70% + tools to a header rail) and **[notes/06]** joint senior-architect×uxui **plume pipeline + fork** (rec: NO standalone app — a "plume *plane*" = STAC mask/volume assets + per-renderer adapters + a small embeddable `taos-render-pane`; reconstruction = visual-hull/space-carve over the frustums, level-mount now sharpening with the panosphere calibration; smallest slice = one plume time, 2–3 cams, hand-painted masks → naïve voxel carve → taos render). Both gated on Stephen (sketches, not ratified). - **2026-06-21** — Built **S3c** in `repo/camera-grid/` (commit `fb5d95f`, **not deployed**): map **time-based directional frustums** (az±fov/2 wedges that sweep on scrub; cashed in the `syncMapAz()` stub) + **red UV→heading projection ray** (mouse `(u,v)` → true `(az,el)` via a level-mount camera model `uvToAzEl`; full φ–θ panosphere calibration deferred per astronomical-pano `9943ac1c` note 01); a **scrubbable inspector** that brings a frame up over the wall panel while the timeline stays live; and a **panorama** strip + resolver (`_p`-suffix; mirror then alertwest CDN; archive has none, live cams do). Brought in **uxui-senior-designer** (sketch-led) → annotation design [note 03]; scaffolded the smallest slice (image-space point/line/polygon → GeoJSON `data:` URI + STAC asset). CDP-verified on :9333, no page errors. Detail in [notes/04](2026-06-21/notes/04-frustums-projection-inspector-panorama-build.md); chat [2026-06-21](2026-06-21/chats/2026-06-21-frustums-inspector-panorama.md). Deploy + a live-cam manifest (College Peak) to populate the pano lane remain gated on Stephen. - **2026-06-20** — `mount-bead 65783732`. No active firewatch session (last activity 2026-06-14). Processed this bead's own request: imported the camera-grid app into `repo/camera-grid/` (fresh git, 2 commits), implemented **process-latest-on-complete** on the scrub + a **service-worker frame cache** (frames served `private, no-cache` but are immutable history → cache-first SW). Local server at http://localhost:5180/. Deploy gated on Stephen. Detail in `notes/02`. - **2026-06-19** — Bead opened by Stephen. Bound firewatch-camera-grid (`65783732`); mounted senior-architect Sketch B (`b2d9f6e1`), incident-viewer-epic-4 (`be9c3efd`), set-space-time (`09fd1bf6`), stac-camera-telemetry (`31f69717`), catalog (`90f902e0`), decentralized-cache-management (`4456cd24`). Surveyed the three live timelines. Audited the camera-grid scrub path against `.ai/process-latest-on-complete-UI-pattern.md` (see `notes/01`). No design sketches drawn yet — that is the next step.
## Modus Operandi (how to interact) Read `notes/00-orientation.md` first, then `notes/01`. New design concepts → `notes/` (workshop); polished sketches/spec → `artifacts/`; verbatim prompts → `chats/`. Cross-bead references use absolute URIs. Per the sketch-ux method, **fork/extend** a sketch's question rather than approve/reject. Offer findings to other beads' `uploads/` docks; never write into the firewatch / incident-viewer / set-space-time app trees directly. Roles to consult: **uxui-senior-designer**, **senior-architect** (`b2d9f6e1`), **image-pose-ux-ui** (pose-ux-ui), and the **STAC lead** (stac-camera-telemetry `31f69717` / catalog `90f902e0`).
## Capabilities - Compare and reconcile the three existing timeline implementations into one component grammar. - Design the `time-cursor` event contract and the global-singleton-vs-local-clock-bind seam. - Produce sketch-led UX/UI for realtime-streaming vs incident-replay timeline modes. - Audit interaction conformance (process-latest-on-complete and friends).
## Lifecycle `init → setup (read about + survey the three timelines + the time-cursor sketch) → step (sketch / spec / audit) → die (flush durable state, sync)`. **Energized by** Stephen's design questions about the shared timeline. **Apoptose** when a ratified component spec + UX/UI exists (handed to the app beads) or Stephen redirects; the chat log is the irreplaceable record.
## Limitations - Design-first; not a build bead unless a `repo/` is later requested. - The global-vs-local-clock decision (Sketch B's B1 vs B2) and push-vs-pull transport are **open and gated on Stephen** — they couple to decentralized-cache-management (`4456cd24`). - Inherits the soft-constraint stance: every contract here is a default to relax, not a law (feedback_every-constraint-is-soft).
## Related beads - **Bound:** firewatch-camera-grid — https://redfish.acequia.io/guerin/.agents/65783732-7907-4a36-983a-3b015e75e80b/about.md - senior-architect (Sketch B time-cursor) — https://redfish.acequia.io/guerin/.agents/b2d9f6e1-4c3a-4e58-8a1f-7d0c5b9e2a64/about.md - incident-viewer-epic-4 (UTC master clock) — https://redfish.acequia.io/guerin/.agents/be9c3efd-ed6e-440e-9e88-653db538931d/about.md - set-space-time (santafe photo timeline) — https://redfish.acequia.io/guerin/.agents/09fd1bf6-fbb1-451c-83c1-19e5f8c8220b/about.md - stac-camera-telemetry (three-clock model, STAC temporal extents) — https://redfish.acequia.io/guerin/.agents/31f69717-3c68-4a0d-85d3-9515ec2e91ff/about.md - catalog (STAC substrate) — https://redfish.acequia.io/guerin/.agents/90f902e0-2e45-4aa1-b998-918ca3688e94/about.md - decentralized-cache-management (B2 partition-tolerance, push vs pull) — https://redfish.acequia.io/guerin/.agents/4456cd24-010a-41e9-a14c-a2d1086893bd/about.md - Pattern: `.ai/process-latest-on-complete-UI-pattern.md`
## References (bead cross-links) - Bead: Senior Architect · [canonical](https://redfish.acequia.io/guerin/.agents/b2d9f6e1-4c3a-4e58-8a1f-7d0c5b9e2a64/) - Bead: Firewatch Camera Grid · [canonical](https://redfish.acequia.io/guerin/.agents/65783732-7907-4a36-983a-3b015e75e80b/) - Bead: Set Time Space · [canonical](https://redfish.acequia.io/guerin/.agents/09fd1bf6-fbb1-451c-83c1-19e5f8c8220b/) - Bead: Incident Viewer Epic 4 · [canonical](https://redfish.acequia.io/guerin/.agents/be9c3efd-ed6e-440e-9e88-653db538931d/) - Bead: Oriented Imagery · [canonical](https://redfish.acequia.io/guerin/.agents/52670670-fcb1-42ba-90c7-e63e4fc2f231/) - Bead: Tie Points · [canonical](https://redfish.acequia.io/guerin/.agents/fecb418a-6530-48e0-a6fb-c596c664008e/) - Bead: Social Foraging · [canonical](https://redfish.acequia.io/guerin/.agents/d2798c01-dce5-412a-8be7-b85806f72214/) - Bead: Scene Description · [canonical](https://redfish.acequia.io/guerin/.agents/bb0dd4b5-09a3-4d98-ac0f-eadc3ad52949/) - Bead: Stac Camera Telemetry · [canonical](https://redfish.acequia.io/guerin/.agents/31f69717-3c68-4a0d-85d3-9515ec2e91ff/) - Bead: Catalog · [canonical](https://redfish.acequia.io/guerin/.agents/90f902e0-2e45-4aa1-b998-918ca3688e94/) - Bead: Decentralized Cache Management · [canonical](https://redfish.acequia.io/guerin/.agents/4456cd24-010a-41e9-a14c-a2d1086893bd/)
See all: Beads