feat(ai-agent): complete modular AI agent system for HF Spaces

- Implemented microservices architecture with clear separation of concerns
- Services: Gemini (AI), GitHub (API), Project (analysis)
- Agents: Scanner (periodic scans), Chat (multi-turn conversations)
- Periodic project scanner (1hr interval, configurable)
- Chat interface with Gemini API and command support
- GitHub integration (create issues, PRs, trigger workflows)
- Responsive web UI with dark mode support
- Task runner with retry logic and priority queue
- Comprehensive logging and error handling
- Docker configured for HF Spaces (port 7860)
- Full documentation: README, INSTALLATION, ARCHITECTURE guides

Features:
Hourly automated issue scanning with AI analysis
Real-time chat with project context awareness
GitHub Actions workflow integration
Auto-create issues from scan results
Code analysis with structured recommendations
Project structure exploration
Settings and configuration UI

Architecture:
- Modular services (Gemini, GitHub, Project)
- Agent orchestration layer
- RESTful API with Express
- Modern vanilla JS frontend
- Task queue with retries
- Session management for chats
- Caching for performance

Deployment:
- Ready for HF Spaces
- Environment-based configuration
- Health check endpoint
- Graceful shutdown handling

public/.env.example

@@ -0,0 +1,83 @@
+# .env Template
+# Copy this to .env and fill in your actual values
+# NEVER commit the .env file with real tokens!
+
+# =============================================================================
+# API KEYS & AUTHENTICATION
+# =============================================================================
+
+# Google Generative AI (Gemini)
+# Get from: https://makersuite.google.com/app/apikey
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# GitHub Personal Access Token
+# Get from: https://github.com/settings/tokens
+# Required scopes: repo, issues, actions
+GITHUB_TOKEN=your_github_token_here
+
+# Hugging Face Token
+# Get from: https://huggingface.co/settings/tokens
+HF_TOKEN=your_huggingface_token_here
+
+# =============================================================================
+# GITHUB CONFIGURATION
+# =============================================================================
+
+# Repository details
+GITHUB_REPO=NLarchive/my-webapp-hf
+GITHUB_OWNER=NLarchive
+GITHUB_BRANCH=main
+
+# =============================================================================
+# HUGGING FACE CONFIGURATION
+# =============================================================================
+
+# HF Space details
+HF_SPACE_NAME=my-webapp-hf
+HF_SPACE_URL=https://huggingface.co/spaces/NLarchive/my-webapp-hf
+
+# =============================================================================
+# SCANNER CONFIGURATION
+# =============================================================================
+
+# Scan interval in milliseconds (default: 1 hour = 3600000ms)
+# Examples:
+#   300000 = 5 minutes
+#   900000 = 15 minutes
+#   1800000 = 30 minutes
+#   3600000 = 1 hour
+#   86400000 = 1 day
+SCAN_INTERVAL=3600000
+
+# Enable automatic fixing of detected issues
+# When true, scanner will attempt to fix issues and create PRs
+ENABLE_AUTO_FIX=true
+
+# Automatically commit fixes to GitHub
+# When true, fixes will be committed without review
+# When false, fixes are created as draft PRs for review
+AUTO_COMMIT=false
+
+# =============================================================================
+# SERVER CONFIGURATION
+# =============================================================================
+
+# Server port (HF Spaces uses port 7860)
+PORT=3000
+
+# Environment: development, production
+NODE_ENV=production
+
+# Logging level: error, warn, info, debug
+LOG_LEVEL=info
+
+# Enable debug mode (verbose logging)
+DEBUG=false
+
+# =============================================================================
+# OPTIONAL: Task Scheduling
+# =============================================================================
+
+# Uncomment to customize task behavior
+# TASK_TIMEOUT=30000
+# TASK_RETRIES=3

public/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.env
+.env.local
+.env.*.local
+*.log
+.DS_Store
+dist/
+build/
+.vscode/
+.idea/
+*.swp
+*.swo
+*~

public/ARCHITECTURE.md

@@ -0,0 +1,455 @@
+# AI Agent Architecture & Microservices Design
+
+## Overview
+
+The AI Agent is built as a modular microservices system with clear separation of concerns. Each component is independently testable and can be extended without affecting others.
+
+## Core Components
+
+### 1. Services Layer (`src/services/`)
+
+Services are stateless, reusable modules that handle specific functionality.
+
+#### **Gemini Service** (`gemini.js`)
+- Purpose: Handle all Google Generative AI interactions
+- Methods:
+  - `generate(prompt, options)` - Single-turn generation
+  - `chat(message)` - Multi-turn conversation
+  - `analyzeCode(code, language)` - Code analysis with structured output
+  - `generateCommitMessage(changes)` - Create semantic commit messages
+  - `clearHistory()` - Reset conversation state
+
+Example:
+```javascript
+import { geminiService } from './services/gemini.js';
+
+const analysis = await geminiService.analyzeCode(code, 'javascript');
+const response = await geminiService.chat("What does this function do?");
+```
+
+#### **GitHub Service** (`github.js`)
+- Purpose: GitHub API integration
+- Methods:
+  - `createIssue(issue)` - Create GitHub issue
+  - `createPullRequest(pr)` - Create PR
+  - `getFileContents(path)` - Read file from repo
+  - `listFiles(path)` - List directory contents
+  - `triggerWorkflow(workflowId, inputs)` - Trigger GitHub Actions
+  - `getRepoInfo()` - Repository metadata
+  - `listIssues(state)` - Get open/closed issues
+  - `addIssueComment(issueNumber, body)` - Comment on issue
+
+Example:
+```javascript
+import { githubService } from './services/github.js';
+
+const issue = await githubService.createIssue({
+  title: "Bug: Login fails",
+  body: "Steps to reproduce...",
+  labels: ['bug', 'critical']
+});
+```
+
+#### **Project Service** (`project.js`)
+- Purpose: Project analysis and exploration
+- Methods:
+  - `getProjectStructure()` - Files and directories
+  - `getFileContent(path)` - Read specific file
+  - `scanForIssues()` - Automated issue detection
+  - `getReadme()` - README.md content
+  - `getDockerfile()` - Dockerfile content
+  - `getSourceFiles()` - List programming files
+
+Example:
+```javascript
+import { projectService } from './services/project.js';
+
+const issues = await projectService.scanForIssues();
+const readme = await projectService.getReadme();
+```
+
+### 2. Agents Layer (`src/agents/`)
+
+Agents orchestrate multiple services to accomplish complex tasks.
+
+#### **Scanner Agent** (`scanner.js`)
+- Purpose: Periodic project analysis and remediation
+- Workflow:
+  1. Get project structure
+  2. Scan for issues
+  3. Analyze critical files with AI
+  4. Generate recommendations
+  5. Create GitHub issues if enabled
+
+Key Methods:
+```javascript
+scannerAgent.startPeriodicScanning()  // Begin hourly scans
+scannerAgent.performScan()            // One-time full scan
+scannerAgent.getLastScan()            // Get last report
+```
+
+Example Flow:
+```
+[Scan Triggered]
+  ↓
+[Get Project Structure] → GitHub Service
+  ↓
+[Detect Issues] → Project Service
+  ↓
+[AI Analysis] → Gemini Service
+  ↓
+[Generate Recommendations] → Gemini Service
+  ↓
+[Create Issue] → GitHub Service (if enabled)
+```
+
+#### **Chat Agent** (`chat.js`)
+- Purpose: Multi-turn conversation management
+- Workflow:
+  1. Start conversation session
+  2. Maintain context about project
+  3. Process commands or queries
+  4. Generate AI responses
+  5. Track conversation history
+
+Key Methods:
+```javascript
+chatAgent.startConversation(sessionId)    // Initialize session
+chatAgent.processMessage(sessionId, msg)  // Handle user input
+chatAgent.getHistory(sessionId)           // Get conversation
+chatAgent.clearConversation(sessionId)    // End session
+```
+
+Commands:
+```
+/scan      → Trigger project scan
+/status    → Get repository status
+/issues    → List open issues
+/help      → Show available commands
+```
+
+### 3. API Routes (`src/api/`)
+
+Express routes that expose services and agents via HTTP.
+
+#### **Chat Routes** (`chat.js`)
+```
+POST   /api/chat/start                      # Initialize session
+POST   /api/chat/message                    # Send message
+GET    /api/chat/history/:sessionId         # Get conversation
+DELETE /api/chat/clear/:sessionId           # Clear conversation
+GET    /api/chat/stats                      # Chat statistics
+```
+
+#### **Scanner Routes** (`scanner.js`)
+```
+POST /api/scanner/scan                      # Manual scan
+GET  /api/scanner/last-report               # Last report
+GET  /api/scanner/issues                    # Current issues
+POST /api/scanner/start-continuous          # Start auto-scanning
+POST /api/scanner/stop-continuous           # Stop auto-scanning
+```
+
+#### **Project Routes** (`project.js`)
+```
+GET /api/project/structure                  # Project layout
+GET /api/project/file?path=...             # File content
+GET /api/project/readme                     # README.md
+GET /api/project/dockerfile                 # Dockerfile
+GET /api/project/source-files               # Source files list
+```
+
+### 4. Configuration & Utilities
+
+#### **Environment Config** (`config/env.js`)
+- Centralized configuration management
+- Validates required variables at startup
+- Type-safe environment access
+
+```javascript
+import { config, validateConfig } from './config/env.js';
+
+console.log(config.GEMINI_API_KEY);
+validateConfig();  // Throws if missing required vars
+```
+
+#### **Logger** (`config/logger.js`)
+- Structured logging with levels
+- Timestamp and context support
+- Configurable verbosity
+
+```javascript
+import { logger } from './config/logger.js';
+
+logger.info('Something happened', { details: {...} });
+logger.error('Failed', { error: err.message });
+logger.debug('Debug info', { data });
+```
+
+#### **Task Runner** (`utils/taskRunner.js`)
+- Task queue execution with retry logic
+- Priority-based ordering
+- Timeout management
+- Execution history
+
+```javascript
+import { taskRunner } from './utils/taskRunner.js';
+
+taskRunner.addTask({
+  id: 'analyze-code',
+  name: 'Analyze codebase',
+  priority: 10,
+  execute: async () => { /* task code */ },
+  retries: 3,
+  timeout: 30000
+});
+
+const results = await taskRunner.runAll();
+```
+
+## Data Flow Diagrams
+
+### Chat Flow
+```
+User Input
+    ↓
+[Chat API] POST /api/chat/message
+    ↓
+[Chat Agent] processMessage()
+    ↓
+Load Project Context? → [Project Service] getProjectStructure()
+    ↓
+Is Command? (/scan, /status, etc)
+    ├─ Yes → Execute specific handler
+    │         └─ May call GitHub Service
+    │
+    └─ No → [Gemini Service] chat()
+            └─ Multi-turn conversation
+    ↓
+[Chat Agent] Store in history
+    ↓
+Return Response to Client
+    ↓
+Update Chat UI
+```
+
+### Scanner Flow
+```
+[Timer] Every SCAN_INTERVAL
+    ↓
+[Scanner Agent] performScan()
+    ↓
+[Project Service] getProjectStructure()
+    ↓
+[Project Service] scanForIssues()
+    ↓
+[Gemini Service] analyzeCode() (per file)
+    ↓
+[Gemini Service] generateRecommendations()
+    ↓
+[Create Report]
+    ↓
+Issues Found + AUTO_FIX enabled?
+    ├─ Yes → [GitHub Service] createIssue()
+    └─ No  → [Store Report]
+    ↓
+Return Report to Client
+```
+
+### Request Flow
+```
+Browser Client
+    ↓
+JavaScript fetch() → API Request
+    ↓
+[Express Router]
+    ├─ Parse request
+    ├─ Call service/agent
+    ├─ Handle errors
+    └─ Return JSON response
+    ↓
+Client Updates UI
+```
+
+## Extension Points
+
+### Adding a New Scanner
+
+1. Create analyzer in `src/agents/scanner.js`:
+
+```javascript
+async analyzeProject() {
+  const sourceFiles = await projectService.getSourceFiles();
+  const analysis = {
+    files: [],
+    overallHealth: 'unknown',
+  };
+
+  for (const file of sourceFiles.slice(0, 5)) {
+    try {
+      const content = await projectService.getFileContent(file.path);
+      // YOUR CUSTOM ANALYSIS HERE
+      const customAnalysis = await your_analysis(content);
+      analysis.files.push({
+        name: file.name,
+        analysis: customAnalysis,
+      });
+    } catch (e) {
+      logger.warn(`Failed to analyze ${file.name}`);
+    }
+  }
+
+  return analysis;
+}
+```
+
+2. Results appear in scan reports and recommendations.
+
+### Adding a New Command
+
+1. Extend `src/agents/chat.js`:
+
+```javascript
+async handleMessage(message, context) {
+  if (message.startsWith('/mycommand')) {
+    return this.handleMyCommand(context);
+  }
+  // ... existing code
+}
+
+async handleMyCommand(context) {
+  // Your command logic
+  return "Command result";
+}
+```
+
+2. Add to `/help` text:
+
+```javascript
+getHelpText() {
+  return `
+    /mycommand - Description of what it does
+    ...existing commands...
+  `;
+}
+```
+
+### Adding a New API Endpoint
+
+1. Create route in `src/api/newfeature.js`:
+
+```javascript
+import express from 'express';
+import { someService } from '../services/some.js';
+
+const router = express.Router();
+
+router.get('/endpoint', async (req, res) => {
+  try {
+    const result = await someService.doSomething();
+    res.json({ success: true, result });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;
+```
+
+2. Mount in `src/server.js`:
+
+```javascript
+import newFeatureRoutes from './api/newfeature.js';
+
+app.use('/api/newfeature', newFeatureRoutes);
+```
+
+## Performance Considerations
+
+### Caching
+- Project structure: 5-minute cache
+- File contents: On-demand (no cache)
+- API responses: Browser cache (Cache-Control headers)
+
+### Optimization
+- Analyze only first 5 source files
+- Limit file size for AI analysis
+- Use pagination for large lists
+- Compress API responses
+
+### Scaling
+- Separate scanner into background job
+- Use message queue for long-running tasks
+- Cache expensive computations
+- Add rate limiting for API endpoints
+
+## Testing
+
+Each component can be tested independently:
+
+```javascript
+// Test Gemini Service
+const response = await geminiService.analyzeCode(code, 'javascript');
+assert(response.issues !== undefined);
+
+// Test GitHub Service
+const issue = await githubService.createIssue({
+  title: 'Test',
+  body: 'Test body'
+});
+assert(issue.number !== undefined);
+
+// Test Project Service
+const structure = await projectService.getProjectStructure();
+assert(structure.files.length > 0);
+
+// Test Chat Agent
+const session = chatAgent.startConversation('test-session');
+assert(session.sessionId === 'test-session');
+```
+
+## Deployment Architecture
+
+```
+┌─────────────────────────────────────────┐
+│      Hugging Face Space (Docker)        │
+├─────────────────────────────────────────┤
+│  ┌───────────────────────────────────┐  │
+│  │    Express Server (Port 7860)     │  │
+│  ├───────────────────────────────────┤  │
+│  │  Static Files (HTML/CSS/JS)       │  │
+│  ├───────────────────────────────────┤  │
+│  │  API Routes                       │  │
+│  │  ├─ /api/chat                     │  │
+│  │  ├─ /api/scanner                  │  │
+│  │  └─ /api/project                  │  │
+│  ├───────────────────────────────────┤  │
+│  │  Agents                           │  │
+│  │  ├─ Chat Agent (sessions)         │  │
+│  │  └─ Scanner Agent (periodic)      │  │
+│  ├───────────────────────────────────┤  │
+│  │  Services                         │  │
+│  │  ├─ Gemini Service                │  │
+│  │  ├─ GitHub Service                │  │
+│  │  └─ Project Service               │  │
+│  └───────────────────────────────────┘  │
+└─────────────────────────────────────────┘
+         │
+         ├─→ [Google Gemini API]
+         ├─→ [GitHub API]
+         └─→ [Hugging Face API]
+```
+
+## Security Best Practices
+
+1. **Environment Variables**: Never log or expose API keys
+2. **Input Validation**: Sanitize all user inputs
+3. **Error Handling**: Don't expose stack traces in production
+4. **Rate Limiting**: Add per-IP or per-session limits
+5. **Token Rotation**: Regularly refresh API tokens
+6. **Logging**: Log security-relevant events
+
+---
+
+**Architecture Version**: 1.0.0
+**Last Updated**: November 17, 2024

