flock-core 0.4.0b49__tar.gz → 0.4.0b50__tar.gz

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: flock-core
-Version: 0.4.0b49
+Version: 0.4.0b50
 Summary: Declarative LLM Orchestration at Scale
 Author-email: Andre Ratzenberger <andre.ratzenberger@whiteduck.de>
 License-File: LICENSE

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "flock-core"
-version = "0.4.0b-49"
+version = "0.4.0b-50"
 description = "Declarative LLM Orchestration at Scale"
 readme = "README.md"
 authors = [

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/app/api/execution.py

@@ -3,6 +3,7 @@ import json
 from pathlib import Path
 from typing import TYPE_CHECKING, Any
 
+import markdown2  # Import markdown2
 from fastapi import (  # Ensure Form and HTTPException are imported
     APIRouter,
     Depends,
@@ -16,9 +17,6 @@ if TYPE_CHECKING:
     from flock.core.flock import Flock
 
 
-from flock.core.flock import (
-    Flock as ConcreteFlock,  # For creating Flock instance
-)
 from flock.core.logging.logging import (
     get_logger as get_flock_logger,  # For logging within the new endpoint
 )
@@ -35,12 +33,17 @@ from flock.webapp.app.services.flock_service import (
     run_current_flock_service,
     # get_current_flock_instance IS NO LONGER IMPORTED
 )
-from flock.webapp.app.utils import pydantic_to_dict
 
 router = APIRouter()
 BASE_DIR = Path(__file__).resolve().parent.parent.parent
 templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
 
+# Add markdown2 filter to Jinja2 environment for this router
+def markdown_filter(text):
+    return markdown2.markdown(text, extras=["tables", "fenced-code-blocks"])
+
+templates.env.filters['markdown'] = markdown_filter
+
 
 @router.get("/htmx/execution-form-content", response_class=HTMLResponse)
 async def htmx_get_execution_form_content(
@@ -102,14 +105,9 @@ async def htmx_get_agent_input_form(
 @router.post("/htmx/run", response_class=HTMLResponse)
 async def htmx_run_flock(
     request: Request,
-    # current_flock: Flock = Depends(get_flock_instance) # Service will use app_state
 ):
-    # The service function run_current_flock_service now takes app_state
-    # We retrieve current_flock from app_state inside the service or before calling if needed for validation here
-
-    # It's better to get flock from app_state here to validate before calling service
     current_flock_from_state: Flock | None = getattr(request.app.state, 'flock_instance', None)
-    logger = get_flock_logger("webapp.execution.regular_run") # Standard logger
+    logger = get_flock_logger("webapp.execution.regular_run")
 
     if not current_flock_from_state:
         logger.error("HTMX Run (Regular): No Flock loaded in app_state.")
@@ -150,30 +148,14 @@ async def htmx_run_flock(
             logger.error(f"HTMX Run (Regular): Error processing inputs for '{start_agent_name}': {e_parse}", exc_info=True)
             return HTMLResponse(f"<p class='error'>Error processing inputs for {start_agent_name}: {e_parse}</p>")
 
-    try:
-        logger.info(f"HTMX Run (Regular): Executing agent '{start_agent_name}' from Flock '{current_flock_from_state.name}' via service.")
-        result_data = await run_current_flock_service(start_agent_name, inputs, request.app.state)
-    except Exception as e_run:
-        logger.error(f"HTMX Run (Regular): Error during service execution for '{start_agent_name}': {e_run}", exc_info=True)
-        return templates.TemplateResponse(
-            "partials/_results_display.html",
-            {"request": request, "result_data": {"error": f"Error during execution: {e_run!s}"}},
-        )
-
-    # Process and serialize result for template
-    try:
-        processed_result = pydantic_to_dict(result_data)
-        try: json.dumps(processed_result)
-        except (TypeError, ValueError) as ser_e:
-            processed_result = f"Error: Result contains non-serializable data: {ser_e!s}\nOriginal result preview: {str(result_data)[:500]}..."
-            logger.warning(f"HTMX Run (Regular): Serialization issue: {processed_result}")
-    except Exception as proc_e:
-        processed_result = f"Error: Failed to process result data: {proc_e!s}"
-        logger.error(f"HTMX Run (Regular): Result processing error: {processed_result}", exc_info=True)
+    result_data = await run_current_flock_service(start_agent_name, inputs, request.app.state)
+    raw_json_for_template = json.dumps(result_data, indent=2)
+    # Unescape newlines for proper display in HTML <pre> tag
+    result_data_raw_json_str = raw_json_for_template.replace('\\n', '\n')
 
     return templates.TemplateResponse(
         "partials/_results_display.html",
-        {"request": request, "result_data": processed_result},
+        {"request": request, "result": result_data, "result_raw_json": result_data_raw_json_str} # Pass both
     )
 
 
@@ -181,27 +163,18 @@ async def htmx_run_flock(
 @router.post("/htmx/run-shared", response_class=HTMLResponse)
 async def htmx_run_shared_flock(
     request: Request,
-    share_id: str = Form(...), # Expect share_id from the form
-    # flock_definition_str: str = Form(...), # No longer needed
-    # start_agent_name from form is still required implicitly via form_data.get()
-    # No DI for current_flock, as we are using the one from app.state via share_id
+    share_id: str = Form(...),
 ):
     shared_logger = get_flock_logger("webapp.execution.shared_run_stateful")
     form_data = await request.form()
     start_agent_name = form_data.get("start_agent_name")
 
     if not start_agent_name:
-        shared_logger.warning("HTMX Run Shared (Stateful): Starting agent name not provided in form.")
-        return HTMLResponse("<p class='error'>Critical error: Starting agent name missing from shared run form.</p>")
-
-    shared_logger.info(f"HTMX Run Shared (Stateful): Attempting to execute agent '{start_agent_name}' using pre-loaded Flock for share_id '{share_id}'.")
-
-    inputs = {}
-    result_data: Any = None
-    temp_flock: ConcreteFlock | None = None
+        shared_logger.warning("HTMX Run Shared: Starting agent not selected.")
+        return HTMLResponse("<p class='error'>Starting agent not selected for shared run.</p>")
 
+    inputs: dict[str, Any] = {}
     try:
-        # Retrieve the pre-loaded Flock instance from app.state
         shared_flocks_store = getattr(request.app.state, 'shared_flocks', {})
         temp_flock = shared_flocks_store.get(share_id)
 
@@ -216,14 +189,11 @@ async def htmx_run_shared_flock(
             shared_logger.error(f"HTMX Run Shared: Agent '{start_agent_name}' not found in shared Flock '{temp_flock.name}'.")
             return HTMLResponse(f"<p class='error'>Agent '{start_agent_name}' not found in the provided shared Flock definition.</p>")
 
-        # Parse inputs for the agent from the temporary flock
         if agent.input and isinstance(agent.input, str):
             parsed_spec = parse_schema(agent.input)
             for name, type_str, _ in parsed_spec:
-                form_field_name = f"agent_input_{name}" # Name used in shared_run_page.html
+                form_field_name = f"agent_input_{name}"
                 raw_value = form_data.get(form_field_name)
-
-                # Input type conversion (consistent with the other endpoint)
                 if raw_value is None and "bool" in type_str.lower(): inputs[name] = False; continue
                 if raw_value is None: inputs[name] = None; continue
                 if "int" in type_str.lower(): inputs[name] = int(raw_value)
@@ -234,31 +204,19 @@ async def htmx_run_shared_flock(
 
         shared_logger.info(f"HTMX Run Shared: Executing agent '{start_agent_name}' in pre-loaded Flock '{temp_flock.name}'. Inputs: {list(inputs.keys())}")
         result_data = await temp_flock.run_async(start_agent=start_agent_name, input=inputs, box_result=False)
+        raw_json_for_template = json.dumps(result_data, indent=2)
+        # Unescape newlines for proper display in HTML <pre> tag
+        result_data_raw_json_str = raw_json_for_template.replace('\\n', '\n')
         shared_logger.info(f"HTMX Run Shared: Agent '{start_agent_name}' executed. Result keys: {list(result_data.keys()) if isinstance(result_data, dict) else 'N/A'}")
 
-        # Process and serialize result for template (same logic as other endpoint)
-        try:
-            processed_result = pydantic_to_dict(result_data)
-            try: json.dumps(processed_result)
-            except (TypeError, ValueError) as ser_e:
-                processed_result = f"Error: Result contains non-serializable data: {ser_e!s}\nOriginal result preview: {str(result_data)[:500]}..."
-                shared_logger.warning(f"HTMX Run Shared: Serialization issue: {processed_result}")
-        except Exception as proc_e:
-            processed_result = f"Error: Failed to process result data: {proc_e!s}"
-            shared_logger.error(f"HTMX Run Shared: Result processing error: {processed_result}", exc_info=True)
-
-        return templates.TemplateResponse(
-            "partials/_results_display.html",
-            {"request": request, "result_data": processed_result},
-        )
-
-    except ValueError as ve: # Catch specific input parsing errors
-        shared_logger.error(f"HTMX Run Shared: Input parsing error for agent '{start_agent_name}': {ve}", exc_info=True)
+    except ValueError as ve:
+        shared_logger.error(f"HTMX Run Shared: Input parsing error for '{start_agent_name}' (share_id: {share_id}): {ve}", exc_info=True)
         return HTMLResponse(f"<p class='error'>Invalid input format: {ve!s}</p>")
-    except Exception as e_general:
-        error_message = f"An unexpected error occurred during shared execution: {e_general!s}"
-        shared_logger.error(f"HTMX Run Shared: General error for agent '{start_agent_name}': {e_general}", exc_info=True)
-        return templates.TemplateResponse(
-            "partials/_results_display.html",
-            {"request": request, "result_data": {"error": error_message } },
-        )
+    except Exception as e:
+        shared_logger.error(f"HTMX Run Shared: Error during execution for '{start_agent_name}' (share_id: {share_id}): {e}", exc_info=True)
+        return HTMLResponse(f"<p class='error'>An unexpected error occurred: {e!s}</p>")
+
+    return templates.TemplateResponse(
+        "partials/_results_display.html",
+        {"request": request, "result": result_data, "result_raw_json": result_data_raw_json_str} # Pass both
+    )

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/app/chat.py

@@ -6,7 +6,7 @@ from datetime import datetime
 from uuid import uuid4
 
 import markdown2  # Added for Markdown to HTML conversion
-from fastapi import APIRouter, Depends, Form, Request
+from fastapi import APIRouter, Depends, Form, Request, Response
 from fastapi.responses import HTMLResponse
 from pydantic import BaseModel
 
@@ -272,7 +272,7 @@ async def chat_settings_form(request: Request):
     return templates.TemplateResponse("partials/_chat_settings_form.html", context)
 
 
-@router.post("/chat/settings", response_class=HTMLResponse, include_in_schema=False)
+@router.post("/chat/settings", include_in_schema=False)
 async def chat_settings_submit(
     request: Request,
     agent_name: str | None = Form(default=None),
@@ -280,19 +280,23 @@ async def chat_settings_submit(
     history_key: str = Form("history"),
     response_key: str = Form("response"),
 ):
-    """Apply submitted chat config, then re-render the form with a success message."""
+    """Handles chat settings submission and triggers a toast notification."""
     cfg = get_chat_config(request)
-    cfg.agent_name = agent_name or None
+    cfg.agent_name = agent_name
     cfg.message_key = message_key
     cfg.history_key = history_key
     cfg.response_key = response_key
 
-    headers = {
-        "HX-Trigger": json.dumps({"notify": {"type": "success", "message": "Chat settings saved"}}),
-        "HX-Redirect": "/chat"
+    logger.info(f"Chat settings updated: Agent: {cfg.agent_name}, MsgKey: {cfg.message_key}, HistKey: {cfg.history_key}, RespKey: {cfg.response_key}")
+
+    toast_event = {
+        "showGlobalToast": {
+            "message": "Chat settings saved successfully!",
+            "type": "success"
+        }
     }
-    # Response body empty; HTMX will redirect
-    return HTMLResponse("", headers=headers)
+    headers = {"HX-Trigger": json.dumps(toast_event)}
+    return Response(status_code=204, headers=headers)
 
 
 # --- Stand-alone Chat HTML page access to settings --------------------------

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/app/config.py

@@ -38,7 +38,7 @@ THEMES_DIR = FLOCK_BASE_DIR / "themes"
 CURRENT_FLOCK_INSTANCE: "Flock | None" = None
 CURRENT_FLOCK_FILENAME: str | None = None
 
-DEFAULT_THEME_NAME = OutputTheme.everblush.value # Default if random fails or invalid theme specified
+DEFAULT_THEME_NAME = OutputTheme.ciapre.value # Default if random fails or invalid theme specified
 
 def list_available_themes() -> list[str]:
     """Scans the THEMES_DIR for .toml files and returns their names (without .toml)."""

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/app/main.py

@@ -9,6 +9,7 @@ import uuid
 from contextlib import asynccontextmanager
 from pathlib import Path
 
+import markdown2  # Import markdown2
 from fastapi import (
     Depends,
     FastAPI,
@@ -237,6 +238,12 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static")), name="static")
 templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
 
+# Add markdown2 filter to Jinja2 environment
+def markdown_filter(text):
+    return markdown2.markdown(text, extras=["tables", "fenced-code-blocks"])
+
+templates.env.filters['markdown'] = markdown_filter
+
 core_api_router = create_api_router()
 app.include_router(core_api_router, prefix="/api", tags=["Flock API Core"])
 app.include_router(flock_management.router, prefix="/ui/api/flock", tags=["UI Flock Management"])
@@ -758,11 +765,10 @@ async def ui_load_flock_by_name_action(request: Request, selected_flock_filename
     ui_mode_query = request.query_params.get("ui_mode", "standalone")
     if loaded_flock:
         success_message_text = f"Flock '{loaded_flock.name}' loaded from '{selected_flock_filename}'."
-        response_headers["HX-Push-Url"] = "/ui/editor/properties?ui_mode=" + request.query_params.get("ui_mode", "standalone")
+        response_headers["HX-Push-Url"] = "/ui/editor/execute?ui_mode=" + ui_mode_query
         response_headers["HX-Trigger"] = json.dumps({"flockLoaded": None, "notify": {"type": "success", "message": success_message_text}})
-        # Use get_base_context_web to ensure all necessary context vars are present for the partial
         context = get_base_context_web(request, success=success_message_text, ui_mode=ui_mode_query)
-        return templates.TemplateResponse("partials/_flock_properties_form.html", context, headers=response_headers)
+        return templates.TemplateResponse("partials/_execution_view_container.html", context, headers=response_headers)
     else:
         error_message_text = f"Failed to load flock file '{selected_flock_filename}'."
         response_headers["HX-Trigger"] = json.dumps({"notify": {"type": "error", "message": error_message_text}})
@@ -790,16 +796,14 @@ async def ui_load_flock_by_upload_action(request: Request, flock_file_upload: Up
         loaded_flock = load_flock_from_file_service(filename_to_load, request.app.state)
         if loaded_flock:
             success_message_text = f"Flock '{loaded_flock.name}' loaded from '{filename_to_load}'."
-            response_headers["HX-Push-Url"] = f"/ui/editor/properties?ui_mode={ui_mode_query}"
+            response_headers["HX-Push-Url"] = f"/ui/editor/execute?ui_mode={ui_mode_query}"
             response_headers["HX-Trigger"] = json.dumps({"flockLoaded": None, "flockFileListChanged": None, "notify": {"type": "success", "message": success_message_text}})
-            # CORRECTED CALL:
             context = get_base_context_web(request, success=success_message_text, ui_mode=ui_mode_query)
-            return templates.TemplateResponse("partials/_flock_properties_form.html", context, headers=response_headers)
+            return templates.TemplateResponse("partials/_execution_view_container.html", context, headers=response_headers)
         else: error_message_text = f"Failed to process uploaded '{filename_to_load}'."
 
     final_error_msg = error_message_text or "Upload failed."
     response_headers["HX-Trigger"] = json.dumps({"notify": {"type": "error", "message": final_error_msg}})
-    # CORRECTED CALL:
     context = get_base_context_web(request, error=final_error_msg, ui_mode=ui_mode_query)
     return templates.TemplateResponse("partials/_create_flock_form.html", context, headers=response_headers)
 
@@ -807,16 +811,14 @@ async def ui_load_flock_by_upload_action(request: Request, flock_file_upload: Up
 async def ui_create_flock_action(request: Request, flock_name: str = Form(...), default_model: str = Form(None), description: str = Form(None)):
     ui_mode_query = request.query_params.get("ui_mode", "standalone")
     if not flock_name.strip():
-        # CORRECTED CALL:
         context = get_base_context_web(request, error="Flock name cannot be empty.", ui_mode=ui_mode_query)
         return templates.TemplateResponse("partials/_create_flock_form.html", context)
 
     new_flock = create_new_flock_service(flock_name, default_model, description, request.app.state)
-    success_msg_text = f"New flock '{new_flock.name}' created. Configure properties and save."
-    response_headers = {"HX-Push-Url": f"/ui/editor/properties?ui_mode={ui_mode_query}", "HX-Trigger": json.dumps({"flockLoaded": None, "notify": {"type": "success", "message": success_msg_text}})}
-    # CORRECTED CALL:
+    success_msg_text = f"New flock '{new_flock.name}' created. Navigating to Execute page. Configure properties and agents as needed."
+    response_headers = {"HX-Push-Url": f"/ui/editor/execute?ui_mode={ui_mode_query}", "HX-Trigger": json.dumps({"flockLoaded": None, "notify": {"type": "success", "message": success_msg_text}})}
     context = get_base_context_web(request, success=success_msg_text, ui_mode=ui_mode_query)
-    return templates.TemplateResponse("partials/_flock_properties_form.html", context, headers=response_headers)
+    return templates.TemplateResponse("partials/_execution_view_container.html", context, headers=response_headers)
 
 # --- Settings Page & Endpoints ---
 @app.get("/ui/settings", response_class=HTMLResponse, tags=["UI Pages"])

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/templates/base.html

@@ -14,8 +14,10 @@
     <link rel="stylesheet" href="/static/css/chat.css">
     <!-- Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <!-- Prism.js CSS for syntax highlighting (okaidia theme) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" referrerpolicy="no-referrer" />
     {# Inject Theme CSS Variables #}
-    {% if theme_css %}
+    {% if theme_css and theme_css.strip() %}
     <style>
         /* Start Theme CSS */
         {{ theme_css | safe }}
@@ -27,10 +29,17 @@
         integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
         crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <!-- Prism.js JS (core and autoloader) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" referrerpolicy="no-referrer"></script>
     <!-- Removed inline styles as they're in custom.css -->
 </head>
 
 <body>
+    <div id="global-toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;">
+        <!-- Toasts will be appended here -->
+    </div>
+
     <header class="top-header">
         <span><strong>🐧 Flock Playground 🐤</strong></span>
         <span id="header-flock-status-container" hx-get="/ui/htmx/header-flock-status?ui_mode={{ ui_mode }}"
@@ -104,6 +113,87 @@
         function triggerEvent(eventName, detail = {}) {
             htmx.trigger(document.body, eventName, detail);
         }
+
+        // Add HTMX event listener for Prism highlighting
+        document.addEventListener('htmx:afterSwap', function(event) {
+            // Check if the swapped element or its parent is the main content area or results display
+            const mainContentArea = document.getElementById('main-content-area');
+            const resultsDisplay = document.getElementById('results-display-content');
+            let targetElement = event.detail.target;
+
+            if (targetElement === mainContentArea || (resultsDisplay && resultsDisplay.contains(targetElement)) || (mainContentArea && mainContentArea.contains(targetElement))) {
+                if (typeof Prism !== 'undefined') {
+                    // console.log('Prism highlighting triggered for swapped content in main area.');
+                    Prism.highlightAllUnder(mainContentArea || document.documentElement); 
+                }
+            }
+        });
+
+        // Initial highlight on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            if (typeof Prism !== 'undefined') {
+                // console.log('Prism initial highlighting.');
+                Prism.highlightAll();
+            }
+        });
+    </script>
+    {# Global Toast Handler - identical to the one in chat.html #}
+    <script>
+        document.body.addEventListener('showGlobalToast', function (event) {
+            const detail = event.detail;
+            const message = detail.message || 'Done!';
+            const type = detail.type || 'info'; // success, error, warning, info
+
+            const toastContainer = document.getElementById('global-toast-container');
+            if (!toastContainer) return;
+
+            const toast = document.createElement('article');
+            toast.className = `toast-message ${type}`;
+            toast.innerHTML = `<button class="close-toast" style="float: right; background: none; border: none; font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer;">&times;</button>${message}`;
+            
+            toast.style.padding = '0.75rem';
+            toast.style.border = '1px solid';
+            toast.style.borderRadius = 'var(--pico-border-radius, 4px)';
+            toast.style.minWidth = '250px';
+            toast.style.maxWidth = '400px';
+            toast.style.opacity = '0';
+            toast.style.transition = 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out';
+            toast.style.transform = 'translateX(100%)';
+
+            if (type === 'success') {
+                toast.style.borderColor = 'var(--pico-color-green-500, green)';
+                toast.style.backgroundColor = 'var(--pico-color-green-150, #e6fffa)';
+                toast.style.color = 'var(--pico-color-green-700, darkgreen)';
+            } else if (type === 'error') {
+                toast.style.borderColor = 'var(--pico-color-red-500, red)';
+                toast.style.backgroundColor = 'var(--pico-color-red-150, #ffe6e6)';
+                toast.style.color = 'var(--pico-color-red-700, darkred)';
+            } else { // Default/info/warning
+                toast.style.borderColor = 'var(--pico-color-blue-500, blue)';
+                toast.style.backgroundColor = 'var(--pico-color-blue-150, #e6f7ff)';
+                toast.style.color = 'var(--pico-color-blue-700, darkblue)';
+            }
+
+            toastContainer.appendChild(toast);
+
+            setTimeout(() => {
+                toast.style.opacity = '1';
+                toast.style.transform = 'translateX(0)';
+            }, 10);
+
+            const closeButton = toast.querySelector('.close-toast');
+            closeButton.onclick = () => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateY(-20px)';
+                setTimeout(() => toast.remove(), 300);
+            };
+
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateY(-20px)';
+                setTimeout(() => toast.remove(), 300);
+            }, 5000);
+        });
     </script>
 </body>
 

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/templates/chat.html

@@ -9,7 +9,7 @@
     {# Prism.js CSS for syntax highlighting (okaidia theme) #}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" referrerpolicy="no-referrer" />
     {# Inject active theme variables #}
-    {% if theme_css %}
+    {% if theme_css and theme_css.strip() %}
     <style>
         /* Start Theme CSS */
         /* stylelint-disable */
@@ -24,6 +24,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" referrerpolicy="no-referrer"></script>
 </head>
 <body class="chat-page">
+    <div id="global-toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;">
+        <!-- Toasts will be appended here -->
+    </div>
+
     <div id="chat-container">
         <div class="chat-header" style="justify-content: space-between;">
             <hgroup>
@@ -86,6 +90,65 @@
             Prism.highlightAll();
         });
     })();
+
+    // Global Toast Handler
+    document.body.addEventListener('showGlobalToast', function (event) {
+        const detail = event.detail;
+        const message = detail.message || 'Done!';
+        const type = detail.type || 'info'; // success, error, warning, info
+
+        const toastContainer = document.getElementById('global-toast-container');
+        if (!toastContainer) return;
+
+        const toast = document.createElement('article');
+        toast.className = `toast-message ${type}`;
+        toast.innerHTML = `<button class="close-toast" style="float: right; background: none; border: none; font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer;">&times;</button>${message}`;
+        
+        // Basic styling, can be enhanced in CSS file
+        toast.style.padding = '0.75rem';
+        toast.style.border = '1px solid';
+        toast.style.borderRadius = 'var(--pico-border-radius, 4px)';
+        toast.style.minWidth = '250px';
+        toast.style.maxWidth = '400px';
+        toast.style.opacity = '0'; // Start faded out
+        toast.style.transition = 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out';
+        toast.style.transform = 'translateX(100%)'; // Start off-screen
+
+        if (type === 'success') {
+            toast.style.borderColor = 'var(--pico-color-green-500, green)';
+            toast.style.backgroundColor = 'var(--pico-color-green-150, #e6fffa)';
+            toast.style.color = 'var(--pico-color-green-700, darkgreen)';
+        } else if (type === 'error') {
+            toast.style.borderColor = 'var(--pico-color-red-500, red)';
+            toast.style.backgroundColor = 'var(--pico-color-red-150, #ffe6e6)';
+            toast.style.color = 'var(--pico-color-red-700, darkred)';
+        } else { // Default/info/warning
+            toast.style.borderColor = 'var(--pico-color-blue-500, blue)';
+            toast.style.backgroundColor = 'var(--pico-color-blue-150, #e6f7ff)';
+            toast.style.color = 'var(--pico-color-blue-700, darkblue)';
+        }
+
+        toastContainer.appendChild(toast);
+
+        // Animate in
+        setTimeout(() => {
+            toast.style.opacity = '1';
+            toast.style.transform = 'translateX(0)';
+        }, 10); // Small delay to allow CSS to apply initial state
+
+        const closeButton = toast.querySelector('.close-toast');
+        closeButton.onclick = () => {
+            toast.style.opacity = '0';
+            toast.style.transform = 'translateY(-20px)';
+            setTimeout(() => toast.remove(), 300);
+        };
+
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            toast.style.transform = 'translateY(-20px)';
+            setTimeout(() => toast.remove(), 300);
+        }, 5000); // Auto-dismiss after 5 seconds
+    });
 </script>
 </body>
 </html>

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/templates/partials/_agent_detail_form.html

@@ -14,9 +14,9 @@
     {% endif %}
 
     <form {% if is_new %}
-              hx-post="/api/flock/htmx/agents"
+              hx-post="/ui/api/flock/htmx/agents"
           {% else %}
-              hx-put="/api/flock/htmx/agents/{{ agent.name if agent else '' }}"
+              hx-put="/ui/api/flock/htmx/agents/{{ agent.name if agent else '' }}"
           {% endif %}
           hx-target="#agent-detail-form-content"
           hx-swap="innerHTML"
@@ -77,7 +77,7 @@
             </button>
             {% if not is_new and agent %}
             <button type="button" role="button" class="secondary outline"
-                    hx-delete="/api/flock/htmx/agents/{{ agent.name }}"
+                    hx-delete="/ui/api/flock/htmx/agents/{{ agent.name }}"
                     hx-target="#agent-detail-form-content" 
                     hx-confirm="Are you sure you want to delete agent '{{ agent.name }}'?"
                     hx-indicator="#agent-detail-loading-indicator">

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/templates/partials/_flock_properties_form.html

@@ -23,7 +23,7 @@
         </div>
     {% endif %}
 
-    <form hx-post="/api/flock/htmx/flock-properties" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-props-loading">
+    <form hx-post="/ui/api/flock/htmx/flock-properties" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-props-loading">
         <label for="flock_name">Flock Name</label>
         <input type="text" id="flock_name" name="flock_name" value="{{ flock.name if flock else '' }}" required>
 
@@ -38,7 +38,7 @@
         </div>
     </form>
     <hr>
-     <form hx-post="/api/flock/htmx/save-flock" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-save-loading">
+     <form hx-post="/ui/api/flock/htmx/save-flock" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-save-loading">
         <label for="save_filename">Save Flock As:</label>
         <input type="text" id="save_filename" name="save_filename" 
                value="{{ current_filename if current_filename else (flock.name.replace(' ', '_').lower() + '.flock.yaml' if flock and flock.name else 'my_flock.flock.yaml') }}" 

flock_core-0.4.0b50/src/flock/webapp/templates/partials/_results_display.html

@@ -0,0 +1,39 @@
+{% from "partials/_structured_data_view.html" import render_value %}
+
+<article id="results-display-content" x-data="{ viewMode: 'structured' }">
+    <header class="grid">
+        <h5 style="margin-bottom: 0;">Execution Result</h5>
+        <div style="text-align: right;">
+            <button role="button" class="outline contrast" @click="viewMode = 'structured'" :aria-pressed="viewMode === 'structured'">Structured</button>
+            <button role="button" class="outline contrast" @click="viewMode = 'json'" :aria-pressed="viewMode === 'json'">Raw JSON</button>
+        </div>
+    </header>
+
+    <div x-show="viewMode === 'json'">
+        {# Check for the new result_raw_json variable first #}
+        {% if result_raw_json is defined %}
+            <pre><code class="language-json" style="word-break: break-all; white-space: pre-wrap;">{{ result_raw_json }}</code></pre>
+        {# Fallback for old context or if result was an error string from backend before formatting #}
+        {% elif result is string %}
+            <pre><code class="language-plaintext" style="word-break: break-all; white-space: pre-wrap;">{{ result }}</code></pre>
+        {% elif result %}
+            {# Fallback if result_raw_json is somehow not provided but result (dict) is #}
+            <pre><code class="language-json" style="word-break: break-all; white-space: pre-wrap;">{{ result | tojson(indent=2) }}</code></pre>
+        {% else %}
+            <p>No results to display yet.</p>
+        {% endif %}
+    </div>
+
+    <div x-show="viewMode === 'structured'">
+        {% if result is string %}
+            <p class="error" style="white-space: pre-wrap;">{{ result }}</p>
+        {% elif result is mapping %}
+            {{ render_value(result) }}
+        {% elif result %}
+             <p>Structured view not available for this result type (not a dictionary).</p>
+             <pre><code class="language-json" style="word-break: break-all; white-space: pre-wrap;">{{ result | tojson(indent=2) }}</code></pre>
+        {% else %}
+            <p>No results to display yet.</p>
+        {% endif %}
+    </div>
+</article>

{flock_core-0.4.0b49 → flock_core-0.4.0b50}/src/flock/webapp/templates/partials/_structured_data_view.html

@@ -31,8 +31,8 @@
     {% elif value is none %}
         <em style="color: var(--pico-code-color);">None</em>
     {% else %}
-        {# Apply pre-wrap for multi-line strings #}
-        <span style="white-space: pre-wrap; word-break: break-word;">{{ value }}</span>
+        {# Apply pre-wrap for multi-line strings and render markdown #}
+        <div class="markdown-content" style="word-break: break-word;">{{ value | markdown | safe }}</div>
     {% endif %}
 {% endmacro %}