+
+
+"""
+
+
+def main():
+ ap = argparse.ArgumentParser(description="Temporary SwitchBot room-light web GUI")
+ ap.add_argument("--address", default=DEFAULT_ADDRESS, help="Bot BLE MAC address")
+ ap.add_argument("--port", type=int, default=8765)
+ ap.add_argument("--host", default="127.0.0.1", help="bind host (default: localhost only)")
+ args = ap.parse_args()
+
+ logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
+ global BOT
+ BOT = Bot(args.address)
+ print(f"\n diSPIM Room Light GUI → http://{args.host}:{args.port}\n Bot: {args.address}\n")
+ uvicorn.run(app, host=args.host, port=args.port, log_level="warning")
+
+
+if __name__ == "__main__":
+ main()
diff --git a/docs/CLOSED_LOOP_PARADIGM.md b/docs/CLOSED_LOOP_PARADIGM.md
new file mode 100644
index 00000000..8f1cf80d
--- /dev/null
+++ b/docs/CLOSED_LOOP_PARADIGM.md
@@ -0,0 +1,536 @@
+# Closed-Loop Paradigm: Notes on the Discussion
+
+This document captures the design conversation that produced everything on the
+`paradigm/closed-loop` branch: the schema split, the Map-as-embryo-home work,
+the operator-action vocabulary, the eval substrate (capture / replay /
+decisions / shadow), and the trajectory the system is on. It is a
+distillation, not a transcript — a future-self / new-collaborator reference
+for *why* this code looks the way it does and *where it is going*.
+
+---
+
+## 1. The Original Friction
+
+The conversation started from a small, concrete observation by the operator:
+
+> "It feels awkward that the operator has to go between the chat in the TUI
+> and the viz server… or even to chat about detecting embryos."
+
+That awkwardness is a symptom, not a defect. It surfaces a deeper design
+question: **what is the orchestrator (the agent) actually for?** Today the
+orchestrator does at least four jobs at once, and one of them — *tool router*
+— is the one creating the friction.
+
+### The four orchestrator roles
+
+| Role | Description | Replaceable by a button? |
+| --- | --- | --- |
+| 1. Tool router | "Detect embryos" → `detect_embryos()` call | **Yes** — this is the friction surface |
+| 2. Workflow runner | Timelapses, multi-embryo plans, perception loops | No |
+| 3. Domain reasoner | Knows microscopy, embryos, safety constraints | No |
+| 4. Session memory | Coherent narrative of what happened and why | No |
+
+Routing a single click through chat for a routine action is the system
+fighting against its own users. Routing a multi-step scientific decision
+through Claude is using the right tool for the right job. The paradigm here
+is: **shrink role 1 to its essentials, keep roles 2–4 first-class, and let
+the UI carry the rest.**
+
+---
+
+## 2. Web ↔ Chat Reconciliation Patterns
+
+Four ways to relate the web UI and the chat orchestrator. Each has a
+distinct world model property:
+
+### A. Chat-only intent (the old default)
+
+Every action originates in chat. The web is observation + delegated subtasks
+(e.g. the marking canvas is a delegation the orchestrator triggers).
+
+* Cleanest record.
+* Worst friction.
+* Orchestrator's world model is "complete" because every change passes
+ through it.
+
+### B. Two parallel command surfaces
+
+Operator clicks in web, web acts directly; orchestrator finds out by polling
+state or doesn't find out at all.
+
+* Lowest friction.
+* Orchestrator's world model **drifts from reality** — fatal for role 4
+ (session memory) and dangerous for role 3 (safety reasoning).
+
+### C. Web acts, orchestrator subscribes *(the chosen direction)*
+
+Operator clicks → web performs the action **and** publishes an event
+(`OPERATOR_*`) → orchestrator's session memory ingests it.
+
+* Chat log shows only human conversation.
+* Orchestrator's working context shows chat + events as a single timeline.
+* Phase 7 (operator events vocabulary + reactive candidate) is the first
+ installment of this pattern.
+
+### D. Cross-pattern hybrid
+
+Different action classes use different patterns. Heavy / novel / composite
+actions use chat (A); routine / clickable / contextual actions use web (C).
+This is what the system actually drifts toward; pattern C is the substrate
+that makes it possible.
+
+The orchestrator's job shifts from being **a funnel for action** to being **a
+brain that knows what's happening on every surface**.
+
+---
+
+## 3. The "Turn" is Wrong; the "Decision Moment" is Right
+
+Chat-AI literature reasons in *turns* (user message → assistant response).
+That model imports an assumption that does not hold here: the human is at
+the keyboard continuously. In a microscopy experiment running 12+ hours, the
+human checks in once, twice, maybe ten times. The agent is autonomous in
+between.
+
+The right unit is a **decision moment**, triggered by:
+
+1. **User message** — rare, interrupting (classic chat turn).
+2. **Critical event** — error, safety violation, lost focus, perception
+ anomaly. Wake immediately; decide to act / abort / escalate.
+3. **Phase boundary** — between timepoints, between embryos. Built-in
+ checkpoint: review state, decide whether to continue.
+4. **Periodic checkpoint** — every N minutes if nothing else happened.
+ Catches slow drifts.
+
+Between moments the agent is asleep. Plans execute autonomously. Events
+accumulate on the bus and in the world model. When the next decision
+moment fires, the agent reads:
+
+* The trigger (why am I waking up?)
+* The world snapshot (NOW state)
+* The events digest (what happened since last wake)
+* The conversation history (which might be hours old and less relevant
+ than usual)
+
+This is closer to a **supervisory controller** than a chat partner. The
+conversation history matters less than usual; what matters more is the
+**flight log** (events) plus the **current state snapshot**.
+
+### Trigger model — concrete
+
+A small router (in code, not Claude) sits between the bus and the brain:
+
+```
+ user input ─┐
+ event bus ──┼─► wake-router ──► (compose context) ──► claude.messages.create
+ schedule ──┘
+```
+
+The router's responsibilities:
+* Subscribe to a whitelist of "wake-worthy" event types.
+* Hold a debounce / coalescing buffer (so a burst of events becomes one
+ wake).
+* Keep a heartbeat schedule (every N minutes if no other trigger fired).
+* On wake, package: trigger, world snapshot, events digest, recent
+ conversation tail.
+* Surface the package to the brain.
+
+The brain stays the brain (Claude). The router is cheap, deterministic,
+debuggable code. It's the **meta-orchestrator** the operator mentioned —
+**not as another LLM**, but as a control surface.
+
+### Phase boundaries: hand-back vs subscribe
+
+Two designs for letting the brain look in mid-plan:
+
+* **Plan hands control back** at well-known points (between embryos, every
+ 5 timepoints). Cheaper, predictable, slightly less reactive.
+* **Plan never pauses; brain subscribes to plan events** ("perception
+ complete for embryo 3"). More reactive, more plan-coupling.
+
+The first one composes better with the supervisory-controller framing and
+is the recommended starting point.
+
+### Idle ticks
+
+If 30 min pass with no event and no user, should the agent wake to verify
+everything's OK? Default to **yes — periodic ticks with a high action
+threshold.** Most ticks should result in the agent doing nothing. The
+purpose is catching slow drifts (focus, sample state, hardware
+degradation) that don't trigger their own events.
+
+---
+
+## 4. World Model — Tiered, Not Monolithic
+
+A common mistake is "summarise everything every turn." Better is a tiered
+model where different freshness/density tiers carry different cadence
+costs.
+
+### Tier 1 — World snapshot
+
+Structured, ~30 lines, computed from in-memory state (not events), every
+wake.
+
+Includes: live stage XY/Z, current session id, embryo list with
+calibration state, current plan, acquisition status, recent operator
+actions (one-line summary).
+
+Cheap to build, fresh every time. Already mostly present in the
+codebase — `agent.experiment.get_summary()` plus the cached
+`DEVICE_STATE_UPDATE` payload is 80% of this.
+
+### Tier 2 — Recent-events digest
+
+Hand-written formatter over the events bus, filtered to wake-worthy types,
+inserted as a system note at each wake.
+
+Shape: `"Since last response: operator added embryo 4 via Map at 14:32; calibration completed for embryo 2; one perception trace pending."`
+
+Hand-written because LLM summarisation here adds latency, cost, and
+non-determinism for low value. Events are already structured.
+
+### Tier 3 — Pull tools
+
+For when reasoning needs depth: `get_recent_perceptions(embryo_id, n=5)`,
+`get_session_timeline()`, `get_learnings(campaign_id)`, etc. The agent
+calls these when it wants the detail.
+
+### Tier 4 — Optional LLM summariser
+
+Reserved for genuinely natural-language streams that resist rule-based
+compression: accumulated CV reasoning chains, narrative observations,
+cross-session learnings. Use a smaller, faster Claude model (Haiku is the
+natural fit). Run lazily, when a tier-3 tool asks for "summarise the last
+30 min for embryo 3."
+
+### Why this shape
+
+Decision moments are **rare** in autonomous mode. Token budget per wake
+can be generous (it's mostly idle compute). What matters more than budget
+is **cadence of waking** — saving 200 tokens per turn doesn't help if
+you're waking up at the wrong moments.
+
+---
+
+## 5. Testing — Where Most Projects Fail
+
+You cannot iterate on agent architecture without a way to compare
+architectures. Microscopy makes this hard:
+
+* Physical, non-deterministic, non-replayable in the trivial sense.
+* "Correct" is fuzzy — biological judgements rarely have ground truth.
+* Slow feedback (a timelapse takes hours).
+* Can't always reset to a clean state (samples are consumed).
+
+Five testing primitives, ranked by payoff per unit work (this ordering
+informed Phase 6's build order):
+
+### 5.1 Event replay *(built — Phase 6a/6b)*
+
+Capture the full event stream during a real run. Offline, replay it
+through any candidate architecture. Diff its decisions against
+production's. **Foundation** — without it, every change to the
+orchestrator is a flight test.
+
+### 5.2 Shadow mode *(built — Phase 6d)*
+
+During a real experiment, candidate architectures run alongside
+production. They see the same events but their decisions are *logged,
+not enacted*. Unique value over pure replay: shadow agents experience
+real temporal cadence, so timing-sensitive things (drift, races) are
+caught.
+
+### 5.3 Synthetic event sequences
+
+Hand-crafted streams: cascading errors, ambiguous perception,
+contradictory operator actions, focus drift, network drop mid-acquisition.
+Stress / chaos testing. The orchestrator is correct if it doesn't do
+something catastrophic — much easier to score than biological
+correctness.
+
+Trivially built on top of 5.1 — write a `jsonl` by hand, replay it.
+
+### 5.4 Decision-level micro-benchmarks
+
+Specific judgements — "given this perception result and these recent
+observations, should the agent re-focus?" — captured as
+(input → expected decision) pairs labelled by a biologist. Regression
+suite. Cheap with biologist time, expensive to bootstrap, very valuable
+once you have a few hundred.
+
+### 5.5 Multi-agent A/B in production
+
+Two embryos in the same dish, one supervised by architecture A and one
+by B (both honouring the firmware fence). Compare biological outcomes.
+Slow (one timelapse per data point), but the **only thing that measures
+biological correctness end-to-end.**
+
+---
+
+## 6. Embryo Schema: Coarse vs Fine
+
+Foundational and quietly important. Each embryo carries:
+
+* `position_coarse` — set by bottom-camera detection or manual Map
+ placement. Always present.
+* `position_fine` — set later by SPIM-objective alignment (workflow not
+ yet built). Initially `{}`.
+* `stage_position` — a *derived property*: `fine if fine else coarse`.
+ Downstream motion / perception keeps reading this and stays agnostic
+ about which calibration stage we're in.
+
+This is the seed for a broader idea: **measurements have provenance and
+calibration state**. The same embryo at the same nominal XY can have
+different "true" positions depending on which sensor sighted it. Encode
+that explicitly so any downstream decision can ask *"how confident is
+this position?"* without needing to know the whole calibration history.
+
+When the operator drags an embryo on the Map, the PUT clears `fine` —
+overriding the sighting invalidates any SPIM-derived fine alignment
+derived from the old coarse. `OPERATOR_EDITED_EMBRYO` carries
+`fine_position_invalidated` so the candidate / future controller can
+schedule a re-alignment without inferring it.
+
+---
+
+## 7. The Map as Collaborative World Model
+
+The Devices > Map page is more than visualisation. It is the **first
+collaborative surface** between operator and orchestrator: both can read
+the embryo list; both can mutate it. The orchestrator subscribes; the
+operator clicks.
+
+Visual semantics matter:
+
+* Coarse-only embryo → outlined ring + number. *Provisional.*
+* SPIM-fine-calibrated → filled disc + number. *Committed.*
+
+Calibration state is then visible at a glance across the slide — the
+operator can scan and see "embryo 3 still needs alignment" without
+opening anything.
+
+The pick-up / drop interaction (Phase 5) deliberately rejects
+click-to-add: the Map is a schematic, not a satellite view. Adding a
+new sighting without a visual reference is guessing. New embryos go
+through the bottom-camera marking canvas. The Map is for **editing what
+already exists**.
+
+### Future arc
+
+* **Annotations beyond position**: operator marks "this is the control",
+ "this one is dead, skip", "I think this is in 2-cell stage". These
+ become first-class scientific observations through additional
+ `OPERATOR_*` events.
+* **Satellite tile**: render the live bottom-camera frame as an overlay
+ on the Map at the current stage XY, scaled by um_per_pixel. Inside
+ that tile, click-to-add becomes meaningful (you can see what you're
+ picking). Outside, the Map stays schematic.
+
+---
+
+## 8. Revolutionary Trajectories
+
+Some of these are reasonable extensions; some are genuinely new.
+
+### 8.1 Plans-as-goals, not scripts
+
+Operator specifies "characterise gut development for these four
+embryos." Orchestrator translates this into a continuously adapted
+imaging plan that changes based on what perception sees mid-run. The
+plan isn't a fixed script handed to Bluesky — it's a negotiation the
+orchestrator keeps in flight, with the world model as the substrate
+for adaptation.
+
+Requires: tier-1 + tier-2 world model, decent perception loop, a way
+to express goals as predicates over the world model.
+
+### 8.2 Compounding cross-session learning
+
+`agent/learnings/` already exists. Today it's barely used. With replay
++ shadow, an architecture that proposes priors ("embryos at 3-fold
+typically need slower piezo") becomes **A/B testable across sessions**.
+Improvement gets *measurable*, which is the unlock — most "smart
+microscopy" today is shallow because it has no measurement loop.
+
+The right framing: each session is a **trial**, the orchestrator is the
+**experimenter**, the world model is what carries learning between
+trials.
+
+### 8.3 Collaborative world model
+
+The Map (operator edits embryos) is the first instance. Extend
+everywhere:
+
+* Operator annotates morphology on the Map → orchestrator updates
+ hypothesis space.
+* Operator marks a focus failure → orchestrator marks the calibration
+ region as untrustworthy.
+* Operator confirms a perception → orchestrator increases confidence in
+ the perception predicate for similar inputs.
+
+The point is making the operator's tacit knowledge **first-class data**
+that the system can reason about, not just record.
+
+### 8.4 Reverse-mode microscopy
+
+"I want to know X — plan the imaging that answers X." The orchestrator
+translates scientific goals into imaging plans. This is the
+plans-as-goals idea taken to its conclusion: the operator describes
+intent in scientific terms, the orchestrator owns the imaging strategy.
+
+Tractable only once 8.1 and the goal language are built.
+
+### 8.5 Continuous shadow / always-on critic
+
+Run the production orchestrator + a shadow candidate continuously, and
+log all decision divergences. Over weeks, the divergence log becomes a
+**dataset of disagreements**. Each disagreement is either:
+
+* Production was right, candidate was wrong → candidate needs a fix.
+* Candidate was right, production was wrong → consider promotion or
+ investigate why production picked differently.
+* Both were defensible → annotate the case.
+
+Free with the eval substrate (Phase 6); the only addition is a
+divergence collator.
+
+---
+
+## 9. Concretely Built Today (`paradigm/closed-loop` branch)
+
+| # | Commit | What |
+| --- | --- | --- |
+| 1 | `3e410581` | Schema split: `position_coarse` / `position_fine` / derived `stage_position`. |
+| 2 | `617e54c9` | `ExperimentState.notify_embryos_changed()` observer → `EMBRYOS_UPDATE` broadcast. |
+| 3 | `144d9fc9` | Map render layer — lavender rings (coarse) / discs (fine) / numbers. |
+| 4 | `4fbb9edf` | `detect_embryos` flows through web Marking canvas; `auth.py` + `require_control`. |
+| 5 | `8f6553e1` | Map pick-up / drop / Delete to edit embryos in place (control-gated PUT/DELETE). |
+| 6 | `808fe813` | Side-fix: re-enable XY joystick at device-layer boot. |
+| 7 | `f7a13d69` | Side-fix: image-anchored crosshair + scroll-to-zoom in camera panel. |
+| 8 | `d69cc219` | `gently/eval/`: event capture / replay / shadow / decision log scaffolding. |
+| 9 | `75d7c9db` | Production decision capture wired through `ConversationManager.call_claude`. |
+| 10 | `0a97563e` | `OPERATOR_*` event vocabulary + `ReactiveCandidate` (first real shadow). |
+
+### Per-session disk shape now
+
+`D:\Gently3\sessions\{id}\`
+
+* `events.jsonl` — captured event bus, telemetry-filtered.
+* `decisions.jsonl` — every Claude turn (success + error).
+* `interaction_log.jsonl` — pre-existing chat-shaped interactions.
+* `timeline.jsonl` — pre-existing session timeline.
+* Plus everything from the legacy FileStore layout.
+
+### Eval CLI
+
+`python scripts/replay_session.py {session_id_prefix} [--histogram] [--candidate {name}] [--real-time] [--time-scale N]`
+
+---
+
+## 10. What is *Not* Done Yet
+
+These are the natural follow-ups; sketched as future-self breadcrumbs.
+
+### Near-term (days)
+
+* **Tier-1 world snapshot** as a system-prompt section the brain sees
+ on every wake. Build the snapshot from `agent.experiment` plus the
+ last cached `DEVICE_STATE_UPDATE`. ~30 lines of formatted prose, every
+ wake.
+* **Tier-2 events digest** — hand-written formatter that reads the
+ bus's recent meaningful events (or the captured jsonl tail) and
+ produces a one-paragraph "since last response" note.
+* **Snapshot ingest into the brain's prompt** — `_update_system_prompt`
+ already takes a `context_summary`; route tier-1 + tier-2 through it.
+
+### Medium-term (weeks)
+
+* **Wake-router** — the code-level scheduler from §3. Currently the
+ brain only wakes on user message. Add: event-driven wake (subscribe
+ to wake-worthy events), periodic-tick wake (heartbeat), debounce /
+ coalesce buffer.
+* **More operator events** — `OPERATOR_ANNOTATED_EMBRYO` ("this is the
+ control", "skip, looks dead"), `OPERATOR_STARTED_TIMELAPSE`,
+ `OPERATOR_INTERRUPTED_PLAN`, `OPERATOR_TOGGLED_CAMERA`. Whatever the
+ Map / web UI lets the operator do should publish a typed event.
+* **SPIM-fine alignment workflow** — populate `position_fine`. Tool +
+ per-embryo state transition. Triggers `EMBRYOS_UPDATE` and a new
+ `FINE_ALIGNMENT_COMPLETED` event the orchestrator can react to.
+* **Continuous-shadow harness** — extend `ShadowRunner` to run a
+ candidate alongside production in the live agent process (not just
+ during replay). Collect divergences into a per-session
+ `divergences.jsonl`.
+
+### Longer arc (months)
+
+* **A goal expression language** — predicates over the world model that
+ let the operator say "image until 4-fold" or "follow the cell
+ divisions in embryo 3 at high resolution." This is the substrate for
+ §8.1 (plans-as-goals).
+* **LLM-driven candidates** — once the rule-based `ReactiveCandidate`
+ proves the substrate, add Claude-driven candidates (Haiku for cheap,
+ Opus for thinking). Use the snapshot+digest as their input.
+* **Cross-session learning loop** — wire the `learnings/` store into
+ the world model as priors. Add a learning-write surface (a tool the
+ orchestrator can call when it notices a pattern). Use shadow A/B to
+ validate that learnings improve decisions.
+* **Goal-driven evaluation** — once goals exist, "did the experiment
+ achieve its goal" becomes a measurable end-to-end success rate. The
+ ultimate metric is this, not turn-level decision diffs.
+
+---
+
+## 11. Principles That Surface Throughout
+
+A few recurring design priors worth naming:
+
+1. **Distill, don't dump.** Structured summaries beat raw logs in
+ prompts. Hand-written formatters beat LLM summarisers for
+ structured data. LLMs for prose, code for structure.
+2. **Pull beats push when uncertain.** Default to tools the agent
+ queries on demand, not data shoved into every prompt. Push only
+ what's universally relevant (the world snapshot).
+3. **Same shape for production and shadow.** If production writes a
+ Decision with these fields, shadow candidates write Decisions with
+ the same fields. Diff is then trivial.
+4. **Events carry intent; state carries position.** `EMBRYOS_UPDATE`
+ is state (the embryo list now). `OPERATOR_EDITED_EMBRYO` is intent
+ (a human just did this). Both exist; they answer different
+ questions.
+5. **The brain doesn't move hardware.** All hardware action goes
+ through tools that go through the device layer that goes through
+ ophyd that goes through MMCore. Shadow candidates are constructively
+ prevented from acting. Layers are not negotiable.
+6. **No SaveCardSettings.** Firmware persistent state silently inherits
+ between sessions; if it ever gets out of sync with code it's a
+ debugging nightmare. Apply firmware config every boot, code wins.
+7. **Localhost is the diSPIM box. Remote is view-only by default.**
+ Auth surface stays tiny and explicit. Token upgrade is the seam,
+ not user accounts.
+
+---
+
+## 12. Open Questions (Worth Revisiting Later)
+
+* **Continuous vs episodic shadows.** Continuous always-on shadow
+ captures divergence over time but multiplies cost (multiple LLM
+ candidates running). Episodic shadow at decision moments is cheaper
+ but misses timing-sensitive cases. Hybrid?
+* **Is the conversation history the right substrate at all?** With
+ decision moments hours apart, prior chat may be more distracting
+ than useful. Maybe the brain shouldn't see chat history beyond N
+ hours; the world model + events digest are the durable memory and
+ chat is just for the active dialogue.
+* **How much should the operator know about the orchestrator's plan?**
+ Today the operator drives by asking. With autonomous mode, the
+ orchestrator runs experiments largely on its own. Should there be a
+ permanent "what is the orchestrator thinking right now" surface
+ visible on the Map? An always-on intent display?
+* **Failure semantics.** If a candidate would have made a different
+ decision than production, and production's decision led to a bad
+ outcome, the candidate "wins." How do we score? Define "bad outcome"
+ rigorously enough that it can be measured?
+
+These are not blockers. They are notes for the next iteration of this
+document, after a few weeks of running on the substrate built here.
diff --git a/docs/EVAL.md b/docs/EVAL.md
new file mode 100644
index 00000000..73f35b69
--- /dev/null
+++ b/docs/EVAL.md
@@ -0,0 +1,187 @@
+
+
+> **Status:** design + intended usage for the `gently/eval/` capture/replay substrate and the
+> proposed offline replay harness for testing agentic orchestrator patterns. Grounded in the
+> code as of the 0.22 epoch; the harness itself is a work-in-progress (see the incremental plan).
+
+# Testing agentic orchestrator patterns offline (replay harness)
+
+## Goal
+
+We want to iterate on the agent's design — its realtime reasoning and the wake-router that
+turns developmental events into autonomous turns — **without booking a live microscope run**.
+Concretely: take a recorded session, simulate the microscope conditions from its on-disk
+artifacts (captured events, recorded volumes, recorded perception traces), drive the *real*
+`WakeRouter -> run_wake_turn -> Claude` loop offline, and observe/diff what the agent decides.
+This lets us tune wake triggers, coalescing/throttling, prompt construction, and tool policy on
+a laptop, replayed at a controllable clock (e.g. 10x), instead of waiting hours for embryos to
+develop on a live rig.
+
+## What's already in place (reuse)
+
+A real, tested replay/eval substrate shipped in the 0.22 epoch (`gently/eval/`), plus production
+capture wiring. None of this is hypothetical — it's on disk and runnable today:
+
+- **`gently/eval/event_capture.py`** — `EventCapture` wildcard-subscribes the bus and appends every
+ `Event.to_dict()` to `{session_dir}/events.jsonl`. Auto-wired into **every** live session by
+ `gently/app/agent.py` `_init_event_capture()` (line ~506, called at agent init). Skips only
+ `_NO_HISTORY_TYPES` (`DEVICE_STATE_UPDATE`, `BOTTOM_CAMERA_FRAME`, `LOG_RECORD`); `DETECTOR_EVALUATED`
+ and lifecycle events are **not** skipped.
+- **`gently/eval/event_replay.py`** — `EventReplay(path).replay(target_bus, real_time=, time_scale=, on_event=)`
+ republishes each event via `target.publish_event(ev)`, **preserving the original `Event.timestamp`**
+ (not re-stamping `now()`). `real_time=True` sleeps `(ev.timestamp - prev)/time_scale` between events,
+ so cadence is reproducible. `event_types()` gives a pre-flight histogram.
+- **`gently/eval/shadow.py` + `candidates.py`** — `ShadowRunner` + `OrchestratorCandidate` host
+ sandboxed rule-based candidates (e.g. `ReactiveCandidate`) that may *only* write a `DecisionLog`.
+- **`gently/eval/decision_log.py`** — `Decision`/`DecisionLog` + `prompt_hash()` (sha256[:16] over
+ system prompt + messages) for apples-to-apples A/B diffing.
+- **`scripts/replay_session.py`** — working CLI: resolves a session by id-prefix via
+ `FileStore.list_sessions`, prints `--histogram`, or replays `events.jsonl` into a **fresh** `EventBus()`
+ with an optional `NoOpCandidate`.
+- **Recorded perception inputs/outputs** persist via `FileStore` (`gently/core/file_store.py`):
+ `embryos/{id}/volumes/t{NNNN}.tif` + `.meta.yaml`, `projections/t{NNNN}.jpg`,
+ `predictions.jsonl`, and `traces/t{NNNN}.json` (verbatim `predicted_stage`/`reasoning`/`raw_response`/`stability`).
+ Verified on disk: session `68e7dc33` has 9 embryos, 56 predictions on embryo_001, volume
+ `t0001.tif` shape `[50,512,2048]` uint16.
+- **`timeline.jsonl`** (durable, predates eval) carries 256 `detection/evaluated` records on `68e7dc33`
+ with exactly the fields `WakeRouter._is_wake_worthy` reads (`embryo_id`, `timepoint`,
+ `detector_name`, `stage`, `reasoning`) — a fallback event source for pre-eval-scaffold sessions.
+
+### The one central wiring gap
+
+The real agent subscribes its `WakeRouter` to the **global singleton** bus
+(`gently/app/agent.py:126` `self._event_bus = get_event_bus()`; WakeRouter built with that same bus).
+But `scripts/replay_session.py:124` replays into a **fresh** `EventBus()` that the agent never sees.
+**So today's replay reaches shadow candidates but never the real WakeRouter/agent.** Bridging this —
+either `set_event_bus(replay_bus)` before constructing the agent, or replaying into `get_event_bus()`
+directly — is the core seam to build.
+
+## Approaches, compared
+
+### (A) Event-stream replay into the agent's bus — *recommended first*
+Publish recorded `DETECTOR_EVALUATED` + critical events (`HATCHING_DETECTED`, `EMBRYO_TERMINATED`,
+`ERROR_OCCURRED`, …) onto the bus the agent's `WakeRouter` is subscribed to, on a controllable clock.
+
+- **Reuses:** `EventReplay`, `EventCapture` output, the entire real `WakeRouter` (`_is_wake_worthy`
+ filter at wake_router.py:129, coalesce `COALESCE_WINDOW=20s`, throttle `MIN_WAKE_INTERVAL=120s`,
+ `_flush -> agent.run_wake_turn`).
+- **Fidelity:** Exercises the *real* wake path end-to-end: filtering, transition gate, coalescing,
+ throttling, prompt build, and a real Claude turn (`run_wake_turn -> handle_message_stream`, gated on
+ `agent.mode=='run'`). Highest leverage for the least new code.
+- **Effort:** Medium. Needs (1) the bus bridge above; (2) a running asyncio loop so the async dispatch
+ + `loop.call_later` coalesce timers fire (`EventReplay.replay` is a blocking `time.sleep` loop — run it
+ in a thread or port it to `await asyncio.sleep`, and call `bus.set_event_loop(loop)`); (3) a stub
+ client so any tools the woken agent calls don't hit hardware (autonomous mode already refuses
+ irreversible tools via `_autonomous_active`).
+- **Can't catch:** Anything depending on *fresh* perception of new pixels — the wake note embeds
+ `build_perception_snapshot(agent.perceiver, ...)`, which reads **live** Perceiver state, so this
+ approach needs (B) to make that snapshot reflect the replayed timepoint rather than empty state.
+- **Blocker today:** No recorded session yet contains `DETECTOR_EVALUATED` (verified: all 20 captured
+ `events.jsonl` hold only `STATUS_CHANGED`/`EMBRYO_DETECTED`/`EMBRYOS_UPDATE`). Either capture one fresh
+ perception-driven session, or synthesize `DETECTOR_EVALUATED` events from `traces/`+`timeline.jsonl`.
+
+### (B) Perceiver stub — feed recorded traces
+Replace `agent.perceiver`/`orchestrator.perceiver` with a duck-typed stub whose `__call__(...)` returns
+`.stage`/`.reasoning` from `traces/t{NNNN}.json`, and whose `get_session(embryo_id)` returns an object
+with `.stability`/`.summary()` matching what `build_perception_snapshot` reads
+(`current_stage`/`stability`/`temporal`/`stage_sequence`).
+
+- **Reuses:** All downstream code in `_run_perception` (DETECTOR_EVALUATED emit, trace write,
+ `store_prediction`, `_check_interval_rules`) is pure local code; the Perceiver is the *only* external
+ VLM dependency. `perceiver` is already an optional ctor arg (timelapse.py:71).
+- **Fidelity:** Reproduces recorded perception verbatim — no VLM spend, deterministic. Makes (A)'s wake
+ snapshot reflect the replayed timepoint.
+- **Effort:** Low-medium (one stub class).
+- **Can't catch:** Perception on *new* conditions — it only echoes what the recorded run already saw.
+ Also the stub interface was inferred from call sites (`templates.py` `build_perception_snapshot`,
+ `timelapse.py` `_run_perception`), not from `gently_perception` source — **verify against the
+ installed package** before relying on it.
+
+### (C) Full offline re-feed through the timelapse loop
+Inject a fake `microscope_client` whose `acquire_volume(...)` returns
+`{'success': True, 'volume': diSPIM Room Light
+SwitchBot Bot · __ADDRESS__
+
+ —
+
+
+
+
+
+
+
+
+
+
+ fast
+
+ slow
+ 0.7s
+
+
+
+
+
+ $1');
+ html = html.replace(/\*\*([^*]+)\*\*/g, '$1');
+ html = html.replace(/\*([^*]+)\*/g, '$1');
+ html = html.replace(/\n/g, ''); + return html; + } + + // Pin-to-bottom autoscroll: only follow new content if the user is already + // near the bottom; otherwise count unseen items and show a "↓ N new" pill so + // a streaming agent never yanks the operator away from something they're reading. + let stickBottom = true; + let newCount = 0; + let jumpPill = null; + function nearBottom() { return (log.scrollHeight - log.scrollTop - log.clientHeight) < 60; } + function renderJumpPill() { + if (!jumpPill) return; + if (!stickBottom && newCount > 0) { + jumpPill.textContent = `↓ ${newCount} new`; + jumpPill.classList.remove('hidden'); + } else { + jumpPill.classList.add('hidden'); + } + } + function scrollToBottom(isNewItem = true) { + if (stickBottom) { log.scrollTop = log.scrollHeight; } + // Only count genuinely new items (bubbles/rows), not in-place streaming + // text edits — otherwise the "N new" pill inflates per chunk. + else { if (isNewItem) newCount += 1; renderJumpPill(); } + } + function jumpToBottom() { + stickBottom = true; newCount = 0; + log.scrollTop = log.scrollHeight; + renderJumpPill(); + } + + // ── Activity indicator ──────────────────────────────────── + // A single reusable "the agent is working" row, always pinned to the + // bottom of the log. This is the trust signal — something is happening. + function setActivity(label) { + if (!activityEl) { + activityEl = document.createElement('div'); + activityEl.className = 'ac-activity'; + activityEl.innerHTML = + '' + + ''; + } + activityEl.querySelector('.ac-activity-label').textContent = label; + log.appendChild(activityEl); // (re)pin to bottom + scrollToBottom(); + } + function hideActivity() { + if (activityEl && activityEl.parentNode) activityEl.parentNode.removeChild(activityEl); + } + + // ── Message elements ────────────────────────────────────── + function addTurn(role) { + const wrap = document.createElement('div'); + wrap.className = `ac-turn ac-turn-${role}`; + if (role === 'agent' && autonomousTurn) wrap.classList.add('ac-turn-autonomous'); + if (role === 'agent') { + const label = document.createElement('div'); + label.className = 'ac-role'; + label.textContent = autonomousTurn ? 'Gently · autonomous' : 'Gently'; + wrap.appendChild(label); + } + const content = document.createElement('div'); + content.className = 'ac-content'; + wrap.appendChild(content); + log.appendChild(wrap); + scrollToBottom(); + return content; + } + + function addUserMessage(text, author) { + const wrap = document.createElement('div'); + wrap.className = 'ac-turn ac-turn-user'; + if (author) { + const label = document.createElement('div'); + label.className = 'ac-role ac-role-user'; + label.textContent = author; + wrap.appendChild(label); + } + const content = document.createElement('div'); + content.className = 'ac-content'; + content.textContent = text; + wrap.appendChild(content); + log.appendChild(wrap); + scrollToBottom(); + } + + /** Rebuild the transcript from a persisted/replayed history list. */ + function renderHistory(items) { + log.innerHTML = ''; + currentAgentEl = null; + activityEl = null; + stickBottom = true; newCount = 0; // a full rebuild jumps to latest + (items || []).forEach(it => { + if (it.role === 'user') { + addUserMessage(it.text, it.author); + } else if (it.role === 'agent') { + const c = addTurn('agent'); + c._raw = it.text || ''; + c.innerHTML = mdToHtml(c._raw); + } else if (it.role === 'autonomous_start') { + addAutonomousBanner(it.trigger || ''); + } else if (it.role === 'autonomous') { + autonomousTurn = true; + const c = addTurn('agent'); + c._raw = it.text || ''; + c.innerHTML = mdToHtml(c._raw); + autonomousTurn = false; + } else if (it.role === 'tool') { + const el = document.createElement('div'); + el.className = 'ac-tool ac-tool-done'; + const dur = it.duration ? ` · ${(it.duration.toFixed ? it.duration.toFixed(1) : it.duration)}s` : ''; + const summary = it.summary ? ` — ${escapeHtml(it.summary)}` : ''; + el.innerHTML = `✓${escapeHtml(it.name || 'tool')}`; + log.appendChild(el); + } else if (it.role === 'system') { + addSystemLine(it.text, it.level || 'info'); + } + }); + scrollToBottom(); + } + + /** A divider announcing the agent woke itself, with the trigger reason. */ + function addAutonomousBanner(trigger) { + const el = document.createElement('div'); + el.className = 'ac-autonomous-banner'; + const t = trigger ? `Gently woke up — ${trigger}` : 'Gently woke up'; + el.innerHTML = `${escapeHtml(t)}`; + log.appendChild(el); + scrollToBottom(); + } + + function addSystemLine(text, level = 'info') { + const el = document.createElement('div'); + el.className = `ac-system ac-level-${level}`; + el.textContent = text; + log.appendChild(el); + scrollToBottom(); + } + + // ── Protocol handlers ───────────────────────────────────── + function handle(msg) { + switch (msg.type) { + case 'connected': + reconnectDelay = 1000; + setConn(true, msg.version ? `Connected · v${msg.version}` : 'Connected'); + // The bridge ships the command + tool registries on connect. + // Capture them so the composer can offer autocomplete — the + // data was always on the wire; we just never used it. + commands = Array.isArray(msg.commands) ? msg.commands : []; + tools = Array.isArray(msg.tools) ? msg.tools : []; + break; + + case 'control_status': + hasControl = !!msg.you_have_control; + holderLabel = msg.holder_label || null; + renderControl(); + break; + + case 'history': + renderHistory(msg.items || []); + break; + + case 'user_message': + hideActivity(); + addUserMessage(msg.text, msg.author); + break; + + case 'stream_start': + streaming = true; + currentAgentEl = null; // created lazily on first text + setBusy(true, 'user'); + setActivity('Working…'); + break; + + case 'autonomous_start': + // The agent woke itself — render a distinct banner + label the + // following text as autonomous (no stream_start precedes this). + hideActivity(); + autonomousTurn = true; + currentAgentEl = null; + setBusy(true, 'wake'); + addAutonomousBanner(msg.trigger || ''); + bumpBadge(); + break; + + case 'thinking': + if (streaming) setActivity('Thinking…'); + break; + + case 'text': { + if (!currentAgentEl) { + hideActivity(); + currentAgentEl = addTurn('agent'); + currentAgentEl._raw = ''; + } + currentAgentEl._raw += (msg.text || ''); + currentAgentEl.innerHTML = mdToHtml(currentAgentEl._raw); + scrollToBottom(false); // in-place edit, not a new item + break; + } + + case 'tool_start': { + hideActivity(); // the running tool row is the signal now + currentAgentEl = null; // text after a tool starts a fresh bubble + const label = msg.tool_label || msg.tool_name || 'tool'; + const args = fmtArgs(msg.tool_input); + const el = document.createElement('div'); + el.className = 'ac-tool ac-tool-running'; + el.dataset.tool = msg.tool_name || ''; + el.innerHTML = + `
` +
+ `${escapeHtml(label)}
` +
+ (args ? `${escapeHtml(args)}
` : '');
+ log.appendChild(el);
+ scrollToBottom();
+ break;
+ }
+
+ case 'tool_call': {
+ const running = [...log.querySelectorAll('.ac-tool-running')]
+ .filter(e => e.dataset.tool === (msg.tool_name || ''));
+ const el = running[running.length - 1];
+ const label = msg.tool_name || 'tool';
+ const dur = msg.duration
+ ? ` · ${(msg.duration.toFixed ? msg.duration.toFixed(1) : msg.duration)}s` : '';
+ const args = fmtArgs(msg.tool_input);
+ const summary = msg.result_summary || '';
+ // Show ⚠ instead of ✓ when the tool errored or its result reads
+ // like a failure — so the operator can tell when a tool did nothing.
+ const isErr = !!msg.is_error || looksLikeError(summary);
+ const icon = isErr
+ ? `⚠`
+ : `✓`;
+ const html =
+ `${icon}` +
+ `${escapeHtml(label)}` +
+ `
` +
+ (args ? `${escapeHtml(args)}
` : '') +
+ (summary ? `${escapeHtml(summary)}
` : '');
+ if (el) {
+ el.className = 'ac-tool ac-tool-done' + (isErr ? ' ac-tool-err' : '');
+ el.innerHTML = html;
+ } else {
+ // No matching running row (e.g. after a reconnect) — append fresh.
+ const fresh = document.createElement('div');
+ fresh.className = 'ac-tool ac-tool-done' + (isErr ? ' ac-tool-err' : '');
+ fresh.innerHTML = html;
+ log.appendChild(fresh);
+ }
+ if (streaming) setActivity('Working…'); // agent continues after the tool
+ scrollToBottom();
+ break;
+ }
+
+ case 'choice_request':
+ hideActivity();
+ renderChoice(msg);
+ bumpBadge();
+ break;
+
+ case 'applied_spec':
+ renderSpec(msg.spec || {});
+ break;
+
+ case 'stream_end':
+ streaming = false;
+ currentAgentEl = null;
+ autonomousTurn = false;
+ hideActivity();
+ setBusy(false);
+ break;
+
+ case 'command_result':
+ if (msg.error) addSystemLine(`${msg.command}: ${msg.error}`, 'error');
+ else if (msg.content) addSystemLine(`${msg.command} ✓`, 'info');
+ break;
+
+ case 'notification':
+ addSystemLine(msg.body ? `${msg.title} — ${msg.body}` : msg.title, msg.level || 'info');
+ bumpBadge();
+ break;
+
+ case 'error':
+ streaming = false;
+ hideActivity();
+ setBusy(false);
+ addSystemLine(msg.error || 'Unknown error', 'error');
+ break;
+
+ case 'ping':
+ send({ type: 'pong' });
+ break;
+
+ default:
+ break; // pong / state_update / browse_result / unknown — ignored
+ }
+ }
+
+ function renderChoice(msg) {
+ const data = msg.choice_data || {};
+ const reqId = msg.request_id || data.request_id || '';
+ const isWake = msg.origin === 'wake';
+ const wrap = document.createElement('div');
+ wrap.className = 'ac-choice' + (isWake ? ' ac-choice-wake' : '');
+ if (isWake) {
+ const tag = document.createElement('div');
+ tag.className = 'ac-choice-origin';
+ tag.textContent = 'Autonomy proposal — your approval needed';
+ wrap.appendChild(tag);
+ }
+ const q = document.createElement('div');
+ q.className = 'ac-choice-q';
+ q.innerHTML = mdToHtml(data.question || 'Choose:');
+ wrap.appendChild(q);
+
+ (data.options || []).forEach(opt => {
+ const btn = document.createElement('button');
+ btn.className = 'ac-choice-opt';
+ btn.disabled = !!opt.disabled || !hasControl; // observers see it read-only
+ const desc = opt.description ? `${escapeHtml(opt.description)}` : '';
+ btn.innerHTML = `${escapeHtml(opt.label)}${desc}`;
+ btn.addEventListener('click', () => {
+ send({ type: 'choice_response', request_id: reqId, selected: opt.id });
+ [...wrap.querySelectorAll('button')].forEach(b => b.disabled = true);
+ wrap.classList.add('ac-choice-answered');
+ btn.classList.add('ac-choice-picked');
+ if (streaming) setActivity('Working…');
+ if (isWake && pendingSlot) {
+ setTimeout(() => { pendingSlot.classList.add('hidden'); pendingSlot.innerHTML = ''; }, 700);
+ }
+ });
+ wrap.appendChild(btn);
+ });
+ // ASK approvals pin to the sticky slot above the composer so they can't
+ // scroll out of reach; ordinary choices stay inline in the transcript.
+ if (isWake && pendingSlot) {
+ pendingSlot.innerHTML = '';
+ pendingSlot.appendChild(wrap);
+ pendingSlot.classList.remove('hidden');
+ return;
+ }
+ log.appendChild(wrap);
+ scrollToBottom();
+ }
+
+ function renderSpec(spec) {
+ const rows = [];
+ const add = (k, v) => { if (v !== undefined && v !== null && v !== '') rows.push([k, v]); };
+ add('Strain', spec.strain);
+ add('Temperature', spec.temperature_c != null ? `${spec.temperature_c} °C` : null);
+ add('Slices', spec.num_slices);
+ add('Exposure', spec.exposure_ms != null ? `${spec.exposure_ms} ms` : null);
+ add('Interval', spec.interval_s != null ? `${spec.interval_s} s` : null);
+ add('Stop at', spec.stop_condition);
+ if (!rows.length) return;
+ const el = document.createElement('div');
+ el.className = 'ac-spec';
+ el.innerHTML = 'Imaging spec applied
' +
+ rows.map(([k, v]) => `${escapeHtml(k)}${escapeHtml(v)}
`).join('');
+ log.appendChild(el);
+ scrollToBottom();
+ }
+
+ // ── Tool argument formatting ──────────────────────────────
+ /** Compact, escaped "key=value" rendering of a tool's input for the chat. */
+ function fmtArgs(input) {
+ if (!input || typeof input !== 'object') return '';
+ const parts = [];
+ for (const [k, v] of Object.entries(input)) {
+ if (k === 'context' || v === null || v === undefined || v === '') continue;
+ let val = (typeof v === 'object') ? JSON.stringify(v) : String(v);
+ if (val.length > 48) val = val.slice(0, 47) + '…';
+ parts.push(`${k}=${val}`);
+ }
+ return parts.join(' ');
+ }
+
+ /** Heuristic: does a tool's result summary read like a failure?
+ * Used to show ⚠ for tools that return an error STRING (the agent only
+ * flags raised exceptions). Avoids false alarms like "No errors found". */
+ function looksLikeError(s) {
+ if (!s) return false;
+ const t = s.trim();
+ if (/^no\s+(errors?|issues?|problems?|anomal|changes?|warnings?)\b/i.test(t)) return false;
+ if (/^(error|failed|failure|unable|cannot|can'?t|could\s?n'?t|could not|denied|invalid|no |not )/i.test(t)) return true;
+ // mid-string failure markers, e.g. "Timepoint 7 not found for embryo_2".
+ return /\bnot (found|available|connected|recognized|valid|supported)\b/i.test(t);
+ }
+
+ // ── Autocomplete ──────────────────────────────────────────
+ /** The whitespace-delimited token immediately left of the caret. */
+ function currentToken() {
+ const v = input.value;
+ const pos = (input.selectionStart != null) ? input.selectionStart : v.length;
+ const before = v.slice(0, pos);
+ const m = before.match(/(\S+)$/);
+ return { token: m ? m[1] : '', start: m ? pos - m[1].length : pos, pos };
+ }
+
+ /** Compute completion items for the current input/caret, or []. */
+ function computeCompletions() {
+ const trimmed = input.value.trimStart().toLowerCase();
+ // Slash commands: whole-input prefix (mirrors the TUI). A trailing space
+ // (i.e. typing args) naturally yields no matches and hides the menu.
+ if (trimmed.startsWith('/')) {
+ return commands.filter(c =>
+ (c.name && c.name.toLowerCase().startsWith(trimmed)) ||
+ (c.aliases || []).some(a => String(a).toLowerCase().startsWith(trimmed))
+ ).slice(0, 8).map(c => ({ kind: 'command', name: c.name, desc: c.description || '' }));
+ }
+ // @tool mention: complete the token under the caret against tool names.
+ const tok = currentToken();
+ if (tok.token.startsWith('@') && tools.length) {
+ const q = tok.token.slice(1).toLowerCase();
+ return tools.filter(t => t.name.toLowerCase().includes(q))
+ .slice(0, 8)
+ .map(t => ({ kind: 'tool', name: t.name, desc: t.description || '', token: tok }));
+ }
+ return [];
+ }
+
+ function renderCompletions(items) {
+ acItems = items || [];
+ acIdx = acItems.length ? 0 : -1;
+ if (!acComplete) return;
+ if (!acItems.length) { hideCompletions(); return; }
+ acComplete.innerHTML = '';
+ acItems.forEach((it, i) => {
+ const row = document.createElement('div');
+ row.className = 'ac-complete-item' + (i === acIdx ? ' active' : '');
+ row.innerHTML =
+ `${escapeHtml(it.name)}` +
+ (it.desc ? `${escapeHtml(it.desc)}` : '');
+ // mousedown (not click) so it fires before the textarea blurs.
+ row.addEventListener('mousedown', (e) => { e.preventDefault(); acceptCompletion(it); });
+ acComplete.appendChild(row);
+ });
+ acComplete.classList.remove('hidden');
+ }
+
+ function hideCompletions() {
+ acItems = [];
+ acIdx = -1;
+ if (acComplete) { acComplete.classList.add('hidden'); acComplete.innerHTML = ''; }
+ }
+
+ function updateCompletions() {
+ renderCompletions(computeCompletions());
+ }
+
+ function moveCompletion(delta) {
+ if (!acItems.length || !acComplete) return;
+ acIdx = (acIdx + delta + acItems.length) % acItems.length;
+ [...acComplete.children].forEach((c, i) => c.classList.toggle('active', i === acIdx));
+ }
+
+ function acceptCompletion(item) {
+ if (!item) return;
+ if (item.kind === 'command') {
+ input.value = item.name + ' ';
+ const p = input.value.length;
+ try { input.setSelectionRange(p, p); } catch (_) {}
+ } else if (item.kind === 'tool') {
+ const tok = item.token || currentToken();
+ const v = input.value;
+ const insert = '@' + item.name + ' ';
+ input.value = v.slice(0, tok.start) + insert + v.slice(tok.pos);
+ const p = tok.start + insert.length;
+ try { input.setSelectionRange(p, p); } catch (_) {}
+ }
+ hideCompletions();
+ input.focus();
+ autosize();
+ }
+
+ // ── Control / UI state ────────────────────────────────────
+ function renderControl() {
+ if (hasControl) {
+ banner.classList.add('hidden');
+ banner.innerHTML = '';
+ input.disabled = false;
+ sendBtn.disabled = false;
+ input.placeholder = 'Message Gently… ( / commands · @ tools )';
+ } else {
+ banner.classList.remove('hidden');
+ const who = holderLabel || 'another session';
+ input.disabled = true;
+ sendBtn.disabled = true;
+ if (me && me.accounts && !me.authenticated) {
+ // Anonymous — viewing is open; sign in to control.
+ banner.innerHTML = `Viewing — sign in to control.`;
+ const btn = document.createElement('button');
+ btn.className = 'ac-take-control';
+ btn.textContent = 'Sign in';
+ btn.addEventListener('click', () => { window.location.href = '/login'; });
+ banner.appendChild(btn);
+ input.placeholder = 'Viewing — sign in to control…';
+ } else if (me && me.authenticated && me.can_control === false) {
+ // Viewer-role account — watching is all this account can do.
+ banner.innerHTML = `View-only access — you can watch but not control.`;
+ input.placeholder = 'View-only access';
+ } else {
+ banner.innerHTML = `Control held by ${escapeHtml(who)}`;
+ const btn = document.createElement('button');
+ btn.className = 'ac-take-control';
+ btn.textContent = 'Take control';
+ btn.addEventListener('click', () => send({ type: 'take_control' }));
+ banner.appendChild(btn);
+ input.placeholder = 'Viewing only — take control to drive…';
+ }
+ }
+ }
+
+ function setBusy(busy, source) {
+ agentBusy = !!busy;
+ busySource = agentBusy ? (source || 'user') : null;
+ // Send no longer doubles as Stop — it queues while busy. A separate Stop
+ // (shown only for a cancellable user turn) aborts the current turn.
+ if (stopBtn) stopBtn.classList.toggle('hidden', !(agentBusy && busySource === 'user'));
+ sendBtn.classList.toggle('ac-busy', agentBusy);
+ if (agentBusy) {
+ input.placeholder = (busySource === 'wake')
+ ? 'Gently is acting autonomously — your message will queue'
+ : 'Gently is working — your message will queue';
+ } else {
+ if (hasControl) input.placeholder = 'Message Gently… ( / commands · @ tools )';
+ drainQueue(); // a turn just ended — send the next queued message
+ }
+ }
+
+ // ── Message queue (type-while-busy) ───────────────────────
+ function enqueue(text) { msgQueue.push(text); renderQueue(); }
+ function removeQueued(i) {
+ if (i >= 0 && i < msgQueue.length) { msgQueue.splice(i, 1); renderQueue(); }
+ }
+ function clearQueue() { msgQueue = []; renderQueue(); }
+ function drainQueue() {
+ if (agentBusy || !msgQueue.length) return;
+ if (!ws || ws.readyState !== WebSocket.OPEN) return; // keep queued until reconnect
+ const next = msgQueue.shift();
+ renderQueue();
+ actuallySend(next);
+ }
+ function renderQueue() {
+ if (!queuePanel) return;
+ if (!msgQueue.length) { queuePanel.classList.add('hidden'); queuePanel.innerHTML = ''; return; }
+ queuePanel.classList.remove('hidden');
+ queuePanel.innerHTML = '';
+ const head = document.createElement('div');
+ head.className = 'ac-queue-head';
+ const lbl = document.createElement('span');
+ lbl.textContent = `⏳ Queued (${msgQueue.length})`;
+ const clear = document.createElement('button');
+ clear.className = 'ac-queue-clear';
+ clear.textContent = 'Clear all';
+ clear.addEventListener('click', clearQueue);
+ head.appendChild(lbl);
+ head.appendChild(clear);
+ queuePanel.appendChild(head);
+ msgQueue.forEach((m, i) => {
+ const row = document.createElement('div');
+ row.className = 'ac-queue-item';
+ const span = document.createElement('span');
+ span.className = 'ac-queue-text';
+ span.textContent = m;
+ const x = document.createElement('button');
+ x.className = 'ac-queue-remove';
+ x.textContent = '✕';
+ x.title = 'Remove from queue';
+ x.addEventListener('click', () => removeQueued(i));
+ row.appendChild(span);
+ row.appendChild(x);
+ queuePanel.appendChild(row);
+ });
+ }
+
+ function setConn(ok, label) {
+ conn.classList.toggle('ac-conn-ok', ok);
+ conn.classList.toggle('ac-conn-bad', !ok);
+ conn.textContent = label || (ok ? 'Connected' : 'Reconnecting…');
+ if (toggleDot) toggleDot.classList.toggle('ok', ok);
+ }
+
+ // ── Transport ─────────────────────────────────────────────
+ function send(obj) {
+ if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
+ }
+
+ function connect() {
+ const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+ setConn(false, 'Connecting…');
+ ws = new WebSocket(`${proto}//${location.host}/ws/agent`);
+ ws.onopen = () => { reconnectDelay = 1000; setConn(true); };
+ ws.onclose = () => {
+ setConn(false, 'Reconnecting…');
+ setBusy(false);
+ streaming = false;
+ hideActivity();
+ setTimeout(connect, reconnectDelay);
+ reconnectDelay = Math.min(reconnectDelay * 2, MAX_DELAY);
+ };
+ ws.onerror = () => {};
+ ws.onmessage = (e) => {
+ let msg;
+ try { msg = JSON.parse(e.data); } catch { return; }
+ handle(msg);
+ };
+ }
+
+ // ── Input handling ────────────────────────────────────────
+ function actuallySend(text) {
+ if (text.startsWith('/')) {
+ addUserMessage(text); // commands aren't broadcast; echo locally
+ send({ type: 'command', command: text }); // slash commands (e.g. /status)
+ // Most commands reply with a single 'command_result' and no stream —
+ // do NOT mark the composer busy, or the queue would stick forever.
+ // Commands that DO stream (e.g. /wizard) set busy via stream_start.
+ return;
+ }
+ send({ type: 'chat', text }); // echoed to all via 'user_message'
+ // Instant feedback before the first chunk arrives.
+ setBusy(true, 'user');
+ setActivity('Working…');
+ }
+
+ function submit() {
+ hideCompletions();
+ const text = input.value.trim();
+ if (!text) return;
+ if (!hasControl) { renderControl(); return; }
+ input.value = '';
+ autosize();
+ // While the agent is busy (a user OR autonomous turn), queue instead of
+ // cancelling — Send no longer doubles as Stop.
+ if (agentBusy) { enqueue(text); return; }
+ actuallySend(text);
+ }
+
+ function autosize() {
+ input.style.height = 'auto';
+ input.style.height = Math.min(input.scrollHeight, 140) + 'px';
+ }
+
+ function togglePanel(open) {
+ panelOpen = (open === undefined) ? !panelOpen : open;
+ panel.classList.toggle('open', panelOpen);
+ if (toggleBtn) {
+ toggleBtn.setAttribute('aria-pressed', panelOpen ? 'true' : 'false');
+ toggleBtn.setAttribute('aria-expanded', panelOpen ? 'true' : 'false');
+ }
+ if (panelOpen) {
+ clearBadge();
+ if (!ws) connect();
+ // Re-pin to the latest content (it may have streamed while closed,
+ // where scroll events don't fire to keep stickBottom current).
+ setTimeout(() => { input.focus(); jumpToBottom(); }, 50);
+ }
+ // Opening/closing while docked reflows .app-main — tell viewers to resize.
+ if (document.body.classList.contains('chat-docked')) emitLayoutChanged();
+ }
+
+ // ── Layout: dock, resize, persistence ─────────────────────
+ const CHAT_MIN_W = 320;
+ const CHAT_DEFAULT_W = 460;
+ // Roomy ceiling: the panel shows agent reasoning, tool calls, approvals and
+ // pickers — content that wraps badly in a narrow column — so allow up to
+ // ~half the viewport (was min(560, 45vw), which capped power users too low).
+ function chatMaxW() { return Math.min(760, Math.round(window.innerWidth * 0.60)); }
+
+ function emitLayoutChanged() {
+ // Let the CSS settle, then notify viewers (e.g. the 3D canvas) to resize.
+ requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('gently:layout-changed')));
+ }
+
+ function curChatWidth() {
+ return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--chat-w')) || CHAT_DEFAULT_W;
+ }
+
+ function setChatWidth(px, persist) {
+ const w = Math.max(CHAT_MIN_W, Math.min(chatMaxW(), Math.round(px)));
+ document.documentElement.style.setProperty('--chat-w', w + 'px');
+ if (persist) { try { localStorage.setItem('gently-chat-w', String(w)); } catch (_) {} }
+ return w;
+ }
+
+ function applyDock(docked, persist) {
+ document.body.classList.toggle('chat-docked', docked);
+ if (pinBtn) {
+ pinBtn.setAttribute('aria-pressed', docked ? 'true' : 'false');
+ pinBtn.title = docked ? 'Unpin (float over content)' : 'Pin to dock';
+ }
+ if (persist) { try { localStorage.setItem('gently-chat-docked', docked ? '1' : '0'); } catch (_) {} }
+ // Suppress the slide animation across the mode flip, then notify viewers.
+ panel.style.transition = 'none';
+ requestAnimationFrame(() => { panel.style.transition = ''; emitLayoutChanged(); });
+ }
+
+ function togglePin() {
+ const docked = !document.body.classList.contains('chat-docked');
+ if (docked && !panelOpen) togglePanel(true); // pinning implies showing
+ applyDock(docked, true);
+ }
+
+ function setupResize() {
+ if (!resizeEl) return;
+ let startX = 0, startW = 0, dragging = false, rafId = 0, pid = null;
+ const onMove = (e) => {
+ if (!dragging) return;
+ setChatWidth(startW + (startX - e.clientX), false); // right panel: drag left = wider
+ if (document.body.classList.contains('chat-docked')) {
+ if (rafId) cancelAnimationFrame(rafId);
+ rafId = requestAnimationFrame(emitLayoutChanged); // coalesce dock reflow
+ }
+ };
+ const onUp = () => {
+ if (!dragging) return;
+ dragging = false;
+ resizeEl.classList.remove('dragging');
+ resizeEl.removeEventListener('pointermove', onMove);
+ resizeEl.removeEventListener('pointerup', onUp);
+ resizeEl.removeEventListener('pointercancel', onUp);
+ if (pid !== null && resizeEl.hasPointerCapture && resizeEl.hasPointerCapture(pid)) {
+ try { resizeEl.releasePointerCapture(pid); } catch (_) {}
+ }
+ pid = null;
+ document.body.style.userSelect = '';
+ setChatWidth(curChatWidth(), true);
+ emitLayoutChanged();
+ };
+ resizeEl.addEventListener('pointerdown', (e) => {
+ if (e.button !== 0) return; // primary button only
+ e.preventDefault();
+ dragging = true;
+ startX = e.clientX;
+ startW = curChatWidth();
+ pid = e.pointerId;
+ // Capture so move/up/cancel always reach the handle (touch/pen-safe).
+ try { resizeEl.setPointerCapture(pid); } catch (_) {}
+ resizeEl.classList.add('dragging');
+ document.body.style.userSelect = 'none';
+ resizeEl.addEventListener('pointermove', onMove);
+ resizeEl.addEventListener('pointerup', onUp);
+ resizeEl.addEventListener('pointercancel', onUp);
+ });
+ resizeEl.addEventListener('dblclick', () => { setChatWidth(CHAT_DEFAULT_W, true); emitLayoutChanged(); });
+ }
+
+ function restorePrefs() {
+ try {
+ const w = parseInt(localStorage.getItem('gently-chat-w'));
+ if (w) setChatWidth(w, false);
+ if (localStorage.getItem('gently-chat-docked') === '1') applyDock(true, false);
+ } catch (_) {}
+ }
+
+ // Unseen-activity badge on the header toggle — so a closed panel still tells
+ // the operator the agent did something (woke, proposed an approval, notified).
+ let badgeCount = 0;
+ function bumpBadge() {
+ if (panelOpen) return; // they're watching; no badge needed
+ badgeCount += 1;
+ if (toggleBadge) {
+ toggleBadge.textContent = badgeCount > 9 ? '9+' : String(badgeCount);
+ toggleBadge.classList.remove('hidden');
+ }
+ }
+ function clearBadge() {
+ badgeCount = 0;
+ if (toggleBadge) { toggleBadge.classList.add('hidden'); toggleBadge.textContent = ''; }
+ }
+
+ // ── Identity ──────────────────────────────────────────────
+ function fetchMe() {
+ fetch('/api/auth/me').then(r => r.json()).then(m => {
+ me = m;
+ if (m && m.authenticated) {
+ userEl.textContent = m.username;
+ userEl.title = `Signed in as ${m.username} (${m.role})`;
+ signoutBtn.textContent = 'Sign out';
+ signoutBtn.dataset.action = 'logout';
+ signoutBtn.style.display = '';
+ } else if (m && m.accounts) {
+ // Anonymous — viewing is open; sign in to gain control.
+ userEl.textContent = 'viewing';
+ userEl.title = 'Not signed in — view-only';
+ signoutBtn.textContent = 'Sign in';
+ signoutBtn.dataset.action = 'login';
+ signoutBtn.style.display = '';
+ } else {
+ // No accounts configured (legacy mode).
+ userEl.textContent = '';
+ signoutBtn.style.display = 'none';
+ }
+ renderControl();
+ }).catch(() => {});
+ }
+
+ // ── Init ──────────────────────────────────────────────────
+ function init() {
+ panel = document.getElementById('agent-chat');
+ log = document.getElementById('agent-chat-log');
+ input = document.getElementById('agent-chat-text');
+ sendBtn = document.getElementById('agent-chat-send');
+ conn = document.getElementById('agent-chat-conn');
+ banner = document.getElementById('agent-control-banner');
+ closeBtn = document.getElementById('agent-chat-close');
+ userEl = document.getElementById('agent-chat-user');
+ signoutBtn = document.getElementById('agent-chat-signout');
+ toggleBtn = document.getElementById('agent-chat-toggle');
+ pinBtn = document.getElementById('agent-chat-pin');
+ resizeEl = document.getElementById('agent-chat-resize');
+ toggleDot = document.getElementById('agent-chat-toggle-dot');
+ toggleBadge = document.getElementById('agent-chat-toggle-badge');
+ if (!panel) return; // markup not present
+
+ restorePrefs();
+ if (toggleBtn) toggleBtn.addEventListener('click', () => togglePanel());
+ closeBtn.addEventListener('click', () => togglePanel(false));
+ if (pinBtn) pinBtn.addEventListener('click', togglePin);
+ setupResize();
+ // Ctrl/Cmd+J toggles the panel from anywhere.
+ document.addEventListener('keydown', (e) => {
+ if ((e.ctrlKey || e.metaKey) && (e.key === 'j' || e.key === 'J')) {
+ e.preventDefault(); // suppress browser default (downloads) always
+ if (e.repeat) return; // ignore held-key auto-repeat
+ if (document.activeElement === input) return; // don't toggle while composing
+ togglePanel();
+ }
+ });
+ signoutBtn.addEventListener('click', async () => {
+ if (signoutBtn.dataset.action === 'login') {
+ window.location.href = '/login';
+ return;
+ }
+ try { await fetch('/api/auth/logout', { method: 'POST' }); } catch (_) {}
+ window.location.reload();
+ });
+ fetchMe();
+
+ // Build the autocomplete dropdown inside the composer (positioned above
+ // the textarea via CSS).
+ const inputWrap = input.parentNode;
+ if (inputWrap) {
+ acComplete = document.createElement('div');
+ acComplete.className = 'ac-complete hidden';
+ inputWrap.insertBefore(acComplete, inputWrap.firstChild);
+
+ // Queued-message panel (above the composer) for type-while-busy.
+ queuePanel = document.createElement('div');
+ queuePanel.className = 'ac-queue hidden';
+ if (inputWrap.parentNode) inputWrap.parentNode.insertBefore(queuePanel, inputWrap);
+
+ // Explicit Stop button — shown only during a cancellable user turn.
+ stopBtn = document.createElement('button');
+ stopBtn.className = 'ac-stop hidden';
+ stopBtn.textContent = 'Stop';
+ stopBtn.title = 'Stop the current turn';
+ stopBtn.addEventListener('click', () => { send({ type: 'cancel' }); setBusy(false); });
+ inputWrap.appendChild(stopBtn);
+
+ // Sticky ASK-approval slot — above the queue + composer, never scrolls away.
+ pendingSlot = document.createElement('div');
+ pendingSlot.className = 'ac-pending hidden';
+ if (inputWrap.parentNode) inputWrap.parentNode.insertBefore(pendingSlot, queuePanel);
+ }
+
+ // "↓ N new" jump pill + pin-to-bottom scroll tracking.
+ jumpPill = document.createElement('button');
+ jumpPill.className = 'ac-jump hidden';
+ jumpPill.addEventListener('click', jumpToBottom);
+ panel.appendChild(jumpPill);
+ log.addEventListener('scroll', () => {
+ stickBottom = nearBottom();
+ if (stickBottom) newCount = 0;
+ renderJumpPill();
+ });
+
+ sendBtn.addEventListener('click', submit);
+ input.addEventListener('input', () => { autosize(); updateCompletions(); });
+ // Close the menu shortly after blur (delay lets a mousedown selection land).
+ input.addEventListener('blur', () => setTimeout(hideCompletions, 120));
+ input.addEventListener('keydown', (e) => {
+ // While the completion menu is open it owns the navigation keys.
+ if (acItems.length) {
+ if (e.key === 'ArrowDown') { e.preventDefault(); moveCompletion(1); return; }
+ if (e.key === 'ArrowUp') { e.preventDefault(); moveCompletion(-1); return; }
+ if (e.key === 'Tab') { e.preventDefault(); acceptCompletion(acItems[acIdx]); return; }
+ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); acceptCompletion(acItems[acIdx]); return; }
+ if (e.key === 'Escape') { e.preventDefault(); hideCompletions(); return; }
+ }
+ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
+ // Escape mirrors Stop: cancel a cancellable (user) turn and clear busy
+ // (a cancelled turn emits no stream_end, so clear optimistically).
+ if (e.key === 'Escape' && agentBusy && busySource === 'user') {
+ e.preventDefault(); send({ type: 'cancel' }); setBusy(false);
+ }
+ });
+ }
+
+ document.addEventListener('DOMContentLoaded', init);
+
+ // Public: programmatically send a message/command (e.g. the Home page's
+ // "Start / continue an experiment" button sends '/wizard').
+ function runCommand(text) {
+ if (!text) return;
+ if (!hasControl) { renderControl(); return; }
+ actuallySend(text);
+ }
+
+ return { togglePanel, runCommand };
+})();
diff --git a/gently/ui/web/static/js/app.js b/gently/ui/web/static/js/app.js
index 203cea04..d1e75a72 100644
--- a/gently/ui/web/static/js/app.js
+++ b/gently/ui/web/static/js/app.js
@@ -6,7 +6,7 @@
const state = {
ws: null,
connected: false,
- tab: TABS.EMBRYOS, // Default to Embryos tab
+ tab: TABS.HOME, // Default to the Home landing tab
snapshots: [],
calibration: [],
embryos: [],
@@ -71,6 +71,9 @@ function switchTab(tabName) {
const content = document.getElementById(`${tabName}-content`);
if (content) content.classList.add('active');
+ // Lazy-init Home landing tab
+ if (tabName === TABS.HOME && typeof HomeApp !== 'undefined') HomeApp.init();
+
// Render galleries
if (tabName === TABS.CALIBRATION) renderCalibrationGallery();
if (tabName === TABS.EVENTS) renderEventsTable();
@@ -631,7 +634,7 @@ document.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash.slice(1); // remove #
if (hash) {
const [tab, param] = hash.split(':');
- if (tab === TABS.PLANS || tab === TABS.SESSIONS || tab === TABS.EMBRYOS || tab === TABS.CALIBRATION || tab === TABS.EVENTS || tab === TABS.EXPERIMENT) {
+ if (tab === TABS.HOME || tab === TABS.PLANS || tab === TABS.SESSIONS || tab === TABS.EMBRYOS || tab === TABS.CALIBRATION || tab === TABS.EVENTS || tab === TABS.EXPERIMENT) {
switchTab(tab);
if (tab === TABS.PLANS && param && typeof openCampaign === 'function') {
setTimeout(() => openCampaign(param), 200);
diff --git a/gently/ui/web/static/js/devices.js b/gently/ui/web/static/js/devices.js
index 0f2f5316..27bc12c3 100644
--- a/gently/ui/web/static/js/devices.js
+++ b/gently/ui/web/static/js/devices.js
@@ -32,11 +32,14 @@ const DevicesManager = (function () {
let _mapWrap;
let _scalebarLabel;
- // Embryos overlay state: list of {embryo_id, x, y, role, ...}.
- // Populated by /api/embryos/positions on init + EMBRYO_DETECTED /
- // STATUS_CHANGED WS pushes thereafter. Roles drive the marker color
+ // Embryo waypoints — driven by EMBRYOS_UPDATE events (the canonical bulk
+ // mutation broadcast added by the embryos-broadcast commit) and the
+ // initial /api/embryos/current snapshot. Each entry mirrors
+ // EmbryoState.to_dict() (id, position_coarse, position_fine,
+ // has_fine_position, nickname, role, ...). Role drives marker color
// (mirrors the marking-window legend: magenta=test, cyan=calibration,
- // grey=unassigned).
+ // grey=unassigned). EMBRYO_DETECTED / STATUS_CHANGED listeners stay
+ // hooked as a belt-and-braces refresh path.
let _embryos = [];
const _ROLE_COLOR = {
test: '#ff66cc',
@@ -44,8 +47,14 @@ const DevicesManager = (function () {
unassigned: '#888888',
};
+ // Map-side edit state. _selectedEmbryoId means "picked up": the next
+ // click on empty map space drops it there (with a confirm), Delete /
+ // Backspace removes it (with a confirm), Escape clears the selection.
+ let _selectedEmbryoId = null;
+
// Bottom-camera panel DOM + state
let _camPanel, _camToggle, _camImg, _camPlaceholder, _camLed, _camMeta;
+ let _camStage, _camCrosshair, _camCrosshairGroup;
let _camStreaming = false;
let _camLastFrameTs = 0;
let _camHasFrame = false;
@@ -53,6 +62,25 @@ const DevicesManager = (function () {
const _CAM_FPS_WINDOW = 12;
let _camFrameTimes = [];
+ // Camera zoom / pan. Identity transform = (zoom 1, tx 0, ty 0); pan only
+ // engages once zoom > 1. Reset on double-click and on stream-off.
+ let _camZoom = 1;
+ let _camTx = 0;
+ let _camTy = 0;
+ let _camPanLast = null; // {x, y} clientX/Y of last pointermove during pan
+ const _CAM_ZOOM_MIN = 1;
+ const _CAM_ZOOM_MAX = 8;
+ const _CAM_ZOOM_STEP = 1.15; // multiplicative per wheel notch
+
+ // Room-light toggle (header). Drives the SwitchBot Bot that switches the
+ // diSPIM room light. State is the bot's cached on/off; hidden until the
+ // device layer reports the accessory is configured.
+ let _roomLightToggle, _roomLightLabel;
+ let _roomLightState = 'unknown';
+ let _roomLightAvailable = false;
+ let _roomLightBusy = false;
+ let _roomLightTimer = null;
+
let _lastTs = 0;
let _previousTs = 0;
let _lastWallTs = 0;
@@ -110,9 +138,15 @@ const DevicesManager = (function () {
_camToggle = document.getElementById('devices-camera-toggle');
_camImg = document.getElementById('devices-camera-img');
_camPlaceholder = document.getElementById('devices-camera-placeholder');
+ _camStage = _camPanel ? _camPanel.querySelector('.devices-camera-stage') : null;
+ _camCrosshair = document.getElementById('devices-camera-crosshair');
+ _camCrosshairGroup = document.getElementById('devices-camera-crosshair-group');
_camLed = document.getElementById('devices-camera-led');
_camMeta = document.getElementById('devices-camera-meta');
+ _roomLightToggle = document.getElementById('devices-room-light-toggle');
+ _roomLightLabel = document.getElementById('devices-room-light-label');
+
// Recompute the scale bar caption whenever the canvas resizes.
if (_mapSvg && window.ResizeObserver) {
new ResizeObserver(() => updateScalebar()).observe(_mapSvg);
@@ -257,6 +291,30 @@ const DevicesManager = (function () {
}
}
+ // Initial embryo snapshot — closes the gap for clients that connect
+ // mid-session, after the last EMBRYOS_UPDATE has already been broadcast
+ // and aged out of history. Subsequent updates arrive over the event bus.
+ async function loadEmbryosSnapshot() {
+ try {
+ const res = await fetch('/api/embryos/current');
+ if (!res.ok) return;
+ const data = await res.json();
+ handleEmbryosUpdate(data);
+ } catch (err) {
+ console.debug('embryos snapshot fetch failed:', err);
+ }
+ }
+
+ function handleEmbryosUpdate(payload) {
+ _embryos = (payload && Array.isArray(payload.embryos)) ? payload.embryos : [];
+ if (!_viewBox) {
+ computeViewBox();
+ renderMap();
+ } else {
+ renderEmbryos();
+ }
+ }
+
// =====================================================================
// Properties table (Details view)
// =====================================================================
@@ -744,6 +802,215 @@ const DevicesManager = (function () {
return Math.round(v).toString();
}
+ // =====================================================================
+ // Embryo waypoints
+ // =====================================================================
+
+ // "embryo_007" / "embryo_7" -> 7. Falls back to a 1-based index from the
+ // caller so the label always shows *something*, even for stray ids.
+ function embryoLabelText(id, fallbackIndex) {
+ const m = id && String(id).match(/(\d+)/);
+ if (m) {
+ const n = parseInt(m[1], 10);
+ if (Number.isFinite(n)) return String(n);
+ }
+ return String(fallbackIndex + 1);
+ }
+
+ // Resolve XY for rendering — fine if SPIM-aligned, else coarse. Returns
+ // null when neither stage carries usable values so the entry is skipped
+ // (e.g. an embryo whose detection record came in malformed).
+ function embryoResolvedXY(emb) {
+ const f = emb && emb.position_fine;
+ if (f && Number.isFinite(f.x) && Number.isFinite(f.y)) return { x: f.x, y: f.y };
+ const c = emb && emb.position_coarse;
+ if (c && Number.isFinite(c.x) && Number.isFinite(c.y)) return { x: c.x, y: c.y };
+ return null;
+ }
+
+ function renderEmbryos() {
+ if (!_mapEmbryos || !_viewBox) return;
+ _mapEmbryos.innerHTML = '';
+ if (!_embryos || !_embryos.length) return;
+ const span = Math.max(_viewBox.xMax - _viewBox.xMin,
+ _viewBox.yMax - _viewBox.yMin);
+ const radius = span * 0.012;
+ const fontSize = span * 0.015;
+
+ _embryos.forEach((emb, i) => {
+ const xy = embryoResolvedXY(emb);
+ if (!xy) return;
+
+ const isFine = !!emb.has_fine_position;
+ const isSelected = _selectedEmbryoId !== null
+ && emb.id === _selectedEmbryoId;
+
+ // Wrap circle + label in a group so a single closest() lookup
+ // finds the embryo regardless of which child the click hit.
+ const group = document.createElementNS(SVG_NS, 'g');
+ group.setAttribute('class',
+ 'devices-embryo-group' + (isSelected ? ' devices-embryo-selected' : ''));
+ group.setAttribute('data-embryo-id', emb.id || '');
+ group.setAttribute('data-embryo-stage', isFine ? 'fine' : 'coarse');
+
+ const circle = document.createElementNS(SVG_NS, 'circle');
+ circle.setAttribute('cx', xy.x);
+ circle.setAttribute('cy', svgY(xy.y));
+ circle.setAttribute('r', radius);
+ circle.setAttribute('class',
+ isFine ? 'devices-embryo-disc' : 'devices-embryo-ring');
+ group.appendChild(circle);
+
+ const label = document.createElementNS(SVG_NS, 'text');
+ label.setAttribute('x', xy.x);
+ label.setAttribute('y', svgY(xy.y));
+ label.setAttribute('class', 'devices-embryo-label');
+ label.setAttribute('font-size', fontSize);
+ label.textContent = embryoLabelText(emb.id, i);
+ group.appendChild(label);
+
+ _mapEmbryos.appendChild(group);
+ });
+ }
+
+ // ---- Map-side edit interactions ------------------------------------
+ // Convert a pointer event's client coords into stage µm. SVG y axis is
+ // positive-down and stage y is positive-up, so the y component is
+ // negated to match the convention used elsewhere in this module.
+ function eventToStageXY(event) {
+ if (!_mapSvg || !_mapSvg.getScreenCTM) return null;
+ const ctm = _mapSvg.getScreenCTM();
+ if (!ctm) return null;
+ const pt = _mapSvg.createSVGPoint();
+ pt.x = event.clientX;
+ pt.y = event.clientY;
+ const local = pt.matrixTransform(ctm.inverse());
+ return { x: local.x, y: -local.y };
+ }
+
+ function findEmbryoIdAt(target) {
+ if (!target) return null;
+ const node = target.closest && target.closest('[data-embryo-id]');
+ return node ? node.getAttribute('data-embryo-id') : null;
+ }
+
+ function embryoById(id) {
+ return _embryos.find(e => e.id === id) || null;
+ }
+
+ function embryoNumberFor(emb) {
+ return embryoLabelText(emb.id, _embryos.indexOf(emb));
+ }
+
+ function setSelectedEmbryo(id) {
+ if (_selectedEmbryoId === id) return;
+ _selectedEmbryoId = id;
+ renderEmbryos();
+ }
+
+ function clearSelection() {
+ if (_selectedEmbryoId === null) return;
+ _selectedEmbryoId = null;
+ renderEmbryos();
+ }
+
+ async function attemptMoveSelected(targetStage) {
+ const id = _selectedEmbryoId;
+ if (!id) return;
+ const emb = embryoById(id);
+ if (!emb) { clearSelection(); return; }
+ const cur = embryoResolvedXY(emb);
+ const num = embryoNumberFor(emb);
+ const oldStr = cur ? `(${cur.x.toFixed(1)}, ${cur.y.toFixed(1)})` : '(unknown)';
+ const newStr = `(${targetStage.x.toFixed(1)}, ${targetStage.y.toFixed(1)})`;
+ if (!window.confirm(`Move embryo ${num} from ${oldStr} to ${newStr}?`)) {
+ return; // keep the embryo picked up so they can try again
+ }
+ try {
+ const res = await fetch(`/api/embryos/${encodeURIComponent(id)}/position`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ x: targetStage.x, y: targetStage.y }),
+ });
+ if (!res.ok) {
+ window.alert(`Move failed (${res.status}): ${await res.text()}`);
+ return;
+ }
+ // EMBRYOS_UPDATE will arrive over the bus and refresh the layer;
+ // dropping clears the picked-up state regardless.
+ clearSelection();
+ } catch (err) {
+ console.error('move embryo:', err);
+ window.alert(`Move failed: ${err.message}`);
+ }
+ }
+
+ async function attemptDeleteSelected() {
+ const id = _selectedEmbryoId;
+ if (!id) return;
+ const emb = embryoById(id);
+ const num = emb ? embryoNumberFor(emb) : id;
+ if (!window.confirm(`Remove embryo ${num}?`)) return;
+ try {
+ const res = await fetch(`/api/embryos/${encodeURIComponent(id)}`, {
+ method: 'DELETE',
+ });
+ if (!res.ok) {
+ window.alert(`Delete failed (${res.status}): ${await res.text()}`);
+ return;
+ }
+ // The embryo is gone from the server snapshot; EMBRYOS_UPDATE
+ // will arrive and drop it from _embryos. Clear locally too.
+ _selectedEmbryoId = null;
+ } catch (err) {
+ console.error('delete embryo:', err);
+ window.alert(`Delete failed: ${err.message}`);
+ }
+ }
+
+ function onMapPointerDown(event) {
+ // Ignore non-primary buttons so right-clicks etc. don't trigger UI.
+ if (event.button !== undefined && event.button !== 0) return;
+ const id = findEmbryoIdAt(event.target);
+ if (id) {
+ setSelectedEmbryo(id);
+ return;
+ }
+ // Empty-space click: drop the picked-up embryo here.
+ if (_selectedEmbryoId !== null) {
+ const stage = eventToStageXY(event);
+ if (stage) attemptMoveSelected(stage);
+ }
+ }
+
+ function onMapKeyDown(event) {
+ // Only honour keys when the operator is actually looking at the Map:
+ // not on another top-level tab, not on the Details subview, and not
+ // typing into an input / textarea / select / contenteditable.
+ if (typeof state !== 'undefined' && typeof TABS !== 'undefined'
+ && state.tab !== TABS.DEVICES) {
+ return;
+ }
+ if (_currentView !== 'map') return;
+ const a = document.activeElement;
+ if (a && (a.tagName === 'INPUT' || a.tagName === 'TEXTAREA' ||
+ a.tagName === 'SELECT' || a.isContentEditable)) {
+ return;
+ }
+ if (event.key === 'Escape') {
+ if (_selectedEmbryoId !== null) {
+ clearSelection();
+ event.preventDefault();
+ }
+ return;
+ }
+ if (_selectedEmbryoId === null) return;
+ if (event.key === 'Delete' || event.key === 'Backspace') {
+ event.preventDefault(); // Backspace would otherwise navigate back
+ attemptDeleteSelected();
+ }
+ }
+
function updateMapMarker() {
if (!_mapMarker || !_lastXY) return;
const sx = _lastXY.X;
@@ -820,6 +1087,9 @@ const DevicesManager = (function () {
if (_camPlaceholder) _camPlaceholder.hidden = false;
if (_camMeta) _camMeta.textContent = 'stream off';
if (_camStaleTimer) { clearTimeout(_camStaleTimer); _camStaleTimer = null; }
+ // Operator may have zoomed in; reset so the next stream session
+ // starts at 1× rather than inheriting a stale view.
+ resetCameraZoom();
} else {
_camFrameTimes = [];
if (_camMeta) _camMeta.textContent = 'waiting…';
@@ -881,6 +1151,116 @@ const DevicesManager = (function () {
}
}
+ // ---- Camera zoom / pan ---------------------------------------------
+ function applyCameraTransform() {
+ if (!_camImg) return;
+ _camImg.style.transform =
+ `translate(${_camTx}px, ${_camTy}px) scale(${_camZoom})`;
+ // Reticle uses an SVG transform attribute on the inner
Embryo
${cols.includes('stage') ? 'Stage' : ''}
- ${cols.includes('confidence') ? 'Conf' : ''}
- ${cols.includes('rate') ? 'Rate' : ''}
- ${cols.includes('eta') ? 'ETA' : ''}
+ ${cols.includes('clock') ? 'Clock' : ''}
+ ${cols.includes('stereo') ? 'Stereo' : ''}
+ ${cols.includes('pace') ? 'Pace' : ''}
+ ${cols.includes('eta') ? 'ETA' : ''}
${cols.includes('sparkline') ? 'Progression' : ''}
${cols.includes('alert') ? 'Alert' : ''}
@@ -412,54 +430,27 @@ const EmbryosManager = {
const latest = reasoning.length > 0 ? reasoning[reasoning.length - 1] : null;
const cols = this.dashboardConfig.board.columns;
- // Stage
const stage = latest?.stage || embryo.current_stage || '—';
const stageIcon = this.getStageIcon(stage);
const stageName = this.formatStageName(stage);
- // Confidence
- const conf = latest ? this.normalizeConfidence(latest.confidence) : 'unknown';
- const confDots = conf === 'high' ? '●●●' : conf === 'medium' ? '●●○' : conf === 'low' ? '●○○' : '○○○';
- const confClass = conf === 'high' ? 'conf-high' : conf === 'medium' ? 'conf-med' : 'conf-low';
+ const align = this._computeAlignment(latest);
+ const overtime = align?.overtime;
- // Rate
- const overtime = latest?.temporal_analysis?.overtime_ratio;
- let rateText = '—';
- let rateClass = '';
- if (overtime != null) {
- const rate = (1 / overtime).toFixed(1);
- rateText = overtime < 0.9 ? `${rate}x↑` : overtime > 1.1 ? `${rate}x↓` : `${rate}x→`;
- rateClass = overtime < 0.9 ? 'rate-fast' : overtime > 1.5 ? 'rate-slow' : 'rate-normal';
- }
+ const clockText = align ? this._formatMinutes(align.inStageClockMin) : '—';
+ const stereoText = align ? this._formatStereoLabel(align) : '—';
+ const pace = align ? this._formatPace(align) : { text: '—', className: '' };
+ const eta = align ? this._formatEta(align) : '—';
- // ETA
- let eta = '—';
- if (stage && this.STAGE_TIMING[stage] != null) {
- const stageMinutes = this.STAGE_TIMING[stage];
- const hatchMinutes = this.STAGE_TIMING['hatched'] || 570;
- const remaining = hatchMinutes - stageMinutes;
- if (remaining > 0) {
- const hours = (remaining / 60).toFixed(1);
- eta = `~${hours}h`;
- } else {
- eta = 'done';
- }
- }
-
- // Sparkline
const sparklineSvg = cols.includes('sparkline') ? this._renderBoardSparkline(reasoning) : '';
- // Alert
const arrested = latest?.temporal_analysis?.is_potentially_arrested;
const slow = overtime && overtime > (this.dashboardConfig.board.warnOvertimeRatio || 1.5);
- const lowConf = conf === 'low';
let alertHtml = '—';
if (arrested) {
alertHtml = '⚠ arrested';
} else if (slow) {
- alertHtml = `⚠ slow ${overtime.toFixed(1)}x`;
- } else if (lowConf) {
- alertHtml = '⚠ low conf';
+ alertHtml = `⚠ slow ${overtime.toFixed(1)}×`;
}
const status = embryo.isComplete ? 'complete' : embryo.lastError ? 'error' : 'running';
@@ -472,8 +463,9 @@ const EmbryosManager = {
${embryo.embryoId.replace(/embryo_?/i, 'E')}
${cols.includes('stage') ? `${stageIcon} ${stageName}` : ''}
- ${cols.includes('confidence') ? `${confDots}` : ''}
- ${cols.includes('rate') ? `${rateText}` : ''}
+ ${cols.includes('clock') ? `${clockText}` : ''}
+ ${cols.includes('stereo') ? `${stereoText}` : ''}
+ ${cols.includes('pace') ? `${pace.text}` : ''}
${cols.includes('eta') ? `${eta}` : ''}
${cols.includes('sparkline') ? `${sparklineSvg}` : ''}
${cols.includes('alert') ? `${alertHtml}` : ''}
@@ -481,6 +473,99 @@ const EmbryosManager = {
`;
},
+ /** Compute clock↔stereotypic alignment from perception temporal_analysis.
+ *
+ * Definitions:
+ * inStageClockMin — wall-clock minutes elapsed in current stage
+ * inStageStereoMin — stereotypic minutes "used" within the stage,
+ * capped at the stage's expected duration. An
+ * overdue embryo is stuck at the stage end in
+ * stereo time while clock keeps ticking.
+ * overtime — ratio inStageClockMin / expected_duration.
+ * >1 means the embryo has spent more clock time
+ * in the stage than the reference 20°C textbook
+ * duration. <1 just means "still within stage" —
+ * no slow/fast signal yet.
+ * stereoAgeMin — total stereotypic age, anchored at the start
+ * minute of the current stage in the reference
+ * table plus the (capped) in-stage stereo offset.
+ */
+ _computeAlignment(latest) {
+ const ta = latest?.temporal_analysis;
+ if (!ta || !ta.current_stage) return null;
+ const stage = ta.current_stage;
+ const stageStart = this.STAGE_TIMING[stage];
+ if (stageStart == null) return null;
+
+ const expDur = Number(ta.expected_duration_min) || 0;
+ const inClock = Number(ta.time_in_stage_min) || 0;
+ const overtime = Number(ta.overtime_ratio) || 0;
+
+ const inStereo = expDur > 0 ? Math.min(inClock, expDur) : inClock;
+ const stereoAge = stageStart + inStereo;
+
+ return {
+ stage,
+ stageStart,
+ expDur,
+ inStageClockMin: inClock,
+ inStageStereoMin: inStereo,
+ stereoAgeMin: stereoAge,
+ overtime,
+ };
+ },
+
+ /** Render the stereo cell: "≈early", "≈bean +12m", or "≈comma +88m ⚠"
+ * when overdue (stereo capped at stage end while clock keeps running). */
+ _formatStereoLabel(align) {
+ const stageName = this.formatStageName(align.stage);
+ const offsetMin = Math.round(align.inStageStereoMin);
+ const overdue = align.expDur > 0 && align.inStageClockMin > align.expDur + 1;
+ const offsetStr = offsetMin > 0 ? ` +${offsetMin}m` : '';
+ const overdueMark = overdue ? ' ⚠' : '';
+ return `≈${stageName}${offsetStr}${overdueMark}`;
+ },
+
+ _formatPace(align) {
+ // Only emit a pace signal once we have meaningful clock data.
+ // Within the first few minutes the ratio is tiny and noisy — show
+ // a dashed placeholder so the column doesn't lie about precision.
+ const NORMAL_BAND = 1.05;
+ const SLOW_BAND = 1.5;
+ if (align.inStageClockMin < 1 || align.expDur <= 0) {
+ return { text: '—', className: 'pace-unknown' };
+ }
+ const r = align.overtime;
+ if (r <= NORMAL_BAND) {
+ return { text: '1.0×', className: 'pace-normal' };
+ }
+ if (r <= SLOW_BAND) {
+ return { text: `${r.toFixed(1)}× slow`, className: 'pace-slow' };
+ }
+ return { text: `⚠ ${r.toFixed(1)}×`, className: 'pace-slow-bad' };
+ },
+
+ /** ETA in hours from current stereotypic position to hatched, scaled
+ * by observed pace when the embryo is demonstrably slow. */
+ _formatEta(align) {
+ const hatchStereo = this.STAGE_TIMING['hatched'] || 570;
+ const remainStereo = hatchStereo - align.stereoAgeMin;
+ if (remainStereo <= 0) return 'done';
+ const paceFactor = align.overtime > 1.05 ? align.overtime : 1.0;
+ const remainClockMin = remainStereo * paceFactor;
+ return `~${(remainClockMin / 60).toFixed(1)}h`;
+ },
+
+ /** Compact minute formatter: "45s" / "10m" / "1h 22m" / "3h". */
+ _formatMinutes(min) {
+ if (min == null || !isFinite(min)) return '—';
+ if (min < 1) return `${Math.round(min * 60)}s`;
+ if (min < 60) return `${Math.round(min)}m`;
+ const h = Math.floor(min / 60);
+ const m = Math.round(min - h * 60);
+ return m > 0 ? `${h}h ${m}m` : `${h}h`;
+ },
+
_renderBoardSparkline(reasoning) {
if (!reasoning.length) return '';
const sorted = [...reasoning].sort((a, b) => (a.timepoint ?? 0) - (b.timepoint ?? 0));
@@ -565,12 +650,24 @@ const EmbryosManager = {
const shortName = embryo.embryoId.replace(/embryo_?/i, 'E');
const latestStage = sorted.length > 0 ? this.formatStageName(sorted[sorted.length - 1].stage) : '—';
+ const isTerminated = !!embryo.isComplete;
+ const termReason = embryo.completionReason || '';
+ // Short label for the badge — humanise the no_object terminal
+ // reason, otherwise keep the first clause of whatever the
+ // backend sent so the user still gets a hint.
+ const termBadge = isTerminated
+ ? (termReason.includes('no_object') ? 'HATCHED?' : 'STOPPED')
+ : '';
+ const termTooltip = isTerminated
+ ? `Terminated — ${termReason || 'no reason given'}`
+ : '';
- html += ``;
+ html += `
`;
html += `
${shortName}
${latestStage}
${reasoning.length} eval
+ ${isTerminated ? `${termBadge}` : ''}
`;
html += ``;
@@ -1000,7 +1097,7 @@ const EmbryosManager = {
intervalSeconds: embryoData.interval_seconds || this.state.baseInterval,
timepoints: embryoData.timepoints || 0,
isComplete: embryoData.is_complete || false,
- completionReason: null,
+ completionReason: embryoData.completion_reason || null,
firstAcquired: embryoData.first_acquired ? new Date(embryoData.first_acquired) : null,
lastAcquired: embryoData.last_acquired ? new Date(embryoData.last_acquired) : null,
detections: embryoData.detections || {},
@@ -2726,10 +2823,17 @@ const EmbryosManager = {
`;
}
- // Format confidence display
- const confDisplay = typeof item.confidence === 'number'
- ? `${Math.round(item.confidence * 100)}%`
- : (item.confidence || 'Unknown');
+ // Format confidence display. Hide entirely when the detector
+ // doesn't emit a probabilistic confidence (e.g. dopaminergic_signal
+ // returns structured intensity/structure findings instead) — the
+ // string "Unknown confidence" was actively confusing.
+ const hasNumericConf = typeof item.confidence === 'number';
+ const hasTextConf = typeof item.confidence === 'string' && item.confidence.trim() !== '';
+ const confHtml = hasNumericConf
+ ? `${Math.round(item.confidence * 100)}% confidence`
+ : hasTextConf
+ ? `${item.confidence}`
+ : '';
return `
`
- : '';
-
- tr.innerHTML = `
- ${formatEventTime(event.timestamp)}
- ${imageIndicator}${event.event_type}
- ${event.source || '-'}
- ${thumbnailHtml}
- `;
-
- // Click to expand data
- tr.addEventListener('click', () => {
- const dataDiv = tr.querySelector('.event-data');
- dataDiv.classList.toggle('expanded');
- if (dataDiv.classList.contains('expanded')) {
- dataDiv.innerHTML = `${formatEventTime(event.timestamp)}
+ ${label}
+ ${event.source || '-'}
+ ${formatEventTime(event.timestamp)}
+ ${imageIndicator}${event.event_type}
+ ${event.source || '-'}
+ ${thumbnailHtml}
+ `;
+
+ // Click to expand data
+ tr.addEventListener('click', () => {
+ const dataDiv = tr.querySelector('.event-data');
+ dataDiv.classList.toggle('expanded');
+ if (dataDiv.classList.contains('expanded')) {
+ dataDiv.innerHTML = `
@@ -2748,7 +2852,7 @@ const EmbryosManager = {
${item.stage ? this.formatStageName(item.stage) : (item.detected ? 'DETECTED' : 'Not detected')}
- ${confDisplay} confidence
+ ${confHtml}
${transitionalHtml}
${detectorFindingsHtml}
@@ -2979,13 +3083,22 @@ const EmbryosManager = {
container.classList.remove('visible');
container.innerHTML = '';
}
+ // Filmstrip side panel — clearing innerHTML lets the :empty CSS
+ // rule collapse the panel and let the rows reclaim full width.
+ const filmstripDetail = document.getElementById('filmstrip-detail');
+ if (filmstripDetail) {
+ filmstripDetail.innerHTML = '';
+ }
this.detailPanelVisible = false;
this.currentDetailItem = null;
- // Clear eval dot highlight
+ // Clear eval dot + filmstrip cell highlight
document.querySelectorAll('.eval-dot.active').forEach(dot => {
dot.classList.remove('active');
});
+ document.querySelectorAll('.filmstrip-cell.active').forEach(cell => {
+ cell.classList.remove('active');
+ });
},
// Navigate to previous/next item in detail panel
diff --git a/gently/ui/web/static/js/events.js b/gently/ui/web/static/js/events.js
index 02365e40..998431a1 100644
--- a/gently/ui/web/static/js/events.js
+++ b/gently/ui/web/static/js/events.js
@@ -41,6 +41,40 @@ function getEventBadgeClass(eventType) {
return 'default';
}
+// Log-record helpers --------------------------------------------------
+// LOG_RECORD events come from the Python logging bridge. We collapse the
+// generic "LOG_RECORD" type into the actual level (DEBUG / INFO / WARN /
+// ERROR) so the table is readable -- otherwise every row in a busy
+// session reads the same string in the Type column.
+function isLogEvent(event) {
+ return event && event.event_type === 'LOG_RECORD';
+}
+
+function logLevelLabel(d) {
+ // levelname is fastest path; fall back to numeric mapping if missing.
+ const lvl = (d && (d.level_name || '')).toString().toUpperCase();
+ if (lvl) {
+ if (lvl === 'WARNING') return 'WARN';
+ if (lvl === 'CRITICAL') return 'CRIT';
+ return lvl;
+ }
+ const n = d && Number(d.level);
+ if (!isFinite(n)) return 'LOG';
+ if (n >= 50) return 'CRIT';
+ if (n >= 40) return 'ERROR';
+ if (n >= 30) return 'WARN';
+ if (n >= 20) return 'INFO';
+ return 'DEBUG';
+}
+
+function logBadgeClass(d) {
+ const label = logLevelLabel(d);
+ if (label === 'DEBUG') return 'log-debug';
+ if (label === 'INFO') return 'log-info';
+ if (label === 'WARN') return 'log-warn';
+ return 'log-error'; // ERROR / CRIT collapse together
+}
+
// Search helper functions
function escapeRegex(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -67,12 +101,17 @@ function eventMatchesSearch(event) {
}
function highlightSearchTerms(text) {
- if (!searchQuery || !text) return text;
+ // Escape first — event keys/values/messages are arbitrary text (perception
+ // prose, file paths, agent output) and are inserted via innerHTML by the
+ // callers. Escaping here closes the XSS hole at every call site; the
+ // injected tags are the only markup we add.
+ const safe = escapeHtml(text == null ? '' : String(text));
+ if (!searchQuery) return safe;
try {
const regex = new RegExp(`(${escapeRegex(searchQuery)})`, 'gi');
- return String(text).replace(regex, '$1');
+ return safe.replace(regex, '$1');
} catch (e) {
- return text;
+ return safe;
}
}
@@ -212,45 +251,81 @@ function addEventToTable(event, prepend = true) {
if (hasImage) tr.classList.add('has-image');
tr.dataset.eventId = event.event_id || '';
- const badgeClass = getEventBadgeClass(event.event_type);
-
- // Image indicator icon
- const imageIndicator = hasImage
- ? `
-
- `
- : '';
-
- // Thumbnail preview
- const thumbnailHtml = hasImage
- ? ``
- : '';
-
- tr.innerHTML = `
- ${formatEventData(event.data)}
${JSON.stringify(event.data, null, 2)}`;
- } else {
- dataDiv.innerHTML = formatEventData(event.data);
- }
- });
+ if (isLogEvent(event)) {
+ // Log rows have a compact, distinctive shape: level badge in the
+ // Type column, logger name + message in the Data column. Click to
+ // toggle a pre with the full payload (incl. exception trace).
+ tr.classList.add('log-row');
+ const d = event.data || {};
+ const badgeCls = logBadgeClass(d);
+ const label = logLevelLabel(d);
+ const message = highlightSearchTerms(d.message || '');
+ const loggerName = highlightSearchTerms(d.logger || '-');
+ const excTag = d.exc_text ? ' ⏎ trace…' : '';
+ tr.innerHTML = `
+
+ ${loggerName}${excTag}
+
${d.logger || ''} ${d.func || ''}:${d.line || ''}\n` +
+ `${(d.message || '')}${tracePart}`;
+ } else {
+ dataDiv.innerHTML =
+ `${loggerName}` +
+ `${excTag}`;
+ }
+ });
+ } else {
+ const badgeClass = getEventBadgeClass(event.event_type);
+
+ // Image indicator icon
+ const imageIndicator = hasImage
+ ? `
+
+ `
+ : '';
+
+ // Thumbnail preview
+ const thumbnailHtml = hasImage
+ ? ``
+ : '';
+
+ tr.innerHTML = `
+ ${formatEventData(event.data)}
${JSON.stringify(event.data, null, 2)}`;
+ } else {
+ dataDiv.innerHTML = formatEventData(event.data);
+ }
+ });
+ }
if (prepend) {
tbody.insertBefore(tr, tbody.firstChild);
diff --git a/gently/ui/web/static/js/gallery.js b/gently/ui/web/static/js/gallery.js
index 51ee4207..42159d18 100644
--- a/gently/ui/web/static/js/gallery.js
+++ b/gently/ui/web/static/js/gallery.js
@@ -422,13 +422,19 @@ const CalibrationProfileView = {
/** Compact SPIM live indicator used inside the metrics strip.
* Carries the same IDs as the old big preview so SpimLivePreview's
- * apply-on-render logic continues to work unchanged. */
+ * apply-on-render logic continues to work unchanged. The thumb is a
+ * button — click to open the floating popout for a larger view. */
_renderSpimIndicator() {
return `
SPIM
- ![]()
+
@@ -1329,21 +1335,33 @@ const SpimLivePreview = {
const placeholder = document.getElementById('cal-spim-placeholder');
const metaEl = document.getElementById('cal-spim-meta');
const led = document.getElementById('cal-spim-led');
- if (!img) return; // not in profile view
const latest = embryoId ? this._latestByEmbryo[embryoId] : null;
- if (latest) {
- img.src = `data:image/png;base64,${latest.base64_png}`;
- img.classList.add('has-frame');
- if (placeholder) placeholder.hidden = true;
- if (metaEl) metaEl.textContent = this._formatMeta(latest);
- if (led) led.classList.remove('idle');
- } else {
- img.removeAttribute('src');
- img.classList.remove('has-frame');
- if (placeholder) placeholder.hidden = false;
- if (metaEl) metaEl.textContent = '—';
- if (led) led.classList.add('idle');
+
+ if (img) {
+ if (latest) {
+ img.src = `data:image/png;base64,${latest.base64_png}`;
+ img.classList.add('has-frame');
+ if (placeholder) placeholder.hidden = true;
+ if (metaEl) metaEl.textContent = this._formatMeta(latest);
+ if (led) led.classList.remove('idle');
+ } else {
+ img.removeAttribute('src');
+ img.classList.remove('has-frame');
+ if (placeholder) placeholder.hidden = false;
+ if (metaEl) metaEl.textContent = '—';
+ if (led) led.classList.add('idle');
+ }
+ }
+
+ // Mirror into popout if it's open — the popout lives outside the
+ // calibration panel's innerHTML reset, so we paint it independently.
+ if (typeof SpimPopout !== 'undefined') {
+ SpimPopout.paint(latest ? {
+ base64_png: latest.base64_png,
+ meta: this._formatMeta(latest),
+ embryoId,
+ } : null);
}
},
@@ -1375,6 +1393,227 @@ const SpimLivePreview = {
document.addEventListener('DOMContentLoaded', () => SpimLivePreview.init());
+// ==========================================
+// SPIM live popout (floating draggable window)
+// ==========================================
+// Lazy-built floating window that mirrors SpimLivePreview at a larger
+// size. Draggable via the header bar, resizable from the bottom-right
+// corner. Position and size persist in localStorage so the window
+// re-opens where the operator last left it. Closes on Escape.
+const SpimPopout = {
+ _STORAGE_KEY: 'gently.spimPopout.v1',
+ _root: null,
+ _isOpen: false,
+
+ _ensureBuilt() {
+ if (this._root) return this._root;
+
+ const el = document.createElement('div');
+ el.className = 'cal-spim-popout';
+ el.id = 'cal-spim-popout';
+ el.hidden = true;
+ el.innerHTML = `
+
+
+ SPIM Live
+
+
+
+
+
+ ![]()
+
+
+ `;
+ document.body.appendChild(el);
+ this._root = el;
+
+ // Restore persisted geometry
+ const saved = this._loadGeometry();
+ if (saved) {
+ el.style.left = `${saved.left}px`;
+ el.style.top = `${saved.top}px`;
+ el.style.width = `${saved.width}px`;
+ el.style.height = `${saved.height}px`;
+ }
+
+ el.querySelector('#cal-spim-popout-close').addEventListener('click', () => this.close());
+ this._wireDrag(el);
+ this._wireResizeObserver(el);
+
+ return el;
+ },
+
+ open() {
+ const el = this._ensureBuilt();
+ if (this._isOpen) return;
+ el.hidden = false;
+ this._isOpen = true;
+
+ // Clamp into viewport in case window was resized while popout was hidden
+ this._clampIntoViewport(el);
+
+ // Paint current frame for the selected embryo
+ const selected = (typeof CalibrationManager !== 'undefined')
+ ? CalibrationManager.selectedEmbryoId : null;
+ if (selected && typeof SpimLivePreview !== 'undefined') {
+ const latest = SpimLivePreview._latestByEmbryo[selected];
+ this.paint(latest ? {
+ base64_png: latest.base64_png,
+ meta: SpimLivePreview._formatMeta(latest),
+ embryoId: selected,
+ } : null);
+ } else {
+ this.paint(null);
+ }
+
+ document.addEventListener('keydown', this._onKey);
+ },
+
+ close() {
+ if (!this._root || !this._isOpen) return;
+ this._root.hidden = true;
+ this._isOpen = false;
+ document.removeEventListener('keydown', this._onKey);
+ },
+
+ toggle() {
+ this._isOpen ? this.close() : this.open();
+ },
+
+ /** Called by SpimLivePreview whenever the current embryo's latest
+ * frame changes. Frame is {base64_png, meta, embryoId} or null. */
+ paint(frame) {
+ if (!this._root || !this._isOpen) return;
+ const img = this._root.querySelector('#cal-spim-popout-img');
+ const placeholder = this._root.querySelector('#cal-spim-popout-placeholder');
+ const meta = this._root.querySelector('#cal-spim-popout-meta');
+ const embryoEl = this._root.querySelector('#cal-spim-popout-embryo');
+ const led = this._root.querySelector('#cal-spim-popout-led');
+
+ if (frame) {
+ img.src = `data:image/png;base64,${frame.base64_png}`;
+ img.classList.add('has-frame');
+ placeholder.hidden = true;
+ meta.textContent = frame.meta || '—';
+ embryoEl.textContent = frame.embryoId || '';
+ led.classList.remove('idle');
+ } else {
+ img.removeAttribute('src');
+ img.classList.remove('has-frame');
+ placeholder.hidden = false;
+ meta.textContent = '—';
+ embryoEl.textContent = '';
+ led.classList.add('idle');
+ }
+ },
+
+ _onKey: (e) => {
+ if (e.key === 'Escape') SpimPopout.close();
+ },
+
+ _wireDrag(el) {
+ const header = el.querySelector('#cal-spim-popout-header');
+ let dragging = false;
+ let startX = 0, startY = 0, startLeft = 0, startTop = 0;
+
+ header.addEventListener('pointerdown', (e) => {
+ // Don't start drag on the close button
+ if (e.target.closest('.cal-spim-popout-close')) return;
+ dragging = true;
+ const rect = el.getBoundingClientRect();
+ startX = e.clientX;
+ startY = e.clientY;
+ startLeft = rect.left;
+ startTop = rect.top;
+ // Switch to absolute positioning if currently default
+ el.style.left = `${startLeft}px`;
+ el.style.top = `${startTop}px`;
+ el.style.right = 'auto';
+ el.style.bottom = 'auto';
+ header.setPointerCapture(e.pointerId);
+ el.classList.add('dragging');
+ });
+
+ header.addEventListener('pointermove', (e) => {
+ if (!dragging) return;
+ const dx = e.clientX - startX;
+ const dy = e.clientY - startY;
+ let nextLeft = startLeft + dx;
+ let nextTop = startTop + dy;
+ // Keep at least 40px of header on-screen
+ const w = el.offsetWidth;
+ const h = el.offsetHeight;
+ nextLeft = Math.max(-(w - 80), Math.min(window.innerWidth - 80, nextLeft));
+ nextTop = Math.max(0, Math.min(window.innerHeight - 40, nextTop));
+ el.style.left = `${nextLeft}px`;
+ el.style.top = `${nextTop}px`;
+ });
+
+ const endDrag = (e) => {
+ if (!dragging) return;
+ dragging = false;
+ el.classList.remove('dragging');
+ try { header.releasePointerCapture(e.pointerId); } catch (_) {}
+ this._saveGeometry(el);
+ };
+ header.addEventListener('pointerup', endDrag);
+ header.addEventListener('pointercancel', endDrag);
+ },
+
+ _wireResizeObserver(el) {
+ if (typeof ResizeObserver === 'undefined') return;
+ let saveTimer = null;
+ const ro = new ResizeObserver(() => {
+ if (!this._isOpen) return;
+ clearTimeout(saveTimer);
+ saveTimer = setTimeout(() => this._saveGeometry(el), 250);
+ });
+ ro.observe(el);
+ },
+
+ _clampIntoViewport(el) {
+ const rect = el.getBoundingClientRect();
+ if (rect.left + 80 > window.innerWidth || rect.top + 40 > window.innerHeight
+ || rect.left < -(rect.width - 80) || rect.top < 0) {
+ // Recenter
+ const w = Math.min(rect.width || 520, window.innerWidth - 40);
+ const h = Math.min(rect.height || 440, window.innerHeight - 40);
+ el.style.width = `${w}px`;
+ el.style.height = `${h}px`;
+ el.style.left = `${Math.max(20, (window.innerWidth - w) / 2)}px`;
+ el.style.top = `${Math.max(20, (window.innerHeight - h) / 2)}px`;
+ }
+ },
+
+ _saveGeometry(el) {
+ const rect = el.getBoundingClientRect();
+ const data = {
+ left: Math.round(rect.left),
+ top: Math.round(rect.top),
+ width: Math.round(rect.width),
+ height: Math.round(rect.height),
+ };
+ try { localStorage.setItem(this._STORAGE_KEY, JSON.stringify(data)); } catch (_) {}
+ },
+
+ _loadGeometry() {
+ try {
+ const raw = localStorage.getItem(this._STORAGE_KEY);
+ if (!raw) return null;
+ const data = JSON.parse(raw);
+ if (typeof data.left !== 'number') return null;
+ return data;
+ } catch (_) { return null; }
+ },
+};
+
// Legacy wrappers kept for backward compatibility
function renderCalibrationGallery() { CalibrationManager.render(); }
diff --git a/gently/ui/web/static/js/home.js b/gently/ui/web/static/js/home.js
new file mode 100644
index 00000000..089d7de3
--- /dev/null
+++ b/gently/ui/web/static/js/home.js
@@ -0,0 +1,177 @@
+/**
+ * HomeApp — the landing tab.
+ *
+ * A light at-a-glance landing surface: recent sessions, recent plans, recent
+ * images, a thin status line, and a "Start / continue an experiment" button
+ * that launches the setup flow (the wizard, which no longer auto-pops in chat).
+ *
+ * Read-only fetches against existing endpoints (/api/sessions, /api/campaigns,
+ * /api/home/recent-images); mirrors the ReviewApp/CampaignsApp module pattern.
+ */
+const HomeApp = (() => {
+ let _inited = false;
+ const SESSIONS_N = 5;
+ const CAMPAIGNS_N = 5;
+ const IMAGES_N = 8;
+ // Recent images are stable (latest projection per embryo). refresh() runs on
+ // every Home-tab entry, so guard against redundant disk-walking fetches:
+ // skip if one is in flight or the strip was loaded within IMAGES_TTL_MS.
+ const IMAGES_TTL_MS = 15000;
+ let _imgState = { at: 0, inflight: false };
+
+ function relTime(iso) {
+ if (!iso) return '';
+ const t = Date.parse(iso);
+ if (isNaN(t)) return '';
+ const s = Math.max(0, (Date.now() - t) / 1000);
+ if (s < 60) return 'just now';
+ if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+ if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+ const d = Math.floor(s / 86400);
+ return d < 30 ? `${d}d ago` : new Date(t).toLocaleDateString();
+ }
+
+ function empty(el, msg) {
+ el.innerHTML = `
+ Awaiting SPIM frame…
+
+ ${escapeHtml(msg)}
`;
+ }
+
+ function wireGoTab(scope) {
+ (scope || document).querySelectorAll('[data-go-tab]').forEach(el => {
+ if (el._goWired) return;
+ el._goWired = true;
+ el.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (typeof switchTab === 'function') switchTab(el.dataset.goTab);
+ });
+ });
+ }
+
+ async function loadSessions() {
+ const el = document.getElementById('home-recent-sessions');
+ if (!el) return;
+ try {
+ const data = await (await fetch('/api/sessions')).json();
+ const sessions = (data.sessions || []).slice(0, SESSIONS_N);
+ if (!sessions.length) { empty(el, 'No sessions yet.'); return; }
+ el.innerHTML = sessions.map(s => {
+ const live = s.active ? 'live' : '';
+ const resume = s.active ? '' :
+ ``;
+ return `
+
`;
+ }).join('');
+ el.querySelectorAll('[data-resume]').forEach(b => b.addEventListener('click', async () => {
+ b.disabled = true;
+ b.textContent = 'Resuming…';
+ try {
+ await fetch(`/api/sessions/${encodeURIComponent(b.dataset.resume)}/resume`, { method: 'POST' });
+ } catch (_) { b.disabled = false; b.textContent = 'Resume'; }
+ }));
+ } catch (e) { empty(el, 'Could not load sessions.'); }
+ }
+
+ async function loadCampaigns() {
+ const el = document.getElementById('home-recent-campaigns');
+ if (!el) return;
+ try {
+ const data = await (await fetch('/api/campaigns')).json();
+ const items = (data.campaigns || []).slice(0, CAMPAIGNS_N);
+ if (!items.length) { empty(el, 'No plans yet.'); return; }
+ el.innerHTML = items.map(t => {
+ const c = t.campaign || {};
+ const st = t.status || {};
+ const name = c.shorthand || c.description || 'Untitled plan';
+ const total = st.total || 0;
+ const chip = total ? `${st.completed || 0}/${total} done` : '';
+ return `
+
${resume}
+ ${escapeHtml(s.name || s.session_id)}${live}
+
+
+ ${escapeHtml(name)}${chip}
+
`;
+ }).join('');
+ wireGoTab(el);
+ } catch (e) { empty(el, 'Could not load plans.'); }
+ }
+
+ async function loadImages(force) {
+ const el = document.getElementById('home-recent-images');
+ if (!el) return;
+ if (_imgState.inflight) return;
+ // _imgState.at is set only after a completed fetch (images or empty),
+ // never after an error — so failures still retry on the next entry.
+ if (!force && _imgState.at && (Date.now() - _imgState.at) < IMAGES_TTL_MS) return;
+ _imgState.inflight = true;
+ try {
+ const data = await (await fetch(`/api/home/recent-images?limit=${IMAGES_N}`)).json();
+ // Latest projection per embryo across recent sessions (server orders
+ // most-recent session first).
+ const recent = (data.images || []).slice(0, IMAGES_N);
+ if (!recent.length) {
+ empty(el, 'No images yet — they appear once a session has captured volumes.');
+ _imgState.at = Date.now();
+ return;
+ }
+ el.innerHTML = '' + recent.map(s => {
+ const tp = (s.timepoint != null) ? ` · t${s.timepoint}` : '';
+ const label = `${s.embryo_id || ''}${tp}`;
+ const sub = s.session_name && s.session_name !== s.session_id
+ ? ` (${s.session_name})` : '';
+ const src = `/api/sessions/${encodeURIComponent(s.session_id)}`
+ + `/projection?embryo=${encodeURIComponent(s.embryo_id)}`
+ + `&t=${encodeURIComponent(s.timepoint)}`;
+ return `
';
+ _imgState.at = Date.now();
+ } catch (e) {
+ empty(el, 'Could not load images.');
+ } finally {
+ _imgState.inflight = false;
+ }
+ }
+
+ function updateStatus() {
+ const el = document.getElementById('home-status');
+ if (!el) return;
+ const connected = (typeof state !== 'undefined' && state.connected);
+ const n = (typeof state !== 'undefined' && Array.isArray(state.embryos)) ? state.embryos.length : 0;
+ el.textContent = connected
+ ? `Connected · ${n} embryo${n === 1 ? '' : 's'} in view`
+ : 'Offline — start the agent to connect.';
+ }
+
+ function refresh() {
+ updateStatus();
+ loadSessions();
+ loadCampaigns();
+ loadImages();
+ }
+
+ function init() {
+ if (!_inited) {
+ _inited = true;
+ wireGoTab(document.getElementById('home-content'));
+ const start = document.getElementById('home-start-btn');
+ if (start) start.addEventListener('click', () => {
+ if (typeof AgentChat !== 'undefined' && AgentChat.togglePanel) {
+ AgentChat.togglePanel(true);
+ // Let the panel's WS connect before sending the command.
+ if (AgentChat.runCommand) setTimeout(() => AgentChat.runCommand('/wizard'), 250);
+ }
+ });
+ }
+ refresh(); // re-fetch on every entry to the tab
+ }
+
+ // Self-initialise on load when Home is the default-active tab (switchTab's
+ // lazy-init hook only fires on a tab click / hash route, not initial paint).
+ document.addEventListener('DOMContentLoaded', () => {
+ const home = document.getElementById('home-content');
+ if (home && home.classList.contains('active')) init();
+ });
+
+ return { init, refresh };
+})();
diff --git a/gently/ui/web/static/js/projection-viewer.js b/gently/ui/web/static/js/projection-viewer.js
index 1f5f530e..0e20b9fa 100644
--- a/gently/ui/web/static/js/projection-viewer.js
+++ b/gently/ui/web/static/js/projection-viewer.js
@@ -118,6 +118,10 @@ const ProjectionViewer = {
this.projections = [];
this.selectedMethod = null;
this.isOpen = true;
+ // Clear any volume from a previous open so a failed /api/volume-raw fetch
+ // can't leave the prior embryo/timepoint's 3D data bound (stale-render).
+ this.volumeData = null;
+ this.volumeShape = null;
const modal = document.getElementById('projection-viewer-modal');
const loading = document.getElementById('pv-loading');
@@ -280,6 +284,10 @@ const ProjectionViewer = {
},
selectMethod(method) {
+ // If the 3D view is requested but no volume loaded (e.g. /api/volume-raw
+ // failed while projections succeeded), fall back to the projections grid
+ // rather than showing an empty, never-initialized 3D panel.
+ if (method === '3d_viewer' && !this.volumeData) method = null;
this.selectedMethod = method;
this.renderProjections();
this.renderTabs();
@@ -298,6 +306,19 @@ const ProjectionViewer = {
this.updateViewerVisibility();
},
+ // Resize the WebGL canvas + camera to the container's current width.
+ // (Height is fixed at 400px; only width tracks the layout.) The animation
+ // loop handles re-rendering.
+ _resize3D() {
+ const container = document.getElementById('pv-3d-container');
+ if (!container || !this.renderer3d || !this.camera3d) return;
+ const w = container.clientWidth || 500;
+ const h = 400;
+ this.renderer3d.setSize(w, h);
+ this.camera3d.aspect = w / h;
+ this.camera3d.updateProjectionMatrix();
+ },
+
// 3D Viewer Methods
init3DViewer() {
const container = document.getElementById('pv-3d-container');
@@ -319,6 +340,22 @@ const ProjectionViewer = {
container.innerHTML = '';
container.appendChild(this.renderer3d.domElement);
+ // Keep the WebGL canvas in sync with its container width — the chat
+ // panel can dock/resize and the window can resize. The animation loop
+ // re-renders every frame, so on a size change we only need to resize the
+ // renderer + camera (coalesced to one rAF). Also listen for the explicit
+ // layout-change event the chat dock fires on pin/unpin.
+ if (this._resizeObserver) this._resizeObserver.disconnect();
+ this._resizeObserver = new ResizeObserver(() => {
+ if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
+ this._resizeRaf = requestAnimationFrame(() => this._resize3D());
+ });
+ this._resizeObserver.observe(container);
+ if (!this._onLayoutChanged) {
+ this._onLayoutChanged = () => this._resize3D();
+ window.addEventListener('gently:layout-changed', this._onLayoutChanged);
+ }
+
// Root group is the object the user rotates. Raymarched volume
// mesh is added here. The group scale flips Y so the image
// orientation matches 2D projections.
@@ -609,6 +646,18 @@ const ProjectionViewer = {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
+ if (this._resizeObserver) {
+ this._resizeObserver.disconnect();
+ this._resizeObserver = null;
+ }
+ if (this._resizeRaf) {
+ cancelAnimationFrame(this._resizeRaf);
+ this._resizeRaf = null;
+ }
+ if (this._onLayoutChanged) {
+ window.removeEventListener('gently:layout-changed', this._onLayoutChanged);
+ this._onLayoutChanged = null;
+ }
// Dispose the volume cube's geometry, material, and 3D texture.
if (this.volumeMesh) {
this.volumeMesh.geometry?.dispose();
diff --git a/gently/ui/web/static/js/review.js b/gently/ui/web/static/js/review.js
index bd2c75fa..07dcf49e 100644
--- a/gently/ui/web/static/js/review.js
+++ b/gently/ui/web/static/js/review.js
@@ -86,17 +86,35 @@ const ReviewApp = {
}
list.innerHTML = filtered.map(s => `
-
+ 
+
`;
+ }).join('') + '
-
+
+
{% endif %}
diff --git a/gently/ui/web/templates/_navbar.html b/gently/ui/web/templates/_navbar.html
index 821c8710..33d5f675 100644
--- a/gently/ui/web/templates/_navbar.html
+++ b/gently/ui/web/templates/_navbar.html
@@ -2,7 +2,8 @@
${this.escapeHtml(s.name || s.session_id)}
+
+
`).join('');
},
+ async resumeSession(sessionId) {
+ if (!confirm('Switch the live agent to this session?\nThe current session is saved first.')) return;
+ try {
+ const resp = await fetch(`/api/sessions/${sessionId}/resume`, { method: 'POST' });
+ if (resp.ok) {
+ // Server broadcasts session_changed to reload all clients; we
+ // navigate home as well so the operator lands on the new session.
+ window.location.href = '/';
+ } else {
+ const d = await resp.json().catch(() => ({}));
+ alert('Resume failed: ' + (d.detail || ('HTTP ' + resp.status)));
+ }
+ } catch (e) {
+ alert('Resume failed: ' + e);
+ }
+ },
+
renderSessionContent() {
const content = document.getElementById('session-content');
const s = this.currentSession;
diff --git a/gently/ui/web/static/js/utils.js b/gently/ui/web/static/js/utils.js
index b0e6d2ac..4b8ff62b 100644
--- a/gently/ui/web/static/js/utils.js
+++ b/gently/ui/web/static/js/utils.js
@@ -3,7 +3,7 @@
// ══════════════════════════════════════════════════════════
// Tab and view name constants
-const TABS = { EMBRYOS: 'embryos', CALIBRATION: 'calibration', EVENTS: 'events', PLANS: 'plans', SESSIONS: 'sessions', DEVICES: 'devices', EXPERIMENT: 'experiment' };
+const TABS = { HOME: 'home', EMBRYOS: 'embryos', CALIBRATION: 'calibration', EVENTS: 'events', PLANS: 'plans', SESSIONS: 'sessions', DEVICES: 'devices', EXPERIMENT: 'experiment' };
/**
* HTML-escape a string (safe for insertion into innerHTML).
diff --git a/gently/ui/web/static/js/websocket.js b/gently/ui/web/static/js/websocket.js
index 38a2794c..069724a2 100644
--- a/gently/ui/web/static/js/websocket.js
+++ b/gently/ui/web/static/js/websocket.js
@@ -127,6 +127,24 @@ function handleMessage(msg) {
// Switch to embryos tab if not already there
if (state.tab !== 'embryos') switchTab('embryos');
}
+ } else if (msg.type === 'open_volume') {
+ // The agent asked us to open the in-browser volume viewer — the
+ // web-native replacement for the old desktop napari window.
+ if (typeof ProjectionViewer !== 'undefined' && msg.embryo_id != null) {
+ const view = msg.view || '3d_viewer';
+ Promise.resolve(ProjectionViewer.open(msg.embryo_id, msg.timepoint))
+ .then(() => {
+ // Default to the 3D viewer tab when the agent opens it.
+ if (view && typeof ProjectionViewer.selectMethod === 'function') {
+ ProjectionViewer.selectMethod(view);
+ }
+ })
+ .catch((e) => console.warn('open_volume failed', e));
+ }
+ } else if (msg.type === 'session_changed') {
+ // The live agent switched sessions (resume from the Sessions tab) —
+ // reload so every client picks up the new session's state + transcript.
+ window.location.href = '/';
} else if (msg.type === 'ping') {
state.ws.send(JSON.stringify({type: 'pong'}));
} else if (msg.type === 'presence') {
diff --git a/gently/ui/web/templates/_header.html b/gently/ui/web/templates/_header.html
index d8f692e0..3f113590 100644
--- a/gently/ui/web/templates/_header.html
+++ b/gently/ui/web/templates/_header.html
@@ -25,6 +25,17 @@
${this.escapeHtml(s.name || s.session_id)}${s.active ? ' active' : ''}
${s.description ? `${this.escapeHtml(s.description)}
` : ''}
+ ${s.active ? '' : ``}
{% if is_live %}
{# SPA tabs — JS-driven via switchTab() in app.js #}
-
+
Home
+
Embryos
0
@@ -24,6 +25,7 @@
Sessions
{% else %}
{# Standalone pages — all tabs link back to the SPA #}
+ Home
Embryos
Calibration
System
diff --git a/gently/ui/web/templates/index.html b/gently/ui/web/templates/index.html
index dd3bbfb0..e8164eca 100644
--- a/gently/ui/web/templates/index.html
+++ b/gently/ui/web/templates/index.html
@@ -14,12 +14,59 @@
+
{% include '_header.html' %}
{% include '_navbar.html' %}
+
+
+
+
+
+
+
+
-
+
Device
+
disconnected
@@ -359,6 +418,20 @@ Device
![bottom camera live frame]()
+
+
+
+
+
+
@@ -517,7 +618,9 @@ Properties
+
+
+
+
+
+
@@ -517,7 +618,9 @@