public/Dockerfile

@@ -0,0 +1,29 @@
+# Dockerfile for HF Spaces Deployment
+
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies (production only)
+RUN npm ci --omit=dev
+
+# Copy application code
+COPY . .
+
+# Expose HF Spaces port (7860)
+EXPOSE 7860
+
+# Set production environment
+ENV NODE_ENV=production
+ENV PORT=7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:7860/health', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})"
+
+# Start application
+CMD ["npm", "start"]

public/INSTALLATION.md

@@ -0,0 +1,367 @@
+# AI Agent - Installation & Deployment Guide
+
+## Table of Contents
+1. [Local Development](#local-development)
+2. [Environment Setup](#environment-setup)
+3. [HF Spaces Deployment](#hf-spaces-deployment)
+4. [API Configuration](#api-configuration)
+5. [Troubleshooting](#troubleshooting)
+
+## Local Development
+
+### Prerequisites
+- Node.js 18 or higher
+- npm or yarn
+- Git
+- Text editor (VS Code recommended)
+
+### Step 1: Install Dependencies
+
+```bash
+cd public
+npm install
+```
+
+This installs:
+- Express.js (web server)
+- @google/generative-ai (Gemini SDK)
+- axios (HTTP client)
+- cors & body-parser (middleware)
+- dotenv (environment management)
+
+### Step 2: Configure Environment
+
+Copy `.env.example` to `.env`:
+
+```bash
+cp .env.example .env
+```
+
+Edit `.env` with your API keys:
+
+```env
+GEMINI_API_KEY=sk-...
+GITHUB_TOKEN=ghp_...
+HF_TOKEN=hf_...
+GITHUB_REPO=YourUsername/repo-name
+GITHUB_OWNER=YourUsername
+```
+
+### Step 3: Start Development Server
+
+```bash
+npm run dev
+```
+
+Output:
+```
+[INFO] ... - Server started on port 3000
+```
+
+Visit: http://localhost:3000
+
+### Step 4: Test the App
+
+1. **Chat**: Open "💬 Chat" tab and try `/help` command
+2. **Scanner**: Click "🔍 Run Manual Scan"
+3. **Project**: View "📁 Project" structure
+
+## Environment Setup
+
+### Getting API Keys
+
+#### 1. Google Gemini API Key
+```
+1. Go: https://makersuite.google.com/app/apikey
+2. Click "Create API key"
+3. Copy the key
+4. Paste into .env GEMINI_API_KEY=
+```
+
+#### 2. GitHub Personal Access Token
+```
+1. Go: https://github.com/settings/tokens
+2. Click "Generate new token" → "Generate new token (classic)"
+3. Name: "ai-agent-hf"
+4. Select scopes:
+   ✓ repo (full access)
+   ✓ workflow (update GitHub Actions)
+   ✓ gist (optional)
+5. Generate and copy
+6. Paste into .env GITHUB_TOKEN=
+```
+
+#### 3. Hugging Face Token
+```
+1. Go: https://huggingface.co/settings/tokens
+2. Create new token
+3. Name: "ai-agent"
+4. Type: "read"
+5. Copy token
+6. Paste into .env HF_TOKEN=
+```
+
+### Environment Variables Reference
+
+| Variable | Required | Example | Description |
+|----------|----------|---------|-------------|
+| GEMINI_API_KEY | ✓ | sk-... | Google Gemini API key |
+| GITHUB_TOKEN | ✓ | ghp_... | GitHub Personal Access Token |
+| HF_TOKEN | ✓ | hf_... | Hugging Face API token |
+| GITHUB_REPO | ✓ | user/repo | GitHub repository |
+| GITHUB_OWNER | ✓ | user | GitHub username |
+| GITHUB_BRANCH | ✓ | main | Default branch |
+| SCAN_INTERVAL | - | 3600000 | Scanner interval (ms) |
+| ENABLE_AUTO_FIX | - | true | Enable auto-fixing |
+| AUTO_COMMIT | - | false | Auto-commit fixes |
+| PORT | - | 3000 | Server port |
+| LOG_LEVEL | - | info | Logging level |
+
+## HF Spaces Deployment
+
+### Prerequisites
+- HF Space created on Hugging Face
+- GitHub repository connected
+- All environment variables set in GitHub Secrets
+
+### Step 1: Update Dockerfile
+
+The `Dockerfile` is already configured for HF Spaces (port 7860).
+
+Verify it exists in project root:
+```
+D:\mcp\mcp-2hackathon\Dockerfile
+```
+
+### Step 2: Update GitHub Actions Workflow
+
+Update `.github/workflows/sync-to-hf.yml`:
+
+```yaml
+name: Sync to HF Space
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'public/**'
+      - 'Dockerfile'
+      - '.github/workflows/sync-to-hf.yml'
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      
+      - name: Push to HF Space
+        run: |
+          git remote add hf https://${{ secrets.HF_USERNAME }}:${{ secrets.HF_TOKEN }}@huggingface.co/spaces/${{ secrets.HF_USERNAME }}/${{ secrets.HF_SPACE_NAME }}
+          git push hf HEAD:main --force
+```
+
+### Step 3: Set GitHub Secrets
+
+In GitHub repo → Settings → Secrets and variables → Actions:
+
+1. **HF_TOKEN**
+   - Value: Your HF token
+   - Use the token from HF Settings
+
+2. **HF_USERNAME**
+   - Value: Your HF username
+   - Example: `NLarchive`
+
+3. **HF_SPACE_NAME**
+   - Value: Your HF Space name
+   - Example: `my-webapp-hf`
+
+4. **GEMINI_API_KEY** (optional, if using in GitHub Actions)
+
+5. **GITHUB_TOKEN** (GitHub provides automatically)
+
+### Step 4: Deploy
+
+```bash
+# Commit and push changes
+git add .
+git commit -m "feat: add ai agent to hf space"
+git push origin main
+```
+
+GitHub Actions will automatically:
+1. Build Docker image
+2. Push to HF Space
+3. Start the service on HF Spaces
+
+Access at: `https://huggingface.co/spaces/YourUsername/your-space`
+
+## API Configuration
+
+### Base URL
+- Local: `http://localhost:3000`
+- HF Spaces: `https://huggingface.co/spaces/YourUsername/your-space`
+
+### Authentication
+All API calls include `Content-Type: application/json` header.
+
+### Health Check
+```bash
+curl http://localhost:3000/health
+```
+
+Response:
+```json
+{
+  "status": "ok",
+  "timestamp": "2024-11-17T...",
+  "uptime": 123.45
+}
+```
+
+### Example: Send Chat Message
+
+```bash
+# 1. Start conversation
+curl -X POST http://localhost:3000/api/chat/start
+
+# Response:
+# {
+#   "success": true,
+#   "sessionId": "session_1234_xyz"
+# }
+
+# 2. Send message
+curl -X POST http://localhost:3000/api/chat/message \
+  -H "Content-Type: application/json" \
+  -d '{
+    "sessionId": "session_1234_xyz",
+    "message": "What is this project?"
+  }'
+
+# Response:
+# {
+#   "success": true,
+#   "response": "Based on your project structure..."
+# }
+```
+
+### Example: Run Scanner
+
+```bash
+curl -X POST http://localhost:3000/api/scanner/scan
+
+# Response:
+# {
+#   "success": true,
+#   "report": {
+#     "timestamp": "...",
+#     "duration": 1234,
+#     "issues": [...],
+#     "analysis": {...},
+#     "recommendations": [...]
+#   }
+# }
+```
+
+## Troubleshooting
+
+### Port Already in Use
+```bash
+# Windows PowerShell
+Get-Process -Id (Get-NetTCPConnection -LocalPort 3000).OwningProcess
+
+# Kill the process
+Kill-Process -Id <PID> -Force
+```
+
+### API Key Invalid
+```
+Error: API key not valid
+```
+
+Solution:
+1. Verify key in `.env` file
+2. Check key hasn't expired
+3. Test key directly: `curl https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=YOUR_KEY`
+
+### GitHub Connection Failed
+```
+Error: Failed to create GitHub issue
+```
+
+Solution:
+1. Verify `GITHUB_TOKEN` in `.env`
+2. Check token has `repo` and `issues` scope
+3. Verify `GITHUB_REPO` format: `owner/repo`
+
+### Scanner Not Running
+```
+Scan failed: ...
+```
+
+Solution:
+1. Check `ENABLE_AUTO_FIX=true` in `.env`
+2. Verify GitHub token and permissions
+3. Check server logs: `npm run dev` (development mode shows detailed logs)
+
+### Slow Responses
+```
+Chat timeout or slow responses
+```
+
+Solutions:
+1. Check internet connection
+2. Verify API keys are valid
+3. Increase timeout: Edit `src/config/env.js` → increase timeouts
+4. Use simpler prompts to reduce processing time
+
+### HF Space Build Failing
+
+Check logs:
+```
+GitHub → Actions → View workflow run → HF Space build logs
+```
+
+Common issues:
+- `npm install` failing: Check `package.json` syntax
+- Port 7860 not exposed: Verify `Dockerfile` EXPOSE 7860
+- Environment variables missing: Check GitHub Secrets
+
+### Local Testing Before Deployment
+
+```bash
+# 1. Test with Docker locally
+docker build -t ai-agent .
+docker run -p 3000:7860 \
+  -e GEMINI_API_KEY=your_key \
+  -e GITHUB_TOKEN=your_token \
+  ai-agent
+
+# 2. Access at http://localhost:3000
+
+# 3. Check container logs
+docker logs <container_id>
+```
+
+## Next Steps
+
+1. ✅ Set up local environment
+2. ✅ Configure API keys
+3. ✅ Test locally
+4. ✅ Deploy to HF Spaces
+5. 🔄 Monitor scanner results
+6. 🔄 Collect user feedback
+7. 🔄 Add custom scanners/commands
+
+## Support & Resources
+
+- **Google Gemini**: https://ai.google.dev/
+- **GitHub API**: https://docs.github.com/en/rest
+- **HF Spaces**: https://huggingface.co/docs/hub/spaces
+- **Node.js**: https://nodejs.org/docs/
+
+---
+
+**Last Updated**: November 17, 2024

public/README.md

@@ -0,0 +1,296 @@
+# AI Agent for HF Spaces
+
+A modular, scalable AI agent system that runs on Hugging Face Spaces with:
+- **Periodic Issue Scanner** - Scans your project hourly for issues and suggests fixes
+- **Chat Interface** - Talk to Gemini AI about your project in real-time
+- **GitHub Integration** - Creates issues and PRs automatically
+- **Microservices Architecture** - Modular, maintainable, extensible
+
+## Features
+
+### 🤖 AI Chat Agent
+- Multi-turn conversations with Google Gemini
+- Context-aware responses about your project
+- Commands: `/scan`, `/status`, `/issues`, `/help`
+- Session management and conversation history
+
+### 🔍 Project Scanner
+- Hourly automated scans (configurable interval)
+- Detects:
+  - Missing critical files
+  - Security issues (exposed .env, etc)
+  - Code quality problems
+  - Dependency vulnerabilities
+- AI-powered recommendations
+- Auto-creates GitHub issues for critical findings
+
+### 📁 Project Explorer
+- View project structure
+- Display README.md
+- Show Dockerfile
+- List source files with language detection
+
+### 🔗 GitHub Integration
+- Read repository structure
+- Create issues from scan results
+- Create pull requests with fixes
+- Trigger GitHub Actions workflows
+- List open issues
+
+## Architecture
+
+```
+public/
+├── src/
+│   ├── server.js                 # Express server entry point
+│   ├── config/
+│   │   ├── env.js               # Configuration management
+│   │   └── logger.js            # Logging service
+│   ├── services/
+│   │   ├── gemini.js            # Google Generative AI service
+│   │   ├── github.js            # GitHub API service
+│   │   └── project.js           # Project analysis service
+│   ├── agents/
+│   │   ├── scanner.js           # Periodic scanner agent
+│   │   └── chat.js              # Chat agent
+│   ├── api/
+│   │   ├── chat.js              # Chat routes
+│   │   ├── scanner.js           # Scanner routes
+│   │   └── project.js           # Project routes
+│   └── utils/
+│       └── taskRunner.js        # Task execution framework
+├── assets/
+│   ├── css/
+│   │   └── styles.css           # Responsive UI styles
+│   └── js/
+│       ├── app.js               # Main app initialization
+│       └── modules/
+│           ├── chat.js          # Chat UI manager
+│           ├── scanner.js       # Scanner UI manager
+│           ├── project.js       # Project UI manager
+│           ├── ui.js            # UI utilities
+│           └── api-client.js    # HTTP client
+├── index.html                    # Main UI
+└── package.json                  # Dependencies
+```
+
+## Installation & Setup
+
+### 1. Prerequisites
+- Node.js 18+
+- Google Gemini API Key
+- GitHub Token (Personal Access Token)
+- Docker (for HF Spaces deployment)
+
+### 2. Environment Variables
+
+Create a `.env` file in the `public/` directory:
+
+```bash
+# API Keys
+GEMINI_API_KEY=your_gemini_api_key_here
+GITHUB_TOKEN=your_github_token_here
+HF_TOKEN=your_hugging_face_token_here
+
+# GitHub Configuration
+GITHUB_REPO=YourUsername/your-repo
+GITHUB_OWNER=YourUsername
+GITHUB_BRANCH=main
+
+# HF Space Configuration
+HF_SPACE_NAME=your-space-name
+HF_SPACE_URL=https://huggingface.co/spaces/YourUsername/your-space
+
+# Scanner Configuration (milliseconds)
+SCAN_INTERVAL=3600000  # 1 hour
+ENABLE_AUTO_FIX=true
+AUTO_COMMIT=false
+
+# Server
+PORT=3000
+NODE_ENV=production
+LOG_LEVEL=info
+DEBUG=false
+```
+
+### 3. Install Dependencies
+
+```bash
+cd public
+npm install
+```
+
+### 4. Start Server
+
+**Development:**
+```bash
+npm run dev
+```
+
+**Production:**
+```bash
+npm start
+```
+
+### 5. Access the App
+
+Open http://localhost:3000 in your browser
+
+## API Endpoints
+
+### Chat API
+- `POST /api/chat/start` - Start new conversation
+- `POST /api/chat/message` - Send message and get response
+- `GET /api/chat/history/:sessionId` - Get conversation history
+- `DELETE /api/chat/clear/:sessionId` - Clear conversation
+- `GET /api/chat/stats` - Get chat statistics
+
+### Scanner API
+- `POST /api/scanner/scan` - Trigger manual scan
+- `GET /api/scanner/last-report` - Get last scan report
+- `GET /api/scanner/issues` - Get detected issues
+- `POST /api/scanner/start-continuous` - Start continuous scanning
+- `POST /api/scanner/stop-continuous` - Stop continuous scanning
+
+### Project API
+- `GET /api/project/structure` - Get project structure
+- `GET /api/project/file?path=<filepath>` - Get file content
+- `GET /api/project/readme` - Get README
+- `GET /api/project/dockerfile` - Get Dockerfile
+- `GET /api/project/source-files` - List source files
+
+## Usage Examples
+
+### Chat with AI
+1. Navigate to "Chat" tab
+2. Ask questions:
+   - "What are the main components?"
+   - "How do I deploy this?"
+   - "Analyze the Dockerfile"
+3. Use commands:
+   - `/scan` - Run project scan
+   - `/status` - Get repo status
+   - `/issues` - List open issues
+   - `/help` - Show available commands
+
+### Periodic Scanning
+1. Navigate to "Scanner" tab
+2. Click "Start Auto-Scan (1 hour)" to enable hourly scans
+3. Or click "Run Manual Scan" for immediate scan
+4. View detected issues and recommendations
+5. Scanner auto-creates GitHub issues for critical findings
+
+### Project Exploration
+1. Navigate to "Project" tab
+2. View directory structure
+3. Read project documentation
+4. Examine Dockerfile configuration
+
+## Docker Deployment (HF Spaces)
+
+The project includes a Dockerfile configured for HF Spaces:
+
+```dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+COPY public /app
+
+RUN npm ci --omit=dev
+
+EXPOSE 7860
+
+CMD ["npm", "start"]
+```
+
+To deploy to HF Spaces:
+1. Push to GitHub
+2. GitHub Actions syncs to HF Space automatically
+3. HF Space builds Docker image
+4. App available at: https://huggingface.co/spaces/YourUsername/your-space
+
+## Security Considerations
+
+✅ **What's Protected:**
+- API keys stored in environment variables
+- GitHub token in GitHub Secrets
+- Conversation history in-memory (not persisted)
+- User input sanitization
+
+⚠️ **When Deploying:**
+- Never commit `.env` file
+- Use strong GitHub tokens with limited scope
+- Review auto-fix changes before auto-committing
+- Monitor scan results for accuracy
+
+## Performance
+
+- **Chat Response:** ~2-5 seconds (depends on prompt complexity)
+- **Project Scan:** ~30-60 seconds (depends on project size)
+- **Memory Usage:** ~150-250MB at rest
+- **Scanner Interval:** Configurable (default 1 hour)
+
+## Customization
+
+### Add Custom Scanners
+Extend `src/agents/scanner.js`:
+```javascript
+async analyzeProject() {
+  // Add custom analysis
+}
+```
+
+### Add Custom Commands
+Extend `src/agents/chat.js`:
+```javascript
+if (message.startsWith('/custom')) {
+  return this.handleCustomCommand();
+}
+```
+
+### Modify UI
+Edit `public/assets/css/styles.css` for theming
+Edit `public/index.html` for layout changes
+
+## Troubleshooting
+
+**API Keys Not Working?**
+- Verify keys in `.env` file
+- Check GitHub Secrets on GitHub Actions
+
+**Scanner Not Running?**
+- Check `ENABLE_AUTO_FIX=true` in `.env`
+- Verify `SCAN_INTERVAL` is in milliseconds
+- Check server logs: `npm run dev`
+
+**Chat Responses Are Slow?**
+- Increase timeout in `src/config/env.js`
+- Reduce context size in `ChatAgent.buildAIContext()`
+
+**Issues Not Created on GitHub?**
+- Verify `GITHUB_TOKEN` has `repo` and `issues` scope
+- Check GitHub Secrets configuration
+
+## Development
+
+```bash
+# Start in watch mode
+npm run dev
+
+# Check server health
+curl http://localhost:3000/health
+
+# Run scanner agent directly
+node src/agents/scanner.js
+```
+
+## License
+
+MIT
+
+## Support
+
+For issues or questions:
+1. Check the `/help` command in chat
+2. Review project documentation
+3. Create an issue on GitHub

public/api.php

@@ -1,14 +0,0 @@
-<?php
-header('Content-Type: application/json');
-header('Access-Control-Allow-Origin: *');
-
-$response = [
-    'message' => 'PHP is working correctly! ✓',
-    'timestamp' => date('Y-m-d H:i:s'),
-    'random' => rand(1, 1000),
-    'php_version' => phpversion(),
-    'server' => $_SERVER['SERVER_SOFTWARE'] ?? 'Unknown'
-];
-
-echo json_encode($response);
-?>

public/assets/css/styles.css

@@ -0,0 +1,732 @@
+/**
+ * Main Styles
+ * Responsive design for AI Agent interface
+ */
+
+:root {
+  --primary-color: #667eea;
+  --secondary-color: #764ba2;
+  --success-color: #48bb78;
+  --warning-color: #ed8936;
+  --error-color: #f56565;
+  --bg-dark: #1a202c;
+  --bg-light: #f7fafc;
+  --text-dark: #2d3748;
+  --text-light: #718096;
+  --border-color: #e2e8f0;
+  --sidebar-width: 250px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-light);
+  color: var(--text-dark);
+}
+
+body {
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-dark);
+  color: white;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-color);
+  overflow-y: auto;
+}
+
+.logo {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.logo h1 {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.nav-menu {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.nav-item {
+  background: transparent;
+  border: none;
+  color: var(--text-light);
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.nav-item.active {
+  background: var(--primary-color);
+  color: white;
+}
+
+.sidebar-footer {
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--error-color);
+}
+
+.status-dot.online {
+  background: var(--success-color);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Main */
+.main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.tab-content {
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 30px;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Chat */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.chat-header {
+  margin-bottom: 20px;
+}
+
+.chat-header h2 {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.chat-header p {
+  color: var(--text-light);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+}
+
+.message {
+  margin-bottom: 15px;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message-user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.message-user .message-content {
+  background: var(--primary-color);
+  color: white;
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 70%;
+}
+
+.message-assistant .message-content {
+  background: var(--bg-light);
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 70%;
+  border: 1px solid var(--border-color);
+}
+
+.message-system {
+  text-align: center;
+  color: var(--text-light);
+  font-size: 12px;
+  margin: 10px 0;
+}
+
+.system-message {
+  display: inline-block;
+  background: var(--bg-light);
+  padding: 8px 12px;
+  border-radius: 6px;
+}
+
+.message-text {
+  line-height: 1.5;
+}
+
+.message-text code {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.message-time {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 5px;
+}
+
+.chat-input-area {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.quick-commands {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.command-btn {
+  padding: 8px 12px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.command-btn:hover {
+  background: var(--bg-light);
+  border-color: var(--primary-color);
+}
+
+#chat-form {
+  display: flex;
+  gap: 10px;
+}
+
+#message-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+#message-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.send-btn {
+  padding: 12px 24px;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.send-btn:hover {
+  background: var(--secondary-color);
+  transform: translateY(-2px);
+}
+
+.send-btn:active {
+  transform: translateY(0);
+}
+
+/* Section Headers */
+.section-header {
+  margin-bottom: 30px;
+}
+
+.section-header h2 {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.section-header p {
+  color: var(--text-light);
+}
+
+/* Scanner */
+.scanner-controls {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 30px;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--secondary-color);
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--text-dark);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-light);
+}
+
+.btn-secondary.active {
+  background: var(--warning-color);
+  color: white;
+  border-color: var(--warning-color);
+}
+
+.scanner-results {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  padding: 20px;
+}
+
+.placeholder {
+  color: var(--text-light);
+  text-align: center;
+  padding: 40px;
+}
+
+.scan-report {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.scan-header {
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 15px;
+}
+
+.scan-header h3 {
+  margin-bottom: 10px;
+}
+
+.scan-time, .scan-duration {
+  font-size: 12px;
+  color: var(--text-light);
+}
+
+.issues-section, .recommendations-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.issues-list, .recommendations-list {
+  list-style: none;
+}
+
+.issue-item, .recommendation-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-light);
+  border-radius: 8px;
+  border-left: 4px solid var(--warning-color);
+}
+
+.issue-item.severity-critical {
+  border-left-color: var(--error-color);
+}
+
+.issue-item.severity-high {
+  border-left-color: var(--warning-color);
+}
+
+.issue-item.severity-medium {
+  border-left-color: #f6ad55;
+}
+
+.severity-badge, .priority-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.issue-message {
+  flex: 1;
+}
+
+.issue-file {
+  color: var(--text-light);
+  font-size: 12px;
+}
+
+.success-message {
+  color: var(--success-color);
+  font-weight: 600;
+  padding: 20px;
+  text-align: center;
+  background: rgba(72, 187, 120, 0.1);
+  border-radius: 8px;
+}
+
+/* Project */
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.project-card {
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.project-card h3 {
+  margin-bottom: 15px;
+  font-size: 16px;
+}
+
+.file-tree, .readme-content, .dockerfile-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.file-list {
+  list-style: none;
+}
+
+.category {
+  font-weight: 600;
+  color: var(--primary-color);
+  margin-top: 15px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.file-item, .dir-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.file-item:hover, .dir-item:hover {
+  background: var(--bg-light);
+}
+
+.file-icon, .dir-icon {
+  font-size: 16px;
+  min-width: 20px;
+}
+
+.file-name, .dir-name {
+  flex: 1;
+  font-size: 13px;
+}
+
+.file-size {
+  font-size: 11px;
+  color: var(--text-light);
+}
+
+.markdown-content {
+  line-height: 1.6;
+}
+
+.markdown-content p {
+  margin-bottom: 10px;
+}
+
+.markdown-content pre {
+  background: var(--bg-light);
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.markdown-content code {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
+
+/* Settings */
+.settings-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.setting-group {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.setting-group label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.setting-group input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.setting-group input[type="number"] {
+  margin-left: 10px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  width: 100px;
+}
+
+.settings-info {
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+}
+
+.settings-info h4 {
+  margin-bottom: 15px;
+}
+
+.info-box {
+  background: var(--bg-light);
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.info-box dl {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  gap: 15px;
+}
+
+.info-box dt {
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.info-box dd {
+  color: var(--text-light);
+}
+
+/* Notifications */
+.notification {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 16px 20px;
+  border-radius: 8px;
+  background: white;
+  border: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 300px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.notification-success {
+  border-left: 4px solid var(--success-color);
+  color: var(--success-color);
+}
+
+.notification-error {
+  border-left: 4px solid var(--error-color);
+  color: var(--error-color);
+}
+
+.notification-info {
+  border-left: 4px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 20px;
+  margin-left: auto;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .app {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    flex-direction: row;
+    padding: 15px;
+  }
+
+  .logo {
+    margin-bottom: 0;
+  }
+
+  .nav-menu {
+    flex-direction: row;
+    flex: 1;
+    gap: 5px;
+    margin: 0 20px;
+  }
+
+  .nav-item {
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+
+  .main {
+    padding-bottom: 50px;
+  }
+
+  .tab-content {
+    padding: 15px;
+  }
+
+  .project-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .message-user .message-content,
+  .message-assistant .message-content {
+    max-width: 100%;
+  }
+
+  .chat-messages {
+    padding: 15px;
+  }
+
+  .quick-commands {
+    flex-direction: column;
+  }
+
+  .command-btn {
+    width: 100%;
+  }
+
+  #chat-form {
+    flex-direction: column;
+  }
+
+  .send-btn {
+    width: 100%;
+  }
+}

public/assets/js/app.js

@@ -0,0 +1,105 @@
+/**
+ * Main Application JavaScript
+ * Frontend logic for AI Agent UI
+ */
+
+import { ChatManager } from './modules/chat.js';
+import { ScannerManager } from './modules/scanner.js';
+import { ProjectManager } from './modules/project.js';
+import { UIManager } from './modules/ui.js';
+
+class AIAgentApp {
+  constructor() {
+    this.chatManager = new ChatManager();
+    this.scannerManager = new ScannerManager();
+    this.projectManager = new ProjectManager();
+    this.uiManager = new UIManager();
+
+    this.initializeEventListeners();
+    this.loadInitialData();
+  }
+
+  initializeEventListeners() {
+    // Tab navigation
+    document.querySelectorAll('.nav-item').forEach((btn) => {
+      btn.addEventListener('click', (e) => this.handleTabChange(e));
+    });
+
+    // Chat
+    document.getElementById('chat-form').addEventListener('submit', (e) =>
+      this.chatManager.handleSubmit(e)
+    );
+    document.querySelectorAll('.command-btn').forEach((btn) => {
+      btn.addEventListener('click', (e) => this.chatManager.executeCommand(e));
+    });
+
+    // Scanner
+    document.getElementById('manual-scan-btn').addEventListener('click', () =>
+      this.scannerManager.performManualScan()
+    );
+    document.getElementById('auto-scan-toggle').addEventListener('click', () =>
+      this.scannerManager.toggleAutoScan()
+    );
+
+    // Settings
+    document.getElementById('auto-fix-toggle').addEventListener('change', (e) =>
+      this.handleSettingsChange('autoFix', e.target.checked)
+    );
+    document.getElementById('auto-commit-toggle').addEventListener('change', (e) =>
+      this.handleSettingsChange('autoCommit', e.target.checked)
+    );
+  }
+
+  async loadInitialData() {
+    try {
+      // Initialize chat
+      await this.chatManager.initialize();
+
+      // Load project info
+      await this.projectManager.loadProjectStructure();
+      await this.projectManager.loadReadme();
+      await this.projectManager.loadDockerfile();
+
+      // Load app info
+      this.uiManager.updateAppInfo({
+        status: 'Ready',
+        timestamp: new Date().toLocaleString(),
+      });
+    } catch (error) {
+      console.error('Failed to load initial data:', error);
+      this.uiManager.showError('Failed to initialize application');
+    }
+  }
+
+  handleTabChange(event) {
+    const tabName = event.target.dataset.tab;
+
+    // Update active nav item
+    document.querySelectorAll('.nav-item').forEach((btn) => {
+      btn.classList.toggle('active', btn === event.target);
+    });
+
+    // Update active tab
+    document.querySelectorAll('.tab-content').forEach((tab) => {
+      tab.classList.remove('active');
+    });
+    document.getElementById(`${tabName}-tab`).classList.add('active');
+  }
+
+  handleSettingsChange(setting, value) {
+    const settings = this.loadSettings();
+    settings[setting] = value;
+    localStorage.setItem('aiAgentSettings', JSON.stringify(settings));
+    console.log(`Setting ${setting} updated to ${value}`);
+  }
+
+  loadSettings() {
+    const stored = localStorage.getItem('aiAgentSettings');
+    return stored ? JSON.parse(stored) : {};
+  }
+}
+
+// Initialize app when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  window.app = new AIAgentApp();
+});

public/assets/js/modules/api-client.js

@@ -0,0 +1,54 @@
+/**
+ * API Client Module
+ * Centralized HTTP client for API calls
+ */
+
+export class ApiClient {
+  constructor(baseUrl = '') {
+    this.baseUrl = baseUrl;
+  }
+
+  async request(method, endpoint, data = null) {
+    const url = `${this.baseUrl}/api${endpoint}`;
+    const options = {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+
+    if (data && (method === 'POST' || method === 'PUT')) {
+      options.body = JSON.stringify(data);
+    }
+
+    try {
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || `HTTP ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error(`API request failed: ${method} ${endpoint}`, error);
+      throw error;
+    }
+  }
+
+  get(endpoint) {
+    return this.request('GET', endpoint);
+  }
+
+  post(endpoint, data) {
+    return this.request('POST', endpoint, data);
+  }
+
+  put(endpoint, data) {
+    return this.request('PUT', endpoint, data);
+  }
+
+  delete(endpoint) {
+    return this.request('DELETE', endpoint);
+  }
+}

public/assets/js/modules/chat.js

@@ -0,0 +1,109 @@
+/**
+ * Chat Manager Module
+ * Handles chat functionality
+ */
+
+import { ApiClient } from './api-client.js';
+import { UIManager } from './ui.js';
+
+export class ChatManager {
+  constructor() {
+    this.api = new ApiClient();
+    this.ui = new UIManager();
+    this.sessionId = null;
+    this.messageHistory = [];
+  }
+
+  async initialize() {
+    try {
+      const response = await this.api.post('/chat/start', {});
+      this.sessionId = response.sessionId;
+      console.log('Chat session started:', this.sessionId);
+      
+      this.addSystemMessage(
+        'Chat initialized. You can use /help for available commands.'
+      );
+    } catch (error) {
+      console.error('Failed to initialize chat:', error);
+      throw error;
+    }
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault();
+
+    const input = document.getElementById('message-input');
+    const message = input.value.trim();
+
+    if (!message) return;
+
+    // Clear input
+    input.value = '';
+    input.focus();
+
+    // Add user message to UI
+    this.addMessage('user', message);
+
+    try {
+      // Send to API
+      const response = await this.api.post('/chat/message', {
+        sessionId: this.sessionId,
+        message,
+      });
+
+      // Add AI response to UI
+      this.addMessage('assistant', response.response);
+      this.messageHistory.push({ role: 'user', content: message });
+      this.messageHistory.push({ role: 'assistant', content: response.response });
+    } catch (error) {
+      console.error('Chat error:', error);
+      this.addMessage('system', `Error: ${error.message}`);
+    }
+  }
+
+  async executeCommand(event) {
+    const command = event.target.dataset.command;
+    const input = document.getElementById('message-input');
+    input.value = command;
+    input.focus();
+  }
+
+  addMessage(role, content) {
+    const messagesContainer = document.getElementById('chat-messages');
+    const messageEl = document.createElement('div');
+    messageEl.className = `message message-${role}`;
+
+    if (role === 'system') {
+      messageEl.innerHTML = `<p class="system-message">${this.escapeHtml(content)}</p>`;
+    } else {
+      messageEl.innerHTML = `
+        <div class="message-content">
+          <div class="message-text">${this.formatMessageText(content)}</div>
+          <div class="message-time">${new Date().toLocaleTimeString()}</div>
+        </div>
+      `;
+    }
+
+    messagesContainer.appendChild(messageEl);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+
+  addSystemMessage(content) {
+    this.addMessage('system', content);
+  }
+
+  formatMessageText(text) {
+    // Simple markdown-like formatting
+    return this.escapeHtml(text)
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/\n/g, '<br>')
+      .replace(/`(.*?)`/g, '<code>$1</code>');
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

public/assets/js/modules/project.js

@@ -0,0 +1,119 @@
+/**
+ * Project Manager Module
+ * Handles project information display
+ */
+
+import { ApiClient } from './api-client.js';
+
+export class ProjectManager {
+  constructor() {
+    this.api = new ApiClient();
+  }
+
+  async loadProjectStructure() {
+    try {
+      const response = await this.api.get('/project/structure');
+      this.displayProjectStructure(response.structure);
+    } catch (error) {
+      console.error('Failed to load project structure:', error);
+      this.updateElement(
+        'project-structure',
+        `<p class="error">Failed to load project structure</p>`
+      );
+    }
+  }
+
+  async loadReadme() {
+    try {
+      const response = await this.api.get('/project/readme');
+      if (response.success && response.content) {
+        const html = this.markdownToHtml(response.content);
+        this.updateElement('project-readme', html);
+      }
+    } catch (error) {
+      console.warn('README not available:', error);
+      this.updateElement('project-readme', '<p class="info">README not found</p>');
+    }
+  }
+
+  async loadDockerfile() {
+    try {
+      const response = await this.api.get('/project/dockerfile');
+      if (response.success && response.content) {
+        const html = `<pre><code>${this.escapeHtml(response.content)}</code></pre>`;
+        this.updateElement('project-dockerfile', html);
+      }
+    } catch (error) {
+      console.warn('Dockerfile not available:', error);
+      this.updateElement('project-dockerfile', '<p class="info">Dockerfile not found</p>');
+    }
+  }
+
+  displayProjectStructure(structure) {
+    let html = '<ul class="file-list">';
+
+    if (structure.files && structure.files.length > 0) {
+      html += '<li class="category">📄 Files</li>';
+      structure.files.forEach((file) => {
+        html += `
+          <li class="file-item">
+            <span class="file-icon">📄</span>
+            <span class="file-name">${file.name}</span>
+            <span class="file-size">${this.formatBytes(file.size)}</span>
+          </li>
+        `;
+      });
+    }
+
+    if (structure.directories && structure.directories.length > 0) {
+      html += '<li class="category">📁 Directories</li>';
+      structure.directories.forEach((dir) => {
+        html += `
+          <li class="dir-item">
+            <span class="dir-icon">📁</span>
+            <span class="dir-name">${dir.name}</span>
+          </li>
+        `;
+      });
+    }
+
+    html += '</ul>';
+    this.updateElement('project-structure', html);
+  }
+
+  markdownToHtml(markdown) {
+    // Simple markdown to HTML conversion
+    let html = markdown
+      .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
+      .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
+      .replace(/^### (.*?)$/gm, '<h3>$1</h3>')
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/\n\n/g, '</p><p>')
+      .replace(/^- (.*?)$/gm, '<li>$1</li>')
+      .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+
+    return `<div class="markdown-content"><p>${html}</p></div>`;
+  }
+
+  formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  }
+
+  updateElement(elementId, html) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.innerHTML = html;
+    }
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

public/assets/js/modules/scanner.js

@@ -0,0 +1,111 @@
+/**
+ * Scanner Manager Module
+ * Handles project scanning
+ */
+
+import { ApiClient } from './api-client.js';
+import { UIManager } from './ui.js';
+
+export class ScannerManager {
+  constructor() {
+    this.api = new ApiClient();
+    this.ui = new UIManager();
+    this.isAutoScanning = false;
+  }
+
+  async performManualScan() {
+    const btn = document.getElementById('manual-scan-btn');
+    btn.disabled = true;
+    btn.textContent = '⏳ Scanning...';
+
+    try {
+      const response = await this.api.post('/scanner/scan', {});
+      this.displayScanResults(response.report);
+    } catch (error) {
+      console.error('Scan failed:', error);
+      this.ui.showError(`Scan failed: ${error.message}`);
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '🔍 Run Manual Scan';
+    }
+  }
+
+  async toggleAutoScan() {
+    const btn = document.getElementById('auto-scan-toggle');
+
+    try {
+      if (this.isAutoScanning) {
+        await this.api.post('/scanner/stop-continuous', {});
+        this.isAutoScanning = false;
+        btn.classList.remove('active');
+        btn.textContent = 'Start Auto-Scan (1 hour)';
+        this.ui.showSuccess('Auto-scan stopped');
+      } else {
+        await this.api.post('/scanner/start-continuous', {});
+        this.isAutoScanning = true;
+        btn.classList.add('active');
+        btn.textContent = 'Stop Auto-Scan';
+        this.ui.showSuccess('Auto-scan started (1 hour interval)');
+      }
+    } catch (error) {
+      console.error('Failed to toggle auto-scan:', error);
+      this.ui.showError(`Failed to toggle auto-scan: ${error.message}`);
+    }
+  }
+
+  displayScanResults(report) {
+    const resultsContainer = document.getElementById('scanner-results');
+    
+    let html = `
+      <div class="scan-report">
+        <div class="scan-header">
+          <h3>Scan Report</h3>
+          <p class="scan-time">${new Date(report.timestamp).toLocaleString()}</p>
+          <p class="scan-duration">Duration: ${report.duration}ms</p>
+        </div>
+    `;
+
+    // Issues
+    if (report.issues && report.issues.length > 0) {
+      html += `
+        <div class="issues-section">
+          <h4>⚠️ Issues Found (${report.issues.length})</h4>
+          <ul class="issues-list">
+      `;
+      report.issues.forEach((issue) => {
+        const severityClass = `severity-${issue.severity}`;
+        html += `
+          <li class="issue-item ${severityClass}">
+            <span class="severity-badge">${issue.severity}</span>
+            <span class="issue-message">${issue.message}</span>
+            <span class="issue-file"><code>${issue.file}</code></span>
+          </li>
+        `;
+      });
+      html += '</ul></div>';
+    } else {
+      html += '<div class="success-message">✅ No issues detected!</div>';
+    }
+
+    // Recommendations
+    if (report.recommendations && report.recommendations.length > 0) {
+      html += `
+        <div class="recommendations-section">
+          <h4>💡 Recommendations</h4>
+          <ul class="recommendations-list">
+      `;
+      report.recommendations.forEach((rec) => {
+        html += `
+          <li class="recommendation-item">
+            <span class="priority-badge">${rec.priority}</span>
+            <div class="recommendation-text">${rec.suggestion}</div>
+          </li>
+        `;
+      });
+      html += '</ul></div>';
+    }
+
+    html += '</div>';
+    resultsContainer.innerHTML = html;
+  }
+}

public/assets/js/modules/ui.js

@@ -0,0 +1,50 @@
+/**
+ * UI Manager Module
+ * Centralized UI utilities
+ */
+
+export class UIManager {
+  static showSuccess(message) {
+    this.showNotification(message, 'success');
+  }
+
+  static showError(message) {
+    this.showNotification(message, 'error');
+  }
+
+  static showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.innerHTML = `
+      <span>${message}</span>
+      <button class="close-btn">&times;</button>
+    `;
+
+    // Insert into page
+    document.body.appendChild(notification);
+
+    // Auto-remove after 5 seconds
+    const timeout = setTimeout(() => {
+      notification.remove();
+    }, 5000);
+
+    // Close button handler
+    notification.querySelector('.close-btn').addEventListener('click', () => {
+      clearTimeout(timeout);
+      notification.remove();
+    });
+  }
+
+  static updateAppInfo(info) {
+    const infoBox = document.getElementById('app-info');
+    if (infoBox) {
+      let html = '<dl>';
+      for (const [key, value] of Object.entries(info)) {
+        html += `<dt>${key}</dt><dd>${value}</dd>`;
+      }
+      html += '</dl>';
+      infoBox.innerHTML = html;
+    }
+  }
+}

public/index.html

@@ -3,47 +3,171 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Hugging Face Space</title>
-    <link rel="stylesheet" href="styles.css">
+    <title>AI Agent - HF Space</title>
+    <link rel="stylesheet" href="/assets/css/styles.css">
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>Welcome to My Web App</h1>
-            <p class="subtitle">Running on Hugging Face Spaces with Docker</p>
-        </header>
+    <div class="app">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="logo">
+                <h1>🤖 AI Agent</h1>
+            </div>
+            
+            <nav class="nav-menu">
+                <button class="nav-item active" data-tab="chat">
+                    💬 Chat
+                </button>
+                <button class="nav-item" data-tab="scanner">
+                    🔍 Scanner
+                </button>
+                <button class="nav-item" data-tab="project">
+                    📁 Project
+                </button>
+                <button class="nav-item" data-tab="settings">
+                    ⚙️ Settings
+                </button>
+            </nav>
+            
+            <div class="sidebar-footer">
+                <div class="status">
+                    <div class="status-dot online"></div>
+                    <span>Connected</span>
+                </div>
+            </div>
+        </aside>
 
-        <main>
-            <section class="card">
-                <h2>Static Content</h2>
-                <p>This is a simple HTML page styled with CSS.</p>
-                <button id="testButton">Click Me (JS Test)</button>
-                <p id="jsOutput"></p>
+        <!-- Main Content -->
+        <main class="main">
+            <!-- Chat Tab -->
+            <section id="chat-tab" class="tab-content active">
+                <div class="chat-container">
+                    <header class="chat-header">
+                        <h2>Chat with AI Agent</h2>
+                        <p>Ask about your project, scan for issues, or request changes</p>
+                    </header>
+                    
+                    <div id="chat-messages" class="chat-messages"></div>
+                    
+                    <div class="chat-input-area">
+                        <div class="quick-commands">
+                            <button class="command-btn" data-command="/scan">🔍 Scan</button>
+                            <button class="command-btn" data-command="/status">📊 Status</button>
+                            <button class="command-btn" data-command="/issues">📋 Issues</button>
+                            <button class="command-btn" data-command="/help">❓ Help</button>
+                        </div>
+                        
+                        <form id="chat-form">
+                            <input
+                                type="text"
+                                id="message-input"
+                                placeholder="Type your message or use commands (/scan, /status, /issues)..."
+                                autocomplete="off"
+                            >
+                            <button type="submit" class="send-btn">Send</button>
+                        </form>
+                    </div>
+                </div>
             </section>
 
-            <section class="card">
-                <h2>PHP Dynamic Content</h2>
-                <div id="phpContent">
-                    <p>Loading PHP content...</p>
+            <!-- Scanner Tab -->
+            <section id="scanner-tab" class="tab-content">
+                <div class="scanner-container">
+                    <header class="section-header">
+                        <h2>Project Scanner</h2>
+                        <p>Scan for issues and get AI recommendations</p>
+                    </header>
+                    
+                    <div class="scanner-controls">
+                        <button id="manual-scan-btn" class="btn btn-primary">
+                            🔍 Run Manual Scan
+                        </button>
+                        <button id="auto-scan-toggle" class="btn btn-secondary">
+                            Start Auto-Scan (1 hour)
+                        </button>
+                    </div>
+                    
+                    <div id="scanner-results" class="scanner-results">
+                        <p class="placeholder">No scan results yet. Click "Run Manual Scan" to start.</p>
+                    </div>
                 </div>
-                <button id="loadPhp">Reload PHP Data</button>
             </section>
 
-            <section class="card">
-                <h2>Form Example</h2>
-                <form id="testForm">
-                    <input type="text" id="nameInput" placeholder="Enter your name" required>
-                    <button type="submit">Submit to PHP</button>
-                </form>
-                <div id="formResponse"></div>
+            <!-- Project Tab -->
+            <section id="project-tab" class="tab-content">
+                <div class="project-container">
+                    <header class="section-header">
+                        <h2>Project Information</h2>
+                        <p>View project structure and files</p>
+                    </header>
+                    
+                    <div class="project-grid">
+                        <div class="project-card">
+                            <h3>📁 Project Structure</h3>
+                            <div id="project-structure" class="file-tree">
+                                <p class="loading">Loading project structure...</p>
+                            </div>
+                        </div>
+                        
+                        <div class="project-card">
+                            <h3>📄 README</h3>
+                            <div id="project-readme" class="readme-content">
+                                <p class="loading">Loading README...</p>
+                            </div>
+                        </div>
+                        
+                        <div class="project-card">
+                            <h3>🐳 Dockerfile</h3>
+                            <div id="project-dockerfile" class="dockerfile-content">
+                                <p class="loading">Loading Dockerfile...</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </section>
-        </main>
 
-        <footer>
-            <p>Synced from GitHub to Hugging Face Spaces</p>
-        </footer>
+            <!-- Settings Tab -->
+            <section id="settings-tab" class="tab-content">
+                <div class="settings-container">
+                    <header class="section-header">
+                        <h2>Settings & Configuration</h2>
+                        <p>Configure AI Agent behavior</p>
+                    </header>
+                    
+                    <div class="settings-grid">
+                        <div class="setting-group">
+                            <label for="auto-fix-toggle">
+                                <input type="checkbox" id="auto-fix-toggle" />
+                                Enable Auto-Fix for detected issues
+                            </label>
+                        </div>
+                        
+                        <div class="setting-group">
+                            <label for="auto-commit-toggle">
+                                <input type="checkbox" id="auto-commit-toggle" />
+                                Auto-commit fixes to GitHub
+                            </label>
+                        </div>
+                        
+                        <div class="setting-group">
+                            <label for="scan-interval">
+                                Scan Interval (minutes):
+                                <input type="number" id="scan-interval" value="60" min="10" max="1440" />
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div class="settings-info">
+                        <h4>ℹ️ Information</h4>
+                        <div id="app-info" class="info-box">
+                            <p>Loading...</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
     </div>
 
-    <script src="script.js"></script>
+    <script src="/assets/js/app.js" type="module"></script>
 </body>
 </html>

public/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ai-agent-hf-space",
+  "version": "1.0.0",
+  "description": "AI Agent for GitHub→HF Space with periodic scanning and chat interface",
+  "type": "module",
+  "main": "src/server.js",
+  "scripts": {
+    "start": "node src/server.js",
+    "dev": "node --watch src/server.js",
+    "agent": "node src/agents/scanner.js",
+    "test": "echo 'Tests coming soon'"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.7.0",
+    "express": "^4.18.2",
+    "axios": "^1.6.0",
+    "dotenv": "^16.3.1",
+    "cors": "^2.8.5",
+    "body-parser": "^1.20.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

public/process.php

@@ -1,22 +0,0 @@
-<?php
-header('Content-Type: application/json');
-header('Access-Control-Allow-Origin: *');
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : 'Guest';
-    
-    $response = [
-        'success' => true,
-        'greeting' => "Hello, {$name}! Your form was processed by PHP.",
-        'timestamp' => date('Y-m-d H:i:s'),
-        'name_length' => strlen($name)
-    ];
-} else {
-    $response = [
-        'success' => false,
-        'error' => 'Only POST requests are accepted'
-    ];
-}
-
-echo json_encode($response);
-?>

public/script.js

@@ -1,66 +0,0 @@
-// JavaScript functionality
-document.addEventListener('DOMContentLoaded', function() {
-    
-    // Button click test
-    const testButton = document.getElementById('testButton');
-    const jsOutput = document.getElementById('jsOutput');
-    
-    testButton.addEventListener('click', function() {
-        const now = new Date().toLocaleString();
-        jsOutput.textContent = `✓ JavaScript is working! Clicked at: ${now}`;
-        jsOutput.style.display = 'block';
-    });
-
-    // Load PHP content
-    function loadPhpContent() {
-        const phpContent = document.getElementById('phpContent');
-        
-        fetch('api.php')
-            .then(response => response.json())
-            .then(data => {
-                phpContent.innerHTML = `
-                    <p><strong>Server Message:</strong> ${data.message}</p>
-                    <p><strong>Server Time:</strong> ${data.timestamp}</p>
-                    <p><strong>Random Number:</strong> ${data.random}</p>
-                `;
-            })
-            .catch(error => {
-                phpContent.innerHTML = `<p style="color: red;">Error loading PHP: ${error.message}</p>`;
-            });
-    }
-
-    // Load PHP on page load
-    loadPhpContent();
-
-    // Reload PHP button
-    document.getElementById('loadPhp').addEventListener('click', loadPhpContent);
-
-    // Form submission
-    const testForm = document.getElementById('testForm');
-    const formResponse = document.getElementById('formResponse');
-
-    testForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        const nameInput = document.getElementById('nameInput');
-        const formData = new FormData();
-        formData.append('name', nameInput.value);
-
-        fetch('process.php', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            formResponse.innerHTML = `
-                <p><strong>${data.greeting}</strong></p>
-                <p>Processed at: ${data.timestamp}</p>
-            `;
-            formResponse.style.display = 'block';
-            nameInput.value = '';
-        })
-        .catch(error => {
-            formResponse.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-        });
-    });
-});

public/src/agents/chat.js

@@ -0,0 +1,271 @@
+/**
+ * Chat Agent
+ * Handles user conversations and AI-powered requests
+ */
+
+import { geminiService } from '../services/gemini.js';
+import { projectService } from '../services/project.js';
+import { githubService } from '../services/github.js';
+import { logger } from '../config/logger.js';
+
+class ChatAgent {
+  constructor() {
+    this.conversations = new Map();
+  }
+
+  /**
+   * Start new conversation
+   * @param {string} sessionId - Unique session ID
+   * @returns {Object} Conversation context
+   */
+  startConversation(sessionId) {
+    const context = {
+      sessionId,
+      startedAt: new Date().toISOString(),
+      messages: [],
+      projectContext: null,
+    };
+
+    this.conversations.set(sessionId, context);
+    logger.debug('Conversation started', { sessionId });
+
+    return context;
+  }
+
+  /**
+   * Process user message
+   * @param {string} sessionId - Session ID
+   * @param {string} message - User message
+   * @returns {Promise<string>} AI response
+   */
+  async processMessage(sessionId, message) {
+    let context = this.conversations.get(sessionId);
+
+    if (!context) {
+      context = this.startConversation(sessionId);
+    }
+
+    // Load project context if needed
+    if (!context.projectContext) {
+      try {
+        context.projectContext = await projectService.getProjectStructure();
+        context.projectContext.readme = await projectService.getReadme();
+      } catch (e) {
+        logger.warn('Failed to load project context', { error: e.message });
+      }
+    }
+
+    // Add message to history
+    context.messages.push({
+      role: 'user',
+      content: message,
+      timestamp: new Date().toISOString(),
+    });
+
+    try {
+      // Check if message is a command
+      const response = await this.handleMessage(message, context);
+
+      // Add response to history
+      context.messages.push({
+        role: 'assistant',
+        content: response,
+        timestamp: new Date().toISOString(),
+      });
+
+      this.conversations.set(sessionId, context);
+
+      return response;
+    } catch (error) {
+      logger.error('Failed to process message', { error: error.message, sessionId });
+      const errorResponse = `Sorry, I encountered an error: ${error.message}`;
+
+      context.messages.push({
+        role: 'assistant',
+        content: errorResponse,
+        timestamp: new Date().toISOString(),
+      });
+
+      this.conversations.set(sessionId, context);
+      return errorResponse;
+    }
+  }
+
+  /**
+   * Handle different message types
+   * @param {string} message - User message
+   * @param {Object} context - Conversation context
+   * @returns {Promise<string>} Response
+   */
+  async handleMessage(message, context) {
+    // Check for commands
+    if (message.startsWith('/scan')) {
+      return this.handleScanCommand(context);
+    }
+
+    if (message.startsWith('/status')) {
+      return this.handleStatusCommand(context);
+    }
+
+    if (message.startsWith('/issues')) {
+      return this.handleIssuesCommand(context);
+    }
+
+    if (message.startsWith('/help')) {
+      return this.getHelpText();
+    }
+
+    // Regular conversation with AI
+    const aiContext = this.buildAIContext(context);
+    const response = await geminiService.chat(message);
+
+    return response;
+  }
+
+  /**
+   * Handle /scan command
+   * @param {Object} context - Conversation context
+   * @returns {Promise<string>} Response
+   */
+  async handleScanCommand(context) {
+    try {
+      const scanResults = await projectService.scanForIssues();
+
+      if (scanResults.issues.length === 0) {
+        return '✅ Scan complete! No issues detected in the project.';
+      }
+
+      const issuesList = scanResults.issues
+        .map(
+          (i) =>
+            `• [${i.severity.toUpperCase()}] ${i.message} (${i.file})`
+        )
+        .join('\n');
+
+      return `⚠️ Scan found ${scanResults.issues.length} issues:\n\n${issuesList}`;
+    } catch (error) {
+      return `❌ Scan failed: ${error.message}`;
+    }
+  }
+
+  /**
+   * Handle /status command
+   * @param {Object} context - Conversation context
+   * @returns {Promise<string>} Response
+   */
+  async handleStatusCommand(context) {
+    try {
+      const repoInfo = await githubService.getRepoInfo();
+      const issues = await githubService.listIssues('open');
+
+      return `📊 Project Status:
+- Repository: ${repoInfo.name}
+- Default Branch: ${repoInfo.default_branch}
+- Stars: ${repoInfo.stargazers_count}
+- Open Issues: ${issues.length}
+- Last Updated: ${new Date(repoInfo.updated_at).toLocaleDateString()}`;
+    } catch (error) {
+      return `❌ Failed to get status: ${error.message}`;
+    }
+  }
+
+  /**
+   * Handle /issues command
+   * @param {Object} context - Conversation context
+   * @returns {Promise<string>} Response
+   */
+  async handleIssuesCommand(context) {
+    try {
+      const issues = await githubService.listIssues('open');
+
+      if (issues.length === 0) {
+        return '✅ No open issues!';
+      }
+
+      const issuesList = issues
+        .slice(0, 5)
+        .map((i) => `• #${i.number}: ${i.title}`)
+        .join('\n');
+
+      return `📋 Open Issues (showing ${Math.min(5, issues.length)} of ${issues.length}):\n\n${issuesList}`;
+    } catch (error) {
+      return `❌ Failed to get issues: ${error.message}`;
+    }
+  }
+
+  /**
+   * Build AI context from conversation
+   * @param {Object} context - Conversation context
+   * @returns {string} Context string
+   */
+  buildAIContext(context) {
+    let aiContext = 'You are an AI assistant helping with software development.';
+
+    if (context.projectContext) {
+      const projectInfo = context.projectContext;
+      aiContext += `\n\nProject Information:
+- Files: ${projectInfo.files?.length || 0}
+- Directories: ${projectInfo.directories?.length || 0}`;
+    }
+
+    if (context.messages.length > 0) {
+      const recentMessages = context.messages.slice(-6); // Last 3 exchanges
+      aiContext += '\n\nRecent Context:\n';
+      recentMessages.forEach((msg) => {
+        aiContext += `${msg.role === 'user' ? 'User' : 'Assistant'}: ${msg.content}\n`;
+      });
+    }
+
+    return aiContext;
+  }
+
+  /**
+   * Get help text
+   * @returns {string} Help text
+   */
+  getHelpText() {
+    return `🤖 AI Agent Help
+
+Available Commands:
+• /scan - Scan project for issues
+• /status - Get project status
+• /issues - List open GitHub issues
+• /help - Show this help message
+
+Or just chat normally for project assistance!
+
+Examples:
+- "What are the main components of this project?"
+- "How do I deploy this?"
+- "Analyze the Dockerfile for me"`;
+  }
+
+  /**
+   * Get conversation history
+   * @param {string} sessionId - Session ID
+   * @returns {Array} Messages
+   */
+  getHistory(sessionId) {
+    const context = this.conversations.get(sessionId);
+    return context?.messages || [];
+  }
+
+  /**
+   * Clear conversation
+   * @param {string} sessionId - Session ID
+   */
+  clearConversation(sessionId) {
+    this.conversations.delete(sessionId);
+    logger.debug('Conversation cleared', { sessionId });
+  }
+
+  /**
+   * Get all active conversations count
+   * @returns {number} Count
+   */
+  getActiveConversationCount() {
+    return this.conversations.size;
+  }
+}
+
+export const chatAgent = new ChatAgent();

public/src/agents/scanner.js

@@ -0,0 +1,255 @@
+/**
+ * AI Scanner Agent
+ * Periodically scans project for issues and suggests fixes
+ */
+
+import { projectService } from '../services/project.js';
+import { geminiService } from '../services/gemini.js';
+import { githubService } from '../services/github.js';
+import { config } from '../config/env.js';
+import { logger } from '../config/logger.js';
+
+class ScannerAgent {
+  constructor() {
+    this.lastScan = null;
+    this.scanInterval = null;
+  }
+
+  /**
+   * Start periodic scanning
+   */
+  startPeriodicScanning() {
+    if (this.scanInterval) {
+      logger.warn('Scanning already active');
+      return;
+    }
+
+    logger.info('Starting periodic scanning', {
+      interval: config.SCAN_INTERVAL,
+    });
+
+    // Run immediately
+    this.performScan();
+
+    // Then run at intervals
+    this.scanInterval = setInterval(() => {
+      this.performScan();
+    }, config.SCAN_INTERVAL);
+  }
+
+  /**
+   * Stop periodic scanning
+   */
+  stopScanning() {
+    if (this.scanInterval) {
+      clearInterval(this.scanInterval);
+      this.scanInterval = null;
+      logger.info('Periodic scanning stopped');
+    }
+  }
+
+  /**
+   * Perform full project scan
+   * @returns {Promise<Object>} Scan results
+   */
+  async performScan() {
+    const startTime = Date.now();
+    
+    logger.info('Starting project scan...');
+
+    try {
+      // 1. Get project structure
+      const structure = await projectService.getProjectStructure();
+
+      // 2. Scan for issues
+      const issues = await projectService.scanForIssues();
+
+      // 3. Analyze critical files
+      const analysis = await this.analyzeProject();
+
+      // 4. Generate report
+      const report = {
+        timestamp: new Date().toISOString(),
+        duration: Date.now() - startTime,
+        structure,
+        issues: issues.issues,
+        analysis,
+        recommendations: await this.generateRecommendations(issues, analysis),
+      };
+
+      this.lastScan = report;
+
+      logger.info('Scan completed', {
+        duration: report.duration,
+        issuesFound: issues.issues.length,
+      });
+
+      // 5. Optionally create issue if problems found
+      if (config.ENABLE_AUTO_FIX && issues.issues.length > 0) {
+        await this.createIssueFromScan(report);
+      }
+
+      return report;
+    } catch (error) {
+      logger.error('Scan failed', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Analyze project files with AI
+   * @returns {Promise<Object>} Analysis results
+   */
+  async analyzeProject() {
+    try {
+      const sourceFiles = await projectService.getSourceFiles();
+      const analysis = {
+        files: [],
+        overallHealth: 'unknown',
+      };
+
+      // Analyze first 5 source files for performance
+      for (const file of sourceFiles.slice(0, 5)) {
+        try {
+          const content = await projectService.getFileContent(file.path);
+          const codeAnalysis = await geminiService.analyzeCode(
+            content,
+            this.getLanguageFromFile(file.name)
+          );
+
+          analysis.files.push({
+            name: file.name,
+            analysis: codeAnalysis,
+          });
+        } catch (e) {
+          logger.warn(`Failed to analyze ${file.name}`, { error: e.message });
+        }
+      }
+
+      return analysis;
+    } catch (error) {
+      logger.error('Project analysis failed', { error: error.message });
+      return { files: [], overallHealth: 'error' };
+    }
+  }
+
+  /**
+   * Generate recommendations based on scan
+   * @param {Object} issues - Issues found
+   * @param {Object} analysis - AI analysis
+   * @returns {Promise<Array>} Recommendations
+   */
+  async generateRecommendations(issues, analysis) {
+    if (issues.issues.length === 0) {
+      return [
+        {
+          priority: 'low',
+          suggestion: 'Keep code reviewed regularly',
+          reason: 'No critical issues found',
+        },
+      ];
+    }
+
+    try {
+      const issuesText = issues.issues
+        .map((i) => `- [${i.severity}] ${i.message}`)
+        .join('\n');
+
+      const prompt = `Based on these project issues, suggest 3 actionable fixes:
+
+${issuesText}
+
+For each suggestion provide:
+1. What to fix
+2. Why it's important
+3. How to implement (brief)`;
+
+      const response = await geminiService.generate(prompt);
+
+      return [
+        {
+          priority: 'high',
+          suggestion: response,
+          reason: 'AI-generated recommendations based on scan',
+        },
+      ];
+    } catch (error) {
+      logger.error('Failed to generate recommendations', { error: error.message });
+      return [];
+    }
+  }
+
+  /**
+   * Create GitHub issue from scan results
+   * @param {Object} report - Scan report
+   */
+  async createIssueFromScan(report) {
+    try {
+      const issueBody = this.formatScanReportAsIssue(report);
+
+      const issue = await githubService.createIssue({
+        title: `🤖 AI Scanner: Issues Detected`,
+        body: issueBody,
+        labels: ['ai-detected', 'needs-review'],
+      });
+
+      logger.info('Created issue from scan', { issueNumber: issue.number });
+    } catch (error) {
+      logger.error('Failed to create issue', { error: error.message });
+    }
+  }
+
+  /**
+   * Format scan report as GitHub issue
+   * @param {Object} report - Scan report
+   * @returns {string} Formatted issue body
+   */
+  formatScanReportAsIssue(report) {
+    let body = '## 🤖 AI Scanner Report\n\n';
+
+    if (report.issues.length > 0) {
+      body += '### Issues Found\n';
+      report.issues.forEach((issue) => {
+        body += `- **[${issue.severity}]** ${issue.message}\n`;
+        body += `  - File: \`${issue.file}\`\n`;
+        body += `  - Type: ${issue.type}\n\n`;
+      });
+    }
+
+    if (report.recommendations.length > 0) {
+      body += '### Recommendations\n';
+      report.recommendations.forEach((rec) => {
+        body += `- **[${rec.priority}]** ${rec.suggestion}\n`;
+      });
+    }
+
+    body += `\n---\n_Scanned at: ${report.timestamp}_\n_Scan duration: ${report.duration}ms_`;
+
+    return body;
+  }
+
+  /**
+   * Get last scan results
+   * @returns {Object} Last scan report
+   */
+  getLastScan() {
+    return this.lastScan;
+  }
+
+  /**
+   * Helper: Get language from filename
+   * @param {string} filename - Filename
+   * @returns {string} Language
+   */
+  getLanguageFromFile(filename) {
+    if (filename.endsWith('.ts')) return 'typescript';
+    if (filename.endsWith('.jsx')) return 'jsx';
+    if (filename.endsWith('.tsx')) return 'tsx';
+    if (filename.endsWith('.py')) return 'python';
+    if (filename.endsWith('.java')) return 'java';
+    if (filename.endsWith('.go')) return 'go';
+    return 'javascript';
+  }
+}
+
+export const scannerAgent = new ScannerAgent();

public/src/api/chat.js

@@ -0,0 +1,121 @@
+/**
+ * Chat API Routes
+ * WebSocket and HTTP endpoints for chat functionality
+ */
+
+import express from 'express';
+import { chatAgent } from '../agents/chat.js';
+import { logger } from '../config/logger.js';
+
+const router = express.Router();
+
+/**
+ * POST /api/chat/message
+ * Send message and get response
+ */
+router.post('/message', async (req, res) => {
+  try {
+    const { sessionId, message } = req.body;
+
+    if (!sessionId || !message) {
+      return res.status(400).json({
+        error: 'Missing required fields: sessionId, message',
+      });
+    }
+
+    const response = await chatAgent.processMessage(sessionId, message);
+
+    res.json({
+      success: true,
+      response,
+      timestamp: new Date().toISOString(),
+    });
+  } catch (error) {
+    logger.error('Chat message processing failed', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to process message',
+      details: error.message,
+    });
+  }
+});
+
+/**
+ * GET /api/chat/history/:sessionId
+ * Get conversation history
+ */
+router.get('/history/:sessionId', (req, res) => {
+  try {
+    const { sessionId } = req.params;
+    const history = chatAgent.getHistory(sessionId);
+
+    res.json({
+      sessionId,
+      messageCount: history.length,
+      messages: history,
+    });
+  } catch (error) {
+    logger.error('Failed to get chat history', { error: error.message });
+    res.status(500).json({ error: 'Failed to retrieve history' });
+  }
+});
+
+/**
+ * POST /api/chat/start
+ * Start new conversation
+ */
+router.post('/start', (req, res) => {
+  try {
+    const sessionId = `session_${Date.now()}_${Math.random()
+      .toString(36)
+      .substr(2, 9)}`;
+    const context = chatAgent.startConversation(sessionId);
+
+    res.json({
+      success: true,
+      sessionId,
+      context,
+    });
+  } catch (error) {
+    logger.error('Failed to start conversation', { error: error.message });
+    res.status(500).json({ error: 'Failed to start conversation' });
+  }
+});
+
+/**
+ * DELETE /api/chat/clear/:sessionId
+ * Clear conversation
+ */
+router.delete('/clear/:sessionId', (req, res) => {
+  try {
+    const { sessionId } = req.params;
+    chatAgent.clearConversation(sessionId);
+
+    res.json({
+      success: true,
+      message: 'Conversation cleared',
+    });
+  } catch (error) {
+    logger.error('Failed to clear conversation', { error: error.message });
+    res.status(500).json({ error: 'Failed to clear conversation' });
+  }
+});
+
+/**
+ * GET /api/chat/stats
+ * Get chat statistics
+ */
+router.get('/stats', (req, res) => {
+  try {
+    const stats = {
+      activeConversations: chatAgent.getActiveConversationCount(),
+      timestamp: new Date().toISOString(),
+    };
+
+    res.json(stats);
+  } catch (error) {
+    logger.error('Failed to get chat stats', { error: error.message });
+    res.status(500).json({ error: 'Failed to get stats' });
+  }
+});
+
+export default router;

public/src/api/project.js

@@ -0,0 +1,136 @@
+/**
+ * Project API Routes
+ * Endpoints for project information and structure
+ */
+
+import express from 'express';
+import { projectService } from '../services/project.js';
+import { logger } from '../config/logger.js';
+
+const router = express.Router();
+
+/**
+ * GET /api/project/structure
+ * Get project structure
+ */
+router.get('/structure', async (req, res) => {
+  try {
+    const structure = await projectService.getProjectStructure();
+
+    res.json({
+      success: true,
+      structure,
+    });
+  } catch (error) {
+    logger.error('Failed to get structure', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to retrieve project structure',
+      details: error.message,
+    });
+  }
+});
+
+/**
+ * GET /api/project/file
+ * Get file content (with path query param)
+ */
+router.get('/file', async (req, res) => {
+  try {
+    const { path } = req.query;
+
+    if (!path) {
+      return res.status(400).json({
+        error: 'Missing required query parameter: path',
+      });
+    }
+
+    const content = await projectService.getFileContent(path);
+
+    res.json({
+      success: true,
+      path,
+      content,
+    });
+  } catch (error) {
+    logger.error('Failed to get file', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to retrieve file',
+      details: error.message,
+    });
+  }
+});
+
+/**
+ * GET /api/project/readme
+ * Get README content
+ */
+router.get('/readme', async (req, res) => {
+  try {
+    const content = await projectService.getReadme();
+
+    if (!content) {
+      return res.status(404).json({
+        error: 'README not found',
+      });
+    }
+
+    res.json({
+      success: true,
+      content,
+    });
+  } catch (error) {
+    logger.error('Failed to get README', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to retrieve README',
+    });
+  }
+});
+
+/**
+ * GET /api/project/dockerfile
+ * Get Dockerfile content
+ */
+router.get('/dockerfile', async (req, res) => {
+  try {
+    const content = await projectService.getDockerfile();
+
+    if (!content) {
+      return res.status(404).json({
+        error: 'Dockerfile not found',
+      });
+    }
+
+    res.json({
+      success: true,
+      content,
+    });
+  } catch (error) {
+    logger.error('Failed to get Dockerfile', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to retrieve Dockerfile',
+    });
+  }
+});
+
+/**
+ * GET /api/project/source-files
+ * Get list of source files
+ */
+router.get('/source-files', async (req, res) => {
+  try {
+    const files = await projectService.getSourceFiles();
+
+    res.json({
+      success: true,
+      files,
+      count: files.length,
+    });
+  } catch (error) {
+    logger.error('Failed to get source files', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to retrieve source files',
+    });
+  }
+});
+
+export default router;

public/src/api/scanner.js

@@ -0,0 +1,116 @@
+/**
+ * Scanner API Routes
+ * Endpoints for project scanning and issue detection
+ */
+
+import express from 'express';
+import { scannerAgent } from '../agents/scanner.js';
+import { projectService } from '../services/project.js';
+import { logger } from '../config/logger.js';
+
+const router = express.Router();
+
+/**
+ * POST /api/scanner/scan
+ * Trigger manual scan
+ */
+router.post('/scan', async (req, res) => {
+  try {
+    logger.info('Manual scan triggered');
+    const report = await scannerAgent.performScan();
+
+    res.json({
+      success: true,
+      report,
+    });
+  } catch (error) {
+    logger.error('Scan failed', { error: error.message });
+    res.status(500).json({
+      error: 'Scan failed',
+      details: error.message,
+    });
+  }
+});
+
+/**
+ * GET /api/scanner/last-report
+ * Get last scan report
+ */
+router.get('/last-report', (req, res) => {
+  try {
+    const report = scannerAgent.getLastScan();
+
+    if (!report) {
+      return res.status(404).json({
+        error: 'No scan report available yet',
+      });
+    }
+
+    res.json({
+      success: true,
+      report,
+    });
+  } catch (error) {
+    logger.error('Failed to get report', { error: error.message });
+    res.status(500).json({ error: 'Failed to retrieve report' });
+  }
+});
+
+/**
+ * GET /api/scanner/issues
+ * Get detected issues
+ */
+router.get('/issues', async (req, res) => {
+  try {
+    const issues = await projectService.scanForIssues();
+
+    res.json({
+      success: true,
+      ...issues,
+    });
+  } catch (error) {
+    logger.error('Failed to scan issues', { error: error.message });
+    res.status(500).json({
+      error: 'Failed to scan issues',
+      details: error.message,
+    });
+  }
+});
+
+/**
+ * POST /api/scanner/start-continuous
+ * Start continuous scanning
+ */
+router.post('/start-continuous', (req, res) => {
+  try {
+    scannerAgent.startPeriodicScanning();
+
+    res.json({
+      success: true,
+      message: 'Continuous scanning started',
+    });
+  } catch (error) {
+    logger.error('Failed to start scanning', { error: error.message });
+    res.status(500).json({ error: 'Failed to start scanning' });
+  }
+});
+
+/**
+ * POST /api/scanner/stop-continuous
+ * Stop continuous scanning
+ */
+router.post('/stop-continuous', (req, res) => {
+  try {
+    scannerAgent.stopScanning();
+
+    res.json({
+      success: true,
+      message: 'Continuous scanning stopped',
+    });
+  } catch (error) {
+    logger.error('Failed to stop scanning', { error: error.message });
+    res.status(500).json({ error: 'Failed to stop scanning' });
+  }
+});
+
+export default router;

public/src/config/env.js

@@ -0,0 +1,45 @@
+/**
+ * Environment Configuration
+ * Centralized configuration management for all services
+ */
+
+export const config = {
+  // Server
+  PORT: process.env.PORT || 3000,
+  NODE_ENV: process.env.NODE_ENV || 'development',
+  
+  // API Keys
+  GEMINI_API_KEY: process.env.GEMINI_API_KEY || '',
+  GITHUB_TOKEN: process.env.GITHUB_TOKEN || '',
+  HF_TOKEN: process.env.HF_TOKEN || '',
+  
+  // GitHub
+  GITHUB_REPO: process.env.GITHUB_REPO || 'NLarchive/my-webapp-hf',
+  GITHUB_OWNER: process.env.GITHUB_OWNER || 'NLarchive',
+  GITHUB_BRANCH: process.env.GITHUB_BRANCH || 'main',
+  
+  // Hugging Face
+  HF_SPACE_NAME: process.env.HF_SPACE_NAME || 'my-webapp-hf',
+  HF_SPACE_URL: process.env.HF_SPACE_URL || 'https://huggingface.co/spaces/NLarchive/my-webapp-hf',
+  
+  // Scanner Configuration
+  SCAN_INTERVAL: parseInt(process.env.SCAN_INTERVAL || '3600000', 10), // 1 hour in ms
+  ENABLE_AUTO_FIX: process.env.ENABLE_AUTO_FIX === 'true',
+  AUTO_COMMIT: process.env.AUTO_COMMIT === 'true',
+  
+  // Logging
+  LOG_LEVEL: process.env.LOG_LEVEL || 'info',
+  DEBUG: process.env.DEBUG === 'true',
+};
+
+export function validateConfig() {
+  const required = ['GEMINI_API_KEY', 'GITHUB_TOKEN'];
+  const missing = required.filter(key => !config[key]);
+  
+  if (missing.length > 0) {
+    console.error(`Missing required environment variables: ${missing.join(', ')}`);
+    process.exit(1);
+  }
+  
+  return true;
+}

public/src/config/logger.js

@@ -0,0 +1,48 @@
+/**
+ * Logger Service
+ * Centralized logging for all modules
+ */
+
+import { config } from './env.js';
+
+const LOG_LEVELS = {
+  error: 0,
+  warn: 1,
+  info: 2,
+  debug: 3,
+};
+
+const LEVEL_NAMES = {
+  0: 'ERROR',
+  1: 'WARN',
+  2: 'INFO',
+  3: 'DEBUG',
+};
+
+const currentLevel = LOG_LEVELS[config.LOG_LEVEL] ?? 2;
+
+export const logger = {
+  error: (message, data = {}) => {
+    if (currentLevel >= LOG_LEVELS.error) {
+      console.error(`[ERROR] ${new Date().toISOString()} - ${message}`, data);
+    }
+  },
+  
+  warn: (message, data = {}) => {
+    if (currentLevel >= LOG_LEVELS.warn) {
+      console.warn(`[WARN] ${new Date().toISOString()} - ${message}`, data);
+    }
+  },
+  
+  info: (message, data = {}) => {
+    if (currentLevel >= LOG_LEVELS.info) {
+      console.log(`[INFO] ${new Date().toISOString()} - ${message}`, data);
+    }
+  },
+  
+  debug: (message, data = {}) => {
+    if (currentLevel >= LOG_LEVELS.debug) {
+      console.log(`[DEBUG] ${new Date().toISOString()} - ${message}`, data);
+    }
+  },
+};

public/src/server.js

@@ -0,0 +1,92 @@
+/**
+ * Main Server Entry Point
+ * Express server setup with API routes and scheduled tasks
+ */
+
+import express from 'express';
+import cors from 'cors';
+import bodyParser from 'body-parser';
+import { config, validateConfig } from './config/env.js';
+import { logger } from './config/logger.js';
+import { scannerAgent } from './agents/scanner.js';
+
+// API Routes
+import chatRoutes from './api/chat.js';
+import scannerRoutes from './api/scanner.js';
+import projectRoutes from './api/project.js';
+
+const app = express();
+
+// Middleware
+app.use(cors());
+app.use(bodyParser.json({ limit: '10mb' }));
+app.use(bodyParser.urlencoded({ limit: '10mb', extended: true }));
+
+// Request logging middleware
+app.use((req, res, next) => {
+  logger.debug(`${req.method} ${req.path}`);
+  next();
+});
+
+// Health check
+app.get('/health', (req, res) => {
+  res.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    uptime: process.uptime(),
+  });
+});
+
+// API Routes
+app.use('/api/chat', chatRoutes);
+app.use('/api/scanner', scannerRoutes);
+app.use('/api/project', projectRoutes);
+
+// Serve static files
+app.use(express.static('public'));
+
+// 404 handler
+app.use((req, res) => {
+  res.status(404).json({ error: 'Not found' });
+});
+
+// Error handler
+app.use((err, req, res, next) => {
+  logger.error('Unhandled error', { error: err.message });
+  res.status(500).json({
+    error: 'Internal server error',
+    message: config.DEBUG ? err.message : 'Something went wrong',
+  });
+});
+
+// Start server
+async function startServer() {
+  try {
+    // Validate configuration
+    validateConfig();
+
+    // Start server
+    app.listen(config.PORT, () => {
+      logger.info(`Server started on port ${config.PORT}`);
+    });
+
+    // Start scanner if enabled
+    if (config.ENABLE_AUTO_FIX) {
+      scannerAgent.startPeriodicScanning();
+    } else {
+      logger.info('Auto-fix is disabled');
+    }
+  } catch (error) {
+    logger.error('Failed to start server', { error: error.message });
+    process.exit(1);
+  }
+}
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+  logger.info('Shutting down gracefully...');
+  scannerAgent.stopScanning();
+  process.exit(0);
+});
+
+startServer();

public/src/services/gemini.js

@@ -0,0 +1,140 @@
+/**
+ * Gemini AI Service
+ * Handles all interactions with Google's Generative AI API
+ */
+
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import { config } from '../config/env.js';
+import { logger } from '../config/logger.js';
+
+class GeminiService {
+  constructor() {
+    this.client = new GoogleGenerativeAI(config.GEMINI_API_KEY);
+    this.model = this.client.getGenerativeModel({ model: 'gemini-pro' });
+    this.conversationHistory = [];
+  }
+
+  /**
+   * Generate a response from Gemini
+   * @param {string} prompt - User prompt or system message
+   * @param {Object} options - Configuration options
+   * @returns {Promise<string>} AI response
+   */
+  async generate(prompt, options = {}) {
+    try {
+      const context = options.context || '';
+      const fullPrompt = context ? `${context}\n\n${prompt}` : prompt;
+
+      const result = await this.model.generateContent(fullPrompt);
+      const response = await result.response;
+      const text = response.text();
+
+      logger.debug('Gemini response generated', { length: text.length });
+      return text;
+    } catch (error) {
+      logger.error('Gemini generation failed', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Multi-turn conversation
+   * @param {string} userMessage - User message
+   * @returns {Promise<string>} AI response
+   */
+  async chat(userMessage) {
+    try {
+      this.conversationHistory.push({
+        role: 'user',
+        content: userMessage,
+      });
+
+      const chat = this.model.startChat({
+        history: this.conversationHistory,
+      });
+
+      const result = await chat.sendMessage(userMessage);
+      const response = await result.response;
+      const text = response.text();
+
+      this.conversationHistory.push({
+        role: 'assistant',
+        content: text,
+      });
+
+      return text;
+    } catch (error) {
+      logger.error('Chat failed', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Analyze code for issues
+   * @param {string} code - Code to analyze
+   * @param {string} language - Programming language
+   * @returns {Promise<Object>} Analysis results
+   */
+  async analyzeCode(code, language = 'javascript') {
+    const prompt = `Analyze this ${language} code for issues, security problems, and improvements:
+
+\`\`\`${language}
+${code}
+\`\`\`
+
+Provide:
+1. Issues found (if any)
+2. Security concerns (if any)
+3. Performance improvements
+4. Suggested fixes (with code snippets)
+
+Format as JSON with keys: "issues", "security", "performance", "fixes"`;
+
+    const response = await this.generate(prompt);
+    
+    try {
+      // Extract JSON from response
+      const jsonMatch = response.match(/\{[\s\S]*\}/);
+      return jsonMatch ? JSON.parse(jsonMatch[0]) : { raw: response };
+    } catch (e) {
+      return { raw: response };
+    }
+  }
+
+  /**
+   * Generate commit message from changes
+   * @param {Array} changes - List of file changes
+   * @returns {Promise<string>} Suggested commit message
+   */
+  async generateCommitMessage(changes) {
+    const changesSummary = changes
+      .map((c) => `- ${c.type}: ${c.file} - ${c.description}`)
+      .join('\n');
+
+    const prompt = `Based on these changes, generate a concise conventional commit message:
+
+${changesSummary}
+
+Follow the pattern: type(scope): description`;
+
+    return this.generate(prompt);
+  }
+
+  /**
+   * Clear conversation history
+   */
+  clearHistory() {
+    this.conversationHistory = [];
+    logger.debug('Conversation history cleared');
+  }
+
+  /**
+   * Get conversation history
+   * @returns {Array} Conversation history
+   */
+  getHistory() {
+    return this.conversationHistory;
+  }
+}
+
+export const geminiService = new GeminiService();

public/src/services/github.js

@@ -0,0 +1,186 @@
+/**
+ * GitHub Service
+ * Handles GitHub API interactions (PR creation, issue creation, commits, etc.)
+ */
+
+import axios from 'axios';
+import { config } from '../config/env.js';
+import { logger } from '../config/logger.js';
+
+class GitHubService {
+  constructor() {
+    this.api = axios.create({
+      baseURL: 'https://api.github.com',
+      headers: {
+        Authorization: `token ${config.GITHUB_TOKEN}`,
+        Accept: 'application/vnd.github.v3+json',
+      },
+    });
+  }
+
+  /**
+   * Create a GitHub issue
+   * @param {Object} issue - Issue details
+   * @returns {Promise<Object>} Created issue
+   */
+  async createIssue(issue) {
+    try {
+      const { title, body, labels = [], assignees = [] } = issue;
+      
+      const response = await this.api.post(
+        `/repos/${config.GITHUB_REPO}/issues`,
+        { title, body, labels, assignees }
+      );
+
+      logger.info('GitHub issue created', { issueNumber: response.data.number });
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to create GitHub issue', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Create a pull request
+   * @param {Object} pr - PR details
+   * @returns {Promise<Object>} Created PR
+   */
+  async createPullRequest(pr) {
+    try {
+      const {
+        title,
+        body,
+        head,
+        base = config.GITHUB_BRANCH,
+        draft = false,
+      } = pr;
+
+      const response = await this.api.post(
+        `/repos/${config.GITHUB_REPO}/pulls`,
+        { title, body, head, base, draft }
+      );
+
+      logger.info('GitHub PR created', { prNumber: response.data.number });
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to create GitHub PR', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Get repository contents
+   * @param {string} path - File path
+   * @returns {Promise<Object>} File contents
+   */
+  async getFileContents(path = '') {
+    try {
+      const response = await this.api.get(
+        `/repos/${config.GITHUB_REPO}/contents/${path}`
+      );
+
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to get file contents', { error: error.message, path });
+      throw error;
+    }
+  }
+
+  /**
+   * List files in directory
+   * @param {string} path - Directory path
+   * @returns {Promise<Array>} File list
+   */
+  async listFiles(path = '') {
+    try {
+      const contents = await this.getFileContents(path);
+      
+      if (Array.isArray(contents)) {
+        return contents;
+      }
+      return [contents];
+    } catch (error) {
+      logger.error('Failed to list files', { error: error.message, path });
+      throw error;
+    }
+  }
+
+  /**
+   * Trigger a GitHub Actions workflow
+   * @param {string} workflowId - Workflow ID or filename
+   * @param {Object} inputs - Workflow inputs
+   * @returns {Promise<Object>} Dispatch result
+   */
+  async triggerWorkflow(workflowId, inputs = {}) {
+    try {
+      const response = await this.api.post(
+        `/repos/${config.GITHUB_REPO}/actions/workflows/${workflowId}/dispatches`,
+        {
+          ref: config.GITHUB_BRANCH,
+          inputs,
+        }
+      );
+
+      logger.info('Workflow triggered', { workflowId });
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to trigger workflow', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Get repository information
+   * @returns {Promise<Object>} Repository info
+   */
+  async getRepoInfo() {
+    try {
+      const response = await this.api.get(`/repos/${config.GITHUB_REPO}`);
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to get repo info', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Get list of issues
+   * @param {string} state - 'open' or 'closed'
+   * @returns {Promise<Array>} Issues list
+   */
+  async listIssues(state = 'open') {
+    try {
+      const response = await this.api.get(
+        `/repos/${config.GITHUB_REPO}/issues`,
+        { params: { state } }
+      );
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to list issues', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Add comment to issue
+   * @param {number} issueNumber - Issue number
+   * @param {string} body - Comment body
+   * @returns {Promise<Object>} Comment result
+   */
+  async addIssueComment(issueNumber, body) {
+    try {
+      const response = await this.api.post(
+        `/repos/${config.GITHUB_REPO}/issues/${issueNumber}/comments`,
+        { body }
+      );
+
+      logger.info('Issue comment added', { issueNumber });
+      return response.data;
+    } catch (error) {
+      logger.error('Failed to add issue comment', { error: error.message });
+      throw error;
+    }
+  }
+}
+
+export const githubService = new GitHubService();

public/src/services/project.js

@@ -0,0 +1,198 @@
+/**
+ * Project Service
+ * Reads and analyzes project files from the repository
+ */
+
+import { githubService } from './github.js';
+import { logger } from '../config/logger.js';
+
+class ProjectService {
+  constructor() {
+    this.cachedProjectStructure = null;
+    this.cacheExpiry = 0;
+    this.CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+  }
+
+  /**
+   * Get project structure
+   * @returns {Promise<Object>} Project structure
+   */
+  async getProjectStructure() {
+    const now = Date.now();
+    
+    if (this.cachedProjectStructure && now < this.cacheExpiry) {
+      logger.debug('Using cached project structure');
+      return this.cachedProjectStructure;
+    }
+
+    try {
+      const root = await githubService.listFiles('');
+      const structure = {
+        files: [],
+        directories: [],
+        timestamp: new Date().toISOString(),
+      };
+
+      for (const item of root) {
+        if (item.type === 'file') {
+          structure.files.push({
+            name: item.name,
+            path: item.path,
+            size: item.size,
+          });
+        } else if (item.type === 'dir') {
+          structure.directories.push({
+            name: item.name,
+            path: item.path,
+          });
+        }
+      }
+
+      this.cachedProjectStructure = structure;
+      this.cacheExpiry = now + this.CACHE_TTL;
+
+      logger.info('Project structure retrieved', {
+        files: structure.files.length,
+        dirs: structure.directories.length,
+      });
+
+      return structure;
+    } catch (error) {
+      logger.error('Failed to get project structure', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Get specific file content
+   * @param {string} filePath - Path to file
+   * @returns {Promise<string>} File content
+   */
+  async getFileContent(filePath) {
+    try {
+      const response = await githubService.getFileContents(filePath);
+      
+      if (response.type === 'file') {
+        // Decode base64 content
+        return Buffer.from(response.content, 'base64').toString('utf-8');
+      }
+      
+      throw new Error('Path is not a file');
+    } catch (error) {
+      logger.error('Failed to read file', { error: error.message, filePath });
+      throw error;
+    }
+  }
+
+  /**
+   * Scan project for common issues
+   * @returns {Promise<Object>} Scan results
+   */
+  async scanForIssues() {
+    try {
+      const structure = await this.getProjectStructure();
+      const issues = [];
+
+      // Check for missing critical files
+      const criticalFiles = ['package.json', 'README.md', 'Dockerfile'];
+      const fileNames = structure.files.map((f) => f.name);
+
+      for (const file of criticalFiles) {
+        if (!fileNames.includes(file)) {
+          issues.push({
+            type: 'missing_file',
+            severity: 'high',
+            file,
+            message: `Critical file missing: ${file}`,
+          });
+        }
+      }
+
+      // Check for common security issues
+      if (fileNames.includes('.env')) {
+        issues.push({
+          type: 'security',
+          severity: 'critical',
+          file: '.env',
+          message: '.env file should not be committed',
+        });
+      }
+
+      // Check for outdated dependencies (if package.json exists)
+      if (fileNames.includes('package.json')) {
+        try {
+          const packageJson = await this.getFileContent('package.json');
+          const pkg = JSON.parse(packageJson);
+          
+          // Check if dependencies are very old (would need date comparison)
+          if (pkg.dependencies) {
+            issues.push({
+              type: 'warning',
+              severity: 'medium',
+              file: 'package.json',
+              message: 'Review and update dependencies periodically',
+            });
+          }
+        } catch (e) {
+          logger.warn('Failed to parse package.json', { error: e.message });
+        }
+      }
+
+      logger.info('Project scan completed', { issuesFound: issues.length });
+      return {
+        issues,
+        timestamp: new Date().toISOString(),
+        scanDuration: 'immediate',
+      };
+    } catch (error) {
+      logger.error('Project scan failed', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Get README content
+   * @returns {Promise<string>} README content
+   */
+  async getReadme() {
+    try {
+      return await this.getFileContent('README.md');
+    } catch (error) {
+      logger.warn('Failed to read README', { error: error.message });
+      return null;
+    }
+  }
+
+  /**
+   * Get Dockerfile
+   * @returns {Promise<string>} Dockerfile content
+   */
+  async getDockerfile() {
+    try {
+      return await this.getFileContent('Dockerfile');
+    } catch (error) {
+      logger.warn('Failed to read Dockerfile', { error: error.message });
+      return null;
+    }
+  }
+
+  /**
+   * Get list of source files (JS, TS, etc)
+   * @returns {Promise<Array>} Source files
+   */
+  async getSourceFiles() {
+    try {
+      const structure = await this.getProjectStructure();
+      const extensions = ['.js', '.ts', '.jsx', '.tsx', '.py', '.java', '.go'];
+      
+      return structure.files.filter((f) =>
+        extensions.some((ext) => f.name.endsWith(ext))
+      );
+    } catch (error) {
+      logger.error('Failed to get source files', { error: error.message });
+      return [];
+    }
+  }
+}
+
+export const projectService = new ProjectService();

public/src/utils/taskRunner.js

@@ -0,0 +1,178 @@
+/**
+ * Task Runner
+ * Manages task queue and execution order
+ */
+
+import { logger } from '../config/logger.js';
+
+class TaskRunner {
+  constructor() {
+    this.tasks = [];
+    this.isRunning = false;
+    this.executedTasks = [];
+  }
+
+  /**
+   * Add task to queue
+   * @param {Object} task - Task definition
+   */
+  addTask(task) {
+    const {
+      id,
+      name,
+      priority = 5,
+      execute,
+      retries = 3,
+      timeout = 30000,
+    } = task;
+
+    if (!id || !name || !execute) {
+      throw new Error('Task must have id, name, and execute function');
+    }
+
+    this.tasks.push({
+      id,
+      name,
+      priority,
+      execute,
+      retries,
+      timeout,
+      status: 'pending',
+      result: null,
+      error: null,
+      attempts: 0,
+    });
+
+    // Sort by priority (higher = execute first)
+    this.tasks.sort((a, b) => b.priority - a.priority);
+
+    logger.debug(`Task added: ${name} (priority: ${priority})`);
+  }
+
+  /**
+   * Run all tasks in queue
+   * @returns {Promise<Array>} Execution results
+   */
+  async runAll() {
+    if (this.isRunning) {
+      logger.warn('Tasks already running');
+      return [];
+    }
+
+    this.isRunning = true;
+    const results = [];
+
+    logger.info('Starting task execution', { taskCount: this.tasks.length });
+
+    for (const task of this.tasks) {
+      try {
+        const result = await this.executeTask(task);
+        results.push(result);
+      } catch (error) {
+        logger.error('Task execution failed', {
+          taskId: task.id,
+          error: error.message,
+        });
+      }
+    }
+
+    this.isRunning = false;
+    logger.info('Task execution completed', { taskCount: results.length });
+
+    return results;
+  }
+
+  /**
+   * Execute single task with retries
+   * @param {Object} task - Task to execute
+   * @returns {Promise<Object>} Execution result
+   */
+  async executeTask(task) {
+    let lastError;
+
+    for (let attempt = 1; attempt <= task.retries; attempt++) {
+      try {
+        task.attempts = attempt;
+        task.status = 'running';
+
+        logger.debug(`Executing task: ${task.name} (attempt ${attempt}/${task.retries})`);
+
+        const timeoutPromise = new Promise((_, reject) =>
+          setTimeout(
+            () => reject(new Error('Task timeout')),
+            task.timeout
+          )
+        );
+
+        const result = await Promise.race([
+          task.execute(),
+          timeoutPromise,
+        ]);
+
+        task.status = 'completed';
+        task.result = result;
+
+        logger.info(`Task completed: ${task.name}`, { attempt });
+        this.executedTasks.push({ ...task });
+
+        return task;
+      } catch (error) {
+        lastError = error;
+        logger.warn(`Task attempt ${attempt} failed: ${task.name}`, {
+          error: error.message,
+        });
+
+        if (attempt < task.retries) {
+          // Wait before retrying
+          await new Promise((resolve) => setTimeout(resolve, 1000 * attempt));
+        }
+      }
+    }
+
+    task.status = 'failed';
+    task.error = lastError?.message;
+
+    logger.error(`Task failed after retries: ${task.name}`, {
+      error: lastError?.message,
+    });
+
+    this.executedTasks.push({ ...task });
+    return task;
+  }
+
+  /**
+   * Clear task queue
+   */
+  clear() {
+    this.tasks = [];
+    this.executedTasks = [];
+    logger.debug('Task queue cleared');
+  }
+
+  /**
+   * Get execution history
+   * @returns {Array} Executed tasks
+   */
+  getHistory() {
+    return this.executedTasks;
+  }
+
+  /**
+   * Get task stats
+   * @returns {Object} Stats
+   */
+  getStats() {
+    const history = this.executedTasks;
+    const completed = history.filter((t) => t.status === 'completed').length;
+    const failed = history.filter((t) => t.status === 'failed').length;
+
+    return {
+      total: history.length,
+      completed,
+      failed,
+      successRate: history.length > 0 ? (completed / history.length) * 100 : 0,
+    };
+  }
+}
+
+export const taskRunner = new TaskRunner();

public/styles.css

@@ -1,140 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    padding: 20px;
-    color: #333;
-}
-
-.container {
-    max-width: 900px;
-    margin: 0 auto;
-}
-
-header {
-    text-align: center;
-    color: white;
-    padding: 40px 20px;
-    margin-bottom: 30px;
-}
-
-header h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-
-.subtitle {
-    font-size: 1.2em;
-    opacity: 0.9;
-}
-
-main {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.card {
-    background: white;
-    border-radius: 12px;
-    padding: 30px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-    transition: transform 0.3s ease;
-}
-
-.card:hover {
-    transform: translateY(-5px);
-}
-
-.card h2 {
-    color: #667eea;
-    margin-bottom: 15px;
-    font-size: 1.8em;
-}
-
-.card p {
-    line-height: 1.6;
-    margin-bottom: 15px;
-}
-
-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    padding: 12px 24px;
-    border-radius: 6px;
-    font-size: 1em;
-    cursor: pointer;
-    transition: opacity 0.3s ease;
-    margin-top: 10px;
-}
-
-button:hover {
-    opacity: 0.9;
-}
-
-button:active {
-    transform: scale(0.98);
-}
-
-#jsOutput, #formResponse {
-    margin-top: 15px;
-    padding: 15px;
-    background: #f0f0f0;
-    border-radius: 6px;
-    min-height: 20px;
-    font-weight: bold;
-    color: #667eea;
-}
-
-#phpContent {
-    padding: 15px;
-    background: #f9f9f9;
-    border-radius: 6px;
-    border-left: 4px solid #667eea;
-    margin-bottom: 10px;
-}
-
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-input[type="text"] {
-    padding: 12px;
-    border: 2px solid #ddd;
-    border-radius: 6px;
-    font-size: 1em;
-    transition: border-color 0.3s ease;
-}
-
-input[type="text"]:focus {
-    outline: none;
-    border-color: #667eea;
-}
-
-footer {
-    text-align: center;
-    color: white;
-    padding: 30px 20px;
-    margin-top: 30px;
-    opacity: 0.9;
-}
-
-@media (max-width: 600px) {
-    header h1 {
-        font-size: 2em;
-    }
-    
-    .card {
-        padding: 20px;
-    }
-}