{
    "project": "Network Classroom - systemd-networkd Web UI",
    "version": "0.3",
    "goal": "Educational web interface for teaching network fundamentals through practical router configuration with systemd-networkd",
    "target_audience": "High school students learning basic networking concepts",
    "core_principles": [
        "Progressive disclosure - show simple concepts first, advanced options later",
        "Visual learning - use diagrams and color coding",
        "Safe experimentation - easy undo/redo and validation",
        "Real-world relevance - connect concepts to actual network behavior"
    ],
    "requirements": {
        "functional": [
            {
                "id": "F-001",
                "description": "The system shall provide an educational dashboard showing network topology with visual representation of interfaces (WAN, LAN, wireless) and their connections."
            },
            {
                "id": "F-002",
                "description": "The system shall parse `networkctl status --json=short` and present interfaces in an educational panel showing: name, type (WAN/LAN), MAC, state (color-coded), IP addresses, routes, DNS with tooltips explaining each concept."
            },
            {
                "id": "F-003",
                "description": "The system shall provide guided configuration wizards for common scenarios: Home Router, School Lab, Internet Cafe, with explanations of each setup choice."
            },
            {
                "id": "F-004",
                "description": "The system shall allow browsing of configuration files with educational annotations explaining what each section does in simple terms."
            },
            {
                "id": "F-005",
                "description": "The system shall provide inline configuration editing with two modes: Simple (form-based with explanations) and Advanced (raw file editing with syntax highlighting)."
            },
            {
                "id": "F-006",
                "description": "The system shall include network simulation mode showing how configuration changes would affect packet flow before applying changes."
            },
            {
                "id": "F-007",
                "description": "The system shall maintain version history with educational notes about what each change accomplished (e.g., 'Added DHCP server for student devices')."
            },
            {
                "id": "F-008",
                "description": "The system shall include built-in tutorials: IP addressing, subnetting, NAT, firewall basics, DNS configuration."
            },
            {
                "id": "F-009",
                "description": "The system shall provide safe testing environment with pre-commit validation and the ability to quickly revert to known working configuration."
            },
            {
                "id": "F-010",
                "description": "The system shall include network diagnostics tools with educational explanations: ping, traceroute, port testing with visual results."
            }
        ],
        "technical": [
            {
                "id": "T-001",
                "description": "The backend shall be implemented in Go with RESTful API designed for educational use cases."
            },
            {
                "id": "T-002",
                "description": "The frontend shall use vanilla HTML/CSS/JS with custom educational-focused styling - avoid heavy frameworks for better learning and performance."
            },
            {
                "id": "T-003",
                "description": "The system shall include configuration templates for educational scenarios with inline documentation."
            },
            {
                "id": "T-004",
                "description": "Configuration validation shall include both technical checks (`systemd-analyze verify`) and educational warnings (e.g., 'This will make the device unreachable from network - are you sure?')."
            },
            {
                "id": "T-005",
                "description": "The system shall implement atomic operations with automatic backups and easy rollback functionality."
            },
            {
                "id": "T-006",
                "description": "The frontend shall include interactive network diagrams that update based on configuration changes."
            },
            {
                "id": "T-007",
                "description": "The system shall provide REST API endpoints for educational workflows: template application, simulation mode, diagnostic tests."
            },
            {
                "id": "T-008",
                "description": "All operations shall be logged with educational context for review and learning."
            }
        ],
        "educational": [
            {
                "id": "E-001",
                "description": "Each configuration option shall have beginner-friendly explanation with examples of when to use it."
            },
            {
                "id": "E-002",
                "description": "The interface shall include learning progression from basic (IP addresses) to advanced (firewall rules, VLANs)."
            },
            {
                "id": "E-003",
                "description": "The system shall provide immediate feedback showing how configuration changes affect network behavior."
            },
            {
                "id": "E-004",
                "description": "Complex concepts shall be broken down with analogies (e.g., 'IP addresses are like street addresses for computers')."
            }
        ]
    },
    "ui_recommendation": {
        "styling_approach": "Use custom CSS with minimal, education-focused design",
        "rationale": "Fluent UI is enterprise-focused and may be overwhelming for students. A simpler, custom design will be more approachable and educational.",
        "design_principles": [
            "Clean, uncluttered interface with ample whitespace",
            "Color coding for different interface types and states",
            "Progressive disclosure - show advanced options only when needed",
            "Consistent, predictable navigation",
            "Mobile-responsive for tablet use in classrooms"
        ]
    }
}