lhumina_code/hero_slides
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases 2 Packages Wiki Activity Actions

bug: UI elements do not reactively update after mutations — page reload required #70

New issue
Open
opened 2026-05-15 13:16:34 +00:00 by casper-stevens · 3 comments
casper-stevens commented 2026-05-15 13:16:34 +00:00
Member
Copy link

Problem

Across the app, many UI elements do not update after operations that should change their state. The user must do a full page reload to see the correct state. This is a systemic pattern, not isolated to one feature.

Known cases:

  • Slide stale badges do not update after adding/deleting/moving files in content/background/
  • (add more cases here as discovered)

Root Cause Pattern

Mutation handlers call narrow refresh functions (loadBgPanel(), etc.) that only redraw their own panel. They do not call the broader deck/slide refresh (refreshCurrentDeck(), loadSlidesForDeck()) that would re-fetch staleness, slide state, and other derived UI.

The app has the right refresh functions but they are not wired up after mutations.

Short-Term Fix

Audit every mutation path and call refreshCurrentDeck() after operations that should affect slide card state. Targeted, mechanical, but fragile — every new mutation must remember to wire the refresh manually.

Long-Term Fix: Server-Sent Mutation Events

The architecture already supports this — GET /api/events/jobs is a live SSE stream from the server, proxied by the admin and consumed by jobsPanel via EventSource. The same pattern is extended to a general mutation event channel.

Plan

1. Server: mutation event broadcaster

Add a broadcast channel in ServerState. Any RPC handler that mutates deck state (bg file ops, slide saves, theme saves, staleness-affecting changes) sends an event after the mutation succeeds:

{ "type": "deck.changed", "collection": "...", "deck": "..." }

Expose GET /events as an SSE stream (declared with x-sse in openrpc.json) that fans out events to all connected subscribers.

2. Admin: proxy the stream

Add GET /api/events route using the existing open_sse_upstream helper, same as jobs_events_proxy.

3. Dashboard: subscribe and refresh

On deck load, open an EventSource on /api/events. On deck.changed events matching the currently selected collection+deck, call refreshCurrentDeck(). Close and reopen when the selected deck changes.

Result

Any mutation — from this browser tab, another tab, or a direct RPC call — automatically triggers a UI refresh. No manual wiring per mutation path required.

## Problem Across the app, many UI elements do not update after operations that should change their state. The user must do a full page reload to see the correct state. This is a systemic pattern, not isolated to one feature. Known cases: - Slide stale badges do not update after adding/deleting/moving files in `content/background/` - (add more cases here as discovered) ## Root Cause Pattern Mutation handlers call narrow refresh functions (`loadBgPanel()`, etc.) that only redraw their own panel. They do not call the broader deck/slide refresh (`refreshCurrentDeck()`, `loadSlidesForDeck()`) that would re-fetch staleness, slide state, and other derived UI. The app has the right refresh functions but they are not wired up after mutations. ## Short-Term Fix Audit every mutation path and call `refreshCurrentDeck()` after operations that should affect slide card state. Targeted, mechanical, but fragile — every new mutation must remember to wire the refresh manually. ## Long-Term Fix: Server-Sent Mutation Events The architecture already supports this — `GET /api/events/jobs` is a live SSE stream from the server, proxied by the admin and consumed by `jobsPanel` via `EventSource`. The same pattern is extended to a general mutation event channel. ### Plan **1. Server: mutation event broadcaster** Add a broadcast channel in `ServerState`. Any RPC handler that mutates deck state (bg file ops, slide saves, theme saves, staleness-affecting changes) sends an event after the mutation succeeds: ```json { "type": "deck.changed", "collection": "...", "deck": "..." } ``` Expose `GET /events` as an SSE stream (declared with `x-sse` in `openrpc.json`) that fans out events to all connected subscribers. **2. Admin: proxy the stream** Add `GET /api/events` route using the existing `open_sse_upstream` helper, same as `jobs_events_proxy`. **3. Dashboard: subscribe and refresh** On deck load, open an `EventSource` on `/api/events`. On `deck.changed` events matching the currently selected collection+deck, call `refreshCurrentDeck()`. Close and reopen when the selected deck changes. ### Result Any mutation — from this browser tab, another tab, or a direct RPC call — automatically triggers a UI refresh. No manual wiring per mutation path required.
casper-stevens changed title from bug: stale tags only appear/disappear on page reload after background changes to bug: UI elements do not reactively update after mutations — page reload required 2026-05-15 13:22:31 +00:00
casper-stevens commented 2026-05-15 14:18:46 +00:00
Author
Member
Copy link

