appclean 1.8.0 → 2.0.0

package/src/ui/client/utils/router.ts

@@ -0,0 +1,161 @@
+/**
+ * Simple Hash-Based Router for SPA
+ */
+
+export type RouteHandler = (params: Record<string, string>) => void;
+
+export interface Route {
+  path: string;
+  handler: RouteHandler;
+  title?: string;
+}
+
+export class Router {
+  private routes: Route[] = [];
+  private currentRoute: Route | null = null;
+  private onRouteChange: ((route: Route) => void) | null = null;
+
+  constructor() {
+    this.listenToHashChanges();
+  }
+
+  /**
+   * Register a route
+   */
+  register(path: string, handler: RouteHandler, title?: string): void {
+    this.routes.push({ path, handler, title });
+  }
+
+  /**
+   * Navigate to a route
+   */
+  navigate(path: string): void {
+    window.location.hash = `#/${path}`.replace('##', '#');
+  }
+
+  /**
+   * Get current route path
+   */
+  getCurrentPath(): string {
+    return window.location.hash.slice(2) || '';
+  }
+
+  /**
+   * Listen to hash changes and trigger handlers
+   */
+  private listenToHashChanges(): void {
+    window.addEventListener('hashchange', () => {
+      this.route();
+    });
+
+    // Initial route on load
+    this.route();
+  }
+
+  /**
+   * Route the current hash to a handler
+   */
+  private route(): void {
+    const path = this.getCurrentPath();
+    const route = this.matchRoute(path);
+
+    if (route) {
+      const params = this.extractParams(route.path, path);
+      this.currentRoute = route;
+
+      if (route.title) {
+        document.title = route.title;
+      }
+
+      try {
+        route.handler(params);
+      } catch (error) {
+        console.error('Route handler error:', error);
+      }
+
+      if (this.onRouteChange) {
+        this.onRouteChange(route);
+      }
+    } else {
+      console.warn(`No route found for: ${path}`);
+    }
+  }
+
+  /**
+   * Match a path to a registered route
+   */
+  private matchRoute(path: string): Route | null {
+    // Exact match first
+    const exactMatch = this.routes.find((r) => r.path === path || r.path === `/${path}`);
+    if (exactMatch) return exactMatch;
+
+    // Dynamic route match
+    for (const route of this.routes) {
+      if (this.pathMatches(route.path, path)) {
+        return route;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Check if a route path matches a given path
+   * Supports dynamic segments like /apps/:appName
+   */
+  private pathMatches(routePath: string, actualPath: string): boolean {
+    const routeParts = routePath.split('/').filter(Boolean);
+    const actualParts = actualPath.split('/').filter(Boolean);
+
+    if (routeParts.length !== actualParts.length) {
+      return false;
+    }
+
+    return routeParts.every((part, i) => {
+      return part.startsWith(':') || part === actualParts[i];
+    });
+  }
+
+  /**
+   * Extract params from a path
+   * Example: /apps/:appName with path /apps/myapp returns { appName: 'myapp' }
+   */
+  private extractParams(routePath: string, actualPath: string): Record<string, string> {
+    const params: Record<string, string> = {};
+    const routeParts = routePath.split('/').filter(Boolean);
+    const actualParts = actualPath.split('/').filter(Boolean);
+
+    routeParts.forEach((part, i) => {
+      if (part.startsWith(':')) {
+        const paramName = part.slice(1);
+        params[paramName] = decodeURIComponent(actualParts[i]);
+      }
+    });
+
+    return params;
+  }
+
+  /**
+   * Register a callback for route changes
+   */
+  onchange(callback: (route: Route) => void): void {
+    this.onRouteChange = callback;
+  }
+
+  /**
+   * Get all registered routes
+   */
+  getRoutes(): Route[] {
+    return this.routes;
+  }
+
+  /**
+   * Get current route
+   */
+  getCurrentRoute(): Route | null {
+    return this.currentRoute;
+  }
+}
+
+// Export singleton instance
+export const router = new Router();

package/src/ui/guiServer.ts

@@ -1,15 +1,27 @@
 /**
- * GUI Server for AppClean
- * Provides web-based GUI interface for macOS, Linux, and Windows
- * v1.2.0 Feature
+ * GUI Server for AppClean v2.0.0
+ * Modern SPA with API endpoints
  */
 
-import { createServer } from 'http';
-import { Logger } from '../utils/logger';
+import { createServer, IncomingMessage, ServerResponse } from 'http';
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { Logger } from '../utils/logger.js';
+import { sendJson, sendError, parseQueryParams } from './server/middleware/errorHandler.js';
+import { handleAppRoutes } from './server/routes/apps.js';
+import { handleDashboardRoutes } from './server/routes/dashboard.js';
+import { handleSettingsRoutes } from './server/routes/settings.js';
+
+// ES module compatibility: Define __dirname and __filename
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 export class GUIServer {
   private port: number = 3000;
   private server: any;
+  private spaHtml: string | null = null;
 
   constructor(port: number = 3000) {
     this.port = port;
@@ -21,20 +33,19 @@ export class GUIServer {
   async start(): Promise<void> {
     Logger.info(`Starting AppClean GUI server on port ${this.port}...`);
 
+    // Try to load SPA HTML (from compiled dist)
+    this.loadSPAHtml();
+
     this.server = createServer((req, res) => {
-      if (req.url === '/') {
-        res.writeHead(200, { 'Content-Type': 'text/html' });
-        res.end(this.getIndexHTML());
-      } else if (req.url?.startsWith('/api/')) {
-        this.handleAPIRequest(req, res);
-      } else {
-        res.writeHead(404, { 'Content-Type': 'text/plain' });
-        res.end('Not Found');
-      }
+      this.handleRequest(req, res);
     });
 
-    this.server.listen(this.port, () => {
-      Logger.success(`GUI server running at http://localhost:${this.port}`);
+    return new Promise((resolve) => {
+      this.server.listen(this.port, () => {
+        Logger.success(`✨ AppClean GUI running at http://localhost:${this.port}`);
+        Logger.info('Press Ctrl+C to stop the server');
+        resolve();
+      });
     });
   }
 
@@ -49,107 +60,197 @@ export class GUIServer {
   }
 
   /**
-   * Handle API requests
+   * Main request handler
    */
-  private handleAPIRequest(req: any, res: any): void {
-    // API endpoints for GUI
-    res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify({ message: 'API endpoint' }));
+  private async handleRequest(req: IncomingMessage, res: ServerResponse): Promise<void> {
+    const url = req.url || '/';
+    const method = req.method || 'GET';
+    const pathname = url.split('?')[0];
+
+    // Set CORS headers
+    this.setCORSHeaders(res);
+
+    // Handle preflight requests
+    if (method === 'OPTIONS') {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+
+    try {
+      // Route API requests
+      if (pathname.startsWith('/api/')) {
+        return this.handleAPIRequest(method, pathname, req, res);
+      }
+
+      // Serve static assets
+      if (pathname.startsWith('/static/')) {
+        return this.serveStaticAsset(pathname, res);
+      }
+
+      // Serve SPA for all other routes
+      this.serveSPA(res);
+    } catch (error) {
+      Logger.error(`Request error: ${(error as Error).message}`);
+      sendError(res, 'Internal server error', 500);
+    }
   }
 
   /**
-   * Get index HTML for GUI
+   * Handle API requests
    */
-  private getIndexHTML(): string {
-    return `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AppClean GUI - v1.2.0</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
+  private handleAPIRequest(
+    method: string,
+    pathname: string,
+    req: IncomingMessage,
+    res: ServerResponse
+  ): void {
+    // Try app routes
+    if (handleAppRoutes(method, pathname, req, res)) {
+      return;
     }
-    .container {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-      max-width: 800px;
-      width: 100%;
-      padding: 40px;
-    }
-    h1 {
-      color: #333;
-      margin-bottom: 10px;
+
+    // Try dashboard routes
+    if (handleDashboardRoutes(method, pathname, req, res)) {
+      return;
     }
-    .version {
-      color: #666;
-      font-size: 14px;
-      margin-bottom: 30px;
+
+    // Try settings routes
+    if (handleSettingsRoutes(method, pathname, req, res)) {
+      return;
     }
-    .feature-badge {
-      display: inline-block;
-      background: #667eea;
-      color: white;
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 20px;
+
+    // Unknown endpoint
+    sendError(res, 'API endpoint not found', 404);
+  }
+
+  /**
+   * Serve static assets (CSS, JS)
+   */
+  private serveStaticAsset(pathname: string, res: ServerResponse): void {
+    // Remove /static/ prefix
+    const relativePath = pathname.slice(8);
+
+    // Security: prevent directory traversal
+    if (relativePath.includes('..')) {
+      sendError(res, 'Access denied', 403);
+      return;
     }
-    p {
-      color: #666;
-      line-height: 1.6;
-      margin-bottom: 20px;
+
+    // Construct file path
+    const filePath = join(__dirname, 'client', relativePath);
+
+    // Check if file exists
+    if (!existsSync(filePath)) {
+      sendError(res, 'Asset not found', 404);
+      return;
     }
-    .coming-soon {
-      background: #f0f4ff;
-      border-left: 4px solid #667eea;
-      padding: 20px;
-      border-radius: 4px;
-      margin-top: 30px;
+
+    try {
+      const content = readFileSync(filePath);
+      const contentType = this.getContentType(filePath);
+
+      res.writeHead(200, {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=3600', // 1 hour
+      });
+      res.end(content);
+    } catch (error) {
+      Logger.warn(`Failed to serve asset ${pathname}: ${(error as Error).message}`);
+      sendError(res, 'Failed to load asset', 500);
     }
-  </style>
+  }
+
+  /**
+   * Serve SPA HTML
+   */
+  private serveSPA(res: ServerResponse): void {
+    if (!this.spaHtml) {
+      // Fallback: serve minimal HTML with error message
+      const fallbackHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AppClean</title>
 </head>
-<body>
-  <div class="container">
-    <h1>🎨 AppClean GUI</h1>
-    <p class="version">v1.2.0 - GUI Application Feature</p>
-    <span class="feature-badge">Coming Soon</span>
-
-    <p>
-      A beautiful, intuitive graphical user interface for AppClean, bringing the power of
-      intelligent app removal to users who prefer a visual interface.
-    </p>
-
-    <div class="coming-soon">
-      <h3>🚀 Features Coming in v1.2.0</h3>
-      <ul style="margin-left: 20px; margin-top: 10px;">
-        <li>✨ Modern, responsive GUI design</li>
-        <li>🖥️ Cross-platform support (macOS, Linux, Windows)</li>
-        <li>🔍 Visual app search and discovery</li>
-        <li>📊 Beautiful artifact visualization</li>
-        <li>🗑️ Drag-and-drop app removal</li>
-        <li>📈 Real-time removal progress</li>
-        <li>📋 Interactive report viewer</li>
-      </ul>
-    </div>
-  </div>
+<body style="font-family: system-ui; padding: 20px; text-align: center;">
+  <h1>⚠️ GUI Not Ready</h1>
+  <p>The SPA assets haven't been compiled yet.</p>
+  <p>Run <code>npm run build</code> to compile the TypeScript/CSS files.</p>
+  <p>For now, use the CLI: <code>appclean --help</code></p>
 </body>
-</html>
-    `;
+</html>`;
+
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(fallbackHtml);
+      return;
+    }
+
+    res.writeHead(200, {
+      'Content-Type': 'text/html',
+      'Cache-Control': 'no-cache',
+    });
+    res.end(this.spaHtml);
+  }
+
+  /**
+   * Load SPA HTML from compiled dist
+   */
+  private loadSPAHtml(): void {
+    const htmlPath = join(__dirname, 'client', 'index.html');
+
+    try {
+      if (existsSync(htmlPath)) {
+        this.spaHtml = readFileSync(htmlPath, 'utf-8');
+        Logger.debug('✓ Loaded SPA HTML');
+      } else {
+        Logger.warn(`⚠️  SPA HTML not found at ${htmlPath}`);
+        Logger.info('Make sure to run: npm run build');
+      }
+    } catch (error) {
+      Logger.warn(`Failed to load SPA HTML: ${(error as Error).message}`);
+    }
+  }
+
+  /**
+   * Determine content type from file extension
+   */
+  private getContentType(filePath: string): string {
+    const ext = filePath.toLowerCase().split('.').pop();
+
+    const typeMap: Record<string, string> = {
+      'js': 'application/javascript; charset=utf-8',
+      'css': 'text/css; charset=utf-8',
+      'html': 'text/html; charset=utf-8',
+      'json': 'application/json; charset=utf-8',
+      'svg': 'image/svg+xml',
+      'png': 'image/png',
+      'jpg': 'image/jpeg',
+      'jpeg': 'image/jpeg',
+      'gif': 'image/gif',
+      'ico': 'image/x-icon',
+      'webp': 'image/webp',
+      'woff': 'font/woff',
+      'woff2': 'font/woff2',
+      'ttf': 'font/ttf',
+      'eot': 'application/vnd.ms-fontobject',
+    };
+
+    return typeMap[ext || ''] || 'application/octet-stream';
+  }
+
+  /**
+   * Set CORS headers
+   */
+  private setCORSHeaders(res: ServerResponse): void {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    res.setHeader('Access-Control-Max-Age', '3600');
   }
 }
+
+// Export for use in CLI
+export default GUIServer;

package/src/ui/prompts.ts

@@ -1,6 +1,6 @@
 import inquirer from 'inquirer';
 import { InstalledApp, ArtifactPath } from '../types';
-import { Logger, formatBytes } from '../utils/logger';
+import { Logger, formatBytes } from '../utils/logger.js';
 import chalk from 'chalk';
 
 export async function promptSearchQuery(): Promise<string> {

package/src/ui/server/middleware/errorHandler.ts

@@ -0,0 +1,174 @@
+/**
+ * Error Handler Middleware
+ */
+
+import { IncomingMessage, ServerResponse } from 'http';
+
+export interface ApiError {
+  success: false;
+  error: string;
+  statusCode?: number;
+}
+
+export interface ApiSuccess<T> {
+  success: true;
+  data: T;
+}
+
+export type ApiResponse<T> = ApiSuccess<T> | ApiError;
+
+/**
+ * Send JSON response
+ */
+export function sendJson<T>(
+  res: ServerResponse,
+  data: T,
+  statusCode = 200
+): void {
+  res.statusCode = statusCode;
+  res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  const response: ApiSuccess<T> = {
+    success: true,
+    data,
+  };
+
+  res.end(JSON.stringify(response));
+}
+
+/**
+ * Send error response
+ */
+export function sendError(
+  res: ServerResponse,
+  message: string,
+  statusCode = 400
+): void {
+  res.statusCode = statusCode;
+  res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+
+  const response: ApiError = {
+    success: false,
+    error: message,
+    statusCode,
+  };
+
+  res.end(JSON.stringify(response));
+}
+
+/**
+ * Parse URL query parameters
+ */
+export function parseQueryParams(url: string): Record<string, string> {
+  const params: Record<string, string> = {};
+  const queryStart = url.indexOf('?');
+
+  if (queryStart === -1) return params;
+
+  const queryString = url.substring(queryStart + 1);
+  const pairs = queryString.split('&');
+
+  pairs.forEach((pair) => {
+    const [key, value] = pair.split('=');
+    if (key) {
+      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
+    }
+  });
+
+  return params;
+}
+
+/**
+ * Parse URL path and extract parameters
+ * Example: /api/apps/:appName with path /api/apps/myapp returns { appName: 'myapp' }
+ */
+export function extractPathParams(
+  pattern: string,
+  path: string
+): Record<string, string> | null {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const pathParts = path.split('/').filter(Boolean);
+
+  if (patternParts.length !== pathParts.length) {
+    return null;
+  }
+
+  const params: Record<string, string> = {};
+
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+
+    if (patternPart.startsWith(':')) {
+      const paramName = patternPart.slice(1);
+      params[paramName] = decodeURIComponent(pathParts[i]);
+    } else if (patternPart !== pathParts[i]) {
+      return null;
+    }
+  }
+
+  return params;
+}
+
+/**
+ * Parse request body as JSON
+ */
+export function parseBody(req: IncomingMessage): Promise<any> {
+  return new Promise((resolve, reject) => {
+    let data = '';
+
+    req.on('data', (chunk) => {
+      data += chunk;
+      // Prevent abuse: reject if body > 1MB
+      if (data.length > 1024 * 1024) {
+        reject(new Error('Request body too large'));
+      }
+    });
+
+    req.on('end', () => {
+      try {
+        resolve(data ? JSON.parse(data) : {});
+      } catch (error) {
+        reject(new Error('Invalid JSON'));
+      }
+    });
+
+    req.on('error', reject);
+  });
+}
+
+/**
+ * Match URL pattern
+ */
+export function matchPattern(pattern: string, url: string): boolean {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const urlParts = url.split('/').filter(Boolean);
+
+  if (patternParts.length !== urlParts.length) {
+    return false;
+  }
+
+  return patternParts.every((part, i) => {
+    return part.startsWith(':') || part === urlParts[i];
+  });
+}
+
+/**
+ * Async route handler wrapper
+ */
+export function asyncHandler(
+  handler: (req: IncomingMessage, res: ServerResponse, params?: any) => Promise<void>
+) {
+  return async (req: IncomingMessage, res: ServerResponse, params?: any) => {
+    try {
+      await handler(req, res, params);
+    } catch (error) {
+      console.error('Route handler error:', error);
+      const message = (error as Error).message || 'Internal server error';
+      sendError(res, message, 500);
+    }
+  };
+}