Add needlectl ui command for serving built React UI

- Add new UI management commands: start, stop, status, build, log
- Use Python's built-in HTTP server to serve static files (no Node.js required)
- Build UI during installation process
- Add UI access information to installation messages
- Support custom port configuration for UI server
- Include UI build directory in repository for easy deployment

Author: merfanian

install.sh

@@ -574,10 +574,37 @@ chmod +x start-needle.sh stop-needle.sh status-needle.sh
 
 print_success "Service management scripts created"
 
-### Step 9: Create logs directory
+### Step 9: Build UI for production
+print_status "Building UI for production..."
+
+if [ -d "ui" ]; then
+    cd ui
+    
+    # Check if node_modules exists
+    if [ ! -d "node_modules" ]; then
+        print_status "Installing UI dependencies..."
+        npm install
+    fi
+    
+    # Build the UI
+    print_status "Building React app..."
+    npm run build
+    
+    if [ $? -eq 0 ]; then
+        print_success "UI built successfully"
+    else
+        print_warning "UI build failed, but continuing with installation"
+    fi
+    
+    cd ..
+else
+    print_warning "UI directory not found, skipping UI build"
+fi
+
+### Step 10: Create logs directory
 mkdir -p logs
 
-### Step 10: Final message
+### Step 11: Final message
 print_success "🎉 Installation complete!"
 echo ""
 echo "📋 Next steps:"
@@ -590,10 +617,14 @@ echo "  - Start services: needlectl service start"
 echo "  - Stop services: needlectl service stop"
 echo "  - Check status: needlectl service status"
 echo "  - View logs: needlectl service log [backend|image-generator-hub|infrastructure]"
+echo "  - Start UI: needlectl ui start"
+echo "  - Stop UI: needlectl ui stop"
+echo "  - UI status: needlectl ui status"
 echo ""
 echo "🌐 Access Points:"
 echo "  - Backend API: http://localhost:8000"
 echo "  - Image Generator: http://localhost:8010"
+echo "  - Web UI: http://localhost:3000 (when started with 'needlectl ui start')"
 echo "  - API Documentation: http://localhost:8000/docs"
 echo ""
 echo "📊 Configuration:"

needlectl/cli/main.py

@@ -11,6 +11,7 @@
 from cli.generator import generator_app
 from cli.query import query_app
 from cli.service import service_app
+from cli.ui import ui_app
 from cli.version import VERSION as NEEDLECTL_VERSION
 from docker.docker_compose_manager import DockerComposeManager
 
@@ -21,6 +22,7 @@
 app.add_typer(directory_app, name="directory")
 app.add_typer(query_app, name="query")
 app.add_typer(generator_app, name="generator")
+app.add_typer(ui_app, name="ui")
 
 
 def get_backend_version() -> str:

needlectl/cli/ui.py

