icdev 1.0.0__py3-none-any.whl

icdev/tools/dashboard/templates/govcon/pipeline.html

@@ -0,0 +1,214 @@
+{% extends "base.html" %}
+{% block title %}GovCon Intelligence - ICDEV Dashboard{% endblock %}
+{% block content %}
+<div class="container">
+  <h1>GovCon Intelligence Pipeline</h1>
+  <p style="color:var(--text-secondary);">Phase 59 &mdash; SAM.gov scanning, requirement mining, capability mapping, proposal automation</p>
+
+  <!-- Controls -->
+  <div style="margin:1rem 0;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
+    <button onclick="runPipeline()" class="btn btn-primary" style="padding:0.4rem 1rem;">Run Full Pipeline</button>
+    <button onclick="runStage('discover')" class="btn btn-secondary" style="padding:0.4rem 0.8rem;">Discover</button>
+    <button onclick="runStage('extract')" class="btn btn-secondary" style="padding:0.4rem 0.8rem;">Extract</button>
+    <button onclick="runStage('map')" class="btn btn-secondary" style="padding:0.4rem 0.8rem;">Map</button>
+    <button onclick="runStage('draft')" class="btn btn-secondary" style="padding:0.4rem 0.8rem;">Draft</button>
+    <span id="gc-status-msg" style="margin-left:8px;color:var(--text-secondary);font-size:0.85rem;"></span>
+  </div>
+
+  <!-- Stat Grid -->
+  <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1rem 0;">
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_opportunities }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Opportunities</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_requirements }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Requirements</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_patterns }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Patterns</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_capability_maps }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Mapped</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_drafts }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Drafts</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.total_awards }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Awards Tracked</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.knowledge_blocks }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">KB Blocks</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ stats.linked_proposals }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Linked Proposals</div>
+    </div>
+  </div>
+
+  <!-- Pipeline Flow -->
+  <h2 style="margin-top:1.5rem;">Pipeline Flow</h2>
+  <div style="display:flex;align-items:center;gap:8px;margin:1rem 0;flex-wrap:wrap;">
+    <div style="padding:8px 16px;border-radius:6px;background:var(--accent-blue-light,#e3f2fd);border:1px solid var(--accent-color,#4a90d9);text-align:center;">
+      <div style="font-weight:600;">DISCOVER</div>
+      <div style="font-size:0.8rem;color:var(--text-secondary);">SAM.gov scan</div>
+    </div>
+    <span style="font-size:1.2rem;color:var(--text-secondary);">&#8594;</span>
+    <div style="padding:8px 16px;border-radius:6px;background:var(--accent-blue-light,#e3f2fd);border:1px solid var(--accent-color,#4a90d9);text-align:center;">
+      <div style="font-weight:600;">EXTRACT</div>
+      <div style="font-size:0.8rem;color:var(--text-secondary);">Shall/must/will</div>
+    </div>
+    <span style="font-size:1.2rem;color:var(--text-secondary);">&#8594;</span>
+    <div style="padding:8px 16px;border-radius:6px;background:var(--accent-blue-light,#e3f2fd);border:1px solid var(--accent-color,#4a90d9);text-align:center;">
+      <div style="font-weight:600;">MAP</div>
+      <div style="font-size:0.8rem;color:var(--text-secondary);">Capability match</div>
+    </div>
+    <span style="font-size:1.2rem;color:var(--text-secondary);">&#8594;</span>
+    <div style="padding:8px 16px;border-radius:6px;background:var(--accent-blue-light,#e3f2fd);border:1px solid var(--accent-color,#4a90d9);text-align:center;">
+      <div style="font-weight:600;">DRAFT</div>
+      <div style="font-size:0.8rem;color:var(--text-secondary);">Two-tier LLM</div>
+    </div>
+  </div>
+
+  <!-- Domain Distribution -->
+  <h2 style="margin-top:1.5rem;">Requirement Domain Distribution</h2>
+  <div class="table-container">
+    <table style="width:100%;border-collapse:collapse;">
+      <thead>
+        <tr style="border-bottom:2px solid var(--border-color);">
+          <th style="text-align:left;padding:0.5rem;">Domain</th>
+          <th style="text-align:right;padding:0.5rem;">Count</th>
+          <th style="text-align:left;padding:0.5rem;">Bar</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% set max_count = stats.domain_distribution.values()|max if stats.domain_distribution else 1 %}
+        {% for domain, count in stats.domain_distribution.items() %}
+        <tr style="border-bottom:1px solid var(--border-color);">
+          <td style="padding:0.5rem;font-weight:600;">{{ domain }}</td>
+          <td style="padding:0.5rem;text-align:right;">{{ count }}</td>
+          <td style="padding:0.5rem;">
+            <div style="background:var(--accent-color,#4a90d9);height:16px;border-radius:3px;width:{{ (count / max_count * 100)|round|int }}%;min-width:4px;"></div>
+          </td>
+        </tr>
+        {% endfor %}
+        {% if not stats.domain_distribution %}
+        <tr><td colspan="3" style="padding:0.5rem;color:var(--text-secondary);text-align:center;">No requirements extracted yet. Run the pipeline to begin.</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Recent Opportunities -->
+  <h2 style="margin-top:1.5rem;">Recent SAM.gov Opportunities</h2>
+  <div class="table-container">
+    <table style="width:100%;border-collapse:collapse;">
+      <thead>
+        <tr style="border-bottom:2px solid var(--border-color);">
+          <th style="text-align:left;padding:0.5rem;">Title</th>
+          <th style="text-align:left;padding:0.5rem;">Agency</th>
+          <th style="text-align:left;padding:0.5rem;">NAICS</th>
+          <th style="text-align:left;padding:0.5rem;">Type</th>
+          <th style="text-align:left;padding:0.5rem;">Deadline</th>
+          <th style="text-align:center;padding:0.5rem;">Linked</th>
+          <th style="text-align:center;padding:0.5rem;">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for opp in opportunities %}
+        <tr style="border-bottom:1px solid var(--border-color);">
+          <td style="padding:0.5rem;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ opp.title }}">{{ opp.title[:60] }}{% if opp.title|length > 60 %}...{% endif %}</td>
+          <td style="padding:0.5rem;">{{ opp.agency or '' }}</td>
+          <td style="padding:0.5rem;">{{ opp.naics_code or '' }}</td>
+          <td style="padding:0.5rem;">{{ opp.notice_type or '' }}</td>
+          <td style="padding:0.5rem;">{{ opp.response_deadline or '' }}</td>
+          <td style="padding:0.5rem;text-align:center;">
+            {% if opp.id in linked_opp_ids %}
+              <span style="color:#388e3c;">&#10003;</span>
+            {% else %}
+              <button onclick="importOpp('{{ opp.id }}')" class="btn btn-secondary btn-sm" style="font-size:0.75rem;padding:2px 8px;">Import</button>
+            {% endif %}
+          </td>
+          <td style="padding:0.5rem;text-align:center;">
+            <button onclick="extractReqs('{{ opp.id }}')" class="btn btn-secondary btn-sm" style="font-size:0.75rem;padding:2px 8px;">Extract</button>
+          </td>
+        </tr>
+        {% endfor %}
+        {% if not opportunities %}
+        <tr><td colspan="7" style="padding:0.5rem;color:var(--text-secondary);text-align:center;">No opportunities cached. Click "Discover" to scan SAM.gov.</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Last Run -->
+  {% if stats.last_pipeline_run %}
+  <p style="margin-top:1rem;color:var(--text-secondary);font-size:0.85rem;">Last pipeline run: {{ stats.last_pipeline_run }}</p>
+  {% endif %}
+</div>
+
+<script>
+function setMsg(txt, color) {
+  var el = document.getElementById('gc-status-msg');
+  el.textContent = txt;
+  el.style.color = color || 'var(--text-secondary)';
+}
+
+function runPipeline() {
+  setMsg('Running full pipeline...', '#1976d2');
+  fetch('/api/govcon/pipeline/run', {method:'POST'})
+    .then(r => r.json())
+    .then(d => {
+      if (d.status === 'ok' || d.status === 'partial') {
+        var s = d.summary || {};
+        setMsg('Pipeline complete: ' + (s.new_opportunities||0) + ' opps, ' +
+               (s.requirements_extracted||0) + ' reqs, ' + (s.drafts_created||0) + ' drafts', '#388e3c');
+        setTimeout(function(){ location.reload(); }, 2000);
+      } else {
+        setMsg('Pipeline error: ' + (d.error||'unknown'), '#d32f2f');
+      }
+    })
+    .catch(function(e) { setMsg('Error: ' + e, '#d32f2f'); });
+}
+
+function runStage(stage) {
+  setMsg('Running ' + stage + '...', '#1976d2');
+  fetch('/api/govcon/pipeline/run', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({stage: stage})})
+    .then(r => r.json())
+    .then(d => {
+      setMsg(stage + ' complete', '#388e3c');
+      setTimeout(function(){ location.reload(); }, 2000);
+    })
+    .catch(function(e) { setMsg('Error: ' + e, '#d32f2f'); });
+}
+
+function importOpp(samId) {
+  fetch('/api/govcon/sam/import/' + samId, {method:'POST'})
+    .then(r => r.json())
+    .then(d => {
+      if (d.status === 'ok') {
+        setMsg('Imported as proposal opportunity', '#388e3c');
+        setTimeout(function(){ location.reload(); }, 1500);
+      } else {
+        setMsg('Import error: ' + (d.error || d.message || 'unknown'), '#d32f2f');
+      }
+    })
+    .catch(function(e) { setMsg('Error: ' + e, '#d32f2f'); });
+}
+
+function extractReqs(oppId) {
+  setMsg('Extracting requirements...', '#1976d2');
+  fetch('/api/govcon/opportunities/' + oppId + '/extract-requirements', {method:'POST'})
+    .then(r => r.json())
+    .then(d => {
+      setMsg('Extracted ' + (d.total_extracted || 0) + ' requirements', '#388e3c');
+    })
+    .catch(function(e) { setMsg('Error: ' + e, '#d32f2f'); });
+}
+</script>
+{% endblock %}

