Merge pull request #162 from SDNNetSim/feat/gui

feat(gui): Add web-based GUI for FUSION

Author: ryanmccann1024

.gitignore

@@ -20,6 +20,7 @@ data/output
 data/plots
 data/excel
 data/training_data
+data/gui_runs/
 
 logs/*
 

Makefile

@@ -1,7 +1,7 @@
 # FUSION Project Makefile
 # Provides convenient commands for development and validation
 
-.PHONY: help install lint test validate clean check-env precommit-install precommit-run
+.PHONY: help install lint test validate clean check-env precommit-install precommit-run lint-frontend validate-frontend
 
 # Default target
 help:
@@ -16,8 +16,10 @@ help:
 	@echo "  check-env          Check if virtual environment is activated"
 	@echo ""
 	@echo "Validation (run before submitting PR):"
-	@echo "  validate           Run all pre-commit checks on all files"
+	@echo "  validate           Run all checks (backend + frontend + tests)"
 	@echo "  lint               Run pre-commit checks on all files"
+	@echo "  lint-frontend      Run frontend linting (ESLint)"
+	@echo "  validate-frontend  Run frontend lint + TypeScript build"
 	@echo "  precommit-run      Run pre-commit on staged files only"
 	@echo "  test               Run unit tests with pytest"
 	@echo ""
@@ -86,13 +88,42 @@ precommit-run: check-env
 	@echo "🔍 Running pre-commit checks on staged files..."
 	pre-commit run
 
+# Frontend linting
+lint-frontend:
+	@echo "Running frontend ESLint..."
+	@if [ -d "frontend" ] && [ -f "frontend/package.json" ]; then \
+		cd frontend && npm run lint; \
+	else \
+		echo "Frontend directory not found, skipping..."; \
+	fi
+
+# Frontend validation (lint + build)
+validate-frontend:
+	@echo "Running frontend validation (lint + TypeScript build)..."
+	@if [ -d "frontend" ] && [ -f "frontend/package.json" ]; then \
+		cd frontend && npm run lint && npm run build; \
+	else \
+		echo "Frontend directory not found, skipping..."; \
+	fi
+
 # Full PR validation - run all pre-commit checks on all files
 validate: check-env
-	@echo "🚀 Running complete validation (pre-commit + tests)..."
-	@echo "Running pre-commit checks on all files..."
+	@echo "Running complete validation (backend + frontend + tests)..."
+	@echo ""
+	@echo "=== Backend: Pre-commit checks ==="
 	pre-commit run --all-files
-	@echo "Running unit tests..."
+	@echo ""
+	@echo "=== Frontend: Lint + TypeScript build ==="
+	@if [ -d "frontend" ] && [ -f "frontend/package.json" ]; then \
+		cd frontend && npm run lint && npm run build; \
+	else \
+		echo "Frontend directory not found, skipping..."; \
+	fi
+	@echo ""
+	@echo "=== Running unit tests ==="
 	python -m pytest
+	@echo ""
+	@echo "Validation complete!"
 
 # Lint only - run all pre-commit checks
 lint: check-env

docs/_static/images/gui/README.txt

@@ -0,0 +1,38 @@
+# GUI Screenshots
+
+This directory contains screenshots for the GUI documentation.
+
+## Required Screenshots
+
+Capture these screenshots from the running GUI at http://127.0.0.1:8765:
+
+| Filename | Page | What to Capture |
+|----------|------|-----------------|
+| `run-list-page.png` | RunListPage (`/`) | Multiple run cards with varied statuses (pending, running, completed, failed) |
+| `new-run-page.png` | NewRunPage (`/runs/new`) | Form with template dropdown expanded |
+| `run-detail-logs.png` | RunDetailPage | Logs tab showing log content |
+| `run-detail-artifacts.png` | RunDetailPage | Artifacts tab showing file browser |
+| `topology-page.png` | TopologyPage (`/topology`) | Network graph with a node selected |
+| `config-editor.png` | ConfigEditorPage (`/config`) | Editor showing INI content |
+| `codebase-architecture.png` | CodebaseExplorerPage (`/codebase`) | Architecture view with module cards |
+| `codebase-code.png` | CodebaseExplorerPage | Code view with file tree and code panel |
+| `settings-page.png` | SettingsPage (`/settings`) | Theme selection options |
+
+## Guidelines
+
+- Use a consistent browser window size (1280x800 recommended)
+- Capture only the content area, not browser chrome
+- Use light theme for consistent documentation appearance
+- Ensure no sensitive or personal data is visible
+- Save as PNG format
+
+## After Capturing
+
+Once screenshots are added, update the `[Screenshot: ...]` placeholders in
+`docs/getting-started/gui/features.rst` with actual image directives:
+
+```rst
+.. image:: /_static/images/gui/run-list-page.png
+   :alt: Run list page showing simulation runs
+   :width: 100%
+```