System Panel

System Panel

The System tab is one of 5 main tabs in the Elisa UI. It serves as an architecture explorer that shows different views depending on the build phase: during design it displays the NuggetSpec structure, and during/after building it shows the task dependency graph with interactive task details.

Overview

The System Panel helps kids understand:

• Pre-build: What they've designed (goals, requirements, agents, portals, devices, deployment target)
• During/Post-build: How the system breaks down into tasks and which agents handle each task

This visual architecture view complements the Mission Control tab (which shows real-time execution) by focusing on structure rather than activity.

Pre-Build View: Nugget Spec

When a NuggetSpec is loaded but the build hasn't started, the System Panel shows the design blueprint:

Section	Shows
Nugget Goal	Primary goal and description; type badge (e.g., "web", "iot")
Requirements	List of requirements grouped by type (functional, visual, hardware, etc.)
Agents	Team members assigned to the project and their roles
Deployment	Target platform (e.g., "web", "iot", "box-3")
Portals	External API connections and data sources
Devices	Hardware devices (ESP32, sensors, BOX-3, etc.)

This lets kids verify their design is complete before triggering the build.

During/Post-Build View: Architecture Explorer

Once the build starts, the System Panel shifts to show the generated task architecture. The view has two columns:

Left Column: Task List

• Scrollable list of all tasks generated from the spec
• Each task card shows:
  • Task name
  • Status badge (Done / In Progress / Pending / Failed)
  • Assigned agent name
• Click any task to inspect its details

Right Panel: Task Detail

Shows full information for the selected task:

Field	Contains
Task Name & Status	Display with status badge
Description	What the task accomplishes
Agent	Agent responsible for execution
Acceptance Criteria	Bullet list of success conditions
Test Results	Related test outcomes (pass/fail); uses fuzzy matching on task name
Dependencies	List of task IDs this task depends on

Click the same task again to deselect and clear the detail panel.

Summary Bar

At the top of the architecture explorer, a horizontal bar displays key metrics:

Tasks: 3/8  |  Tests: 7/10  |  Health: 82%

• Tasks: Completed / Total
• Tests: Passing / Total
• Health: System health score (% quality, only shown if available)

The health score color changes based on value:

• Green (80%+): Healthy
• Yellow (50-79%): Caution
• Red (<50%): Critical

Impact Preview (Pre-Execution)

The ImpactEstimator service provides pre-execution complexity analysis on NuggetSpec to help kids understand what they're about to build:

interface ImpactEstimate {
  estimated_tasks: number;      // Predicted task count
  complexity: Complexity;        // 'simple' | 'moderate' | 'complex'
  heaviest_requirements: string[];  // Top 3-5 requirements by impact
  requirement_details: RequirementDetail[];
}

This is used in the ImpactPreview shared component to show:

• Estimated number of tasks the system will generate
• Overall complexity level (based on requirements, devices, portals, feedback loops, reviewer presence)
• Which requirements will be "heaviest" (require most tasks)

The estimation uses count-based heuristics:

• 1 base task per requirement
• +1 per device
• +1 for testing (if tests exist)
• +1 for portal setup (if portals exist)
• Additional review tasks if a reviewer agent is configured

Boundary Analysis

The BoundaryAnalyzer service identifies system boundaries before build. It classifies inputs and outputs by type:

Input Types

• user_input - Form fields, button clicks, keyboard input, touch
• portal_data - Data flowing in from external APIs
• hardware_signal - Sensor readings, device interrupts

Output Types

• display - Screen rendering, LED updates
• hardware_command - Motor control, actuator commands
• data_output - File saves, API responses

Boundary Items

The BoundaryAnalysis interface provides:

• inputs[] - All detected input items
• outputs[] - All detected output items
• boundary_portals[] - Portal names that sit on system boundary

Detection is heuristic-based, scanning requirement descriptions for keywords like "display", "button", "sensor", "API", etc. This helps kids visualize what their system takes in and what it produces.

Implementation Details

Component Structure

SystemPanel.tsx
├── SpecView                  Pre-build: displays NuggetSpec structure
├── SummaryBar               Post-build: task count, test count, health score
├── TaskList
│   └── TaskCard             Clickable task with status badge
└── TaskDetail               Right panel showing full task info
    ├── Description
    ├── Agent assignment
    ├── Acceptance Criteria
    ├── Test Results (filtered by name match)
    └── Dependencies

State

selectedTaskId: string | null      // Currently selected task (togglable)
tasks: Task[]                       // From BuildSessionContext
testResults: TestResult[]          // From BuildSessionContext
spec: NuggetSpec | undefined       // From WorkspaceContext
healthUpdate: HealthMetrics | null // From BuildSessionContext
uiState: 'design' | 'building' | 'review' | 'deploy' | 'done'

UI Phases

uiState	hasTasks	Shows
design/building	no	SpecView (if spec exists) or empty state
building/done	yes	Architecture explorer

Test Matching Logic

Related test results in task detail use fuzzy matching: a test is included if its name contains the task name or task ID (case-insensitive). This allows tests like "Setup project init test" to surface when viewing the "Setup project" task.

Status Badges

Status	Badge Style	Meaning
done	Green	Task completed successfully
in_progress	Blue	Task currently running
pending	Gray	Task not started, dependencies may block
failed	Red	Task failed; fix may be required

Related Components

• MissionControl: Real-time task execution, Narrator feed, agent activity
• TaskMap: Full-width interactive DAG visualization (alternate system view)
• ImpactPreview: Pre-execution complexity card (shown before build)
• HealthDashboard: Post-build health analytics and trend charts

Files

• frontend/src/components/SystemPanel/SystemPanel.tsx - Main component
• frontend/src/components/SystemPanel/BoundaryColumn.tsx - Boundary input/output visualization
• backend/src/services/impactEstimator.ts - Pre-execution complexity analysis
• backend/src/services/boundaryAnalyzer.ts - System boundary detection