feat: dashboard via NiceGUI, refs NOISSUE

ai_software_factory/.nicegui/storage-user-83c198f2-6838-4d94-a576-9934514d723b.json

@@ -0,0 +1 @@
+{"dark_mode":false}

ai_software_factory/Makefile

@@ -0,0 +1,28 @@
+.PHONY: help run-api run-frontend run-tests init-db clean
+
+help:
+	@echo "Available targets:"
+	@echo "  make run-api          - Run FastAPI app with NiceGUI frontend (default)"
+	@echo "  make run-tests        - Run pytest tests"
+	@echo "  make init-db          - Initialize database"
+	@echo "  make clean            - Remove container volumes"
+	@echo "  make rebuild          - Rebuild and run container"
+
+run-api:
+	@echo "Starting FastAPI app with NiceGUI frontend..."
+	@bash start.sh dev
+
+run-frontend:
+	@echo "NiceGUI is now integrated with FastAPI - use 'make run-api' to start everything together"
+
+run-tests:
+	pytest -v
+
+init-db:
+	@python -c "from main import app; from database import init_db; init_db()"
+
+clean:
+	@echo "Cleaning up..."
+	@docker-compose down -v
+
+rebuild: clean run-api

ai_software_factory/dashboard_ui.py

@@ -0,0 +1,202 @@
+"""NiceGUI dashboard for AI Software Factory with real-time database data."""
+
+from nicegui import ui
+from database import get_db, get_engine, init_db, get_db_sync
+from models import ProjectHistory, ProjectLog, AuditTrail, UserAction, SystemLog, AgentAction
+from datetime import datetime
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+def create_dashboard():
+    """Create and configure the NiceGUI dashboard with real-time data from database."""
+    
+    # Get database session directly for NiceGUI (not a FastAPI dependency)
+    db_session = get_db_sync()
+    
+    if db_session is None:
+        ui.label('Database session could not be created. Check configuration and restart the server.')
+        return
+    
+    try:
+        # Fetch current project
+        current_project = db_session.query(ProjectHistory).order_by(ProjectHistory.created_at.desc()).first()
+        
+        # Fetch recent audit trail entries
+        recent_audits = db_session.query(AuditTrail).order_by(AuditTrail.created_at.desc()).limit(10).all()
+        
+        # Fetch recent project history entries
+        recent_projects = db_session.query(ProjectHistory).order_by(ProjectHistory.created_at.desc()).limit(5).all()
+        
+        # Fetch recent system logs
+        recent_logs = db_session.query(SystemLog).order_by(SystemLog.created_at.desc()).limit(5).all()
+        
+        # Create main card
+        with ui.card().col().classes('w-full max-w-6xl mx-auto').props('elevated').style('max-width: 1200px; margin: 0 auto;') as main_card:
+            # Header section
+            with ui.row().classes('items-center gap-4 mb-6').style('padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;') as header_row:
+                title = ui.label('AI Software Factory').style('font-size: 28px; font-weight: bold; margin: 0;')
+                subtitle = ui.label('Real-time Dashboard & Audit Trail Display').style('font-size: 14px; opacity: 0.9; margin-top: 5px;')
+            
+            # Stats grid
+            with ui.grid(columns=4, cols=4).props('gutter=1').style('margin-top: 15px;') as stats_grid:
+                # Current Project
+                with ui.column().classes('text-center').style('background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px;') as card1:
+                    ui.label('Current Project').style('font-size: 12px; text-transform: uppercase; opacity: 0.8;')
+                    project_name = current_project.project_name if current_project else 'No active project'
+                    ui.label(project_name).style('font-size: 20px; font-weight: bold; margin-top: 5px;')
+                
+                # Active Projects count
+                with ui.column().classes('text-center').style('background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px;') as card2:
+                    ui.label('Active Projects').style('font-size: 12px; text-transform: uppercase; opacity: 0.8;')
+                    active_count = len(recent_projects)
+                    ui.label(str(active_count)).style('font-size: 20px; font-weight: bold; margin-top: 5px; color: #00ff88;')
+                
+                # Code Generated (calculated from history entries)
+                with ui.column().classes('text-center').style('background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px;') as card3:
+                    ui.label('Code Generated').style('font-size: 12px; text-transform: uppercase; opacity: 0.8;')
+                    # Count .py files from history
+                    code_count = sum(1 for p in recent_projects if 'Generated' in p.message)
+                    code_size = sum(p.progress for p in recent_projects) if recent_projects else 0
+                    ui.label(f'{code_count} files ({code_size}% total)').style('font-size: 20px; font-weight: bold; margin-top: 5px; color: #ffd93d;')
+                
+                # Status
+                with ui.column().classes('text-center').style('background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px;') as card4:
+                    ui.label('Status').style('font-size: 12px; text-transform: uppercase; opacity: 0.8;')
+                    status = current_project.status if current_project else 'No active project'
+                    ui.label(status).style('font-size: 20px; font-weight: bold; margin-top: 5px; color: #00d4ff;')
+            
+            # Separator
+            ui.separator(style='margin: 15px 0; color: rgba(255, 255, 255, 0.3);')
+            
+            # Current Status Panel
+            with ui.column().style('background: rgba(255, 255, 255, 0.08); padding: 20px; border-radius: 12px; margin-bottom: 15px;') as status_panel:
+                ui.label('📊 Current Status').style('font-size: 18px; font-weight: bold; color: #4fc3f7; margin-bottom: 10px;')
+                
+                with ui.row().classes('items-center gap-4').style('margin-top: 10px;') as progress_row:
+                    if current_project:
+                        ui.label('Progress:').style('color: #bdbdbd;')
+                        ui.label(str(current_project.progress) + '%').style('color: #4fc3f7; font-weight: bold;')
+                        ui.label('').style('color: #bdbdbd;')
+                    else:
+                        ui.label('No active project').style('color: #bdbdbd;')
+                
+                if current_project:
+                    ui.label(current_project.message).style('color: #888; margin-top: 8px; font-size: 13px;')
+                    ui.label('Last update: ' + current_project.updated_at.strftime('%H:%M:%S')).style('color: #bdbdbd; font-size: 12px; margin-top: 5px;')
+                else:
+                    ui.label('Waiting for a new project...').style('color: #888; margin-top: 8px; font-size: 13px;')
+            
+            # Separator
+            ui.separator(style='margin: 15px 0; color: rgba(255, 255, 255, 0.3);')
+            
+            # Active Projects Section
+            with ui.column().style('background: rgba(255, 255, 255, 0.08); padding: 20px; border-radius: 12px; margin-bottom: 15px;') as projects_section:
+                ui.label('📁 Active Projects').style('font-size: 18px; font-weight: bold; color: #81c784; margin-bottom: 10px;')
+                
+                with ui.row().style('gap: 10px;') as projects_list:
+                    for i, project in enumerate(recent_projects[:3], 1):
+                        with ui.card().props('elevated rounded').style('background: rgba(0, 255, 136, 0.15); border: 1px solid rgba(0, 255, 136, 0.4);') as project_item:
+                            ui.label(str(i + len(recent_projects)) + '. ' + project.project_name).style('font-size: 16px; font-weight: bold; color: white;')
+                            ui.label('• Agent: Orchestrator').style('font-size: 12px; color: #bdbdbd;')
+                            ui.label('• Status: ' + project.status).style('font-size: 11px; color: #81c784; margin-top: 3px;')
+                if not recent_projects:
+                    ui.label('No active projects yet.').style('font-size: 14px; color: #bdbdbd;')
+            
+            # Separator
+            ui.separator(style='margin: 15px 0; color: rgba(255, 255, 255, 0.3);')
+            
+            # Audit Trail Section
+            with ui.column().style('background: rgba(255, 255, 255, 0.08); padding: 20px; border-radius: 12px; margin-bottom: 15px;') as audit_section:
+                ui.label('📜 Audit Trail').style('font-size: 18px; font-weight: bold; color: #ffe082; margin-bottom: 10px;')
+                
+                with ui.data_table(
+                    headers=['Timestamp', 'Component', 'Action', 'Level'],
+                    columns=[
+                        {'name': 'Timestamp', 'field': 'created_at', 'width': '180px'},
+                        {'name': 'Component', 'field': 'component', 'width': '150px'},
+                        {'name': 'Action', 'field': 'action', 'width': '250px'},
+                        {'name': 'Level', 'field': 'log_level', 'width': '100px'},
+                    ],
+                    row_height=36,
+                ) as table:
+                    # Populate table with audit trail data
+                    audit_rows = []
+                    for audit in recent_audits:
+                        status = 'Success' if audit.log_level.upper() in ['INFO', 'SUCCESS'] else audit.log_level.upper()
+                        audit_rows.append({
+                            'created_at': audit.created_at.strftime('%Y-%m-%d %H:%M:%S'),
+                            'component': audit.component or 'System',
+                            'action': audit.action or audit.message[:50],
+                            'log_level': status[:15],
+                        })
+                    table.rows = audit_rows
+                
+                if not recent_audits:
+                    ui.label('No audit trail entries yet.').style('font-size: 12px; color: #bdbdbd;')
+            
+            # Separator
+            ui.separator(style='margin: 15px 0; color: rgba(255, 255, 255, 0.3);')
+            
+            # System Logs Section
+            with ui.column().style('background: rgba(255, 255, 255, 0.08); padding: 20px; border-radius: 12px;') as logs_section:
+                ui.label('⚙️ System Logs').style('font-size: 18px; font-weight: bold; color: #ff8a80; margin-bottom: 10px;')
+                
+                with ui.data_table(
+                    headers=['Component', 'Level', 'Message'],
+                    columns=[
+                        {'name': 'Component', 'field': 'component', 'width': '150px'},
+                        {'name': 'Level', 'field': 'log_level', 'width': '100px'},
+                        {'name': 'Message', 'field': 'log_message', 'width': '450px'},
+                    ],
+                    row_height=32,
+                ) as logs_table:
+                    logs_table.rows = [
+                        {
+                            'component': log.component,
+                            'log_level': log.log_level,
+                            'log_message': log.log_message[:50] + '...' if len(log.log_message) > 50 else log.log_message
+                        }
+                        for log in recent_logs
+                    ]
+                
+                if not recent_logs:
+                    ui.label('No system logs yet.').style('font-size: 12px; color: #bdbdbd;')
+            
+            # Separator
+            ui.separator(style='margin: 15px 0; color: rgba(255, 255, 255, 0.3);')
+            
+            # API Endpoints Section
+            with ui.expansion_group('🔗 Available API Endpoints', default_open=True).props('dense') as api_section:
+                with ui.column().style('font-size: 12px; color: #78909c;') as endpoint_list:
+                    endpoints = [
+                        ['/ (root)', 'Dashboard'],
+                        ['/generate', 'Generate new software (POST)'],
+                        ['/health', 'Health check'],
+                        ['/projects', 'List all projects'],
+                        ['/status/{project_id}', 'Get project status'],
+                        ['/audit/projects', 'Get project audit data'],
+                        ['/audit/logs', 'Get system logs'],
+                        ['/audit/trail', 'Get audit trail'],
+                        ['/audit/actions', 'Get user actions'],
+                        ['/audit/history', 'Get project history'],
+                        ['/audit/prompts', 'Get prompts'],
+                        ['/audit/changes', 'Get code changes'],
+                        ['/init-db', 'Initialize database (POST)'],
+                    ]
+                    for endpoint, desc in endpoints:
+                        ui.label(f'• {endpoint:<30} {desc}')
+    finally:
+        db_session.close()
+
+
+def run_app(port=None, reload=False, browser=True, storage_secret=None):
+    """Run the NiceGUI app."""
+    ui.run(title='AI Software Factory Dashboard', port=port, reload=reload, browser=browser, storage_secret=storage_secret)
+
+
+# Create and run the app
+if __name__ in {'__main__', '__console__'}:
+    create_dashboard()
+    run_app()