Implementation Spec: SSE Mutation Broadcast System

Issue: #70 — UI elements do not reactively update after mutations — page reload required

Objective

Add a Server-Sent Events (SSE) mutation broadcast channel to hero_slides_server. Any RPC handler that mutates deck state will fire a deck.changed event. The admin UI will subscribe to this stream and reactively call refreshCurrentDeck() when an event matches the currently-loaded deck.

Requirements

  1. Server: A tokio::sync::broadcast channel in ServerState carries DeckChangedEvent { collection, deck } values.
  2. Server: All synchronous mutation RPC handlers (bg file ops, slide saves, theme saves, slide structural ops, deck CRUD) emit an event after a successful operation.
  3. Server: GET /events is added as an Axum route that fans out events as SSE, modelled directly on the existing GET /events/jobs pattern.
  4. openrpc.json: A new deck.events method entry is added with "x-sse" annotation declaring the endpoint and emitted event type.
  5. Admin proxy: GET /api/events is added to hero_slides_admin/src/routes.rs, reusing open_sse_upstream to relay bytes from GET /events on the backend socket.
  6. Dashboard JS: On deck load, open an EventSource on BASE + '/api/events'. On deck.changed events matching the current selectedCollection + selectedDeckName, call refreshCurrentDeck(). Close and reopen when the selected deck changes.

Files to Modify / Create

Path Action
crates/hero_slides_server/src/main.rs Add mutation_tx field to ServerState; register GET /events route
crates/hero_slides_server/src/rpc.rs Emit broadcast after each successful mutation
crates/hero_slides_server/src/mutation_sse.rs Create — SSE handler for GET /events
crates/hero_slides_server/openrpc.json Add deck.events method with x-sse annotation
crates/hero_slides_admin/src/routes.rs Add GET /api/events proxy route
crates/hero_slides_admin/static/js/dashboard.js Add deckEventSource subscription

Implementation Plan

Step 1 — Add DeckChangedEvent and broadcast channel to ServerState

File: crates/hero_slides_server/src/main.rs

  • Add use tokio::sync::broadcast;
  • Define DeckChangedEvent as #[derive(Clone, Debug, serde::Serialize)] with collection: String and deck: String
  • Add pub mutation_tx: broadcast::Sender<DeckChangedEvent> to ServerState
  • In main(), create the channel: let (mutation_tx, _) = broadcast::channel::<DeckChangedEvent>(256);
  • Register route: .route("/events", get(mutation_sse::events_handler))
  • Add pub mod mutation_sse;

Dependencies: none

Step 2 — Create mutation_sse.rs — the /events SSE handler

File: crates/hero_slides_server/src/mutation_sse.rs (new file)

  • Model on crates/hero_slides_server/src/jobs/sse.rs
  • Subscribe via state.mutation_tx.subscribe()
  • Serialize DeckChangedEvent as the SSE data: payload
  • Use same KeepAlive 15-second ping interval and RecvError::Lagged guard

Dependencies: Step 1

Step 3 — Emit DeckChangedEvent from mutation RPC handlers

File: crates/hero_slides_server/src/rpc.rs

  • After the match block in handle_request, check if result.is_ok() and method is a mutation
  • Extract collection + deck from req.params and call state.mutation_tx.send(...)
  • Mutation methods include: slide.saveContent, slide.insert, slide.delete, slide.move, slide.duplicate, slide.bulkDelete, slide.bulkMove, slide.copyTo, slide.rename, slide.deleteVersions, slide.setHidden, slide.setLink, slide.clearLink, slide.addSourceImage, slide.removeSourceImage, deck.saveTheme, deck.create, deck.delete, deck.rename, deck.duplicate, bg.createFolder, bg.deleteFolder, bg.deleteFile, bg.moveFile, bg.uploadFile

Dependencies: Step 1

Step 4 — Add deck.events to openrpc.json

File: crates/hero_slides_server/openrpc.json

  • Add method entry with x-sse: { endpoint: "/events", emits: ["deck.changed"] }
  • Document the payload shape: { type: "deck.changed", collection: string, deck: string }

Dependencies: none

Step 5 — Proxy GET /api/events in the admin

