flock-core 0.4.0b35__py3-none-any.whl → 0.4.0b36__py3-none-any.whl

flock/webapp/run.py

@@ -1,30 +1,132 @@
+import os  # For environment variable
 import sys
 from pathlib import Path
+from typing import TYPE_CHECKING
 
 import uvicorn
 
+if TYPE_CHECKING:
+    from flock.core import Flock
+
+# --- Integrated Server Function ---
+
+
+def start_integrated_server(
+    flock_instance: "Flock",
+    host: str,
+    port: int,
+    server_name: str,  # Currently unused as UI sets its own title
+    theme_name: str | None = None,
+):
+    """Starts the webapp, preloads flock & theme, includes API routes (TODO)."""
+    print(
+        f"Starting integrated server for Flock '{flock_instance.name}' on {host}:{port}"
+    )
+    try:
+        # Ensure src is in path (important if called from core)
+        src_dir = Path(__file__).resolve().parent.parent
+        if str(src_dir) not in sys.path:
+            sys.path.insert(0, str(src_dir))
+
+        # Import necessary webapp components *after* path setup
+        from flock.core.api.run_store import (
+            RunStore,  # Needed for API routes later
+        )
+        from flock.webapp.app.config import (
+            get_current_theme_name,
+            set_current_theme_name,
+        )
+        from flock.webapp.app.main import app as webapp_fastapi_app
+        from flock.webapp.app.services.flock_service import (
+            set_current_flock_instance_programmatically,
+        )
+        # from flock.core.api.endpoints import create_api_router # Need to adapt this later
+
+        # 1. Set Theme (use provided or default)
+        set_current_theme_name(
+            theme_name
+        )  # Uses default from config if theme_name is None
+        print(f"Integrated server using theme: {get_current_theme_name()}")
+
+        # 2. Set Flock Instance
+        set_current_flock_instance_programmatically(
+            flock_instance,
+            f"{flock_instance.name.replace(' ', '_').lower()}_integrated.flock",
+        )
+        print(f"Flock '{flock_instance.name}' preloaded.")
+
+        # 3. TODO: Adapt and Include API Routes
+        # run_store = RunStore()
+        # api_router = create_api_router(flock_instance, run_store) # Assuming refactored signature
+        # webapp_fastapi_app.include_router(api_router, prefix="/api")
+        # print("API routes included.")
+
+        # 4. Run Uvicorn - STILL PASSING INSTANCE here because we need to modify it (add routes)
+        #    and set state BEFORE running. Reload won't work well here.
+        uvicorn.run(
+            webapp_fastapi_app, host=host, port=port, reload=False
+        )  # Ensure reload=False
+
+    except ImportError as e:
+        print(
+            f"Error importing components for integrated server: {e}",
+            file=sys.stderr,
+        )
+        print(
+            "Ensure all dependencies are installed and paths are correct.",
+            file=sys.stderr,
+        )
+        sys.exit(1)
+    except Exception as e:
+        print(f"Error starting integrated server: {e}", file=sys.stderr)
+        sys.exit(1)
+
+
+# --- Standalone Webapp Runner (for `flock --web`) ---
+
 
 def main():
-    """Run the Flock web application."""
-    # Ensure the webapp directory is in the Python path
-    webapp_dir = Path(__file__).resolve().parent
-    if str(webapp_dir) not in sys.path:
-        sys.path.insert(0, str(webapp_dir.parent.parent))  # Add 'src' to path
+    """Run the Flock web application standalone."""
+    # Theme is now set via environment variable read by config.py on import
+    # No need to explicitly set it here anymore.
+    print(f"Starting standalone webapp...")
+    # Ensure src is in path
+    src_dir = Path(__file__).resolve().parent.parent
+    if str(src_dir) not in sys.path:
+        sys.path.insert(0, str(src_dir))
 
     try:
