feat: Enhance real-time event handling and update event types across the application

Marvin Zhang · Marvin Zhang · commit 8ee94a883cde · 2025-08-05T11:37:09.000+08:00
diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -7,6 +7,7 @@ RUN apk add --no-cache libc6-compat python3 make g++ curl
 # Enable pnpm
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm
 
 # Set working directory
 WORKDIR /app
diff --git a/packages/ai/src/__tests__/services.test.ts b/packages/ai/src/__tests__/services.test.ts
@@ -5,20 +5,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { DefaultChatImportService } from '../services/chat-import-service.js';
 import { ChatHubService } from '../services/chat-hub-service.js';
-import type { StorageProvider } from '@codervisor/devlog-core';
-
-// Mock storage provider
-const mockStorageProvider: StorageProvider = {
-  saveChatSession: vi.fn(),
-  saveChatMessages: vi.fn(),
-  saveChatWorkspace: vi.fn(),
-} as any;
 
 describe('DefaultChatImportService', () => {
   let service: DefaultChatImportService;
 
   beforeEach(() => {
-    service = new DefaultChatImportService(mockStorageProvider);
+    service = new DefaultChatImportService();
     vi.clearAllMocks();
   });
 
@@ -37,7 +29,7 @@ describe('ChatHubService', () => {
   let service: ChatHubService;
 
   beforeEach(() => {
-    service = new ChatHubService(mockStorageProvider);
+    service = new ChatHubService();
     vi.clearAllMocks();
   });
 
diff --git a/packages/ai/src/parsers/copilot/copilot-parser.ts b/packages/ai/src/parsers/copilot/copilot-parser.ts
@@ -429,9 +429,4 @@ export class CopilotParser extends AIAssistantParser {
     );
     return workspaceData;
   }
-
-  // Legacy method name for backwards compatibility
-  async discoverVSCodeCopilotData(): Promise<WorkspaceData> {
-    return this.discoverChatData();
-  }
 }
diff --git a/packages/cli/src/cli/index.ts b/packages/cli/src/cli/index.ts
@@ -138,7 +138,7 @@ program
           }
 
           const parser = new CopilotParser();
-          const projectData = await parser.discoverVSCodeCopilotData();
+          const projectData = await parser.discoverChatData();
 
           if (projectData.chat_sessions.length === 0) {
             spinner?.stop();
diff --git a/packages/web/app/api/projects/[id]/devlogs/[devlogId]/notes/[noteId]/route.ts b/packages/web/app/api/projects/[id]/devlogs/[devlogId]/notes/[noteId]/route.ts
@@ -1,7 +1,8 @@
 import { NextRequest } from 'next/server';
 import type { NoteCategory } from '@codervisor/devlog-core';
 import { DevlogService, ProjectService } from '@codervisor/devlog-core';
-import { ApiErrors, createSuccessResponse, RouteParams, SSEEventType } from '@/lib';
+import { ApiErrors, createSuccessResponse, RouteParams } from '@/lib';
+import { RealtimeEventType } from '@/lib/realtime';
 import { z } from 'zod';
 
 // Mark this route as dynamic to prevent static generation
@@ -91,7 +92,7 @@ export async function PUT(
       category: updates.category as NoteCategory | undefined,
     });
 
-    return createSuccessResponse(updatedNote, { sseEventType: SSEEventType.DEVLOG_NOTE_UPDATED });
+    return createSuccessResponse(updatedNote, { sseEventType: RealtimeEventType.DEVLOG_NOTE_UPDATED });
   } catch (error) {
     console.error('Error updating note:', error);
     if (error instanceof Error && error.message.includes('not found')) {
@@ -135,7 +136,7 @@ export async function DELETE(
         devlogId,
         noteId,
       },
-      { sseEventType: SSEEventType.DEVLOG_NOTE_DELETED },
+      { sseEventType: RealtimeEventType.DEVLOG_NOTE_DELETED },
     );
   } catch (error) {
     console.error('Error deleting note:', error);
diff --git a/packages/web/app/api/projects/[id]/devlogs/[devlogId]/notes/route.ts b/packages/web/app/api/projects/[id]/devlogs/[devlogId]/notes/route.ts
@@ -1,7 +1,8 @@
 import { NextRequest } from 'next/server';
 import type { NoteCategory } from '@codervisor/devlog-core';
 import { DevlogService, ProjectService } from '@codervisor/devlog-core';
-import { ApiErrors, createSuccessResponse, RouteParams, SSEEventType } from '@/lib';
+import { ApiErrors, createSuccessResponse, RouteParams } from '@/lib';
+import { RealtimeEventType } from '@/lib/realtime';
 import { DevlogAddNoteBodySchema, DevlogUpdateWithNoteBodySchema } from '@/schemas';
 
 // Mark this route as dynamic to prevent static generation
@@ -107,7 +108,7 @@ export async function POST(
 
     return createSuccessResponse(newNote, {
       status: 201,
-      sseEventType: SSEEventType.DEVLOG_NOTE_CREATED,
+      sseEventType: RealtimeEventType.DEVLOG_NOTE_CREATED,
     });
   } catch (error) {
     console.error('Error adding devlog note:', error);
@@ -172,7 +173,7 @@ export async function PUT(
 
     // Return the updated entry with the note
     const finalEntry = await devlogService.get(devlogId, true); // Load with notes
-    return createSuccessResponse(finalEntry, { sseEventType: SSEEventType.DEVLOG_UPDATED });
+    return createSuccessResponse(finalEntry, { sseEventType: RealtimeEventType.DEVLOG_UPDATED });
   } catch (error) {
     console.error('Error updating devlog with note:', error);
     return ApiErrors.internalError('Failed to update devlog entry with note');
diff --git a/packages/web/app/api/projects/[id]/devlogs/[devlogId]/route.ts b/packages/web/app/api/projects/[id]/devlogs/[devlogId]/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest } from 'next/server';
 import { DevlogService, ProjectService } from '@codervisor/devlog-core';
-import { ApiErrors, createSuccessResponse, SSEEventType, RouteParams } from '@/lib';
+import { ApiErrors, createSuccessResponse, RouteParams } from '@/lib';
+import { RealtimeEventType } from '@/lib/realtime';
 
 // Mark this route as dynamic to prevent static generation
 export const dynamic = 'force-dynamic';
@@ -94,7 +95,7 @@ export async function PUT(
     await devlogService.save(updatedEntry);
 
     // Transform and return updated entry
-    return createSuccessResponse(updatedEntry, { sseEventType: SSEEventType.DEVLOG_UPDATED });
+    return createSuccessResponse(updatedEntry, { sseEventType: RealtimeEventType.DEVLOG_UPDATED });
   } catch (error) {
     console.error('Error updating devlog:', error);
     const message = error instanceof Error ? error.message : 'Failed to update devlog';
@@ -135,7 +136,7 @@ export async function DELETE(
 
     return createSuccessResponse(
       { deleted: true, devlogId },
-      { sseEventType: SSEEventType.DEVLOG_DELETED },
+      { sseEventType: RealtimeEventType.DEVLOG_DELETED },
     );
   } catch (error) {
     console.error('Error deleting devlog:', error);
diff --git a/packages/web/app/api/projects/[id]/devlogs/route.ts b/packages/web/app/api/projects/[id]/devlogs/route.ts
@@ -16,8 +16,8 @@ import {
   createCollectionResponse,
   createSimpleCollectionResponse,
   createSuccessResponse,
-  SSEEventType,
 } from '@/lib';
+import { RealtimeEventType } from '@/lib/realtime';
 
 // Mark this route as dynamic to prevent static generation
 export const dynamic = 'force-dynamic';
@@ -144,7 +144,7 @@ export async function POST(request: NextRequest, { params }: { params: { id: str
     // Transform and return the actual saved devlog
     return createSuccessResponse(savedEntry, {
       status: 201,
-      sseEventType: SSEEventType.DEVLOG_CREATED,
+      sseEventType: RealtimeEventType.DEVLOG_CREATED,
     });
   } catch (error) {
     console.error('Error creating devlog:', error);
diff --git a/packages/web/app/api/projects/[id]/route.ts b/packages/web/app/api/projects/[id]/route.ts
@@ -3,7 +3,7 @@ import {
   createSuccessResponse,
   RouteParams,
   ServiceHelper,
-  SSEEventType,
+  RealtimeEventType,
   withErrorHandling,
 } from '@/lib';
 import { ApiValidator, UpdateProjectBodySchema } from '@/schemas';
@@ -62,7 +62,7 @@ export const PUT = withErrorHandling(
     // Update project
     const updatedProject = await projectResult.data.projectService.update(projectId, data);
 
-    return createSuccessResponse(updatedProject, { sseEventType: SSEEventType.PROJECT_UPDATED });
+    return createSuccessResponse(updatedProject, { sseEventType: RealtimeEventType.PROJECT_UPDATED });
   },
 );
 
@@ -88,7 +88,7 @@ export const DELETE = withErrorHandling(
 
     return createSuccessResponse(
       { deleted: true, projectId },
-      { sseEventType: SSEEventType.PROJECT_DELETED },
+      { sseEventType: RealtimeEventType.PROJECT_DELETED },
     );
   },
 );
diff --git a/packages/web/app/hooks/use-realtime.ts b/packages/web/app/hooks/use-realtime.ts
@@ -87,3 +87,28 @@ export function useProjectEvents() {
     onProjectDeleted,
   };
 }
+
+/**
+ * Hook for subscribing to note events
+ */
+export function useNoteEvents() {
+  const { subscribe } = useRealtime();
+
+  const onNoteCreated = useCallback((callback: (note: any) => void) => {
+    return subscribe(RealtimeEventType.DEVLOG_NOTE_CREATED, callback);
+  }, [subscribe]);
+
+  const onNoteUpdated = useCallback((callback: (note: any) => void) => {
+    return subscribe(RealtimeEventType.DEVLOG_NOTE_UPDATED, callback);
+  }, [subscribe]);
+
+  const onNoteDeleted = useCallback((callback: (data: { id: string }) => void) => {
+    return subscribe(RealtimeEventType.DEVLOG_NOTE_DELETED, callback);
+  }, [subscribe]);
+
+  return {
+    onNoteCreated,
+    onNoteUpdated,
+    onNoteDeleted,
+  };
+}
diff --git a/packages/web/app/lib/index.ts b/packages/web/app/lib/index.ts
@@ -18,5 +18,8 @@ export * from './devlog';
 // Routing utilities
 export * from './routing';
 
+// Realtime utilities
+export * from './realtime';
+
 // General utilities
 export * from './utils';
diff --git a/packages/web/app/projects/[id]/ProjectDetailsPage.tsx b/packages/web/app/projects/[id]/ProjectDetailsPage.tsx
@@ -2,10 +2,10 @@
 
 import React, { useEffect } from 'react';
 import { Dashboard } from '@/components';
-import { useDevlogStore, useProjectStore, useRealtimeStore } from '@/stores';
+import { useDevlogStore, useProjectStore } from '@/stores';
+import { useDevlogEvents } from '@/hooks/use-realtime';
 import { DevlogEntry } from '@codervisor/devlog-core';
 import { useRouter } from 'next/navigation';
-import { SSEEventType } from '@/lib';
 
 interface ProjectDetailsPageProps {
   projectId: number;
@@ -25,24 +25,23 @@ export function ProjectDetailsPage({ projectId }: ProjectDetailsPageProps) {
     fetchTimeSeriesStats,
   } = useDevlogStore();
 
-  const { connect, disconnect, subscribe, unsubscribe } = useRealtimeStore();
+  const { onDevlogCreated, onDevlogUpdated, onDevlogDeleted } = useDevlogEvents();
 
   const fetchAll = async () => {
     return await Promise.all([fetchTimeSeriesStats(), fetchStats(), fetchDevlogs()]);
   };
 
   useEffect(() => {
-    connect();
-    subscribe(SSEEventType.DEVLOG_CREATED, fetchAll);
-    subscribe(SSEEventType.DEVLOG_UPDATED, fetchAll);
-    subscribe(SSEEventType.DEVLOG_DELETED, fetchAll);
+    const unsubscribeCreated = onDevlogCreated(fetchAll);
+    const unsubscribeUpdated = onDevlogUpdated(fetchAll);
+    const unsubscribeDeleted = onDevlogDeleted(fetchAll);
+
     return () => {
-      unsubscribe(SSEEventType.DEVLOG_CREATED);
-      unsubscribe(SSEEventType.DEVLOG_UPDATED);
-      unsubscribe(SSEEventType.DEVLOG_DELETED);
-      disconnect();
+      unsubscribeCreated();
+      unsubscribeUpdated();
+      unsubscribeDeleted();
     };
-  }, []);
+  }, [onDevlogCreated, onDevlogUpdated, onDevlogDeleted]);
 
   useEffect(() => {
     setCurrentProjectId(projectId);
diff --git a/packages/web/app/projects/[id]/devlogs/ProjectDevlogListPage.tsx b/packages/web/app/projects/[id]/devlogs/ProjectDevlogListPage.tsx
@@ -2,10 +2,10 @@
 
 import React, { useEffect } from 'react';
 import { DevlogList } from '@/components';
-import { useDevlogStore, useProjectStore, useRealtimeStore } from '@/stores';
+import { useDevlogStore, useProjectStore } from '@/stores';
+import { useDevlogEvents } from '@/hooks/use-realtime';
 import { DevlogEntry, DevlogId } from '@codervisor/devlog-core';
 import { useRouter } from 'next/navigation';
-import { SSEEventType } from '@/lib';
 
 interface ProjectDevlogListPageProps {
   projectId: number;
@@ -26,20 +26,19 @@ export function ProjectDevlogListPage({ projectId }: ProjectDevlogListPageProps)
     batchDelete,
   } = useDevlogStore();
 
-  const { connect, disconnect, subscribe, unsubscribe } = useRealtimeStore();
+  const { onDevlogCreated, onDevlogUpdated, onDevlogDeleted } = useDevlogEvents();
 
   useEffect(() => {
-    connect();
-    subscribe(SSEEventType.DEVLOG_CREATED, fetchDevlogs);
-    subscribe(SSEEventType.DEVLOG_UPDATED, fetchDevlogs);
-    subscribe(SSEEventType.DEVLOG_DELETED, fetchDevlogs);
+    const unsubscribeCreated = onDevlogCreated(fetchDevlogs);
+    const unsubscribeUpdated = onDevlogUpdated(fetchDevlogs);
+    const unsubscribeDeleted = onDevlogDeleted(fetchDevlogs);
+
     return () => {
-      unsubscribe(SSEEventType.DEVLOG_CREATED);
-      unsubscribe(SSEEventType.DEVLOG_UPDATED);
-      unsubscribe(SSEEventType.DEVLOG_DELETED);
-      disconnect();
+      unsubscribeCreated();
+      unsubscribeUpdated();
+      unsubscribeDeleted();
     };
-  }, []);
+  }, [onDevlogCreated, onDevlogUpdated, onDevlogDeleted, fetchDevlogs]);
 
   useEffect(() => {
     setCurrentProjectId(projectId);
diff --git a/packages/web/app/projects/[id]/devlogs/[devlogId]/ProjectDevlogDetailsPage.tsx b/packages/web/app/projects/[id]/devlogs/[devlogId]/ProjectDevlogDetailsPage.tsx
@@ -2,12 +2,13 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, DevlogDetails, Popover, PopoverContent, PopoverTrigger } from '@/components';
-import { useDevlogStore, useProjectStore, useRealtimeStore } from '@/stores';
+import { useDevlogStore, useProjectStore } from '@/stores';
+import { useDevlogEvents, useNoteEvents } from '@/hooks/use-realtime';
 import { useRouter } from 'next/navigation';
 import { ArrowLeftIcon, SaveIcon, TrashIcon, UndoIcon } from 'lucide-react';
 import { toast } from 'sonner';
-import { SSEEventType } from '@/lib';
 import { DevlogEntry } from '@codervisor/devlog-core';
+import { RealtimeEventType } from '@/lib/realtime';
 
 interface ProjectDevlogDetailsPageProps {
   projectId: number;
@@ -31,7 +32,8 @@ export function ProjectDevlogDetailsPage({ projectId, devlogId }: ProjectDevlogD
     clearCurrentDevlog,
   } = useDevlogStore();
 
-  const { connect, disconnect, subscribe, unsubscribe } = useRealtimeStore();
+  const { onDevlogUpdated, onDevlogDeleted } = useDevlogEvents();
+  const { onNoteCreated, onNoteUpdated, onNoteDeleted } = useNoteEvents();
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
@@ -41,29 +43,42 @@ export function ProjectDevlogDetailsPage({ projectId, devlogId }: ProjectDevlogD
   const discardHandlerRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
-    connect();
-    subscribe(SSEEventType.DEVLOG_UPDATED, ({ id }: DevlogEntry) => {
-      if (id === currentDevlogId) {
+    const unsubscribeUpdated = onDevlogUpdated((devlog: DevlogEntry) => {
+      if (devlog.id === currentDevlogId) {
         fetchCurrentDevlog();
       }
     });
-    subscribe(SSEEventType.DEVLOG_DELETED, ({ id }: DevlogEntry) => {
+
+    const unsubscribeDeleted = onDevlogDeleted(({ id }: { id: number }) => {
       if (id === currentDevlogId) {
         router.push(`/projects/${projectId}/devlogs`);
       }
     });
-    subscribe(SSEEventType.DEVLOG_NOTE_CREATED, fetchCurrentDevlogNotes);
-    subscribe(SSEEventType.DEVLOG_NOTE_UPDATED, fetchCurrentDevlogNotes);
-    subscribe(SSEEventType.DEVLOG_NOTE_DELETED, fetchCurrentDevlogNotes);
+
+    // Subscribe to note events
+    const unsubscribeNoteCreated = onNoteCreated(fetchCurrentDevlogNotes);
+    const unsubscribeNoteUpdated = onNoteUpdated(fetchCurrentDevlogNotes);
+    const unsubscribeNoteDeleted = onNoteDeleted(fetchCurrentDevlogNotes);
+
     return () => {
-      unsubscribe(SSEEventType.DEVLOG_UPDATED);
-      unsubscribe(SSEEventType.DEVLOG_DELETED);
-      unsubscribe(SSEEventType.DEVLOG_NOTE_CREATED);
-      unsubscribe(SSEEventType.DEVLOG_NOTE_UPDATED);
-      unsubscribe(SSEEventType.DEVLOG_NOTE_DELETED);
-      disconnect();
+      unsubscribeUpdated();
+      unsubscribeDeleted();
+      unsubscribeNoteCreated();
+      unsubscribeNoteUpdated();
+      unsubscribeNoteDeleted();
     };
-  }, []);
+  }, [
+    currentDevlogId, 
+    fetchCurrentDevlog, 
+    fetchCurrentDevlogNotes, 
+    onDevlogUpdated, 
+    onDevlogDeleted, 
+    onNoteCreated,
+    onNoteUpdated,
+    onNoteDeleted,
+    router, 
+    projectId
+  ]);
 
   useEffect(() => {
     setCurrentProjectId(projectId);

Original file line number	Diff line number	Diff line change
`@@ -429,9 +429,4 @@ export class CopilotParser extends AIAssistantParser {`
`429`	`429`	`);`
`430`	`430`	`return workspaceData;`
`431`	`431`	`}`
`432`		`-`
`433`		`- // Legacy method name for backwards compatibility`
`434`		`- async discoverVSCodeCopilotData(): Promise<WorkspaceData> {`
`435`		`- return this.discoverChatData();`
`436`		`- }`
`437`	`432`	`}`
Original file line number	Diff line number	Diff line change
`@@ -138,7 +138,7 @@ program`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`const parser = new CopilotParser();`
`141`		`- const projectData = await parser.discoverVSCodeCopilotData();`
	`141`	`+ const projectData = await parser.discoverChatData();`
`142`	`142`
`143`	`143`	`if (projectData.chat_sessions.length === 0) {`
`144`	`144`	`spinner?.stop();`