File: crates/hero_slides_admin/src/routes.rs

  • Refactor open_sse_upstream to accept path: &str parameter (rename to open_sse_upstream_path)
  • Update jobs_events_proxy to call it with "/events/jobs"
  • Add deck_events_proxy calling it with "/events"
  • Register .route("/api/events", get(deck_events_proxy))

Dependencies: none

Step 6 — Subscribe in dashboard JS and call refreshCurrentDeck()

File: crates/hero_slides_admin/static/js/dashboard.js

  • Add let deckEventSource = null; module-level variable
  • Add openDeckEventStream() function: opens EventSource on BASE + '/api/events', handles deck.changed events matching selectedCollection + selectedDeckName, calls refreshCurrentDeck()
  • Call openDeckEventStream() at the end of loadSlidesForDeck() after successful deck load
  • Call openDeckEventStream() when clearing deck selection (to close the stream)

Dependencies: Step 5

Acceptance Criteria

  • After uploading, deleting, or moving a background file via the UI, the Slides tab updates without a manual page reload
  • After saving slide content or theme, slide cards reflect the change within 1–2 seconds
  • After creating, deleting, or renaming a deck, the deck selector updates
  • Events from other decks do not trigger a spurious refresh
  • SSE reconnects automatically after backend restart
  • GET /api/events returns Content-Type: text/event-stream
  • Keep-alive pings arrive every 15 seconds

Notes

  • Broadcast capacity 256 is sufficient for low-frequency, user-driven mutation events
  • slide.copyTo mutates both source and destination deck; emit two events (one per deck)
  • Jobs-driven refreshes (generate slide/deck) are already handled by the existing jobs SSE handler — no change needed there
  • collection.* mutations are out of scope; a collection.changed event type is a separate concern
  • No new crate dependencies required