@@ -0,0 +1,204 @@
+# cli/ui.py
+
+import os
+import subprocess
+import typer
+from pathlib import Path
+from typing import Optional
+
+from cli.utils import print_result
+
+ui_app = typer.Typer(help="Manage Needle UI (Web Interface).")
+
+
+class UIManager:
+    """Manages the Needle web UI."""
+    
+    def __init__(self, needle_home: str):
+        self.needle_home = Path(needle_home)
+        self.ui_dir = self.needle_home / "ui"
+        self.build_dir = self.ui_dir / "build"
+        self.ui_pid_file = self.needle_home / "logs" / "ui.pid"
+        
+    def _is_ui_running(self) -> bool:
+        """Check if the UI server is running."""
+        if not self.ui_pid_file.exists():
+            return False
+        
+        try:
+            with open(self.ui_pid_file, 'r') as f:
+                pid = int(f.read().strip())
+            
+            # Check if process is still running
+            os.kill(pid, 0)
+            return True
+        except (OSError, ValueError, FileNotFoundError):
+            return False
+    
+    def _get_ui_pid(self) -> Optional[int]:
+        """Get the PID of the UI server if it's running."""
+        if not self._is_ui_running():
+            return None
+        
+        try:
+            with open(self.ui_pid_file, 'r') as f:
+                return int(f.read().strip())
+        except (OSError, ValueError, FileNotFoundError):
+            return None
+    
+    def start_ui(self, port: int = 3000):
+        """Start the UI server."""
+        if self._is_ui_running():
+            pid = self._get_ui_pid()
+            typer.echo(f"UI is already running (PID: {pid})")
+            typer.echo(f"🌐 Access the UI at: http://localhost:{port}")
+            return True
+        
+        # Check if build directory exists
+        if not self.build_dir.exists():
+            typer.echo("❌ UI build directory not found. Please build the UI first:")
+            typer.echo("   cd ui && npm install && npm run build")
+            return False
+        
+        # Ensure logs directory exists
+        self.ui_pid_file.parent.mkdir(parents=True, exist_ok=True)
+        
+        # Start UI server using Python's built-in HTTP server
+        log_file = self.needle_home / "logs" / "ui.log"
+        
+        # Use Python's built-in HTTP server to serve the static files
+        command = [
+            "python3", "-m", "http.server", str(port), "--directory", str(self.build_dir)
+        ]
+        
+        # Start server in background
+        with open(log_file, 'w') as log_f:
+            process = subprocess.Popen(
+                command,
+                stdout=log_f,
+                stderr=subprocess.STDOUT,
+                cwd=self.build_dir
+            )
+        
+        # Save PID
+        with open(self.ui_pid_file, 'w') as f:
+            f.write(str(process.pid))
+        
+        typer.echo(f"✅ UI started (PID: {process.pid})")
+        typer.echo(f"🌐 Access the UI at: http://localhost:{port}")
+        typer.echo(f"📝 Logs: {log_file}")
+        return True
+    
+    def stop_ui(self):
+        """Stop the UI server."""
+        if not self._is_ui_running():
+            typer.echo("UI is not running")
+            return True
+        
+        pid = self._get_ui_pid()
+        if pid:
+            try:
+                os.kill(pid, 15)  # SIGTERM
+                import time
+                time.sleep(2)
+                
+                # Check if still running
+                if self._is_ui_running():
+                    os.kill(pid, 9)  # SIGKILL
+                    time.sleep(1)
+                
+                typer.echo("✅ UI stopped")
+            except OSError:
+                typer.echo("❌ Error stopping UI")
+                return False
+            finally:
+                # Remove PID file
+                if self.ui_pid_file.exists():
+                    self.ui_pid_file.unlink()
+        
+        return True
+    
+    def get_status(self):
+        """Get UI status."""
+        is_running = self._is_ui_running()
+        pid = self._get_ui_pid() if is_running else None
+        
+        return {
+            "running": is_running,
+            "pid": pid,
+            "build_exists": self.build_dir.exists(),
+            "ui_directory": str(self.ui_dir),
+            "build_directory": str(self.build_dir)
+        }
+
+
+@ui_app.command("start")
+def ui_start(ctx: typer.Context, port: int = typer.Option(3000, "--port", "-p", help="Port to run the UI on")):
+    """Start the Needle web UI."""
+    needle_home = ctx.obj.get("needle_home", ".")
+    manager = UIManager(needle_home)
+    manager.start_ui(port)
+
+
+@ui_app.command("stop")
+def ui_stop(ctx: typer.Context):
+    """Stop the Needle web UI."""
+    needle_home = ctx.obj.get("needle_home", ".")
+    manager = UIManager(needle_home)
+    manager.stop_ui()
+
+
+@ui_app.command("status")
+def ui_status_cmd(ctx: typer.Context):
+    """Show UI status."""
+    needle_home = ctx.obj.get("needle_home", ".")
+    manager = UIManager(needle_home)
+    status = manager.get_status()
+    print_result(status, ctx.obj["output"])
+
+
+@ui_app.command("build")
+def ui_build(ctx: typer.Context):
+    """Build the UI for production."""
+    needle_home = ctx.obj.get("needle_home", ".")
+    ui_dir = Path(needle_home) / "ui"
+    
+    if not ui_dir.exists():
+        typer.echo("❌ UI directory not found. Please run this from the Needle project root.")
+        return
+    
+    typer.echo("🔨 Building UI for production...")
+    
+    # Check if node_modules exists
+    node_modules = ui_dir / "node_modules"
+    if not node_modules.exists():
+        typer.echo("📦 Installing dependencies...")
+        result = subprocess.run(["npm", "install"], cwd=ui_dir, capture_output=True, text=True)
+        if result.returncode != 0:
+            typer.echo(f"❌ Failed to install dependencies: {result.stderr}")
+            return
+    
+    # Build the UI
+    typer.echo("🏗️  Building React app...")
+    result = subprocess.run(["npm", "run", "build"], cwd=ui_dir, capture_output=True, text=True)
+    if result.returncode != 0:
+        typer.echo(f"❌ Build failed: {result.stderr}")
+        return
+    
+    typer.echo("✅ UI built successfully!")
+    typer.echo(f"📁 Build directory: {ui_dir / 'build'}")
+    typer.echo("🚀 You can now start the UI with: needlectl ui start")
+
+
+@ui_app.command("log")
+def ui_log_cmd(ctx: typer.Context):
+    """Show UI logs."""
+    needle_home = ctx.obj.get("needle_home", ".")
+    log_file = Path(needle_home) / "logs" / "ui.log"
+    
+    if log_file.exists():
+        typer.echo("📝 UI Logs:")
+        with open(log_file, 'r') as f:
+            typer.echo(f.read())
+    else:
+        typer.echo("📝 No UI logs found")

ui/build/asset-manifest.json

@@ -0,0 +1,13 @@
+{
+  "files": {
+    "main.css": "/static/css/main.2f1214e0.css",
+    "main.js": "/static/js/main.dfab9501.js",
+    "index.html": "/index.html",
+    "main.2f1214e0.css.map": "/static/css/main.2f1214e0.css.map",
+    "main.dfab9501.js.map": "/static/js/main.dfab9501.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.2f1214e0.css",
+    "static/js/main.dfab9501.js"
+  ]
+}

ui/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Needle UI - Image Search and Management Interface"/><title>Needle UI</title><script defer="defer" src="/static/js/main.dfab9501.js"></script><link href="/static/css/main.2f1214e0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>