fix: enhance MSW plugin configuration with robust manual handlers for API endpoints

Author: hotlong

.storybook/msw-browser.ts

@@ -42,33 +42,82 @@ export async function startMockServer() {
         console.error('❌ CRM Config is missing! Skipping AppPlugin.');
     }
 
-    mswPlugin = new MSWPlugin({
-        enableBrowser: false, // Disable auto-start, let msw-storybook-addon handle it
-        baseUrl: '/api/v1', 
-        logRequests: true,
-        customHandlers: [
-            // Handle /api/v1 for ObjectStackClient.connect()
-            http.get('/api/v1', async () => {
-                return HttpResponse.json({
-                    version: '1.0',
-                    objects: ['contact', 'opportunity', 'account'],
-                    endpoints: {
-                        data: '/api/v1/data',
-                        metadata: '/api/v1/metadata'
-                    }
-                });
-            }),
-            http.get('/api/v1/', async () => {
-                return HttpResponse.json({
-                    version: '1.0',
-                    objects: ['contact', 'opportunity', 'account'],
-                    endpoints: {
-                        data: '/api/v1/data',
-                        metadata: '/api/v1/metadata'
-                    }
+
+    // Create handlers manually, similar to console app tests
+    const protocol = kernel.getService('protocol') as any;
+    
+    // We override mswPlugin handlers or just add ours.
+    // Since we are not using startServer(), we need to pass handlers to msw-storybook-addon via context
+    // But this function returns kernel.
+    // The msw-browser handles customHandlers inside MSWPlugin initialization?
+    // No, we passed them in constructor.
+
+    // Let's redefine handlers to be robust
+    const manualHandlers = [
+        // Discovery endpoint
+        http.get('/api/v1', async () => {
+             const response = await protocol.getDiscovery();
+             return HttpResponse.json(response);
+        }),
+        http.get('/api/v1/', async () => {
+             const response = await protocol.getDiscovery();
+             return HttpResponse.json(response);
+        }),
+        
+        // Metadata endpoints
+        http.get('/api/v1/metadata/object/:objectName', async ({ params }) => {
+            console.log('[MSW] Get Meta:', params.objectName);
+            try {
+                const response = await protocol.getMetaItem({ 
+                    type: 'object', 
+                    name: params.objectName as string 
                 });
-            }),
-            http.get('/api/bootstrap', async () => {
+                const payload = (response && response.item) ? response.item : response;
+                return HttpResponse.json(payload || { error: 'Not found' }, { status: payload ? 200 : 404 });
+            } catch (e) {
+                return HttpResponse.json({ error: String(e) }, { status: 500 });
+            }
+        }),
+
+        // Data List
+        http.get('/api/v1/data/:objectName', async ({ params, request }) => {
+             console.log('[MSW] Find:', params.objectName);
+             try {
+                 const url = new URL(request.url);
+                 const query: any = {};
+                 // Simple query parsing if needed, but for now just pass to driver
+                 const records = await driver.find(params.objectName as string, {});
+                 
+                 // Wrap if protocol expects it (OData style often matches { value: [] })
+                 // But Protocol service might do this.
+                 // If we bypass protocol and go to driver, we get raw array.
+                 // Client expects { value: [] } usually?
+                 // Let's check console mock: It returns { value: response }
+                 return HttpResponse.json({ value: records }, { status: 200 });
+             } catch (e) {
+                 return HttpResponse.json({ error: String(e) }, { status: 500 });
+             }
+        }),
+
+        // Data Detail
+        http.get('/api/v1/data/:objectName/:id', async ({ params }) => {
+             console.log('[MSW] FindOne:', params.objectName, params.id);
+             try {
+                 // For InMemoryDriver, findOne might need exact ID match.
+                 // Console mock used driver.find with where clause.
+                 // Let's use findOne if available or scan.
+                 const record = await driver.findOne(params.objectName as string, params.id as string);
+                 if (record) return HttpResponse.json(record);
+                 
+                 // Fallback to find
+                 const records = await driver.find(params.objectName as string, {});
+                 const found = records.find((r: any) => r._id === params.id || r.id === params.id);
+                 return HttpResponse.json(found || { error: 'Not Found' }, { status: found ? 200 : 404 });
+             } catch (e) {
+                 return HttpResponse.json({ error: String(e) }, { status: 500 });
+             }
+        }),
+         http.get('/api/bootstrap', async () => {
                 const contacts = await driver.find('contact', { object: 'contact' });
                 const stats = { revenue: 125000, leads: 45, deals: 12 };
                 return HttpResponse.json({
@@ -77,7 +126,13 @@ export async function startMockServer() {
                     contacts: contacts || []
                 });
             })
-        ]
+    ];
+
+    mswPlugin = new MSWPlugin({
+        enableBrowser: false, 
+        baseUrl: '/api/v1', 
+        logRequests: true,
+        customHandlers: manualHandlers
     });
 
     kernel.use(mswPlugin);