refactor(home): remove Knowledge Base panel from home page

The dedicated Knowledge Base page now provides the full library
experience. Remove the KB sidebar panel, viewer inline embed,
upload modal, and all supporting state/functions from App.js.

Home page layout adjusts from 3-column to 2-column (9+3 grid):
main CVE content expands to col-span-9, right panel unchanged.

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/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

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/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/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
             ---------------------------------------------------------------- */}