# Project Plan: Bootstrap UI with Fiber and Jet

**Goal:** Develop a new UI module using Go (Fiber framework), Jet templates, and Bootstrap 5, following an MVC pattern. The UI will include a dashboard and a process manager page.

**Location:** `pkg/servers/ui`

---

## 1. Directory Structure (MVC)

We'll establish a clear MVC structure within `pkg/servers/ui`:

```mermaid
graph TD
    A[pkg/servers/ui] --> B(app.go);
    A --> C(controllers);
    A --> M(models);
    A --> V(views);
    A --> S(static);
    A --> R(routes);

    C --> C1(auth_controller.go);
    C --> C2(dashboard_controller.go);
    C --> C3(process_controller.go);

    M --> M1(process_model.go);
    M --> M2(user_model.go);

    V --> VL(layouts);
    V --> VP(pages);
    V --> VC(components);

    VL --> VLL(base.jet);

    VP --> VPD(dashboard.jet);
    VP --> VPP(process_manager.jet);
    VP --> VPL(login.jet);

    VC --> VCN(navbar.jet);
    VC --> VCS(sidebar.jet);

    S --> SCSS(css);
    S --> SJS(js);
    S --> SIMG(img);

    SCSS --> custom.css; // For any custom styles

    SJS --> custom.js; // For any custom JavaScript

    R --> R1(router.go);
```

**Detailed Breakdown:**

*   **`pkg/servers/ui/app.go`:** Main application setup for this UI module. Initializes Fiber, Jet, routes, and middleware.
*   **`pkg/servers/ui/controllers/`**: Handles incoming requests, interacts with models, and selects views.
    *   `auth_controller.go`: Handles login/logout (stubs for now).
    *   `dashboard_controller.go`: Handles the dashboard page.
    *   `process_controller.go`: Handles the process manager page.
*   **`pkg/servers/ui/models/`**: Business logic and data interaction.
    *   `process_model.go`: Interacts with `pkg/system/processmanager` to fetch and manage process data.
    *   `user_model.go`: (Placeholder for basic auth stubs).
*   **`pkg/servers/ui/views/`**: Jet templates.
    *   **`layouts/`**: Base layout templates.
        *   `base.jet`: Main site layout (includes Bootstrap, navbar, sidebar, main content area).
    *   **`pages/`**: Specific page templates.
        *   `dashboard.jet`: Dashboard content.
        *   `process_manager.jet`: Process manager table and controls.
        *   `login.jet`: (Placeholder login page).
    *   **`components/`**: Reusable UI components.
        *   `navbar.jet`: Top navigation bar.
        *   `sidebar.jet`: Left tree menu.
*   **`pkg/servers/ui/static/`**: Local static assets.
    *   **`css/`**: Custom CSS files.
        *   `custom.css`
    *   **`js/`**: Custom JavaScript files.
        *   `custom.js`
    *   **`img/`**: Image assets.
*   **`pkg/servers/ui/routes/router.go`:** Defines URL routes and maps them to controller actions.

---

## 2. Core UI Components

*   **Base Layout (`views/layouts/base.jet`):**
    *   HTML5 boilerplate.
    *   Include Bootstrap 5 CSS from CDN:
        ```html
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
        ```
    *   Include Bootstrap 5 JS Bundle from CDN (typically placed before the closing `</body>` tag):
        ```html
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
        ```
    *   Include local custom CSS (e.g., `/static/css/custom.css`).
    *   Include local custom JS (e.g., `/static/js/custom.js`).
    *   Structure:
        *   Navbar (include `components/navbar.jet`)
        *   Main container (Bootstrap `container-fluid` or similar)
            *   Sidebar (include `components/sidebar.jet`)
            *   Content area (where page-specific content will be injected)
*   **Navbar (`views/components/navbar.jet`):**
    *   Bootstrap Navbar component.
    *   Site title/logo.
    *   Login/Logout buttons (stubs, basic links for now).
*   **Sidebar/Tree Menu (`views/components/sidebar.jet`):**
    *   Bootstrap navigation component (e.g., Navs, List group).
    *   Links:
        *   Dashboard
        *   Process Manager

---

## 3. Pages

*   **Dashboard Page:**
    *   **Controller (`controllers/dashboard_controller.go`):**
        *   `ShowDashboard()`: Renders the dashboard page.
    *   **View (`views/pages/dashboard.jet`):**
        *   Extends `layouts/base.jet`.
        *   Simple placeholder content for now (e.g., "Welcome to the Dashboard!").
