aura-security 0.5.0 → 0.5.2

package/dist/aura/server.d.ts

@@ -38,6 +38,11 @@ export declare class AuraServer {
     private handleGetNotifications;
     private handleTestNotification;
     private handleSendNotification;
+    private handleGetScore;
+    private handleGetScoreHistory;
+    private handleGetScoreTrend;
+    private handleGetBadge;
+    private handleGetBadgeForTarget;
     private readBody;
     start(): Promise<void>;
     stop(): Promise<void>;

package/dist/aura/server.js

@@ -3,6 +3,7 @@
 import { createServer } from 'http';
 import { getDatabase } from '../database/index.js';
 import { NotificationService, createNotificationFromAudit } from '../integrations/notifications.js';
+import { generateScoreBadge } from '../scoring/index.js';
 export class AuraServer {
     server = null;
     tools = new Map();
@@ -98,6 +99,26 @@ export class AuraServer {
             else if (path === '/notifications/send' && req.method === 'POST') {
                 await this.handleSendNotification(req, res);
             }
+            // Score endpoints
+            else if (path === '/score' && req.method === 'GET') {
+                await this.handleGetScore(url, res);
+            }
+            else if (path.match(/^\/score\/(.+)\/history$/) && req.method === 'GET') {
+                const target = decodeURIComponent(path.slice(7, -8));
+                await this.handleGetScoreHistory(target, url, res);
+            }
+            else if (path.match(/^\/score\/(.+)\/trend$/) && req.method === 'GET') {
+                const target = decodeURIComponent(path.slice(7, -6));
+                await this.handleGetScoreTrend(target, url, res);
+            }
+            // Badge endpoints
+            else if (path === '/badge/score' && req.method === 'GET') {
+                await this.handleGetBadge(res);
+            }
+            else if (path.startsWith('/badge/') && req.method === 'GET') {
+                const target = decodeURIComponent(path.slice(7));
+                await this.handleGetBadgeForTarget(target, res);
+            }
             else {
                 res.statusCode = 404;
                 res.end(JSON.stringify({ error: 'Not found' }));
@@ -118,8 +139,8 @@ export class AuraServer {
         res.statusCode = 200;
         res.end(JSON.stringify({
             name: 'aura-security',
-            version: '0.2.0',
-            endpoints: ['/info', '/tools', '/memory', '/settings', '/audits', '/stats', '/notifications'],
+            version: '0.5.2',
+            endpoints: ['/info', '/tools', '/memory', '/settings', '/audits', '/stats', '/notifications', '/score', '/badge'],
             tools: Array.from(this.tools.keys()),
             database: true
         }));
@@ -305,6 +326,93 @@ export class AuraServer {
         res.statusCode = 200;
         res.end(JSON.stringify(result));
     }
+    // ============ SCORE ENDPOINTS ============
+    async handleGetScore(url, res) {
+        const target = url.searchParams.get('target') || undefined;
+        if (target) {
+            // Get score for specific target
+            const latest = this.db.getLatestScore(target);
+            const trend = this.db.getScoreTrend(target, 10);
+            if (!latest) {
+                res.statusCode = 404;
+                res.end(JSON.stringify({ error: 'No score history for target' }));
+                return;
+            }
+            res.statusCode = 200;
+            res.end(JSON.stringify({
+                score: latest.score,
+                grade: latest.grade,
+                target: latest.target,
+                breakdown: {
+                    critical: latest.critical,
+                    high: latest.high,
+                    medium: latest.medium,
+                    low: latest.low
+                },
+                trend,
+                lastUpdated: latest.timestamp
+            }));
+        }
+        else {
+            // Get aggregate score
+            const aggregate = this.db.getAggregateScore();
+            res.statusCode = 200;
+            res.end(JSON.stringify({
+                score: aggregate.score,
+                grade: aggregate.grade,
+                gradeColor: aggregate.gradeColor,
+                breakdown: aggregate.breakdown,
+                trend: aggregate.trend,
+                lastUpdated: new Date().toISOString()
+            }));
+        }
+    }
+    async handleGetScoreHistory(target, url, res) {
+        const limit = parseInt(url.searchParams.get('limit') || '50', 10);
+        const history = this.db.getScoreHistory(target, limit);
+        res.statusCode = 200;
+        res.end(JSON.stringify({ target, history }));
+    }
+    async handleGetScoreTrend(target, url, res) {
+        const limit = parseInt(url.searchParams.get('limit') || '10', 10);
+        const trend = this.db.getScoreTrend(target, limit);
+        res.statusCode = 200;
+        res.end(JSON.stringify({ target, ...trend }));
+    }
+    // ============ BADGE ENDPOINTS ============
+    async handleGetBadge(res) {
+        const aggregate = this.db.getAggregateScore();
+        const svg = generateScoreBadge(aggregate.score, aggregate.grade, aggregate.gradeColor);
+        res.setHeader('Content-Type', 'image/svg+xml');
+        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+        res.statusCode = 200;
+        res.end(svg);
+    }
+    async handleGetBadgeForTarget(target, res) {
+        const latest = this.db.getLatestScore(target);
+        if (!latest) {
+            // Return a "no data" badge
+            const svg = generateScoreBadge(0, '?', '#6e7681');
+            res.setHeader('Content-Type', 'image/svg+xml');
+            res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+            res.statusCode = 200;
+            res.end(svg);
+            return;
+        }
+        // Get grade color based on score
+        let gradeColor = '#f85149'; // F - red
+        if (latest.score >= 90)
+            gradeColor = '#3fb950'; // A - green
+        else if (latest.score >= 70)
+            gradeColor = '#58a6ff'; // B - blue
+        else if (latest.score >= 50)
+            gradeColor = '#d29922'; // C - yellow
+        const svg = generateScoreBadge(latest.score, latest.grade, gradeColor);
+        res.setHeader('Content-Type', 'image/svg+xml');
+        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+        res.statusCode = 200;
+        res.end(svg);
+    }
     readBody(req) {
         return new Promise((resolve, reject) => {
             const chunks = [];

package/dist/cli.js

@@ -24,7 +24,7 @@ import { existsSync, writeFileSync, mkdirSync } from 'fs';
 import { join, resolve, basename } from 'path';
 import { spawnSync } from 'child_process';
 const AURA_URL = process.env.AURA_URL ?? 'http://127.0.0.1:3000';
-const VERSION = '0.5.0';
+const VERSION = '0.5.1';
 // ANSI colors for terminal output
 const colors = {
     reset: '\x1b[0m',

package/dist/database/index.d.ts

@@ -10,6 +10,7 @@
 import type { AuditorOutput } from '../types/events.js';
 import type { LocalScanResult } from '../integrations/local-scanner.js';
 import type { AWSScanResult } from '../integrations/aws-scanner.js';
+import { type SecurityScore, type ScoreHistoryEntry, type ScoreTrend } from '../scoring/index.js';
 export interface AuditRecord {
     id: string;
     type: 'code' | 'aws' | 'audit';
@@ -69,6 +70,18 @@ export declare class AuditorDatabase {
             low: number;
         };
     };
+    saveScore(target: string, auditId: string, counts: {
+        critical: number;
+        high: number;
+        medium: number;
+        low: number;
+    }): SecurityScore;
+    getScoreHistory(target?: string, limit?: number): ScoreHistoryEntry[];
+    getLatestScore(target?: string): ScoreHistoryEntry | null;
+    getScoreTrend(target?: string, limit?: number): ScoreTrend;
+    getAggregateScore(): SecurityScore & {
+        trend: ScoreTrend;
+    };
     close(): void;
     vacuum(): void;
     deleteOldAudits(daysToKeep?: number): number;

package/dist/database/index.js

@@ -10,6 +10,7 @@
 import Database from 'better-sqlite3';
 import { join } from 'path';
 import { existsSync, mkdirSync } from 'fs';
+import { calculateSecurityScore } from '../scoring/index.js';
 // ============ DEFAULT SETTINGS ============
 const DEFAULT_SETTINGS = {
     // AWS Settings
@@ -105,12 +106,30 @@ export class AuditorDatabase {
         error TEXT,
         FOREIGN KEY (audit_id) REFERENCES audits(id)
       )
+    `);
+        // Score history table
+        this.db.exec(`
+      CREATE TABLE IF NOT EXISTS score_history (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        target TEXT NOT NULL,
+        audit_id TEXT NOT NULL,
+        score REAL NOT NULL,
+        grade TEXT NOT NULL,
+        critical INTEGER DEFAULT 0,
+        high INTEGER DEFAULT 0,
+        medium INTEGER DEFAULT 0,
+        low INTEGER DEFAULT 0,
+        timestamp TEXT NOT NULL,
+        FOREIGN KEY (audit_id) REFERENCES audits(id)
+      )
     `);
         // Create indexes
         this.db.exec(`
       CREATE INDEX IF NOT EXISTS idx_audits_timestamp ON audits(timestamp DESC);
       CREATE INDEX IF NOT EXISTS idx_audits_type ON audits(type);
       CREATE INDEX IF NOT EXISTS idx_notifications_audit ON notifications(audit_id);
+      CREATE INDEX IF NOT EXISTS idx_score_history_target ON score_history(target);
+      CREATE INDEX IF NOT EXISTS idx_score_history_timestamp ON score_history(timestamp DESC);
     `);
         // Initialize default settings
         const insertSetting = this.db.prepare(`
@@ -364,6 +383,121 @@ export class AuditorDatabase {
             },
         };
     }
+    // ============ SCORE METHODS ============
+    saveScore(target, auditId, counts) {
+        const score = calculateSecurityScore(counts);
+        const timestamp = new Date().toISOString();
+        const stmt = this.db.prepare(`
+      INSERT INTO score_history (target, audit_id, score, grade, critical, high, medium, low, timestamp)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `);
+        stmt.run(target, auditId, score.score, score.grade, counts.critical, counts.high, counts.medium, counts.low, timestamp);
+        console.log(`[DB] Saved score: ${score.score} (${score.grade}) for ${target}`);
+        return score;
+    }
+    getScoreHistory(target, limit = 50) {
+        let query = `
+      SELECT id, target, audit_id, score, grade, critical, high, medium, low, timestamp
+      FROM score_history
+    `;
+        const params = [];
+        if (target) {
+            query += ' WHERE target = ?';
+            params.push(target);
+        }
+        query += ' ORDER BY timestamp DESC LIMIT ?';
+        params.push(limit);
+        const stmt = this.db.prepare(query);
+        const rows = stmt.all(...params);
+        return rows.map(row => ({
+            id: row.id,
+            target: row.target,
+            auditId: row.audit_id,
+            score: row.score,
+            grade: row.grade,
+            critical: row.critical,
+            high: row.high,
+            medium: row.medium,
+            low: row.low,
+            timestamp: row.timestamp,
+        }));
+    }
+    getLatestScore(target) {
+        let query = `
+      SELECT id, target, audit_id, score, grade, critical, high, medium, low, timestamp
+      FROM score_history
+    `;
+        const params = [];
+        if (target) {
+            query += ' WHERE target = ?';
+            params.push(target);
+        }
+        query += ' ORDER BY timestamp DESC LIMIT 1';
+        const stmt = this.db.prepare(query);
+        const row = stmt.get(...params);
+        if (!row)
+            return null;
+        return {
+            id: row.id,
+            target: row.target,
+            auditId: row.audit_id,
+            score: row.score,
+            grade: row.grade,
+            critical: row.critical,
+            high: row.high,
+            medium: row.medium,
+            low: row.low,
+            timestamp: row.timestamp,
+        };
+    }
+    getScoreTrend(target, limit = 10) {
+        const history = this.getScoreHistory(target, limit);
+        if (history.length === 0) {
+            return {
+                currentScore: 100,
+                previousScore: null,
+                change: 0,
+                direction: 'same',
+                history: []
+            };
+        }
+        const current = history[0];
+        const previous = history.length > 1 ? history[1] : null;
+        const change = previous ? current.score - previous.score : 0;
+        let direction = 'same';
+        if (change > 0)
+            direction = 'up';
+        else if (change < 0)
+            direction = 'down';
+        return {
+            currentScore: current.score,
+            previousScore: previous?.score || null,
+            change: Math.abs(change),
+            direction,
+            history: history.map(h => ({ timestamp: h.timestamp, score: h.score }))
+        };
+    }
+    getAggregateScore() {
+        // Get totals from all audits
+        const stmt = this.db.prepare(`
+      SELECT
+        SUM(critical) as critical,
+        SUM(high) as high,
+        SUM(medium) as medium,
+        SUM(low) as low
+      FROM audits
+    `);
+        const row = stmt.get();
+        const counts = {
+            critical: row.critical || 0,
+            high: row.high || 0,
+            medium: row.medium || 0,
+            low: row.low || 0
+        };
+        const score = calculateSecurityScore(counts);
+        const trend = this.getScoreTrend(undefined, 10);
+        return { ...score, trend };
+    }
     // ============ CLEANUP ============
     close() {
         this.db.close();

package/dist/index.js

@@ -498,6 +498,17 @@ async function main() {
                     const db = server.getDatabase();
                     auditId = db.saveAudit('code', scanResult.path, scanResult);
                     console.log(`[AURA] Scan result saved to database: ${auditId}`);
+                    // Calculate and save security score
+                    const scoreCounts = {
+                        critical: scanResult.secrets?.filter((s) => s.severity === 'critical').length || 0,
+                        high: scanResult.secrets?.filter((s) => s.severity === 'high').length || 0,
+                        medium: (scanResult.packages?.filter((p) => p.severity === 'medium').length || 0) +
+                            (scanResult.sastFindings?.length || 0),
+                        low: (scanResult.packages?.filter((p) => p.severity === 'low').length || 0) +
+                            (scanResult.envFiles?.length || 0)
+                    };
+                    const score = db.saveScore(scanResult.path, auditId, scoreCounts);
+                    console.log(`[AURA] Security score: ${score.score} (${score.grade})`);
                 }
                 catch (dbErr) {
                     console.error('[AURA] Failed to save to database:', dbErr);
@@ -618,6 +629,15 @@ async function main() {
                         agents: result.aura.agents
                     });
                     console.log(`[AURA] Aura scan saved to database: ${auditId}`);
+                    // Save security score
+                    const scoreCounts = {
+                        critical: result.aura.summary.bySeverity['critical'] || 0,
+                        high: result.aura.summary.bySeverity['high'] || 0,
+                        medium: result.aura.summary.bySeverity['medium'] || 0,
+                        low: result.aura.summary.bySeverity['low'] || 0
+                    };
+                    const score = db.saveScore(targetPath, auditId, scoreCounts);
+                    console.log(`[AURA] Security score: ${score.score} (${score.grade})`);
                 }
                 catch (dbErr) {
                     console.error('[AURA] Database save error:', dbErr);

package/dist/scoring/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Security Score Calculator
+ *
+ * Calculates a 0-100 security score based on findings severity.
+ * Uses a penalty-based diminishing returns formula to prevent negative scores.
+ */
+export interface FindingCounts {
+    critical: number;
+    high: number;
+    medium: number;
+    low: number;
+}
+export interface SecurityScore {
+    score: number;
+    grade: string;
+    gradeColor: string;
+    breakdown: {
+        critical: {
+            count: number;
+            penalty: number;
+        };
+        high: {
+            count: number;
+            penalty: number;
+        };
+        medium: {
+            count: number;
+            penalty: number;
+        };
+        low: {
+            count: number;
+            penalty: number;
+        };
+        totalPenalty: number;
+    };
+}
+export interface ScoreHistoryEntry {
+    id: number;
+    target: string;
+    auditId: string;
+    score: number;
+    grade: string;
+    critical: number;
+    high: number;
+    medium: number;
+    low: number;
+    timestamp: string;
+}
+export interface ScoreTrend {
+    currentScore: number;
+    previousScore: number | null;
+    change: number;
+    direction: 'up' | 'down' | 'same';
+    history: Array<{
+        timestamp: string;
+        score: number;
+    }>;
+}
+/**
+ * Calculate security score from finding counts
+ */
+export declare function calculateSecurityScore(counts: FindingCounts): SecurityScore;
+/**
+ * Calculate trend from score history
+ */
+export declare function calculateTrend(history: ScoreHistoryEntry[]): ScoreTrend;
+/**
+ * Generate SVG badge for security score
+ */
+export declare function generateScoreBadge(score: number, grade: string, gradeColor: string): string;

package/dist/scoring/index.js

@@ -0,0 +1,112 @@
+/**
+ * Security Score Calculator
+ *
+ * Calculates a 0-100 security score based on findings severity.
+ * Uses a penalty-based diminishing returns formula to prevent negative scores.
+ */
+// Scoring weights
+const WEIGHTS = {
+    critical: 15,
+    high: 8,
+    medium: 3,
+    low: 1
+};
+// Grade thresholds
+const GRADES = [
+    { min: 90, grade: 'A', color: '#3fb950' },
+    { min: 70, grade: 'B', color: '#58a6ff' },
+    { min: 50, grade: 'C', color: '#d29922' },
+    { min: 0, grade: 'F', color: '#f85149' }
+];
+/**
+ * Calculate security score from finding counts
+ */
+export function calculateSecurityScore(counts) {
+    const critical = counts.critical || 0;
+    const high = counts.high || 0;
+    const medium = counts.medium || 0;
+    const low = counts.low || 0;
+    // Calculate penalties
+    const criticalPenalty = critical * WEIGHTS.critical;
+    const highPenalty = high * WEIGHTS.high;
+    const mediumPenalty = medium * WEIGHTS.medium;
+    const lowPenalty = low * WEIGHTS.low;
+    const totalPenalty = criticalPenalty + highPenalty + mediumPenalty + lowPenalty;
+    // Diminishing returns formula: score = 100 / (1 + penalty/100)
+    // This ensures score stays between 0-100 and degrades smoothly
+    const score = Math.round(100 / (1 + totalPenalty / 100));
+    // Get grade
+    const gradeInfo = GRADES.find(g => score >= g.min) || GRADES[GRADES.length - 1];
+    return {
+        score,
+        grade: gradeInfo.grade,
+        gradeColor: gradeInfo.color,
+        breakdown: {
+            critical: { count: critical, penalty: criticalPenalty },
+            high: { count: high, penalty: highPenalty },
+            medium: { count: medium, penalty: mediumPenalty },
+            low: { count: low, penalty: lowPenalty },
+            totalPenalty
+        }
+    };
+}
+/**
+ * Calculate trend from score history
+ */
+export function calculateTrend(history) {
+    if (history.length === 0) {
+        return {
+            currentScore: 100,
+            previousScore: null,
+            change: 0,
+            direction: 'same',
+            history: []
+        };
+    }
+    const current = history[0];
+    const previous = history.length > 1 ? history[1] : null;
+    const change = previous ? current.score - previous.score : 0;
+    let direction = 'same';
+    if (change > 0)
+        direction = 'up';
+    else if (change < 0)
+        direction = 'down';
+    return {
+        currentScore: current.score,
+        previousScore: previous?.score || null,
+        change: Math.abs(change),
+        direction,
+        history: history.map(h => ({ timestamp: h.timestamp, score: h.score }))
+    };
+}
+/**
+ * Generate SVG badge for security score
+ */
+export function generateScoreBadge(score, grade, gradeColor) {
+    const labelText = 'security';
+    const valueText = `${score} ${grade}`;
+    // Calculate widths (approximate character width)
+    const labelWidth = labelText.length * 7 + 10;
+    const valueWidth = valueText.length * 7 + 10;
+    const totalWidth = labelWidth + valueWidth;
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="20" viewBox="0 0 ${totalWidth} 20">
+  <linearGradient id="smooth" x2="0" y2="100%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <clipPath id="round">
+    <rect width="${totalWidth}" height="20" rx="3" fill="#fff"/>
+  </clipPath>
+  <g clip-path="url(#round)">
+    <rect width="${labelWidth}" height="20" fill="#555"/>
+    <rect x="${labelWidth}" width="${valueWidth}" height="20" fill="${gradeColor}"/>
+    <rect width="${totalWidth}" height="20" fill="url(#smooth)"/>
+  </g>
+  <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+    <text x="${labelWidth / 2}" y="15" fill="#010101" fill-opacity=".3">${labelText}</text>
+    <text x="${labelWidth / 2}" y="14" fill="#fff">${labelText}</text>
+    <text x="${labelWidth + valueWidth / 2}" y="15" fill="#010101" fill-opacity=".3">${valueText}</text>
+    <text x="${labelWidth + valueWidth / 2}" y="14" fill="#fff">${valueText}</text>
+  </g>
+</svg>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-security",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Deterministic security auditing engine with optional AI advisory layer. Run as CLI, CI step, or service. AI does not make enforcement decisions.",
   "type": "module",
   "main": "dist/index.js",

package/visualizer/docs.html

@@ -349,6 +349,103 @@
       margin: 0;
     }
 
+    /* Screenshot Comparison */
+    .screenshot-comparison {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+      margin: 2rem 0;
+    }
+
+    .screenshot-card {
+      background: var(--bg-card);
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+    }
+
+    .screenshot-label {
+      padding: 1rem 1.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-weight: 600;
+      font-size: 0.9375rem;
+    }
+
+    .screenshot-card.bad .screenshot-label {
+      background: rgba(239, 68, 68, 0.1);
+      border-bottom: 2px solid var(--critical);
+      color: var(--critical);
+    }
+
+    .screenshot-card.good .screenshot-label {
+      background: rgba(34, 197, 94, 0.1);
+      border-bottom: 2px solid var(--success);
+      color: var(--success);
+    }
+
+    .screenshot-icon {
+      font-size: 1.25rem;
+    }
+
+    .screenshot-container {
+      position: relative;
+      background: #0d1117;
+      min-height: 280px;
+    }
+
+    .screenshot-container img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    .screenshot-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 280px;
+      text-align: center;
+      padding: 2rem;
+    }
+
+    .screenshot-placeholder.bad {
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
+    }
+
+    .screenshot-placeholder.good {
+      background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(6, 182, 212, 0.1));
+    }
+
+    .placeholder-icon {
+      font-size: 4rem;
+      margin-bottom: 1rem;
+      opacity: 0.8;
+    }
+
+    .placeholder-text {
+      color: var(--text-secondary);
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    .placeholder-text small {
+      opacity: 0.7;
+    }
+
+    .screenshot-caption {
+      padding: 1rem 1.25rem;
+      font-size: 0.8125rem;
+      color: var(--text-secondary);
+      border-top: 1px solid var(--border);
+    }
+
+    .screenshot-caption strong {
+      color: var(--text);
+    }
+
     /* Comparison */
     .comparison {
       display: grid;
@@ -555,6 +652,9 @@
       .comparison {
         grid-template-columns: 1fr;
       }
+      .screenshot-comparison {
+        grid-template-columns: 1fr;
+      }
       .slop-grid {
         grid-template-columns: 1fr;
       }
@@ -797,6 +897,47 @@
       <h2>Good vs Bad: Real Examples</h2>
       <p>Here's what secure and insecure repositories look like when scanned with aurasecurity:</p>
 
+      <!-- 3D Visualizer Screenshots -->
+      <h3>3D Visualization Comparison</h3>
+      <p>See the difference at a glance - red means danger, green means safe:</p>
+
+      <div class="screenshot-comparison">
+        <div class="screenshot-card bad">
+          <div class="screenshot-label">
+            <span class="screenshot-icon bad">&#10060;</span>
+            <span>Vulnerable Repository</span>
+          </div>
+          <div class="screenshot-container">
+            <img src="https://app.aurasecurity.io/screenshots/bad-repo.png" alt="3D view of vulnerable repository with red nodes" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder bad\'><div class=\'placeholder-icon\'>&#128308;</div><div class=\'placeholder-text\'>juice-shop scan result<br><small>Red node = 9 secrets found</small></div></div>'">
+          </div>
+          <div class="screenshot-caption">
+            <strong>juice-shop</strong> - Multiple red severity indicators orbiting the node. Each red sphere represents a critical or high finding.
+          </div>
+        </div>
+
+        <div class="screenshot-card good">
+          <div class="screenshot-label">
+            <span class="screenshot-icon good">&#9989;</span>
+            <span>Clean Repository</span>
+          </div>
+          <div class="screenshot-container">
+            <img src="https://app.aurasecurity.io/screenshots/good-repo.png" alt="3D view of clean repository with green node" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder good\'><div class=\'placeholder-icon\'>&#128994;</div><div class=\'placeholder-text\'>aurasecurity scan result<br><small>Green node = 0 issues</small></div></div>'">
+          </div>
+          <div class="screenshot-caption">
+            <strong>aurasecurity</strong> - Clean green node with no severity indicators. This is your target state.
+          </div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <h5>&#127912; Reading the 3D View</h5>
+        <p><strong>Node Color:</strong> Red = critical issues, Orange = high, Yellow = medium, Green = clean<br>
+        <strong>Orbiting Shapes:</strong> Each shape around a node represents a finding category. More shapes = more issues.<br>
+        <strong>Click to Drill Down:</strong> Click any node to see severity breakdown, click severity to see individual findings.</p>
+      </div>
+
+      <!-- Stats Comparison Cards -->
+      <h3>Scan Statistics</h3>
       <div class="comparison">
         <div class="comparison-card bad">
           <div class="comparison-header">
@@ -815,7 +956,7 @@
             </div>
             <div class="comparison-stat">
               <span class="stat-label">High Findings</span>
-              <span class="stat-value high">4 (API Keys)</span>
+              <span class="stat-value high">8 (API Keys)</span>
             </div>
             <div class="comparison-stat">
               <span class="stat-label">Medium Findings</span>
@@ -827,7 +968,7 @@
             </div>
             <div class="comparison-stat">
               <span class="stat-label">Total Issues</span>
-              <span class="stat-value critical">20</span>
+              <span class="stat-value critical">24</span>
             </div>
           </div>
         </div>
@@ -835,13 +976,13 @@
         <div class="comparison-card good">
           <div class="comparison-header">
             <span>&#9989;</span>
-            <span>get-shit-done (Clean)</span>
+            <span>aurasecurity (Clean)</span>
           </div>
           <div class="comparison-body">
-            <p style="font-size: 0.875rem; margin-bottom: 1rem;">A simple productivity tool with no security findings.</p>
+            <p style="font-size: 0.875rem; margin-bottom: 1rem;">Our own repository - we practice what we preach.</p>
             <div class="comparison-stat">
               <span class="stat-label">Scan Time</span>
-              <span class="stat-value">2.87s</span>
+              <span class="stat-value">4.10s</span>
             </div>
             <div class="comparison-stat">
               <span class="stat-label">Critical Findings</span>

package/visualizer/index-minimal.html

@@ -198,16 +198,13 @@
     }
 
     .logo-icon {
-      width: 28px;
-      height: 28px;
-      background: var(--accent);
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      font-weight: 600;
-      color: white;
+      height: 24px;
+      width: auto;
+    }
+
+    .logo-icon img {
+      height: 100%;
+      width: auto;
     }
 
     .home-link {
@@ -289,6 +286,100 @@
     .stat-value.critical { color: var(--critical); }
     .stat-value.warning { color: var(--warning); }
 
+    /* Score Display */
+    .score-display {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 0 16px;
+      border-left: 1px solid var(--border);
+      margin-left: 8px;
+    }
+
+    .score-circle {
+      position: relative;
+      width: 40px;
+      height: 40px;
+    }
+
+    .score-circle svg {
+      transform: rotate(-90deg);
+    }
+
+    .score-circle .score-bg {
+      fill: none;
+      stroke: var(--bg-tertiary);
+      stroke-width: 3;
+    }
+
+    .score-circle .score-progress {
+      fill: none;
+      stroke: var(--success);
+      stroke-width: 3;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
+    }
+
+    .score-value-container {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+    }
+
+    .score-number {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--text-primary);
+      line-height: 1;
+    }
+
+    .score-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .score-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .score-grade {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .score-grade.grade-a { color: var(--success); }
+    .score-grade.grade-b { color: var(--accent); }
+    .score-grade.grade-c { color: var(--warning); }
+    .score-grade.grade-f { color: var(--critical); }
+
+    .score-trend {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+    }
+
+    .score-trend.up { color: var(--success); }
+    .score-trend.down { color: var(--critical); }
+    .score-trend.same { color: var(--text-muted); }
+
+    .trend-chart-mini {
+      width: 60px;
+      height: 24px;
+    }
+
+    .trend-chart-mini polyline {
+      fill: none;
+      stroke: var(--accent);
+      stroke-width: 1.5;
+    }
+
     /* Left Panel - Scanner */
     #scanner-panel {
       top: 72px;
@@ -795,7 +886,7 @@
   <!-- Header -->
   <header id="header" class="panel">
     <div class="logo">
-      <div class="logo-icon">S</div>
+      <div class="logo-icon"><img src="/images/aura-logo.jpg" alt="AURA"></div>
       <span>aurasecurity</span>
     </div>
 
@@ -824,6 +915,28 @@
         <span class="stat-value" id="totalRepos">0</span>
         <span>Scanned</span>
       </div>
+
+      <!-- Security Score -->
+      <div class="score-display" id="scoreDisplay">
+        <div class="score-circle">
+          <svg viewBox="0 0 40 40">
+            <circle class="score-bg" cx="20" cy="20" r="17"/>
+            <circle class="score-progress" id="scoreProgress" cx="20" cy="20" r="17"
+                    stroke-dasharray="106.8" stroke-dashoffset="106.8"/>
+          </svg>
+          <div class="score-value-container">
+            <span class="score-number" id="scoreNumber">--</span>
+          </div>
+        </div>
+        <div class="score-info">
+          <span class="score-label">Score</span>
+          <span class="score-grade grade-a" id="scoreGrade">-</span>
+          <span class="score-trend same" id="scoreTrend">--</span>
+        </div>
+        <svg class="trend-chart-mini" id="trendChartMini" viewBox="0 0 60 24">
+          <polyline id="trendLine" points=""/>
+        </svg>
+      </div>
     </div>
   </header>
 
@@ -1802,6 +1915,7 @@
           log(`Complete: ${repo.secrets} secrets, ${repo.vulns} vulnerabilities`, repo.secrets > 0 ? 'error' : 'success');
         }
         updateUI();
+        refreshScore(); // Update security score after scan
         selectRepo(repo.id);
 
       } catch (err) {
@@ -2140,8 +2254,83 @@
     }
     window.clearAllReports = clearAllReports;
 
+    // ========== SECURITY SCORE ==========
+    async function fetchSecurityScore() {
+      try {
+        const res = await fetch(`${AURA_URL}/score`);
+        if (!res.ok) return null;
+        return await res.json();
+      } catch (e) {
+        console.log('Score fetch failed:', e);
+        return null;
+      }
+    }
+
+    function updateScoreDisplay(scoreData) {
+      if (!scoreData) {
+        document.getElementById('scoreNumber').textContent = '--';
+        document.getElementById('scoreGrade').textContent = '-';
+        document.getElementById('scoreTrend').textContent = '--';
+        return;
+      }
+
+      const { score, grade, gradeColor, trend } = scoreData;
+
+      // Update score number
+      document.getElementById('scoreNumber').textContent = score;
+
+      // Update grade with color
+      const gradeEl = document.getElementById('scoreGrade');
+      gradeEl.textContent = grade;
+      gradeEl.className = 'score-grade';
+      if (score >= 90) gradeEl.classList.add('grade-a');
+      else if (score >= 70) gradeEl.classList.add('grade-b');
+      else if (score >= 50) gradeEl.classList.add('grade-c');
+      else gradeEl.classList.add('grade-f');
+
+      // Update progress ring (circumference = 2 * PI * 17 = 106.8)
+      const circumference = 106.8;
+      const offset = circumference - (score / 100) * circumference;
+      const progressEl = document.getElementById('scoreProgress');
+      progressEl.style.strokeDashoffset = offset;
+      progressEl.style.stroke = gradeColor || (score >= 70 ? 'var(--success)' : score >= 50 ? 'var(--warning)' : 'var(--critical)');
+
+      // Update trend indicator
+      const trendEl = document.getElementById('scoreTrend');
+      if (trend && trend.previousScore !== null) {
+        const arrow = trend.direction === 'up' ? '↑' : trend.direction === 'down' ? '↓' : '→';
+        trendEl.textContent = `${arrow} ${trend.change}`;
+        trendEl.className = `score-trend ${trend.direction}`;
+      } else {
+        trendEl.textContent = '—';
+        trendEl.className = 'score-trend same';
+      }
+
+      // Update mini trend chart
+      if (trend && trend.history && trend.history.length > 1) {
+        const points = trend.history.slice().reverse();
+        const maxScore = Math.max(...points.map(p => p.score), 100);
+        const minScore = Math.min(...points.map(p => p.score), 0);
+        const range = maxScore - minScore || 1;
+
+        const polyPoints = points.map((p, i) => {
+          const x = (i / (points.length - 1)) * 58 + 1;
+          const y = 22 - ((p.score - minScore) / range) * 20;
+          return `${x},${y}`;
+        }).join(' ');
+
+        document.getElementById('trendLine').setAttribute('points', polyPoints);
+      }
+    }
+
+    async function refreshScore() {
+      const scoreData = await fetchSecurityScore();
+      updateScoreDisplay(scoreData);
+    }
+
     // ========== INIT ==========
     initScene();
+    refreshScore(); // Fetch initial score
     log('Ready to scan');
   </script>
 </body>

package/visualizer/landing.html

@@ -110,14 +110,13 @@
     }
 
     .logo-mark {
-      width: 36px;
-      height: 36px;
-      background: linear-gradient(135deg, var(--primary), var(--secondary));
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.25rem;
+      height: 32px;
+      width: auto;
+    }
+
+    .logo-mark img {
+      height: 100%;
+      width: auto;
     }
 
     .nav-links {
@@ -1489,7 +1488,7 @@
   <nav>
     <div class="nav-inner">
       <a href="/" class="logo">
-        <div class="logo-mark">🛡️</div>
+        <div class="logo-mark"><img src="/images/aura-logo.jpg" alt="AURA"></div>
         aurasecurity
       </a>
       <div class="nav-links">
@@ -1898,7 +1897,7 @@
     <div class="footer-container">
       <div class="footer-left">
         <a href="/" class="logo">
-          <div class="logo-mark">🛡️</div>
+          <div class="logo-mark"><img src="/images/aura-logo.jpg" alt="AURA"></div>
           aurasecurity
         </a>
         <div class="footer-links">