charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Hoist SSE connection to module-singleton so route nav stops spamming Firefox console #605

New issue

Closed

opened 2026-04-30 20:58:42 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-30 20:58:42 +00:00

Collaborator

Copy link

User story

As an operator using the dashboard in Firefox, I want a single shared EventSource for /events that survives route navigation, so that the console stops printing La connexion avec https://claude.jacquin.app/events a été interrompue pendant le chargement de la page. every time I move between pages.

Background

apps/web/src/lib/sse.ts:68 exposes useSSE(), and every top-level route mounts its own copy:

apps/web/src/routes/planner.board.tsx:143
apps/web/src/routes/agents.tsx:155
apps/web/src/routes/workspace.index.tsx:162
apps/web/src/routes/flows.$flowId.tsx:35
apps/web/src/routes/flows.$flowId.v.$version.tsx:20
apps/web/src/routes/flows.$flowId.versions.tsx:21
apps/web/src/routes/flows.new.tsx:24
apps/web/src/routes/settings.index.tsx:44
apps/web/src/routes/settings.repos.tsx:38

Each useSSE call creates its own EventSource in useEffect (sse.ts:123) and closes it on cleanup (sse.ts:215-223). Switching routes therefore tears down the previous stream and opens a new one. Firefox logs the cited "interrompue pendant le chargement" message on every torn-down connection. Functionally harmless — the new stream connects fine, the conn pill stays green — but the console spam is annoying and easy to mistake for a real problem.

StrictMode in apps/web/src/main.tsx:40 adds one extra mount/cleanup pair per page in dev mode, which compounds the issue locally.

The pre-existing initialConnectionToastShown module-level latch (sse.ts:36) hints that this came up already in #493, but only the toast got de-duped — the underlying connection still re-opens.

Acceptance criteria

Singleton connection

EventSource lives at module scope inside apps/web/src/lib/sse.ts, not inside the hook's useEffect.
Hook subscribers are reference-counted: first subscriber opens the connection; last unsubscribe schedules a close after a small grace window (≈ 1 s) so back-to-back unmount/mount during route nav or StrictMode does not tear the stream.
If a new subscriber arrives during the grace window, the close is cancelled and the existing EventSource keeps running.

Multiplexed callbacks

onEvent and onReconnect from each subscriber are stored in module-level listener sets and fired for every active subscriber on each SSE message / reconnect — no subscriber misses an event because another subscriber happened to mount more recently.
Connection state (live / reconnecting / disconnected, reconnectCount, offlineFor) is also module-level and broadcast to every hook instance via a small store (plain listener set + useState re-render, or useSyncExternalStore).

Public API stays stable

useSSE(opts) continues to return { state, reconnectCount, offlineFor, forceReconnect } with the same semantics. No call sites need to change.
forceReconnect() still tears down + reopens the shared connection (does not close it permanently).
_resetInitialConnectionToastForTest is preserved, plus an analogous reset hook for the new module state so unit tests can isolate.

Firefox console

