react-doctor-cli-dev 1.0.1 → 1.0.2

package/backend/dist/db.js

@@ -1,25 +1,69 @@
 "use strict";
+// ─────────────────────────────────────────────────────────────
+// backend/src/db.ts
+//
+// SQLite database via better-sqlite3 (synchronous, fast).
+//
+// SCHEMA:
+//
+//   reports — one row per analysis run
+//     id           — auto-increment PK
+//     project      — project name / hostname
+//     score        — 0-100 overall performance score
+//     grade        — A+, A, B, C, D, F
+//     analyzed_at  — ISO timestamp from the CLI
+//     created_at   — when the row was inserted
+//     static_json  — full StaticReport as JSON string
+//     runtime_json — full RuntimeReport map as JSON string
+//                    (screenshots stripped — stored as files)
+//     suggestions  — full Suggestion[] as JSON string
+//
+// WHY SPLIT COLUMNS INSTEAD OF ONE payload COLUMN?
+//   The old schema stored everything in a single `payload` TEXT
+//   column. This meant the dashboard couldn't query individual
+//   fields without parsing the whole blob. Splitting into three
+//   typed columns lets us:
+//     • SELECT only the part we need (e.g. just static_json for
+//       the issues page)
+//     • Keep the list endpoint fast (no giant blobs per row)
+//     • Add indices on score/grade later without changing schema
+//
+// SCREENSHOT STORAGE:
+//   Screenshots are base64 PNGs — up to 200KB each. Storing them
+//   in SQLite bloats the DB and makes every query slower. Instead:
+//     • The upload route strips dataUrls from runtime_json
+//     • Saves each screenshot as a .png file in data/screenshots/
+//     • Replaces dataUrl with a relative path /screenshots/<file>
+//   The dashboard fetches screenshots via the static file route.
+// ─────────────────────────────────────────────────────────────
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.screenshotsDir = void 0;
 const better_sqlite3_1 = __importDefault(require("better-sqlite3"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
 const dotenv_1 = __importDefault(require("dotenv"));
-dotenv_1.default.config();
-const dbPath = process.env.DB_PATH || "./data/reports.db";
+dotenv_1.default.config({ path: path_1.default.join(__dirname, "..", ".env") });
+const PACKAGE_ROOT = path_1.default.resolve(__dirname, "..", "..");
+const DEFAULT_DB = path_1.default.join(PACKAGE_ROOT, "backend", "data", "reports.db");
+const dbPath = process.env.DB_PATH || DEFAULT_DB;
 fs_1.default.mkdirSync(path_1.default.dirname(dbPath), { recursive: true });
+fs_1.default.mkdirSync(path_1.default.join(path_1.default.dirname(dbPath), "screenshots"), { recursive: true });
 const db = new better_sqlite3_1.default(dbPath);
 db.exec(`
-CREATE TABLE IF NOT EXISTS reports (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    project TEXT NOT NULL,
-    score INTEGER NOT NULL,
-    grade TEXT NOT NULL,
-    analyzed_at TEXT NOT NULL,
-    created_at TEXT NOT NULL DEFAULT (datetime('now')),
-    payload TEXT NOT NULL
-);
+  CREATE TABLE IF NOT EXISTS reports (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    project       TEXT    NOT NULL,
+    score         INTEGER NOT NULL,
+    grade         TEXT    NOT NULL,
+    analyzed_at   TEXT    NOT NULL,
+    created_at    TEXT    NOT NULL DEFAULT (datetime('now')),
+    static_json   TEXT    NOT NULL,
+    runtime_json  TEXT    NOT NULL,
+    suggestions   TEXT    NOT NULL
+  );
 `);
+exports.screenshotsDir = path_1.default.join(path_1.default.dirname(dbPath), "screenshots");
 exports.default = db;

package/backend/dist/index.js

@@ -7,37 +7,36 @@ const express_1 = __importDefault(require("express"));
 const cors_1 = __importDefault(require("cors"));
 const helmet_1 = __importDefault(require("helmet"));
 const dotenv_1 = __importDefault(require("dotenv"));
+const path_1 = __importDefault(require("path"));
 const reports_1 = __importDefault(require("./routes/reports"));
-dotenv_1.default.config();
-// Debug: Check if API_KEY is loaded
-console.log(`[Debug] API_KEY loaded: ${process.env.API_KEY ? '✓' : '✗'}`);
-console.log(`[Debug] API_KEY value: ${process.env.API_KEY || 'NOT SET'}`);
+const db_1 = require("./db");
+dotenv_1.default.config({ path: path_1.default.join(__dirname, "..", ".env") });
 const app = (0, express_1.default)();
 const PORT = process.env.PORT || 3000;
-// ─── SECURITY AND PARSING MIDDLEWARE ──────────────────────────────────────────
-app.use((0, helmet_1.default)()); // adds security headers
-app.use((0, cors_1.default)()); // allows dashboard to call the API
-app.use(express_1.default.json({ limit: '50mb' })); // reports can be large (screenshots)
-// ─── ROUTES ───────────────────────────────────────────────────────────────────
-// Use only ONE path (plural is REST convention)
-app.use('/api/reports', reports_1.default);
-// ─── HEALTH CHECK - NO AUTH, USED TO VERIFY SERVER IS UP ──────────────────────
-app.get('/health', (_req, res) => {
-    res.json({
-        status: 'ok',
-        timestamp: new Date().toISOString()
-    });
+// ── Middleware ────────────────────────────────────────────────
+app.use((0, helmet_1.default)());
+app.use((0, cors_1.default)());
+app.use(express_1.default.json({ limit: "50mb" }));
+// ── Static: screenshots saved by the upload route ────────────
+// Served at /screenshots/<filename>
+// The dashboard uses these as <img src="/screenshots/...">
+app.use("/screenshots", express_1.default.static(db_1.screenshotsDir));
+// ── Routes ────────────────────────────────────────────────────
+app.use("/api/reports", reports_1.default);
+// ── Health check ──────────────────────────────────────────────
+app.get("/health", (_req, res) => {
+    res.json({ status: "ok", timestamp: new Date().toISOString() });
 });
-// ─── 404 HANDLER ──────────────────────────────────────────────────────────────
-app.use((req, res) => {
-    res.status(404).json({ message: 'Route not found' });
+// ── 404 ───────────────────────────────────────────────────────
+app.use((_req, res) => {
+    res.status(404).json({ message: "Route not found" });
 });
-// ─── GLOBAL ERROR HANDLER ─────────────────────────────────────────────────────
+// ── Error handler ─────────────────────────────────────────────
 app.use((err, _req, res, _next) => {
     console.error(err.stack);
-    res.status(500).json({ message: 'Internal Server Error' });
+    res.status(500).json({ message: "Internal Server Error" });
 });
-// ─── START THE SERVER ─────────────────────────────────────────────────────────
+// ── Start ─────────────────────────────────────────────────────
 app.listen(PORT, () => {
     console.log(`React Doctor backend running on http://localhost:${PORT}`);
 });

package/backend/dist/routes/reports.js

@@ -1,74 +1,171 @@
 "use strict";
+// ─────────────────────────────────────────────────────────────
+// backend/src/routes/reports.ts
+//
+// All report endpoints.
+//
+// ENDPOINTS:
+//
+//   GET  /api/reports
+//     Returns a summary list (no blobs) — fast for the dashboard
+//     history page. Each row has id, project, score, grade, dates.
+//
+//   GET  /api/reports/:id
+//     Returns the full report for one run — static + runtime +
+//     suggestions all parsed back to objects.
+//
+//   GET  /api/reports/project/:name
+//     All runs for a named project, summary only.
+//
+//   POST /api/reports/upload   (requires x-api-key header)
+//     Accepts a FinalReport from the CLI.
+//     Strips screenshot dataUrls → saves as .png files.
+//     Stores static_json, runtime_json, suggestions in DB.
+//
+// SCREENSHOT HANDLING ON UPLOAD:
+//   The CLI sends the full FinalReport including base64 screenshots
+//   (up to 200KB each). We extract those before storing so the DB
+//   stays lean. Each screenshot is saved as:
+//     data/screenshots/<reportId>-<routeKey>-<label>.png
+//   And the dataUrl in runtime_json is replaced with:
+//     /screenshots/<filename>
+//   so the dashboard can load them as normal <img> tags.
+// ─────────────────────────────────────────────────────────────
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const express_1 = require("express");
-const db_1 = __importDefault(require("../db"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const db_1 = __importStar(require("../db"));
 const auth_1 = require("../middleware/auth");
 const router = (0, express_1.Router)();
-router.get("/", (req, res) => {
+// ── GET /api/reports ─────────────────────────────────────────
+// Summary list — no blobs, just the columns the history page needs.
+router.get("/", (_req, res) => {
     try {
         const rows = db_1.default.prepare(`
       SELECT id, project, score, grade, analyzed_at, created_at
-      FROM reports
-      ORDER BY created_at DESC
-      LIMIT 50
+      FROM   reports
+      ORDER  BY created_at DESC
+      LIMIT  100
     `).all();
         res.json({ count: rows.length, reports: rows });
     }
     catch (err) {
+        console.error("GET / error:", err.message);
         res.status(500).json({ error: "Internal server error" });
     }
 });
+// ── GET /api/reports/project/:name ───────────────────────────
+// All runs for one project, summary only.
 router.get("/project/:name", (req, res) => {
     try {
         const rows = db_1.default.prepare(`
       SELECT id, project, score, grade, analyzed_at, created_at
-      FROM reports
-      WHERE project = ?
-      ORDER BY created_at DESC
+      FROM   reports
+      WHERE  project = ?
+      ORDER  BY created_at DESC
     `).all(req.params.name);
-        res.json({
-            project: req.params.name,
-            count: rows.length,
-            reports: rows,
-        });
+        res.json({ project: req.params.name, count: rows.length, reports: rows });
     }
     catch (err) {
+        console.error("GET /project/:name error:", err.message);
         res.status(500).json({ error: "Internal server error" });
     }
 });
-// ==========================================
-// Endpoint 1: POST /api/report/upload
-// يستقبل التقرير من الـ CLI ويتحقق منه ثم يحفظه
-// ==========================================
+// ── POST /api/reports/upload ──────────────────────────────────
+// Receives a FinalReport from the CLI, strips screenshots to disk,
+// and stores the three JSON blobs in separate columns.
 router.post("/upload", auth_1.requireApiKey, (req, res) => {
     try {
-        const report = req.body;
-        // التحقق من وجود الحقول الإلزامية الثلاثة
-        if (!report || !report.projectName || !report.analyzedAt || report.performanceScore === undefined) {
-            res.status(400).json({ error: "Invalid report — missing required fields" });
+        const body = req.body;
+        // ── Validate required top-level fields ──────────────────
+        if (!body ||
+            !body.projectName ||
+            !body.analyzedAt ||
+            body.performanceScore === undefined ||
+            !body.static ||
+            !body.runtime ||
+            !body.suggestions) {
+            res.status(400).json({
+                error: "Invalid report",
+                missing: getMissingFields(body),
+            });
             return;
         }
-        const grade = report.static?.grade ?? "N/A";
-        // تجهيز استعلام الإدخال لـ SQLite
+        // ── Extract grade from static report ────────────────────
+        const grade = body.static?.grade ?? "N/A";
+        // ── Strip screenshots from runtime, save as .png files ──
+        // We do this BEFORE inserting so the DB never holds base64.
+        // The row ID isn't known yet — we'll rename after insert.
+        // For now we use a temp prefix and rename below.
+        const { cleanedRuntime, pendingScreenshots } = extractScreenshots(body.runtime);
+        // ── Insert the row ───────────────────────────────────────
         const stmt = db_1.default.prepare(`
-      INSERT INTO reports (project, score, grade, analyzed_at, payload)
-      VALUES (?, ?, ?, ?, ?)
-    `);
-        // تنفيذ الاستعلام وحفظ جسم التقرير كـ string
-        const result = stmt.run(report.projectName, report.performanceScore, grade, report.analyzedAt, JSON.stringify(report));
+        INSERT INTO reports
+          (project, score, grade, analyzed_at, static_json, runtime_json, suggestions)
+        VALUES
+          (?, ?, ?, ?, ?, ?, ?)
+      `);
+        const result = stmt.run(body.projectName, body.performanceScore, grade, body.analyzedAt, JSON.stringify(body.static), JSON.stringify(cleanedRuntime), JSON.stringify(body.suggestions));
+        const reportId = result.lastInsertRowid;
+        // ── Save screenshots with final filenames ────────────────
+        const savedScreenshots = saveScreenshots(reportId, pendingScreenshots);
+        // ── Patch runtime_json with final screenshot paths ───────
+        // Now that we have the reportId we can write the correct paths.
+        if (savedScreenshots.length > 0) {
+            const patchedRuntime = patchScreenshotPaths(cleanedRuntime, savedScreenshots);
+            db_1.default.prepare("UPDATE reports SET runtime_json = ? WHERE id = ?").run(JSON.stringify(patchedRuntime), reportId);
+        }
         res.status(201).json({
             message: "Report saved successfully",
-            id: result.lastInsertRowid,
+            id: reportId,
+            screenshots: savedScreenshots.length,
         });
     }
     catch (err) {
-        console.error("Upload error:", err.message);
+        console.error("POST /upload error:", err.message);
         res.status(500).json({ error: "Internal server error" });
     }
 });
+// ── GET /api/reports/:id ─────────────────────────────────────
+// Full report for one run — parses all three JSON columns back
+// to objects and returns a unified response.
 router.get("/:id", (req, res) => {
     try {
         const row = db_1.default.prepare("SELECT * FROM reports WHERE id = ?").get(req.params.id);
@@ -83,11 +180,104 @@ router.get("/:id", (req, res) => {
             grade: row.grade,
             analyzedAt: row.analyzed_at,
             createdAt: row.created_at,
-            report: JSON.parse(row.payload),
+            // Parse the three JSON blobs back into objects
+            static: JSON.parse(row.static_json),
+            runtime: JSON.parse(row.runtime_json),
+            suggestions: JSON.parse(row.suggestions),
         });
     }
     catch (err) {
+        console.error("GET /:id error:", err.message);
         res.status(500).json({ error: "Internal server error" });
     }
 });
 exports.default = router;
+// ─────────────────────────────────────────────────────────────
+// HELPERS
+// ─────────────────────────────────────────────────────────────
+function getMissingFields(body) {
+    const required = ["projectName", "analyzedAt", "performanceScore", "static", "runtime", "suggestions"];
+    return required.filter(f => body?.[f] === undefined || body?.[f] === null);
+}
+/**
+ * Walk the runtime map, strip every screenshot.dataUrl,
+ * and collect them as Buffers ready to write to disk.
+ *
+ * Returns:
+ *   cleanedRuntime  — runtime map with dataUrls replaced by tempPath markers
+ *   pendingScreenshots — list of screenshots to save once we have a reportId
+ */
+function extractScreenshots(runtime) {
+    const pending = [];
+    const cleaned = {};
+    for (const [routeKey, routeData] of Object.entries(runtime)) {
+        const routeClone = { ...routeData };
+        if (Array.isArray(routeClone.screenshots)) {
+            routeClone.screenshots = routeClone.screenshots.map((shot) => {
+                if (!shot.dataUrl || !shot.dataUrl.startsWith("data:image/png;base64,")) {
+                    return shot;
+                }
+                const base64 = shot.dataUrl.replace("data:image/png;base64,", "");
+                const buffer = Buffer.from(base64, "base64");
+                // Sanitise routeKey for use in a filename — replace "/" and ":" with "-"
+                const safeRoute = routeKey.replace(/[/:]/g, "-").replace(/^-+/, "");
+                const safeLabel = shot.label.replace(/[^a-z0-9]/gi, "-");
+                const tempPath = `__PENDING__${safeRoute}__${safeLabel}`;
+                pending.push({ routeKey, label: shot.label, buffer, tempPath });
+                return { ...shot, dataUrl: tempPath };
+            });
+        }
+        cleaned[routeKey] = routeClone;
+    }
+    return { cleanedRuntime: cleaned, pendingScreenshots: pending };
+}
+/**
+ * Write each screenshot buffer to data/screenshots/<reportId>-<route>-<label>.png
+ * Returns the list of saved files with their final URL paths.
+ */
+function saveScreenshots(reportId, pending) {
+    const saved = [];
+    for (const shot of pending) {
+        const safeRoute = shot.routeKey.replace(/[/:]/g, "-").replace(/^-+/, "");
+        const safeLabel = shot.label.replace(/[^a-z0-9]/gi, "-");
+        const filename = `${reportId}-${safeRoute}-${safeLabel}.png`;
+        const fullPath = path_1.default.join(db_1.screenshotsDir, filename);
+        try {
+            fs_1.default.writeFileSync(fullPath, shot.buffer);
+            saved.push({
+                routeKey: shot.routeKey,
+                label: shot.label,
+                tempPath: shot.tempPath,
+                filePath: `/screenshots/${filename}`,
+            });
+        }
+        catch (err) {
+            console.warn(`Could not save screenshot ${filename}: ${err.message}`);
+        }
+    }
+    return saved;
+}
+/**
+ * Replace the __PENDING__ markers in runtime_json with
+ * the final /screenshots/<file> URL paths.
+ */
+function patchScreenshotPaths(runtime, saved) {
+    // Build a lookup from tempPath → filePath
+    const lookup = {};
+    for (const s of saved)
+        lookup[s.tempPath] = s.filePath;
+    const patched = {};
+    for (const [routeKey, routeData] of Object.entries(runtime)) {
+        const routeClone = { ...routeData };
+        if (Array.isArray(routeClone.screenshots)) {
+            routeClone.screenshots = routeClone.screenshots.map((shot) => {
+                if (shot.dataUrl && lookup[shot.dataUrl]) {
+                    return { ...shot, dataUrl: lookup[shot.dataUrl] };
+                }
+                return shot;
+            });
+        }
+        patched[routeKey] = routeClone;
+    }
+    return patched;
+}

package/backend/src/db.ts

@@ -1,24 +1,70 @@
+// ─────────────────────────────────────────────────────────────
+// backend/src/db.ts
+//
+// SQLite database via better-sqlite3 (synchronous, fast).
+//
+// SCHEMA:
+//
+//   reports — one row per analysis run
+//     id           — auto-increment PK
+//     project      — project name / hostname
+//     score        — 0-100 overall performance score
+//     grade        — A+, A, B, C, D, F
+//     analyzed_at  — ISO timestamp from the CLI
+//     created_at   — when the row was inserted
+//     static_json  — full StaticReport as JSON string
+//     runtime_json — full RuntimeReport map as JSON string
+//                    (screenshots stripped — stored as files)
+//     suggestions  — full Suggestion[] as JSON string
+//
+// WHY SPLIT COLUMNS INSTEAD OF ONE payload COLUMN?
+//   The old schema stored everything in a single `payload` TEXT
+//   column. This meant the dashboard couldn't query individual
+//   fields without parsing the whole blob. Splitting into three
+//   typed columns lets us:
+//     • SELECT only the part we need (e.g. just static_json for
+//       the issues page)
+//     • Keep the list endpoint fast (no giant blobs per row)
+//     • Add indices on score/grade later without changing schema
+//
+// SCREENSHOT STORAGE:
+//   Screenshots are base64 PNGs — up to 200KB each. Storing them
+//   in SQLite bloats the DB and makes every query slower. Instead:
+//     • The upload route strips dataUrls from runtime_json
+//     • Saves each screenshot as a .png file in data/screenshots/
+//     • Replaces dataUrl with a relative path /screenshots/<file>
+//   The dashboard fetches screenshots via the static file route.
+// ─────────────────────────────────────────────────────────────
 
 import Database from "better-sqlite3";
-import path from "path";
-import fs from "fs";
-import dotenv from "dotenv";
+import path     from "path";
+import fs       from "fs";
+import dotenv   from "dotenv";
 
-dotenv.config();
+dotenv.config({ path: path.join(__dirname, "..", ".env") });
+
+const PACKAGE_ROOT = path.resolve(__dirname, "..", "..");
+const DEFAULT_DB   = path.join(PACKAGE_ROOT, "backend", "data", "reports.db");
+const dbPath       = process.env.DB_PATH || DEFAULT_DB;
 
-const dbPath = process.env.DB_PATH || "./data/reports.db";
 fs.mkdirSync(path.dirname(dbPath), { recursive: true });
+fs.mkdirSync(path.join(path.dirname(dbPath), "screenshots"), { recursive: true });
+
 const db = new Database(dbPath);
+
 db.exec(`
-CREATE TABLE IF NOT EXISTS reports (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    project TEXT NOT NULL,
-    score INTEGER NOT NULL,
-    grade TEXT NOT NULL,
-    analyzed_at TEXT NOT NULL,
-    created_at TEXT NOT NULL DEFAULT (datetime('now')),
-    payload TEXT NOT NULL
-);
+  CREATE TABLE IF NOT EXISTS reports (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    project       TEXT    NOT NULL,
+    score         INTEGER NOT NULL,
+    grade         TEXT    NOT NULL,
+    analyzed_at   TEXT    NOT NULL,
+    created_at    TEXT    NOT NULL DEFAULT (datetime('now')),
+    static_json   TEXT    NOT NULL,
+    runtime_json  TEXT    NOT NULL,
+    suggestions   TEXT    NOT NULL
+  );
 `);
 
-export default db;
+export const screenshotsDir = path.join(path.dirname(dbPath), "screenshots");
+export default db;

package/backend/src/index.ts

@@ -1,49 +1,46 @@
-import express, { Request, Response, NextFunction } from 'express';
-import cors from 'cors';
-import helmet from 'helmet';
-import dotenv from 'dotenv';
-import reportRoutes from './routes/reports';
-import db from './db';
+import express, { Request, Response, NextFunction } from "express";
+import cors    from "cors";
+import helmet  from "helmet";
+import dotenv  from "dotenv";
+import path    from "path";
+import reportRoutes          from "./routes/reports";
+import db, { screenshotsDir } from "./db";
 
-dotenv.config();
+dotenv.config({ path: path.join(__dirname, "..", ".env") });
 
-// Debug: Check if API_KEY is loaded
-console.log(`[Debug] API_KEY loaded: ${process.env.API_KEY ? '✓' : '✗'}`);
-console.log(`[Debug] API_KEY value: ${process.env.API_KEY || 'NOT SET'}`);
-
-const app = express();
+const app  = express();
 const PORT = process.env.PORT || 3000;
 
-// ─── SECURITY AND PARSING MIDDLEWARE ──────────────────────────────────────────
-app.use(helmet()); // adds security headers
-app.use(cors());   // allows dashboard to call the API
-app.use(express.json({ limit: '50mb' })); // reports can be large (screenshots)
-
-// ─── ROUTES ───────────────────────────────────────────────────────────────────
-// Use only ONE path (plural is REST convention)
-app.use('/api/reports', reportRoutes);
-
-// ─── HEALTH CHECK - NO AUTH, USED TO VERIFY SERVER IS UP ──────────────────────
-app.get('/health', (_req: Request, res: Response) => {
-  res.json({ 
-    status: 'ok', 
-    timestamp: new Date().toISOString() 
-  });
-});
+// ── Middleware ────────────────────────────────────────────────
+app.use(helmet());
+app.use(cors());
+app.use(express.json({ limit: "50mb" }));
+
+// ── Static: screenshots saved by the upload route ────────────
+// Served at /screenshots/<filename>
+// The dashboard uses these as <img src="/screenshots/...">
+app.use("/screenshots", express.static(screenshotsDir));
 
+// ── Routes ────────────────────────────────────────────────────
+app.use("/api/reports", reportRoutes);
 
-// ─── 404 HANDLER ──────────────────────────────────────────────────────────────
-app.use((req: Request, res: Response) => {
-  res.status(404).json({ message: 'Route not found' });
+// ── Health check ──────────────────────────────────────────────
+app.get("/health", (_req: Request, res: Response) => {
+  res.json({ status: "ok", timestamp: new Date().toISOString() });
 });
 
-// ─── GLOBAL ERROR HANDLER ─────────────────────────────────────────────────────
+// ── 404 ───────────────────────────────────────────────────────
+app.use((_req: Request, res: Response) => {
+  res.status(404).json({ message: "Route not found" });
+});
+
+// ── Error handler ─────────────────────────────────────────────
 app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
   console.error(err.stack);
-  res.status(500).json({ message: 'Internal Server Error' });
+  res.status(500).json({ message: "Internal Server Error" });
 });
 
-// ─── START THE SERVER ─────────────────────────────────────────────────────────
+// ── Start ─────────────────────────────────────────────────────
 app.listen(PORT, () => {
   console.log(`React Doctor backend running on http://localhost:${PORT}`);
-});
+});

package/backend/src/routes/reports.ts

@@ -1,110 +1,328 @@
+// ─────────────────────────────────────────────────────────────
+// backend/src/routes/reports.ts
+//
+// All report endpoints.
+//
+// ENDPOINTS:
+//
+//   GET  /api/reports
+//     Returns a summary list (no blobs) — fast for the dashboard
+//     history page. Each row has id, project, score, grade, dates.
+//
+//   GET  /api/reports/:id
+//     Returns the full report for one run — static + runtime +
+//     suggestions all parsed back to objects.
+//
+//   GET  /api/reports/project/:name
+//     All runs for a named project, summary only.
+//
+//   POST /api/reports/upload   (requires x-api-key header)
+//     Accepts a FinalReport from the CLI.
+//     Strips screenshot dataUrls → saves as .png files.
+//     Stores static_json, runtime_json, suggestions in DB.
+//
+// SCREENSHOT HANDLING ON UPLOAD:
+//   The CLI sends the full FinalReport including base64 screenshots
+//   (up to 200KB each). We extract those before storing so the DB
+//   stays lean. Each screenshot is saved as:
+//     data/screenshots/<reportId>-<routeKey>-<label>.png
+//   And the dataUrl in runtime_json is replaced with:
+//     /screenshots/<filename>
+//   so the dashboard can load them as normal <img> tags.
+// ─────────────────────────────────────────────────────────────
 
 import { Router, Request, Response, RequestHandler } from "express";
-import db from "../db";
-import { requireApiKey } from "../middleware/auth";
- 
+import path from "path";
+import fs   from "fs";
+import db, { screenshotsDir } from "../db";
+import { requireApiKey }      from "../middleware/auth";
+
 const router = Router();
- 
 
-router.get("/", (req: Request, res: Response) => {
+// ── GET /api/reports ─────────────────────────────────────────
+// Summary list — no blobs, just the columns the history page needs.
+
+router.get("/", (_req: Request, res: Response) => {
   try {
     const rows = db.prepare(`
       SELECT id, project, score, grade, analyzed_at, created_at
-      FROM reports
-      ORDER BY created_at DESC
-      LIMIT 50
+      FROM   reports
+      ORDER  BY created_at DESC
+      LIMIT  100
     `).all() as any[];
- 
+
     res.json({ count: rows.length, reports: rows });
   } catch (err: any) {
+    console.error("GET / error:", err.message);
     res.status(500).json({ error: "Internal server error" });
   }
 });
- 
+
+// ── GET /api/reports/project/:name ───────────────────────────
+// All runs for one project, summary only.
 
 router.get("/project/:name", (req: Request, res: Response) => {
   try {
     const rows = db.prepare(`
       SELECT id, project, score, grade, analyzed_at, created_at
-      FROM reports
-      WHERE project = ?
-      ORDER BY created_at DESC
+      FROM   reports
+      WHERE  project = ?
+      ORDER  BY created_at DESC
     `).all(req.params.name) as any[];
- 
-    res.json({
-      project: req.params.name,
-      count: rows.length,
-      reports: rows,
-    });
+
+    res.json({ project: req.params.name, count: rows.length, reports: rows });
   } catch (err: any) {
+    console.error("GET /project/:name error:", err.message);
     res.status(500).json({ error: "Internal server error" });
   }
 });
- 
-// ==========================================
-// Endpoint 1: POST /api/report/upload
-// يستقبل التقرير من الـ CLI ويتحقق منه ثم يحفظه
-// ==========================================
-router.post("/upload", requireApiKey as RequestHandler, (req: Request, res: Response) => {
-  try {
-    const report = req.body;
- 
-    // التحقق من وجود الحقول الإلزامية الثلاثة
-    if (!report || !report.projectName || !report.analyzedAt || report.performanceScore === undefined) {
-      res.status(400).json({ error: "Invalid report — missing required fields" });
-      return;
+
+// ── POST /api/reports/upload ──────────────────────────────────
+// Receives a FinalReport from the CLI, strips screenshots to disk,
+// and stores the three JSON blobs in separate columns.
+
+router.post(
+  "/upload",
+  requireApiKey as RequestHandler,
+  (req: Request, res: Response) => {
+    try {
+      const body = req.body;
+
+      // ── Validate required top-level fields ──────────────────
+      if (
+        !body ||
+        !body.projectName ||
+        !body.analyzedAt  ||
+        body.performanceScore === undefined ||
+        !body.static          ||
+        !body.runtime         ||
+        !body.suggestions
+      ) {
+        res.status(400).json({
+          error:   "Invalid report",
+          missing: getMissingFields(body),
+        });
+        return;
+      }
+
+      // ── Extract grade from static report ────────────────────
+      const grade: string = body.static?.grade ?? "N/A";
+
+      // ── Strip screenshots from runtime, save as .png files ──
+      // We do this BEFORE inserting so the DB never holds base64.
+      // The row ID isn't known yet — we'll rename after insert.
+      // For now we use a temp prefix and rename below.
+      const { cleanedRuntime, pendingScreenshots } = extractScreenshots(body.runtime);
+
+      // ── Insert the row ───────────────────────────────────────
+      const stmt = db.prepare(`
+        INSERT INTO reports
+          (project, score, grade, analyzed_at, static_json, runtime_json, suggestions)
+        VALUES
+          (?, ?, ?, ?, ?, ?, ?)
+      `);
+
+      const result = stmt.run(
+        body.projectName,
+        body.performanceScore,
+        grade,
+        body.analyzedAt,
+        JSON.stringify(body.static),
+        JSON.stringify(cleanedRuntime),
+        JSON.stringify(body.suggestions),
+      ) as any;
+
+      const reportId: number = result.lastInsertRowid;
+
+      // ── Save screenshots with final filenames ────────────────
+      const savedScreenshots = saveScreenshots(reportId, pendingScreenshots);
+
+      // ── Patch runtime_json with final screenshot paths ───────
+      // Now that we have the reportId we can write the correct paths.
+      if (savedScreenshots.length > 0) {
+        const patchedRuntime = patchScreenshotPaths(
+          cleanedRuntime,
+          savedScreenshots,
+        );
+        db.prepare(
+          "UPDATE reports SET runtime_json = ? WHERE id = ?"
+        ).run(JSON.stringify(patchedRuntime), reportId);
+      }
+
+      res.status(201).json({
+        message:     "Report saved successfully",
+        id:          reportId,
+        screenshots: savedScreenshots.length,
+      });
+    } catch (err: any) {
+      console.error("POST /upload error:", err.message);
+      res.status(500).json({ error: "Internal server error" });
     }
- 
-    const grade = report.static?.grade ?? "N/A";
- 
-    // تجهيز استعلام الإدخال لـ SQLite
-    const stmt = db.prepare(`
-      INSERT INTO reports (project, score, grade, analyzed_at, payload)
-      VALUES (?, ?, ?, ?, ?)
-    `);
- 
-    // تنفيذ الاستعلام وحفظ جسم التقرير كـ string
-    const result = stmt.run(
-      report.projectName,
-      report.performanceScore,
-      grade,
-      report.analyzedAt,
-      JSON.stringify(report)
-    );
- 
-    res.status(201).json({
-      message: "Report saved successfully",
-      id: result.lastInsertRowid,
-    });
-  } catch (err: any) {
-    console.error("Upload error:", err.message);
-    res.status(500).json({ error: "Internal server error" });
-  }
-});
- 
+  },
+);
+
+// ── GET /api/reports/:id ─────────────────────────────────────
+// Full report for one run — parses all three JSON columns back
+// to objects and returns a unified response.
+
 router.get("/:id", (req: Request, res: Response) => {
   try {
     const row = db.prepare(
       "SELECT * FROM reports WHERE id = ?"
     ).get(req.params.id) as any;
- 
+
     if (!row) {
       res.status(404).json({ error: "Report not found" });
       return;
     }
- 
+
     res.json({
-      id: row.id,
-      project: row.project,
-      score: row.score,
-      grade: row.grade,
-      analyzedAt: row.analyzed_at,
-      createdAt: row.created_at,
-      report: JSON.parse(row.payload),
+      id:          row.id,
+      project:     row.project,
+      score:       row.score,
+      grade:       row.grade,
+      analyzedAt:  row.analyzed_at,
+      createdAt:   row.created_at,
+      // Parse the three JSON blobs back into objects
+      static:      JSON.parse(row.static_json),
+      runtime:     JSON.parse(row.runtime_json),
+      suggestions: JSON.parse(row.suggestions),
     });
   } catch (err: any) {
+    console.error("GET /:id error:", err.message);
     res.status(500).json({ error: "Internal server error" });
   }
 });
- 
-export default router;
+
+export default router;
+
+// ─────────────────────────────────────────────────────────────
+// HELPERS
+// ─────────────────────────────────────────────────────────────
+
+function getMissingFields(body: any): string[] {
+  const required = ["projectName", "analyzedAt", "performanceScore", "static", "runtime", "suggestions"];
+  return required.filter(f => body?.[f] === undefined || body?.[f] === null);
+}
+
+interface PendingScreenshot {
+  routeKey: string;
+  label:    string;
+  buffer:   Buffer;
+  // placeholder path written into cleanedRuntime — replaced after insert
+  tempPath: string;
+}
+
+/**
+ * Walk the runtime map, strip every screenshot.dataUrl,
+ * and collect them as Buffers ready to write to disk.
+ *
+ * Returns:
+ *   cleanedRuntime  — runtime map with dataUrls replaced by tempPath markers
+ *   pendingScreenshots — list of screenshots to save once we have a reportId
+ */
+function extractScreenshots(
+  runtime: Record<string, any>,
+): { cleanedRuntime: Record<string, any>; pendingScreenshots: PendingScreenshot[] } {
+  const pending: PendingScreenshot[] = [];
+  const cleaned: Record<string, any> = {};
+
+  for (const [routeKey, routeData] of Object.entries(runtime)) {
+    const routeClone = { ...routeData };
+
+    if (Array.isArray(routeClone.screenshots)) {
+      routeClone.screenshots = routeClone.screenshots.map((shot: any) => {
+        if (!shot.dataUrl || !shot.dataUrl.startsWith("data:image/png;base64,")) {
+          return shot;
+        }
+
+        const base64 = shot.dataUrl.replace("data:image/png;base64,", "");
+        const buffer = Buffer.from(base64, "base64");
+
+        // Sanitise routeKey for use in a filename — replace "/" and ":" with "-"
+        const safeRoute = routeKey.replace(/[/:]/g, "-").replace(/^-+/, "");
+        const safeLabel = shot.label.replace(/[^a-z0-9]/gi, "-");
+        const tempPath  = `__PENDING__${safeRoute}__${safeLabel}`;
+
+        pending.push({ routeKey, label: shot.label, buffer, tempPath });
+
+        return { ...shot, dataUrl: tempPath };
+      });
+    }
+
+    cleaned[routeKey] = routeClone;
+  }
+
+  return { cleanedRuntime: cleaned, pendingScreenshots: pending };
+}
+
+interface SavedScreenshot {
+  routeKey: string;
+  label:    string;
+  tempPath: string;
+  filePath: string; // relative URL path served by express static
+}
+
+/**
+ * Write each screenshot buffer to data/screenshots/<reportId>-<route>-<label>.png
+ * Returns the list of saved files with their final URL paths.
+ */
+function saveScreenshots(
+  reportId: number,
+  pending:  PendingScreenshot[],
+): SavedScreenshot[] {
+  const saved: SavedScreenshot[] = [];
+
+  for (const shot of pending) {
+    const safeRoute = shot.routeKey.replace(/[/:]/g, "-").replace(/^-+/, "");
+    const safeLabel = shot.label.replace(/[^a-z0-9]/gi, "-");
+    const filename  = `${reportId}-${safeRoute}-${safeLabel}.png`;
+    const fullPath  = path.join(screenshotsDir, filename);
+
+    try {
+      fs.writeFileSync(fullPath, shot.buffer);
+      saved.push({
+        routeKey: shot.routeKey,
+        label:    shot.label,
+        tempPath: shot.tempPath,
+        filePath: `/screenshots/${filename}`,
+      });
+    } catch (err: any) {
+      console.warn(`Could not save screenshot ${filename}: ${err.message}`);
+    }
+  }
+
+  return saved;
+}
+
+/**
+ * Replace the __PENDING__ markers in runtime_json with
+ * the final /screenshots/<file> URL paths.
+ */
+function patchScreenshotPaths(
+  runtime: Record<string, any>,
+  saved:   SavedScreenshot[],
+): Record<string, any> {
+  // Build a lookup from tempPath → filePath
+  const lookup: Record<string, string> = {};
+  for (const s of saved) lookup[s.tempPath] = s.filePath;
+
+  const patched: Record<string, any> = {};
+
+  for (const [routeKey, routeData] of Object.entries(runtime)) {
+    const routeClone = { ...routeData };
+
+    if (Array.isArray(routeClone.screenshots)) {
+      routeClone.screenshots = routeClone.screenshots.map((shot: any) => {
+        if (shot.dataUrl && lookup[shot.dataUrl]) {
+          return { ...shot, dataUrl: lookup[shot.dataUrl] };
+        }
+        return shot;
+      });
+    }
+
+    patched[routeKey] = routeClone;
+  }
+
+  return patched;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-doctor-cli-dev",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React performance analyzer with static analysis, runtime profiling, rule engine, and dashboard upload",
   "main": "index.js",
   "type": "commonjs",