grimoire-framework 1.0.0

package/.grimoire/scripts/diagnostics/health-dashboard/src/hooks/useHealthData.js

@@ -0,0 +1,308 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const DEFAULT_REPORT_PATH = '../../.grimoire/reports/health-check-latest.json';
+
+/**
+ * Custom hook for loading health check data
+ */
+function useHealthData(options = {}) {
+  const { reportPath = DEFAULT_REPORT_PATH, autoLoad = true } = options;
+
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [lastUpdated, setLastUpdated] = useState(null);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Try to load from file system (for Electron) or fetch (for web)
+      let reportData;
+
+      if (typeof window !== 'undefined' && window.electronAPI) {
+        // Electron environment
+        reportData = await window.electronAPI.readFile(reportPath);
+      } else {
+        // Web environment - fetch from public folder or API
+        const response = await fetch('/api/health-report');
+        if (!response.ok) {
+          // Fallback to sample data if API not available
+          reportData = getSampleData();
+        } else {
+          reportData = await response.json();
+        }
+      }
+
+      setData(reportData);
+      setLastUpdated(new Date());
+    } catch (err) {
+      console.error('Failed to load health data:', err);
+      // Use sample data as fallback
+      setData(getSampleData());
+      setLastUpdated(new Date());
+    } finally {
+      setLoading(false);
+    }
+  }, [reportPath]);
+
+  const refresh = useCallback(() => {
+    loadData();
+  }, [loadData]);
+
+  useEffect(() => {
+    if (autoLoad) {
+      loadData();
+    }
+  }, [autoLoad, loadData]);
+
+  return {
+    data,
+    loading,
+    error,
+    lastUpdated,
+    refresh,
+  };
+}
+
+/**
+ * Get sample data for development/demo
+ */
+function getSampleData() {
+  return {
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+    mode: 'full',
+    duration: '12s',
+    overall: {
+      score: 87,
+      status: 'healthy',
+      issuesCount: 5,
+      autoFixedCount: 2,
+    },
+    domains: {
+      project: {
+        score: 95,
+        status: 'healthy',
+        checks: [
+          { id: 'PC-001', name: 'Config file exists', status: 'passed', duration: '5ms' },
+          { id: 'PC-002', name: 'Tasks references valid', status: 'passed', duration: '45ms' },
+          {
+            id: 'PC-003',
+            name: 'coding-standards.md exists',
+            status: 'failed',
+            severity: 'MEDIUM',
+            message: 'File not found',
+            autoFix: { available: true, tier: 2, action: 'create-from-template' },
+          },
+          { id: 'PC-004', name: 'tech-stack.md exists', status: 'passed', duration: '3ms' },
+          { id: 'PC-005', name: 'source-tree.md exists', status: 'passed', duration: '4ms' },
+          { id: 'PC-006', name: 'No orphan files', status: 'passed', duration: '120ms' },
+          { id: 'PC-007', name: 'Manifests valid YAML', status: 'passed', duration: '85ms' },
+          {
+            id: 'PC-008',
+            name: 'Templates reference valid paths',
+            status: 'passed',
+            duration: '65ms',
+          },
+        ],
+      },
+      local: {
+        score: 90,
+        status: 'healthy',
+        checks: [
+          { id: 'LE-001', name: 'Node.js installed', status: 'passed', duration: '15ms' },
+          { id: 'LE-002', name: 'npm available', status: 'passed', duration: '12ms' },
+          { id: 'LE-003', name: 'Git installed', status: 'passed', duration: '8ms' },
+          { id: 'LE-004', name: 'GitHub CLI authenticated', status: 'passed', duration: '250ms' },
+          { id: 'LE-005', name: 'MCPs responding', status: 'passed', duration: '180ms' },
+          {
+            id: 'LE-006',
+            name: 'CLAUDE.md valid',
+            status: 'failed',
+            severity: 'LOW',
+            message: 'Missing recommended sections',
+            autoFix: { available: true, tier: 3, action: 'show-guide' },
+          },
+          { id: 'LE-007', name: 'IDE rules configured', status: 'passed', duration: '25ms' },
+          { id: 'LE-008', name: 'Required env vars set', status: 'passed', duration: '10ms' },
+        ],
+      },
+      repository: {
+        score: 85,
+        status: 'degraded',
+        checks: [
+          { id: 'RH-001', name: 'GitHub Actions valid', status: 'passed', duration: '450ms' },
+          {
+            id: 'RH-002',
+            name: 'No failed workflows',
+            status: 'failed',
+            severity: 'HIGH',
+            message: '2 workflows failed in last 10 runs',
+            autoFix: { available: false, tier: 3 },
+          },
+          { id: 'RH-003', name: 'Branch protection on main', status: 'passed', duration: '320ms' },
+          {
+            id: 'RH-004',
+            name: 'Required secrets configured',
+            status: 'passed',
+            duration: '150ms',
+          },
+          { id: 'RH-005', name: 'No stale PRs', status: 'passed', duration: '280ms' },
+          {
+            id: 'RH-006',
+            name: 'Dependencies up to date',
+            status: 'failed',
+            severity: 'MEDIUM',
+            message: '3 outdated dependencies',
+            autoFix: { available: true, tier: 2, action: 'npm-update' },
+          },
+          {
+            id: 'RH-007',
+            name: 'No critical vulnerabilities',
+            status: 'passed',
+            duration: '1200ms',
+          },
+          { id: 'RH-008', name: '.gitignore complete', status: 'passed', duration: '8ms' },
+        ],
+      },
+      deployment: {
+        score: 80,
+        status: 'degraded',
+        checks: [
+          { id: 'DE-001', name: 'Deployment mode detected', status: 'passed', duration: '5ms' },
+          { id: 'DE-002', name: 'Environment vars per env', status: 'passed', duration: '35ms' },
+          {
+            id: 'DE-003',
+            name: 'Remote connection healthy',
+            status: 'skipped',
+            message: 'N/A for local mode',
+          },
+          {
+            id: 'DE-004',
+            name: 'SSL certificates valid',
+            status: 'skipped',
+            message: 'N/A for local mode',
+          },
+          {
+            id: 'DE-005',
+            name: 'Service endpoints responding',
+            status: 'failed',
+            severity: 'HIGH',
+            message: 'API endpoint timeout',
+            autoFix: { available: false, tier: 3 },
+          },
+        ],
+      },
+      services: {
+        score: 95,
+        status: 'healthy',
+        checks: [
+          { id: 'SI-001', name: 'Backlog manager operational', status: 'passed', duration: '45ms' },
+          { id: 'SI-002', name: 'GitHub API accessible', status: 'passed', duration: '320ms' },
+          { id: 'SI-003', name: 'MCP servers healthy', status: 'passed', duration: '180ms' },
+          { id: 'SI-004', name: 'Memory layer status', status: 'passed', duration: '90ms' },
+        ],
+      },
+    },
+    issues: {
+      critical: [],
+      high: [
+        {
+          checkId: 'RH-002',
+          name: 'Failed workflows',
+          message: '2 workflows failed in last 10 runs',
+          domain: 'repository',
+        },
+        {
+          checkId: 'DE-005',
+          name: 'Service endpoints',
+          message: 'API endpoint timeout',
+          domain: 'deployment',
+        },
+      ],
+      medium: [
+        {
+          checkId: 'PC-003',
+          name: 'coding-standards.md',
+          message: 'File not found',
+          domain: 'project',
+          autoFix: { tier: 2, action: 'create-from-template' },
+        },
+        {
+          checkId: 'RH-006',
+          name: 'Dependencies',
+          message: '3 outdated dependencies',
+          domain: 'repository',
+          autoFix: { tier: 2, action: 'npm-update' },
+        },
+      ],
+      low: [
+        {
+          checkId: 'LE-006',
+          name: 'CLAUDE.md',
+          message: 'Missing recommended sections',
+          domain: 'local',
+          autoFix: { tier: 3, action: 'show-guide' },
+        },
+      ],
+    },
+    autoFixed: [
+      {
+        checkId: 'RH-008',
+        action: 'added-node_modules-to-gitignore',
+        backup: '.grimoire/backups/gitignore.1704380400',
+        timestamp: new Date(Date.now() - 3600000).toISOString(),
+      },
+      {
+        checkId: 'PC-001',
+        action: 'recreated-config',
+        backup: '.grimoire/backups/config.yaml.1704376800',
+        timestamp: new Date(Date.now() - 7200000).toISOString(),
+      },
+    ],
+    techDebt: [
+      {
+        id: 'DEBT-001',
+        title: 'Update GitHub Actions to v4',
+        priority: 'MEDIUM',
+        effort: '30min',
+        domain: 'repository',
+        checkId: 'RH-006',
+      },
+      {
+        id: 'DEBT-002',
+        title: 'Add missing documentation sections',
+        priority: 'LOW',
+        effort: '1h',
+        domain: 'project',
+        checkId: 'PC-003',
+      },
+      {
+        id: 'DEBT-003',
+        title: 'Configure CLAUDE.md properly',
+        priority: 'LOW',
+        effort: '15min',
+        domain: 'local',
+        checkId: 'LE-006',
+      },
+    ],
+    history: {
+      trend: [
+        { date: '2025-12-28', score: 78 },
+        { date: '2025-12-29', score: 82 },
+        { date: '2025-12-30', score: 85 },
+        { date: '2025-12-31', score: 84 },
+        { date: '2026-01-01', score: 86 },
+        { date: '2026-01-02', score: 85 },
+        { date: '2026-01-03', score: 87 },
+      ],
+      previousScore: 85,
+      scoreDelta: 2,
+    },
+  };
+}
+
+export default useHealthData;
+

