flock-core 0.4.0b48__py3-none-any.whl → 0.4.0b50__py3-none-any.whl

flock/webapp/app/services/sharing_store.py

@@ -0,0 +1,156 @@
+import logging
+import sqlite3
+from abc import ABC, abstractmethod
+from pathlib import Path
+
+import aiosqlite
+
+from flock.webapp.app.services.sharing_models import SharedLinkConfig
+
+# Get a logger instance
+logger = logging.getLogger(__name__)
+
+class SharedLinkStoreInterface(ABC):
+    """Interface for storing and retrieving shared link configurations."""
+
+    @abstractmethod
+    async def initialize(self) -> None:
+        """Initialize the store (e.g., create tables)."""
+        pass
+
+    @abstractmethod
+    async def save_config(self, config: SharedLinkConfig) -> SharedLinkConfig:
+        """Saves a shared link configuration."""
+        pass
+
+    @abstractmethod
+    async def get_config(self, share_id: str) -> SharedLinkConfig | None:
+        """Retrieves a shared link configuration by its ID."""
+        pass
+
+    @abstractmethod
+    async def delete_config(self, share_id: str) -> bool:
+        """Deletes a shared link configuration by its ID. Returns True if deleted, False otherwise."""
+        pass
+
+class SQLiteSharedLinkStore(SharedLinkStoreInterface):
+    """SQLite implementation for storing and retrieving shared link configurations."""
+
+    def __init__(self, db_path: str):
+        self.db_path = Path(db_path)
+        self.db_path.parent.mkdir(parents=True, exist_ok=True) # Ensure directory exists
+        logger.info(f"SQLiteSharedLinkStore initialized with db_path: {self.db_path}")
+
+    async def initialize(self) -> None:
+        """Initializes the database and creates/updates the table if it doesn't exist."""
+        try:
+            async with aiosqlite.connect(self.db_path) as db:
+                # Ensure the table exists with the base schema first
+                await db.execute(
+                    """
+                    CREATE TABLE IF NOT EXISTS shared_links (
+                        share_id TEXT PRIMARY KEY,
+                        agent_name TEXT NOT NULL,
+                        flock_definition TEXT NOT NULL,
+                        created_at TEXT NOT NULL
+                        /* New columns will be added below if they don't exist */
+                    )
+                    """
+                )
+
+                # Add new columns individually, ignoring errors if they already exist
+                new_columns = [
+                    ("share_type", "TEXT DEFAULT 'agent_run' NOT NULL"),
+                    ("chat_message_key", "TEXT"),
+                    ("chat_history_key", "TEXT"),
+                    ("chat_response_key", "TEXT")
+                ]
+
+                for column_name, column_type in new_columns:
+                    try:
+                        await db.execute(f"ALTER TABLE shared_links ADD COLUMN {column_name} {column_type}")
+                        logger.info(f"Added column '{column_name}' to shared_links table.")
+                    except sqlite3.OperationalError as e:
+                        if "duplicate column name" in str(e).lower():
+                            logger.debug(f"Column '{column_name}' already exists in shared_links table.")
+                        else:
+                            raise # Re-raise if it's a different operational error
+
+                await db.commit()
+            logger.info(f"Database initialized and shared_links table schema ensured at {self.db_path}")
+        except sqlite3.Error as e:
+            logger.error(f"SQLite error during initialization: {e}", exc_info=True)
+            raise
+
+    async def save_config(self, config: SharedLinkConfig) -> SharedLinkConfig:
+        """Saves a shared link configuration to the SQLite database."""
+        try:
+            async with aiosqlite.connect(self.db_path) as db:
+                await db.execute(
+                    """INSERT INTO shared_links (
+                        share_id, agent_name, created_at, flock_definition, 
+                        share_type, chat_message_key, chat_history_key, chat_response_key
+                    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)""",
+                    (
+                        config.share_id,
+                        config.agent_name,
+                        config.created_at.isoformat(),
+                        config.flock_definition,
+                        config.share_type,
+                        config.chat_message_key,
+                        config.chat_history_key,
+                        config.chat_response_key,
+                    ),
+                )
+                await db.commit()
+            logger.info(f"Saved shared link config for ID: {config.share_id} with type: {config.share_type}")
+            return config
+        except sqlite3.Error as e:
+            logger.error(f"SQLite error saving config for ID {config.share_id}: {e}", exc_info=True)
+            raise
+
+    async def get_config(self, share_id: str) -> SharedLinkConfig | None:
+        """Retrieves a shared link configuration from SQLite by its ID."""
+        try:
+            async with aiosqlite.connect(self.db_path) as db:
+                async with db.execute(
+                    """SELECT 
+                        share_id, agent_name, created_at, flock_definition, 
+                        share_type, chat_message_key, chat_history_key, chat_response_key 
+                    FROM shared_links WHERE share_id = ?""",
+                    (share_id,)
+                ) as cursor:
+                    row = await cursor.fetchone()
+            if row:
+                logger.debug(f"Retrieved shared link config for ID: {share_id}")
+                return SharedLinkConfig(
+                    share_id=row[0],
+                    agent_name=row[1],
+                    created_at=row[2], # SQLite stores as TEXT, Pydantic will parse from ISO format
+                    flock_definition=row[3],
+                    share_type=row[4],
+                    chat_message_key=row[5],
+                    chat_history_key=row[6],
+                    chat_response_key=row[7],
+                )
+            logger.debug(f"No shared link config found for ID: {share_id}")
+            return None
+        except sqlite3.Error as e:
+            logger.error(f"SQLite error retrieving config for ID {share_id}: {e}", exc_info=True)
+            return None # Or raise, depending on desired error handling
+
+    async def delete_config(self, share_id: str) -> bool:
+        """Deletes a shared link configuration from SQLite by its ID."""
+        try:
+            async with aiosqlite.connect(self.db_path) as db:
+                result = await db.execute("DELETE FROM shared_links WHERE share_id = ?", (share_id,))
+                await db.commit()
+                deleted_count = result.rowcount
+            if deleted_count > 0:
+                logger.info(f"Deleted shared link config for ID: {share_id}")
+                return True
+            logger.info(f"Attempted to delete non-existent shared link config for ID: {share_id}")
+            return False
+        except sqlite3.Error as e:
+            logger.error(f"SQLite error deleting config for ID {share_id}: {e}", exc_info=True)
+            return False # Or raise