+        # Determine host, port, and reload settings
+        host = os.environ.get("FLOCK_WEB_HOST", "127.0.0.1")
+        port = int(os.environ.get("FLOCK_WEB_PORT", "8344"))
+        reload = os.environ.get("FLOCK_WEB_RELOAD", "true").lower() == "true"
+        # Use import string for app path
+        app_import_string = "flock.webapp.app.main:app"
+
+        # No need to import app instance here anymore for standalone mode
+        # from flock.webapp.app.main import app as webapp_fastapi_app
+        # from flock.webapp.app.config import get_current_theme_name
+        # print(f"Standalone webapp using theme: {get_current_theme_name()}") # Config now logs this on load
+
         uvicorn.run(
-            "flock.webapp.app.main:app",
-            host="127.0.0.1",
-            port=8344,
-            reload=True,
+            app_import_string,  # Use import string for reload capability
+            host=host,
+            port=port,
+            reload=reload,
         )
-    except ModuleNotFoundError as e:
-        print(f"Error loading webapp modules: {e}")
+    except ImportError as e:
+        # Catch potential import error during uvicorn startup if path is wrong
+        print(f"Error loading webapp modules via Uvicorn: {e}", file=sys.stderr)
         print(
-            "Make sure all required packages are installed and module structure is correct."
+            "Make sure all required packages are installed and src path is correct.",
+            file=sys.stderr,
         )
         sys.exit(1)
+    except Exception as e:
+        print(f"Error starting standalone webapp: {e}", file=sys.stderr)
+        sys.exit(1)
 
 
-if __name__ == "__main__":
-    main()
+# Note: The `if __name__ == "__main__":` block is removed as this module
+# is now primarily meant to be called via `main()` or `start_integrated_server()`
+# The CLI entry point will call `main()` after potentially calling `set_initial_theme()`.

flock/webapp/static/css/custom.css

@@ -3,9 +3,7 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     display: grid;
     grid-template-columns: 300px 1fr;
-    /* Increased sidebar width from 280px to 300px */
     grid-template-rows: auto 1fr auto;
-    /* Header, content, footer */
     grid-template-areas:
         "header header"
         "sidebar main"
@@ -13,7 +11,8 @@ body {
     min-height: 100vh;
     margin: 0;
     background-color: var(--pico-background-color);
-    /* Ensure body background is dark too */
+    /* Add body padding here if needed, instead of in base.html <style> */
+    /* padding-bottom: 50px; */ 
 }
 
 /* --- Improved Header Styles --- */
@@ -21,7 +20,7 @@ header.top-header {
     grid-area: header;
     border-bottom: 1px solid var(--pico-muted-border-color);
     padding: 0.7rem 1.5rem;
-    background-color: var(--pico-card-background-color);
+    background-color: var(--pico-card-sectioning-background-color); /* Use custom or fallback */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -30,24 +29,24 @@ header.top-header {
     left: 0;
     right: 0;
     z-index: 1001;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--pico-card-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2)); /* Use Pico shadow or fallback */
 }
 
 header.top-header strong {
-    color: white;
+    color: var(--pico-color); /* Use theme text color */
     font-weight: 600;
     font-size: 1.2rem;
     letter-spacing: 0.02em;
 }
 
 header.top-header small {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--pico-muted-color); /* Use muted color */
     font-size: 0.85rem;
 }
 
 header.top-header code {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    background: var(--pico-code-background-color); /* Use code background */
+    color: var(--pico-code-color); /* Use code text color */
     padding: 0.2em 0.5em;
     border-radius: 4px;
     font-size: 0.85rem;
@@ -59,43 +58,42 @@ main.main-content {
     grid-area: main;
     padding: 1.5rem;
     overflow-y: auto;
-    margin-top: 3.5rem;
+    margin-top: 3.5rem; /* Needs to match header height */
     background-color: var(--pico-background-color);
-    /* Main content area background */
+    padding-bottom: 50px; /* Add padding here to avoid overlap with fixed footer */
 }
 
 footer.main-footer {
-    grid-area: footer;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--pico-card-background-color);
+    border-top: 1px solid var(--pico-muted-border-color);
     padding: 0.5rem 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.07);
