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

edda/viewer_ui/components.py

@@ -5,11 +5,14 @@ UI components for generating interactive Mermaid diagrams.
 import json
 from typing import Any
 
+from edda.viewer_ui.theme import get_edge_color, get_mermaid_node_style, get_mermaid_style
 from edda.visualizer.ast_analyzer import WorkflowAnalyzer
 from edda.visualizer.mermaid_generator import MermaidGenerator
 
 
-def generate_interactive_mermaid(instance_id: str, history: list[dict[str, Any]]) -> str:
+def generate_interactive_mermaid(
+    instance_id: str, history: list[dict[str, Any]], is_dark: bool = False
+) -> str:
     """
     Generate interactive Mermaid diagram from execution history.
 
@@ -22,6 +25,7 @@ def generate_interactive_mermaid(instance_id: str, history: list[dict[str, Any]]
     Args:
         instance_id: Workflow instance ID
         history: List of execution activity dictionaries
+        is_dark: Whether dark mode is enabled
 
     Returns:
         Mermaid flowchart diagram code with embedded click events
@@ -41,6 +45,20 @@ def generate_interactive_mermaid(instance_id: str, history: list[dict[str, Any]]
     activity_occurrences: dict[str, list[str]] = {}  # Track activity name -> list of activity_ids
     activity_index = 0
 
+    # Status icon mapping
+    status_icons = {
+        "completed": "✅",
+        "running": "⏳",
+        "failed": "❌",
+        "waiting_for_event": "⏸️",
+        "waiting_for_timer": "⏱️",
+        "cancelled": "🚫",
+        "compensated": "🔄",
+        "compensating": "🔄",
+        "compensation_failed": "⚠️",
+        "event_received": "📨",
+    }
+
     for activity_data in history:
         activity_id = activity_data.get("activity_id")
         if not activity_id:
@@ -64,33 +82,13 @@ def generate_interactive_mermaid(instance_id: str, history: list[dict[str, Any]]
         label_suffix = f" ({occurrence_count}x)" if occurrence_count >= 2 else ""
 
         # Node label with status icon
-        if status == "completed":
-            label = f"✅ {activity}{label_suffix}"
-            style_color = "fill:#d4edda,stroke:#28a745,stroke-width:2px"
-        elif status == "running":
-            label = f"⏳ {activity}{label_suffix}"
-            style_color = "fill:#fff3cd,stroke:#ffc107,stroke-width:2px"
-        elif status == "failed":
-            label = f"❌ {activity}{label_suffix}"
-            style_color = "fill:#f8d7da,stroke:#dc3545,stroke-width:2px"
-        elif status == "waiting_for_event":
-            label = f"⏸️ {activity}{label_suffix}"
-            style_color = "fill:#e7f3ff,stroke:#0066cc,stroke-width:2px"
-        elif status == "cancelled":
-            label = f"🚫 {activity}{label_suffix}"
-            style_color = "fill:#fff4e6,stroke:#ff9800,stroke-width:2px"
-        elif status == "compensated":
-            label = f"🔄 {activity}{label_suffix}"
-            style_color = "fill:#ffe6f0,stroke:#e91e63,stroke-width:2px,stroke-dasharray:5"
-        elif status == "compensation_failed":
-            label = f"⚠️ {activity}{label_suffix}"
-            style_color = "fill:#ffcccc,stroke:#cc0000,stroke-width:2px"
-        elif status == "event_received":
-            label = f"📨 {activity}{label_suffix}"
-            style_color = "fill:#e6f7ff,stroke:#1890ff,stroke-width:2px"
-        else:
-            label = f"{activity}{label_suffix}"
-            style_color = "fill:#f0f0f0,stroke:#666,stroke-width:2px"
+        icon = status_icons.get(status, "")
+        label = f"{icon} {activity}{label_suffix}" if icon else f"{activity}{label_suffix}"
+
+        # Get themed style colors
+        style_color = get_mermaid_style(status, is_dark)
+        if status == "compensated":
+            style_color += ",stroke-dasharray:5"
 
         # Node definition
         lines.append(f'    {node_id}["{label}"]')
@@ -133,6 +131,7 @@ class HybridMermaidGenerator(MermaidGenerator):
         compensations: dict[str, dict[str, Any]] | None = None,
         workflow_status: str = "running",
         activity_status_map: dict[str, str] | None = None,
+        is_dark: bool = False,
     ):
         """
         Initialize hybrid Mermaid generator.
@@ -143,6 +142,7 @@ class HybridMermaidGenerator(MermaidGenerator):
             compensations: Optional mapping of activity_id -> compensation info
             workflow_status: Status of the workflow instance (running, completed, failed, etc.)
             activity_status_map: Optional mapping of activity name to status (completed, failed, etc.)
+            is_dark: Whether dark mode is enabled
         """
         super().__init__()
         self.instance_id = instance_id
@@ -150,6 +150,7 @@ class HybridMermaidGenerator(MermaidGenerator):
         self.compensations = compensations or {}
         self.workflow_status = workflow_status
         self.activity_status_map = activity_status_map or {}
+        self.is_dark = is_dark
         self.activity_id_map: dict[str, str] = {}  # Map activity name to activity_id for clicks
         self.activity_execution_counts: dict[str, int] = {}  # Map activity name to execution count
         self.edge_counter = 0  # Track edge indices for linkStyle
@@ -200,9 +201,8 @@ class HybridMermaidGenerator(MermaidGenerator):
             # Add a visual separator (compensation execution section)
             comp_start_id = self._next_node_id()
             self.lines.append(f"    {comp_start_id}[Compensation Execution]")
-            self.lines.append(
-                f"    style {comp_start_id} fill:#fff3cd,stroke:#ffc107,stroke-width:2px"
-            )
+            comp_header_style = get_mermaid_style("running", self.is_dark)
+            self.lines.append(f"    style {comp_start_id} {comp_header_style}")
             self.lines.append(f"    {end_id} -.->|rollback| {comp_start_id}")
             self.edge_counter += 1
 
@@ -217,9 +217,8 @@ class HybridMermaidGenerator(MermaidGenerator):
                 label = f"🔄 {comp_name}"
 
                 self.lines.append(f'    {comp_node_id}["{label}"]')
-                self.lines.append(
-                    f"    style {comp_node_id} fill:#f8d7da,stroke:#dc3545,stroke-width:3px"
-                )
+                comp_node_style = get_mermaid_style("compensating", self.is_dark)
+                self.lines.append(f"    style {comp_node_id} {comp_node_style},stroke-width:3px")
 
                 # Add click event for compensation activity
                 self.lines.append(
@@ -233,10 +232,11 @@ class HybridMermaidGenerator(MermaidGenerator):
 
                 prev_comp_id = comp_node_id
 
-        # Add linkStyle for executed edges (green color)
+        # Add linkStyle for executed edges
         if self.executed_edges:
             edge_indices = ",".join(str(i) for i in self.executed_edges)
-            self.lines.append(f"    linkStyle {edge_indices} stroke:#28a745,stroke-width:3px")
+            edge_color = get_edge_color("executed", self.is_dark)
+            self.lines.append(f"    linkStyle {edge_indices} stroke:{edge_color},stroke-width:3px")
 
         return "\n".join(self.lines)
 
@@ -296,21 +296,22 @@ class HybridMermaidGenerator(MermaidGenerator):
                 if has_compensation:
                     label += " ⚠"
 
-                # Style based on status
+                # Style based on status using theme colors
                 if status == "completed":
-                    style_color = "fill:#d4edda,stroke:#28a745,stroke-width:3px"  # Green
+                    style_color = get_mermaid_style("completed", self.is_dark) + ",stroke-width:3px"
                 elif status == "failed":
-                    style_color = "fill:#f8d7da,stroke:#dc3545,stroke-width:3px"  # Red
+                    style_color = get_mermaid_style("failed", self.is_dark) + ",stroke-width:3px"
                 elif status == "compensated":
                     style_color = (
-                        "fill:#ffe6f0,stroke:#e91e63,stroke-width:3px,stroke-dasharray:5"  # Pink
+                        get_mermaid_style("compensating", self.is_dark)
+                        + ",stroke-width:3px,stroke-dasharray:5"
                     )
                 elif status is not None:
-                    # Other executed statuses
-                    style_color = "fill:#fff3cd,stroke:#ffc107,stroke-width:3px"  # Yellow
+                    # Other executed statuses (running, waiting)
+                    style_color = get_mermaid_style("running", self.is_dark) + ",stroke-width:3px"
                 else:
                     # Not executed
-                    style_color = "fill:#f5f5f5,stroke:#ccc,stroke-width:1px"  # Gray
+                    style_color = get_mermaid_style("not_executed", self.is_dark)
 
                 self.lines.append(f'    {node_id}["{label}"]')
                 self.lines.append(f"    style {node_id} {style_color}")
@@ -338,7 +339,8 @@ class HybridMermaidGenerator(MermaidGenerator):
                 func_name = step.get("activity_name", step.get("function", "unknown"))
                 self.lines.append(f"    {node_id}[register_compensation:<br/>{func_name}]")
                 self.lines.append(f"    {current_id} --> {node_id}")
-                self.lines.append(f"    style {node_id} fill:#ffe6e6")
+                comp_reg_style = get_mermaid_style("compensating", self.is_dark)
+                self.lines.append(f"    style {node_id} {comp_reg_style}")
 
                 # Track compensation for reverse path
                 self.compensation_nodes.append((current_id, node_id))
@@ -357,7 +359,8 @@ class HybridMermaidGenerator(MermaidGenerator):
 
                 self.lines.append(f"    {node_id}{{{{{label}}}}}")
                 self.lines.append(f"    {current_id} --> {node_id}")
-                self.lines.append(f"    style {node_id} fill:#fff4e6")
+                wait_event_style = get_mermaid_style("waiting_event", self.is_dark)
+                self.lines.append(f"    style {node_id} {wait_event_style}")
                 current_id = node_id
 
             elif step_type == "condition":
@@ -446,13 +449,15 @@ class HybridMermaidGenerator(MermaidGenerator):
             self.executed_edges.append(self.edge_counter)
         self.edge_counter += 1
 
-        self.lines.append(f"    style {cond_id} fill:#fff3e0,stroke:#ff9800,stroke-width:2px")
+        condition_style = get_mermaid_node_style("condition", self.is_dark)
+        self.lines.append(f"    style {cond_id} {condition_style}")
 
         # Create merge node with invisible/minimal label
         merge_id = self._next_node_id()
         # Use a minimal circle node for merging (instead of showing "N4")
         self.lines.append(f"    {merge_id}(( ))")  # Small empty circle
-        self.lines.append(f"    style {merge_id} fill:#ffffff,stroke:#ddd,stroke-width:1px")
+        merge_style = get_mermaid_node_style("merge", self.is_dark)
+        self.lines.append(f"    style {merge_id} {merge_style}")
 
         # If branch
         if if_branch:
@@ -555,21 +560,22 @@ class HybridMermaidGenerator(MermaidGenerator):
             else:
                 label = f"{label_prefix}{func_name}"
 
-            # Style based on status
+            # Style based on status using theme colors
             if status == "completed":
-                style_color = "fill:#d4edda,stroke:#28a745,stroke-width:3px"  # Green
+                style_color = get_mermaid_style("completed", self.is_dark) + ",stroke-width:3px"
             elif status == "failed":
-                style_color = "fill:#f8d7da,stroke:#dc3545,stroke-width:3px"  # Red
+                style_color = get_mermaid_style("failed", self.is_dark) + ",stroke-width:3px"
             elif status == "compensated":
                 style_color = (
-                    "fill:#ffe6f0,stroke:#e91e63,stroke-width:3px,stroke-dasharray:5"  # Pink
+                    get_mermaid_style("compensating", self.is_dark)
+                    + ",stroke-width:3px,stroke-dasharray:5"
                 )
             elif status is not None:
-                # Other executed statuses
-                style_color = "fill:#fff3cd,stroke:#ffc107,stroke-width:3px"  # Yellow
+                # Other executed statuses (running, waiting)
+                style_color = get_mermaid_style("running", self.is_dark) + ",stroke-width:3px"
             else:
                 # Not executed
-                style_color = "fill:#f5f5f5,stroke:#ccc,stroke-width:1px"  # Gray
+                style_color = get_mermaid_style("not_executed", self.is_dark)
 
             self.lines.append(f'    {node_id}["{label}"]')
             self.lines.append(f"    style {node_id} {style_color}")
@@ -732,7 +738,8 @@ class HybridMermaidGenerator(MermaidGenerator):
         self.lines.append(f'    {loop_id}["{label}"]')
         self.lines.append(f"    {prev_id} --> {loop_id}")
         self.edge_counter += 1  # Edge from prev to loop
-        self.lines.append(f"    style {loop_id} fill:#fff0f0")
+        loop_style = get_mermaid_node_style("loop", self.is_dark)
+        self.lines.append(f"    style {loop_id} {loop_style}")
 
         # Check if loop body contains executed activities
         body = loop.get("body", [])
@@ -750,7 +757,8 @@ class HybridMermaidGenerator(MermaidGenerator):
         # Create exit node as small empty circle (instead of labeled node)
         exit_id = self._next_node_id()
         self.lines.append(f"    {exit_id}(( ))")  # Small empty circle
-        self.lines.append(f"    style {exit_id} fill:#ffffff,stroke:#ddd,stroke-width:1px")
+        merge_style = get_mermaid_node_style("merge", self.is_dark)
+        self.lines.append(f"    style {exit_id} {merge_style}")
         self.lines.append(f"    {loop_id} -->|exit| {exit_id}")
         self.edge_counter += 1
 
@@ -786,12 +794,14 @@ class HybridMermaidGenerator(MermaidGenerator):
         self.lines.append(f"    {match_id}{{{{match {subject}}}}}")
         self.lines.append(f"    {prev_id} --> {match_id}")
         self.edge_counter += 1
-        self.lines.append(f"    style {match_id} fill:#e8f5e9,stroke:#4caf50,stroke-width:2px")
+        match_style = get_mermaid_node_style("match", self.is_dark)
+        self.lines.append(f"    style {match_id} {match_style}")
 
         # Create merge node
         merge_id = self._next_node_id()
         self.lines.append(f"    {merge_id}(( ))")  # Small empty circle for merge
-        self.lines.append(f"    style {merge_id} fill:#ffffff,stroke:#ddd,stroke-width:1px")
+        merge_style = get_mermaid_node_style("merge", self.is_dark)
+        self.lines.append(f"    style {merge_id} {merge_style}")
 
         # Process each case
         cases = match.get("cases", [])
@@ -833,9 +843,8 @@ class HybridMermaidGenerator(MermaidGenerator):
                     self.executed_edges.append(self.edge_counter)
                 self.edge_counter += 1
 
-                self.lines.append(
-                    f"    style {case_start_id} fill:#fff,stroke:#999,stroke-width:1px"
-                )
+                case_start_style = get_mermaid_node_style("merge", self.is_dark)
+                self.lines.append(f"    style {case_start_id} {case_start_style}")
 
                 # Generate body steps starting from case_start_id
                 case_end = self._generate_steps(body, case_start_id)
@@ -875,12 +884,14 @@ class HybridMermaidGenerator(MermaidGenerator):
         self.lines.append(f"    {decision_id}{{{{if-elif-else}}}}")
         self.lines.append(f"    {prev_id} --> {decision_id}")
         self.edge_counter += 1
-        self.lines.append(f"    style {decision_id} fill:#e8f5e9,stroke:#4caf50,stroke-width:2px")
+        decision_style = get_mermaid_node_style("condition", self.is_dark)
+        self.lines.append(f"    style {decision_id} {decision_style}")
 
         # Create merge node
         merge_id = self._next_node_id()
         self.lines.append(f"    {merge_id}(( ))")  # Small empty circle for merge
-        self.lines.append(f"    style {merge_id} fill:#ffffff,stroke:#ddd,stroke-width:1px")
+        merge_style = get_mermaid_node_style("merge", self.is_dark)
+        self.lines.append(f"    style {merge_id} {merge_style}")
 
         # Process each branch
         branches = multi_cond.get("branches", [])
@@ -950,9 +961,8 @@ class HybridMermaidGenerator(MermaidGenerator):
                     self.executed_edges.append(self.edge_counter)
                 self.edge_counter += 1
 
-                self.lines.append(
-                    f"    style {branch_start_id} fill:#fff,stroke:#999,stroke-width:1px"
-                )
+                branch_start_style = get_mermaid_node_style("merge", self.is_dark)
+                self.lines.append(f"    style {branch_start_id} {branch_start_style}")
 
                 # Generate body steps starting from branch_start_id
                 branch_end = self._generate_steps(body, branch_start_id)
@@ -1006,6 +1016,7 @@ def generate_hybrid_mermaid(
     source_code: str,
     compensations: dict[str, dict[str, Any]] | None = None,
     workflow_status: str = "running",
+    is_dark: bool = False,
 ) -> str:
     """
     Generate hybrid Mermaid diagram combining static analysis and execution history.