*   **Process Manager Page:**
    *   **Model (`models/process_model.go`):**
        *   `GetProcesses()`: Function to call `pkg/system/processmanager` to get a list of running processes. Will need to define a struct for process information (PID, Name, CPU, Memory).
        *   `KillProcess(pid string)`: Function to call `pkg/system/processmanager` to terminate a process.
    *   **Controller (`controllers/process_controller.go`):**
        *   `ShowProcessManager()`:
            *   Calls `models.GetProcesses()`.
            *   Passes process data to the view.
            *   Renders `views/pages/process_manager.jet`.
        *   `HandleKillProcess()`: (Handles POST request to kill a process)
            *   Extracts PID from request.
            *   Calls `models.KillProcess(pid)`.
            *   Redirects back to the process manager page or returns a status.
    *   **View (`views/pages/process_manager.jet`):**
        *   Extends `layouts/base.jet`.
        *   Displays processes in a Bootstrap table:
            *   Columns: PID, Name, CPU, Memory, Actions.
            *   Actions column: "Kill" button for each process (linking to `HandleKillProcess` or using JS for an AJAX call).

---

## 4. Fiber & Jet Integration (`app.go` and `routes/router.go`)

*   **`pkg/servers/ui/app.go`:**
    *   `NewApp()` function:
        *   Initialize Fiber app: `fiber.New()`.
        *   Initialize Jet template engine:
            *   `jet.NewSet(jet.NewOSFileSystemLoader("./pkg/servers/ui/views"), jet.InDevelopmentMode())` (or adjust path as needed).
            *   Pass Jet views to Fiber: `app.Settings.Views = views`.
        *   Setup static file serving: `app.Static("/static", "./pkg/servers/ui/static")`.
        *   Setup routes: Call a function from `routes/router.go`.
        *   Return the Fiber app instance.
    *   This `app.go` can then be imported and run from your main application entry point (e.g., in `cmd/heroagent/main.go`).
*   **`pkg/servers/ui/routes/router.go`:**
    *   `SetupRoutes(app *fiber.App, processController *controllers.ProcessController, ...)` function:
        *   `app.Get("/", dashboardController.ShowDashboard)`
        *   `app.Get("/processes", processController.ShowProcessManager)`
        *   `app.Post("/processes/kill/:pid", processController.HandleKillProcess)` (or similar for kill action)
        *   `app.Get("/login", authController.ShowLoginPage)` (stub)
        *   `app.Post("/login", authController.HandleLogin)` (stub)
        *   `app.Get("/logout", authController.HandleLogout)` (stub)

---

## 5. Authentication Stubs

*   **`controllers/auth_controller.go`:**
    *   `ShowLoginPage()`: Renders a simple login form.
    *   `HandleLogin()`: Placeholder logic (e.g., always "logs in" or checks a hardcoded credential). Sets a dummy session/cookie.
    *   `HandleLogout()`: Placeholder logic. Clears dummy session/cookie.
*   **`views/pages/login.jet`:**
    *   Simple Bootstrap form for username/password.

---

## 6. Dependencies (go.mod)

Ensure these are added to your `go.mod` file:
*   `github.com/gofiber/fiber/v2`
*   `github.com/CloudyKit/jet/v6`

---

## Request Flow Example: Process Manager Page

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant FiberApp [Fiber App (pkg/servers/ui/app.go)]
    participant Router [routes/router.go]
    participant ProcessCtrl [controllers/process_controller.go]
    participant ProcessMdl [models/process_model.go]
    participant SysProcMgr [pkg/system/processmanager]
    participant JetEngine [CloudyKit/jet/v6]
    participant View [views/pages/process_manager.jet]

    User->>Browser: Navigates to /processes
    Browser->>FiberApp: GET /processes
    FiberApp->>Router: Route request
    Router->>ProcessCtrl: Calls ShowProcessManager()
    ProcessCtrl->>ProcessMdl: Calls GetProcesses()
    ProcessMdl->>SysProcMgr: Fetches process list
    SysProcMgr-->>ProcessMdl: Returns process data
    ProcessMdl-->>ProcessCtrl: Returns process data
    ProcessCtrl->>JetEngine: Renders process_manager.jet with data
    JetEngine->>View: Populates template
    View-->>JetEngine: Rendered HTML
    JetEngine-->>ProcessCtrl: Rendered HTML
    ProcessCtrl-->>FiberApp: Returns HTML response
    FiberApp-->>Browser: Sends HTML response
    Browser->>User: Displays Process Manager page