@greenarmor/ges-web-dashboard 1.2.3 → 1.2.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as http from "node:http";
-import type { ScoreFile, Control, FixHistoryEntry } from "@greenarmor/ges-core";
+import type { ScoreFile, Control, FixHistoryEntry, ActivityLogEntry } from "@greenarmor/ges-core";
 import type { Finding } from "@greenarmor/ges-audit-engine";
 export interface DashboardOptions {
     port?: number;
@@ -77,6 +77,7 @@ export interface DashboardData {
     findings: Finding[];
     packs: PackSummary[];
     fixHistory: FixHistoryEntry[];
+    activityLog: ActivityLogEntry[];
     lastAudit: string;
 }
 export declare function collectDashboardData(projectPath: string): DashboardData;

package/dist/index.js

@@ -4,7 +4,8 @@ import * as path from "node:path";
 import { runAudit, deduplicateFindings } from "@greenarmor/ges-audit-engine";
 import { getAllPacks, getPack } from "@greenarmor/ges-policy-engine";
 import { generateScoreFile } from "@greenarmor/ges-scoring-engine";
-import { loadFixHistory } from "@greenarmor/ges-core";
+import { loadFixHistory, loadActivityLog, loadControlsFromDisk, loadControlOverrides, applyOverridesToControls } from "@greenarmor/ges-core";
+import { getInstalledPackIds as getInstalledPackIdsFromDisk } from "@greenarmor/ges-core";
 import { renderDashboard } from "./template.js";
 function loadConfig(projectPath) {
     const configPath = path.join(projectPath, ".ges", "config.json");
@@ -31,21 +32,13 @@ function loadControlsForConfig(projectPath, config) {
         const fwLower = new Set(config.frameworks.map(f => f.toLowerCase()));
         const allPacks = getAllPacks();
         const packs = allPacks.filter(pack => fwLower.has(pack.id.toLowerCase()));
-        const controls = packs.flatMap(p => p.controls);
-        const overridesPath = path.join(projectPath, ".ges", "control-overrides.json");
-        if (fs.existsSync(overridesPath)) {
-            const overrides = JSON.parse(fs.readFileSync(overridesPath, "utf-8"));
-            for (const override of overrides) {
-                const control = controls.find((c) => c.id === override.control_id);
-                if (control) {
-                    control.status = override.status;
-                    for (const check of control.checks) {
-                        check.status = override.status;
-                    }
-                }
-            }
-        }
-        return controls;
+        const inMemoryControls = packs.flatMap(p => p.controls);
+        const diskControls = loadControlsFromDisk(projectPath);
+        const seenIds = new Set(inMemoryControls.map((c) => c.id));
+        const extraFromDisk = diskControls.filter(c => !seenIds.has(c.id));
+        const controls = [...inMemoryControls, ...extraFromDisk];
+        const overrides = loadControlOverrides(projectPath);
+        return applyOverridesToControls(controls, overrides);
     }
     catch {
         return [];
@@ -139,32 +132,40 @@ function getInstalledPackIds(projectPath, config) {
             }
         }
     }
-    const controlsDir = path.join(projectPath, "controls");
-    try {
-        const entries = fs.readdirSync(controlsDir, { withFileTypes: true });
-        for (const entry of entries) {
-            if (entry.isDirectory()) {
-                const ctrlFile = path.join(controlsDir, entry.name, "controls.json");
-                if (fs.existsSync(ctrlFile)) {
-                    ids.add(entry.name);
-                }
-            }
-        }
-    }
-    catch {
-        // controls dir may not exist
+    for (const id of getInstalledPackIdsFromDisk(projectPath)) {
+        ids.add(id);
     }
     return ids;
 }
+function getFrameworksFromControls(controls) {
+    const fwSet = new Set();
+    for (const c of controls) {
+        if (c.framework)
+            fwSet.add(c.framework);
+    }
+    return [...fwSet];
+}
 export function collectDashboardData(projectPath) {
     const config = loadConfig(projectPath);
     let score = loadScore(projectPath);
-    const baseControls = config ? loadControlsForConfig(projectPath, config) : [];
+    let baseControls;
+    let frameworks;
+    if (config) {
+        baseControls = loadControlsForConfig(projectPath, config);
+        frameworks = config.frameworks;
+    }
+    else {
+        baseControls = loadControlsFromDisk(projectPath);
+        frameworks = [];
+    }
     const findings = loadFindings(projectPath);
     const controls = updateControlsFromFindings(baseControls, findings);
-    if (config) {
+    if (config || controls.length > 0) {
         try {
-            const freshScore = generateScoreFile(controls, config.frameworks, findings);
+            const scoreFrameworks = frameworks.length > 0
+                ? frameworks
+                : getFrameworksFromControls(controls);
+            const freshScore = generateScoreFile(controls, scoreFrameworks, findings);
             score = freshScore;
         }
         catch {
@@ -176,6 +177,7 @@ export function collectDashboardData(projectPath) {
     const installedPacks = getInstalledPackIds(projectPath, config || undefined);
     const packs = allPacks.map(p => buildPackSummary(p, controls, findings, installedPacks));
     const fixHistory = loadFixHistory(projectPath);
+    const activityLog = loadActivityLog(projectPath);
     const metadataPath = path.join(projectPath, ".ges", "metadata.json");
     let lastAudit = "";
     try {
@@ -185,16 +187,22 @@ export function collectDashboardData(projectPath) {
     catch {
         lastAudit = new Date().toISOString();
     }
+    const allFrameworks = new Set(frameworks);
+    for (const c of controls) {
+        if (c.framework)
+            allFrameworks.add(c.framework);
+    }
     return {
         projectName: config?.project_name || "Unknown Project",
         projectType: config?.project_type || "unknown",
-        frameworks: config?.frameworks || [],
-        gesfVersion: "1.2.3",
+        frameworks: [...allFrameworks],
+        gesfVersion: "1.2.5",
         score,
         controls,
         findings,
         packs,
         fixHistory,
+        activityLog,
         lastAudit,
     };
 }
@@ -203,7 +211,9 @@ export function collectPackDetail(projectPath, packId) {
     if (!pack)
         return null;
     const config = loadConfig(projectPath);
-    const baseControls = config ? loadControlsForConfig(projectPath, config) : [];
+    const baseControls = config
+        ? loadControlsForConfig(projectPath, config)
+        : loadControlsFromDisk(projectPath);
     const findings = loadFindings(projectPath);
     const controls = updateControlsFromFindings(baseControls, findings);
     const packControlIds = new Set(pack.controls.map(c => c.id));
@@ -281,9 +291,9 @@ export function collectPackDetail(projectPath, packId) {
 }
 export function collectControlDetail(projectPath, controlId) {
     const config = loadConfig(projectPath);
-    if (!config)
-        return null;
-    const baseControls = loadControlsForConfig(projectPath, config);
+    const baseControls = config
+        ? loadControlsForConfig(projectPath, config)
+        : loadControlsFromDisk(projectPath);
     const findings = loadFindings(projectPath);
     const controls = updateControlsFromFindings(baseControls, findings);
     const control = controls.find(c => c.id === controlId);
@@ -380,6 +390,16 @@ export function startDashboard(options) {
             }
             return;
         }
+        if (pathname === "/api/activity-log") {
+            try {
+                const data = collectDashboardData(options.projectPath);
+                jsonResponse(res, data.activityLog);
+            }
+            catch (err) {
+                jsonError(res, err instanceof Error ? err.message : String(err));
+            }
+            return;
+        }
         const packMatch = pathname.match(/^\/api\/packs\/([a-z0-9-]+)$/);
         if (packMatch) {
             try {

package/dist/template.js

@@ -1,3 +1,29 @@
+function matchPackForControl(controlId, packs) {
+    const idUpper = controlId.toUpperCase();
+    for (const p of packs) {
+        if (p.id === "gdpr" && idUpper.startsWith("GDPR-"))
+            return p;
+        if (p.id === "owasp" && idUpper.startsWith("OWASP-"))
+            return p;
+        if (p.id === "cis" && idUpper.startsWith("CIS-"))
+            return p;
+        if (p.id === "nist" && idUpper.startsWith("NIST-"))
+            return p;
+        if (p.id === "ai" && idUpper.startsWith("AI-"))
+            return p;
+        if (p.id === "blockchain" && idUpper.startsWith("BC-"))
+            return p;
+        if (p.id === "government" && idUpper.startsWith("GOV-"))
+            return p;
+        if (p.id === "iso27001" && idUpper.startsWith("ISO27K-"))
+            return p;
+        if (p.id === "iso27701" && idUpper.startsWith("ISO277-"))
+            return p;
+        if (p.id === "hipaa" && idUpper.startsWith("HIPAA-"))
+            return p;
+    }
+    return undefined;
+}
 function gradeColor(grade) {
     switch (grade) {
         case "A": return "#22c55e";
@@ -106,6 +132,45 @@ export function renderDashboard(data) {
         ...p,
         _controls: undefined,
     })));
+    const complianceIssues = controls
+        .filter(c => c.status !== "pass" && c.status !== "not-applicable")
+        .map(c => {
+        const pack = matchPackForControl(c.id, packs);
+        const auditFindings = findings.filter(f => f.controlIds.includes(c.id));
+        return {
+            controlId: c.id,
+            controlName: c.name,
+            severity: c.severity,
+            status: c.status,
+            category: c.category,
+            framework: c.framework,
+            article: c.article,
+            description: c.description,
+            implementation_guidance: c.implementation_guidance,
+            packId: pack?.id || "",
+            packName: pack?.name || "Direct",
+            passedChecks: c.checks.filter(ch => ch.status === "pass").length,
+            totalChecks: c.checks.length,
+            auditFindings,
+        };
+    })
+        .sort((a, b) => {
+        const sevOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+        return (sevOrder[a.severity] ?? 4) - (sevOrder[b.severity] ?? 4);
+    });
+    const issuesBySeverity = {
+        critical: complianceIssues.filter(i => i.severity === "critical").length,
+        high: complianceIssues.filter(i => i.severity === "high").length,
+        medium: complianceIssues.filter(i => i.severity === "medium").length,
+        low: complianceIssues.filter(i => i.severity === "low").length,
+    };
+    const issuesByPackId = {};
+    for (const issue of complianceIssues) {
+        const key = issue.packId || "direct";
+        if (!issuesByPackId[key])
+            issuesByPackId[key] = [];
+        issuesByPackId[key].push(issue);
+    }
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -252,8 +317,8 @@ export function renderDashboard(data) {
 
 <div class="header">
   <div>
-    <h1>GESF Compliance Dashboard</h1>
-    <div class="subtitle">${escapeHtml(data.projectName)} | ${escapeHtml(data.projectType)} | GESF v${escapeHtml(data.gesfVersion)}</div>
+    <h1>${escapeHtml(data.projectName)}</h1>
+    <div class="subtitle">GESF v${escapeHtml(data.gesfVersion)}</div>
   </div>
   <div class="nav-tabs">
     <button class="nav-tab active" onclick="showPage('overview', this)">Overview</button>
@@ -261,6 +326,7 @@ export function renderDashboard(data) {
     <button class="nav-tab" onclick="showPage('fixes', this)">Fixes Detail</button>
     <button class="nav-tab" onclick="showPage('findings', this)">Findings</button>
     <button class="nav-tab" onclick="showPage('traceability', this)">Traceability</button>
+    <button class="nav-tab" onclick="showPage('activity', this)">Activity Log</button>
   </div>
 </div>
 
@@ -405,100 +471,97 @@ export function renderDashboard(data) {
   <div id="page-fixes" class="page">
     <div class="tab-bar" style="margin-bottom:0;">
       <button class="tab-btn active" onclick="showFixesTab('history', this)">Fix History (${data.fixHistory.length})</button>
-      <button class="tab-btn" onclick="showFixesTab('pending', this)">Pending Fixes (${findings.length})</button>
+      <button class="tab-btn" onclick="showFixesTab('pending', this)">Pending Fixes (${complianceIssues.length})</button>
     </div>
 
     <div id="fixes-tab-history" class="tab-panel active">
-      ${renderFixHistorySection(data.fixHistory)}
+      ${renderFixHistorySection(data.fixHistory, complianceIssues)}
     </div>
 
     <div id="fixes-tab-pending" class="tab-panel">
-      ${renderDetailedFixesList(findings, controls, packs)}
+      ${renderComplianceFixCards(complianceIssues, "fix")}
     </div>
   </div>
 
   <div id="page-findings" class="page">
     <div id="findings-main">
-      <h2 style="font-size:20px;font-weight:700;margin-bottom:16px;">Security Findings Report</h2>
+      <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Compliance Findings &amp; Issues</h2>
+      <p style="color:#6b7280;font-size:14px;margin-bottom:20px;">Every control that is not passing is a compliance finding. Code-level audit evidence is shown where available.</p>
+
+      <div class="grid grid-4" style="margin-bottom:20px;">
+        <div class="card stat"><div class="num" style="color:${complianceIssues.length > 0 ? '#ef4444' : '#22c55e'};">${complianceIssues.length}</div><div class="label">Total Issues</div></div>
+        <div class="card stat"><div class="num" style="color:#ef4444;">${issuesBySeverity.critical}</div><div class="label">Critical</div></div>
+        <div class="card stat"><div class="num" style="color:#f97316;">${issuesBySeverity.high}</div><div class="label">High</div></div>
+        <div class="card stat"><div class="num">${findings.length}</div><div class="label">Audit Evidence</div></div>
+      </div>
+
       <div class="tab-bar">
-        <button class="tab-btn active" onclick="showFindingsTab('all', this)">All (${findings.length})</button>
-        <button class="tab-btn" onclick="showFindingsTab('critical', this)">Critical (${findingsBySeverity.critical})</button>
-        <button class="tab-btn" onclick="showFindingsTab('high', this)">High (${findingsBySeverity.high})</button>
-        <button class="tab-btn" onclick="showFindingsTab('medium', this)">Medium (${findingsBySeverity.medium})</button>
-        <button class="tab-btn" onclick="showFindingsTab('low', this)">Low (${findingsBySeverity.low})</button>
+        <button class="tab-btn active" onclick="showFindingsTab('all', this)">All Issues (${complianceIssues.length})</button>
+        <button class="tab-btn" onclick="showFindingsTab('critical', this)">Critical (${issuesBySeverity.critical})</button>
+        <button class="tab-btn" onclick="showFindingsTab('high', this)">High (${issuesBySeverity.high})</button>
+        <button class="tab-btn" onclick="showFindingsTab('medium', this)">Medium (${issuesBySeverity.medium})</button>
+        <button class="tab-btn" onclick="showFindingsTab('low', this)">Low (${issuesBySeverity.low})</button>
         <button class="tab-btn" onclick="showFindingsTab('bypack', this)">By Pack</button>
+        ${findings.length > 0 ? `<button class="tab-btn" onclick="showFindingsTab('evidence', this)">Audit Evidence (${findings.length})</button>` : ''}
       </div>
 
       <div id="findings-tab-all" class="tab-panel active">
-        ${renderFindingsTable(findings)}
+        ${renderComplianceIssuesTable(complianceIssues)}
       </div>
-      <div id="findings-tab-critical" class="tab-panel">${renderFindingsTable(findings.filter(f => f.severity === "critical"))}</div>
-      <div id="findings-tab-high" class="tab-panel">${renderFindingsTable(findings.filter(f => f.severity === "high"))}</div>
-      <div id="findings-tab-medium" class="tab-panel">${renderFindingsTable(findings.filter(f => f.severity === "medium"))}</div>
-      <div id="findings-tab-low" class="tab-panel">${renderFindingsTable(findings.filter(f => f.severity === "low"))}</div>
+      <div id="findings-tab-critical" class="tab-panel">${renderComplianceIssuesTable(complianceIssues.filter(i => i.severity === "critical"))}</div>
+      <div id="findings-tab-high" class="tab-panel">${renderComplianceIssuesTable(complianceIssues.filter(i => i.severity === "high"))}</div>
+      <div id="findings-tab-medium" class="tab-panel">${renderComplianceIssuesTable(complianceIssues.filter(i => i.severity === "medium"))}</div>
+      <div id="findings-tab-low" class="tab-panel">${renderComplianceIssuesTable(complianceIssues.filter(i => i.severity === "low"))}</div>
       <div id="findings-tab-bypack" class="tab-panel">
-        ${packs.filter(p => (findingsByPackId[p.id] || []).length > 0).length > 0 ? packs.filter(p => (findingsByPackId[p.id] || []).length > 0).map(p => `
+        ${packs.filter(p => (issuesByPackId[p.id] || []).length > 0).length > 0 ? packs.filter(p => (issuesByPackId[p.id] || []).length > 0).map(p => `
           <div class="card" style="margin-bottom:16px;">
             <div class="card-title" style="cursor:pointer;" onclick="loadPackDetail('${p.id}')">
-              ${escapeHtml(p.name)} &mdash; ${(findingsByPackId[p.id] || []).length} findings
+              ${escapeHtml(p.name)} &mdash; ${(issuesByPackId[p.id] || []).length} issues
               <span style="float:right;color:#0f766e;font-weight:400;font-size:11px;">View pack details &rarr;</span>
             </div>
-            ${renderFindingsTable(findingsByPackId[p.id] || [])}
+            ${renderComplianceIssuesTable(issuesByPackId[p.id] || [])}
           </div>
-        `).join('') : '<div class="empty-state"><div class="msg">No findings mapped to policy packs</div></div>'}
+        `).join('') : '<div class="empty-state"><div class="msg">No compliance issues mapped to policy packs</div></div>'}
       </div>
+      ${findings.length > 0 ? `<div id="findings-tab-evidence" class="tab-panel">${renderFindingsTable(findings)}</div>` : ''}
     </div>
     <div id="finding-detail" style="display:none;"></div>
   </div>
 
   <div id="page-traceability" class="page">
-    <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Fix Traceability Matrix</h2>
-    <p style="color:#6b7280;font-size:14px;margin-bottom:20px;">Finding &rarr; Fix &rarr; Control &rarr; Policy Pack traceability for every security issue.</p>
+    <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Compliance Traceability Matrix</h2>
+    <p style="color:#6b7280;font-size:14px;margin-bottom:20px;">Full traceability: Control &rarr; Framework &rarr; Policy Pack &rarr; Severity &rarr; Fix Guidance for every compliance issue.</p>
     <div class="tab-bar">
-      <button class="tab-btn active" onclick="showTraceTab('matrix', this)">Matrix</button>
+      <button class="tab-btn active" onclick="showTraceTab('matrix', this)">Matrix (${complianceIssues.length})</button>
       <button class="tab-btn" onclick="showTraceTab('fixes', this)">Prioritized Fixes</button>
       <button class="tab-btn" onclick="showTraceTab('controls', this)">Control Coverage</button>
     </div>
 
     <div id="trace-tab-matrix" class="tab-panel active">
-      ${findings.length > 0 ? `<div class="card">
+      ${complianceIssues.length > 0 ? `<div class="card">
         <table>
-          <thead><tr><th>Finding</th><th>Severity</th><th>File</th><th>Linked Controls</th><th>Policy Pack</th><th>Fix Guidance</th></tr></thead>
+          <thead><tr><th>Control</th><th>Severity</th><th>Framework</th><th>Policy Pack</th><th>Status</th><th>Checks</th><th>Audit</th><th>Fix Guidance</th></tr></thead>
           <tbody>
-            ${findings.slice(0, 50).map(f => {
-        const linkedControls = controls.filter(c => f.controlIds.includes(c.id));
-        const linkedPackIds = new Set();
-        for (const ctrl of linkedControls) {
-            const pk = packs.find(pp => {
-                const pCtrls = getAllControlsForPack(pp.id, controls);
-                return pCtrls.some(c2 => c2.id === ctrl.id);
-            });
-            if (pk)
-                linkedPackIds.add(pk.id);
-        }
-        return `<tr>
-                <td>
-                  <div style="font-weight:600;font-size:13px;">${escapeHtml(f.title)}</div>
-                  <div style="font-size:11px;color:#6b7280;">${escapeHtml(f.ruleId)}</div>
-                </td>
-                <td><span class="badge badge-sev" style="background:${severityColor(f.severity)}">${f.severity.toUpperCase()}</span></td>
-                <td style="font-family:monospace;font-size:11px;">${escapeHtml(f.file)}${f.line ? ':' + f.line : ''}</td>
-                <td>${linkedControls.length > 0 ? linkedControls.map(c => `<div style="margin-bottom:2px;"><span class="link" onclick="showControlDetail('${escapeHtml(c.id)}')">${escapeHtml(c.id)}</span> <span style="color:#6b7280;font-size:11px;">${escapeHtml(c.name)}</span></div>`).join('') : '<span style="color:#9ca3af;">No linked controls</span>'}</td>
-                <td>${linkedPackIds.size > 0 ? [...linkedPackIds].map(pid => {
-            const pk = packs.find(pp => pp.id === pid);
-            return pk ? `<span class="tag" style="cursor:pointer;" onclick="loadPackDetail('${pk.id}')">${escapeHtml(pk.name)}</span>` : '';
-        }).join(' ') : '<span style="color:#9ca3af;">-</span>'}</td>
-                <td style="max-width:300px;font-size:12px;color:#374151;">${escapeHtml(f.fix)}</td>
-              </tr>`;
-    }).join('')}
+            ${complianceIssues.map(issue => `<tr>
+              <td>
+                <span class="link" onclick="showControlDetail('${escapeHtml(issue.controlId)}')">${escapeHtml(issue.controlId)}</span>
+                <div style="font-size:12px;color:#4b5563;">${escapeHtml(issue.controlName)}</div>
+              </td>
+              <td><span class="badge badge-sev" style="background:${severityColor(issue.severity)}">${issue.severity.toUpperCase()}</span></td>
+              <td style="font-size:12px;">${escapeHtml(issue.framework)}${issue.article ? '<br><span style="color:#6b7280;">' + escapeHtml(issue.article) + '</span>' : ''}</td>
+              <td>${issue.packId ? `<span class="tag" style="cursor:pointer;" onclick="loadPackDetail('${issue.packId}')">${escapeHtml(issue.packName)}</span>` : '<span style="color:#9ca3af;">-</span>'}</td>
+              <td><span class="badge badge-status" style="background:${statusColor(issue.status)}">${statusLabel(issue.status)}</span></td>
+              <td style="font-size:12px;">${issue.passedChecks}/${issue.totalChecks}</td>
+              <td>${issue.auditFindings.length > 0 ? `<span style="color:#ef4444;font-weight:600;">${issue.auditFindings.length}</span>` : '<span style="color:#9ca3af;">0</span>'}</td>
+              <td style="max-width:280px;font-size:12px;color:#374151;">${escapeHtml(issue.implementation_guidance.substring(0, 150))}${issue.implementation_guidance.length > 150 ? '...' : ''}</td>
+            </tr>`).join('')}
           </tbody>
         </table>
-        ${findings.length > 50 ? `<div style="text-align:center;padding:8px;color:#9ca3af;font-size:12px;">Showing 50 of ${findings.length} findings</div>` : ''}
-      </div>` : '<div class="card"><div class="empty-state"><div class="icon">&#10003;</div><div class="msg" style="color:#22c55e;">No findings to trace</div><div class="sub">All clear</div></div></div>'}
+      </div>` : '<div class="card"><div class="empty-state"><div class="icon">&#10003;</div><div class="msg" style="color:#22c55e;">No issues to trace</div><div class="sub">All controls passing</div></div></div>'}
     </div>
 
     <div id="trace-tab-fixes" class="tab-panel">
-      ${renderDetailedFixesList(findings, controls, packs)}
+      ${renderComplianceFixCards(complianceIssues, "trace")}
     </div>
 
     <div id="trace-tab-controls" class="tab-panel">
@@ -527,12 +590,16 @@ export function renderDashboard(data) {
     </div>
   </div>
 
+  <div id="page-activity" class="page">
+    ${renderActivityLogSection(data.activityLog || [])}
+  </div>
+
   <div id="control-detail-modal" style="display:none;"></div>
 
 </div>
 
 <div class="footer">
-  Generated by GESF v${escapeHtml(data.gesfVersion)} | Last audit: ${escapeHtml(new Date(data.lastAudit).toLocaleString())} | <a href="/api/data">JSON API</a> | <a href="/api/packs">Packs API</a> | <a href="/api/fix-history">Fix History API</a>
+  Generated by GESF v${escapeHtml(data.gesfVersion)} | Last audit: ${escapeHtml(new Date(data.lastAudit).toLocaleString())} | <a href="/api/data">JSON API</a> | <a href="/api/packs">Packs API</a> | <a href="/api/fix-history">Fix History API</a> | <a href="/api/activity-log">Activity Log API</a>
 </div>
 
 <script>
@@ -553,7 +620,7 @@ export function renderDashboard(data) {
     }
   };
 
-  var navTabMap = { overview: 0, packs: 1, fixes: 2, findings: 3, traceability: 4 };
+  var navTabMap = { overview: 0, packs: 1, fixes: 2, findings: 3, traceability: 4, activity: 5 };
 
   window.navigateToPage = function(page) {
     var tabs = document.querySelectorAll('.nav-tab');
@@ -597,6 +664,11 @@ export function renderDashboard(data) {
     if (btn) btn.classList.add('active');
   };
 
+  window.goToPendingFixes = function() {
+    var btns = document.querySelectorAll('#page-fixes .tab-btn');
+    showFixesTab('pending', btns.length > 1 ? btns[1] : (btns[0] || null));
+  };
+
   window.showTraceTab = function(tab, btn) {
     var panels = document.querySelectorAll('#page-traceability .tab-panel');
     for (var i = 0; i < panels.length; i++) panels[i].classList.remove('active');
@@ -1040,7 +1112,7 @@ function renderDetailedFixesList(findings, controls, packs) {
     }
     return html;
 }
-function renderFixHistorySection(entries) {
+function renderFixHistorySection(entries, complianceIssues = []) {
     if (entries.length === 0) {
         return `<div class="card">
       <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Compliance Fix History</h2>
@@ -1049,6 +1121,7 @@ function renderFixHistorySection(entries) {
         <div class="icon">&#128203;</div>
         <div class="msg">No fixes recorded yet</div>
         <div class="sub">Run <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:12px;">ges fix</code> or use the MCP <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:12px;">auto_fix</code> tool to apply fixes. Each fix will be recorded here.</div>
+        ${complianceIssues.length > 0 ? `<div style="margin-top:16px;"><span class="badge badge-status" style="background:#f97316;font-size:12px;padding:4px 12px;">${complianceIssues.length} pending fixes</span> <span class="link" style="font-size:13px;" onclick="goToPendingFixes()">View pending fixes &rarr;</span></div>` : ''}
       </div>
     </div>`;
     }
@@ -1193,6 +1266,241 @@ function renderFixHistorySection(entries) {
     html += `</div>`;
     return html;
 }
+function renderComplianceIssuesTable(issues) {
+    if (issues.length === 0) {
+        return '<div class="empty-state"><div class="icon">&#10003;</div><div class="msg" style="color:#22c55e;">No compliance issues in this category</div></div>';
+    }
+    return `<table>
+    <thead><tr><th>Severity</th><th>Control</th><th>Framework</th><th>Policy Pack</th><th>Status</th><th>Checks</th><th>Audit</th><th>Fix Guidance</th></tr></thead>
+    <tbody>
+      ${issues.map(issue => `<tr>
+        <td><span class="badge badge-sev" style="background:${severityColor(issue.severity)}">${issue.severity.toUpperCase()}</span></td>
+        <td>
+          <span class="link" onclick="showControlDetail('${escapeHtml(issue.controlId)}')">${escapeHtml(issue.controlId)}</span>
+          <div style="font-size:12px;color:#4b5563;">${escapeHtml(issue.controlName)}</div>
+        </td>
+        <td style="font-size:12px;">${escapeHtml(issue.framework)}${issue.article ? '<br><span style="color:#6b7280;">' + escapeHtml(issue.article) + '</span>' : ''}</td>
+        <td>${issue.packId ? `<span class="tag" style="cursor:pointer;" onclick="loadPackDetail('${issue.packId}')">${escapeHtml(issue.packName)}</span>` : '<span style="color:#9ca3af;">Direct</span>'}</td>
+        <td><span class="badge badge-status" style="background:${statusColor(issue.status)}">${statusLabel(issue.status)}</span></td>
+        <td style="font-size:12px;">${issue.passedChecks}/${issue.totalChecks}</td>
+        <td>${issue.auditFindings.length > 0 ? `<span style="color:#ef4444;font-weight:600;">${issue.auditFindings.length}</span>` : '<span style="color:#9ca3af;">0</span>'}</td>
+        <td style="max-width:280px;font-size:12px;color:#4b5563;">${escapeHtml(issue.implementation_guidance.substring(0, 200))}${issue.implementation_guidance.length > 200 ? '...' : ''}</td>
+      </tr>`).join('')}
+    </tbody>
+  </table>`;
+}
+function renderComplianceFixCards(issues, idPrefix) {
+    if (issues.length === 0) {
+        return '<div class="card"><div class="empty-state"><div class="icon">&#10003;</div><div class="msg" style="color:#22c55e;">All controls passing</div><div class="sub">No fixes needed</div></div></div>';
+    }
+    const totalAuditFindings = issues.reduce((sum, i) => sum + i.auditFindings.length, 0);
+    const criticalCount = issues.filter(i => i.severity === "critical").length;
+    const highCount = issues.filter(i => i.severity === "high").length;
+    let html = '';
+    html += `<div style="margin-bottom:20px;">`;
+    html += `<div class="grid grid-4" style="margin-bottom:20px;">`;
+    html += `<div class="card stat"><div class="num" style="color:#ef4444;">${issues.length}</div><div class="label">Controls to Fix</div></div>`;
+    html += `<div class="card stat"><div class="num" style="color:#ef4444;">${criticalCount}</div><div class="label">Critical</div></div>`;
+    html += `<div class="card stat"><div class="num" style="color:#f97316;">${highCount}</div><div class="label">High</div></div>`;
+    html += `<div class="card stat"><div class="num">${totalAuditFindings}</div><div class="label">Audit Findings</div></div>`;
+    html += `</div>`;
+    html += `</div>`;
+    for (let i = 0; i < issues.length; i++) {
+        const issue = issues[i];
+        const fixId = `${idPrefix}-${i}`;
+        html += `<div class="fix-detail-card">`;
+        html += `<div class="fix-detail-header ${issue.severity}" onclick="toggleFix('${fixId}')">`;
+        html += `<div class="fix-detail-num" style="color:${severityColor(issue.severity)};">${i + 1}</div>`;
+        html += `<div class="fix-detail-info">`;
+        html += `<div class="fix-detail-title">${escapeHtml(issue.controlName)}</div>`;
+        html += `<div class="fix-detail-meta">${escapeHtml(issue.controlId)} | ${escapeHtml(issue.category)} | ${escapeHtml(issue.framework)}${issue.article ? ' | ' + escapeHtml(issue.article) : ''} | Pack: ${escapeHtml(issue.packName)}</div>`;
+        html += `</div>`;
+        html += `<div class="fix-detail-badges">`;
+        html += `<span class="badge badge-sev" style="background:${severityColor(issue.severity)}">${issue.severity.toUpperCase()}</span>`;
+        html += `<span class="badge badge-status" style="background:${statusColor(issue.status)}">${statusLabel(issue.status)}</span>`;
+        html += `<span style="font-size:12px;color:#6b7280;">${issue.passedChecks}/${issue.totalChecks} checks</span>`;
+        if (issue.auditFindings.length > 0) {
+            html += `<span style="font-size:12px;color:#ef4444;font-weight:600;">${issue.auditFindings.length} evidence</span>`;
+        }
+        html += `<span class="fix-toggle" id="${fixId}-toggle">Expand</span>`;
+        html += `</div></div>`;
+        html += `<div class="fix-detail-body" id="${fixId}">`;
+        html += `<div class="fix-section"><div class="fix-section-title">Description</div>`;
+        html += `<div style="font-size:13px;color:#4b5563;line-height:1.6;">${escapeHtml(issue.description)}</div>`;
+        html += `</div>`;
+        if (issue.auditFindings.length > 0) {
+            html += `<div class="fix-section"><div class="fix-section-title">Audit Evidence (${issue.auditFindings.length})</div>`;
+            for (const f of issue.auditFindings) {
+                html += `<div class="fix-finding-item ${f.severity}">`;
+                html += `<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">`;
+                html += `<span class="badge badge-sev" style="background:${severityColor(f.severity)};font-size:10px;">${f.severity.toUpperCase()}</span>`;
+                html += `<strong style="font-size:13px;">${escapeHtml(f.title)}</strong></div>`;
+                html += `<div style="font-size:12px;color:#6b7280;"><span style="font-family:monospace;font-weight:600;">${escapeHtml(f.ruleId)}</span> &mdash; <span style="font-family:monospace;">${escapeHtml(f.file)}${f.line ? ':' + f.line : ''}</span></div>`;
+                if (f.description)
+                    html += `<div style="font-size:12px;color:#4b5563;margin-top:4px;">${escapeHtml(f.description)}</div>`;
+                if (f.evidence)
+                    html += `<div class="fix-evidence">${escapeHtml(f.evidence)}</div>`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+        }
+        html += `<div class="fix-section"><div class="fix-section-title">Fix Guidance</div>`;
+        html += `<div class="fix-guidance-box"><strong>How to fix:</strong> ${escapeHtml(issue.implementation_guidance)}</div>`;
+        for (const f of issue.auditFindings) {
+            if (f.fix) {
+                html += `<div class="fix-guidance-box" style="margin-top:8px;background:#eff6ff;border-color:#bfdbfe;"><strong>Fix for ${escapeHtml(f.ruleId)}:</strong> ${escapeHtml(f.fix)}</div>`;
+            }
+        }
+        html += `</div>`;
+        html += `<div class="fix-section"><div class="fix-section-title">Traceability</div>`;
+        html += `<table><tbody>`;
+        html += `<tr><td style="font-weight:600;width:160px;">Control</td><td><span class="link" onclick="showControlDetail('${escapeHtml(issue.controlId)}')">${escapeHtml(issue.controlId)}</span> &mdash; ${escapeHtml(issue.controlName)}</td></tr>`;
+        html += `<tr><td style="font-weight:600;">Category</td><td>${escapeHtml(issue.category)}</td></tr>`;
+        html += `<tr><td style="font-weight:600;">Framework</td><td>${escapeHtml(issue.framework)}${issue.article ? ' / ' + escapeHtml(issue.article) : ''}</td></tr>`;
+        html += `<tr><td style="font-weight:600;">Policy Pack</td><td>${issue.packId ? `<span class="tag" style="cursor:pointer;" onclick="loadPackDetail('${issue.packId}')">${escapeHtml(issue.packName)}</span>` : 'Direct'}</td></tr>`;
+        html += `<tr><td style="font-weight:600;">Severity</td><td><span class="badge badge-sev" style="background:${severityColor(issue.severity)}">${issue.severity.toUpperCase()}</span></td></tr>`;
+        html += `<tr><td style="font-weight:600;">Status</td><td><span class="badge badge-status" style="background:${statusColor(issue.status)}">${statusLabel(issue.status)}</span></td></tr>`;
+        html += `<tr><td style="font-weight:600;">Checks</td><td>${issue.passedChecks}/${issue.totalChecks} passed</td></tr>`;
+        html += `<tr><td style="font-weight:600;">Audit Evidence</td><td>${issue.auditFindings.length} finding(s)</td></tr>`;
+        html += `</tbody></table>`;
+        html += `</div>`;
+        html += `</div></div>`;
+    }
+    return html;
+}
+function renderActivityLogSection(entries) {
+    if (!entries || entries.length === 0) {
+        return `<div class="card">
+      <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Activity Log</h2>
+      <p style="color:#6b7280;font-size:14px;margin-bottom:16px;">Every GESF operation performed via CLI or MCP is recorded here &mdash; the single source of truth for what GESF did to your project.</p>
+      <div class="empty-state">
+        <div class="icon">&#128203;</div>
+        <div class="msg">No activity recorded yet</div>
+        <div class="sub">Operations will appear here as you use GESF commands (<code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:12px;">ges init</code>, <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:12px;">ges audit</code>, <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:12px;">ges fix</code>, MCP tools, etc.)</div>
+      </div>
+    </div>`;
+    }
+    const sorted = [...entries].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+    const bySource = { cli: entries.filter(e => e.source === "cli").length, mcp: entries.filter(e => e.source === "mcp").length };
+    const byStatus = {
+        success: entries.filter(e => e.status === "success").length,
+        partial: entries.filter(e => e.status === "partial").length,
+        failed: entries.filter(e => e.status === "failed").length,
+        info: entries.filter(e => e.status === "info").length,
+    };
+    const byAction = {};
+    for (const e of entries) {
+        byAction[e.action] = (byAction[e.action] || 0) + 1;
+    }
+    const actionLabels = {
+        init: "Project Init",
+        audit: "Audit Run",
+        fix: "Auto-Fix",
+        policy_install: "Pack Installed",
+        policy_remove: "Pack Removed",
+        control_override: "Control Override",
+        implement_control: "Control Implemented",
+        score: "Score Generated",
+        scan: "Scanners Run",
+        validate: "Validation",
+        generate: "Docs Generated",
+        hooks_install: "Hooks Installed",
+        hooks_uninstall: "Hooks Removed",
+        dashboard_start: "Dashboard Started",
+        badge_generate: "Badge Generated",
+    };
+    const actionColors = {
+        init: "#0f766e",
+        audit: "#3b82f6",
+        fix: "#22c55e",
+        policy_install: "#8b5cf6",
+        policy_remove: "#ef4444",
+        control_override: "#eab308",
+        implement_control: "#22c55e",
+        score: "#3b82f6",
+        scan: "#f97316",
+        validate: "#6b7280",
+        generate: "#0f766e",
+        hooks_install: "#6b7280",
+        hooks_uninstall: "#6b7280",
+        dashboard_start: "#8b5cf6",
+        badge_generate: "#0f766e",
+    };
+    const statusColors = {
+        success: "#22c55e",
+        partial: "#eab308",
+        failed: "#ef4444",
+        info: "#3b82f6",
+    };
+    let html = '';
+    html += `<h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Activity Log</h2>`;
+    html += `<p style="color:#6b7280;font-size:14px;margin-bottom:16px;">Every GESF operation performed via CLI or MCP is recorded here &mdash; the single source of truth for what GESF did to your project.</p>`;
+    html += `<div class="grid grid-4" style="margin-bottom:20px;">`;
+    html += `<div class="card stat"><div class="num">${entries.length}</div><div class="label">Total Operations</div></div>`;
+    html += `<div class="card stat"><div class="num" style="color:#22c55e;">${byStatus.success}</div><div class="label">Successful</div></div>`;
+    html += `<div class="card stat"><div class="num" style="color:#ef4444;">${byStatus.failed + byStatus.partial}</div><div class="label">Failed/Partial</div></div>`;
+    html += `<div class="card stat"><div class="num" style="color:#0f766e;">${bySource.cli}</div><div class="label">CLI Source</div></div>`;
+    html += `</div>`;
+    html += `<div class="grid grid-2" style="margin-bottom:20px;">`;
+    html += `<div class="card"><div class="card-title">Operations by Type</div>`;
+    for (const [action, count] of Object.entries(byAction).sort((a, b) => b[1] - a[1])) {
+        const label = actionLabels[action] || action;
+        const color = actionColors[action] || "#6b7280";
+        html += `<div class="framework-row"><div class="framework-name" style="min-width:160px;font-size:13px;"><span class="badge" style="background:${color};font-size:10px;margin-right:6px;">${label}</span></div><div style="flex:1;"></div><div class="pct-text">${count}</div></div>`;
+    }
+    html += `</div>`;
+    html += `<div class="card"><div class="card-title">Sources & Status</div>`;
+    html += `<div style="display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;">`;
+    html += `<div class="stat"><div class="num" style="font-size:20px;">${bySource.cli}</div><div class="label">CLI</div></div>`;
+    html += `<div class="stat"><div class="num" style="font-size:20px;">${bySource.mcp}</div><div class="label">MCP</div></div>`;
+    html += `<div class="stat"><div class="num" style="font-size:20px;color:#22c55e;">${byStatus.success}</div><div class="label">Success</div></div>`;
+    html += `<div class="stat"><div class="num" style="font-size:20px;color:#ef4444;">${byStatus.failed}</div><div class="label">Failed</div></div>`;
+    html += `</div></div>`;
+    html += `</div>`;
+    html += `<div class="card"><div class="card-title">Timeline (newest first)</div>`;
+    html += `<table><thead><tr><th>Time</th><th>Source</th><th>Action</th><th>Status</th><th>Description</th><th>Impact</th></tr></thead><tbody>`;
+    for (const entry of sorted) {
+        const time = new Date(entry.timestamp).toLocaleString();
+        const sourceBadge = entry.source === "mcp"
+            ? '<span class="badge" style="background:#7c3aed;font-size:10px;">MCP</span>'
+            : '<span class="badge" style="background:#0f766e;font-size:10px;">CLI</span>';
+        const actionLabel = actionLabels[entry.action] || entry.action;
+        const actionColor = actionColors[entry.action] || "#6b7280";
+        const actionBadge = `<span class="badge" style="background:${actionColor};font-size:10px;">${escapeHtml(actionLabel)}</span>`;
+        const statusBadge = `<span class="badge badge-status" style="background:${statusColors[entry.status] || '#6b7280'};font-size:10px;">${entry.status.toUpperCase()}</span>`;
+        const impactParts = [];
+        if (entry.details.findings_count !== undefined)
+            impactParts.push(`${entry.details.findings_count} findings`);
+        if (entry.details.fixes_applied !== undefined)
+            impactParts.push(`${entry.details.fixes_applied} fixes`);
+        if (entry.details.packs_affected && entry.details.packs_affected.length > 0)
+            impactParts.push(`Packs: ${entry.details.packs_affected.join(", ")}`);
+        if (entry.details.controls_affected && entry.details.controls_affected.length > 0)
+            impactParts.push(`Controls: ${entry.details.controls_affected.length}`);
+        if (entry.details.files_created && entry.details.files_created.length > 0)
+            impactParts.push(`${entry.details.files_created.length} files created`);
+        if (entry.details.frameworks_added && entry.details.frameworks_added.length > 0)
+            impactParts.push(`Added: ${entry.details.frameworks_added.join(", ")}`);
+        if (entry.details.score !== undefined)
+            impactParts.push(`Score: ${entry.details.score}%`);
+        const impactHtml = impactParts.length > 0
+            ? impactParts.map(p => `<div style="font-size:11px;color:#6b7280;margin-bottom:2px;">${escapeHtml(p)}</div>`).join('')
+            : '<span style="color:#9ca3af;">-</span>';
+        html += `<tr>
+      <td style="font-size:11px;white-space:nowrap;">${time}</td>
+      <td>${sourceBadge}</td>
+      <td>${actionBadge}</td>
+      <td>${statusBadge}</td>
+      <td>
+        <div style="font-weight:600;font-size:13px;">${escapeHtml(entry.title)}</div>
+        <div style="font-size:12px;color:#6b7280;">${escapeHtml(entry.description)}</div>
+      </td>
+      <td style="max-width:200px;">${impactHtml}</td>
+    </tr>`;
+    }
+    html += `</tbody></table></div>`;
+    return html;
+}
 function escapeHtml(str) {
     return str
         .replace(/&/g, "&amp;")

package/package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@greenarmor/ges-audit-engine": "1.2.3",
-    "@greenarmor/ges-core": "1.2.3",
-    "@greenarmor/ges-policy-engine": "1.2.3",
-    "@greenarmor/ges-scoring-engine": "1.2.3"
+    "@greenarmor/ges-audit-engine": "1.2.5",
+    "@greenarmor/ges-core": "1.2.5",
+    "@greenarmor/ges-policy-engine": "1.2.5",
+    "@greenarmor/ges-scoring-engine": "1.2.5"
   },
   "description": "GESF Web Dashboard - Visual compliance dashboard for teams",
   "devDependencies": {
@@ -40,7 +40,7 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",