## Implementation Spec: SSE Mutation Broadcast System **Issue:** #70 — UI elements do not reactively update after mutations — page reload required --- ### Objective Add a Server-Sent Events (SSE) mutation broadcast channel to `hero_slides_server`. Any RPC handler that mutates deck state will fire a `deck.changed` event. The admin UI will subscribe to this stream and reactively call `refreshCurrentDeck()` when an event matches the currently-loaded deck. --- ### Requirements 1. **Server:** A `tokio::sync::broadcast` channel in `ServerState` carries `DeckChangedEvent { collection, deck }` values. 2. **Server:** All synchronous mutation RPC handlers (bg file ops, slide saves, theme saves, slide structural ops, deck CRUD) emit an event after a successful operation. 3. **Server:** `GET /events` is added as an Axum route that fans out events as SSE, modelled directly on the existing `GET /events/jobs` pattern. 4. **`openrpc.json`:** A new `deck.events` method entry is added with `"x-sse"` annotation declaring the endpoint and emitted event type. 5. **Admin proxy:** `GET /api/events` is added to `hero_slides_admin/src/routes.rs`, reusing `open_sse_upstream` to relay bytes from `GET /events` on the backend socket. 6. **Dashboard JS:** On deck load, open an `EventSource` on `BASE + '/api/events'`. On `deck.changed` events matching the current `selectedCollection` + `selectedDeckName`, call `refreshCurrentDeck()`. Close and reopen when the selected deck changes. --- ### Files to Modify / Create | Path | Action | |------|--------| | `crates/hero_slides_server/src/main.rs` | Add `mutation_tx` field to `ServerState`; register `GET /events` route | | `crates/hero_slides_server/src/rpc.rs` | Emit broadcast after each successful mutation | | `crates/hero_slides_server/src/mutation_sse.rs` | **Create** — SSE handler for `GET /events` | | `crates/hero_slides_server/openrpc.json` | Add `deck.events` method with `x-sse` annotation | | `crates/hero_slides_admin/src/routes.rs` | Add `GET /api/events` proxy route | | `crates/hero_slides_admin/static/js/dashboard.js` | Add `deckEventSource` subscription | --- ### Implementation Plan #### Step 1 — Add `DeckChangedEvent` and broadcast channel to `ServerState` **File:** `crates/hero_slides_server/src/main.rs` - Add `use tokio::sync::broadcast;` - Define `DeckChangedEvent` as `#[derive(Clone, Debug, serde::Serialize)]` with `collection: String` and `deck: String` - Add `pub mutation_tx: broadcast::Sender<DeckChangedEvent>` to `ServerState` - In `main()`, create the channel: `let (mutation_tx, _) = broadcast::channel::<DeckChangedEvent>(256);` - Register route: `.route("/events", get(mutation_sse::events_handler))` - Add `pub mod mutation_sse;` Dependencies: none --- #### Step 2 — Create `mutation_sse.rs` — the `/events` SSE handler **File:** `crates/hero_slides_server/src/mutation_sse.rs` (new file) - Model on `crates/hero_slides_server/src/jobs/sse.rs` - Subscribe via `state.mutation_tx.subscribe()` - Serialize `DeckChangedEvent` as the SSE `data:` payload - Use same `KeepAlive` 15-second ping interval and `RecvError::Lagged` guard Dependencies: Step 1 --- #### Step 3 — Emit `DeckChangedEvent` from mutation RPC handlers **File:** `crates/hero_slides_server/src/rpc.rs` - After the match block in `handle_request`, check if `result.is_ok()` and method is a mutation - Extract `collection` + `deck` from `req.params` and call `state.mutation_tx.send(...)` - Mutation methods include: `slide.saveContent`, `slide.insert`, `slide.delete`, `slide.move`, `slide.duplicate`, `slide.bulkDelete`, `slide.bulkMove`, `slide.copyTo`, `slide.rename`, `slide.deleteVersions`, `slide.setHidden`, `slide.setLink`, `slide.clearLink`, `slide.addSourceImage`, `slide.removeSourceImage`, `deck.saveTheme`, `deck.create`, `deck.delete`, `deck.rename`, `deck.duplicate`, `bg.createFolder`, `bg.deleteFolder`, `bg.deleteFile`, `bg.moveFile`, `bg.uploadFile` Dependencies: Step 1 --- #### Step 4 — Add `deck.events` to `openrpc.json` **File:** `crates/hero_slides_server/openrpc.json` - Add method entry with `x-sse: { endpoint: "/events", emits: ["deck.changed"] }` - Document the payload shape: `{ type: "deck.changed", collection: string, deck: string }` Dependencies: none --- #### Step 5 — Proxy `GET /api/events` in the admin **File:** `crates/hero_slides_admin/src/routes.rs` - Refactor `open_sse_upstream` to accept `path: &str` parameter (rename to `open_sse_upstream_path`) - Update `jobs_events_proxy` to call it with `"/events/jobs"` - Add `deck_events_proxy` calling it with `"/events"` - Register `.route("/api/events", get(deck_events_proxy))` Dependencies: none --- #### Step 6 — Subscribe in dashboard JS and call `refreshCurrentDeck()` **File:** `crates/hero_slides_admin/static/js/dashboard.js` - Add `let deckEventSource = null;` module-level variable - Add `openDeckEventStream()` function: opens `EventSource` on `BASE + '/api/events'`, handles `deck.changed` events matching `selectedCollection` + `selectedDeckName`, calls `refreshCurrentDeck()` - Call `openDeckEventStream()` at the end of `loadSlidesForDeck()` after successful deck load - Call `openDeckEventStream()` when clearing deck selection (to close the stream) Dependencies: Step 5 --- ### Acceptance Criteria - [ ] After uploading, deleting, or moving a background file via the UI, the Slides tab updates without a manual page reload - [ ] After saving slide content or theme, slide cards reflect the change within 1–2 seconds - [ ] After creating, deleting, or renaming a deck, the deck selector updates - [ ] Events from other decks do not trigger a spurious refresh - [ ] SSE reconnects automatically after backend restart - [ ] `GET /api/events` returns `Content-Type: text/event-stream` - [ ] Keep-alive pings arrive every 15 seconds --- ### Notes - Broadcast capacity `256` is sufficient for low-frequency, user-driven mutation events - `slide.copyTo` mutates both source and destination deck; emit two events (one per deck) - Jobs-driven refreshes (generate slide/deck) are already handled by the existing jobs SSE handler — no change needed there - `collection.*` mutations are out of scope; a `collection.changed` event type is a separate concern - No new crate dependencies required
casper-stevens commented 2026-05-15 14:33:26 +00:00
Author
Member
Copy link

Test Results

  • Total: 119
  • Passed: 119
  • Failed: 0
  • Ignored: 0

All tests passed. Breakdown:

  • hero_slides_lib unit tests: 111 passed
  • hero_slides_lib integration tests (deck_safety_test): 6 passed
  • hero_slides_lib doc tests: 2 passed

Note: hero_slides_examples failed to compile due to missing tokio dependency in that crate, but it contains no test cases — only example binaries.

