ai-agent-router 0.1.0 → 0.1.1

package/.gemini/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,227 @@
+---
+name: ui-ux-pro-max
+description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
+---
+
+# UI/UX Pro Max - Design Intelligence
+
+Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, instruct the user to install it based on their OS.
+
+---
+
+## How to Use This Skill
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Search Relevant Domains
+
+Use `run_shell_command` to execute the `search.py` script multiple times to gather comprehensive information. Search until you have enough context.
+
+**Command Format:**
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>
+```
+
+**Recommended search order:**
+
+1. **Product** - Get style recommendations for product type
+2. **Style** - Get detailed style guide (colors, effects, frameworks)
+3. **Typography** - Get font pairings with Google Fonts imports
+4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+5. **Landing** - Get page structure (if landing page)
+6. **Chart** - Get chart recommendations (if dashboard/analytics)
+7. **UX** - Get best practices and anti-patterns
+8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+
+### Step 3: Stack Guidelines (Default: html-tailwind)
+
+If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`
+
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react` | State, hooks, performance, patterns |
+| `nextjs` | SSR, routing, images, API routes |
+| `vue` | Composition API, Pinia, Vue Router |
+| `svelte` | Runes, stores, SvelteKit |
+| `swiftui` | Views, State, Navigation, Animation |
+| `react-native` | Components, Navigation, Lists |
+| `flutter` | Widgets, State, Layout, Theming |
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+**AI should:**
+
+1.  Search product type:
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
+    ```
+
+2.  Search style (based on industry: beauty, elegant):
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
+    ```
+
+3.  Search typography:
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
+    ```
+
+4.  Search color palette:
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
+    ```
+
+5.  Search landing page structure:
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
+    ```
+
+6.  Search UX guidelines:
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
+    python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
+    ```
+
+7.  Search stack guidelines (default: html-tailwind):
+    ```bash
+    python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
+    ```
+
+**Then:** Synthesize all search results and implement the design.
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
+| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+
+### Interaction & Cursor
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
+| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
+| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons, Lucide, Simple Icons)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "ai-agent-router",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A unified API gateway for managing multiple AI model providers (Anthropic, OpenAI, Gemini, etc.)",
   "main": "dist/src/cli/index.js",
   "bin": {
     "aar": "./dist/src/cli/index.js"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 9527",
     "build": "next build && tsc",
     "postbuild": "node scripts/fix-esm-imports.js",
     "start": "node dist/src/cli/index.js start",

package/src/app/api/config/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: NextRequest) {
   try {
     // Initialize database on request (safer than module load)
     getDatabase();
-    
+
     const { searchParams } = new URL(request.url);
     const key = searchParams.get('key');
 
@@ -39,18 +39,20 @@ export async function POST(request: NextRequest) {
   try {
     // Initialize database on request
     getDatabase();
-    
+
     const body = await request.json();
     const { key, value } = body;
 
-    if (!key || value === undefined) {
+    if (!key) {
       return NextResponse.json(
-        { error: 'Key and value are required' },
+        { error: 'Key is required' },
         { status: 400 }
       );
     }
 
-    const config = setConfig(key, typeof value === 'string' ? value : JSON.stringify(value));
+    // Allow value to be null, undefined, or empty string (save as empty string)
+    const config = setConfig(key, (value === undefined || value === null) ? '' : typeof value === 'string' ? value : JSON.stringify(value));
+
     return NextResponse.json(config);
   } catch (error: any) {
     console.error('Config POST API error:', error);

package/src/app/page.tsx

@@ -93,7 +93,7 @@ export default function Home() {
       const res = await fetch('/api/config');
       const data = await res.json();
       setConfig({
-        port: data.port || '3000',
+        port: data.port || '1357',
         api_key: data.api_key || '',
       });
     } catch (error) {
@@ -124,17 +124,19 @@ export default function Home() {
 
   const handleStart = async () => {
     if (starting || serviceStatus.status === 'running') return;
-    
+
     setStarting(true);
     try {
-      const port = config.port ? parseInt(config.port, 10) : undefined;
+      // Use default port if not configured
+      const port = config.port ? parseInt(config.port, 10) : 1357;
+
       const res = await fetch('/api/service/start', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ port }),
       });
       const data = await res.json();
-      
+
       if (data.error) {
         showToast(`启动失败: ${data.error}`, 'error');
       } else {
@@ -382,10 +384,10 @@ export default function Home() {
                     onChange={(e) => setConfig({ ...config, port: e.target.value })}
                     autoComplete="off"
                     className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1"
-                    placeholder="3000"
+                    placeholder="1357"
                   />
                   <p className="mt-1 text-xs text-slate-400">
-                    提示：如果 Web UI 运行在 3000 端口，建议将服务端口设置为 3001 或其他端口以避免冲突
+                    提示：API 网关默认端口为 1357
                   </p>
                 </div>
 

package/src/cli/index.ts

@@ -1,60 +1,66 @@
 #!/usr/bin/env node
 
 import { Command } from 'commander';
-import { GatewayServer } from '../server/gateway-server';
-import { getDatabase } from '../db/database';
-import { getConfig, setConfig } from '../db/queries';
+import { spawn } from 'child_process';
+import path from 'path';
 
 const program = new Command();
 
 program
   .name('aar')
-  .description('AI Agent Router - Unified gateway for managing multiple AI model providers')
+  .description('AI Agent Router - Web UI for managing the API gateway')
   .version('0.1.0');
 
 program
   .command('start')
-  .description('Start the API gateway server (gateway only, no Web UI)')
-  .option('-p, --port <port>', 'Port to listen on', '3000')
-  .option('--hostname <hostname>', 'Hostname to listen on', 'localhost')
+  .description('Start the Web UI management interface')
+  .option('-p, --port <port>', 'Port for Web UI', '9527')
   .action(async (options) => {
-    const port = parseInt(options.port || '3000');
-    const hostname = options.hostname || 'localhost';
+    const port = parseInt(options.port || '9527');
 
-    // Initialize database to get config
-    try {
-      getDatabase();
-    } catch (error: any) {
-      console.error('Failed to initialize database:', error);
-      process.exit(1);
-    }
+    console.log(`Starting AI Agent Router Web UI`);
+    console.log(`  Port: ${port}`);
+    console.log(`  Access the UI at: http://localhost:${port}`);
+    console.log('');
 