-    font-size: 0.8em;
     text-align: center;
-    z-index: 1;
-    background: var(--pico-card-background-color);
-    color: rgba(255, 255, 255, 0.6);
+    z-index: 1000;
 }
 
 /* --- Improved Sidebar Styles --- */
 aside.sidebar {
     grid-area: sidebar;
-    background: var(--pico-card-background-color);
+    background: var(--flock-sidebar-background, var(--pico-card-background-color)); /* Use custom or fallback */
     padding: 1.5rem 0;
-    border-right: 1px solid rgba(255, 255, 255, 0.07);
-    margin-top: 3.3rem;
-    height: calc(100vh - 3.5rem - 2.1rem);
+    border-right: 1px solid var(--pico-muted-border-color);
+    margin-top: 3.2rem; /* Adjust if header height changed */
+    height: calc(100vh - 3.5rem - 2.1rem); /* Adjust based on header/footer heights */
     position: fixed;
     left: 0;
-    bottom: 2.1rem;
-    width: 320px;
-    /* Increased from 280px to 300px */
+    bottom: 2.1rem; /* Adjust based on footer height */
+    width: 300px; /* Match grid-template-columns */
     z-index: 1000;
 }
 
 .sidebar nav h5 {
-
     margin-bottom: 0.9rem;
     padding-left: 1.5rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--pico-color); /* Use muted color */
     font-size: 0.85em;
     text-transform: uppercase;
     letter-spacing: 0.08em;
@@ -104,7 +102,6 @@ aside.sidebar {
 
 .sidebar nav h5:first-of-type {
     margin-top: 0;
-    /* First heading should not have top margin */
     margin-bottom: 0.9rem;
 }
 
@@ -121,8 +118,8 @@ aside.sidebar {
 
 .sidebar hr {
     margin: 1.25rem 1.5rem;
-    border-color: rgba(255, 255, 255, 0.1);
-    opacity: 0.5;
+    border-color: var(--pico-muted-border-color); /* Use muted border */
+    opacity: 0.5; /* Keep opacity or adjust as needed */
 }
 
 /* Links and buttons in sidebar */
@@ -135,7 +132,7 @@ aside.sidebar {
     padding: 0.7rem 1rem;
     border: none;
     background-color: transparent;
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--pico-button-base-color); /* Use theme text color */
     text-decoration: none;
     border-radius: 8px;
     font-size: 0.9em;
@@ -143,7 +140,6 @@ aside.sidebar {
     transition: all 0.2s ease-in-out;
     font-weight: 500;
     white-space: nowrap;
-    /* Prevent text wrapping in menu items */
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -154,17 +150,16 @@ aside.sidebar {
     width: 24px;
     margin-right: 8px;
     text-align: center;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--pico-h2-color); /* Use muted color */
     transition: all 0.2s ease-in-out;
     flex-shrink: 0;
-    /* Prevent icon from shrinking */
 }
 
 .sidebar nav a:hover i,
 .sidebar nav button:hover i,
 .sidebar nav a.active-nav i,
 .sidebar nav button.active-nav i {
-    color: white;
+    color: var(--pico-primary-inverse); /* Color for icon on active/hover background */
     transform: scale(1.1);
 }
 
@@ -173,18 +168,19 @@ aside.sidebar {
 .sidebar nav button.contrast {
     border: none;
     background-color: transparent;
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--pico-muted-color); /* Use theme text color */
     box-shadow: none;
 }
 
 .sidebar nav button:focus {
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
+    /* Use Pico's focus style or define a custom one using theme vars */
+    box-shadow: 0 0 0 3px var(--pico-primary-focus); 
 }
 
 .sidebar nav a:hover,
 .sidebar nav button:hover {
-    background-color: rgba(79, 70, 229, 0.15);
-    color: #fff;
+    background-color: var(--pico-primary-hover-background, var(--pico-primary-focus)); /* Use hover background or focus as fallback */
+    color: var(--pico-primary-inverse); /* Text color on hover background */
     transform: translateX(3px);
 }
 
@@ -193,10 +189,10 @@ aside.sidebar {
 .sidebar nav button[aria-current="page"],
 .sidebar nav a.active-nav,
 .sidebar nav button.active-nav {
-    background-color: #4f46e5;
-    color: white;
+    background-color: var(--pico-primary);
+    color: var(--pico-primary-inverse);
     font-weight: 600;
-    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+    box-shadow: var(--pico-card-box-shadow); /* Use a standard shadow or define custom */
 }
 
 /* --- End Sidebar Styles --- */
@@ -208,12 +204,11 @@ aside.sidebar {
     bottom: 3rem;
     right: 1rem;
     z-index: 1002;
-    /* Higher than sidebar */
     width: auto;
     max-width: 400px;
 }
 
-.message-container>div {
+.message-container > div {
     margin-top: 0.5rem;
     box-shadow: var(--pico-card-box-shadow);
     display: flex;
@@ -225,15 +220,15 @@ aside.sidebar {
 }
 
 .message-container .success {
-    background-color: var(--pico-ins-color);
-    color: var(--pico-primary-inverse);
-    border: 1px solid var(--pico-ins-color);
+    background-color: var(--flock-success-color, var(--pico-ins-color)); /* Use custom or Pico fallback */
+    color: var(--pico-primary-inverse); /* Assuming success background provides contrast */
+    border: 1px solid var(--flock-success-color, var(--pico-ins-color));
 }
 
 .message-container .error {
-    background-color: var(--pico-del-color);
-    color: var(--pico-primary-inverse);
-    border: 1px solid var(--pico-del-color);
+    background-color: var(--flock-error-color, var(--pico-del-color)); /* Use custom or Pico fallback */
+    color: var(--pico-primary-inverse); /* Assuming error background provides contrast */
+    border: 1px solid var(--flock-error-color, var(--pico-del-color));
 }
 
 .message-container .close {
@@ -253,11 +248,15 @@ progress {
 }
 
 progress:indeterminate {
-    background: rgba(79, 70, 229, 0.2);
+    background: rgba(var(--pico-primary-rgb), 0.2); /* Need RGB version or approximation */
+    /* Fallback if RGB not available */
+    /* background: var(--pico-loading-bar-background-color); */
 }
 
 progress:indeterminate::after {
-    background-image: linear-gradient(90deg, rgba(79, 70, 229, 0.2) 0%, #4f46e5 50%, rgba(79, 70, 229, 0.2) 100%);
+    /* Fallback if RGB not available */
+    /* background-image: var(--pico-loading-bar-indeterminate-background-image); */
+    background-image: linear-gradient(90deg, rgba(var(--pico-primary-rgb), 0.2) 0%, var(--pico-primary) 50%, rgba(var(--pico-primary-rgb), 0.2) 100%);
 }
 
 .sidebar progress {
@@ -277,7 +276,7 @@ progress:indeterminate::after {
 #agent-list-panel,
 #agent-detail-panel {
     height: calc(80vh - var(--pico-block-spacing-vertical) * 2);
-    overflow-y: auto;
+    
 }
 
 #agent-list-panel article,
@@ -291,6 +290,7 @@ progress:indeterminate::after {
 
 #agent-list-panel header,
 #agent-detail-panel header {
+    /* background-color: var(--pico-card-sectioning-background-color); */
     flex-shrink: 0;
 }
 
@@ -299,7 +299,6 @@ progress:indeterminate::after {
     overflow-y: auto;
     list-style-type: none;
     padding: 0;
-    margin-top: 1rem;
 }
 
 #agent-list-panel li {
@@ -312,12 +311,12 @@ progress:indeterminate::after {
 }
 
 #agent-list-panel li:hover,
-#agent-list-panel li.htmx-settling {
+#agent-list-panel li.htmx-setting {
     background-color: var(--pico-muted-hover-background-color);
 }
 
 #agent-list-panel li.selected-agent {
-    background-color: var(--pico-primary-focus);
+    background-color: var(--pico-primary-focus); /* Use focus color for selection */
     border-color: var(--pico-primary);
     color: var(--pico-primary-inverse);
 }
@@ -357,16 +356,17 @@ progress:indeterminate::after {
 /* Buttons and Forms Styling */
 button[type="submit"],
 button.primary {
-    background-color: #4f46e5;
-    border-color: #4f46e5;
-    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+    color: var(--pico-color);
+    background-color: var(--pico-primary);
+    border-color: var(--pico-primary);
+    box-shadow: var(--pico-card-box-shadow); /* Use standard shadow or focus? */
 }
 
 button[type="submit"]:hover,
 button.primary:hover {
-    background-color: #4338ca;
-    border-color: #4338ca;
-    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.4);
+    background-color: var(--pico-primary-hover);
+    border-color: var(--pico-primary-hover);
+    box-shadow: var(--pico-card-box-shadow); /* Enhance shadow on hover? */
 }
 
 /* Tool Checklist */
@@ -378,7 +378,6 @@ button.primary:hover {
     margin-bottom: 0.75rem;
     border-radius: var(--pico-border-radius);
     background-color: var(--pico-form-element-background-color);
-    /* Match form input background */
 }
 
 .tool-checklist label {
@@ -441,7 +440,7 @@ button.primary:hover {
 }
 
 #results-display .structured-table td[style*="font-weight: bold"] {
-    color: var(--pico-secondary);
+    color: var(--pico-secondary); /* Use secondary color for keys? */
     min-width: 120px;
     max-width: 250px;
     word-break: break-word;
@@ -486,42 +485,128 @@ button.primary:hover {
 
 /* Utility for form field errors */
 .field-error {
-    color: var(--pico-del-color);
+    color: var(--flock-error-color, var(--pico-del-color)); /* Use custom or fallback */
     font-size: var(--pico-font-size-small);
     margin-top: -0.5rem;
     margin-bottom: 0.5rem;
 }
 
 /* Main content headings - ensure consistent vertical alignment */
-main.main-content h1 {
-    font-size: 2rem;
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    color: white;
+main.main-content h1,
+main.main-content h2,
+main.main-content h3 {
+    color: var(--pico-color); /* Use theme text color */
     font-weight: 600;
     line-height: 1.2;
+    margin-top: 0; /* Reset top margin */
 }
 
-main.main-content h2 {
-    font-size: 1.75rem;
-    margin-top: 0;
+main.main-content h1 { 
+    font-size: 2rem; 
+    margin-bottom: 1.5rem;
+}
+main.main-content h2 { 
+    font-size: 1.75rem; 
     margin-bottom: 1.25rem;
-    color: white;
-    font-weight: 600;
-    line-height: 1.2;
 }
-
-main.main-content h3 {
-    font-size: 1.5rem;
-    margin-top: 0;
+main.main-content h3 { 
+    font-size: 1.5rem; 
     margin-bottom: 1rem;
-    color: white;
-    font-weight: 600;
-    line-height: 1.2;
 }
 
 /* Panel titles styling for consistency */
 .panel-title {
     margin-top: 0;
     margin-bottom: 1.25rem;
-}
+    /* Inherits color from h1/h2/h3 now */
+}
+
+/* ==========================================================================
+   Two-Pane Flex Layout (Unified)
+   ========================================================================== */
+
+.two-pane-flex-container {
+    display: flex;
+    gap: 1.5rem; /* Consistent gap like in execution view */
+    border: 1px solid var(--pico-muted-border-color); /* Optional: If the container itself needs a border
+    /* border-radius: var(--pico-border-radius); */
+    background-color: var(--pico-card-background-color); /* Optional: If the container needs a distinct background */
+}
+
+.left-pane {
+    flex: 1;
+    min-width: 300px; /* Minimum width for the left selection/control pane */
+    /* background-color: var(--pico-card-background-color); /* Optional: if left pane needs card-like bg */
+    /* border: 1px solid var(--pico-muted-border-color); /* Optional: if left pane needs border */
+    /* border-radius: var(--pico-border-radius); */
+    display: flex; /* To allow header and scrollable content within */
+    flex-direction: column;
+   
+}
+
+/* If the left pane has a content div that should be scrollable (e.g., a list) */
+.left-pane > .scrollable-content {
+    flex-grow: 1;
+    
+}
+
+.right-pane-framed {
+    flex: 2; /* Right pane takes more space */
+    /* background-color: var(--pico-background-color); /* Match execution view's right pane style if it's plain */
+    border-left: 1px solid var(--pico-muted-border-color); /* Separator line */
+    padding-left: 1.5rem; /* Padding to the left of the separator */
+    
+}
+
+.right-pane-framed > header {
+    padding-bottom: 0.75rem; /* Space below the title in the right pane */
+    border-bottom: 1px solid var(--pico-muted-border-color); /* Line below title */
+    margin-bottom: 1rem; /* Space between header and content */
+}
+
+.right-pane-framed > header > h5 {
+    margin-bottom: 0; /* Reset Pico's default h5 margin if needed */
+    font-size: 1.1rem; /* Consistent header size */
+}
+
+/* Styles for item lists within the left-pane if needed globally */
+.item-list-container {
+    flex-grow: 1;
+    
+    /* border-top: 1px solid var(--pico-muted-border-color);  */
+}
+
+ul.item-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+ul.item-list li {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    cursor: pointer;
+    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+ul.item-list li:last-child {
+    border-bottom: none;
+}
+
+ul.item-list li:hover,
+ul.item-list li.selected-item {
+    background-color: var(--pico-primary-focus); /* Or var(--pico-active-background-color) */
+    color: var(--pico-primary-inverse); /* Or var(--pico-active-color) */
+}
+
+/* Attempt to override/reset .editor-grid if it's defined elsewhere and conflicts.
+   If .editor-grid and .flock-manager-grid are only in <style> tags, they will be removed with the HTML. */
+.editor-grid {
+    display: unset;
+    grid-template-columns: unset;
+    gap: unset;
+    height: unset;
+    border: unset;
+    border-radius: unset;
+    background-color: unset;
+}

flock/webapp/templates/base.html

@@ -9,6 +9,15 @@
     <link rel="stylesheet" href="/static/css/custom.css">
     <!-- Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    {# Inject Theme CSS Variables #}
+    {% if theme_css %}
+    <style>
+        /* Start Theme CSS */
+        {{ theme_css | safe }}
+        /* End Theme CSS */
+    </style>
+    {% endif %}
+    {# End Theme CSS Injection #}
     <script src="https://unpkg.com/htmx.org@1.9.10"
         integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
         crossorigin="anonymous"></script>
@@ -19,12 +28,10 @@
 <body>
     <header class="top-header">
         <span><strong>🐧 Flock UI 🐤</strong></span>
-        {# Use the variables passed from the route handler #}
-        {% if current_flock %}
-        <small>Current: <code>{{ current_filename or current_flock.name }}</code></small>
-        {% else %}
-        <small>No Flock Loaded</small>
-        {% endif %}
+        <span id="header-flock-status-container" hx-get="/ui/htmx/header-flock-status?ui_mode={{ ui_mode }}"
+            hx-trigger="load, flockLoaded from:body, flockCleared from:body" hx-swap="innerHTML">
+            <small>Loading status...</small> {# Placeholder while loading #}
+        </span>
     </header>
 
     <aside class="sidebar" hx-get="/ui/htmx/sidebar?ui_mode={{ ui_mode }}"
@@ -60,7 +67,7 @@
     </div>
 
     <footer class="main-footer">
-        <small>Built with FastAPI, HTMX, Pico.CSS by 🤍 white duck 🦆</small>
+        <small>Built with FastAPI, HTMX, Pico.CSS by 🤍 white duck 🦆 - Theme: {{ active_theme_name | default('default') }}</small>
     </footer>
 
     <script>