Manual verification: navigate among /planner/board, /agents, /workspace, /flows/*, /settings, /settings/repos repeatedly. The interrompue pendant le chargement warning no longer appears for /events (one initial open + one close on tab close is acceptable).
Conn pill still flips through live → reconnecting → disconnected correctly when the server is killed; reconnects without a manual page reload.

Tests

Add apps/web/src/lib/sse.test.ts covering: refcount open-on-first / close-after-last, grace-window cancel on quick remount, multiplexed onEvent to two subscribers, forceReconnect keeps the shared connection alive for other subscribers.

Out of scope

Server-side /events handler changes (apps/server/src/main.ts:1108) — unaffected.
Reverse-proxy buffering / timeout tweaks (Caddy / nginx). The current Bun side already calls srv.timeout(req, 0) for /events (main.ts:2984); revisit only if the conn pill flaps after this fix.
Replacing EventSource with WebSocket or fetch-based streaming.

References

apps/web/src/lib/sse.ts — current per-hook EventSource lifecycle
apps/web/src/main.tsx:40 — StrictMode wrapper (compounds the issue in dev)
All useSSE consumers listed under Background
Issue #493 — the prior pass that added the connection-toast latch; this ticket finishes the job at the connection layer.

## User story As an operator using the dashboard in Firefox, I want a single shared `EventSource` for `/events` that survives route navigation, so that the console stops printing `La connexion avec https://claude.jacquin.app/events a été interrompue pendant le chargement de la page.` every time I move between pages. ## Background `apps/web/src/lib/sse.ts:68` exposes `useSSE()`, and every top-level route mounts its own copy: - `apps/web/src/routes/planner.board.tsx:143` - `apps/web/src/routes/agents.tsx:155` - `apps/web/src/routes/workspace.index.tsx:162` - `apps/web/src/routes/flows.$flowId.tsx:35` - `apps/web/src/routes/flows.$flowId.v.$version.tsx:20` - `apps/web/src/routes/flows.$flowId.versions.tsx:21` - `apps/web/src/routes/flows.new.tsx:24` - `apps/web/src/routes/settings.index.tsx:44` - `apps/web/src/routes/settings.repos.tsx:38` Each `useSSE` call creates its own `EventSource` in `useEffect` (`sse.ts:123`) and closes it on cleanup (`sse.ts:215-223`). Switching routes therefore tears down the previous stream and opens a new one. Firefox logs the cited "interrompue pendant le chargement" message on every torn-down connection. Functionally harmless — the new stream connects fine, the conn pill stays green — but the console spam is annoying and easy to mistake for a real problem. `StrictMode` in `apps/web/src/main.tsx:40` adds one extra mount/cleanup pair per page in dev mode, which compounds the issue locally. The pre-existing `initialConnectionToastShown` module-level latch (`sse.ts:36`) hints that this came up already in #493, but only the toast got de-duped — the underlying connection still re-opens. ## Acceptance criteria ### Singleton connection - [ ] `EventSource` lives at module scope inside `apps/web/src/lib/sse.ts`, not inside the hook's `useEffect`. - [ ] Hook subscribers are reference-counted: first subscriber opens the connection; last unsubscribe schedules a close after a small grace window (≈ 1 s) so back-to-back unmount/mount during route nav or StrictMode does not tear the stream. - [ ] If a new subscriber arrives during the grace window, the close is cancelled and the existing `EventSource` keeps running. ### Multiplexed callbacks - [ ] `onEvent` and `onReconnect` from each subscriber are stored in module-level listener sets and fired for every active subscriber on each SSE message / reconnect — no subscriber misses an event because another subscriber happened to mount more recently. - [ ] Connection state (`live` / `reconnecting` / `disconnected`, `reconnectCount`, `offlineFor`) is also module-level and broadcast to every hook instance via a small store (plain listener set + `useState` re-render, or `useSyncExternalStore`). ### Public API stays stable - [ ] `useSSE(opts)` continues to return `{ state, reconnectCount, offlineFor, forceReconnect }` with the same semantics. No call sites need to change. - [ ] `forceReconnect()` still tears down + reopens the shared connection (does not close it permanently). - [ ] `_resetInitialConnectionToastForTest` is preserved, plus an analogous reset hook for the new module state so unit tests can isolate. ### Firefox console - [ ] Manual verification: navigate among `/planner/board`, `/agents`, `/workspace`, `/flows/*`, `/settings`, `/settings/repos` repeatedly. The `interrompue pendant le chargement` warning no longer appears for `/events` (one initial open + one close on tab close is acceptable). - [ ] Conn pill still flips through `live` → `reconnecting` → `disconnected` correctly when the server is killed; reconnects without a manual page reload. ### Tests - [ ] Add `apps/web/src/lib/sse.test.ts` covering: refcount open-on-first / close-after-last, grace-window cancel on quick remount, multiplexed `onEvent` to two subscribers, `forceReconnect` keeps the shared connection alive for other subscribers. ## Out of scope - Server-side `/events` handler changes (`apps/server/src/main.ts:1108`) — unaffected. - Reverse-proxy buffering / timeout tweaks (Caddy / nginx). The current Bun side already calls `srv.timeout(req, 0)` for `/events` (`main.ts:2984`); revisit only if the conn pill flaps after this fix. - Replacing `EventSource` with WebSocket or `fetch`-based streaming. ## References - `apps/web/src/lib/sse.ts` — current per-hook `EventSource` lifecycle - `apps/web/src/main.tsx:40` — `StrictMode` wrapper (compounds the issue in dev) - All `useSSE` consumers listed under Background - Issue #493 — the prior pass that added the connection-toast latch; this ticket finishes the job at the connection layer.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-30 20:58:47 +00:00

dev was assigned by code-lead

2026-04-30 21:53:57 +00:00

dev referenced this issue from a commit

2026-04-30 22:01:21 +00:00

feat(sse): hoist EventSource to module singleton with refcount + grace window

dev referenced this issue from a pull request that will close it,

2026-04-30 22:01:31 +00:00

feat(sse): hoist EventSource to module singleton #613

code-lead closed this issue

2026-04-30 22:13:44 +00:00

code-lead referenced this issue from a commit

2026-04-30 22:13:45 +00:00

feat(sse): hoist EventSource to module singleton (#613)

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

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

charles/claude-hooks#605

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns