Merge pull request #323 from lbedner/fix-overseer-modals

Fix overseer modals

Author: lbedner

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/backend/startup/component_health.py.j2

@@ -228,19 +228,28 @@ async def _frontend_component_health() -> ComponentStatus:
     """
     try:
         # Check if frontend component is available
+        from importlib.metadata import version
+
         from app.components.frontend.main import create_frontend_app
 
         # Verify the frontend app factory function works
         create_frontend_app()
 
+        # Get Flet version safely
+        try:
+            flet_version = version("flet")
+        except Exception:
+            flet_version = "unknown"
+
         return ComponentStatus(
             name="frontend",
             status=ComponentStatusType.HEALTHY,
             message="Flet frontend component available",
             response_time_ms=None,
             metadata={
                 "type": "component_check",
-                "framework": "flet",
+                "framework": "Flet",
+                "version": flet_version,
                 "note": "Frontend integrated with FastAPI",
             },
         )

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/frontend/dashboard/cards/card_utils.py.j2

@@ -238,17 +238,18 @@ def create_progress_indicator(
 
 
 def create_modal_for_component(
-    component_name: str, component_data: ComponentStatus
-) -> ft.AlertDialog | None:
+    component_name: str, component_data: ComponentStatus, page: ft.Page
+) -> ft.Container | None:
     """
-    Factory function to create appropriate modal dialog for a component.
+    Factory function to create appropriate popup dialog for a component.
 
     Args:
         component_name: Name of the component (e.g., "scheduler", "worker")
         component_data: ComponentStatus containing component health and metrics
+        page: The Flet page instance
 
     Returns:
-        AlertDialog instance for the component, or None if component not supported
+        Popup Container instance for the component, or None if component not supported
     """
     from ..modals import (
         {%- if cookiecutter.include_ai == "yes" %}
@@ -276,7 +277,7 @@ def create_modal_for_component(
         {%- endif %}
     )
 
-    modal_map: dict[str, type[ft.AlertDialog]] = {
+    modal_map: dict[str, type[ft.Container]] = {
         {%- if cookiecutter.include_ai == "yes" %}
         "ai": AIDetailDialog,
         {%- endif %}
@@ -304,7 +305,7 @@ def create_modal_for_component(
 
     modal_class = modal_map.get(component_name)
     if modal_class:
-        return modal_class(component_data)
+        return modal_class(component_data, page)
 
     return None
 
@@ -313,7 +314,7 @@ def create_card_click_handler(
     component_name: str, component_data: ComponentStatus
 ) -> Callable[[ft.ControlEvent], None]:
     """
-    Create a click handler for a card that opens its detail modal.
+    Create a click handler for a card that opens its detail popup.
 
     Args:
         component_name: Name of the component
@@ -324,10 +325,16 @@ def create_card_click_handler(
     """
 
     def handle_click(e: ft.ControlEvent) -> None:
-        """Handle card click by opening detail modal."""
-        modal = create_modal_for_component(component_name, component_data)
-        if modal and e.page:
-            e.page.open(modal)
+        """Handle card click by opening detail popup."""
+        if not e.page:
+            return
+
+        popup = create_modal_for_component(component_name, component_data, e.page)
+        if popup:
+            # Add to page overlay and show
+            e.page.overlay.append(popup)
+            popup.show()
+            e.page.update()
 
     return handle_click
 

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/frontend/dashboard/modals/__init__.py

@@ -0,0 +1,15 @@
+"""Modal components for the Overseer dashboard."""
+
+from app.components.frontend.dashboard.modals.base_modal import BaseDetailDialog
+from app.components.frontend.dashboard.modals.modal_sections import (
+    EmptyStatePlaceholder,
+    MetricCardSection,
+    StatRowsSection,
+)
+
+__all__ = [
+    "BaseDetailDialog",
+    "MetricCardSection",
+    "StatRowsSection",
+    "EmptyStatePlaceholder",
+]