feat: implement tool-session progress panel and live list updates

- Add SessionOperationsContext + SessionProgressPanel for global,
  non-blocking lifecycle progress (create/start/stop/restart/delete/
  recreate-tunnel) driven by SSE events.
- Promote SessionsContext to authoritative shared session state with
  refresh, addOrUpdateSession, and removeSession helpers.
- Wire AppShell, DashboardPage, SessionsPage, useInstanceActions,
  ToolStarter, and InstanceList into shared state so lists update
  immediately after create/delete without manual refresh.
- Remove legacy blocking overlays from CreateSessionForm, SessionCard,
  and InstanceList; keep disabled states and inline spinners only.
- Update DashboardPage tests to wrap with SessionsProvider and
  SessionOperationsProvider.
- Add .cache/ to .gitignore.

Quality gates: npm run typecheck, npm run lint, npm test -- --run
(82 passed).
This commit is contained in:
Developer
2026-06-12 13:19:58 +00:00
parent 110844e597
commit 7440720b7b
30 changed files with 1664 additions and 845 deletions
@@ -0,0 +1,19 @@
# specs/session-lifecycle-ux (index)
dir: specs/session-lifecycle-ux
## role
Defines UI/UX requirements for real-time session lifecycle feedback using server-sent events with non-blocking progress indicators and optimistic updates.
## parent
index: specs/.pi-map.index.md
map: specs/.pi-map.md
## children
-
## files
- spec.md
## links
index: specs/session-lifecycle-ux/.pi-map.index.md
map: specs/session-lifecycle-ux/.pi-map.md
## workflows
-
## dirty
-
@@ -0,0 +1,19 @@
# specs/session-lifecycle-ux
dir: specs/session-lifecycle-ux
index: specs/session-lifecycle-ux/.pi-map.index.md
## role
Defines UI/UX requirements for real-time session lifecycle feedback using server-sent events with non-blocking progress indicators and optimistic updates.
## files
- spec.md | Specifies UI/UX requirements for non-blocking progress indicators and optimistic updates for session lifecycle actions using SSE events. | dep: SSE, global progress indicator, shared state management, API
## arch
Event-driven reactive UX pattern with SSE streaming for asynchronous progress tracking and optimistic state management for immediate user feedback.
## tags
sse, spec, specifies, requirements, non, blocking, progress, indicators
## symbols
-
## workflows
-
## dirty
-
@@ -0,0 +1,44 @@
## ADDED Requirements
### Requirement: Lifecycle actions show structured progress
The system SHALL display non-blocking, structured progress feedback for every tool lifecycle action (create, start, stop, restart, delete, recreate tunnel).
#### Scenario: Create a new session
- **WHEN** the user creates a session
- **THEN** a global progress indicator appears showing the current backend step
- **AND** the indicator advances through Created, Building, Starting, Probing, and Running/Error based on SSE events
#### Scenario: Delete a session
- **WHEN** the user deletes a session
- **THEN** the session disappears from the current list immediately
- **AND** the global progress indicator shows "Deleting…" until the backend confirms deletion via SSE or API response
#### Scenario: Stop or restart a session
- **WHEN** the user stops or restarts a session
- **THEN** the global progress indicator shows the action in progress
- **AND** the indicator updates when the backend publishes the corresponding SSE event
### Requirement: Remove blocking progress overlays
The system SHALL NOT dim the entire form or card with a generic spinner while an action is in progress.
#### Scenario: Create session form submission
- **WHEN** the create session form is submitted
- **THEN** form controls are disabled
- **AND** no full-screen overlay blocks the rest of the application
- **AND** progress is shown in the global progress panel
#### Scenario: Card action in progress
- **WHEN** a session card action is triggered
- **THEN** the relevant button is disabled or shows a small inline spinner
- **AND** the card itself remains fully visible and interactive for other sessions
## MODIFIED Requirements
### Requirement: Deleted sessions disappear from UI immediately
**FROM:** The system SHALL update the frontend state immediately after a session is successfully deleted.
**TO:** The system SHALL remove the session from all visible lists optimistically when the delete API call succeeds, and reconcile via shared state.
#### Scenario: Delete session from any page
- **WHEN** the user deletes a session
- **THEN** the session is removed from the nav sidebar, dashboard, and sessions page without a reload
- **AND** a failure re-adds the session to the list and shows an error