feat: time-based charts, Vulnerability Triage rename, Knowledge Base page

Merges feature/compliance-time-charts into master.

Changes included:
- Compliance page: 6 Recharts trend charts (active totals, deltas, per-team,
  MTTR, recurring items, Archer pipeline)
- Ivanti findings trend chart on Vulnerability Triage page: open/closed
  counts history stored on every sync, aggregated to end-of-day snapshots
- Rename 'Reporting' page to 'Vulnerability Triage' throughout (nav, routes,
  docs, all cross-page navigation references)
- Knowledge Base page: full article library with category filter, search,
  inline viewer, upload/delete for editor+ roles
- Remove Knowledge Base sidebar panel from home page (now lives on KB page);
  home layout adjusts to 2-column (9+3)
- Add ivanti_counts_history migration script for documentation consistency
- Update security-posture-workflow-diagrams.md and team-training-agenda.md
  to reflect Vulnerability Triage page name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/migrations/add_ivanti_counts_history_table.js

@@ -0,0 +1,41 @@
+// Migration: Add ivanti_counts_history table
+//
+// Stores a snapshot of open/closed Ivanti finding counts on every sync.
+// Unlike ivanti_counts_cache (single-row, always overwritten), this table
+// accumulates all snapshots so time-series charts can be built from it.
+//
+// The GET /api/ivanti/findings/counts/history endpoint aggregates these rows
+// to the last snapshot per calendar day using a ROW_NUMBER window function.
+//
+// NOTE: This table is also created automatically at server startup via
+// CREATE TABLE IF NOT EXISTS in initTables() (ivantiFindings.js).
+// This script is provided for manual setup on fresh installs and for
+// documentation consistency with other migration files.
+//
+// Usage: node backend/migrations/add_ivanti_counts_history_table.js
+
+const sqlite3 = require('sqlite3').verbose();
+const path    = require('path');
+
+const dbPath = path.join(__dirname, '..', 'cve_database.db');
+const db     = new sqlite3.Database(dbPath);
+
+console.log('Starting ivanti_counts_history migration...');
+
+db.serialize(() => {
+    db.run(`
+        CREATE TABLE IF NOT EXISTS ivanti_counts_history (
+            id           INTEGER PRIMARY KEY AUTOINCREMENT,
+            open_count   INTEGER NOT NULL,
+            closed_count INTEGER NOT NULL,
+            recorded_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+        )
+    `, (err) => {
+        if (err) console.error('Error creating ivanti_counts_history table:', err);
+        else console.log('✓ ivanti_counts_history table created (or already exists)');
+    });
+});
+
+db.close(() => {
+    console.log('Migration complete.');
+});

backend/routes/archerTickets.js

@@ -217,6 +217,25 @@ function createArcherTicketsRouter(db) {
     });
   });
 
+  // GET /status-trend — ticket counts grouped by creation date + status
+  // Used for time-based Archer pipeline chart on the Compliance page.
+  router.get('/status-trend', requireAuth(db), (req, res) => {
+    db.all(
+      `SELECT DATE(created_at) AS date, status, COUNT(*) AS count
+       FROM archer_tickets
+       GROUP BY DATE(created_at), status
+       ORDER BY date ASC`,
+      [],
+      (err, rows) => {
+        if (err) {
+          console.error('Error fetching Archer status trend:', err);
+          return res.status(500).json({ error: 'Internal server error.' });
+        }
+        res.json({ statusTrend: rows });
+      }
+    );
+  });
+
   return router;
 }
 

backend/routes/compliance.js

@@ -584,6 +584,128 @@ function createComplianceRouter(db, upload, requireAuth, requireRole) {
         }
     });
 
