react-scanner-ui 0.0.7 → 0.0.9

package/dist/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAmE7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAgE7D"}

package/dist/server/index.js

@@ -32,14 +32,10 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = startServer;
 const http_1 = require("http");
 const path_1 = require("path");
-const polka_1 = __importDefault(require("polka"));
 const scannerConfig_1 = require("../utils/scannerConfig");
 /**
  * Get the path to the UI directory.
@@ -57,14 +53,6 @@ function getUiRoot() {
  * (similar approach to Storybook's builder-vite)
  */
 async function startServer(port) {
-    const server = (0, http_1.createServer)();
-    const app = (0, polka_1.default)({ server });
-    // API endpoint to get scan data (served before Vite middleware)
-    app.get("/api/scan-data", (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        const result = (0, scannerConfig_1.getScanData)();
-        res.end(JSON.stringify(result));
-    });
     // Dynamically import Vite to create dev server in middleware mode
     const { createServer: createViteServer } = await Promise.resolve().then(() => __importStar(require("vite")));
     const uiRoot = getUiRoot();
@@ -73,14 +61,23 @@ async function startServer(port) {
         configFile: (0, path_1.resolve)(uiRoot, "vite.config.ts"),
         server: {
             middlewareMode: true,
-            hmr: {
-                server,
-            },
         },
         appType: "spa",
     });