icdev/tools/dashboard/templates/govcon/requirements.html

@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+{% block title %}GovCon Requirements - ICDEV Dashboard{% endblock %}
+{% block content %}
+<div class="container">
+  <h1>Requirement Pattern Analysis</h1>
+  <p style="color:var(--text-secondary);">Phase 59 &mdash; Frequency analysis, domain heatmap, trend detection across SAM.gov RFPs</p>
+
+  <!-- Stat Grid -->
+  <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0;">
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ total_requirements }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Total Requirements</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ total_patterns }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Clustered Patterns</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ domain_count }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Domains</div>
+    </div>
+    <div class="stat-card" style="padding:1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;">
+      <div class="stat-value" style="font-size:2rem;font-weight:bold;">{{ top_frequency }}</div>
+      <div class="stat-label" style="color:var(--text-secondary);">Top Frequency</div>
+    </div>
+  </div>
+
+  <!-- Domain Heatmap -->
+  <h2 style="margin-top:1.5rem;">Domain Heatmap</h2>
+  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:1rem 0;">
+    {% for domain, info in domain_stats.items() %}
+    {% set pct = (info.count / total_requirements * 100) if total_requirements > 0 else 0 %}
+    {% set heat = '#d32f2f' if pct > 25 else '#f57c00' if pct > 15 else '#fbc02d' if pct > 8 else '#388e3c' if pct > 3 else '#90caf9' %}
+    <div style="padding:12px;border-radius:6px;background:{{ heat }};color:#fff;text-align:center;">
+      <div style="font-weight:600;font-size:0.85rem;">{{ domain }}</div>
+      <div style="font-size:1.3rem;font-weight:bold;">{{ info.count }}</div>
+      <div style="font-size:0.75rem;">{{ pct|round(1) }}%</div>
+    </div>
+    {% endfor %}
+    {% if not domain_stats %}
+    <div style="padding:12px;color:var(--text-secondary);">No requirements extracted yet.</div>
+    {% endif %}
+  </div>
+
+  <!-- Top Patterns -->
+  <h2 style="margin-top:1.5rem;">Top Requirement Patterns <span style="font-weight:normal;font-size:0.85rem;color:var(--text-secondary);">(frequency &ge; {{ min_frequency }})</span></h2>
+  <div class="table-container">
+    <table style="width:100%;border-collapse:collapse;">
+      <thead>
+        <tr style="border-bottom:2px solid var(--border-color);">
+          <th style="text-align:left;padding:0.5rem;">Pattern</th>
+          <th style="text-align:left;padding:0.5rem;">Domain</th>
+          <th style="text-align:right;padding:0.5rem;">Frequency</th>
+          <th style="text-align:center;padding:0.5rem;">Coverage</th>
+          <th style="text-align:center;padding:0.5rem;">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for p in patterns %}
+        <tr style="border-bottom:1px solid var(--border-color);">
+          <td style="padding:0.5rem;">
+            <div style="font-weight:600;">{{ p.pattern_name }}</div>
+            <div style="font-size:0.8rem;color:var(--text-secondary);max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ p.representative_text or '' }}</div>
+          </td>
+          <td style="padding:0.5rem;">
+            <span style="padding:2px 8px;border-radius:10px;font-size:0.8rem;background:var(--bg-secondary);border:1px solid var(--border-color);">{{ p.domain_category }}</span>
+          </td>
+          <td style="padding:0.5rem;text-align:right;font-weight:600;">{{ p.frequency }}</td>
+          <td style="padding:0.5rem;text-align:center;">
+            {% if p.capability_coverage is not none and p.capability_coverage != '' %}
+              {% set cov = p.capability_coverage|float %}
+              {% set cov_color = '#388e3c' if cov >= 0.80 else '#f57c00' if cov >= 0.40 else '#d32f2f' %}
+              <span style="color:{{ cov_color }};font-weight:600;">{{ (cov * 100)|round|int }}%</span>
+            {% else %}
+              <span style="color:var(--text-secondary);">--</span>
+            {% endif %}
+          </td>
+          <td style="padding:0.5rem;text-align:center;">
+            {% set status_colors = {'new':'#1976d2', 'mapped':'#388e3c', 'gap_identified':'#f57c00', 'addressed':'#388e3c'} %}
+            <span style="color:{{ status_colors.get(p.status, '#999') }};">{{ p.status or 'new' }}</span>
+          </td>
+        </tr>
+        {% endfor %}
+        {% if not patterns %}
+        <tr><td colspan="5" style="padding:0.5rem;color:var(--text-secondary);text-align:center;">No patterns found. Run Extract + Map to cluster requirements.</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Statement Types -->
+  <h2 style="margin-top:1.5rem;">Statement Types</h2>
+  <div class="table-container">
+    <table style="width:100%;border-collapse:collapse;">
+      <thead>
+        <tr style="border-bottom:2px solid var(--border-color);">
+          <th style="text-align:left;padding:0.5rem;">Type</th>
+          <th style="text-align:right;padding:0.5rem;">Count</th>
+          <th style="text-align:left;padding:0.5rem;">Bar</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% set max_type = type_stats.values()|max if type_stats else 1 %}
+        {% for stype, count in type_stats.items() %}
+        <tr style="border-bottom:1px solid var(--border-color);">
+          <td style="padding:0.5rem;font-weight:600;">{{ stype }}</td>
+          <td style="padding:0.5rem;text-align:right;">{{ count }}</td>
+          <td style="padding:0.5rem;">
+            <div style="background:var(--accent-color,#4a90d9);height:14px;border-radius:3px;width:{{ (count / max_type * 100)|round|int }}%;min-width:4px;"></div>
+          </td>
+        </tr>
+        {% endfor %}
+        {% if not type_stats %}
+        <tr><td colspan="3" style="padding:0.5rem;color:var(--text-secondary);text-align:center;">No data yet.</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endblock %}