flock/webapp/static/css/chat.css

@@ -240,3 +240,60 @@ body:not(.chat-page) .chat-settings-form .grid button:first-child {
 main.main-content:has(#chat-container) {
     overflow: hidden;
 }
+
+/* Ensure all direct text and common markdown elements within bot bubbles use the bot's text color */
+.bubble.bot,
+.bubble.bot p,
+.bubble.bot li,
+.bubble.bot h1,
+.bubble.bot h2,
+.bubble.bot h3,
+.bubble.bot h4,
+.bubble.bot h5,
+.bubble.bot h6,
+.bubble.bot strong,
+.bubble.bot em,
+.bubble.bot table,
+.bubble.bot th,
+.bubble.bot td {
+    color: var(--pico-code-color);
+}
+
+/* For links specifically within bot messages, you might want them to also use the bot text color */
+.bubble.bot a {
+    color: var(--pico-code-color);
+    text-decoration: underline; /* Or your preferred link style */
+}
+.bubble.bot a:hover {
+    color: var(--pico-primary-hover, var(--pico-primary));
+    text-decoration: underline;
+}
+
+/* Styling for code blocks generated by Markdown and highlighted by Prism.js */
+/* The prism-okaidia theme will handle the internal colors of the code. */
+/* This is more about the container of the code block. */
+.bubble.bot pre[class*="language-"] {
+    background-color: var(--pico-card-background-color); /* Or a slightly different dark shade */
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    padding: 0.75em;
+    margin: 0.5em 0;
+    font-size: 0.875em; /* Adjust as needed */
+    overflow-x: auto; /* Allow horizontal scrolling for long code lines */
+    /* The text color *inside* the code block will be handled by the Prism theme (e.g., Okaidia) */
+}
+
+/* Ensure the code itself inside the pre block also resets its base color if needed,
+   though Prism themes usually take care of this. This is a fallback. */
+.bubble.bot pre[class*="language-"] code {
+    /* color: inherit; */ /* This might not be necessary if Prism theme is comprehensive - try without first */
+    background: none;
+    padding: 0;
+}
+
+/* Styles for preformatted text wrapping */
+.bubble pre {
+    white-space: pre-wrap;  /* Allows wrapping and preserves sequences of white space and newlines */
+    word-wrap: break-word; /* Breaks long words/strings if they would overflow */
+    overflow-x: auto;     /* Adds a scrollbar if content is still too wide */
+}

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/webapp/templates/chat.html

@@ -6,8 +6,10 @@
     <title>Flock Chat</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
     <link rel="stylesheet" href="/static/css/chat.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 active theme variables #}
-    {% if theme_css %}
+    {% if theme_css and theme_css.strip() %}
     <style>
         /* Start Theme CSS */
         /* stylelint-disable */
@@ -17,29 +19,48 @@
     </style>
     {% endif %}
     <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+    {# Prism.js JS (core and components for common languages) #}
+    <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>
 </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>
                 <h2>Flock Chat</h2>
                 <h3>{{ chat_subtitle }}</h3>
             </hgroup>
-            <button class="secondary outline" hx-get="/chat/htmx/settings-form" hx-target="#chat-content-area" hx-swap="innerHTML" style="min-width:auto;">Settings</button>
+            {% if not is_shared_chat %}
+            <button class="secondary outline" hx-get="/chat/settings-standalone" hx-target="#chat-content-area" hx-swap="innerHTML" style="min-width:auto;">Settings</button>
+            {% else %}
+            {# Optionally, could show a disabled settings button or some other indicator #}
+            <span style="font-size: 0.8rem; color: var(--pico-muted-color);">Settings frozen for shared session.</span>
+            {% endif %}
         </div>
 
         <div id="chat-content-area">
-            <div id="chat-log" hx-get="/chat/messages" hx-trigger="load" hx-swap="innerHTML">
+            <div id="chat-log" 
+                 hx-get="{% if is_shared_chat %}/chat/messages-shared/{{ share_id }}{% else %}/chat/messages{% endif %}" 
+                 hx-trigger="load" {# Polling removed #}
+                 hx-swap="innerHTML">
                 <p><em>Loading chat…</em></p>
             </div>
             
             <form id="chat-form-standalone"
-                  hx-post="/chat/send"
+                  hx-post="{% if is_shared_chat %}/chat/send-shared{% else %}/chat/send{% endif %}"
                   hx-target="#chat-log"
                   hx-swap="innerHTML"
                   hx-disabled-elt="input[name='message'], button[type='submit']"
                   hx-on::before-request="htmx.find('#chat-form-standalone button[type=\'submit\']').textContent = 'Sending...'"
                   hx-on::after-request="htmx.find('#chat-form-standalone button[type=\'submit\']').textContent = 'Send'; this.reset();">
+                
+                {% if is_shared_chat %}
+                <input type="hidden" name="share_id" value="{{ share_id }}">
+                {% endif %}
                 <input type="text" name="message" placeholder="Type a message…" required autofocus>
                 <button type="submit">Send</button>
             </form>
@@ -57,10 +78,77 @@
             log.scrollTop = log.scrollHeight;
         }
         document.addEventListener('htmx:afterSwap', e => {
-            if (e.detail.target.id === 'chat-log') scrollBottom();
+            if (e.detail.target.id === 'chat-log') {
+                scrollBottom();
+                // Re-run Prism highlighting after new content is swapped in
+                Prism.highlightAllUnder(log);
+            }
         });
         window.addEventListener('load', scrollBottom);
+        // Initial highlight on page load for any pre-existing content
+        document.addEventListener('DOMContentLoaded', () => {
+            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/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/webapp/templates/partials/_chat_messages.html

@@ -6,7 +6,7 @@
         </div>
     {% else %}
         <div class="bubble bot">
-            {{ entry.text }}
+            {{ entry.text | safe }}
             <span class="chat-timestamp">{{ entry.timestamp|default(now().strftime('%H:%M')) }}{% if entry.agent %} - {{ entry.agent }}{% endif %}{% if entry.duration_ms is defined %} - {{ entry.duration_ms }}ms{% endif %}</span>
         </div>
     {% endif %}

flock/webapp/templates/partials/_chat_settings_form.html

@@ -62,4 +62,26 @@
         <button type="button" class="secondary outline" hx-get="/chat/htmx/chat-view" hx-target="#chat-content-area" hx-swap="innerHTML">Cancel</button>
     </div>
     <div id="chat-settings-saving" class="htmx-indicator" style="text-align:center; margin-top:0.5rem;"><progress indeterminate></progress></div>
+
+    {# Share Chat Link Section #}
+    <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color);">
+        <h5 style="margin-bottom: 0.5rem;">Share Chat Configuration</h5>
+        <p><small>Create a shareable link for this chat configuration. The current Flock and these chat settings will be frozen for the shared session.</small></p>
+        <a href="#" 
+           id="shareChatHtmxLink"
+           hx-post="/ui/htmx/share/chat/generate-link" 
+           hx-target="#shareChatLinkDisplayArea" 
+           hx-swap="innerHTML"
+           hx-indicator="#share-chat-loading-indicator"
+           hx-include="closest form"  {# Includes all fields from the parent form #}
+           style="text-decoration: underline; cursor: pointer; color: var(--pico-primary);">
+            Create shareable chat link...
+        </a>
+        <span id="share-chat-loading-indicator" class="htmx-indicator" style="margin-left: 0.5rem;">
+            <progress indeterminate style="width: 100px;"></progress>
+        </span>
+        <div id="shareChatLinkDisplayArea" style="margin-top: 1rem;">
+            <!-- Shareable chat link will be loaded here by HTMX -->
+        </div>
+    </div>
 </form> 

flock/webapp/templates/partials/_execution_form.html

@@ -36,6 +36,20 @@
         </div>
 
         <button type="submit" {% if not flock.agents %}disabled{% endif %}>Run Flock</button>
+
+        <div id="share-agent-link-container" style="margin-top: 0.5rem;">
+            <a href="#" 
+               id="shareAgentHtmxLink"
+               hx-post="/ui/htmx/share/generate-link" 
+               hx-target="#shareLinkDisplayArea" 
+               hx-swap="innerHTML"
+               hx-indicator="#share-loading-indicator"
+               hx-include="#start_agent_name_select"
+               style="text-decoration: underline; cursor: pointer; color: var(--pico-primary);">
+                Create shareable link...
+            </a>
+        </div>
+
         <span id="run-loading-indicator" class="htmx-indicator">
             <progress indeterminate></progress> Running...
         </span>
@@ -45,4 +59,17 @@
     {% else %}
     <p>Load or create a Flock to enable execution.</p>
     {% endif %}
-</article>
+
+    <div id="shareLinkDisplayArea" style="margin-top: 1rem;">
+        <!-- Content will be loaded here by HTMX -->
+    </div>
+
+</article>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // All previous JavaScript for toggling share link visibility is removed.
+        // If there are other unrelated JavaScript functions in this script block,
+        // they would remain.
+    });
+</script>

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/webapp/templates/partials/_results_display.html

@@ -10,24 +10,28 @@
     </header>
 
     <div x-show="viewMode === 'json'">
-        {% if result_data is string %}
-            <p class="error" style="white-space: pre-wrap;">{{ result_data }}</p>
-        {% elif result_data %}
-            <pre><code style="word-break: break-all; white-space: pre-wrap;">{{ result_data | tojson(indent=2) }}</code></pre>
+        {# 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_data is string %}
-            <p class="error" style="white-space: pre-wrap;">{{ result_data }}</p>
-        {% elif result_data is mapping %}
-            {# Call our new macro for structured display #}
-            {{ render_value(result_data) }}
-        {% elif result_data %}
+        {% 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>{{ result_data | tojson(indent=2) }}</code></pre>
+             <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 %}

flock/webapp/templates/partials/_share_chat_link_snippet.html

@@ -0,0 +1,11 @@
+{# This snippet is returned by the /ui/htmx/share/chat/generate-link endpoint #}
+{% if share_url %}
+    <p style="margin-bottom: 0.5rem;"><strong>Shareable Chat Link generated:</strong></p>
+    <input type="text" id="generatedShareChatLinkInput" value="{{ share_url }}" readonly style="width: 100%; margin-bottom: 0.5rem;">
+    <p><small>You can select the link above and copy it (Ctrl+C or Cmd+C).</small></p>
+    <p><small>This link will start a chat session with the agent '{{ agent_name }}' from Flock '{{ flock_name }}' using the currently saved settings.</small></p>
+{% elif error_message %}
+    <p style="color: var(--pico-form-invalid-color);">Error generating chat link: {{ error_message }}</p>
+{% else %}
+    <p><em>Something went wrong, no chat link generated.</em></p>
+{% endif %}