-    // Use Vite's connect instance as middleware
-    app.use(vite.middlewares);
+    // Create HTTP server with manual routing
+    const server = (0, http_1.createServer)((req, res) => {
+        const url = req.url || "";
+        // Handle API routes FIRST - before Vite middleware
+        if (url === "/api/scan-data" || url.startsWith("/api/scan-data?")) {
+            res.setHeader("Content-Type", "application/json");
+            res.setHeader("Cache-Control", "no-cache");
+            const result = (0, scannerConfig_1.getScanData)();
+            res.end(JSON.stringify(result));
+            return;
+        }
+        // Pass everything else to Vite
+        vite.middlewares(req, res);
+    });
     // Handle server errors
     server.on("error", (err) => {
         console.error("Server error:", err);
@@ -96,13 +93,13 @@ async function startServer(port) {
     };
     process.on("SIGINT", shutdown);
     process.on("SIGTERM", shutdown);
-    return new Promise((resolve, reject) => {
+    return new Promise((resolvePromise, reject) => {
         server.on("error", reject);
-        app.listen({ port, host: "127.0.0.1" }, () => {
+        server.listen(port, "127.0.0.1", () => {
             console.log(`\n🚀 React Scanner UI is running at http://localhost:${port}\n`);
             console.log("   ➜  Hot Module Replacement enabled");
             console.log("   ➜  Press Ctrl+C to stop the server.\n");
-            resolve();
+            resolvePromise();
         });
     });
 }

package/dist/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAmEC;AA9FD,+BAIc;AACd,+BAAwC;AAExC,kDAA0B;AAC1B,0DAAqD;AAErD;;;GAGG;AACH,SAAS,SAAS;IAChB,qDAAqD;IACrD,kCAAkC;IAClC,MAAM,UAAU,GAAG,SAAS,CAAC;IAE7B,8EAA8E;IAC9E,OAAO,IAAA,cAAO,EAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACzC,CAAC;AAED;;;GAGG;AACI,KAAK,UAAU,WAAW,CAAC,IAAY;IAC5C,MAAM,MAAM,GAAG,IAAA,mBAAgB,GAAE,CAAC;IAClC,MAAM,GAAG,GAAG,IAAA,eAAK,EAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9B,gEAAgE;IAChE,GAAG,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,IAAqB,EAAE,GAAmB,EAAE,EAAE;QACvE,GAAG,CAAC,SAAS,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAA,2BAAW,GAAE,CAAC;QAC7B,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,kEAAkE;IAClE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,wDAAa,MAAM,GAAC,CAAC;IAEhE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,IAAI,GAAG,MAAM,gBAAgB,CAAC;QAClC,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAA,cAAO,EAAC,MAAM,EAAE,gBAAgB,CAAC;QAC7C,MAAM,EAAE;YACN,cAAc,EAAE,IAAI;YACpB,GAAG,EAAE;gBACH,MAAM;aACP;SACF;QACD,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,4CAA4C;IAC5C,GAAG,CAAC,GAAG,CACL,IAAI,CAAC,WAII,CACV,CAAC;IAEF,uBAAuB;IACvB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAA0B,EAAE,EAAE;QAChD,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,2BAA2B;IAC3B,MAAM,QAAQ,GAAG,KAAK,IAAI,EAAE;QAC1B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAEhC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE3B,GAAG,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE;YAC3C,OAAO,CAAC,GAAG,CACT,wDAAwD,IAAI,IAAI,CACjE,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;YACpD,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;YACxD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/config.js

@@ -4,9 +4,9 @@ exports.createReactScannerConfig = createReactScannerConfig;
 const fs_1 = require("fs");
 const path_1 = require("path");
 function createReactScannerConfig() {
-    const configPath = (0, path_1.join)(process.cwd(), 'react-scanner.config.js');
+    const configPath = (0, path_1.join)(process.cwd(), "react-scanner.config.js");
     if ((0, fs_1.existsSync)(configPath)) {
-        console.log('react-scanner.config.js already exists.');
+        console.log("react-scanner.config.js already exists.");
         return;
     }
     const configContent = `module.exports = {
@@ -14,16 +14,16 @@ function createReactScannerConfig() {
   includeSubComponents: true,
   importedFrom: 'PLACEHOLDER_FOR_IMPORTED_FROM',
   processors: [
-    ['raw-report', { outputDir: './.scans' }],
+    ['count-components-and-props', { outputTo: './.react-scanner-ui/scan-report.json' }],
   ],
 };
 `;
     try {
         (0, fs_1.writeFileSync)(configPath, configContent);
-        console.log('Created react-scanner.config.js');
+        console.log("Created react-scanner.config.js");
     }
     catch (error) {
-        console.error('Failed to create react-scanner.config.js', error);
+        console.error("Failed to create react-scanner.config.js", error);
     }
 }
 //# sourceMappingURL=config.js.map

package/dist/utils/index.d.ts

@@ -2,5 +2,5 @@ export { isReactScannerInstalled, checkPeerDependency, promptInstallReactScanner
 export { createReactScannerConfig } from "./config";
 export { getServerPort, isPortAvailable } from "./port";
 export type { PortOptions } from "./port";
-export { readScannerConfig, getOutputDir, getLatestScanFile, readScanData, getScanData, } from "./scannerConfig";
+export { readScannerConfig, readScanData, getScanData } from "./scannerConfig";
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getScanData = exports.readScanData = exports.getLatestScanFile = exports.getOutputDir = exports.readScannerConfig = exports.isPortAvailable = exports.getServerPort = exports.createReactScannerConfig = exports.installReactScanner = exports.promptInstallReactScanner = exports.checkPeerDependency = exports.isReactScannerInstalled = void 0;
+exports.getScanData = exports.readScanData = exports.readScannerConfig = exports.isPortAvailable = exports.getServerPort = exports.createReactScannerConfig = exports.installReactScanner = exports.promptInstallReactScanner = exports.checkPeerDependency = exports.isReactScannerInstalled = void 0;
 var dependencies_1 = require("./dependencies");
 Object.defineProperty(exports, "isReactScannerInstalled", { enumerable: true, get: function () { return dependencies_1.isReactScannerInstalled; } });
 Object.defineProperty(exports, "checkPeerDependency", { enumerable: true, get: function () { return dependencies_1.checkPeerDependency; } });
@@ -13,8 +13,6 @@ Object.defineProperty(exports, "getServerPort", { enumerable: true, get: functio
 Object.defineProperty(exports, "isPortAvailable", { enumerable: true, get: function () { return port_1.isPortAvailable; } });
 var scannerConfig_1 = require("./scannerConfig");
 Object.defineProperty(exports, "readScannerConfig", { enumerable: true, get: function () { return scannerConfig_1.readScannerConfig; } });
-Object.defineProperty(exports, "getOutputDir", { enumerable: true, get: function () { return scannerConfig_1.getOutputDir; } });
-Object.defineProperty(exports, "getLatestScanFile", { enumerable: true, get: function () { return scannerConfig_1.getLatestScanFile; } });
 Object.defineProperty(exports, "readScanData", { enumerable: true, get: function () { return scannerConfig_1.readScanData; } });
 Object.defineProperty(exports, "getScanData", { enumerable: true, get: function () { return scannerConfig_1.getScanData; } });
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,+CAKwB;AAJtB,uHAAA,uBAAuB,OAAA;AACvB,mHAAA,mBAAmB,OAAA;AACnB,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAErB,mCAAoD;AAA3C,kHAAA,wBAAwB,OAAA;AACjC,+BAAwD;AAA/C,qGAAA,aAAa,OAAA;AAAE,uGAAA,eAAe,OAAA;AAEvC,iDAMyB;AALvB,kHAAA,iBAAiB,OAAA;AACjB,6GAAA,YAAY,OAAA;AACZ,kHAAA,iBAAiB,OAAA;AACjB,6GAAA,YAAY,OAAA;AACZ,4GAAA,WAAW,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,+CAKwB;AAJtB,uHAAA,uBAAuB,OAAA;AACvB,mHAAA,mBAAmB,OAAA;AACnB,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAErB,mCAAoD;AAA3C,kHAAA,wBAAwB,OAAA;AACjC,+BAAwD;AAA/C,qGAAA,aAAa,OAAA;AAAE,uGAAA,eAAe,OAAA;AAEvC,iDAA+E;AAAtE,kHAAA,iBAAiB,OAAA;AAAE,6GAAA,YAAY,OAAA;AAAE,4GAAA,WAAW,OAAA"}

package/dist/utils/scannerConfig.d.ts

@@ -3,7 +3,7 @@ export interface ScannerConfig {
     includeSubComponents?: boolean;
     importedFrom?: string;
     processors?: Array<[string, {
-        outputDir?: string;
+        outputTo?: string;
     }]>;
 }
 export interface ScanData {
@@ -17,13 +17,9 @@ export interface ScanData {
  */
 export declare function readScannerConfig(): ScannerConfig | null;
 /**
- * Get the output directory from the scanner config
+ * Get the output file path from the scanner config
  */
-export declare function getOutputDir(config: ScannerConfig): string | null;
-/**
- * Get the latest scan file from the output directory
- */
-export declare function getLatestScanFile(outputDir: string): string | null;
+export declare function getOutputFile(config: ScannerConfig): string | null;
 /**
  * Read and parse the scan data from a JSON file
  */

package/dist/utils/scannerConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scannerConfig.d.ts","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,aAAa,EAAE,MAAM,GAAG;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,aAAa,GAAG,IAAI,CAiBxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA8BlE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAQ9D;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI;IAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAsB7E"}
+{"version":3,"file":"scannerConfig.d.ts","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,aAAa,EAAE,MAAM,GAAG;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,aAAa,GAAG,IAAI,CAmBxD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAgBlE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAgB9D;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI;IAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAqB7E"}

package/dist/utils/scannerConfig.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readScannerConfig = readScannerConfig;
-exports.getOutputDir = getOutputDir;
-exports.getLatestScanFile = getLatestScanFile;
+exports.getOutputFile = getOutputFile;
 exports.readScanData = readScanData;
 exports.getScanData = getScanData;
 const fs_1 = require("fs");
@@ -11,9 +10,9 @@ const path_1 = require("path");
  * Read and parse the react-scanner.config.js file
  */
 function readScannerConfig() {
-    const configPath = (0, path_1.join)(process.cwd(), 'react-scanner.config.js');
+    const configPath = (0, path_1.join)(process.cwd(), "react-scanner.config.js");
     if (!(0, fs_1.existsSync)(configPath)) {
-        console.error('react-scanner.config.js not found. Run `react-scanner-ui init` first.');
+        console.error("react-scanner.config.js not found. Run `react-scanner-ui init` first.");
         return null;
     }
     try {
@@ -23,65 +22,42 @@ function readScannerConfig() {
         return config;
     }
     catch (error) {
-        console.error('Failed to read react-scanner.config.js:', error);
+        console.error("Failed to read react-scanner.config.js:", error);
         return null;
     }
 }
 /**
- * Get the output directory from the scanner config
+ * Get the output file path from the scanner config
  */
-function getOutputDir(config) {
+function getOutputFile(config) {
     if (!config.processors || !Array.isArray(config.processors)) {
         return null;
     }
     for (const processor of config.processors) {
-        if (Array.isArray(processor) && processor[0] === 'raw-report' && processor[1]?.outputDir) {
-            return processor[1].outputDir;
+        if (Array.isArray(processor) &&
+            processor[0] === "count-components-and-props" &&
+            processor[1]?.outputTo) {
+            return processor[1].outputTo;
         }
     }
     return null;
 }
-/**
- * Get the latest scan file from the output directory
- */
-function getLatestScanFile(outputDir) {
-    const absoluteOutputDir = (0, path_1.resolve)(process.cwd(), outputDir);
-    if (!(0, fs_1.existsSync)(absoluteOutputDir)) {
-        console.error(`Scan output directory not found: ${absoluteOutputDir}`);
-        console.error('Run react-scanner first to generate scan data.');
-        return null;
-    }
-    try {
-        const files = (0, fs_1.readdirSync)(absoluteOutputDir)
-            .filter((file) => file.endsWith('.json'))
-            .map((file) => ({
-            name: file,
-            path: (0, path_1.join)(absoluteOutputDir, file),
-            mtime: (0, fs_1.statSync)((0, path_1.join)(absoluteOutputDir, file)).mtime,
-        }))
-            .sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
-        if (files.length === 0) {
-            console.error('No scan files found in output directory.');
-            console.error('Run react-scanner first to generate scan data.');
-            return null;
-        }
-        return files[0].path;
-    }
-    catch (error) {
-        console.error('Failed to read scan output directory:', error);
-        return null;
-    }
-}
 /**
  * Read and parse the scan data from a JSON file
  */
 function readScanData(filePath) {
+    const absolutePath = (0, path_1.resolve)(process.cwd(), filePath);
+    if (!(0, fs_1.existsSync)(absolutePath)) {
+        console.error(`Scan data file not found: ${absolutePath}`);
+        console.error("Run react-scanner first to generate scan data.");
+        return null;
+    }
     try {
-        const content = (0, fs_1.readFileSync)(filePath, 'utf-8');
+        const content = (0, fs_1.readFileSync)(absolutePath, "utf-8");
         return JSON.parse(content);
     }
     catch (error) {
-        console.error('Failed to read scan data:', error);
+        console.error("Failed to read scan data:", error);
         return null;
     }
 }
@@ -91,19 +67,18 @@ function readScanData(filePath) {
 function getScanData() {
     const config = readScannerConfig();
     if (!config) {
-        return { data: null, error: 'Could not read react-scanner.config.js' };
-    }
-    const outputDir = getOutputDir(config);
-    if (!outputDir) {
-        return { data: null, error: 'Could not find output directory in config. Make sure you have a raw-report processor configured.' };
+        return { data: null, error: "Could not read react-scanner.config.js" };
     }
-    const scanFile = getLatestScanFile(outputDir);
+    const scanFile = getOutputFile(config);
     if (!scanFile) {
-        return { data: null, error: 'No scan data found. Run react-scanner first.' };
+        return {
+            data: null,
+            error: "Could not find output file in config. Make sure you have a count-components-and-props processor configured with outputTo.",
+        };
     }
     const data = readScanData(scanFile);
     if (!data) {
-        return { data: null, error: 'Failed to parse scan data.' };
+        return { data: null, error: "Failed to parse scan data." };
     }
     return { data, error: null };
 }

package/dist/utils/scannerConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"scannerConfig.js","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scannerConfig.js","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scanner-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "dist/index.js",
   "bin": {
     "react-scanner-ui": "dist/index.js"
@@ -27,7 +27,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "commander": "^14.0.2",
     "detect-port": "^1.6.1",
-    "polka": "^0.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^5.4.19"

package/ui/components/App.css

@@ -0,0 +1,28 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+h1 {
+  color: var(--color-text);
+  margin: 0 0 24px 0;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.loading {
+  color: var(--color-text-secondary);
+  font-style: italic;
+  padding: 20px;
+  text-align: center;
+}
+
+.error {
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error-text);
+  padding: 16px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 20px;
+}

package/ui/components/App.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react";
+import { ComponentTable } from "./ComponentTable";
+import "./App.css";
+
+export interface ScanData {
+  [componentName: string]: {
+    instances: number;
+    props?: Record<string, number>;
+  };
+}
+
+interface ApiResponse {
+  data: ScanData | null;
+  error: string | null;
+}
+
+function App() {
+  const [data, setData] = useState<ScanData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/scan-data")
+      .then((res) => res.json())
+      .then((result: ApiResponse) => {
+        if (result.error) {
+          setError(result.error);
+        } else {
+          setData(result.data);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to fetch scan data: " + err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div className="container">
+      <h1>React Scanner UI</h1>
+      {loading && <div className="loading">Loading scan data...</div>}
+      {error && <div className="error">{error}</div>}
+      {!loading && !error && data && <ComponentTable data={data} />}
+      {!loading && !error && !data && (
+        <div className="error">No component data found.</div>
+      )}
+    </div>
+  );
+}
+
+export default App;

package/ui/components/ComponentTable.css

@@ -0,0 +1,149 @@
+.component-table {
+    width: 100%;
+    border-collapse: collapse;
+    background-color: var(--color-bg-card);
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.component-table th,
+.component-table td {
+    padding: 12px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.component-table th {
+    background-color: var(--color-bg-header);
+    font-weight: 600;
+    color: var(--color-text);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease;
+}
+
+.component-table th:hover {
+    background-color: #e9ecef;
+}
+
+.component-table th .sort-indicator {
+    margin-left: 5px;
+    color: var(--color-text-muted);
+    font-size: 0.75em;
+}
+
+.component-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.component-table tbody tr:hover td {
+    background-color: var(--color-bg-hover);
+}
+
+.component-table .count {
+    font-family: var(--font-mono);
+    font-weight: 500;
+}
+
+.component-table .total-row {
+    font-weight: 600;
+    background-color: var(--color-bg-total);
+}
+
+.component-table .total-row td {
+    border-top: 2px solid var(--color-border-strong);
+    border-bottom: none;
+}
+
+.component-table .total-row:hover td {
+    background-color: var(--color-bg-total);
+}
+
+/* Expandable rows */
+.clickable-row {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.clickable-row.has-props:hover td {
+    background-color: var(--color-bg-hover);
+}
+
+.clickable-row.expanded td {
+    background-color: var(--color-bg-hover);
+    border-bottom: none;
+}
+
+.expand-icon {
+    display: inline-block;
+    width: 16px;
+    margin-right: 8px;
+    font-size: 0.7em;
+    color: var(--color-text-muted);
+    transition: transform 0.2s ease;
+}
+
+.expand-icon.expanded {
+    transform: rotate(90deg);
+}
+
+/* Props row */
+.props-row td {
+    padding: 8px 16px 16px 16px;
+    background-color: var(--color-bg-hover);
+}
+
+.props-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.props-label {
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    padding-top: 4px;
+}
+
+.props-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.prop-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background-color: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: 16px;
+    font-size: 0.85em;
+    color: var(--color-text);
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+.prop-chip:hover {
+    background-color: var(--color-bg-header);
+    border-color: var(--color-border-strong);
+}
+
+.prop-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background-color: var(--color-primary, #4a90d9);
+    color: white;
+    border-radius: 10px;
+    font-size: 0.8em;
+    font-weight: 600;
+    font-family: var(--font-mono);
+}

package/ui/components/ComponentTable.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import type { ScanData } from "./App";
+import "./ComponentTable.css";
+
+interface ComponentTableProps {
+  data: ScanData;
+}
+
+type SortKey = "name" | "count";
+type SortDirection = "asc" | "desc";
+
+interface SortConfig {
+  key: SortKey;
+  direction: SortDirection;
+}
+
+export function ComponentTable({ data }: ComponentTableProps) {
+  const [sortConfig, setSortConfig] = useState<SortConfig>({
+    key: "count",
+    direction: "desc",
+  });
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+  const handleSort = (key: SortKey) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+  };
+
+  const getSortIndicator = (key: SortKey) => {
+    if (sortConfig.key !== key) return "";
+    return sortConfig.direction === "asc" ? "▲" : "▼";
+  };
+
+  const toggleRow = (name: string) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
+  // Transform data into array and sort
+  const components = Object.entries(data).map(([name, info]) => ({
+    name,
+    count: info.instances,
+    props: info.props || {},
+  }));
+
+  components.sort((a, b) => {
+    const aValue = sortConfig.key === "name" ? a.name.toLowerCase() : a.count;
+    const bValue = sortConfig.key === "name" ? b.name.toLowerCase() : b.count;
+
+    if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
+    if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+    return 0;
+  });
+
+  const totalCount = components.reduce((sum, c) => sum + c.count, 0);
+
+  if (components.length === 0) {
+    return <div className="empty-state">No components found in scan data.</div>;
+  }
+
+  return (
+    <div className="table-container">
+      <table className="component-table">
+        <thead>
+          <tr>
+            <th onClick={() => handleSort("name")}>
+              Component
+              <span className="sort-indicator">{getSortIndicator("name")}</span>
+            </th>
+            <th onClick={() => handleSort("count")}>
+              Usage Count
+              <span className="sort-indicator">
+                {getSortIndicator("count")}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {components.map((component) => {
+            const isExpanded = expandedRows.has(component.name);
+            const hasProps = Object.keys(component.props).length > 0;
+            const sortedProps = Object.entries(component.props).sort(
+              ([, a], [, b]) => b - a,
+            );
+
+            return (
+              <>
+                <tr
+                  key={component.name}
+                  onClick={() => toggleRow(component.name)}
+                  className={`clickable-row ${isExpanded ? "expanded" : ""} ${hasProps ? "has-props" : ""}`}
+                >
+                  <td className="component-name">
+                    <span
+                      className={`expand-icon ${isExpanded ? "expanded" : ""}`}
+                    >
+                      {hasProps ? "▶" : ""}
+                    </span>
+                    {component.name}
+                  </td>
+                  <td className="count">{component.count}</td>
+                </tr>
+                {isExpanded && hasProps && (
+                  <tr key={`${component.name}-props`} className="props-row">
+                    <td colSpan={2}>
+                      <div className="props-container">
+                        <span className="props-label">Props:</span>
+                        <div className="props-chips">
+                          {sortedProps.map(([propName, propCount]) => (
+                            <span key={propName} className="prop-chip">
+                              {propName}
+                              <span className="prop-count">{propCount}</span>
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </>
+            );
+          })}
+          <tr className="total-row">
+            <td>Total</td>
+            <td className="count">{totalCount}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/ui/index.css

@@ -0,0 +1,59 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-bg: #f5f5f5;
+  --color-bg-card: #ffffff;
+  --color-bg-header: #f8f9fa;
+  --color-bg-hover: #f8f9fa;
+  --color-bg-total: #f0f0f0;
+  --color-text: #333333;
+  --color-text-secondary: #666666;
+  --color-text-muted: #999999;
+  --color-border: #eeeeee;
+  --color-border-strong: #dddddd;
+  --color-error-bg: #fee2e2;
+  --color-error-border: #fecaca;
+  --color-error-text: #dc2626;
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+}
+
+body {
+  font-family: var(--font-sans);
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+  text-decoration: underline;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input, select, textarea {
+  font-family: inherit;
+}

package/ui/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Scanner UI</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>React Scanner UI</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./main.tsx"></script>
+    </body>
 </html>

package/ui/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./components/App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);