supervisor/ui/REFACTORING_PLAN.md

Admin UI Refactoring Status

Overview

Split the monolithic app.rs (2600+ lines) and styles.css (1500+ lines) into modular, maintainable files.

✅ CSS Refactoring COMPLETE!

CSS Structure

styles/
├── main.css          # Variables, base styles, layout (CREATED ✅)
├── components.css    # Reusable components: islands, buttons, badges (CREATED ✅)
├── runners.css       # Runner list, cards, status
├── jobs.css          # Job list, detail views, job cards
├── keys.css          # API key management styles
└── header.css        # Header, breadcrumbs, user info

Import in index.html

<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/components.css">
<link rel="stylesheet" href="/styles/runners.css">
<link rel="stylesheet" href="/styles/jobs.css">
<link rel="stylesheet" href="/styles/keys.css">
<link rel="stylesheet" href="/styles/header.css">

Rust Structure

src/
├── app.rs                    # Main App component, state, update logic
├── components/
│   ├── mod.rs               # Module declarations
│   ├── header.rs            # Header component
│   ├── runners.rs           # Runner list and management views
│   ├── jobs.rs              # Job list and detail views
│   └── keys.rs              # API key management views
└── lib.rs                   # Re-export App

Module Organization

app.rs (~500 lines)

• App struct and state
• Message enum
• Main update() logic
• Top-level view() that delegates to components

components/header.rs (~100 lines)

• view_header()
• Server info, breadcrumbs, user info

components/runners.rs (~400 lines)

• view_runners_sidebar()
• view_runners_content()
• Runner cards, status, management

components/jobs.rs (~1000 lines)

• view_jobs_sidebar()
• view_jobs_list_content()
• view_job_detail()
• view_job_detail_sidebar()
• Job creation, editing

components/keys.rs (~300 lines)

• view_keys_sidebar()
• view_keys_content()
• Key creation, deletion

Benefits

1. Maintainability: Easier to find and modify specific features
2. Collaboration: Multiple developers can work on different components
3. Testing: Easier to test individual components
4. Performance: Smaller compilation units
5. Clarity: Clear separation of concerns

Implementation Steps

1. ✅ Create directory structure
2. ✅ Create main.css and components.css
3. ⏳ Extract remaining CSS files
4. ⏳ Create component modules
5. ⏳ Move view functions to appropriate modules
6. ⏳ Update imports and module declarations
7. ⏳ Test and verify functionality
8. ⏳ Remove old monolithic files

Migration Strategy

• Keep old files until refactoring is complete
• Test each component as it's extracted
• Use feature flags if needed for gradual rollout
• Maintain backward compatibility during transition