-    // Get API key from config if configured
-    const apiKeyConfig = getConfig('api_key');
-    const apiKey = apiKeyConfig ? apiKeyConfig.value : undefined;
+    // Start Web UI using Next.js
+    const isDev = process.env.NODE_ENV !== 'production';
+    let uiProcess: ReturnType<typeof spawn>;
 
-    console.log(`Starting AI Agent Router Gateway Server`);
-    console.log(`  Port: ${port}`);
-    console.log(`  Hostname: ${hostname}`);
-    if (apiKey) {
-      console.log(`  API Key: Configured (authentication enabled)`);
+    if (isDev) {
+      // In development mode, use next dev
+      uiProcess = spawn('npm', ['run', 'dev', '--', '-p', port.toString()], {
+        cwd: process.cwd(),
+        stdio: ['ignore', 'inherit', 'inherit'],
+        env: { ...process.env, NEXT_TELEMETRY_DISABLED: '1', PORT: port.toString() },
+      });
     } else {
-      console.log(`  API Key: Not configured (authentication disabled)`);
+      // In production mode, start the built Next.js app
+      const serverPath = path.join(process.cwd(), 'node_modules', 'next', 'dist', 'bin', 'next');
+      uiProcess = spawn(process.execPath, [serverPath, 'start', '-p', port.toString()], {
+        cwd: process.cwd(),
+        stdio: ['ignore', 'inherit', 'inherit'],
+        env: { ...process.env, PORT: port.toString(), NODE_ENV: 'production' },
+      });
     }
 
-    // Create and start gateway server
-    const server = new GatewayServer({
-      port,
-      hostname,
-      apiKey,
+    // Handle UI process exit
+    uiProcess.on('exit', (code) => {
+      console.log(`Web UI process exited with code ${code}`);
+      process.exit(code || 0);
     });
 
-    try {
-      await server.start();
-    } catch (error: any) {
-      console.error(`Failed to start gateway server: ${error.message}`);
+    uiProcess.on('error', (error) => {
+      console.error(`Failed to start Web UI: ${error.message}`);
       process.exit(1);
-    }
+    });
+
+    // Keep the process alive
+    process.on('SIGINT', () => {
+      console.log('\nShutting down...');
+      uiProcess.kill('SIGTERM');
+      process.exit(0);
+    });
   });
 
 program

package/src/server/service-manager.ts

@@ -1,8 +1,8 @@
-import { spawn, ChildProcess, exec } from 'child_process';
+import { exec } from 'child_process';
 import { promisify } from 'util';
-import { getServiceStatus, setServiceStatus, updateServiceStatus, clearServiceStatus } from '@/db/queries';
-import path from 'path';
-import fs from 'fs';
+import { getServiceStatus, setServiceStatus, updateServiceStatus, getConfig } from '@/db/queries';
+import { getDatabase } from '@/db/database';
+import { GatewayServer } from './gateway-server';
 import net from 'net';
 
 const execAsync = promisify(exec);
@@ -16,11 +16,11 @@ export interface ServiceStatusResponse {
 }
 
 class ServiceManager {
-  private childProcess: ChildProcess | null = null;
+  private gatewayServer: GatewayServer | null = null;
   private isStarting: boolean = false;
 
   /**
-   * Check if a process with the given PID exists
+   * Check if a process with given PID exists
    */
   private async checkProcessExists(pid: number): Promise<boolean> {
     try {
@@ -39,12 +39,12 @@ class ServiceManager {
   private async checkPortAvailable(port: number): Promise<boolean> {
     return new Promise((resolve) => {
       const server = net.createServer();
-      
+
       server.listen(port, () => {
         server.once('close', () => resolve(true));
         server.close();
       });
-      
+
       server.on('error', () => {
         resolve(false);
       });
@@ -57,12 +57,12 @@ class ServiceManager {
   private async checkPortInUse(port: number): Promise<{ inUse: boolean; processInfo?: string }> {
     return new Promise((resolve) => {
       const server = net.createServer();
-      
+
       server.listen(port, () => {
         server.once('close', () => resolve({ inUse: false }));
         server.close();
       });
-      
+
       server.on('error', (err: any) => {
         if (err.code === 'EADDRINUSE') {
           // Try to get process info
@@ -90,7 +90,7 @@ class ServiceManager {
    */
   async getStatus(): Promise<ServiceStatusResponse> {
     const dbStatus = getServiceStatus();
-    
+
     if (!dbStatus) {
       return { status: 'stopped' };
     }
@@ -114,7 +114,7 @@ class ServiceManager {
   }
 
   /**
-   * Start the gateway service
+   * Start gateway service
    */
   async start(port: number): Promise<ServiceStatusResponse> {
     // Prevent concurrent starts
@@ -128,138 +128,42 @@ class ServiceManager {
       return { status: 'running', error: 'Service is already running', port: currentStatus.port, pid: currentStatus.pid };
     }
 
-    // Check port availability with more details
+    // Check port availability
     const portCheck = await this.checkPortInUse(port);
     if (portCheck.inUse) {
-      // In development, if port 3000 is in use, suggest using a different port
-      const isDev = process.env.NODE_ENV !== 'production';
-      if (isDev && port === 3000) {
-        return { 
-          status: 'stopped', 
-          error: `Port 3000 is already in use (likely by the development server). Please configure a different port (e.g., 3001) in the settings.` 
-        };
-      }
       return { status: 'stopped', error: portCheck.processInfo || `Port ${port} is already in use` };
     }
 
     this.isStarting = true;
 
     try {
-      const cliPath = path.join(process.cwd(), 'dist', 'src', 'cli', 'index.js');
-      const tsCliPath = path.join(process.cwd(), 'src', 'cli', 'index.ts');
-      
-      let child: ChildProcess;
-
-      // Create isolated environment for child process
-      // Remove Next.js dev server specific env vars to avoid conflicts
-      const childEnv = { ...process.env };
-      // Remove PORT if it might conflict
-      if (childEnv.PORT && parseInt(childEnv.PORT) === 3000) {
-        delete childEnv.PORT;
-      }
-      // Remove Next.js specific env vars that might cause conflicts
-      delete childEnv.NEXT_TELEMETRY_DISABLED;
-      // Gateway server doesn't need Next.js, so we can use any NODE_ENV
-      childEnv.NODE_ENV = process.env.NODE_ENV || 'production';
-
-      // Check if compiled code exists
-      if (fs.existsSync(cliPath)) {
-        // Use compiled JavaScript
-        child = spawn(process.execPath, [cliPath, 'start', '-p', port.toString()], {
-          detached: false, // Keep attached for proper tracking
-          stdio: ['ignore', 'pipe', 'pipe'],
-          cwd: process.cwd(),
-          env: childEnv,
-        });
-      } else if (fs.existsSync(tsCliPath)) {
-        // In development, try to use tsx via npx
-        // Note: tsx should be installed as dev dependency for this to work
-        child = spawn('npx', ['--yes', 'tsx', tsCliPath, 'start', '-p', port.toString()], {
-          detached: false, // Keep attached for proper tracking
-          stdio: ['ignore', 'pipe', 'pipe'],
-          cwd: process.cwd(),
-          env: childEnv,
-          shell: true, // Use shell to resolve npx
-        });
-      } else {
+      // Initialize database
+      try {
+        getDatabase();
+      } catch (error: any) {
+        console.error('Failed to initialize database:', error);
         this.isStarting = false;
-        return { 
-          status: 'stopped', 
-          error: 'CLI not found. Please run "npm run build" first, or ensure src/cli/index.ts exists.' 
-        };
+        return { status: 'stopped', error: 'Failed to initialize database' };
       }
 
-      this.childProcess = child;
-
-      // Collect error output for better error messages
-      let errorOutput = '';
-      let hasExited = false;
-      let exitCode: number | null = null;
-
-      // Handle process output (optional, for debugging)
-      // Use setImmediate to avoid blocking the event loop
-      child.stdout?.on('data', (data) => {
-        setImmediate(() => {
-          const output = data.toString();
-          // Only log if it's not empty and not just whitespace
-          if (output.trim()) {
-            console.log(`[Gateway Service] ${output}`);
-          }
-        });
-      });
-
-      child.stderr?.on('data', (data) => {
-        setImmediate(() => {
-          const errorText = data.toString();
-          console.error(`[Gateway Service Error] ${errorText}`);
-          errorOutput += errorText;
-        });
-      });
+      // Get API key from config if configured
+      const apiKeyConfig = getConfig('api_key');
+      const apiKey = apiKeyConfig ? apiKeyConfig.value : undefined;
 
-      // Handle process exit
-      child.on('exit', (code, signal) => {
-        hasExited = true;
-        exitCode = code;
-        console.log(`[Gateway Service] Process exited with code ${code}, signal ${signal}`);
-        this.childProcess = null;
-        this.isStarting = false;
-        
-        // Update database status
-        updateServiceStatus({ status: 'stopped', pid: null });
+      // Create and start gateway server directly in-process
+      const server = new GatewayServer({
+        port,
+        hostname: 'localhost',
+        apiKey,
       });
 
-      // Wait a bit to see if process starts successfully
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-
-      // Check if process exited during startup
-      if (hasExited || child.killed || child.exitCode !== null) {
-        this.isStarting = false;
-        this.childProcess = null;
-        
-        // Extract meaningful error message
-        let errorMessage = 'Service failed to start';
-        if (errorOutput) {
-          // Try to extract the main error message
-          const errorMatch = errorOutput.match(/Error: ([^\n]+)/);
-          if (errorMatch) {
-            errorMessage = errorMatch[1];
-          } else if (errorOutput.includes('production build')) {
-            errorMessage = 'Production build not found. Please run "npm run build" first, or use development mode.';
-          } else {
-            // Use first meaningful line of error
-            const lines = errorOutput.split('\n').filter(line => line.trim());
-            if (lines.length > 0) {
-              errorMessage = lines[0].substring(0, 200); // Limit length
-            }
-          }
-        }
-        
-        return { status: 'stopped', error: errorMessage };
-      }
+      await server.start();
+      this.gatewayServer = server;
 
-      // Save status to database
-      const pid = child.pid || null;
+      // Use current process PID
+      const pid = process.pid;
       const startedAt = new Date().toISOString();
+
       setServiceStatus({
         status: 'running',
         port,
@@ -269,6 +173,8 @@ class ServiceManager {
 
       this.isStarting = false;
 
+      console.log(`Gateway server started on port ${port}`);
+
       return {
         status: 'running',
         port,
@@ -277,7 +183,8 @@ class ServiceManager {
       };
     } catch (error: any) {
       this.isStarting = false;
-      this.childProcess = null;
+      this.gatewayServer = null;
+      console.error(`Failed to start gateway service: ${error.message}`);
       return { status: 'stopped', error: error.message || 'Failed to start service' };
     }
   }
@@ -287,18 +194,18 @@ class ServiceManager {
    */
   async stop(): Promise<ServiceStatusResponse> {
     const currentStatus = await this.getStatus();
-    
+
     if (currentStatus.status === 'stopped') {
       return { status: 'stopped' };
     }
 
     try {
-      // If we have a reference to the child process, kill it
-      if (this.childProcess) {
-        this.childProcess.kill('SIGTERM');
-        this.childProcess = null;
-      } else if (currentStatus.pid) {
-        // Try to kill by PID
+      // If we have a reference to gateway server, stop it
+      if (this.gatewayServer) {
+        await this.gatewayServer.stop();
+        this.gatewayServer = null;
+      } else if (currentStatus.pid && currentStatus.pid !== process.pid) {
+        // Only try to kill by PID if it's a different process
         try {
           process.kill(currentStatus.pid, 'SIGTERM');
         } catch (error) {