alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
44ef62271efc1b7751d71b1d779656be431ea397
headquarter/openspec/changes/tool-session-progress-and-updates/tasks.md
T
Developer 7440720b7b 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).
2026-06-12 13:19:58 +00:00

2.5 KiB
Raw Blame History

Tasks: Tool Session Progress and Live Updates

1. Shared session state

  • 1.1 Extend state/sessions.tsx to hold sessions, isLoading, error, and refreshSessions, addOrUpdateSession, removeSession helpers.
  • 1.2 Ensure AppShell uses the extended context and no longer needs a separate local load.
  • 1.3 Update SessionsPage to read sessions from context and call refreshSessions after mutations.
  • 1.4 Update DashboardPage to read sessions from context and call refreshSessions after mutations.

2. Global progress panel

  • 2.1 Create state/session-operations.tsx with an Operation model and useSessionOperations hook/API.
  • 2.2 Create components/features/session/session-progress-panel.tsx that subscribes to useEvents, matches events to tracked operations, and renders a fixed panel.
  • 2.3 Render SessionProgressPanel in AppShell so it is visible on every page.
  • 2.4 Add minimal styles for the progress panel (desktop corner + mobile bottom bar).

3. Integrate actions with progress and shared state

  • 3.1 Update hooks/use-instance-actions.ts to remove deleted sessions optimistically from shared state, refresh on completion, and track start/stop/restart/delete/recreate-tunnel operations.
  • 3.2 Update components/features/tool/tool-starter.tsx to add the new pending session to shared state and start tracking the create/start operation; close modal immediately.
  • 3.3 Update components/features/tool/start-tool-fab.tsx to close modal and rely on the panel/toasts for feedback.
  • 3.4 Update components/features/tool/instance-list.tsx to refresh shared sessions after create/delete.

4. Remove legacy progress overlays

  • 4.1 Remove loading-overlay and workflow step UI from components/features/session/create-session-form.tsx; keep form disabled during submit.
  • 4.2 Remove session-busy-overlay from components/features/session/session-card.tsx; keep button disabled states and inline spinner.
  • 4.3 Remove instance-busy-overlay from components/features/tool/instance-list.tsx; keep button disabled states and inline spinner.
  • 4.4 Remove unused overlay CSS classes or repurpose them.

5. Verification

  • 5.1 Run npm run typecheck in apps/web.
  • 5.2 Run npm run lint in apps/web.
  • 5.3 Run frontend tests (npm test -- --run or equivalent).
  • 5.4 Manually verify: create from FAB, create from repository detail, delete from sessions page, stop/restart from dashboard.
  • 5.5 Run project_map_patch for every edited source file.
Reference in New Issue View Git Blame Copy Permalink