npm - @vizzly-testing/cli - Versions diffs - 0.13.1 → 0.13.2 - Mend

@vizzly-testing/cli 0.13.1 → 0.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +552 -88
package/claude-plugin/.claude-plugin/README.md +4 -0
package/claude-plugin/.mcp.json +4 -0
package/claude-plugin/CHANGELOG.md +27 -0
package/claude-plugin/mcp/vizzly-docs-server/README.md +95 -0
package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js +110 -0
package/claude-plugin/mcp/vizzly-docs-server/index.js +283 -0
package/claude-plugin/mcp/vizzly-server/cloud-api-provider.js +26 -10
package/claude-plugin/mcp/vizzly-server/index.js +14 -1
package/claude-plugin/mcp/vizzly-server/local-tdd-provider.js +61 -28
package/dist/cli.js +4 -4
package/dist/commands/run.js +1 -1
package/dist/commands/tdd-daemon.js +54 -8
package/dist/commands/tdd.js +8 -8
package/dist/container/index.js +34 -3
package/dist/reporter/reporter-bundle.css +1 -1
package/dist/reporter/reporter-bundle.iife.js +29 -59
package/dist/server/handlers/tdd-handler.js +18 -16
package/dist/server/http-server.js +473 -4
package/dist/services/config-service.js +371 -0
package/dist/services/project-service.js +245 -0
package/dist/services/server-manager.js +4 -5
package/dist/services/static-report-generator.js +208 -0
package/dist/services/tdd-service.js +14 -6
package/dist/types/reporter/src/components/ui/form-field.d.ts +16 -0
package/dist/types/reporter/src/components/views/projects-view.d.ts +1 -0
package/dist/types/reporter/src/components/views/settings-view.d.ts +1 -0
package/dist/types/reporter/src/hooks/use-auth.d.ts +10 -0
package/dist/types/reporter/src/hooks/use-config.d.ts +9 -0
package/dist/types/reporter/src/hooks/use-projects.d.ts +10 -0
package/dist/types/reporter/src/services/api-client.d.ts +7 -0
package/dist/types/server/http-server.d.ts +1 -1
package/dist/types/services/config-service.d.ts +98 -0
package/dist/types/services/project-service.d.ts +103 -0
package/dist/types/services/server-manager.d.ts +2 -1
package/dist/types/services/static-report-generator.d.ts +25 -0
package/dist/types/services/tdd-service.d.ts +2 -2
package/dist/utils/console-ui.js +26 -2
package/docs/tdd-mode.md +31 -15
package/package.json +4 -4

package/dist/server/handlers/tdd-handler.js CHANGED Viewed

