Summary

The WebSocket connection + subscribe + onChannelEvent + cleanup pattern is duplicated across 6 page views:

• DashboardPage.vue
• TaskBoardPage.vue
• ApprovalQueuePage.vue
• AgentProfilesPage.vue
• BudgetPanelPage.vue
• MessageFeedPage.vue

Each page repeats the same onMounted/onUnmounted boilerplate for connecting, subscribing to channels, registering event handlers, and cleaning up.

Proposed solution

Extract a useWebSocketSubscription composable that accepts an array of { channel, handler } pairs and manages the full lifecycle:

// composables/useWebSocketSubscription.ts
export function useWebSocketSubscription(
  subscriptions: { channel: WsChannel; handler: WsEventHandler }[]
) {
  // onMounted: connect, subscribe, register handlers
  // onUnmounted: unregister handlers
}

Page usage becomes:

useWebSocketSubscription([
  { channel: 'tasks', handler: taskStore.handleWsEvent },
])

Origin

Flagged by Gemini Code Assist during PR #349 review. Deferred from that PR as it touches every page view and is a pure refactoring task.

Acceptance criteria

• New useWebSocketSubscription composable with full TypeScript types
• All 6 page views refactored to use the composable
• Unit tests for the composable
• Existing page view tests still pass