feat: add Zustand stores for layout, project, and realtime management

- Created layout-store for managing sidebar state.
- Implemented project-store for handling project-related actions and state.
- Added realtime-store for managing WebSocket connections and subscriptions.
- Introduced base CSS styles and font definitions for consistent styling.
- Developed layout and responsive styles for improved UI structure.
- Updated API integration tests to reflect changes in devlog terminology.
- Removed obsolete project-api-client tests to streamline test suite.
- Adjusted TypeScript paths for better module resolution.

Author: Marvin Zhang

docs/design/visual-design-system.md

@@ -43,8 +43,8 @@ This document outlines the revised color scheme and icon system for devlog statu
 5. **Distinctiveness**: Each category is easily distinguishable
 
 ## Implementation Files
-- `packages/web/app/lib/devlog-ui-utils.tsx` - Core color and icon functions
-- `packages/web/app/components/ui/DevlogTags.tsx` - Tag components using the utilities
+- `packages/web/lib/devlog-ui-utils.tsx` - Core color and icon functions
+- `packages/web/components/ui/DevlogTags.tsx` - Tag components using the utilities
 
 ## Benefits
 - **Faster Scanning**: Users can quickly identify work types and status

packages/core/README.md

@@ -59,7 +59,7 @@ const entry = await devlog.createDevlog({
   type: 'feature',
   description: 'Add JWT-based authentication system',
   priority: 'high',
-  businessContext: 'Users need secure login to access protected features',
+  businessContext: 'Users need secure login to access protected feature',
   technicalContext: 'Using JWT tokens with refresh mechanism',
   acceptanceCriteria: [
     'Users can register with email/password',
@@ -81,16 +81,16 @@ await devlog.addNote(entry.id, {
   content: 'Fixed validation issues with email format',
 });
 
-// List all devlogs
+// List all devlog
 const allDevlogs = await devlog.listDevlogs();
 
-// Filter devlogs
+// Filter devlog
 const inProgressTasks = await devlog.listDevlogs({
   status: ['in-progress'],
   type: ['feature', 'bugfix'],
 });
 
-// Search devlogs
+// Search devlog
 const authDevlogs = await devlog.searchDevlogs('authentication');
 
 // Get active context for AI assistants

packages/core/src/types/chat.ts

@@ -180,7 +180,7 @@ export interface ChatStats {
   linkageStats: {
     linked: number;
     unlinked: number;
-    multiLinked: number; // Sessions linked to multiple devlogs
+    multiLinked: number; // Sessions linked to multiple devlog
   };
 }
 

packages/core/src/types/core.ts

@@ -37,7 +37,7 @@ export type DevlogStatus =
    * **In Progress** - Work is actively being developed
    * - Developer/AI is actively working on the implementation
    * - Main development phase where code is being written
-   * - Use when: Starting work, making changes, implementing features
+   * - Use when: Starting work, making changes, implementing feature
    */
   | 'in-progress'
   /**
@@ -292,8 +292,8 @@ export interface TimeSeriesDataPoint {
   date: string; // ISO date string (YYYY-MM-DD)
 
   // Cumulative data (primary Y-axis) - shows total project progress over time
-  totalCreated: number; // Running total of all created devlogs
-  totalClosed: number; // Running total of closed devlogs (based on closedAt timestamp)
+  totalCreated: number; // Running total of all created devlog
+  totalClosed: number; // Running total of closed devlog (based on closedAt timestamp)
 
   // Snapshot data (secondary Y-axis) - shows workload at this point in time
   open: number; // Entries that were open as of this date (totalCreated - totalClosed)

packages/mcp/src/api/devlog-api-client.ts

@@ -51,11 +51,11 @@ export class DevlogApiClient {
 
   constructor(config: DevlogApiClientConfig) {
     this.retries = config.retries || 3;
-    
+
     // Create HTTPS agent for proxy tunneling to fix redirect loops
     let httpsAgent;
     const proxyUrl = process.env.https_proxy || process.env.HTTPS_PROXY;
-    
+
     if (proxyUrl && config.baseUrl.includes('devlog.codervisor.dev')) {
       // Use tunnel agent for devlog.codervisor.dev to avoid redirect loops
       const proxyMatch = proxyUrl.match(/https?:\/\/([^:]+):(\d+)/);
@@ -68,15 +68,15 @@ export class DevlogApiClient {
         });
       }
     }
-    
+
     this.axiosInstance = axios.create({
       baseURL: config.baseUrl.replace(/\/$/, ''), // Remove trailing slash
       timeout: config.timeout || 30000,
       headers: {
         'Content-Type': 'application/json',
       },
       // Use custom agent if we created one, otherwise let axios handle proxy normally
-      ...(httpsAgent && { 
+      ...(httpsAgent && {
         httpsAgent,
         proxy: false, // Disable built-in proxy when using custom agent
       }),
@@ -87,7 +87,7 @@ export class DevlogApiClient {
       (response) => response,
       (error: AxiosError) => {
         throw this.handleAxiosError(error);
-      }
+      },
     );
   }
 
@@ -118,7 +118,7 @@ export class DevlogApiClient {
       // Server responded with error status
       statusCode = error.response.status;
       responseData = error.response.data;
-      
+
       // Try to extract error message from response
       if (responseData) {
         if (typeof responseData === 'string') {
@@ -127,12 +127,12 @@ export class DevlogApiClient {
           errorMessage = responseData.error?.message || responseData.message || error.message;
         }
       }
-      
+
       errorMessage = `HTTP ${statusCode}: ${errorMessage}`;
     } else if (error.request) {
       // Request was made but no response received
       errorMessage = `Network error: ${error.message}`;
-      
+
       // Handle specific proxy/network related errors with helpful context
       if (error.code === 'ERR_FR_TOO_MANY_REDIRECTS') {
         errorMessage += '. Fixed: Using tunnel agent to avoid proxy redirect loops.';
@@ -162,19 +162,17 @@ export class DevlogApiClient {
       return response.data;
     } catch (error) {
       const axiosError = error as AxiosError;
-      
+
       // Only retry on network errors or 5xx server errors, not on client errors
-      const shouldRetry = attempt < this.retries && (
-        !axiosError.response || 
-        (axiosError.response.status >= 500)
-      );
-      
+      const shouldRetry =
+        attempt < this.retries && (!axiosError.response || axiosError.response.status >= 500);
+
       if (shouldRetry) {
         logger.warn(`Request failed (attempt ${attempt}/${this.retries}), retrying...`);
         await new Promise((resolve) => setTimeout(resolve, 1000 * attempt));
         return this.makeRequest(endpoint, options, attempt + 1);
       }
-      
+
       // Re-throw the error (will be handled by the response interceptor)
       throw error;
     }
@@ -194,7 +192,7 @@ export class DevlogApiClient {
       return response.data;
     }
 
-    // Handle paginated response format (devlogs list API)
+    // Handle paginated response format (devlog list API)
     if (
       response &&
       typeof response === 'object' &&

packages/web/app/api/projects/[name]/devlogs/[devlogId]/notes/[noteId]/route.ts

@@ -14,7 +14,7 @@ const UpdateNoteBodySchema = z.object({
   category: z.string().optional(),
 });
 
-// GET /api/projects/[name]/devlogs/[id]/notes/[noteId] - Get specific note
+// GET /api/projects/[name]/devlog/[id]/notes/[noteId] - Get specific note
 export async function GET(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string; noteId: string } },
@@ -53,7 +53,7 @@ export async function GET(
   }
 }
 
-// PUT /api/projects/[name]/devlogs/[id]/notes/[noteId] - Update specific note
+// PUT /api/projects/[name]/devlog/[id]/notes/[noteId] - Update specific note
 export async function PUT(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string; noteId: string } },
@@ -106,7 +106,7 @@ export async function PUT(
   }
 }
 
-// DELETE /api/projects/[name]/devlogs/[id]/notes/[noteId] - Delete specific note
+// DELETE /api/projects/[name]/devlog/[id]/notes/[noteId] - Delete specific note
 export async function DELETE(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string; noteId: string } },

packages/web/app/api/projects/[name]/devlogs/[devlogId]/notes/route.ts

@@ -8,7 +8,7 @@ import { DevlogAddNoteBodySchema, DevlogUpdateWithNoteBodySchema } from '@/schem
 // Mark this route as dynamic to prevent static generation
 export const dynamic = 'force-dynamic';
 
-// GET /api/projects/[name]/devlogs/[id]/notes - List notes for a devlog entry
+// GET /api/projects/[name]/devlog/[id]/notes - List notes for a devlog entry
 export async function GET(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },
@@ -68,7 +68,7 @@ export async function GET(
   }
 }
 
-// POST /api/projects/[name]/devlogs/[id]/notes - Add note to devlog entry
+// POST /api/projects/[name]/devlog/[id]/notes - Add note to devlog entry
 export async function POST(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },
@@ -118,7 +118,7 @@ export async function POST(
   }
 }
 
-// PUT /api/projects/[name]/devlogs/[id]/notes - Update devlog and add note in one operation
+// PUT /api/projects/[name]/devlog/[id]/notes - Update devlog and add note in one operation
 export async function PUT(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },

packages/web/app/api/projects/[name]/devlogs/[devlogId]/route.ts

@@ -6,7 +6,7 @@ import { RealtimeEventType } from '@/lib/realtime';
 // Mark this route as dynamic to prevent static generation
 export const dynamic = 'force-dynamic';
 
-// GET /api/projects/[name]/devlogs/[id] - Get specific devlog entry
+// GET /api/projects/[name]/devlog/[id] - Get specific devlog entry
 export async function GET(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },
@@ -55,7 +55,7 @@ export async function GET(
   }
 }
 
-// PUT /api/projects/[name]/devlogs/[id] - Update devlog entry
+// PUT /api/projects/[name]/devlog/[id] - Update devlog entry
 export async function PUT(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },
@@ -106,7 +106,7 @@ export async function PUT(
   }
 }
 
-// DELETE /api/projects/[name]/devlogs/[id] - Delete devlog entry
+// DELETE /api/projects/[name]/devlog/[id] - Delete devlog entry
 export async function DELETE(
   request: NextRequest,
   { params }: { params: { name: string; devlogId: string } },

packages/web/app/api/projects/[name]/devlogs/route.ts

@@ -15,7 +15,7 @@ import { RealtimeEventType } from '@/lib/realtime';
 // Mark this route as dynamic to prevent static generation
 export const dynamic = 'force-dynamic';
 
-// GET /api/projects/[name]/devlogs - List devlogs for a project
+// GET /api/projects/[name]/devlog - List devlog for a project
 export async function GET(request: NextRequest, { params }: { params: { name: string } }) {
   try {
     // Parse and validate project identifier
@@ -84,16 +84,16 @@ export async function GET(request: NextRequest, { params }: { params: { name: st
     if (result.pagination) {
       return createCollectionResponse(result.items, result.pagination);
     } else {
-      // Transform devlogs and return as simple collection
+      // Transform devlog and return as simple collection
       return createSimpleCollectionResponse(result.items);
     }
   } catch (error) {
-    console.error('Error fetching devlogs:', error);
-    return ApiErrors.internalError('Failed to fetch devlogs');
+    console.error('Error fetching devlog:', error);
+    return ApiErrors.internalError('Failed to fetch devlog');
   }
 }
 
-// POST /api/projects/[name]/devlogs - Create new devlog entry
+// POST /api/projects/[name]/devlog - Create new devlog entry
 export async function POST(request: NextRequest, { params }: { params: { name: string } }) {
   try {
     // Parse and validate project identifier

packages/web/app/api/projects/[name]/devlogs/search/route.ts

@@ -28,7 +28,7 @@ interface SearchResponse {
   };
 }
 
-// GET /api/projects/[name]/devlogs/search - Enhanced search for devlogs
+// GET /api/projects/[name]/devlog/search - Enhanced search for devlog
 export async function GET(request: NextRequest, { params }: { params: { name: string } }) {
   try {
     // Parse and validate project name parameter