@@ -427,24 +427,24 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
   };
   const acceptBaseline = async comparisonId => {
     try {
-      // Use TDD service to accept the baseline
-      const result = await tddService.acceptBaseline(comparisonId);
-      // Read current report data and update the comparison status
+      // Read current report data to get the comparison
       const reportData = readReportData();
       const comparison = reportData.comparisons.find(c => c.id === comparisonId);
-      if (comparison) {
-        // Update the comparison to passed status
-        const updatedComparison = {
-          ...comparison,
-          status: 'passed',
-          diffPercentage: 0,
-          diff: null
-        };
-        updateComparison(updatedComparison);
-      } else {
-        logger.error(`Comparison not found in report data for ID: ${comparisonId}`);
+      if (!comparison) {
+        throw new Error(`Comparison not found with ID: ${comparisonId}`);
       }
+      // Pass the comparison object to tddService instead of just the ID
+      const result = await tddService.acceptBaseline(comparison);
+      // Update the comparison to passed status
+      const updatedComparison = {
+        ...comparison,
+        status: 'passed',
+        diffPercentage: 0,
+        diff: null
+      };
+      updateComparison(updatedComparison);
       logger.info(`Baseline accepted for comparison ${comparisonId}`);
       return result;
     } catch (error) {
@@ -461,7 +461,9 @@ export const createTddHandler = (config, workingDir, baselineBuild, baselineComp
       // Accept all failed or new comparisons
       for (const comparison of reportData.comparisons) {
         if (comparison.status === 'failed' || comparison.status === 'new') {
-          await tddService.acceptBaseline(comparison.id);
+          // Pass the comparison object directly instead of just the ID
+          // This allows tddService to work with comparisons from report-data.json
+          await tddService.acceptBaseline(comparison);
           // Update the comparison to passed status
           updateComparison({

package/dist/server/http-server.js CHANGED Viewed

@@ -7,8 +7,13 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PROJECT_ROOT = join(__dirname, '..', '..');
 const logger = createServiceLogger('HTTP-SERVER');
-export const createHttpServer = (port, screenshotHandler) => {
+export const createHttpServer = (port, screenshotHandler, services = {}) => {
   let server = null;
+  // Extract services for config/auth/project management
+  let configService = services.configService;
+  let authService = services.authService;
+  let projectService = services.projectService;
   const parseRequestBody = req => {
     return new Promise((resolve, reject) => {
       let body = '';
@@ -80,7 +85,7 @@ export const createHttpServer = (port, screenshotHandler) => {
     }
     // Serve the main React app for all non-API routes
-    if (req.method === 'GET' && (parsedUrl.pathname === '/' || parsedUrl.pathname === '/dashboard' || parsedUrl.pathname === '/stats')) {
+    if (req.method === 'GET' && (parsedUrl.pathname === '/' || parsedUrl.pathname === '/dashboard' || parsedUrl.pathname === '/stats' || parsedUrl.pathname === '/settings' || parsedUrl.pathname === '/projects')) {
       // Serve React-powered dashboard
       const reportDataPath = join(process.cwd(), '.vizzly', 'report-data.json');
@@ -98,7 +103,7 @@ export const createHttpServer = (port, screenshotHandler) => {
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Vizzly TDD Dashboard</title>
+    <title>Vizzly Dev Dashboard</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/reporter-bundle.css">
@@ -108,7 +113,7 @@ export const createHttpServer = (port, screenshotHandler) => {
         <div class="reporter-loading">
             <div>
                 <div class="spinner"></div>
-                <p>Loading Vizzly TDD Dashboard...</p>
+                <p>Loading Vizzly Dev Dashboard...</p>
             </div>
         </div>
     </div>
@@ -401,6 +406,470 @@ export const createHttpServer = (port, screenshotHandler) => {
       }
       return;
     }
+    // ===== CONFIG MANAGEMENT ENDPOINTS =====
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config') {
+      // Get merged config with sources
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('merged');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config/project') {
+      // Get project-level config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('project');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching project config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/config/global') {
+      // Get global config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const configData = await configService.getConfig('global');
+        res.statusCode = 200;
+        res.end(JSON.stringify(configData));
+      } catch (error) {
+        logger.error('Error fetching global config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/project') {
+      // Update project config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.updateConfig('project', body);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          ...result
+        }));
+      } catch (error) {
+        logger.error('Error updating project config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/global') {
+      // Update global config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.updateConfig('global', body);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          ...result
+        }));
+      } catch (error) {
+        logger.error('Error updating global config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/config/validate') {
+      // Validate config
+      if (!configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Config service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const result = await configService.validateConfig(body);
+        res.statusCode = 200;
+        res.end(JSON.stringify(result));
+      } catch (error) {
+        logger.error('Error validating config:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    // ===== AUTH ENDPOINTS =====
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/auth/status') {
+      // Get auth status and user info
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const isAuthenticated = await authService.isAuthenticated();
+        let user = null;
+        if (isAuthenticated) {
+          const whoami = await authService.whoami();
+          user = whoami.user;
+        }
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          authenticated: isAuthenticated,
+          user
+        }));
+      } catch (error) {
+        logger.error('Error getting auth status:', error);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          authenticated: false,
+          user: null
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/login') {
+      // Initiate device flow login
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const deviceFlow = await authService.initiateDeviceFlow();
+        // Transform snake_case to camelCase for frontend
+        const response = {
+          deviceCode: deviceFlow.device_code,
+          userCode: deviceFlow.user_code,
+          verificationUri: deviceFlow.verification_uri,
+          verificationUriComplete: deviceFlow.verification_uri_complete,
+          expiresIn: deviceFlow.expires_in,
+          interval: deviceFlow.interval
+        };
+        res.statusCode = 200;
+        res.end(JSON.stringify(response));
+      } catch (error) {
+        logger.error('Error initiating device flow:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/poll') {
+      // Poll device authorization status
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          deviceCode
+        } = body;
+        if (!deviceCode) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'deviceCode is required'
+          }));
+          return;
+        }
+        let result;
+        try {
+          result = await authService.pollDeviceAuthorization(deviceCode);
+        } catch (error) {
+          // Handle "Authorization pending" as a valid response
+          if (error.message && error.message.includes('Authorization pending')) {
+            res.statusCode = 200;
+            res.end(JSON.stringify({
+              status: 'pending'
+            }));
+            return;
+          }
+          // Other errors are actual failures
+          throw error;
+        }
+        // Check if authorization is complete by looking for tokens
+        if (result.tokens && result.tokens.accessToken) {
+          // Handle both snake_case and camelCase for token data
+          let tokensData = result.tokens;
+          let tokenExpiresIn = tokensData.expiresIn || tokensData.expires_in;
+          let tokenExpiresAt = tokenExpiresIn ? new Date(Date.now() + tokenExpiresIn * 1000).toISOString() : result.expires_at || result.expiresAt;
+          let tokens = {
+            accessToken: tokensData.accessToken || tokensData.access_token,
+            refreshToken: tokensData.refreshToken || tokensData.refresh_token,
+            expiresAt: tokenExpiresAt,
+            user: result.user
+          };
+          await authService.completeDeviceFlow(tokens);
+          // Return a simplified response to the client
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            status: 'complete',
+            user: result.user
+          }));
+        } else {
+          // Still pending or other status
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            status: 'pending'
+          }));
+        }
+      } catch (error) {
+        logger.error('Error polling device authorization:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/auth/logout') {
+      // Logout user
+      if (!authService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Auth service not available'
+        }));
+        return;
+      }
+      try {
+        await authService.logout();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: 'Logged out successfully'
+        }));
+      } catch (error) {
+        logger.error('Error logging out:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    // ===== PROJECT MANAGEMENT ENDPOINTS =====
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/projects') {
+      // List all projects from API
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const projects = await projectService.listProjects();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          projects
+        }));
+      } catch (error) {
+        logger.error('Error listing projects:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/projects/mappings') {
+      // List project directory mappings
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const mappings = await projectService.listMappings();
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          mappings
+        }));
+      } catch (error) {
+        logger.error('Error listing project mappings:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'POST' && parsedUrl.pathname === '/api/projects/mappings') {
+      // Create or update project mapping
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const body = await parseRequestBody(req);
+        const {
+          directory,
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        } = body;
+        const mapping = await projectService.createMapping(directory, {
+          projectSlug,
+          organizationSlug,
+          token,
+          projectName
+        });
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          mapping
+        }));
+      } catch (error) {
+        logger.error('Error creating project mapping:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'DELETE' && parsedUrl.pathname.startsWith('/api/projects/mappings/')) {
+      // Delete project mapping
+      if (!projectService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Project service not available'
+        }));
+        return;
+      }
+      try {
+        const directory = decodeURIComponent(parsedUrl.pathname.replace('/api/projects/mappings/', ''));
+        await projectService.removeMapping(directory);
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          success: true,
+          message: 'Mapping deleted'
+        }));
+      } catch (error) {
+        logger.error('Error deleting project mapping:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
+    if (req.method === 'GET' && parsedUrl.pathname === '/api/builds/recent') {
+      // Get recent builds for current project
+      if (!projectService || !configService) {
+        res.statusCode = 503;
+        res.end(JSON.stringify({
+          error: 'Required services not available'
+        }));
+        return;
+      }
+      try {
+        const config = await configService.getConfig('merged');
+        const {
+          projectSlug,
+          organizationSlug
+        } = config.config;
+        if (!projectSlug || !organizationSlug) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({
+            error: 'No project configured for this directory'
+          }));
+          return;
+        }
+        const limit = parseInt(parsedUrl.searchParams.get('limit') || '10', 10);
+        const branch = parsedUrl.searchParams.get('branch') || undefined;
+        const builds = await projectService.getRecentBuilds(projectSlug, organizationSlug, {
+          limit,
+          branch
+        });
+        res.statusCode = 200;
+        res.end(JSON.stringify({
+          builds
+        }));
+      } catch (error) {
+        logger.error('Error fetching recent builds:', error);
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          error: error.message
+        }));
+      }
+      return;
+    }
     res.statusCode = 404;
     res.end(JSON.stringify({
       error: 'Not found'