icdev/tools/dashboard/templates/index.html

@@ -0,0 +1,254 @@
+{% extends "base.html" %}
+{% block title %}Dashboard Home - ICDEV{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>ICDEV Dashboard</h1>
+    <p class="subtitle">Integrated Continuous Development Environment &mdash; Operations Overview
+        <span class="help-icon" data-glossary="ICDEV" title="Intelligent Certified Development Environment — AI-powered platform for building secure government applications">?</span>
+    </p>
+</div>
+
+<!-- Quick Start Banner -->
+<div style="background: rgba(74, 144, 217, 0.08); border: 1px solid rgba(74, 144, 217, 0.25); border-radius: 10px; padding: 16px 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
+    <div>
+        <strong style="color: var(--accent-blue-light);">New here?</strong>
+        <span class="text-secondary"> Answer 3 questions and get a personalized workflow recommendation.</span>
+    </div>
+    <a href="/wizard" class="btn btn-primary" style="background: var(--accent-blue); border-color: var(--accent-blue);">Get Started &rarr;</a>
+</div>
+
+<!-- Stat Bar (compact inline stats) -->
+<div class="stat-bar">
+    <div class="stat-bar-item">
+        <div class="stat-bar-value blue">{{ total_projects }}</div>
+        <div class="stat-bar-label">Total Projects</div>
+    </div>
+    <div class="stat-bar-item">
+        <div class="stat-bar-value green">{{ active_agents }}</div>
+        <div class="stat-bar-label">Active Agents
+            <span class="text-muted" style="text-transform:none;letter-spacing:0;">({{ inactive_agents }} idle)</span>
+        </div>
+    </div>
+    <div class="stat-bar-item">
+        <div class="stat-bar-value {% if firing_alerts > 0 %}red{% else %}green{% endif %}">{{ firing_alerts }}</div>
+        <div class="stat-bar-label">Firing Alerts</div>
+    </div>
+    <div class="stat-bar-item">
+        <div class="stat-bar-value {% if open_poam > 0 %}yellow{% else %}green{% endif %}">{{ open_poam }}</div>
+        <div class="stat-bar-label">Open <span data-glossary="POA&amp;M">POA&amp;M</span></div>
+    </div>
+</div>
+
+<!-- Project Kanban Board -->
+<div class="kanban-board" id="kanban-board">
+    {% set columns = [
+        ("planning", "Planning"),
+        ("active", "Active"),
+        ("completed", "Completed"),
+        ("inactive", "Inactive")
+    ] %}
+    {% for status_key, status_label in columns %}
+    <div class="kanban-column" data-status="{{ status_key }}">
+        <div class="kanban-column-header">
+            <h3>{{ status_label }}</h3>
+            <span class="kanban-column-count">{{ kanban_columns[status_key] | length }}</span>
+        </div>
+        <div class="kanban-column-body">
+            {% for project in kanban_columns[status_key] %}
+            <a href="/projects/{{ project.id }}" class="kanban-card" data-project-id="{{ project.id }}">
+                <div class="kanban-card-title" title="{{ project.name }}">{{ project.name }}</div>
+                <div class="kanban-card-meta">
+                    {% if project.type %}
+                    <span class="badge badge-info">{{ project.type }}</span>
+                    {% endif %}
+                    {% if project.classification %}
+                    <span class="badge badge-warning">{{ project.classification }}</span>
+                    {% endif %}
+                </div>
+            </a>
+            {% else %}
+            <div class="kanban-empty">No projects</div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+<!-- Charts Row -->
+<div class="chart-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px;">
+    <div class="card" style="padding: 20px;">
+        <div class="card-label">Compliance Posture
+            <span class="help-icon" title="Open vs closed findings across STIG and POA&M">?</span>
+        </div>
+        <div id="chart-compliance" style="min-height: 200px;"></div>
+    </div>
+    <div class="card" style="padding: 20px;">
+        <div class="card-label">Alert Trend (7 days)</div>
+        <div id="chart-alerts" style="min-height: 200px;"></div>
+    </div>
+    <div class="card" style="padding: 20px;">
+        <div class="card-label">Project Status</div>
+        <div id="chart-projects" style="min-height: 200px;"></div>
+    </div>
+    <div class="card" style="padding: 20px;">
+        <div class="card-label">Agent Health</div>
+        <div id="chart-agent-health" style="min-height: 140px;"></div>
+    </div>
+</div>
+
+<!-- Recent Alerts -->
+<div class="table-container">
+    <div class="table-header">
+        <h2>Recent Alerts</h2>
+        <a href="/monitoring">View All</a>
+    </div>
+    <table>
+        <thead>
+            <tr>
+                <th>Severity</th>
+                <th>Title</th>
+                <th>Source</th>
+                <th>Status</th>
+                <th>Created</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for alert in recent_alerts %}
+            <tr>
+                <td><span class="badge badge-{{ alert.severity }}" role="status">{{ alert.severity }}</span></td>
+                <td>{{ alert.title }}</td>
+                <td>{{ alert.source }}</td>
+                <td><span class="badge badge-{{ alert.status }}" role="status">{{ alert.status }}</span></td>
+                <td class="text-muted" data-timestamp="{{ alert.created_at }}">{{ alert.created_at | friendly_time }}</td>
+            </tr>
+            {% else %}
+            <tr class="empty-row"><td colspan="5">No recent alerts &mdash; all clear</td></tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+<!-- Recent Audit Trail -->
+<div class="table-container">
+    <div class="table-header">
+        <h2>Recent Activity</h2>
+    </div>
+    <table>
+        <thead>
+            <tr>
+                <th>Event Type</th>
+                <th>Actor</th>
+                <th>Action</th>
+                <th>Project</th>
+                <th>When</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for entry in recent_audit %}
+            <tr>
+                <td><span class="badge badge-info">{{ entry.event_type }}</span></td>
+                <td>{{ entry.actor }}</td>
+                <td>{{ entry.action }}</td>
+                <td>
+                    {% if entry.project_id %}
+                    <a href="/projects/{{ entry.project_id }}">{{ entry.project_id[:12] }}</a>
+                    {% else %}
+                    <span class="text-muted">&mdash;</span>
+                    {% endif %}
+                </td>
+                <td class="text-muted" data-timestamp="{{ entry.created_at }}" data-timestamp-format="ago">{{ entry.created_at | friendly_time }}</td>
+            </tr>
+            {% else %}
+            <tr class="empty-row"><td colspan="5">No activity recorded yet</td></tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Auto-show notification toasts for critical alerts on page load
+(function() {
+    var firingCount = {{ firing_alerts }};
+    var openPoam = {{ open_poam }};
+    if (firingCount > 0) {
+        window.ICDEV && ICDEV.showNotification(
+            firingCount + ' alert' + (firingCount > 1 ? 's' : '') + ' currently firing \u2014 <a href="/monitoring" style="color:inherit;text-decoration:underline;">view monitoring</a>',
+            'error'
+        );
+    }
+    if (openPoam > 5) {
+        window.ICDEV && ICDEV.showNotification(
+            openPoam + ' open POA&M items need attention \u2014 <a href="/projects" style="color:inherit;text-decoration:underline;">review projects</a>',
+            'warning'
+        );
+    }
+})();
+
+// Load charts from API
+(function() {
+    if (!window.ICDEV || !ICDEV.barChart) return;
+    fetch('/api/charts/overview')
+        .then(function(r) { return r.json(); })
+        .then(function(d) {
+            // Compliance posture bar chart
+            if (d.compliance) {
+                ICDEV.barChart('chart-compliance', {
+                    labels: ['POA&M', 'STIG'],
+                    series: [
+                        { name: 'Open', data: [d.compliance.poam.open, d.compliance.stig.open], color: '#dc3545' },
+                        { name: 'Closed', data: [d.compliance.poam.closed, d.compliance.stig.closed], color: '#28a745' },
+                    ],
+                    height: 180, showLegend: true, showValues: true,
+                });
+            }
+            // Alert trend line chart
+            if (d.alert_trend && d.alert_trend.length > 0) {
+                ICDEV.lineChart('chart-alerts', {
+                    labels: d.alert_trend.map(function(r) { return r.day.slice(5); }),
+                    series: [{ name: 'Alerts', data: d.alert_trend.map(function(r) { return r.cnt; }), color: '#dc3545' }],
+                    height: 180, showLegend: false,
+                });
+            } else {
+                document.getElementById('chart-alerts').innerHTML = '<p class="text-muted" style="text-align:center;padding:60px 0;">No alerts in last 7 days</p>';
+            }
+            // Project status donut
+            if (d.project_statuses && d.project_statuses.length > 0) {
+                var colors = { active: '#28a745', completed: '#4a90d9', inactive: '#6c6c80', planning: '#ffc107' };
+                var total = d.project_statuses.reduce(function(s, r) { return s + r.cnt; }, 0);
+                ICDEV.donutChart('chart-projects', {
+                    segments: d.project_statuses.map(function(r) {
+                        return { label: r.status, value: r.cnt, color: colors[r.status] || '#6c6c80' };
+                    }),
+                    size: 160, thickness: 28,
+                    centerLabel: String(total),
+                    centerSubLabel: 'Projects',
+                    showLegend: true,
+                });
+            } else {
+                document.getElementById('chart-projects').innerHTML = '<p class="text-muted" style="text-align:center;padding:60px 0;">No projects yet</p>';
+            }
+            // Agent health gauge
+            if (d.agent_health) {
+                ICDEV.gaugeChart('chart-agent-health', {
+                    value: d.agent_health.ratio,
+                    thresholds: { good: 0.8, warning: 0.5 },
+                    label: d.agent_health.active + ' of ' + d.agent_health.total + ' agents active',
+                    size: 140,
+                });
+            }
+        })
+        .catch(function() {
+            // Graceful fallback if charts API fails
+            ['chart-compliance', 'chart-alerts', 'chart-projects', 'chart-agent-health'].forEach(function(id) {
+                var el = document.getElementById(id);
+                if (el && !el.innerHTML.trim()) {
+                    el.innerHTML = '<p class="text-muted" style="text-align:center;padding:40px 0;">Chart data unavailable</p>';
+                }
+            });
+        });
+})();
+</script>
+{% endblock %}