edda-framework 0.5.0__py3-none-any.whl → 0.7.0__py3-none-any.whl

edda/viewer_ui/app.py

@@ -5,6 +5,7 @@ NiceGUI application for interactive workflow instance visualization.
 import asyncio
 import contextlib
 import json
+from datetime import datetime
 from typing import Any
 
 from nicegui import app, ui  # type: ignore[import-not-found]
@@ -14,6 +15,7 @@ from nicegui.events import GenericEventArguments  # type: ignore[import-not-foun
 from edda import EddaApp
 from edda.viewer_ui.components import generate_hybrid_mermaid, generate_interactive_mermaid
 from edda.viewer_ui.data_service import WorkflowDataService
+from edda.viewer_ui.theme import TAILWIND_CLASSES, get_status_badge_classes
 
 
 def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> None:
@@ -42,32 +44,39 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
             detail: Execution detail dictionary
         """
         status = detail["status"]
-        if status == "completed":
-            ui.badge("Completed", color="green").classes("text-lg")
-        elif status == "running":
-            ui.badge("Running", color="yellow").classes("text-lg")
-        elif status == "failed":
-            ui.badge("Failed", color="red").classes("text-lg")
-        else:
-            ui.badge(status, color="gray").classes("text-lg")
-
-        ui.label(f"Executed: {detail['executed_at']}").classes("text-sm text-gray-600 mt-2")
-
-        ui.markdown("#### Input")
-        with ui.card().classes("w-full bg-gray-50 p-4"):
+        status_labels = {
+            "completed": "Completed",
+            "running": "Running",
+            "failed": "Failed",
+        }
+        label_text = status_labels.get(status, status)
+        ui.label(label_text).classes(f"text-lg {get_status_badge_classes(status)}")
+
+        ui.label(f"Executed: {detail['executed_at']}").classes(
+            f"text-sm mt-2 {TAILWIND_CLASSES['text_secondary']}"
+        )
+
+        ui.markdown("#### Input").classes(TAILWIND_CLASSES["text_primary"])
+        with ui.card().classes(f"w-full p-4 {TAILWIND_CLASSES['code_block']}"):
             ui.code(json.dumps(detail["input"], indent=2)).classes("w-full")
 
         if detail["output"] is not None:
-            ui.markdown("#### Output")
-            with ui.card().classes("w-full bg-gray-50 p-4"):
+            ui.markdown("#### Output").classes(TAILWIND_CLASSES["text_primary"])
+            with ui.card().classes(f"w-full p-4 {TAILWIND_CLASSES['code_block']}"):
                 ui.code(json.dumps(detail["output"], indent=2)).classes("w-full")
 
         if detail["error"]:
-            ui.markdown("#### Error")
-            with ui.card().classes("w-full bg-red-50 border-red-200 p-4"):
+            ui.markdown("#### Error").classes(TAILWIND_CLASSES["text_primary"])
+            with ui.card().classes(
+                "w-full p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800"
+            ):
                 if detail.get("error_type"):
-                    ui.label(f"Type: {detail['error_type']}").classes("text-red-700 font-bold")
-                ui.label(detail["error"]).classes("text-red-700 font-mono text-sm mt-2")
+                    ui.label(f"Type: {detail['error_type']}").classes(
+                        "text-red-700 dark:text-red-400 font-bold"
+                    )
+                ui.label(detail["error"]).classes(
+                    "text-red-700 dark:text-red-400 font-mono text-sm mt-2"
+                )
 
                 # Show stack trace if available
                 if detail.get("stack_trace"):
@@ -106,11 +115,11 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
                 # Header
                 if len(all_executions) > 1:
                     ui.label(f"{activity_name} (Executed {len(all_executions)} times)").classes(
-                        "text-2xl font-bold"
+                        f"text-2xl font-bold {TAILWIND_CLASSES['text_primary']}"
                     )
                 else:
-                    ui.label(f"{activity_name}: {detail['activity_id']}").classes(
-                        "text-2xl font-bold"
+                    ui.label(detail["activity_id"]).classes(
+                        f"text-2xl font-bold {TAILWIND_CLASSES['text_primary']}"
                     )
 
                 # Multiple executions: use tabs
@@ -140,7 +149,7 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
                     # Single execution: render directly
                     _render_execution_detail(detail)
 
-            ui.notify(f"Loaded {activity_name}: {activity_id}", type="positive")
+            ui.notify(f"Loaded {activity_id}", type="positive")
 
         except Exception as e:
             ui.notify(f"Error loading activity detail: {e}", type="negative")
@@ -149,38 +158,173 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
     app.on_connect(lambda: ui.on("step_click", handle_activity_click))
     app.on_connect(lambda: ui.on("activity_click", handle_activity_click))
 
+    # Initialize dark mode from system preference on first visit
+    async def init_dark_mode() -> None:
+        if "dark_mode" not in app.storage.user:
+            # First visit: detect system preference
+            try:
+                is_dark = await ui.run_javascript(
+                    "window.matchMedia('(prefers-color-scheme: dark)').matches",
+                    timeout=1.0,
+                )
+                app.storage.user["dark_mode"] = bool(is_dark)
+            except Exception:
+                # Default to light mode if detection fails
+                app.storage.user["dark_mode"] = False
+
+    app.on_connect(init_dark_mode)
+
     # Define index page
     @ui.page("/")  # type: ignore[misc]
     async def index_page() -> None:
         """Workflow instances list page."""
-        # Header with title and start button
+        # Bind dark mode to user storage (persists across pages and sessions)
+        ui.dark_mode().bind_value(app.storage.user, "dark_mode")
+
+        # Custom CSS and JS to ensure dark mode background is applied
+        ui.add_head_html(
+            """
+        <style>
+            /* Page background */
+            body.dark, body.body--dark {
+                background-color: #0F172A !important;  /* Slate 900 */
+            }
+            body:not(.dark):not(.body--dark) {
+                background-color: #FFFFFF !important;
+            }
+            .nicegui-content, .q-page, .q-layout {
+                background-color: transparent !important;
+            }
+            /* Fixed layout for index page - filter bar at top, pager at bottom, list scrolls */
+            .nicegui-content {
+                display: flex !important;
+                flex-direction: column !important;
+                height: 100vh !important;
+                overflow: hidden !important;
+            }
+            .instance-list-container {
+                flex: 1 !important;
+                overflow-y: auto !important;
+                min-height: 0 !important;
+            }
+            .pagination-controls {
+                flex-shrink: 0 !important;
+            }
+            /* Card backgrounds - Light mode (exclude error cards) */
+            body:not(.dark):not(.body--dark) .q-card:not(.bg-red-50) {
+                background-color: #FFFFFF !important;
+                border-color: #E2E8F0 !important;  /* Slate 200 */
+            }
+            body:not(.dark):not(.body--dark) .q-card:not(.bg-red-50):hover {
+                background-color: #F8FAFC !important;  /* Slate 50 */
+            }
+            /* Card backgrounds - Dark mode (exclude error cards) */
+            body.dark .q-card:not(.bg-red-50), body.body--dark .q-card:not(.bg-red-50) {
+                background-color: #1E293B !important;  /* Slate 800 */
+                border-color: #334155 !important;  /* Slate 700 */
+            }
+            body.dark .q-card:not(.bg-red-50):hover, body.body--dark .q-card:not(.bg-red-50):hover {
+                background-color: #334155 !important;  /* Slate 700 */
+            }
+            /* Error card backgrounds - Dark mode */
+            body.dark .q-card.bg-red-50, body.body--dark .q-card.bg-red-50 {
+                background-color: rgba(127, 29, 29, 0.3) !important;  /* Red 900/30 */
+                border-color: #991B1B !important;  /* Red 800 */
+            }
+            body.dark .bg-red-50 .text-red-700, body.body--dark .bg-red-50 .text-red-700 {
+                color: #FCA5A5 !important;  /* Red 300 */
+            }
+            /* Input fields - Light mode */
+            body:not(.dark):not(.body--dark) .q-field__control {
+                background-color: #FFFFFF !important;
+            }
+            /* Input fields - Dark mode */
+            body.dark .q-field__control, body.body--dark .q-field__control {
+                background-color: #1E293B !important;
+            }
+            body.dark .q-field__native, body.body--dark .q-field__native,
+            body.dark .q-field__input, body.body--dark .q-field__input {
+                color: #F1F5F9 !important;  /* Slate 100 */
+            }
+        </style>
+        <script>
+            function applyDarkModeStyles(isDark) {
+                // Body background
+                document.body.style.backgroundColor = isDark ? '#0F172A' : '#FFFFFF';
+                // All cards (exclude error cards with bg-red-50)
+                document.querySelectorAll('.q-card, .nicegui-card').forEach(card => {
+                    if (!card.classList.contains('bg-red-50')) {
+                        card.style.backgroundColor = isDark ? '#1E293B' : '#FFFFFF';
+                        card.style.borderColor = isDark ? '#334155' : '#E2E8F0';
+                    }
+                });
+            }
+            // Watch for dark mode class changes on body
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.attributeName === 'class') {
+                        const isDark = document.body.classList.contains('dark') ||
+                                       document.body.classList.contains('body--dark');
+                        applyDarkModeStyles(isDark);
+                    }
+                });
+            });
+            observer.observe(document.body, { attributes: true });
+            // Initial check and periodic re-apply (for dynamically added cards)
+            const isDark = document.body.classList.contains('dark') ||
+                           document.body.classList.contains('body--dark');
+            applyDarkModeStyles(isDark);
+            setInterval(() => {
+                const isDark = document.body.classList.contains('dark') ||
+                               document.body.classList.contains('body--dark');
+                applyDarkModeStyles(isDark);
+            }, 500);
+        </script>
+        """
+        )
+
+        # Theme toggle handler (theme_button will be defined below)
+        def toggle_theme() -> None:
+            current = app.storage.user.get("dark_mode", False)
+            app.storage.user["dark_mode"] = not current
+            # Update icon: show sun in dark mode, moon in light mode
+            new_icon = "dark_mode" if current else "light_mode"
+            theme_button.props(f"icon={new_icon} flat round")
+
+        # Header with title, start button, and theme toggle
         with ui.row().classes("w-full items-center justify-between mb-4"):
-            ui.markdown("# Edda Workflow Instances")
+            ui.markdown("# Edda Workflow Instances").classes("text-slate-900 dark:text-slate-100")
 
-            # Start New Workflow button and dialog
-            with ui.dialog() as start_dialog, ui.card().style("min-width: 500px"):
-                ui.label("Start New Workflow").classes("text-xl font-bold mb-4")
+            with ui.row().classes("items-center gap-4"):
+                # Start New Workflow button and dialog
+                with (
+                    ui.dialog() as start_dialog,
+                    ui.card().classes(f"{TAILWIND_CLASSES['card']} p-6").style("min-width: 500px"),
+                ):
+                    ui.label("Start New Workflow").classes(
+                        f"text-xl font-bold mb-4 {TAILWIND_CLASSES['text_primary']}"
+                    )
 
-                # Get all available workflows
-                all_workflows = service.get_all_workflows()
-                workflow_names = list(all_workflows.keys())
+                    # Get all available workflows
+                    all_workflows = service.get_all_workflows()
+                    workflow_names = list(all_workflows.keys())
 
-                if not workflow_names:
-                    ui.label("No workflows registered").classes("text-red-500")
-                    ui.button("Close", on_click=start_dialog.close)
-                else:
-                    # Workflow selection
-                    workflow_select = ui.select(
-                        workflow_names,
-                        label="Select Workflow",
-                        value=workflow_names[0] if workflow_names else None,
-                    ).classes("w-full mb-4")
+                    if not workflow_names:
+                        ui.label("No workflows registered").classes("text-red-500")
+                        ui.button("Close", on_click=start_dialog.close)
+                    else:
+                        # Workflow selection
+                        workflow_select = ui.select(
+                            workflow_names,
+                            label="Select Workflow",
+                            value=workflow_names[0] if workflow_names else None,
+                        ).classes("w-full mb-4")
 
-                    # Container for dynamic parameter fields
-                    params_container = ui.column().classes("w-full mb-4")
+                        # Container for dynamic parameter fields
+                        params_container = ui.column().classes("w-full mb-4")
 
-                    # Store input field references
-                    param_fields: dict[str, Any] = {}
+                        # Store input field references
+                        param_fields: dict[str, Any] = {}
 
                     # Factory functions for creating field managers with proper closures
                     # These must be defined outside the loop to avoid closure issues
@@ -240,7 +384,7 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
 
                                 # Create the UI
                                 with ui.column().classes(
-                                    "w-full gap-1 p-2 border rounded bg-gray-50"
+                                    "w-full gap-1 p-2 border rounded bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
                                 ):
                                     dict_items_ui()
                                     ui.button(
@@ -592,7 +736,7 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
                             for i in range(len(items)):
                                 # Each item in a bordered container
                                 with ui.column().classes(
-                                    "w-full border rounded p-2 mb-2 bg-gray-50"
+                                    "w-full border rounded p-2 mb-2 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
                                 ):
                                     with ui.row().classes(
                                         "w-full items-center justify-between mb-2"
@@ -947,11 +1091,11 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
                                 for parent_name, nested_fields in nested_groups.items():
                                     # Create a visually grouped container for nested model
                                     with ui.column().classes(
-                                        "w-full border rounded p-3 bg-gray-50 mt-2"
+                                        "w-full border rounded p-3 bg-gray-50 dark:bg-slate-800 dark:border-slate-700 mt-2"
                                     ):
                                         # Parent field label
                                         ui.label(f"{parent_name} [nested model]").classes(
-                                            "text-sm font-semibold text-gray-700 mb-2"
+                                            "text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2"
                                         )
 
                                         # Render all nested fields
@@ -1123,74 +1267,337 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
                         ui.button("Start", on_click=handle_start, color="positive")
                         ui.button("Cancel", on_click=start_dialog.close)
 
-            ui.button(
-                "Start New Workflow",
-                on_click=start_dialog.open,
-                icon="play_arrow",
-                color="positive",
-            )
+                ui.button(
+                    "Start New Workflow",
+                    on_click=start_dialog.open,
+                    icon="play_arrow",
+                    color="positive",
+                )
 
-        ui.label("Click on an instance to view execution details").classes("text-gray-600 mb-4")
+                # Theme toggle button (rightmost)
+                is_dark = app.storage.user.get("dark_mode", False)
+                icon = "light_mode" if is_dark else "dark_mode"
+                theme_button = (
+                    ui.button(on_click=toggle_theme)
+                    .props(f"icon={icon} flat round")
+                    .classes("text-slate-600 dark:text-slate-300")
+                )
 
-        instances = await service.get_all_instances(limit=100)
+        ui.label("Click on an instance to view execution details").classes(
+            "text-slate-600 dark:text-slate-400 mb-4"
+        )
+
+        # State management for pagination
+        pagination_state: dict[str, Any] = {
+            "current_token": None,
+            "token_stack": [],  # Stack for "Previous" navigation
+            "page_size": 20,
+            "status_filter": None,
+            "search_query": "",
+            "started_after": None,
+            "started_before": None,
+            "instances": [],
+            "next_page_token": None,
+            "has_more": False,
+        }
+
+        # Filter bar (placed below page title, above instance list)
+        with (
+            ui.card().classes(f"w-full mb-4 p-4 flex-shrink-0 {TAILWIND_CLASSES['card']}"),
+            ui.row().classes("w-full items-end gap-4 flex-wrap"),
+        ):
+            # Search input
+            search_input = ui.input(
+                label="Search (name or ID)",
+                placeholder="Enter workflow name or instance ID...",
+            ).classes("w-64")
+
+            # Status filter
+            status_options = {
+                "": "All Statuses",
+                "running": "Running",
+                "completed": "Completed",
+                "failed": "Failed",
+                "waiting_for_event": "Waiting (Event)",
+                "waiting_for_timer": "Waiting (Timer)",
+                "cancelled": "Cancelled",
+            }
+            status_select = ui.select(
+                options=status_options,
+                value="",
+                label="Status",
+            ).classes("w-40")
+
+            # Page size selector
+            page_size_select = ui.select(
+                options={10: "10", 20: "20", 50: "50"},
+                value=20,
+                label="Per page",
+            ).classes("w-24")
+
+            # Date range inputs with calendar picker
+            with ui.input(label="From").classes("w-36") as date_from:
+                with ui.menu() as date_from_menu:
+                    ui.date().bind_value(date_from)
+                with date_from.add_slot("append"):
+                    ui.icon("event").classes("cursor-pointer").on(
+                        "click", lambda m=date_from_menu: m.open()
+                    )
+
+            with ui.input(label="To").classes("w-36") as date_to:
+                with ui.menu() as date_to_menu:
+                    ui.date().bind_value(date_to)
+                with date_to.add_slot("append"):
+                    ui.icon("event").classes("cursor-pointer").on(
+                        "click", lambda m=date_to_menu: m.open()
+                    )
 
-        if not instances:
-            ui.label("No workflow instances found").classes("text-gray-500 italic mt-8")
-            ui.label("Run some workflows first, or click 'Start New Workflow' above!").classes(
-                "text-sm text-gray-400"
+            # Refresh button
+            async def handle_refresh() -> None:
+                """Handle refresh button click."""
+                pagination_state["search_query"] = search_input.value
+                pagination_state["status_filter"] = status_select.value or None
+                pagination_state["page_size"] = page_size_select.value
+                pagination_state["started_after"] = date_from.value
+                pagination_state["started_before"] = date_to.value
+                # Reset to first page
+                pagination_state["current_token"] = None
+                pagination_state["token_stack"] = []
+                await refresh_list()
+
+            ui.button("Refresh", on_click=handle_refresh, icon="refresh").props(
+                "flat color=primary"
             )
-            return
 
-        with ui.column().classes("w-full gap-2"):
-            for inst in instances:
-                with (
-                    ui.link(target=f'/workflow/{inst["instance_id"]}').classes(
-                        "no-underline w-full"
-                    ),
-                    ui.card().classes("w-full cursor-pointer hover:shadow-lg transition-shadow"),
-                    ui.row().classes("w-full items-center justify-between"),
-                ):
-                    with ui.column():
-                        ui.label(inst["workflow_name"]).classes("text-xl font-bold")
-                        ui.label(f'ID: {inst["instance_id"][:16]}...').classes(
-                            "text-sm text-gray-500"
-                        )
-                        ui.label(f'Started: {inst["started_at"]}').classes("text-xs text-gray-400")
-
-                    status = inst["status"]
-                    if status == "completed":
-                        ui.badge("✅ Completed", color="green")
-                    elif status == "running":
-                        ui.badge("⏳ Running", color="yellow")
-                    elif status == "failed":
-                        ui.badge("❌ Failed", color="red")
-                    elif status == "waiting_for_event":
-                        ui.badge("⏸️ Waiting (Event)", color="blue")
-                    elif status == "waiting_for_timer":
-                        ui.badge("⏱️ Waiting (Timer)", color="cyan")
-                    elif status == "cancelled":
-                        ui.badge("🚫 Cancelled", color="orange")
-                    else:
-                        ui.badge(status, color="gray")
+        # Container for the instance list (will be refreshed)
+        # Uses instance-list-container class for scroll behavior (CSS defined above)
+        list_container = ui.column().classes("w-full instance-list-container")
+
+        async def load_instances() -> None:
+            """Load instances with current filter settings."""
+            # Parse date filters
+            started_after = None
+            started_before = None
+            if pagination_state["started_after"]:
+                with contextlib.suppress(ValueError):
+                    started_after = datetime.fromisoformat(
+                        pagination_state["started_after"] + "T00:00:00"
+                    )
+            if pagination_state["started_before"]:
+                with contextlib.suppress(ValueError):
+                    started_before = datetime.fromisoformat(
+                        pagination_state["started_before"] + "T23:59:59"
+                    )
+
+            result = await service.get_instances_paginated(
+                page_size=pagination_state["page_size"],
+                page_token=pagination_state["current_token"],
+                status_filter=pagination_state["status_filter"],
+                search_query=pagination_state["search_query"] or None,
+                started_after=started_after,
+                started_before=started_before,
+            )
+            pagination_state["instances"] = result["instances"]
+            pagination_state["next_page_token"] = result["next_page_token"]
+            pagination_state["has_more"] = result["has_more"]
+
+        async def refresh_list() -> None:
+            """Refresh the instance list display."""
+            await load_instances()
+            list_container.clear()
+            with list_container:
+                render_instance_list()
+
+        def render_instance_list() -> None:
+            """Render the instance list cards."""
+            instances = pagination_state["instances"]
+            if not instances:
+                ui.label("No workflow instances found").classes(
+                    "text-slate-500 dark:text-slate-400 italic mt-8"
+                )
+                ui.label("Run some workflows first, or click 'Start New Workflow' above!").classes(
+                    "text-sm text-slate-400 dark:text-slate-500"
+                )
+                return
+
+            with ui.column().classes("w-full gap-2"):
+                for inst in instances:
+                    with (
+                        ui.link(target=f'/workflow/{inst["instance_id"]}').classes(
+                            "no-underline w-full"
+                        ),
+                        ui.card().classes(
+                            f"w-full cursor-pointer hover:shadow-lg transition-shadow {TAILWIND_CLASSES['card']} {TAILWIND_CLASSES['card_hover']}"
+                        ),
+                        ui.row().classes("w-full items-center justify-between"),
+                    ):
+                        with ui.column().classes("flex-1 min-w-0"):
+                            ui.label(inst["workflow_name"]).classes(
+                                f"text-xl font-bold truncate {TAILWIND_CLASSES['text_primary']}"
+                            )
+                            ui.label(f'ID: {inst["instance_id"]}').classes(
+                                f"text-sm truncate {TAILWIND_CLASSES['text_secondary']}"
+                            )
+                            ui.label(f'Started: {inst["started_at"]}').classes(
+                                f"text-sm truncate {TAILWIND_CLASSES['text_secondary']}"
+                            )
+
+                        status = inst["status"]
+                        status_labels = {
+                            "completed": "✅ Completed",
+                            "running": "⏳ Running",
+                            "failed": "❌ Failed",
+                            "waiting_for_event": "⏸️ Waiting (Event)",
+                            "waiting_for_timer": "⏱️ Waiting (Timer)",
+                            "cancelled": "🚫 Cancelled",
+                        }
+                        label_text = status_labels.get(status, status)
+                        ui.label(label_text).classes(get_status_badge_classes(status))
+
+        # Initial load
+        await load_instances()
+        with list_container:
+            render_instance_list()
+
+        # Pagination controls (fixed at bottom via pagination-controls class)
+        with ui.row().classes("w-full justify-end gap-4 mt-4 pagination-controls"):
+
+            async def handle_previous() -> None:
+                """Handle Previous button click."""
+                if pagination_state["token_stack"]:
+                    # Pop the last token from the stack
+                    pagination_state["current_token"] = pagination_state["token_stack"].pop()
+                    await refresh_list()
+
+            async def handle_next() -> None:
+                """Handle Next button click."""
+                if pagination_state["has_more"] and pagination_state["next_page_token"]:
+                    # Push current token to stack before moving to next page
+                    pagination_state["token_stack"].append(pagination_state["current_token"])
+                    pagination_state["current_token"] = pagination_state["next_page_token"]
+                    await refresh_list()
+
+            ui.button("← Previous", on_click=handle_previous, icon="chevron_left").props("flat")
+            ui.button("Next →", on_click=handle_next, icon="chevron_right").props("flat")
 
     # Define detail page
     @ui.page("/workflow/{instance_id}")  # type: ignore[misc]
     async def workflow_detail_page(instance_id: str) -> None:
         """Workflow instance detail page with interactive Mermaid diagram."""
+        # Bind dark mode to user storage (persists across pages and sessions)
+        ui.dark_mode().bind_value(app.storage.user, "dark_mode")
+
+        # Custom CSS and JS to ensure dark mode background is applied
+        ui.add_head_html(
+            """
+        <style>
+            /* Page background */
+            body.dark, body.body--dark {
+                background-color: #0F172A !important;  /* Slate 900 */
+            }
+            body:not(.dark):not(.body--dark) {
+                background-color: #FFFFFF !important;
+            }
+            .nicegui-content, .q-page, .q-layout {
+                background-color: transparent !important;
+            }
+            /* Card backgrounds - Light mode (exclude error cards) */
+            body:not(.dark):not(.body--dark) .q-card:not(.bg-red-50) {
+                background-color: #FFFFFF !important;
+                border-color: #E2E8F0 !important;  /* Slate 200 */
+            }
+            body:not(.dark):not(.body--dark) .q-card:not(.bg-red-50):hover {
+                background-color: #F8FAFC !important;  /* Slate 50 */
+            }
+            /* Card backgrounds - Dark mode (exclude error cards) */
+            body.dark .q-card:not(.bg-red-50), body.body--dark .q-card:not(.bg-red-50) {
+                background-color: #1E293B !important;  /* Slate 800 */
+                border-color: #334155 !important;  /* Slate 700 */
+            }
+            body.dark .q-card:not(.bg-red-50):hover, body.body--dark .q-card:not(.bg-red-50):hover {
+                background-color: #334155 !important;  /* Slate 700 */
+            }
+            /* Error card backgrounds - Dark mode */
+            body.dark .q-card.bg-red-50, body.body--dark .q-card.bg-red-50 {
+                background-color: rgba(127, 29, 29, 0.3) !important;  /* Red 900/30 */
+                border-color: #991B1B !important;  /* Red 800 */
+            }
+            body.dark .bg-red-50 .text-red-700, body.body--dark .bg-red-50 .text-red-700 {
+                color: #FCA5A5 !important;  /* Red 300 */
+            }
+            /* Input fields - Light mode */
+            body:not(.dark):not(.body--dark) .q-field__control {
+                background-color: #FFFFFF !important;
+            }
+            /* Input fields - Dark mode */
+            body.dark .q-field__control, body.body--dark .q-field__control {
+                background-color: #1E293B !important;
+            }
+            body.dark .q-field__native, body.body--dark .q-field__native,
+            body.dark .q-field__input, body.body--dark .q-field__input {
+                color: #F1F5F9 !important;  /* Slate 100 */
+            }
+        </style>
+        <script>
+            function applyDarkModeStyles(isDark) {
+                // Body background
+                document.body.style.backgroundColor = isDark ? '#0F172A' : '#FFFFFF';
+                // All cards (exclude error cards with bg-red-50)
+                document.querySelectorAll('.q-card, .nicegui-card').forEach(card => {
+                    if (!card.classList.contains('bg-red-50')) {
+                        card.style.backgroundColor = isDark ? '#1E293B' : '#FFFFFF';
+                        card.style.borderColor = isDark ? '#334155' : '#E2E8F0';
+                    }
+                });
+            }
+            // Watch for dark mode class changes on body
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.attributeName === 'class') {
+                        const isDark = document.body.classList.contains('dark') ||
+                                       document.body.classList.contains('body--dark');
+                        applyDarkModeStyles(isDark);
+                    }
+                });
+            });
+            observer.observe(document.body, { attributes: true });
+            // Initial check and periodic re-apply (for dynamically added cards)
+            const isDark = document.body.classList.contains('dark') ||
+                           document.body.classList.contains('body--dark');
+            applyDarkModeStyles(isDark);
+            setInterval(() => {
+                const isDark = document.body.classList.contains('dark') ||
+                               document.body.classList.contains('body--dark');
+                applyDarkModeStyles(isDark);
+            }, 500);
+        </script>
+        """
+        )
+
         data = await service.get_instance_detail(instance_id)
         instance = data.get("instance")
         history = data.get("history", [])
         compensations = data.get("compensations", {})
 
         if not instance:
-            ui.label("Workflow instance not found").classes("text-red-500 text-xl mt-8")
+            ui.label("Workflow instance not found").classes(
+                "text-red-500 dark:text-red-400 text-xl mt-8"
+            )
             ui.button("← Back to list", on_click=lambda: ui.navigate.to("/"))
             return
 
+        # Theme toggle handler (theme_button will be defined below)
+        def toggle_theme() -> None:
+            current = app.storage.user.get("dark_mode", False)
+            app.storage.user["dark_mode"] = not current
+            # Update icon: show sun in dark mode, moon in light mode
+            new_icon = "dark_mode" if current else "light_mode"
+            theme_button.props(f"icon={new_icon} flat round")
+
         # Header with back button and cancel button
         with ui.row().classes("w-full items-center justify-between mb-4"):
-            ui.markdown("# Edda Workflow Viewer")
-            with ui.row().classes("gap-2"):
+            ui.markdown("# Edda Workflow Viewer").classes("text-slate-900 dark:text-slate-100")
+            with ui.row().classes("gap-4 items-center"):
                 # Cancel button (only show for running/waiting workflows)
                 status = instance["status"]
                 if status in ["running", "waiting_for_event", "waiting_for_timer"]:
@@ -1225,33 +1632,45 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
 
                 ui.button("← Back to List", on_click=lambda: ui.navigate.to("/")).props("flat")
 
+                # Theme toggle button (rightmost)
+                is_dark = app.storage.user.get("dark_mode", False)
+                icon = "light_mode" if is_dark else "dark_mode"
+                theme_button = (
+                    ui.button(on_click=toggle_theme)
+                    .props(f"icon={icon} flat round")
+                    .classes("text-slate-600 dark:text-slate-300")
+                )
+
         # Workflow basic info card (full width at top)
-        with ui.card().classes("w-full mb-4"):
-            ui.label(instance["workflow_name"]).classes("text-2xl font-bold")
+        with ui.card().classes(f"w-full mb-4 {TAILWIND_CLASSES['card']}"):
+            ui.label(instance["workflow_name"]).classes(
+                f"text-2xl font-bold {TAILWIND_CLASSES['text_primary']}"
+            )
 
             with ui.row().classes("gap-4 items-center flex-wrap"):
                 status = instance["status"]
-                if status == "completed":
-                    ui.badge("✅ Completed", color="green")
-                elif status == "running":
-                    ui.badge("⏳ Running", color="yellow")
-                elif status == "failed":
-                    ui.badge("❌ Failed", color="red")
-                elif status == "waiting_for_event":
-                    ui.badge("⏸️ Waiting (Event)", color="blue")
-                elif status == "waiting_for_timer":
-                    ui.badge("⏱️ Waiting (Timer)", color="cyan")
-                elif status == "cancelled":
-                    ui.badge("🚫 Cancelled", color="orange")
-                elif status == "compensating":
-                    ui.badge("🔄 Compensating", color="purple")
-                else:
-                    ui.badge(status, color="gray")
-
-                ui.label(f"Started: {instance['started_at']}").classes("text-sm text-gray-600")
-                ui.label(f"Updated: {instance['updated_at']}").classes("text-sm text-gray-600")
+                status_labels = {
+                    "completed": "✅ Completed",
+                    "running": "⏳ Running",
+                    "failed": "❌ Failed",
+                    "waiting_for_event": "⏸️ Waiting (Event)",
+                    "waiting_for_timer": "⏱️ Waiting (Timer)",
+                    "cancelled": "🚫 Cancelled",
+                    "compensating": "🔄 Compensating",
+                }
+                label_text = status_labels.get(status, status)
+                ui.label(label_text).classes(get_status_badge_classes(status))
+
+                ui.label(f"Started: {instance['started_at']}").classes(
+                    f"text-sm {TAILWIND_CLASSES['text_secondary']}"
+                )
+                ui.label(f"Updated: {instance['updated_at']}").classes(
+                    f"text-sm {TAILWIND_CLASSES['text_secondary']}"
+                )
 
-            ui.label(f"Instance ID: {instance_id}").classes("text-xs text-gray-500 font-mono mt-2")
+            ui.label(f"Instance ID: {instance_id}").classes(
+                f"text-xs {TAILWIND_CLASSES['text_muted']} font-mono mt-2"
+            )
 
             # Input Parameters section
             input_data = instance.get("input_data")
@@ -1341,9 +1760,9 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
         with ui.row().style("width: 100%; height: calc(100vh - 250px); gap: 1rem; display: flex;"):
             # Left pane: Execution Flow
             with ui.column().style("flex: 1; overflow: auto; padding-right: 1rem;"):
-                ui.markdown("## Execution Flow")
+                ui.markdown("## Execution Flow").classes(TAILWIND_CLASSES["text_primary"])
                 ui.label("Click on an activity to view details →").classes(
-                    "text-gray-600 text-sm mb-2"
+                    f"text-sm mb-2 {TAILWIND_CLASSES['text_secondary']}"
                 )
 
                 if history:
@@ -1374,15 +1793,17 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
 
                     ui.mermaid(mermaid_code, config={"securityLevel": "loose"}).classes("w-full")
                 else:
-                    ui.label("No execution history available").classes("text-gray-500 italic")
+                    ui.label("No execution history available").classes(
+                        f"{TAILWIND_CLASSES['text_muted']} italic"
+                    )
 
             # Right pane: Activity Details
-            with ui.column().style(
-                "flex: 1; overflow: auto; padding: 1rem; background: #f9fafb; border-left: 2px solid #e5e7eb; border-radius: 0.5rem;"
+            with ui.column().classes(
+                f"flex-1 overflow-auto p-4 rounded-lg {TAILWIND_CLASSES['surface']} {TAILWIND_CLASSES['border']} border-l-2"
             ):
-                ui.markdown("## Activity Details")
+                ui.markdown("## Activity Details").classes(TAILWIND_CLASSES["text_primary"])
                 ui.label("Click on an activity in the diagram to view details").classes(
-                    "text-gray-500 italic mb-4"
+                    f"{TAILWIND_CLASSES['text_muted']} italic mb-4"
                 )
 
                 detail_container = ui.column().classes("w-full")
@@ -1396,4 +1817,9 @@ def start_viewer(edda_app: EddaApp, port: int = 8080, reload: bool = False) -> N
     app.on_shutdown(shutdown_handler)
 
     # Start server
-    ui.run(port=port, title="Edda Workflow Viewer", reload=reload)
+    ui.run(
+        port=port,
+        title="Edda Workflow Viewer",
+        reload=reload,
+        storage_secret="edda_viewer_secret",
+    )