+    // -----------------------------------------------------------------------
+    // GET /trends
+    // Per-upload active totals + per-team counts for time-series charts.
+    // Returns rows ordered ascending by report_date.
+    // -----------------------------------------------------------------------
+    router.get('/trends', async (req, res) => {
+        try {
+            const uploads = await dbAll(db,
+                `SELECT id, report_date,
+                        COALESCE(new_count, 0)       AS new_count,
+                        COALESCE(recurring_count, 0) AS recurring_count,
+                        COALESCE(resolved_count, 0)  AS resolved_count,
+                        COALESCE(new_count, 0) + COALESCE(recurring_count, 0) AS total_active
+                 FROM compliance_uploads
+                 ORDER BY report_date ASC`
+            );
+
+            if (uploads.length === 0) return res.json({ trends: [] });
+
+            // Per-team active counts — items whose upload_id matches the upload
+            // (recurring items have upload_id bumped each cycle, so this is accurate)
+            const teamRows = await dbAll(db,
+                `SELECT ci.upload_id, ci.team, COUNT(ci.id) AS count
+                 FROM compliance_items ci
+                 WHERE ci.team IS NOT NULL
+                 GROUP BY ci.upload_id, ci.team`
+            );
+
+            const teamMap = {};
+            teamRows.forEach(r => {
+                if (!teamMap[r.upload_id]) teamMap[r.upload_id] = {};
+                teamMap[r.upload_id][r.team] = r.count;
+            });
+
+            const trends = uploads.map(u => ({
+                report_date:      u.report_date,
+                new_count:        u.new_count,
+                recurring_count:  u.recurring_count,
+                resolved_count:   u.resolved_count,
+                total_active:     u.total_active,
+                STEAM:            teamMap[u.id]?.STEAM            || 0,
+                'ACCESS-ENG':     teamMap[u.id]?.['ACCESS-ENG']   || 0,
+                'ACCESS-OPS':     teamMap[u.id]?.['ACCESS-OPS']   || 0,
+                INTELDEV:         teamMap[u.id]?.INTELDEV          || 0,
+            }));
+
+            res.json({ trends });
+        } catch (err) {
+            console.error('[Compliance] GET /trends error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /mttr
+    // Mean time to resolution (calendar days) per team, for resolved items.
+    // -----------------------------------------------------------------------
+    router.get('/mttr', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT
+                     ci.team,
+                     ROUND(AVG(JULIANDAY(ru.report_date) - JULIANDAY(fu.report_date)), 1) AS avg_days,
+                     COUNT(*) AS resolved_count
+                 FROM compliance_items ci
+                 JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
+                 JOIN compliance_uploads ru ON ci.resolved_upload_id    = ru.id
+                 WHERE ci.resolved_upload_id IS NOT NULL
+                   AND fu.report_date IS NOT NULL
+                   AND ru.report_date IS NOT NULL
+                 GROUP BY ci.team
+                 ORDER BY avg_days DESC`
+            );
+            res.json({ mttr: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /mttr error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /top-recurring
+    // Active findings grouped by team + metric_id, sorted by seen_count desc.
+    // Identifies chronic compliance gaps that keep reappearing.
+    // -----------------------------------------------------------------------
+    router.get('/top-recurring', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT team, metric_id, metric_desc, seen_count, COUNT(*) AS host_count
+                 FROM compliance_items
+                 WHERE status = 'active'
+                 GROUP BY team, metric_id
+                 ORDER BY seen_count DESC, host_count DESC
+                 LIMIT 20`
+            );
+            res.json({ items: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /top-recurring error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /category-trend
+    // Active item counts per category per upload, for stacked area chart.
+    // -----------------------------------------------------------------------
+    router.get('/category-trend', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT cu.report_date, COALESCE(ci.category, 'Unknown') AS category, COUNT(ci.id) AS count
+                 FROM compliance_uploads cu
+                 JOIN compliance_items ci ON ci.upload_id = cu.id
+                 GROUP BY cu.id, category
+                 ORDER BY cu.report_date ASC`
+            );
+            res.json({ categoryTrend: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /category-trend error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
     return router;
 }
 

backend/routes/ivantiFindings.js

@@ -175,6 +175,15 @@ function initTables(db) {
             db.run(`
                 CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
                 ON ivanti_finding_overrides(finding_id)
+            `, (err) => { if (err) return reject(err); });
+
+            db.run(`
+                CREATE TABLE IF NOT EXISTS ivanti_counts_history (
+                    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+                    open_count   INTEGER NOT NULL,
+                    closed_count INTEGER NOT NULL,
+                    recorded_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+                )
             `, (err) => {
                 if (err) reject(err);
                 else resolve();
@@ -271,6 +280,14 @@ async function syncClosedCount(db, openCount, apiKey, clientId, skipTls) {
             `UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
             [openCount, closedCount]
         );
+
+        // Append a snapshot to history — every sync is stored; the history
+        // endpoint aggregates to last-per-day at query time (Option B).
+        await dbRun(db,
+            `INSERT INTO ivanti_counts_history (open_count, closed_count) VALUES (?, ?)`,
+            [openCount, closedCount]
+        );
+
         console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
     } catch (err) {
         console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
@@ -576,6 +593,33 @@ function createIvantiFindingsRouter(db, requireAuth) {
         }
     });
 
+    // GET /counts/history — last snapshot per day, ascending, for the trend chart.
+    // Uses a window function (ROW_NUMBER) to pick the final sync of each calendar day.
+    router.get('/counts/history', async (req, res) => {
+        try {
+            const rows = await new Promise((resolve, reject) => {
+                db.all(
+                    `SELECT date, open_count, closed_count FROM (
+                         SELECT DATE(recorded_at) AS date,
+                                open_count, closed_count,
+                                ROW_NUMBER() OVER (
+                                    PARTITION BY DATE(recorded_at)
+                                    ORDER BY recorded_at DESC
+                                ) AS rn
+                         FROM ivanti_counts_history
+                     ) WHERE rn = 1
+                     ORDER BY date ASC`,
+                    [],
+                    (err, rows) => { if (err) reject(err); else resolve(rows || []); }
+                );
+            });
+            res.json({ history: rows });
+        } catch (err) {
+            console.error('[Ivanti Findings] GET /counts/history error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
     // GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed)
     router.get('/fp-workflow-counts', async (req, res) => {
         try {

docs/security-posture-workflow-diagrams.md

@@ -9,7 +9,7 @@ Renders natively in GitHub, GitLab, and most modern documentation tools.
 
 ```mermaid
 flowchart TD
-    START([Open Reporting Page]) --> SYNC
+    START([Open Vulnerability Triage Page]) --> SYNC
 
     SYNC["① Sync & Sort<br/>Click Sync · Sort Due Date ascending"]
     SYNC --> DUE{Overdue<br/>findings?}
@@ -94,11 +94,11 @@ flowchart TD
 
 ## Diagram 2 — FP Workflow Badge Status Decision Tree
 
-What to do when a finding already has a workflow badge in the Reporting page.
+What to do when a finding already has a workflow badge in the Vulnerability Triage page.
 
 ```mermaid
 flowchart LR
-    A([Finding in<br/>Reporting Page]) --> B{"Check<br/>Workflow column"}
+    A([Finding in<br/>Vulnerability Triage]) --> B{"Check<br/>Workflow column"}
 
     B -->|No badge| C["UNTRIAGED<br/>No action on record"]
     C --> C1(["Follow the<br/>Step 1–5 triage workflow ↑"])

docs/team-training-agenda.md

@@ -0,0 +1,158 @@
+# STEAM Security Dashboard — Team Training Agenda
+
+**Session length:** 30–40 minutes
+**Format:** Live walkthrough (share your screen on the dashboard)
+**Reference docs:** `security-posture-workflow.md` for full detail on anything covered here
+
+---
+
+## Pre-meeting prep
+
+- Have the dashboard open and logged in before the meeting starts
+- Sync Vulnerability Triage page so data is fresh when you get there
+- Print or share `security-posture-workflow.md` as a take-home reference
+
+---
+
+## Segment 1 — Why this tool exists (3 min)
+
+**Talking points:**
+- We have open Ivanti findings in the 8.5–9.9 VRR range — these are the ones we own and are accountable for
+- Every finding needs a documented action within **60 days of detection** (the SLA rule)
+- Findings that age past their Due Date make a device non-compliant in AEO posture reporting
+- This dashboard is how we track, triage, and prove we've actioned everything — replaces manual spreadsheet tracking
+
+---
+
+## Segment 2 — Dashboard orientation (4 min)
+
+**Show on screen:** Navigate through each page in the nav drawer
+
+- **Home (CVE Management)** — our CVE research library; this is where we store screenshots, advisories, and Archer EXC numbers against each CVE/vendor pair
+- **Vulnerability Triage (Host Findings)** — the daily operational page; this is where you spend most of your time
+- **Compliance** — AEO posture data uploaded from the NTS_AEO xlsx; shows metric health per team
+- **Knowledge Base** — internal docs, runbooks, advisories
+- **Exports** — bulk data extracts when needed
+
+> Tell the team: *"The Vulnerability Triage page is what we'll focus on today — that's where the workflow lives."*
+
+---
+
+## Segment 3 — The three things you can do with a finding (5 min)
+
+**Talking points — before showing the table, set context:**
+
+Every finding in our range gets one of three designations:
+
+1. **Remediation** — you fix the root cause
+   - Firmware/software upgrade → no ticket needed, finding drops off on next scan
+   - Configuration change → **Archer EXC ticket required** (if the config is ever rolled back, the vulnerability comes back — the ticket documents that we know)
+
+2. **False Positive (FP)** — the scanner flagged something that doesn't actually apply to our platform or version
+   - Requires an FP workflow opened in Ivanti
+   - Evidence requirements: (a) **screenshot from the device** showing hostname, IP, and SW version — CLI text is not accepted; (b) vendor documentation (advisory, email, support ticket) confirming it doesn't affect us
+   - Upload evidence to the CVE database on the Home page so we can reuse it when the FP expires
+
+3. **Risk Acceptance (Archer EXC)** — we can't patch, for a documented reason
+   - Vendor hasn't released a patch yet
+   - Device is EOL/EOS — needs mitigation steps + remediation plan in the ticket
+   - Business constraint — needs justification and compensating controls
+   - Format: enter `EXC-XXXXX` in the finding's Notes cell after the ticket is created
+
+> Tell the team: *"Knowing which path you're on before you touch the dashboard makes triage fast. The workflow is just deciding which of these three it is."*
+
+---
+
+## Segment 4 — The 5-step workflow on the Vulnerability Triage page (15 min)
+
+**Show on screen:** Vulnerability Triage page, live walkthrough on a real finding
+
+### Step 1 — Sync and sort (1 min)
+- Click **Sync** top-right, wait for timestamp to update
+- Click **Due Date** column to sort ascending — reds first, then ambers
+- Red = overdue, Amber = due within 30 days — work these first
+
+### Step 2 — Identify the host (3 min)
+- Use the **IP address** in the row to verify the hostname in Infoblox (preferred) or IPControl
+- If Ivanti has a stale hostname: click the **Host cell** directly in the table — it's inline editable
+- An amber dot appears on overridden cells; original value is preserved and can be restored
+- Show the revert button (↻) so they know corrections aren't permanent unless they want them to be
+
+### Step 3 — Check who owns the asset (2 min)
+- Look at the **BU column**
+- If it's `NTS-AEO-STEAM` or `NTS-AEO-ACCESS-ENG` → our team, continue
+- Anything else (or blank) → not ours → **CARD queue**
+  - Check the row checkbox, select CARD, click Add to Queue
+  - IP address is captured automatically for the CARD search
+  - Process CARD items in a separate session
+
+### Step 4 — Look up the CVEs (4 min)
+- Each row shows up to 2 CVEs; hover the **+N badge** to see more
+- Go to Home page, search for the CVE ID
+  - If it exists → review existing notes, docs, and any EXC numbers already linked
+  - If not → click **Add CVE**, enter the CVE ID, NVD auto-fill populates the rest
+- Research: vendor advisory portal (Juniper PSN, Cisco Bug Search) — determine if it's an FP, can be patched, or needs an Archer ticket
+
+### Step 5 — Take action (5 min)
+- **Patch available (firmware/SW)** — plan the upgrade, add a note to the finding row, done
+- **Config change only** — checkbox → Vendor → select **Archer** → Add to Queue → process in Ivanti later
+- **False Positive** — collect screenshot + vendor doc, upload to Home page CVE entry, then checkbox → Vendor → select **FP** → Add to Queue → submit FP in Ivanti in a separate session
+- **Can't patch (Archer)** — same as config change path; once EXC number is issued, paste it into the finding's **Notes cell** (`EXC-XXXXX` format)
+
+---
+
+## Segment 5 — The Ivanti Queue (5 min)
+
+**Show on screen:** Click the Queue button, show the panel
+
+- **Purpose:** tag findings as you triage, then batch all the Ivanti / Archer work in one focused session instead of context-switching constantly
+- Three types: **FP** (amber), **Archer** (sky blue), **CARD** (green)
+- CARD items show the IP address so you can search directly in CARD
+- Check the green checkbox on an item when the Ivanti/Archer action is done
+- Multi-select delete: check the small red boxes, click **Delete (N)** in the footer
+- Queue is **personal to your login** — each person has their own; it persists across sessions
+
+---
+
+## Segment 6 — Workflow badge colours (3 min)
+
+**Show on screen:** Workflow column on the Vulnerability Triage table
+
+Quick rule: **red = act now, amber = act soon, blue = monitor, no badge = needs triage**
+
+| Badge | What it means | What to do |
+|---|---|---|
+| Red — Expired | FP ticket lapsed, finding re-opened | Submit a new FP in Ivanti |
+| Red — Rejected | Security team denied the FP | Remediate — do not resubmit without new evidence |
+| Amber — Reworked | Reviewer returned the ticket | Open in Ivanti, update justification, resubmit |
+| Amber — Actionable | Ticket flagged for team response | Open in Ivanti and respond |
+| Blue — Requested | FP submitted, awaiting approval | Monitor; follow up if SLA is approaching |
+| No badge | Never been triaged | Run it through the 5-step workflow |
+
+---
+
+## Segment 7 — Quick tips (2 min)
+
+Quick features worth pointing out before Q&A:
+
+- **Filter to untriaged only** — click the **Pending** segment on the Action Coverage donut chart
+- **Find all findings tied to an Archer ticket** — click the EXC badge on the Home page CVE row
+- **Filter by vendor, IP, SLA status** — click the filter icon (⊙) on any column header
+- **Save evidence once, reuse it** — uploading screenshots/advisories to the CVE database means when an FP expires you already have the files
+
+---
+
+## Segment 8 — Q&A (remaining time)
+
+Suggested prompts to open discussion if no questions come up:
+- *"Walk me through what you'd do if you saw a red 'Rejected' badge on a finding."*
+- *"When would you use the Ivanti Queue versus just actioning something immediately?"*
+- *"What's the difference between Path B (config change) and Path D (risk acceptance) — when does each apply?"*
+
+---
+
+## Takeaway for the team
+
+Point them to:
+- `docs/security-posture-workflow.md` — the full process guide with all the steps, evidence requirements, and decision matrix
+- `docs/security-posture-workflow-diagrams.md` — the Mermaid flowcharts if they're visual learners

docs/time-based-reporting-recommendations.md

@@ -0,0 +1,333 @@
+# Time-Based Reporting Recommendations
+**Date:** 2026-04-02
+**Author:** Engineering (Claude Code)
+**Status:** Draft — for director review
+
+---
+
+## Executive Summary
+
+This document analyzes the current CVE Dashboard data model and recommends a set of time-based visualizations that can be added to the Reporting page. Recommendations are grouped by feasibility: **Tier 1** can be built with data already in the database, **Tier 2** requires a lightweight new tracking table, and **Tier 3** requires structural additions.
+
+---
+
+## Current Data Inventory
+
+### What Already Has Time-Series History
+
+| Source | Table | Date Fields | History? |
+|--------|-------|-------------|----------|
+| Compliance uploads | `compliance_uploads` | `report_date`, `uploaded_at` | **Yes** — one row per report cycle |
+| Compliance items | `compliance_items` | `created_at`, `first_seen_upload_id`, `resolved_upload_id` | **Yes** — tracks lifecycle |
+| Archer tickets | `archer_tickets` | `created_at`, `updated_at` | **Yes** — full history |
+| Todo queue | `ivanti_todo_queue` | `created_at`, `updated_at` | **Yes** — by action |
+| Finding notes | `ivanti_finding_notes` | `updated_at` | **Yes** — note activity |
+
+### What Is Point-in-Time Only (no history yet)
+
+| Source | Table | Problem |
+|--------|-------|---------|
+| Ivanti findings | `ivanti_findings_cache` | Single-row cache — overwritten on every sync |
+| Ivanti counts | `ivanti_counts_cache` | Single-row cache — no snapshots stored |
+| FP workflow states | Computed from `findings_json` | Ephemeral — not persisted historically |
+
+---
+
+## Tier 1 Recommendations — Build Now (No Schema Changes)
+
+All of these use data that is already in the database.
+
+---
+
+### 1.1 Compliance Trend Line — Total Active Findings Over Time
+
+**Description:** A line chart showing the total number of active (non-compliant) items per compliance upload date. This directly answers "are we improving over time?"
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  COUNT(ci.id) AS active_count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+GROUP BY cu.id
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Line chart with data points per upload
+**Axes:** X = Report Date, Y = Number of Active Findings
+**Value-add:** Overlay a trend line (linear regression) to show trajectory
+
+---
+
+### 1.2 New / Recurring / Resolved Bar Chart — Per Report Cycle
+
+**Description:** A grouped or stacked bar chart showing the delta breakdown for each compliance upload: how many findings were newly introduced, how many recurred from a prior cycle, and how many were resolved.
+
+**Data Source:** Already computed and stored in `compliance_uploads`:
+```sql
+SELECT report_date, new_count, recurring_count, resolved_count
+FROM compliance_uploads
+ORDER BY report_date ASC;
+```
+
+**Chart Type:** Stacked bar chart (one bar per upload date)
+**Legend:** New (red/amber), Recurring (yellow), Resolved (green)
+**Value-add:** Shows whether each reporting cycle is improving (more resolved than new) or degrading
+
+---
+
+### 1.3 Team Compliance Health Over Time — Multi-Line Chart
+
+**Description:** A multi-line chart showing the active finding count per team per upload date. Answers "which team is trending better or worse?"
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  ci.team,
+  COUNT(ci.id) AS active_count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+GROUP BY cu.id, ci.team
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Multi-line chart (one line per team)
+**Teams:** STEAM, ACCESS-ENG, ACCESS-OPS, INTELDEV
+**Value-add:** Immediately visible which team is outlier or improving fastest
+
+---
+
+### 1.4 Mean Time to Resolution (MTTR) — Per Team
+
+**Description:** A bar chart showing average number of upload cycles between when a finding first appeared and when it was resolved, broken out by team.
+
+**Data Source:**
+```sql
+SELECT
+  ci.team,
+  AVG(ci.resolved_upload_id - ci.first_seen_upload_id) AS avg_cycles_to_resolve,
+  COUNT(*) AS resolved_count
+FROM compliance_items ci
+WHERE ci.resolved_upload_id IS NOT NULL
+GROUP BY ci.team;
+```
+
+**Chart Type:** Horizontal bar chart
+**Axes:** Y = Team, X = Average Cycles to Resolution
+**Value-add:** Normalize to calendar days by joining with upload dates for true MTTR in days
+
+---
+
+### 1.5 Recurring Findings Heatmap — Seen Count Distribution
+
+**Description:** A heatmap or bubble chart showing findings grouped by how many times they have recurred (`seen_count`). Identifies chronic, long-standing compliance gaps.
+
+**Data Source:**
+```sql
+SELECT
+  team,
+  metric_id,
+  metric_desc,
+  seen_count,
+  COUNT(*) AS host_count
+FROM compliance_items
+WHERE status = 'active'
+GROUP BY team, metric_id
+ORDER BY seen_count DESC;
+```
+
+**Chart Type:** Horizontal bar chart sorted by `seen_count`, grouped by team
+**Value-add:** Highlights the "chronic" findings that repeatedly appear — high priority for remediation
+
+---
+
+### 1.6 Archer Exception Ticket Status Over Time
+
+**Description:** A line chart or cumulative area chart showing Archer ticket status transitions over time using `created_at` and `updated_at`.
+
+**Data Source:**
+```sql
+SELECT
+  DATE(created_at) AS date,
+  status,
+  COUNT(*) AS count
+FROM archer_tickets
+GROUP BY DATE(created_at), status
+ORDER BY date ASC;
+```
+
+**Chart Type:** Stacked area chart
+**Statuses:** Draft, Open, Under Review, Accepted
+**Value-add:** Tracks exception request pipeline velocity — are exceptions getting processed or stacking up?
+
+---
+
+### 1.7 Compliance Category Breakdown Over Time
+
+**Description:** A stacked area chart showing what categories of compliance failures are driving the total over time (if the `category` field in `compliance_items` is populated).
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  ci.category,
+  COUNT(ci.id) AS count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+WHERE ci.category IS NOT NULL
+GROUP BY cu.id, ci.category
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Stacked area chart
+**Value-add:** Shows whether one category dominates or if failures are spread across areas
+
+---
+
+## Tier 2 Recommendations — Lightweight Schema Addition Required
+
+These require adding one new table to persist snapshots of data that is currently overwritten on each sync.
+
+---
+
+### 2.1 Ivanti Findings Count Over Time — Open vs Closed Trend
+
+**Description:** The single most-requested metric: "are we making progress on vulnerabilities?" A line chart showing open and closed Ivanti finding counts over time.
+
+**Problem:** The current `ivanti_counts_cache` is a single-row table overwritten on each sync. No history is kept.
+
+**Solution:** Add a `ivanti_counts_history` table and append a row on every successful sync:
+```sql
+CREATE TABLE ivanti_counts_history (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  open_count  INTEGER NOT NULL,
+  closed_count INTEGER NOT NULL,
+  recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Backend change:** In the sync route (`POST /api/ivanti/findings/sync`), after updating the cache, also `INSERT INTO ivanti_counts_history`.
+
+**New API endpoint:** `GET /api/ivanti/findings/counts/history`
+```sql
+SELECT open_count, closed_count, recorded_at
+FROM ivanti_counts_history
+ORDER BY recorded_at ASC;
+```
+
+**Chart Type:** Dual-line chart
+**Lines:** Open findings (red), Closed findings (green)
+**Value-add:** Most direct measure of vulnerability remediation velocity
+
+---
+
+### 2.2 FP Workflow State Snapshots Over Time
+
+**Description:** A stacked area or line chart showing how FP workflow states (Actionable, Requested, Approved, Rejected, Expired) trend over sync cycles.
+
+**Solution:** Add a `ivanti_fp_workflow_history` table:
+```sql
+CREATE TABLE ivanti_fp_workflow_history (
+  id              INTEGER PRIMARY KEY AUTOINCREMENT,
+  state           TEXT NOT NULL,
+  finding_count   INTEGER NOT NULL DEFAULT 0,
+  id_count        INTEGER NOT NULL DEFAULT 0,
+  recorded_at     DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Chart Type:** Stacked area chart
+**Value-add:** Shows whether FP requests are being worked through or stacking up in "Requested" state
+
+---
+
+### 2.3 Todo Queue Velocity — Items Added vs Completed Per Week
+
+**Description:** A bar chart showing weekly queue throughput (items added vs items marked complete).
+
+**Data Source:** Already available in `ivanti_todo_queue.created_at` and `updated_at` + `status = 'complete'`:
+```sql
+SELECT
+  STRFTIME('%Y-W%W', created_at) AS week,
+  COUNT(*) AS items_added,
+  SUM(CASE WHEN status = 'complete' THEN 1 ELSE 0 END) AS items_completed
+FROM ivanti_todo_queue
+GROUP BY week
+ORDER BY week ASC;
+```
+
+**Chart Type:** Grouped bar chart (weekly)
+**Value-add:** Measures operational pace of the team's workflow action throughput
+
+---
+
+## Tier 3 Recommendations — Structural Additions (Future Consideration)
+
+These require more significant changes but would provide powerful long-term reporting.
+
+---
+
+### 3.1 Finding Age / Dwell Time Distribution
+
+**Description:** A histogram showing how long open findings have been open (age in days). The `lastFoundOn` field exists in the Ivanti findings JSON but is not persisted to a structured table.
+
+**Requirement:** Parse and store `lastFoundOn` from findings JSON into a structured column during sync.
+
+**Value-add:** Highlights findings that have been open for 90+ days — high-priority remediation targets.
+
+---
+
+### 3.2 SLA Breach Trends
+
+**Description:** Track how many findings breach SLA (Due Date exceeded) over time. Currently SLA status is computed in the frontend on-the-fly.
+
+**Requirement:** Add SLA breach tracking during sync — stamp findings that cross SLA date.
+
+**Value-add:** Compliance and audit reporting for SLA adherence metrics.
+
+---
+
+## Recommended Implementation Order
+
+| Priority | Chart | Effort | Impact |
+|----------|-------|--------|--------|
+| 1 | 1.2 — New/Recurring/Resolved bar chart | Low (data ready) | High |
+| 2 | 1.1 — Compliance trend line | Low (data ready) | High |
+| 3 | 1.3 — Team health multi-line | Low (data ready) | High |
+| 4 | 2.1 — Ivanti open/closed history | Medium (new table) | Very High |
+| 5 | 1.4 — MTTR per team | Low (data ready) | Medium |
+| 6 | 1.6 — Archer ticket pipeline | Low (data ready) | Medium |
+| 7 | 2.3 — Queue velocity | Low (data ready) | Medium |
+| 8 | 1.5 — Recurring findings heatmap | Low (data ready) | Medium |
+| 9 | 2.2 — FP workflow snapshots | Medium (new table) | Medium |
+| 10 | 1.7 — Category breakdown | Low (data ready) | Low–Medium |
+
+---
+
+## Charting Library Consideration
+
+The current implementation uses **hand-rolled SVG donut charts** (no external library). For time-series line/bar/area charts, the team should decide:
+
+| Option | Pros | Cons |
+|--------|------|------|
+| **Continue hand-rolled SVG** | Zero dependencies, full style control | Significant effort for axes, labels, tooltips |
+| **Recharts** (React-native) | Well-matched to React 19, composable, responsive | ~500KB dependency |
+| **Chart.js via react-chartjs-2** | Mature, widely documented | Less React-idiomatic |
+| **Lightweight: uPlot or Chart.xkcd** | Very small bundle | Less community support |
+
+**Recommendation:** Recharts aligns best with the React 19 stack and allows declaring charts as JSX components consistent with the existing code style. It supports all chart types listed above.
+
+---
+
+## Notes for Director Review
+
+- All **Tier 1** recommendations can be implemented with zero database migrations — the data is already there.
+- The **single highest-value addition** is `2.1 — Ivanti open/closed count history`, as it captures the most direct remediation progress metric. It only requires one new table and one line added to the sync handler.
+- **Compliance charts (1.1–1.5)** will only be meaningful once multiple compliance uploads have been committed. If only 1–2 uploads exist currently, the trend will not show much until more data accumulates — but building the charts now means data will automatically populate them.
+- All queries listed above have been validated against the actual database schema.
+
+---
+
+*Next step: Review with director, confirm priority order, then schedule sprint for implementation.*

frontend/package.json

@@ -12,6 +12,7 @@
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "react-scripts": "5.0.1",
+    "recharts": "^3.8.1",
     "web-vitals": "^2.1.4",
     "xlsx": "^0.18.5"
   },

frontend/src/App.js

@@ -6,11 +6,9 @@ import UserMenu from './components/UserMenu';
 import UserManagement from './components/UserManagement';
 import AuditLog from './components/AuditLog';
 import NvdSyncModal from './components/NvdSyncModal';
-import KnowledgeBaseModal from './components/KnowledgeBaseModal';
-import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
 import NavDrawer from './components/NavDrawer';
 import CalendarWidget from './components/CalendarWidget';
-import ReportingPage from './components/pages/ReportingPage';
+import VulnerabilityTriagePage from './components/pages/ReportingPage';
 import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
 import ExportsPage from './components/pages/ExportsPage';
 import CompliancePage from './components/pages/CompliancePage';
@@ -185,9 +183,6 @@ export default function App() {
   const [showUserManagement, setShowUserManagement] = useState(false);
   const [showAuditLog, setShowAuditLog] = useState(false);
   const [showNvdSync, setShowNvdSync] = useState(false);
-  const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
-  const [knowledgeBaseArticles, setKnowledgeBaseArticles] = useState([]);
-  const [selectedKBArticle, setSelectedKBArticle] = useState(null);
   const [newCVE, setNewCVE] = useState({
     cve_id: '',
     vendor: '',
@@ -311,19 +306,6 @@ export default function App() {
     }
   };
 
-  const fetchKnowledgeBaseArticles = async () => {
-    try {
-      const response = await fetch(`${API_BASE}/knowledge-base`, {
-        credentials: 'include'
-      });
-      if (!response.ok) throw new Error('Failed to fetch knowledge base articles');
-      const data = await response.json();
-      setKnowledgeBaseArticles(data);
-    } catch (err) {
-      console.error('Error fetching knowledge base articles:', err);
-    }
-  };
-
   const fetchJiraTickets = async () => {
     try {
       const response = await fetch(`${API_BASE}/jira-tickets`, {
@@ -442,45 +424,6 @@ export default function App() {
     alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
   };
 
-  const handleViewKBArticle = async (articleId) => {
-    try {
-      const response = await fetch(`${API_BASE}/knowledge-base/${articleId}`, {
-        credentials: 'include'
-      });
-
-      if (!response.ok) throw new Error('Failed to fetch article');
-
-      const article = await response.json();
-      setSelectedKBArticle(article);
-    } catch (err) {
-      console.error('Error fetching knowledge base article:', err);
-      setError('Failed to load article');
-    }
-  };
-
-  const handleDownloadKBArticle = async (id, filename) => {
-    try {
-      const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
-        credentials: 'include'
-      });
-
-      if (!response.ok) throw new Error('Download failed');
-
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-    } catch (err) {
-      console.error('Error downloading knowledge base article:', err);
-      setError('Failed to download document');
-    }
-  };
-
   const handleAddCVE = async (e) => {
     e.preventDefault();
     try {
@@ -916,7 +859,6 @@ export default function App() {
       fetchJiraTickets();
       fetchArcherTickets();
       fetchIvantiWorkflows();
-      fetchKnowledgeBaseArticles();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated]);
@@ -966,14 +908,14 @@ export default function App() {
         currentPage={currentPage}
         onNavigate={(page) => {
           // Clear contextual filters when navigating directly via the nav drawer
-          if (page === 'reporting') { setCalendarFilter(null); setReportingExcFilter(null); }
+          if (page === 'triage') { setCalendarFilter(null); setReportingExcFilter(null); }
           setCurrentPage(page);
         }}
       />
       {/* Scanning line effect */}
       <div className="scan-line"></div>
 
-      <div className={`${currentPage === 'reporting' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
+      <div className={`${currentPage === 'triage' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
         {/* Header */}
         <div className="mb-8">
           <div className="flex justify-between items-start mb-6">
@@ -1043,7 +985,7 @@ export default function App() {
         </div>
 
         {/* Page content */}
-        {currentPage === 'reporting'      && <ReportingPage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
+        {currentPage === 'triage'         && <VulnerabilityTriagePage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
         {currentPage === 'compliance'     && <CompliancePage onNavigate={setCurrentPage} />}
         {currentPage === 'knowledge-base' && <KnowledgeBasePage />}
         {currentPage === 'exports'        && <ExportsPage />}
@@ -1063,14 +1005,6 @@ export default function App() {
           <NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
         )}
 
-        {/* Knowledge Base Modal */}
-        {showKnowledgeBase && (
-          <KnowledgeBaseModal
-            onClose={() => setShowKnowledgeBase(false)}
-            onUpdate={fetchKnowledgeBaseArticles}
-          />
-        )}
-
         {/* Add CVE Modal */}
         {showAddCVE && (
           <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
@@ -1661,90 +1595,11 @@ export default function App() {
           </div>
         )}
 
-        {/* Three Column Layout - Home page only */}
+        {/* Two Column Layout - Home page only */}
         {currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
-          {/* LEFT PANEL - Wiki/Knowledge Base */}
-          <div className="col-span-12 lg:col-span-3 space-y-4">
-            <div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
-              <div className="flex items-center justify-between mb-4">
-                <h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '0', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
-                  Knowledge Base
-                </h2>
-                {(user?.role === 'admin' || user?.role === 'editor') && (
-                  <button
-                    onClick={() => setShowKnowledgeBase(true)}
-                    className="intel-button intel-button-small"
-                    style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }}
-                    title="Manage Knowledge Base"
-                  >
-                    <Plus className="w-3 h-3" />
-                  </button>
-                )}
-              </div>
-
-              {/* Knowledge Base Entries */}
-              <div className="space-y-3">
-                {knowledgeBaseArticles.length === 0 ? (
-                  <div className="text-center py-8" style={{ color: '#64748B' }}>
-                    <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                    <p className="text-sm">No documents yet</p>
-                    {(user?.role === 'admin' || user?.role === 'editor') && (
-                      <button
-                        onClick={() => setShowKnowledgeBase(true)}
-                        className="intel-button intel-button-small mt-3"
-                      >
-                        Add First Document
-                      </button>
-                    )}
-                  </div>
-                ) : (
-                  knowledgeBaseArticles.slice(0, 5).map((article) => (
-                    <div
-                      key={article.id}
-                      onClick={() => handleViewKBArticle(article.id)}
-                      style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }}
-                      className="hover:border-intel-success"
-                    >
-                      <h3 className="text-white font-semibold text-sm mb-1 font-mono">{article.title}</h3>
-                      {article.description && (
-                        <p className="text-gray-400 text-xs mb-2 line-clamp-2">{article.description}</p>
-                      )}
-                      <div className="flex items-center justify-between">
-                        <span className="text-xs text-intel-success font-mono">
-                          {new Date(article.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
-                        </span>
-                        {article.category && article.category !== 'General' && (
-                          <span className="text-xs px-2 py-0.5 rounded" style={{ background: 'rgba(16, 185, 129, 0.2)', color: '#10B981' }}>
-                            {article.category}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  ))
-                )}
-                {knowledgeBaseArticles.length > 5 && (
-                  <button
-                    onClick={() => setShowKnowledgeBase(true)}
-                    className="text-xs text-center w-full py-2"
-                    style={{ color: '#10B981' }}
-                  >
-                    View all {knowledgeBaseArticles.length} documents →
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-
           {/* CENTER PANEL - Main Content */}
-          <div className="col-span-12 lg:col-span-6 space-y-4">
-            {/* Knowledge Base Viewer */}
-            {selectedKBArticle ? (
-              <KnowledgeBaseViewer
-                article={selectedKBArticle}
-                onClose={() => setSelectedKBArticle(null)}
-              />
-            ) : (
-              <>
+          <div className="col-span-12 lg:col-span-9 space-y-4">
+            <>
             {/* Quick Check */}
             <div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
               <div className="scan-line"></div>
@@ -2216,7 +2071,6 @@ export default function App() {
               </div>
             )}
             </>
-            )}
           </div>
           {/* End Center Panel */}
 
@@ -2231,7 +2085,7 @@ export default function App() {
               <CalendarWidget
                 onDateClick={(dateStr) => {
                   setCalendarFilter(dateStr);
-                  setCurrentPage('reporting');
+                  setCurrentPage('triage');
                 }}
               />
             </div>
@@ -2337,7 +2191,7 @@ export default function App() {
                       </a>
                       <div className="flex gap-1">
                         <button
-                          onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('reporting'); }}
+                          onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('triage'); }}
                           title="View findings referencing this ticket"
                           className="text-gray-400 hover:text-sky-400 transition-colors"
                         >

frontend/src/components/NavDrawer.js

@@ -3,7 +3,7 @@ import { X, Home, BarChart2, BookOpen, Download, ShieldCheck } from 'lucide-reac
 
 const NAV_ITEMS = [
   { id: 'home',           label: 'Home',           icon: Home,        color: '#0EA5E9', description: 'Main dashboard'            },
-  { id: 'reporting',      label: 'Reporting',      icon: BarChart2,   color: '#F59E0B', description: 'Reports & analytics'       },
+  { id: 'triage',         label: 'Vuln Triage',    icon: BarChart2,   color: '#F59E0B', description: 'Active findings & CVE triage' },
   { id: 'compliance',     label: 'Compliance',     icon: ShieldCheck, color: '#14B8A6', description: 'AEO posture & metrics'     },
   { id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen,    color: '#10B981', description: 'Articles & documentation'   },
   { id: 'exports',        label: 'Exports',        icon: Download,    color: '#8B5CF6', description: 'Export data & reports'      },

frontend/src/components/pages/ComplianceChartsPanel.js

@@ -0,0 +1,424 @@
+// ComplianceChartsPanel.js
+// Tier-1 time-based compliance charts using Recharts.
+// Charts rendered: Active Findings Over Time, Change per Cycle,
+// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+    LineChart, Line,
+    BarChart, Bar,
+    XAxis, YAxis, CartesianGrid,
+    Tooltip, Legend,
+    ResponsiveContainer,
+} from 'recharts';
+import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+const TEAL = '#14B8A6';
+
+const TEAM_COLORS = {
+    'STEAM':      '#0EA5E9',
+    'ACCESS-ENG': '#F59E0B',
+    'ACCESS-OPS': '#8B5CF6',
+    'INTELDEV':   '#10B981',
+};
+
+const ARCHER_STATUS_COLORS = {
+    'Draft':        '#475569',
+    'Open':         '#0EA5E9',
+    'Under Review': '#F59E0B',
+    'Accepted':     '#10B981',
+};
+
+// ---------------------------------------------------------------------------
+// Shared style tokens
+// ---------------------------------------------------------------------------
+const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
+const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
+const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
+
+// ---------------------------------------------------------------------------
+// Custom dark tooltip
+// ---------------------------------------------------------------------------
+function DarkTooltip({ active, payload, label }) {
+    if (!active || !payload?.length) return null;
+    return (
+        <div style={{
+            background: 'rgba(10,17,32,0.97)',
+            border: '1px solid rgba(20,184,166,0.3)',
+            borderRadius: '0.375rem',
+            padding: '0.5rem 0.75rem',
+            fontFamily: 'monospace',
+            fontSize: '0.7rem',
+            minWidth: '130px',
+        }}>
+            <div style={{ color: TEAL, marginBottom: '0.3rem', fontWeight: '700', fontSize: '0.65rem' }}>
+                {label}
+            </div>
+            {payload.map(p => (
+                <div key={p.dataKey} style={{ color: p.color || '#94A3B8', marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '0.75rem' }}>
+                    <span style={{ opacity: 0.8 }}>{p.name}</span>
+                    <span style={{ fontWeight: '700' }}>
+                        {typeof p.value === 'number'
+                            ? Number.isInteger(p.value) ? p.value : p.value.toFixed(1)
+                            : p.value}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart card wrapper
+// ---------------------------------------------------------------------------
+function ChartCard({ title, subtitle, children }) {
+    return (
+        <div style={{
+            background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
+            border: '1px solid rgba(20,184,166,0.15)',
+            borderRadius: '0.5rem',
+            padding: '1rem 1.125rem 0.875rem',
+        }}>
+            <div style={{ marginBottom: '0.75rem' }}>
+                <div style={{
+                    fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '700',
+                    color: '#CBD5E1', textTransform: 'uppercase', letterSpacing: '0.08em',
+                }}>
+                    {title}
+                </div>
+                {subtitle && (
+                    <div style={{ fontSize: '0.62rem', color: '#334155', marginTop: '0.2rem', fontFamily: 'monospace' }}>
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Empty / no-data state
+// ---------------------------------------------------------------------------
+function NoData({ msg }) {
+    return (
+        <div style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            height: '160px', color: '#334155',
+            fontFamily: 'monospace', fontSize: '0.72rem',
+            border: '1px dashed rgba(20,184,166,0.1)',
+            borderRadius: '0.375rem',
+        }}>
+            {msg || 'No data yet — upload compliance reports to populate this chart'}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Shorten a YYYY-MM-DD string to MM/DD/YY
+// ---------------------------------------------------------------------------
+function fmtDate(d) {
+    if (!d) return '';
+    const p = d.split('-');
+    if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
+    return d;
+}
+
+// ---------------------------------------------------------------------------
+// Chart 1 — Active Findings Over Time (line, total + per team)
+// ---------------------------------------------------------------------------
+function ActiveTrendChart({ data }) {
+    if (data.length < 2) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                <Line
+                    type="monotone" dataKey="total_active" name="Total"
+                    stroke={TEAL} strokeWidth={2}
+                    dot={{ r: 3, fill: TEAL, strokeWidth: 0 }}
+                    activeDot={{ r: 5 }}
+                />
+                {Object.entries(TEAM_COLORS).map(([team, color]) => (
+                    <Line
+                        key={team}
+                        type="monotone" dataKey={team} name={team}
+                        stroke={color} strokeWidth={1.5}
+                        dot={false} strokeDasharray="5 3"
+                        activeDot={{ r: 4, fill: color }}
+                    />
+                ))}
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 2 — New / Recurring / Resolved per cycle (stacked + grouped bar)
+// ---------------------------------------------------------------------------
+function DeltaChart({ data }) {
+    if (data.length === 0) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                <Bar dataKey="new_count"       name="New"       stackId="in" fill="#EF4444" fillOpacity={0.85} radius={[0,0,0,0]} />
+                <Bar dataKey="recurring_count" name="Recurring" stackId="in" fill="#F59E0B" fillOpacity={0.85} radius={[2,2,0,0]} />
+                <Bar dataKey="resolved_count"  name="Resolved"  fill="#10B981"              fillOpacity={0.8}  radius={[2,2,2,2]} />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 3 — Team Health Multi-Line
+// ---------------------------------------------------------------------------
+function TeamTrendChart({ data }) {
+    if (data.length < 2) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                {Object.entries(TEAM_COLORS).map(([team, color]) => (
+                    <Line
+                        key={team}
+                        type="monotone" dataKey={team} name={team}
+                        stroke={color} strokeWidth={2}
+                        dot={{ r: 3, fill: color, strokeWidth: 0 }}
+                        activeDot={{ r: 5 }}
+                    />
+                ))}
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 4 — MTTR by Team (horizontal bar)
+// ---------------------------------------------------------------------------
+function MttrChart({ data }) {
+    if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
+    return (
+        <ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
+            <BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis type="number" tick={AXIS_STYLE} unit=" d" />
+                <YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
+                <Tooltip content={<DarkTooltip />} />
+                <Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
+                    label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
+// ---------------------------------------------------------------------------
+function RecurringChart({ data }) {
+    if (data.length === 0) return <NoData />;
+    const top10 = data.slice(0, 10).map(r => ({
+        ...r,
+        label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
+    }));
+    return (
+        <ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
+            <BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
+                <YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
+                <Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
+                    `${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
+                ]} />
+                <Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
+                    label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 6 — Archer Exception Ticket Pipeline (stacked bar by creation date)
+// ---------------------------------------------------------------------------
+function ArcherPipelineChart({ data }) {
+    if (data.length === 0) return <NoData msg="No Archer tickets recorded yet" />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                {Object.entries(ARCHER_STATUS_COLORS).map(([status, color], i, arr) => (
+                    <Bar
+                        key={status}
+                        dataKey={status} name={status} stackId="s"
+                        fill={color} fillOpacity={0.85}
+                        radius={i === arr.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+                    />
+                ))}
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Main panel
+// ---------------------------------------------------------------------------
+export default function ComplianceChartsPanel() {
+    const [collapsed,   setCollapsed]   = useState(false);
+    const [loading,     setLoading]     = useState(true);
+    const [trends,      setTrends]      = useState([]);
+    const [mttr,        setMttr]        = useState([]);
+    const [recurring,   setRecurring]   = useState([]);
+    const [archerRaw,   setArcherRaw]   = useState([]);
+
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            setLoading(true);
+            try {
+                const [tRes, mRes, rRes, aRes] = await Promise.all([
+                    fetch(`${API_BASE}/compliance/trends`,           { credentials: 'include' }),
+                    fetch(`${API_BASE}/compliance/mttr`,             { credentials: 'include' }),
+                    fetch(`${API_BASE}/compliance/top-recurring`,    { credentials: 'include' }),
+                    fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
+                ]);
+                if (cancelled) return;
+                if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends      || []); }
+                if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr          || []); }
+                if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items    || []); }
+                if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
+            } catch { /* silent — charts will show no-data state */ }
+            finally { if (!cancelled) setLoading(false); }
+        };
+        load();
+        return () => { cancelled = true; };
+    }, []);
+
+    // Format trend rows — add short date label
+    const formattedTrends = useMemo(
+        () => trends.map(t => ({ ...t, date: fmtDate(t.report_date) })),
+        [trends]
+    );
+
+    // Pivot archer raw rows → one object per date
+    const archerByDate = useMemo(() => {
+        if (!archerRaw.length) return [];
+        const map = {};
+        archerRaw.forEach(r => {
+            if (!map[r.date]) map[r.date] = { date: fmtDate(r.date) };
+            map[r.date][r.status] = r.count;
+        });
+        return Object.values(map).sort((a, b) => a.date.localeCompare(b.date));
+    }, [archerRaw]);
+
+    return (
+        <div style={{ marginBottom: '1.5rem' }}>
+
+            {/* ── Section header / collapse toggle ──────────────────────── */}
+            <button
+                onClick={() => setCollapsed(c => !c)}
+                style={{
+                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    padding: '0 0 0.625rem 0',
+                    borderBottom: collapsed ? 'none' : '1px solid rgba(20,184,166,0.1)',
+                    marginBottom: collapsed ? 0 : '0.875rem',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <TrendingUp style={{ width: '14px', height: '14px', color: TEAL }} />
+                    <span style={{
+                        fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
+                        color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
+                    }}>
+                        Historical Trends
+                    </span>
+                    {loading && (
+                        <Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
+                    )}
+                </div>
+                {collapsed
+                    ? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
+                    : <ChevronUp   style={{ width: '14px', height: '14px', color: '#334155' }} />
+                }
+            </button>
+
+            {!collapsed && (
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))',
+                    gap: '1rem',
+                }}>
+
+                    {/* 1. Active findings over time */}
+                    <ChartCard
+                        title="Active Findings Over Time"
+                        subtitle="Total non-compliant items per report cycle (solid) + per team (dashed)"
+                    >
+                        <ActiveTrendChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 2. New / Recurring / Resolved delta per cycle */}
+                    <ChartCard
+                        title="Change per Report Cycle"
+                        subtitle="New (red) and recurring (amber) stacked; resolved (green) as separate bars"
+                    >
+                        <DeltaChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 3. Team health multi-line */}
+                    <ChartCard
+                        title="Team Compliance Health"
+                        subtitle="Active findings per team per cycle — lower is better"
+                    >
+                        <TeamTrendChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 4. MTTR per team */}
+                    <ChartCard
+                        title="Mean Time to Resolution"
+                        subtitle="Average calendar days between first-seen and resolved, by team"
+                    >
+                        <MttrChart data={mttr} />
+                    </ChartCard>
+
+                    {/* 5. Most persistent / recurring findings */}
+                    <ChartCard
+                        title="Most Persistent Findings"
+                        subtitle="Active items with the highest recurrence count (top 10)"
+                    >
+                        <RecurringChart data={recurring} />
+                    </ChartCard>
+
+                    {/* 6. Archer ticket pipeline */}
+                    <ChartCard
+                        title="Archer Exception Pipeline"
+                        subtitle="Exception ticket status distribution by creation date"
+                    >
+                        <ArcherPipelineChart data={archerByDate} />
+                    </ChartCard>
+
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/pages/ComplianceDetailPanel.js

@@ -333,7 +333,7 @@ function MetricRow({ metric, resolved, onNavigate }) {
                     </div>
                     {onNavigate && (
                         <button
-                            onClick={e => { e.stopPropagation(); onNavigate('reporting'); }}
+                            onClick={e => { e.stopPropagation(); onNavigate('triage'); }}
                             style={{
                                 flexShrink: 0, marginLeft: '0.5rem',
                                 background: 'rgba(14,165,233,0.1)',
@@ -348,7 +348,7 @@ function MetricRow({ metric, resolved, onNavigate }) {
                             onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
                             onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
                         >
-                            View in Reporting →
+                            View in Triage →
                         </button>
                     )}
                 </div>

frontend/src/components/pages/CompliancePage.js

@@ -3,6 +3,7 @@ import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-re
 import { useAuth } from '../../contexts/AuthContext';
 import ComplianceUploadModal from './ComplianceUploadModal';
 import ComplianceDetailPanel from './ComplianceDetailPanel';
+import ComplianceChartsPanel from './ComplianceChartsPanel';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 const TEAL = '#14B8A6';
@@ -323,6 +324,9 @@ export default function CompliancePage({ onNavigate }) {
                 </div>
             ) : null}
 
+            {/* ── Historical trend charts ──────────────────────────────── */}
+            <ComplianceChartsPanel />
+
             {/* ── Device table ─────────────────────────────────────────── */}
             <div style={{
                 background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',

frontend/src/components/pages/IvantiCountsChart.js

@@ -0,0 +1,207 @@
+// IvantiCountsChart.js
+// Collapsible trend panel for the Vulnerability Triage page.
+// Shows open vs closed Ivanti finding counts over time (last sync per day).
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+    LineChart, Line,
+    XAxis, YAxis, CartesianGrid,
+    Tooltip, Legend, ReferenceLine,
+    ResponsiveContainer,
+} from 'recharts';
+import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+const AMBER  = '#F59E0B';
+const SKY    = '#0EA5E9';
+const GREEN  = '#10B981';
+const RED    = '#EF4444';
+
+const AXIS_STYLE   = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
+const GRID_STYLE   = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
+const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
+
+// ---------------------------------------------------------------------------
+// Custom dark tooltip
+// ---------------------------------------------------------------------------
+function DarkTooltip({ active, payload, label }) {
+    if (!active || !payload?.length) return null;
+
+    const openVal   = payload.find(p => p.dataKey === 'open_count')?.value;
+    const closedVal = payload.find(p => p.dataKey === 'closed_count')?.value;
+
+    return (
+        <div style={{
+            background: 'rgba(10,17,32,0.97)',
+            border: '1px solid rgba(245,158,11,0.3)',
+            borderRadius: '0.375rem',
+            padding: '0.5rem 0.75rem',
+            fontFamily: 'monospace',
+            fontSize: '0.7rem',
+            minWidth: '160px',
+        }}>
+            <div style={{ color: AMBER, marginBottom: '0.35rem', fontWeight: '700', fontSize: '0.65rem' }}>
+                {label}
+            </div>
+            {payload.map(p => (
+                <div key={p.dataKey} style={{ color: p.color, marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
+                    <span style={{ opacity: 0.8 }}>{p.name}</span>
+                    <span style={{ fontWeight: '700' }}>{p.value}</span>
+                </div>
+            ))}
+            {openVal != null && closedVal != null && (
+                <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', marginTop: '0.35rem', paddingTop: '0.3rem', color: '#475569', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
+                    <span>total</span>
+                    <span style={{ color: '#64748B', fontWeight: '600' }}>{openVal + closedVal}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Shorten YYYY-MM-DD to MM/DD/YY
+// ---------------------------------------------------------------------------
+function fmtDate(d) {
+    if (!d) return '';
+    const p = d.split('-');
+    if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
+    return d;
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+export default function IvantiCountsChart() {
+    const [collapsed, setCollapsed] = useState(false);
+    const [loading,   setLoading]   = useState(true);
+    const [history,   setHistory]   = useState([]);
+
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            setLoading(true);
+            try {
+                const res = await fetch(`${API_BASE}/ivanti/findings/counts/history`, { credentials: 'include' });
+                if (res.ok && !cancelled) {
+                    const d = await res.json();
+                    setHistory(d.history || []);
+                }
+            } catch { /* silent — chart shows no-data state */ }
+            finally { if (!cancelled) setLoading(false); }
+        };
+        load();
+        return () => { cancelled = true; };
+    }, []);
+
+    const chartData = useMemo(
+        () => history.map(r => ({ ...r, date: fmtDate(r.date) })),
+        [history]
+    );
+
+    // Compute a simple delta label for the latest vs previous point
+    const deltaLabel = useMemo(() => {
+        if (chartData.length < 2) return null;
+        const latest = chartData[chartData.length - 1];
+        const prev   = chartData[chartData.length - 2];
+        const delta  = latest.open_count - prev.open_count;
+        if (delta === 0) return { text: 'no change in open', color: '#475569' };
+        if (delta < 0)   return { text: `▼ ${Math.abs(delta)} open since ${prev.date}`, color: GREEN };
+        return             { text: `▲ ${delta} open since ${prev.date}`, color: RED };
+    }, [chartData]);
+
+    return (
+        <div style={{ marginBottom: '1.25rem' }}>
+
+            {/* ── Header ────────────────────────────────────────────────── */}
+            <button
+                onClick={() => setCollapsed(c => !c)}
+                style={{
+                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    padding: '0 0 0.625rem 0',
+                    borderBottom: collapsed ? 'none' : '1px solid rgba(245,158,11,0.1)',
+                    marginBottom: collapsed ? 0 : '0.875rem',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <TrendingUp style={{ width: '14px', height: '14px', color: AMBER }} />
+                    <span style={{
+                        fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
+                        color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
+                    }}>
+                        Findings Trend
+                    </span>
+                    {loading && (
+                        <Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
+                    )}
+                    {!loading && deltaLabel && (
+                        <span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: deltaLabel.color, marginLeft: '0.25rem' }}>
+                            {deltaLabel.text}
+                        </span>
+                    )}
+                </div>
+                {collapsed
+                    ? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
+                    : <ChevronUp   style={{ width: '14px', height: '14px', color: '#334155' }} />
+                }
+            </button>
+
+            {!collapsed && (
+                <div style={{
+                    background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
+                    border: '1px solid rgba(245,158,11,0.15)',
+                    borderRadius: '0.5rem',
+                    padding: '1rem 1.25rem 0.875rem',
+                }}>
+                    <div style={{ marginBottom: '0.625rem', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+                        <div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#334155', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+                            Open vs Closed — end-of-day snapshot per sync day
+                        </div>
+                        {chartData.length > 0 && (
+                            <div style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#334155' }}>
+                                {chartData.length} day{chartData.length !== 1 ? 's' : ''} of data
+                            </div>
+                        )}
+                    </div>
+
+                    {chartData.length < 2 ? (
+                        <div style={{
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            height: '160px', color: '#334155',
+                            fontFamily: 'monospace', fontSize: '0.72rem',
+                            border: '1px dashed rgba(245,158,11,0.1)', borderRadius: '0.375rem',
+                        }}>
+                            {chartData.length === 0
+                                ? 'Trend data begins accumulating after the first sync — check back tomorrow'
+                                : 'Need at least 2 days of syncs to display a trend'}
+                        </div>
+                    ) : (
+                        <ResponsiveContainer width="100%" height={220}>
+                            <LineChart data={chartData} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                                <CartesianGrid {...GRID_STYLE} />
+                                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                                <Tooltip content={<DarkTooltip />} />
+                                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                                <Line
+                                    type="monotone" dataKey="open_count" name="Open"
+                                    stroke={AMBER} strokeWidth={2}
+                                    dot={{ r: 3, fill: AMBER, strokeWidth: 0 }}
+                                    activeDot={{ r: 5 }}
+                                />
+                                <Line
+                                    type="monotone" dataKey="closed_count" name="Closed"
+                                    stroke={SKY} strokeWidth={2}
+                                    dot={{ r: 3, fill: SKY, strokeWidth: 0 }}
+                                    activeDot={{ r: 5 }}
+                                />
+                            </LineChart>
+                        </ResponsiveContainer>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/pages/KnowledgeBasePage.js

@@ -1,25 +1,484 @@
-import React from 'react';
-import { BookOpen } from 'lucide-react';
+// KnowledgeBasePage.js
+// Full-page knowledge base library — browse, search, filter, and read
+// articles inline. Upload and delete require editor/admin role.
+// Reuses existing KnowledgeBaseViewer and KnowledgeBaseModal components.
 
-export default function KnowledgeBasePage() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
-      <div style={{ textAlign: 'center' }}>
-        <div style={{
-          width: '72px', height: '72px', borderRadius: '1rem', margin: '0 auto 1.5rem',
-          background: 'rgba(16, 185, 129, 0.1)',
-          border: '1px solid rgba(16, 185, 129, 0.3)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center'
-        }}>
-          <BookOpen style={{ width: '36px', height: '36px', color: '#10B981' }} />
-        </div>
-        <h2 style={{ fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700', color: '#10B981', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.5rem' }}>
-          Knowledge Base
-        </h2>
-        <p style={{ color: '#475569', fontSize: '0.875rem', fontFamily: 'monospace' }}>
-          Under construction — coming soon
-        </p>
-      </div>
-    </div>
-  );
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+    BookOpen, Search, Upload, RefreshCw, Loader,
+    AlertCircle, FileText, File, Trash2, X,
+} from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+import KnowledgeBaseModal from '../KnowledgeBaseModal';
+import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
+
+const API_BASE  = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+const GREEN     = '#10B981';
+
+// ---------------------------------------------------------------------------
+// Static config
+// ---------------------------------------------------------------------------
+const CATEGORY_COLORS = {
+    General:   '#94A3B8',
+    Policy:    '#0EA5E9',
+    Procedure: GREEN,
+    Guide:     '#F59E0B',
+    Reference: '#8B5CF6',
+};
+
+const FILE_EXT_COLORS = {
+    pdf:  '#EF4444',
+    md:   '#10B981',
+    txt:  '#94A3B8',
+    doc:  '#0EA5E9',
+    docx: '#0EA5E9',
+    xls:  '#10B981',
+    xlsx: '#10B981',
+    ppt:  '#F97316',
+    pptx: '#F97316',
+    html: '#8B5CF6',
+};
+
+const CATEGORY_ORDER = ['Procedure', 'Guide', 'Policy', 'Reference', 'General'];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function extOf(filename) {
+    return (filename || '').split('.').pop().toLowerCase();
+}
+
+function extColor(filename) {
+    return FILE_EXT_COLORS[extOf(filename)] || '#64748B';
+}
+
+function fmtSize(bytes) {
+    if (!bytes) return '';
+    if (bytes < 1024)        return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function fmtDate(str) {
+    if (!str) return '';
+    return new Date(str).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function catColor(cat) {
+    return CATEGORY_COLORS[cat] || '#94A3B8';
+}
+
+// ---------------------------------------------------------------------------
+// ArticleCard
+// ---------------------------------------------------------------------------
+function ArticleCard({ article, selected, onSelect, onDelete, canDelete }) {
+    const color    = catColor(article.category);
+    const fileColor = extColor(article.file_name);
+    const ext      = extOf(article.file_name).toUpperCase();
+
+    return (
+        <div
+            onClick={() => onSelect(article)}
+            style={{
+                background: selected
+                    ? `linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(15,23,42,0.98) 100%)`
+                    : 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
+                border: `1.5px solid ${selected ? GREEN : 'rgba(16,185,129,0.12)'}`,
+                borderRadius: '0.5rem',
+                padding: '1rem',
+                cursor: 'pointer',
+                transition: 'all 0.15s',
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+            }}
+            onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.35)'; }}
+            onMouseLeave={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.12)'; }}
+        >
+            {/* File type badge + delete button */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{
+                    fontFamily: 'monospace', fontSize: '0.58rem', fontWeight: '700',
+                    color: fileColor, padding: '0.15rem 0.4rem',
+                    background: `${fileColor}15`, borderRadius: '0.2rem',
+                    border: `1px solid ${fileColor}30`,
+                }}>
+                    {ext}
+                </span>
+                {canDelete && (
+                    <button
+                        onClick={e => { e.stopPropagation(); onDelete(article); }}
+                        title="Delete article"
+                        style={{
+                            background: 'none', border: 'none', cursor: 'pointer',
+                            color: '#334155', padding: '0.15rem',
+                            borderRadius: '0.2rem', display: 'flex', alignItems: 'center',
+                        }}
+                        onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; }}
+                        onMouseLeave={e => { e.currentTarget.style.color = '#334155'; }}
+                    >
+                        <Trash2 style={{ width: '12px', height: '12px' }} />
+                    </button>
+                )}
+            </div>
+
+            {/* Title */}
+            <div style={{
+                fontFamily: 'monospace', fontSize: '0.82rem', fontWeight: '700',
+                color: selected ? GREEN : '#E2E8F0',
+                lineHeight: 1.3,
+            }}>
+                {article.title}
+            </div>
+
+            {/* Description */}
+            {article.description && (
+                <div style={{
+                    fontSize: '0.7rem', color: '#475569',
+                    lineHeight: 1.45, display: '-webkit-box',
+                    WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                }}>
+                    {article.description}
+                </div>
+            )}
+
+            {/* Footer — category + date */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: '0.375rem', borderTop: '1px solid rgba(255,255,255,0.04)' }}>
+                <span style={{
+                    fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
+                    color, padding: '0.15rem 0.4rem',
+                    background: `${color}12`, borderRadius: '0.2rem',
+                    border: `1px solid ${color}25`,
+                    textTransform: 'uppercase', letterSpacing: '0.04em',
+                }}>
+                    {article.category}
+                </span>
+                <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                    {article.file_size && (
+                        <span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
+                            {fmtSize(article.file_size)}
+                        </span>
+                    )}
+                    <span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
+                        {fmtDate(article.created_at)}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+function EmptyState({ hasFilter, onClear }) {
+    return (
+        <div style={{
+            gridColumn: '1 / -1',
+            display: 'flex', flexDirection: 'column', alignItems: 'center',
+            justifyContent: 'center', padding: '4rem 2rem',
+            border: '1px dashed rgba(16,185,129,0.15)', borderRadius: '0.5rem',
+            color: '#334155',
+        }}>
+            <BookOpen style={{ width: '36px', height: '36px', marginBottom: '1rem', opacity: 0.4 }} />
+            <div style={{ fontFamily: 'monospace', fontSize: '0.8rem', marginBottom: '0.375rem' }}>
+                {hasFilter ? 'No articles match your search' : 'No articles yet'}
+            </div>
+            {hasFilter ? (
+                <button onClick={onClear} style={{
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    color: GREEN, fontFamily: 'monospace', fontSize: '0.72rem',
+                    marginTop: '0.375rem',
+                }}>
+                    Clear filters
+                </button>
+            ) : (
+                <div style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#475569' }}>
+                    Upload a document to get started
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Main page
+// ---------------------------------------------------------------------------
+export default function KnowledgeBasePage() {
+    const { canWrite } = useAuth();
+
+    const [articles,     setArticles]     = useState([]);
+    const [loading,      setLoading]      = useState(true);
+    const [error,        setError]        = useState(null);
+    const [search,       setSearch]       = useState('');
+    const [activeCategory, setActiveCategory] = useState('All');
+    const [selected,     setSelected]     = useState(null);
+    const [showUpload,   setShowUpload]   = useState(false);
+
+    // -------------------------------------------------------------------------
+    // Fetch
+    // -------------------------------------------------------------------------
+    const fetchArticles = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${API_BASE}/knowledge-base`, { credentials: 'include' });
+            if (!res.ok) throw new Error('Failed to load articles');
+            const data = await res.json();
+            setArticles(data);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => { fetchArticles(); }, [fetchArticles]);
+
+    // -------------------------------------------------------------------------
+    // Delete
+    // -------------------------------------------------------------------------
+    const handleDelete = useCallback(async (article) => {
+        if (!window.confirm(`Delete "${article.title}"? This cannot be undone.`)) return;
+        try {
+            const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
+                method: 'DELETE', credentials: 'include',
+            });
+            if (!res.ok) throw new Error('Delete failed');
+            setArticles(prev => prev.filter(a => a.id !== article.id));
+            if (selected?.id === article.id) setSelected(null);
+        } catch (err) {
+            alert(`Failed to delete: ${err.message}`);
+        }
+    }, [selected]);
+
+    // -------------------------------------------------------------------------
+    // Filtering
+    // -------------------------------------------------------------------------
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return articles.filter(a => {
+            const matchesCat = activeCategory === 'All' || a.category === activeCategory;
+            const matchesSearch = !q ||
+                a.title.toLowerCase().includes(q) ||
+                (a.description || '').toLowerCase().includes(q);
+            return matchesCat && matchesSearch;
+        });
+    }, [articles, activeCategory, search]);
+
+    // Category tab counts (always from full list, not filtered by search)
+    const categoryCounts = useMemo(() => {
+        const counts = { All: articles.length };
+        CATEGORY_ORDER.forEach(cat => {
+            counts[cat] = articles.filter(a => a.category === cat).length;
+        });
+        return counts;
+    }, [articles]);
+
+    const activeTabs = ['All', ...CATEGORY_ORDER.filter(c => categoryCounts[c] > 0)];
+
+    const clearFilters = () => { setSearch(''); setActiveCategory('All'); };
+
+    const hasFilter = search.trim() !== '' || activeCategory !== 'All';
+
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', paddingBottom: '2rem' }}>
+
+            {/* ── Page header ─────────────────────────────────────────── */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                <div>
+                    <h2 style={{
+                        fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700',
+                        color: GREEN, textTransform: 'uppercase', letterSpacing: '0.1em',
+                        textShadow: `0 0 16px ${GREEN}40`, marginBottom: '0.25rem',
+                    }}>
+                        Knowledge Base
+                    </h2>
+                    <div style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
+                        {loading ? '…' : `${articles.length} article${articles.length !== 1 ? 's' : ''}`}
+                        {articles.length > 0 && activeCategory !== 'All' && (
+                            <span style={{ marginLeft: '0.5rem', color: '#334155' }}>
+                                · {categoryCounts[activeCategory] || 0} in {activeCategory}
+                            </span>
+                        )}
+                    </div>
+                </div>
+
+                <div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
+                    <button
+                        onClick={fetchArticles}
+                        title="Refresh"
+                        style={{
+                            background: 'none', border: `1px solid rgba(16,185,129,0.25)`,
+                            borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#475569',
+                        }}
+                        onMouseEnter={e => { e.currentTarget.style.color = GREEN; e.currentTarget.style.borderColor = `${GREEN}60`; }}
+                        onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(16,185,129,0.25)'; }}
+                    >
+                        <RefreshCw style={{ width: '16px', height: '16px' }} />
+                    </button>
+                    {canWrite() && (
+                        <button
+                            onClick={() => setShowUpload(true)}
+                            style={{
+                                display: 'flex', alignItems: 'center', gap: '0.4rem',
+                                background: `${GREEN}18`, border: `1px solid ${GREEN}`,
+                                color: GREEN, padding: '0.5rem 1rem',
+                                fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
+                                textTransform: 'uppercase', letterSpacing: '0.05em',
+                                cursor: 'pointer', borderRadius: '0.375rem',
+                            }}
+                        >
+                            <Upload style={{ width: '14px', height: '14px' }} />
+                            Upload Article
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* ── Search + category tabs ───────────────────────────────── */}
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+
+                {/* Search */}
+                <div style={{ position: 'relative', flexShrink: 0 }}>
+                    <Search style={{
+                        position: 'absolute', left: '0.625rem', top: '50%', transform: 'translateY(-50%)',
+                        width: '13px', height: '13px', color: '#334155', pointerEvents: 'none',
+                    }} />
+                    <input
+                        value={search}
+                        onChange={e => setSearch(e.target.value)}
+                        placeholder="Search articles…"
+                        style={{
+                            paddingLeft: '2rem', paddingRight: search ? '2rem' : '0.625rem',
+                            paddingTop: '0.4rem', paddingBottom: '0.4rem',
+                            background: 'rgba(15,23,42,0.8)',
+                            border: '1px solid rgba(16,185,129,0.2)',
+                            borderRadius: '0.375rem', color: '#E2E8F0',
+                            outline: 'none', fontFamily: 'monospace', fontSize: '0.75rem',
+                            width: '220px',
+                        }}
+                        onFocus={e => e.target.style.borderColor = `${GREEN}60`}
+                        onBlur={e => e.target.style.borderColor = 'rgba(16,185,129,0.2)'}
+                    />
+                    {search && (
+                        <button
+                            onClick={() => setSearch('')}
+                            style={{
+                                position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)',
+                                background: 'none', border: 'none', cursor: 'pointer', color: '#334155', padding: 0,
+                            }}
+                        >
+                            <X style={{ width: '12px', height: '12px' }} />
+                        </button>
+                    )}
+                </div>
+
+                {/* Category tabs */}
+                <div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
+                    {activeTabs.map(cat => {
+                        const isActive = activeCategory === cat;
+                        const color    = cat === 'All' ? GREEN : catColor(cat);
+                        return (
+                            <button
+                                key={cat}
+                                onClick={() => setActiveCategory(cat)}
+                                style={{
+                                    padding: '0.35rem 0.75rem',
+                                    fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600',
+                                    textTransform: 'uppercase', letterSpacing: '0.05em',
+                                    cursor: 'pointer', borderRadius: '0.25rem',
+                                    border: isActive ? `1px solid ${color}` : '1px solid transparent',
+                                    background: isActive ? `${color}15` : 'transparent',
+                                    color: isActive ? color : '#475569',
+                                    transition: 'all 0.12s',
+                                }}
+                                onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; }}}
+                                onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'transparent'; }}}
+                            >
+                                {cat}
+                                <span style={{ marginLeft: '0.35rem', opacity: 0.6, fontWeight: '400' }}>
+                                    {categoryCounts[cat] ?? 0}
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* ── Error state ──────────────────────────────────────────── */}
+            {error && (
+                <div style={{
+                    display: 'flex', alignItems: 'center', gap: '0.5rem',
+                    padding: '0.875rem 1rem',
+                    background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
+                    borderRadius: '0.5rem', color: '#F87171',
+                    fontFamily: 'monospace', fontSize: '0.78rem',
+                }}>
+                    <AlertCircle style={{ width: '15px', height: '15px', flexShrink: 0 }} />
+                    {error}
+                    <button
+                        onClick={fetchArticles}
+                        style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#F87171', fontFamily: 'monospace', fontSize: '0.72rem' }}
+                    >
+                        Retry
+                    </button>
+                </div>
+            )}
+
+            {/* ── Loading state ────────────────────────────────────────── */}
+            {loading && (
+                <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
+                    <Loader style={{ width: '28px', height: '28px', color: GREEN, animation: 'spin 1s linear infinite' }} />
+                </div>
+            )}
+
+            {/* ── Article grid ─────────────────────────────────────────── */}
+            {!loading && !error && (
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+                    gap: '0.875rem',
+                }}>
+                    {filtered.length === 0 ? (
+                        <EmptyState hasFilter={hasFilter} onClear={clearFilters} />
+                    ) : (
+                        filtered.map(article => (
+                            <ArticleCard
+                                key={article.id}
+                                article={article}
+                                selected={selected?.id === article.id}
+                                onSelect={a => setSelected(selected?.id === a.id ? null : a)}
+                                onDelete={handleDelete}
+                                canDelete={canWrite()}
+                            />
+                        ))
+                    )}
+                </div>
+            )}
+
+            {/* ── Inline viewer ────────────────────────────────────────── */}
+            {selected && (
+                <div style={{ marginTop: '0.25rem' }}>
+                    <KnowledgeBaseViewer
+                        article={selected}
+                        onClose={() => setSelected(null)}
+                    />
+                </div>
+            )}
+
+            {/* ── Upload modal ─────────────────────────────────────────── */}
+            {showUpload && (
+                <KnowledgeBaseModal
+                    onClose={() => setShowUpload(false)}
+                    onUpdate={() => { fetchArticles(); setShowUpload(false); }}
+                />
+            )}
+        </div>
+    );
 }

frontend/src/components/pages/ReportingPage.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo } from 'lucide-react';
 import * as XLSX from 'xlsx';
 import { useAuth } from '../../contexts/AuthContext';
+import IvantiCountsChart from './IvantiCountsChart';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 const STORAGE_KEY = 'steam_findings_columns_v2';
@@ -1536,7 +1537,7 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
 // ---------------------------------------------------------------------------
 // Main ReportingPage
 // ---------------------------------------------------------------------------
-export default function ReportingPage({ filterDate, filterEXC }) {
+export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
     const { canWrite } = useAuth();
     const [findings, setFindings]         = useState([]);
     const [total, setTotal]               = useState(null);
@@ -1965,6 +1966,11 @@ export default function ReportingPage({ filterDate, filterEXC }) {
                 </div>
             </div>
 
+            {/* ----------------------------------------------------------------
+                Panel 1.5 — Open vs Closed trend over time
+            ---------------------------------------------------------------- */}
+            <IvantiCountsChart />
+
             {/* ----------------------------------------------------------------
                 Panel 2 — Findings table
             ---------------------------------------------------------------- */}