@@ -1017,6 +1028,7 @@ def generate_hybrid_mermaid(
         source_code: Source code of the workflow function
         compensations: Optional mapping of activity_id -> compensation info
         workflow_status: Status of the workflow instance (running, completed, failed, etc.)
+        is_dark: Whether dark mode is enabled
 
     Returns:
         Mermaid flowchart diagram code with execution highlighting
@@ -1030,7 +1042,7 @@ def generate_hybrid_mermaid(
 
         if not workflows:
             # Fallback to history-only diagram
-            return generate_interactive_mermaid(instance_id, history)
+            return generate_interactive_mermaid(instance_id, history, is_dark)
 
         workflow_structure = workflows[0]
 
@@ -1079,6 +1091,7 @@ def generate_hybrid_mermaid(
             compensations,
             workflow_status,
             activity_status_map,
+            is_dark,
         )
         generator.activity_id_map = activity_id_map
         generator.activity_execution_counts = activity_execution_counts
@@ -1089,7 +1102,7 @@ def generate_hybrid_mermaid(
     except Exception as e:
         # Fallback to history-only diagram on any error
         print(f"Warning: Hybrid diagram generation failed, falling back to history-only: {e}")
-        return generate_interactive_mermaid(instance_id, history)
+        return generate_interactive_mermaid(instance_id, history, is_dark)
 
 
 def format_json_for_display(data: Any) -> str:

edda/viewer_ui/data_service.py

@@ -5,7 +5,8 @@ Data service for retrieving workflow instance data from storage.
 import inspect
 import json
 import logging
-from typing import Any
+from datetime import datetime
+from typing import Any, cast
 
 from edda.pydantic_utils import is_pydantic_model
 from edda.storage.protocol import StorageProtocol
@@ -36,8 +37,46 @@ class WorkflowDataService:
         Returns:
             List of workflow instance dictionaries
         """
-        instances = await self.storage.list_instances(limit=limit)
-        return instances
+        result = await self.storage.list_instances(limit=limit)
+        return cast(list[dict[str, Any]], result["instances"])
+
+    async def get_instances_paginated(
+        self,
+        page_size: int = 20,
+        page_token: str | None = None,
+        status_filter: str | None = None,
+        search_query: str | None = None,
+        started_after: datetime | None = None,
+        started_before: datetime | None = None,
+    ) -> dict[str, Any]:
+        """
+        Get workflow instances with cursor-based pagination and filtering.
+
+        Args:
+            page_size: Number of instances per page (10, 20, or 50)
+            page_token: Cursor for pagination (from previous response)
+            status_filter: Filter by status (e.g., "running", "completed", "failed")
+            search_query: Search by workflow name or instance ID (partial match)
+            started_after: Filter instances started after this datetime
+            started_before: Filter instances started before this datetime
+
+        Returns:
+            Dictionary containing:
+            - instances: List of workflow instances
+            - next_page_token: Cursor for next page, or None
+            - has_more: Boolean indicating if more pages exist
+        """
+        # Use search_query for both workflow_name_filter and instance_id_filter
+        result = await self.storage.list_instances(
+            limit=page_size,
+            page_token=page_token,
+            status_filter=status_filter,
+            workflow_name_filter=search_query,
+            instance_id_filter=search_query,
+            started_after=started_after,
+            started_before=started_before,
+        )
+        return result
 
     async def get_workflow_compensations(self, instance_id: str) -> dict[str, dict[str, Any]]:
         """

edda/viewer_ui/theme.py

@@ -0,0 +1,200 @@
+"""
+Theme configuration for Edda Workflow Viewer.
+
+Provides centralized color palette definitions and helper functions
+for light and dark mode support.
+"""
+
+from typing import Any, cast
+
+# Tailwind CSS compatible color palette
+COLORS: dict[str, dict[str, Any]] = {
+    "light": {
+        # Background colors
+        "bg_page": "#FFFFFF",
+        "bg_surface": "#F8FAFC",  # Slate 50
+        "bg_elevated": "#FFFFFF",
+        "border": "#E2E8F0",  # Slate 200
+        # Text colors
+        "text_primary": "#0F172A",  # Slate 900
+        "text_secondary": "#64748B",  # Slate 500
+        "text_muted": "#94A3B8",  # Slate 400
+        # Status colors (bg, stroke, text)
+        "completed": {"bg": "#ECFDF5", "stroke": "#10B981", "text": "#065F46"},
+        "running": {"bg": "#FEF3C7", "stroke": "#F59E0B", "text": "#92400E"},
+        "failed": {"bg": "#FEE2E2", "stroke": "#EF4444", "text": "#991B1B"},
+        "waiting_event": {"bg": "#DBEAFE", "stroke": "#3B82F6", "text": "#1E40AF"},
+        "waiting_timer": {"bg": "#E0F2FE", "stroke": "#0EA5E9", "text": "#075985"},
+        "cancelled": {"bg": "#FFEDD5", "stroke": "#F97316", "text": "#9A3412"},
+        "compensating": {"bg": "#F3E8FF", "stroke": "#A855F7", "text": "#6B21A8"},
+        "not_executed": {"bg": "#F1F5F9", "stroke": "#CBD5E1", "text": "#64748B"},
+        "event_received": {"bg": "#CFFAFE", "stroke": "#06B6D4", "text": "#0E7490"},
+        "compensation_failed": {"bg": "#FEE2E2", "stroke": "#B91C1C", "text": "#7F1D1D"},
+        # Mermaid diagram specific
+        "condition": {"bg": "#FEF3C7", "stroke": "#F59E0B"},
+        "loop": {"bg": "#FDF4FF", "stroke": "#D946EF"},
+        "match": {"bg": "#ECFDF5", "stroke": "#10B981"},
+        "merge": {"bg": "#FFFFFF", "stroke": "#E2E8F0"},
+        "edge_executed": "#10B981",
+        "edge_not_executed": "#CBD5E1",
+        "edge_compensation": "#A855F7",
+    },
+    "dark": {
+        # Background colors
+        "bg_page": "#0F172A",  # Slate 900
+        "bg_surface": "#1E293B",  # Slate 800
+        "bg_elevated": "#334155",  # Slate 700
+        "border": "#475569",  # Slate 600
+        # Text colors
+        "text_primary": "#F1F5F9",  # Slate 100
+        "text_secondary": "#94A3B8",  # Slate 400
+        "text_muted": "#64748B",  # Slate 500
+        # Status colors (bg, stroke, text)
+        "completed": {"bg": "#064E3B", "stroke": "#34D399", "text": "#A7F3D0"},
+        "running": {"bg": "#78350F", "stroke": "#FBBF24", "text": "#FDE68A"},
+        "failed": {"bg": "#7F1D1D", "stroke": "#F87171", "text": "#FECACA"},
+        "waiting_event": {"bg": "#1E3A8A", "stroke": "#60A5FA", "text": "#BFDBFE"},
+        "waiting_timer": {"bg": "#0C4A6E", "stroke": "#38BDF8", "text": "#BAE6FD"},
+        "cancelled": {"bg": "#7C2D12", "stroke": "#FB923C", "text": "#FED7AA"},
+        "compensating": {"bg": "#581C87", "stroke": "#C084FC", "text": "#E9D5FF"},
+        "not_executed": {"bg": "#334155", "stroke": "#64748B", "text": "#94A3B8"},
+        "event_received": {"bg": "#164E63", "stroke": "#22D3EE", "text": "#A5F3FC"},
+        "compensation_failed": {"bg": "#7F1D1D", "stroke": "#FCA5A5", "text": "#FECACA"},
+        # Mermaid diagram specific
+        "condition": {"bg": "#78350F", "stroke": "#FBBF24"},
+        "loop": {"bg": "#4C1D95", "stroke": "#E879F9"},
+        "match": {"bg": "#064E3B", "stroke": "#34D399"},
+        "merge": {"bg": "#1E293B", "stroke": "#475569"},
+        "edge_executed": "#34D399",
+        "edge_not_executed": "#64748B",
+        "edge_compensation": "#C084FC",
+    },
+}
+
+
+def get_status_color(status: str, is_dark: bool) -> dict[str, str]:
+    """
+    Get color configuration for a workflow status.
+
+    Args:
+        status: Status name (e.g., "completed", "running", "failed")
+        is_dark: Whether dark mode is enabled
+
+    Returns:
+        Dictionary with 'bg', 'stroke', and 'text' colors
+    """
+    theme = "dark" if is_dark else "light"
+    status_key = status.lower().replace(" ", "_").replace("-", "_")
+
+    # Handle special status mappings
+    status_mapping = {
+        "waiting": "waiting_event",
+        "waiting_for_event": "waiting_event",
+        "waiting_for_timer": "waiting_timer",
+        "compensated": "compensating",
+    }
+    status_key = status_mapping.get(status_key, status_key)
+
+    return cast(dict[str, str], COLORS[theme].get(status_key, COLORS[theme]["not_executed"]))
+
+
+def get_mermaid_style(status: str, is_dark: bool) -> str:
+    """
+    Get Mermaid style string for a status.
+
+    Args:
+        status: Status name
+        is_dark: Whether dark mode is enabled
+
+    Returns:
+        Mermaid style string (e.g., "fill:#ECFDF5,stroke:#10B981,stroke-width:2px")
+    """
+    colors = get_status_color(status, is_dark)
+    return f"fill:{colors['bg']},stroke:{colors['stroke']},stroke-width:2px"
+
+
+def get_mermaid_node_style(node_type: str, is_dark: bool) -> str:
+    """
+    Get Mermaid style for structural nodes (condition, loop, merge).
+
+    Args:
+        node_type: Node type (e.g., "condition", "loop", "merge")
+        is_dark: Whether dark mode is enabled
+
+    Returns:
+        Mermaid style string
+    """
+    theme = "dark" if is_dark else "light"
+    colors = COLORS[theme].get(node_type, COLORS[theme]["merge"])
+    stroke_width = "1px" if node_type == "merge" else "2px"
+    return f"fill:{colors['bg']},stroke:{colors['stroke']},stroke-width:{stroke_width}"
+
+
+def get_edge_color(edge_type: str, is_dark: bool) -> str:
+    """
+    Get edge (arrow) color for Mermaid diagrams.
+
+    Args:
+        edge_type: Edge type ("executed", "not_executed", "compensation")
+        is_dark: Whether dark mode is enabled
+
+    Returns:
+        Color hex code
+    """
+    theme = "dark" if is_dark else "light"
+    key = f"edge_{edge_type}"
+    return cast(str, COLORS[theme].get(key, COLORS[theme]["edge_not_executed"]))
+
+
+# Tailwind CSS class mappings for UI components
+# Note: Background colors are controlled via CSS in app.py for proper dark mode support
+# NiceGUI adds 'dark' class to body, but Tailwind's dark: prefix expects it on html
+TAILWIND_CLASSES = {
+    "card": "border",  # Background handled by CSS
+    "card_hover": "",  # Hover handled by CSS
+    "surface": "",  # Background handled by CSS
+    "text_primary": "text-slate-900 dark:text-slate-100",
+    "text_secondary": "text-slate-500 dark:text-slate-400",
+    "text_muted": "text-slate-400 dark:text-slate-500",
+    "border": "border-slate-200 dark:border-slate-700",
+    "input": "border-slate-300 dark:border-slate-600",  # Background handled by CSS
+    "code_block": "border",  # Background handled by CSS
+}
+
+# Status badge Tailwind classes
+STATUS_BADGE_CLASSES = {
+    "completed": ("bg-emerald-50 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"),
+    "running": "bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+    "failed": "bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+    "waiting_event": "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300",
+    "waiting_timer": "bg-sky-50 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300",
+    "cancelled": ("bg-orange-50 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"),
+    "compensating": ("bg-purple-50 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"),
+    "not_executed": ("bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400"),
+}
+
+
+def get_status_badge_classes(status: str) -> str:
+    """
+    Get Tailwind CSS classes for a status badge.
+
+    Args:
+        status: Status name
+
+    Returns:
+        Tailwind CSS class string
+    """
+    status_key = status.lower().replace(" ", "_").replace("-", "_")
+
+    # Handle special status mappings
+    status_mapping = {
+        "waiting": "waiting_event",
+        "waiting_for_event": "waiting_event",
+        "waiting_for_timer": "waiting_timer",
+        "compensated": "compensating",
+    }
+    status_key = status_mapping.get(status_key, status_key)
+
+    base_classes = "px-3 py-1 rounded-full text-sm font-medium"
+    status_classes = STATUS_BADGE_CLASSES.get(status_key, STATUS_BADGE_CLASSES["not_executed"])
+    return f"{base_classes} {status_classes}"