spec-up-t-healthcheck 1.0.0 → 1.1.0

package/lib/html-formatter.js

@@ -7,9 +7,23 @@
  * responsive design elements.
  * 
  * @author spec-up-t-healthcheck
- 
  */
 
+// Import shared formatting functions
+import {
+  formatResultDetails,
+  getStatusDisplay,
+  getRowClass,
+  escapeHtml,
+  linkifyUrls
+} from './formatters/result-details-formatter.js';
+
+// Import console message formatting functions
+import {
+  formatConsoleMessageList,
+  formatConsoleMessagesTable
+} from './formatters/result-details-formatter.js';
+
 /**
  * Generates a complete HTML report from health check results.
  * 
@@ -147,7 +161,7 @@ export function generateHtmlReport(healthCheckOutput, options = {}) {
     }
     .table td {
       padding: 0.75rem;
-      vertical-align: middle;
+      vertical-align: top;
     }
     .table-striped tbody tr:nth-of-type(odd) {
       background-color: rgba(0, 0, 0, 0.02);
@@ -181,17 +195,22 @@ export function generateHtmlReport(healthCheckOutput, options = {}) {
     .text-warning {
       color: #fd7e14 !important;
     }
+    .text-info {
+      color: #17a2b8 !important;
+    }
     .text-muted {
       color: #6c757d !important;
     }
     .detail-errors ul,
     .detail-warnings ul,
+    .detail-info ul,
     .detail-success ul {
       padding-left: 1.25rem;
       margin-top: 0.5rem;
     }
     .detail-errors li,
     .detail-warnings li,
+    .detail-info li,
     .detail-success li {
       margin-bottom: 0.25rem;
     }
@@ -295,7 +314,7 @@ function generateSummarySection(summary, showPassingByDefault) {
           Health Check Summary
         </h5>
         <div class="filter-toggle form-check form-switch">
-          <input class="form-check-input" type="checkbox" id="togglePassingChecks" ${showPassingByDefault ? 'checked' : ''}>
+          <input class="form-check-input" type="checkbox" id="togglePassingChecks">
           <label class="form-check-label" for="togglePassingChecks">
             Show passing checks
           </label>
@@ -362,6 +381,12 @@ function generateResultsSection(results) {
   }
 
   const resultsHtml = results.map((result, index) => {
+    // Special handling for console-messages check: split into two rows
+    if (result.check === 'console-messages' && result.details && result.details.analysis) {
+      return generateConsoleMessagesRows(result);
+    }
+    
+    // Regular handling for other checks
     const { statusClass, statusIcon, statusText } = getStatusDisplay(result);
     const rowClass = getRowClass(result);
     
@@ -407,6 +432,117 @@ function generateResultsSection(results) {
   </div>`;
 }
 
+/**
+ * Generates separate rows for console-messages check:
+ * 1. Fail row with errors (if any)
+ * 2. Warning row with warnings (if any)
+ * 3. Pass row with successful operations
+ * 
+ * @param {import('./health-checker.js').HealthCheckResult} result - Console messages result
+ * @returns {string} HTML string with table rows
+ */
+function generateConsoleMessagesRows(result) {
+  const { analysis, errors, warnings, allMessages } = result.details;
+  
+  let html = '';
+  
+  // Row 1: Errors (if any)
+  if (errors && errors.length > 0) {
+    const errorDetailsHtml = formatConsoleMessageList('Errors', errors, 'danger');
+    const errorNote = result.details.errorsNote ? `<div class="mt-1"><small class="text-muted">${escapeHtml(result.details.errorsNote)}</small></div>` : '';
+    
+    html += `<tr data-status="fail" class="check-row table-danger">
+      <td class="text-danger status-badge">
+        <i class="bi bi-x-circle-fill status-icon"></i>
+        <span>Fail</span>
+      </td>
+      <td>Terms & Definitions (errors)</td>
+      <td>
+        Found ${errors.length} error(s) in console output
+        ${errorDetailsHtml}
+        ${errorNote}
+      </td>
+    </tr>`;
+  }
+  
+  // Row 2: Warnings (if any)
+  if (warnings && warnings.length > 0) {
+    const warningDetailsHtml = formatConsoleMessageList('Warnings', warnings, 'warning');
+    const warningNote = result.details.warningsNote ? `<div class="mt-1"><small class="text-muted">${escapeHtml(result.details.warningsNote)}</small></div>` : '';
+    
+    html += `<tr data-status="warn" class="check-row table-warning">
+      <td class="text-warning status-badge">
+        <i class="bi bi-exclamation-triangle-fill status-icon"></i>
+        <span>Warning</span>
+      </td>
+      <td>Terms & Definitions (warnings)</td>
+      <td>
+        Found ${warnings.length} warning(s) in console output
+        ${warningDetailsHtml}
+        ${warningNote}
+      </td>
+    </tr>`;
+  }
+  
+  // Row 3: Successful operations (pass)
+  if (allMessages && allMessages.length > 0) {
+    // Filter out error and warning messages AND exclude separator, process, and info types
+    const valuableMessages = allMessages.filter(m => 
+      m.type !== 'error' && 
+      m.type !== 'warn' &&
+      m.type !== 'separator' && 
+      m.type !== 'process' && 
+      m.type !== 'info'
+    );
+    
+    if (valuableMessages.length === 0) {
+      // If no valuable messages after filtering, don't show the Pass row
+      return html;
+    }
+    
+    const valuableCount = valuableMessages.length;
+    
+    // Count by type for display (only valuable types)
+    const typeCounts = {};
+    valuableMessages.forEach(m => {
+      typeCounts[m.type] = (typeCounts[m.type] || 0) + 1;
+    });
+    
+    const typesList = Object.entries(typeCounts)
+      .map(([type, count]) => `${count} ${type}`)
+      .join(', ');
+    
+    // Create modified details object with only valuable messages
+    const filteredDetails = {
+      ...result.details,
+      allMessages: valuableMessages,
+      analysis: {
+        ...result.details.analysis,
+        totalMessages: valuableMessages.length,
+        errorCount: 0, // No errors in valuable messages (they're filtered out)
+        warningCount: 0, // No warnings in valuable messages (they're filtered out)
+        successCount: valuableMessages.filter(m => m.type === 'success').length
+      }
+    };
+    
+    const allMessagesHtml = formatConsoleMessagesTable(filteredDetails);
+    
+    html += `<tr data-status="pass" class="check-row table-success">
+      <td class="text-success status-badge">
+        <i class="bi bi-check-circle-fill status-icon"></i>
+        <span>Pass</span>
+      </td>
+      <td>Terms & Definitions (operations)</td>
+      <td>
+        ${valuableCount} successful operations (${typesList})
+        ${allMessagesHtml}
+      </td>
+    </tr>`;
+  }
+  
+  return html;
+}
+
 /**
  * Generates the JavaScript section for interactive functionality.
  * 
@@ -458,169 +594,4 @@ function generateScriptsSection() {
     // Initialize the filter state
     document.getElementById('togglePassingChecks').dispatchEvent(new Event('change'));
   </script>`;
-}
-
-/**
- * Gets the appropriate display properties for a health check result status.
- * 
- * @param {import('./health-checker.js').HealthCheckResult} result - The health check result
- * @returns {Object} Object containing statusClass, statusIcon, and statusText
- */
-function getStatusDisplay(result) {
-  switch (result.status) {
-    case 'pass':
-      return {
-        statusClass: 'text-success',
-        statusIcon: 'bi-check-circle-fill',
-        statusText: 'Pass'
-      };
-    case 'fail':
-      return {
-        statusClass: 'text-danger',
-        statusIcon: 'bi-x-circle-fill',
-        statusText: 'Fail'
-      };
-    case 'warn':
-      return {
-        statusClass: 'text-warning',
-        statusIcon: 'bi-exclamation-triangle-fill',
-        statusText: 'Warning'
-      };
-    case 'skip':
-      return {
-        statusClass: 'text-muted',
-        statusIcon: 'bi-dash-circle',
-        statusText: 'Skipped'
-      };
-    default:
-      return {
-        statusClass: 'text-secondary',
-        statusIcon: 'bi-question-circle',
-        statusText: 'Unknown'
-      };
-  }
-}
-
-/**
- * Gets the appropriate CSS class for a table row based on the result status.
- * 
- * @param {import('./health-checker.js').HealthCheckResult} result - The health check result
- * @returns {string} CSS class name
- */
-function getRowClass(result) {
-  switch (result.status) {
-    case 'fail':
-      return 'table-danger';
-    case 'warn':
-      return 'table-warning';
-    case 'pass':
-      return 'table-success';
-    default:
-      return '';
-  }
-}
-
-/**
- * Formats result details into HTML.
- * 
- * @param {Object} details - The details object from a health check result
- * @returns {string} Formatted HTML string
- */
-function formatResultDetails(details) {
-  let html = '';
-  
-  // Display errors array with clickable URLs
-  if (details.errors && details.errors.length > 0) {
-    html += `<div class="mt-2 detail-errors"><strong class="text-danger">Errors:</strong><ul class="mb-0 mt-1">`;
-    details.errors.forEach(error => {
-      html += `<li class="text-danger">${linkifyUrls(error)}</li>`;
-    });
-    html += `</ul></div>`;
-  }
-  
-  // Display warnings array with clickable URLs
-  if (details.warnings && details.warnings.length > 0) {
-    html += `<div class="mt-2 detail-warnings"><strong class="text-warning">Warnings:</strong><ul class="mb-0 mt-1">`;
-    details.warnings.forEach(warning => {
-      html += `<li class="text-warning">${linkifyUrls(warning)}</li>`;
-    });
-    html += `</ul></div>`;
-  }
-  
-  // Display success messages array with clickable URLs
-  // Add detail-success class so these can be hidden when "Show passing checks" is disabled
-  if (details.success && details.success.length > 0) {
-    html += `<div class="mt-2 detail-success"><strong class="text-success">Success:</strong><ul class="mb-0 mt-1">`;
-    details.success.forEach(success => {
-      html += `<li class="text-success">${linkifyUrls(success)}</li>`;
-    });
-    html += `</ul></div>`;
-  }
-  
-  // Display missing fields (existing functionality)
-  if (details.missingFields && details.missingFields.length > 0) {
-    html += `<br><small class="text-muted">Missing fields: ${details.missingFields.map(escapeHtml).join(', ')}</small>`;
-  }
-  
-  // Display count (existing functionality)
-  if (details.count !== undefined) {
-    html += `<br><small class="text-muted">Files found: ${details.count}</small>`;
-  }
-  
-  // Display package data (existing functionality)
-  if (details.packageData) {
-    html += `<br><small class="text-muted">Package: ${escapeHtml(details.packageData.name)}@${escapeHtml(details.packageData.version)}</small>`;
-  }
-  
-  return html;
-}
-
-/**
- * Escapes HTML special characters to prevent XSS attacks.
- * 
- * @param {string} text - Text to escape
- * @returns {string} HTML-escaped text
- */
-function escapeHtml(text) {
-  if (typeof text !== 'string') {
-    return String(text);
-  }
-  
-  const map = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#039;'
-  };
-  
-  return text.replace(/[&<>"']/g, (m) => map[m]);
-}
-
-/**
- * Converts URLs in text to clickable links that open in a new tab.
- * The text is first escaped for HTML safety, then URLs are converted to links.
- * 
- * @param {string} text - Text potentially containing URLs
- * @returns {string} HTML string with clickable links
- */
-function linkifyUrls(text) {
-  if (typeof text !== 'string') {
-    return escapeHtml(String(text));
-  }
-  
-  // First escape the text for HTML safety
-  const escaped = escapeHtml(text);
-  
-  // URL regex pattern that matches http://, https://, and www. URLs
-  const urlPattern = /(https?:\/\/[^\s<>"]+|www\.[^\s<>"]+)/g;
-  
-  // Replace URLs with clickable links
-  return escaped.replace(urlPattern, (url) => {
-    // Ensure the URL has a protocol for the href attribute
-    const href = url.startsWith('http') ? url : `https://${url}`;
-    
-    // Create an anchor tag that opens in a new tab with security attributes
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="text-decoration-underline">${url}</a>`;
-  });
 }

package/lib/index.js

@@ -14,7 +14,7 @@
 export { createProvider, createLocalProvider } from './providers.js';
 
 // Re-export health checking functionality
-export { runHealthChecks, createHealthCheckResult, checkPackageJson, checkSpecFiles, checkSpecsJson, checkExternalSpecsUrls, checkGitignore } from './health-checker.js';
+export { runHealthChecks, createHealthCheckResult, checkPackageJson, checkSpecFiles, checkSpecsJson, checkExternalSpecsUrls, checkGitignore, checkSpecDirectoryAndFiles, checkConsoleMessages } from './health-checker.js';
 
 // Re-export formatting functionality
 export { formatResultsAsText, formatResultsAsJson, formatResultsAsHtml } from './formatters.js';

package/lib/providers-browser.js

@@ -0,0 +1,73 @@
+/**
+ * @fileoverview Browser-compatible providers module
+ * 
+ * This is a browser-safe version of providers.js that doesn't import Node.js modules.
+ * It only exports the createProvider function interface without the Node.js-specific
+ * LocalFileProvider.
+ * 
+ * In browser environments, providers must be created by the consuming application
+ * (e.g., GitHubUi creates a GitHub API provider).
+ * 
+ * @author spec-up-t-healthcheck
+ */
+
+/**
+ * @typedef {Object} FileEntry
+ * @property {string} name - The name of the file or directory
+ * @property {string} path - The relative path from the repository root
+ * @property {boolean} isDirectory - Whether this entry is a directory
+ * @property {boolean} isFile - Whether this entry is a file
+ */
+
+/**
+ * @typedef {Object} Provider
+ * @property {string} type - The type of provider ('local', 'remote', etc.)
+ * @property {string} repoPath - The base path or URL for the repository
+ * @property {function(string): Promise<string>} readFile - Read a file and return its content
+ * @property {function(string): Promise<boolean>} fileExists - Check if a file exists
+ * @property {function(string): Promise<FileEntry[]>} listFiles - List files in a directory
+ */
+
+/**
+ * Creates a provider based on the given configuration.
+ * 
+ * In browser environments, only custom providers are supported.
+ * You must pass a pre-configured provider object.
+ * 
+ * @param {Object|string} config - Provider configuration or custom provider
+ * @returns {Provider} The configured provider
+ * @throws {Error} If trying to create a local file provider in browser
+ * 
+ * @example
+ * ```javascript
+ * // Browser: Pass a custom provider (e.g., GitHub API provider)
+ * const provider = createProvider({
+ *   type: 'github',
+ *   repoPath: 'owner/repo/branch',
+ *   readFile: async (path) => { ... },
+ *   fileExists: async (path) => { ... },
+ *   listFiles: async (dir) => { ... }
+ * });
+ * ```
+ */
+export function createProvider(config) {
+  // If config is already a provider object with required methods, return it
+  if (typeof config === 'object' && 
+      config.readFile && 
+      config.fileExists) {
+    return config;
+  }
+  
+  // If config is a string (file path), this is not supported in browser
+  if (typeof config === 'string') {
+    throw new Error(
+      'Local file system providers are not available in browser environments. ' +
+      'Please provide a custom provider object with readFile, fileExists, and listFiles methods.'
+    );
+  }
+  
+  throw new Error(
+    'Invalid provider configuration. In browser environments, you must provide a ' +
+    'custom provider object with readFile, fileExists, and listFiles methods.'
+  );
+}

package/lib/providers.js

@@ -115,6 +115,30 @@ export function createLocalProvider(repoPath) {
       }
     },
 
+    /**
+     * Checks whether a directory exists in the local filesystem.
+     * 
+     * @param {string} dirPath - The relative path to the directory from the repository root
+     * @returns {Promise<boolean>} True if the directory exists, false otherwise
+     * 
+     * @example
+     * ```javascript
+     * const exists = await provider.directoryExists('spec');
+     * if (exists) {
+     *   console.log('Spec directory found');
+     * }
+     * ```
+     */
+    async directoryExists(dirPath) {
+      const fullPath = path.join(repoPath, dirPath);
+      try {
+        const stats = await fs.stat(fullPath);
+        return stats.isDirectory();
+      } catch {
+        return false;
+      }
+    },
+
     /**
      * Lists all files and directories in the specified directory.
      * 

package/lib/web.js

@@ -1,15 +1,19 @@
 /**
  * @fileoverview Browser-compatible entry point for spec-up-t-healthcheck
  * 
- * This module provides a browser-safe API that excludes Node.js-specific modules
- * like file-opener which depend on child_process. This allows the health check
- * functionality to work in browser environments like Vite.
+ * This module provides a browser-safe API that excludes Node.js-specific modules:
+ * - file-opener (depends on child_process)
+ * - link-checker (depends on linkinator with Node.js streams)
+ * - providers (uses providers-browser.js instead of providers.js)
+ * 
+ * The auto-discovery system will automatically skip Node.js-only checks
+ * when running in a browser environment.
  * 
  * @author spec-up-t-healthcheck
  */
 
-// Re-export provider functionality (browser-compatible)
-export { createProvider } from './providers.js';
+// Re-export provider functionality (browser-compatible version without Node.js imports)
+export { createProvider } from './providers-browser.js';
 
 // Re-export health checking functionality (browser-compatible)
 export { 
@@ -28,7 +32,7 @@ export {
 } from './formatters.js';
 
 // Import functions for internal use
-import { createProvider } from './providers.js';
+import { createProvider } from './providers-browser.js';
 import { runHealthChecks } from './health-checker.js';
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec-up-t-healthcheck",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Modular health check tool for spec-up-t repositories - works in Node.js, browsers, and CLI",
   "type": "module",
   "main": "lib/index.js",
@@ -9,7 +9,8 @@
   },
   "exports": {
     ".": "./lib/index.js",
-    "./web": "./lib/web.js"
+    "./web": "./lib/web.js",
+    "./lib/formatters/result-details-formatter.js": "./lib/formatters/result-details-formatter.js"
   },
   "scripts": {
     "test": "jest",
@@ -56,7 +57,8 @@
     "axios": "^1.6.7",
     "commander": "^12.0.0",
     "chalk": "^5.3.0",
-    "ora": "^8.0.1"
+    "ora": "^8.0.1",
+    "linkinator": "^7.1.3"
   },
   "devDependencies": {
     "eslint": "^8.57.0",
@@ -73,19 +75,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "overrides": {
-    "@jest/environment": "^29.7.0",
-    "@jest/environment-jsdom-abstract": "^29.7.0",
-    "@jest/fake-timers": "^29.7.0",
-    "@jest/schemas": "^29.7.0",
-    "@jest/types": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-message-util": "^29.7.0",
-    "jest-mock": "^29.7.0",
-    "jest-util": "^29.7.0",
-    "pretty-format": "^29.7.0",
-    "@jest/pattern": "^29.7.0",
-    "jest-regex-util": "^29.7.0"
   }
 }