package/.grimoire/scripts/diagnostics/health-dashboard/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/.grimoire/scripts/diagnostics/health-dashboard/src/pages/Dashboard.css

@@ -0,0 +1,238 @@
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+}
+
+/* Loading & Error States */
+.dashboard-loading,
+.dashboard-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
+  gap: var(--spacing-md);
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--color-bg-card);
+  border-top-color: var(--color-info);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.dashboard-error h2 {
+  color: var(--color-critical);
+}
+
+.dashboard-error button {
+  padding: var(--spacing-sm) var(--spacing-lg);
+  background-color: var(--color-info);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+/* Header */
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+.dashboard-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-wrap: wrap;
+}
+
+.dashboard-title h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+
+.dashboard-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.last-updated {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.refresh-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background-color: var(--color-bg-card);
+  color: var(--color-text-primary);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.2s;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  background-color: var(--color-bg-secondary);
+}
+
+.refresh-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auto-refresh-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.toggle-label input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-info);
+}
+
+.countdown {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-sm);
+}
+
+/* Overview Section */
+.dashboard-overview {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: var(--spacing-lg);
+}
+
+@media (max-width: 1024px) {
+  .dashboard-overview {
+    grid-template-columns: 1fr;
+  }
+}
+
+.overview-score {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.score-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.score-stats {
+  display: flex;
+  gap: var(--spacing-xl);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat--success .stat-value {
+  color: var(--color-healthy);
+}
+
+.stat--danger .stat-value {
+  color: var(--color-critical);
+}
+
+/* Section */
+.dashboard-section {
+  margin-top: var(--spacing-lg);
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-primary);
+}
+
+/* Domain Grid */
+.domain-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+/* Issues Row */
+.issues-row {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: var(--spacing-lg);
+}
+
+@media (max-width: 1024px) {
+  .issues-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.issues-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.stacked-panels {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+/* Footer */
+.dashboard-footer {
+  margin-top: var(--spacing-xl);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-bg-card);
+  text-align: center;
+}
+
+.dashboard-footer p {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}

package/.grimoire/scripts/diagnostics/health-dashboard/src/pages/Dashboard.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+  Card,
+  TrendChart,
+  HealthScore,
+  DomainCard,
+  IssuesList,
+  TechDebtList,
+  AutoFixLog
+} from '../components';
+import { useHealthData, useAutoRefresh } from '../hooks';
+import './Dashboard.css';
+
+/**
+ * Main dashboard page
+ */
+function Dashboard() {
+  const { data, loading, error, lastUpdated, refresh } = useHealthData();
+  const autoRefresh = useAutoRefresh({
+    interval: 30000,
+    onRefresh: refresh
+  });
+
+  if (loading && !data) {
+    return (
+      <div className="dashboard-loading">
+        <div className="loading-spinner"></div>
+        <p>Loading health data...</p>
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="dashboard-error">
+        <h2>Error loading data</h2>
+        <p>{error.message}</p>
+        <button onClick={refresh}>Retry</button>
+      </div>
+    );
+  }
+
+  const { overall, domains, issues, autoFixed, techDebt, history } = data || {};
+
+  return (
+    <div className="dashboard">
+      {/* Header Section */}
+      <div className="dashboard-header">
+        <div className="dashboard-title">
+          <h1>System Health</h1>
+          <div className="dashboard-meta">
+            {lastUpdated && (
+              <span className="last-updated">
+                Last updated: {lastUpdated.toLocaleTimeString()}
+              </span>
+            )}
+            <button
+              className="refresh-btn"
+              onClick={refresh}
+              disabled={autoRefresh.isRefreshing}
+            >
+              {autoRefresh.isRefreshing ? 'Refreshing...' : 'Refresh'}
+            </button>
+          </div>
+        </div>
+        <div className="auto-refresh-toggle">
+          <label className="toggle-label">
+            <input
+              type="checkbox"
+              checked={autoRefresh.isEnabled}
+              onChange={autoRefresh.toggle}
+            />
+            <span>Auto-refresh</span>
+          </label>
+          {autoRefresh.isEnabled && (
+            <span className="countdown">Next: {autoRefresh.countdown}s</span>
+          )}
+        </div>
+      </div>
+
+      {/* Overview Section */}
+      <div className="dashboard-overview">
+        <Card className="overview-score">
+          <div className="score-content">
+            <HealthScore score={overall?.score || 0} size="xl" />
+            <div className="score-stats">
+              <div className="stat">
+                <span className="stat-value">{overall?.issuesCount || 0}</span>
+                <span className="stat-label">Issues</span>
+              </div>
+              <div className="stat stat--success">
+                <span className="stat-value">{overall?.autoFixedCount || 0}</span>
+                <span className="stat-label">Auto-Fixed</span>
+              </div>
+              {history?.scoreDelta !== undefined && (
+                <div className={`stat ${history.scoreDelta >= 0 ? 'stat--success' : 'stat--danger'}`}>
+                  <span className="stat-value">
+                    {history.scoreDelta >= 0 ? '+' : ''}{history.scoreDelta}
+                  </span>
+                  <span className="stat-label">vs Previous</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </Card>
+
+        <Card className="overview-trend" title="Health Trend">
+          <TrendChart data={history?.trend || []} height={180} />
+        </Card>
+      </div>
+
+      {/* Domain Cards */}
+      <section className="dashboard-section">
+        <h2 className="section-title">Health by Domain</h2>
+        <div className="domain-grid">
+          {domains && Object.entries(domains).map(([domainId, domainData]) => (
+            <DomainCard
+              key={domainId}
+              domain={domainId}
+              data={domainData}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Issues and Actions */}
+      <section className="dashboard-section">
+        <div className="issues-row">
+          <div className="issues-col">
+            <IssuesList issues={issues} maxItems={5} />
+          </div>
+          <div className="issues-col">
+            <div className="stacked-panels">
+              <AutoFixLog items={autoFixed} maxItems={3} />
+              <TechDebtList items={techDebt} maxItems={3} />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="dashboard-footer">
+        <p>
+          grimoire Health Check v{data?.version || '1.0.0'} |
+          Mode: {data?.mode || 'full'} |
+          Duration: {data?.duration || 'N/A'}
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+export default Dashboard;
+