ai_software_factory/database.py

@@ -66,20 +66,6 @@ def get_session() -> Session:
     return session_factory
 
 
-def init_db() -> None:
-    """Initialize database tables."""
-    engine = get_engine()
-    Base.metadata.create_all(bind=engine)
-    print("Database tables created successfully.")
-
-
-def drop_db() -> None:
-    """Drop all database tables (use with caution!)."""
-    engine = get_engine()
-    Base.metadata.drop_all(bind=engine)
-    print("Database tables dropped successfully.")
-
-
 def get_db() -> Session:
     """Dependency for FastAPI routes that need database access."""
     engine = get_engine()
@@ -92,12 +78,34 @@ def get_db() -> Session:
         session.close()
 
 
+def get_db_sync() -> Session:
+    """Get a database session directly (for non-FastAPI/NiceGUI usage)."""
+    engine = get_engine()
+    SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+    session = SessionLocal()
+    return session
+
+
 def get_db_session() -> Session:
     """Get a database session directly (for non-FastAPI usage)."""
     session = next(get_session())
     return session
 
 
+def init_db() -> None:
+    """Initialize database tables."""
+    engine = get_engine()
+    Base.metadata.create_all(bind=engine)
+    print("Database tables created successfully.")
+
+
+def drop_db() -> None:
+    """Drop all database tables (use with caution!)."""
+    engine = get_engine()
+    Base.metadata.drop_all(bind=engine)
+    print("Database tables dropped successfully.")
+
+
 def create_migration_script() -> str:
     """Generate a migration script for database schema changes."""
     return '''-- Migration script for AI Software Factory database

ai_software_factory/frontend.py

@@ -0,0 +1,32 @@
+"""Frontend module for NiceGUI with FastAPI integration.
+
+This module provides the NiceGUI frontend that can be initialized with a FastAPI app.
+The dashboard shown is from dashboard_ui.py with real-time database data.
+"""
+
+from fastapi import FastAPI
+
+from nicegui import app, ui
+from dashboard_ui import create_dashboard
+
+
+def init(fastapi_app: FastAPI, storage_secret: str = 'Secr2t!') -> None:
+    """Initialize the NiceGUI frontend with the FastAPI app.
+    
+    Args:
+        fastapi_app: The FastAPI application instance.
+        storage_secret: Optional secret for persistent user storage.
+    """
+    
+    @ui.page('/show')
+    def show():
+        create_dashboard()
+        
+        # NOTE dark mode will be persistent for each user across tabs and server restarts
+        ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
+        ui.checkbox('dark mode').bind_value(app.storage.user, 'dark_mode')
+    
+    ui.run_with(
+        fastapi_app,
+        storage_secret=storage_secret,  # NOTE setting a secret is optional but allows for persistent storage per user
+    )

ai_software_factory/requirements.txt

@@ -15,4 +15,5 @@ isort==5.13.2
 flake8==6.1.0
 mypy==1.7.1
 httpx==0.25.2
-jinja2==3.1.3
+nicegui==1.4.19
+pydantic-settings==2.1.0

ai_software_factory/start.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+# use path of this example as working directory; enables starting this script from anywhere
+cd "$(dirname "$0")"
+
+if [ "$1" = "prod" ]; then
+    echo "Starting Uvicorn server in production mode..."
+    # we also use a single worker in production mode so socket.io connections are always handled by the same worker
+    uvicorn main:app --workers 1 --log-level info --port 80
+elif [ "$1" = "dev" ]; then
+    echo "Starting Uvicorn server in development mode..."
+    # reload implies workers = 1
+    uvicorn main:app --reload --log-level debug --port 8000
+else
+    echo "Invalid parameter. Use 'prod' or 'dev'."
+    exit 1
+fi