## Test Results - Total: 119 - Passed: 119 - Failed: 0 - Ignored: 0 All tests passed. Breakdown: - hero_slides_lib unit tests: 111 passed - hero_slides_lib integration tests (deck_safety_test): 6 passed - hero_slides_lib doc tests: 2 passed Note: hero_slides_examples failed to compile due to missing `tokio` dependency in that crate, but it contains no test cases — only example binaries.
casper-stevens commented 2026-05-15 14:34:00 +00:00
Author
Member
Copy link

Implementation Complete

Changes Made

crates/hero_slides_server/src/main.rs

  • Added DeckChangedEvent struct (#[derive(Clone, Debug, serde::Serialize)] with collection and deck fields)
  • Added mutation_tx: broadcast::Sender<DeckChangedEvent> to ServerState
  • Created broadcast channel (capacity 256) in main() and wired it into ServerState
  • Registered GET /events route pointing to mutation_sse::events_handler
  • Added pub mod mutation_sse;

crates/hero_slides_server/src/mutation_sse.rs (new file)

  • SSE handler for GET /events, modelled on jobs/sse.rs
  • Subscribers receive deck.changed events serialized as JSON
  • 15-second keep-alive pings; emits event: lag frame on receiver lag

crates/hero_slides_server/src/rpc.rs

  • After each successful mutation, broadcasts a DeckChangedEvent with the affected collection and deck
  • 23 mutation methods covered: slide.*, deck.*, bg.*
  • slide.copyTo emits two events (source deck and destination deck)
  • Added is_deck_mutation() helper

crates/hero_slides_server/openrpc.json

  • Added deck.events method with x-sse annotation documenting the SSE endpoint and payload shape

crates/hero_slides_admin/src/routes.rs

  • Refactored open_sse_upstream to accept path: &str parameter
  • Added deck_events_proxy handler proxying GET /events from the backend socket
  • Registered GET /api/events route

crates/hero_slides_admin/static/js/dashboard.js

  • Added deckEventSource module-level variable
  • Added openDeckEventStream() function: opens EventSource on /api/events, handles deck.changed events matching current collection+deck, calls refreshCurrentDeck()
  • Called at end of loadSlidesForDeck() (re-opens on deck switch)
  • Called in !hasSelection branch (closes stream when no deck is selected)

Test Results

  • Total: 119
  • Passed: 119
  • Failed: 0
## Implementation Complete ### Changes Made **`crates/hero_slides_server/src/main.rs`** - Added `DeckChangedEvent` struct (`#[derive(Clone, Debug, serde::Serialize)]` with `collection` and `deck` fields) - Added `mutation_tx: broadcast::Sender<DeckChangedEvent>` to `ServerState` - Created broadcast channel (`capacity 256`) in `main()` and wired it into `ServerState` - Registered `GET /events` route pointing to `mutation_sse::events_handler` - Added `pub mod mutation_sse;` **`crates/hero_slides_server/src/mutation_sse.rs`** (new file) - SSE handler for `GET /events`, modelled on `jobs/sse.rs` - Subscribers receive `deck.changed` events serialized as JSON - 15-second keep-alive pings; emits `event: lag` frame on receiver lag **`crates/hero_slides_server/src/rpc.rs`** - After each successful mutation, broadcasts a `DeckChangedEvent` with the affected `collection` and `deck` - 23 mutation methods covered: `slide.*`, `deck.*`, `bg.*` - `slide.copyTo` emits two events (source deck and destination deck) - Added `is_deck_mutation()` helper **`crates/hero_slides_server/openrpc.json`** - Added `deck.events` method with `x-sse` annotation documenting the SSE endpoint and payload shape **`crates/hero_slides_admin/src/routes.rs`** - Refactored `open_sse_upstream` to accept `path: &str` parameter - Added `deck_events_proxy` handler proxying `GET /events` from the backend socket - Registered `GET /api/events` route **`crates/hero_slides_admin/static/js/dashboard.js`** - Added `deckEventSource` module-level variable - Added `openDeckEventStream()` function: opens `EventSource` on `/api/events`, handles `deck.changed` events matching current collection+deck, calls `refreshCurrentDeck()` - Called at end of `loadSlidesForDeck()` (re-opens on deck switch) - Called in `!hasSelection` branch (closes stream when no deck is selected) ### Test Results - Total: 119 - Passed: 119 - Failed: 0
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
main
development_kristof2
development_kristof
latest
v0.1.0-rc2
v0.1.0-rc1
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/hero_slides#70
No description provided.