flock-core 0.4.510__py3-none-any.whl → 0.4.512__py3-none-any.whl

flock/webapp/static/css/two-pane.css

@@ -0,0 +1,48 @@
+/* ========================================================================
+   two-pane.css — Styles for the two-pane layout used in execution view
+   ======================================================================== */
+
+/* Two pane container */
+.two-pane-flex-container {
+  display: flex;
+  width: 100%;
+}
+
+/* Collapsed left pane */
+.left-pane-collapsed {
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--pico-muted-border-color);
+  border-radius: 0 4px 4px 0;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+  margin-right: 10px;
+  transition: background-color 0.2s;
+}
+
+.left-pane-collapsed:hover {
+  background-color: var(--pico-primary-hover);
+}
+
+/* Toggle links styling */
+.pane-toggle {
+  text-decoration: none;
+  color: var(--pico-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.pane-toggle:hover {
+  background-color: var(--pico-primary-hover);
+  color: var(--pico-primary-inverse);
+}
+
+/* Ensure right pane takes full width when left is collapsed */
+#execution-right-pane {
+  transition: flex 0.3s, padding-left 0.3s;
+}

flock/webapp/templates/base.html

@@ -7,11 +7,14 @@
     <title>{% block title %}Flock UI{% endblock %}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
     <!-- Split modular CSS files -->
-    <link rel="stylesheet" href="/static/css/layout.css">
-    <link rel="stylesheet" href="/static/css/header.css">
-    <link rel="stylesheet" href="/static/css/sidebar.css">
-    <link rel="stylesheet" href="/static/css/components.css">
-    <link rel="stylesheet" href="/static/css/chat.css">
+    <link rel="stylesheet"
+      href="{{ url_for('static', path='css/layout.css') }}">
+    <link rel="stylesheet"
+        href="{{ url_for('static', path='css/header.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/sidebar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/components.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/two-pane.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) -->
@@ -41,14 +44,11 @@
     </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 }}"
+        <span><strong>🐧 Flock Playground 🐤</strong></span>        <span id="header-flock-status-container" hx-get="{{ url_for('htmx_get_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 }}"
+    </header>    <aside class="sidebar" hx-get="{{ url_for('htmx_get_sidebar') }}?ui_mode={{ ui_mode }}"
         hx-trigger="load, flockLoaded from:body, flockListChanged from:body" hx-swap="innerHTML">
         <p>Loading navigation...</p><progress></progress>
     </aside>

flock/webapp/templates/chat.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
+    <link rel="stylesheet" href="{{ url_for('static', path='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 #}
@@ -34,25 +34,22 @@
             <hgroup>
                 <h2>Flock Chat</h2>
                 <h3>{{ chat_subtitle }}</h3>
-            </hgroup>
-            {% 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>
+            </hgroup>            {% if not is_shared_chat %}
+            <button class="secondary outline" hx-get="{{ url_for('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="{% if is_shared_chat %}/chat/messages-shared/{{ share_id }}{% else %}/chat/messages{% endif %}" 
+        <div id="chat-content-area">            <div id="chat-log" 
+                 hx-get="{% if is_shared_chat %}{{ url_for('chat_history_shared_partial', share_id=share_id) }}{% else %}{{ url_for('chat_history_partial') }}{% endif %}" 
                  hx-trigger="load" {# Polling removed #}
                  hx-swap="innerHTML">
                 <p><em>Loading chat…</em></p>
             </div>
-            
-            <form id="chat-form-standalone"
-                  hx-post="{% if is_shared_chat %}/chat/send-shared{% else %}/chat/send{% endif %}"
+              <form id="chat-form-standalone"
+                  hx-post="{% if is_shared_chat %}{{ url_for('chat_send_shared') }}{% else %}{{ url_for('chat_send') }}{% endif %}"
                   hx-target="#chat-log"
                   hx-swap="innerHTML"
                   hx-disabled-elt="input[name='message'], button[type='submit']"

flock/webapp/templates/chat_settings.html

@@ -4,9 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chat Settings</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">
-    <link rel="stylesheet" href="/static/css/header.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />    <link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/header.css') }}">
     {# Active theme CSS #}
     {% if theme_css %}<style>{{ theme_css | safe }}</style>{% endif %}
     <script src="https://unpkg.com/htmx.org@1.9.10" crossorigin="anonymous"></script>
@@ -14,7 +13,7 @@
 <body class="chat-page">
     <main style="max-width: 700px; margin: 2rem auto;">
         {% include 'partials/_chat_settings_form.html' %}
-        <p style="text-align:center; margin-top: 1rem;"><a href="/chat">← Back to Chat</a></p>
+        <p style="text-align:center; margin-top: 1rem;"><a href="{{ url_for('chat_page') }}">← Back to Chat</a></p>
     </main>
 </body>
 </html> 

flock/webapp/templates/flock_editor.html

@@ -5,8 +5,7 @@
 {% block content %}
 {# Main content area is now loaded dynamically based on sidebar clicks #}
 {# We can load the properties form by default when this page is hit #}
-<div id="editor-main-content" 
-     hx-get="/ui/api/flock/htmx/flock-properties-form" 
+<div id="editor-main-content"     hx-get="{{ url_for('htmx_get_flock_properties_form') }}" 
      hx-trigger="load"
      hx-swap="innerHTML">
      <article>

flock/webapp/templates/index.html

@@ -5,7 +5,7 @@
 {% block content %}
 {# This content will be loaded dynamically via HTMX from the sidebar #}
 {# We can load the 'load/manage' view by default #}
-<div id="dashboard-content" hx-get="/ui/htmx/load-flock-view" hx-trigger="load" hx-swap="innerHTML">
+<div id="dashboard-content" hx-get="{{ url_for('htmx_get_load_flock_view') }}" hx-trigger="load" hx-swap="innerHTML">
     <p>Loading dashboard content...</p>
     <progress></progress>
 </div>

flock/webapp/templates/partials/_agent_detail_form.html

@@ -11,12 +11,9 @@
              x-transition:leave-end="opacity-0">
             {{ form_message }}
         </div>
-    {% endif %}
-
-    <form {% if is_new %}
-              hx-post="/ui/api/flock/htmx/agents"
-          {% else %}
-              hx-put="/ui/api/flock/htmx/agents/{{ agent.name if agent else '' }}"
+    {% endif %}    <form {% if is_new %}              hx-post="{{ url_for('htmx_create_agent') }}"
+              {% else %}
+              hx-put="{{ url_for('htmx_update_agent', original_agent_name=agent.name if agent else '') }}"
           {% endif %}
           hx-target="#agent-detail-form-content"
           hx-swap="innerHTML"
@@ -75,18 +72,15 @@
             <button type="submit">
                 {% if is_new %}Create Agent{% else %}Save Changes{% endif %}
             </button>
-            {% if not is_new and agent %}
-            <button type="button" role="button" class="secondary outline"
-                    hx-delete="/ui/api/flock/htmx/agents/{{ agent.name }}"
-                    hx-target="#agent-detail-form-content" 
+            {% if not is_new and agent %}            <button type="button" role="button" class="secondary outline"                    hx-delete="{{ url_for('htmx_delete_agent', agent_name=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">
                 Delete Agent
             </button>
             {% endif %}
-            <button type="button" class="outline" 
-                    hx-get="/ui/api/flock/htmx/agents/new-agent-form" 
-                    hx-target="#agent-detail-panel" 
+            <button type="button" class="outline"                    hx-get="{{ url_for('htmx_get_new_agent_form') }}" 
+                    hx-target="#agent-detail-panel"
                     hx-swap="innerHTML"
                     hx-indicator="#agent-detail-loading-indicator">
                 Cancel / New Form

flock/webapp/templates/partials/_agent_list.html

@@ -5,8 +5,7 @@
     {% endif %}
     {% if flock.agents %}
     <ul class="item-list">
-        {% for agent_name, agent in flock.agents.items() %}
-        <li hx-get="/ui/api/flock/htmx/agents/{{ agent.name }}/details-form" hx-target="#agent-detail-panel" hx-swap="innerHTML" hx-indicator="#agent-detail-loading" onclick="this.closest('ul').querySelectorAll('li').forEach(li => li.classList.remove('selected-item')); this.classList.add('selected-item');">
+        {% for agent_name, agent in flock.agents.items() %}        <li hx-get="{{ url_for('htmx_get_agent_details_form', agent_name=agent.name) }}" hx-target="#agent-detail-panel" hx-swap="innerHTML" hx-indicator="#agent-detail-loading" onclick="this.closest('ul').querySelectorAll('li').forEach(li => li.classList.remove('selected-item')); this.classList.add('selected-item');">
             <strong>{{ agent.name }}</strong><br>
             <small>{{ agent.resolved_description|truncate(80) if agent.resolved_description else 'No description' }}</small>
         </li>

flock/webapp/templates/partials/_agent_manager_view.html

@@ -20,14 +20,13 @@
             <header class="grid">
               <h2>Agents ({{ flock.agents|length }}) </h2>
               <div style="text-align: right;">
-                  <button role="button" class="outline" hx-get="/ui/api/flock/htmx/agents/new-agent-form" hx-target="#agent-detail-panel" hx-swap="innerHTML">Add New Agent</button>
+                  <button role="button" class="outline" hx-get="{{ url_for('htmx_get_new_agent_form') }}" hx-target="#agent-detail-panel" hx-swap="innerHTML">Add New Agent</button>
               </div>
               
           </header>
 
             {# Content of the left pane now goes into this article #}
-            <div style="padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); flex-grow: 1; display: flex; flex-direction: column;">
-                <div hx-get="/ui/api/flock/htmx/agent-list" 
+            <div style="padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); flex-grow: 1; display: flex; flex-direction: column;">                <div hx-get="{{ url_for('htmx_get_agent_list') }}" 
                      hx-trigger="load, agentListChanged from:body"
                      hx-swap="innerHTML"
                      id="agent-list-panel"

flock/webapp/templates/partials/_chat_container.html

@@ -1,9 +1,9 @@
 <article id="chat-container" class="chat-container">
-    <div id="chat-log" hx-get="/chat/messages" hx-trigger="load" hx-swap="innerHTML">
+    <div id="chat-log" hx-get="{{ url_for('chat_history_partial') }}" hx-trigger="load" hx-swap="innerHTML">
         <p><em>Loading chat…</em></p>
     </div>
     <form id="chat-form-embedded" class="chat-form"
-          hx-post="/chat/send"
+          hx-post="{{ url_for('chat_send') }}"
           hx-target="#chat-log"
           hx-swap="innerHTML"
           hx-disabled-elt="input[name='message'], button[type='submit']"

flock/webapp/templates/partials/_chat_settings_form.html

@@ -1,12 +1,11 @@
-<form class="chat-settings-form" hx-post="/chat/settings" hx-target="this" hx-swap="outerHTML" hx-indicator="#chat-settings-saving" style="max-width: 500px; margin: 1rem auto;">
+<form class="chat-settings-form" hx-post="{{ url_for('chat_settings_submit') }}" hx-target="this" hx-swap="outerHTML" hx-indicator="#chat-settings-saving" style="max-width: 500px; margin: 1rem auto;">
     <hgroup style="margin-bottom: 1rem;">
         <h3>Chat Settings</h3>
         <h4>Select agent & field mappings</h4>
     </hgroup>
 
-    <label for="agent_name_field">Chat Agent</label>
-    <select id="agent_name_field" name="agent_name"
-            hx-get="/chat/htmx/settings-form"
+    <label for="agent_name_field">Chat Agent</label>    <select id="agent_name_field" name="agent_name"
+            hx-get="{{ url_for('htmx_chat_settings_partial') }}"
             hx-target="closest form"
             hx-trigger="change"
             hx-include="[name=agent_name]">
@@ -57,9 +56,8 @@
     {% endif %}
 
     <div class="grid" style="margin-top: 1rem;">
-        <button type="submit">Save Settings</button>
-        <button type="reset" class="outline">Reset</button>
-        <button type="button" class="secondary outline" hx-get="/chat/htmx/chat-view" hx-target="#chat-content-area" hx-swap="innerHTML">Cancel</button>
+        <button type="submit">Save Settings</button>        <button type="reset" class="outline">Reset</button>
+        <button type="button" class="secondary outline" hx-get="{{ url_for('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>
 
@@ -69,7 +67,7 @@
         <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-post="{{ url_for('htmx_generate_share_link') }}" 
            hx-target="#shareChatLinkDisplayArea" 
            hx-swap="innerHTML"
            hx-indicator="#share-chat-loading-indicator"

flock/webapp/templates/partials/_create_flock_form.html

@@ -15,8 +15,7 @@
     {% endif %}
     
     <section id="create-by-details-section">
-        <h4>Define New Flock Properties</h4>
-        <form hx-post="/ui/create-flock" 
+        <h4>Define New Flock Properties</h4>        <form hx-post="{{ url_for('create_flock') }}" 
               hx-target="#main-content-area" {# On success, loads properties form into main area #}
               hx-swap="innerHTML" 
               hx-indicator="#create-indicator-details">
@@ -37,8 +36,7 @@
     <hr>
 
     <section id="create-by-upload-section">
-        <h4>Upload Existing Flock File</h4>
-        <form hx-post="/ui/load-flock-action/by-upload"
+        <h4>Upload Existing Flock File</h4>        <form hx-post="{{ url_for('load_flock_by_upload') }}"
               hx-target="#main-content-area" {# On success, loads properties form into main area #}
               hx-swap="innerHTML"
               hx-encoding="multipart/form-data"

flock/webapp/templates/partials/_dashboard_flock_detail.html

@@ -2,8 +2,7 @@
     <header>
         <h5>Flock File: <code>{{ selected_filename }}</code></h5>
     </header>
-    <p>Details for this Flock file (e.g., size, last modified) could be shown here if fetched.</p>
-    <form hx-post="/ui/load-flock-action/by-name" 
+    <p>Details for this Flock file (e.g., size, last modified) could be shown here if fetched.</p>    <form hx-post="{{ url_for('ui_load_flock_by_name_action') }}" 
           hx-target="#main-content-area" {# Target the main area to show editor on success #}
           hx-swap="innerHTML"
           hx-indicator="#dashboard-flock-detail-loading-indicator">
@@ -14,5 +13,5 @@
     <hr>
     <p><small>Or, you can use the form below to upload a different Flock file.</small></p>
     {# Include the upload form again or link back to it #}
-    <div hx-get="/ui/htmx/dashboard-upload-flock-form" hx-trigger="load" hx-swap="innerHTML"></div>
+    <div hx-get="{{ url_for('htmx_get_dashboard_upload_flock_form') }}" hx-trigger="load" hx-swap="innerHTML"></div>
 </article>

flock/webapp/templates/partials/_dashboard_flock_file_list.html

@@ -1,7 +1,6 @@
 {% if flock_files %}
 <ul class="item-list">
-    {% for file_name in flock_files %}
-    <li hx-get="/ui/htmx/dashboard-flock-properties-preview/{{ file_name }}" 
+    {% for file_name in flock_files %}    <li hx-get="{{ url_for('htmx_get_dashboard_flock_properties_preview', filename=file_name) }}" 
         hx-target="#flock-properties-or-action-content" {# Target the right pane #}
         hx-swap="innerHTML"
         hx-indicator="#flock-properties-or-action-content progress" 

flock/webapp/templates/partials/_dashboard_flock_properties_preview.html

@@ -6,8 +6,7 @@
         <p><strong>Default Model:</strong> {{ preview_flock.model or 'Not set' }}</p>
         <p><strong>Description:</strong> {{ preview_flock.description or 'None' }}</p>
         <p><strong>Agents:</strong> {{ preview_flock.agents_count }}</p>
-        
-        <form hx-post="/ui/load-flock-action/by-name" 
+          <form hx-post="{{ url_for('ui_load_flock_by_name_action') }}" 
               hx-target="#main-content-area" {# This will load the full editor for this flock #}
               hx-swap="innerHTML" 
               hx-indicator="#flock-preview-loading-indicator">
@@ -18,7 +17,7 @@
     {% else %}
         <p class="error">Could not load preview for <code>{{ selected_filename }}</code>. It might be corrupted or not a valid Flock file.</p>
         <p><small>You can still attempt to load it into the editor.</small></p>
-        <form hx-post="/ui/load-flock-action/by-name" hx-target="#main-content-area" hx-swap="innerHTML">
+        <form hx-post="{{ url_for('ui_load_flock_by_name_action') }}" hx-target="#main-content-area" hx-swap="innerHTML">
             <input type="hidden" name="selected_flock_filename" value="{{ selected_filename }}">
             <button type="submit" class="secondary">Attempt to Load into Editor</button>
         </form>

flock/webapp/templates/partials/_dashboard_upload_flock_form.html

@@ -1,8 +1,7 @@
 <article>
     <header>
         <h5>Upload New Flock File</h5>
-    </header>
-    <form hx-post="/ui/load-flock-action/by-upload"
+    </header>    <form hx-post="{{ url_for('load_flock_by_upload') }}"
           hx-target="#main-content-area" {# Target the main area to show editor on success #}
           hx-swap="innerHTML"
           hx-encoding="multipart/form-data"

flock/webapp/templates/partials/_env_vars_table.html

@@ -11,11 +11,9 @@
             {% for var in env_vars %}
             <tr>
                 <td>{{ var.name }}</td>
-                <td>{{ var.value }}</td>
-                <td>
-                    <button class="secondary small outline" hx-post="/ui/htmx/env-edit" hx-vals='{"var_name": "{{ var.name }}"}'
+                <td>{{ var.value }}</td>                <td>                    <button class="secondary small outline" hx-post="{{ url_for('htmx_env_edit') }}" hx-vals='{"var_name": "{{ var.name }}"}'
                             hx-prompt="Enter new value for {{ var.name }}" hx-target="#env-vars-container" hx-swap="outerHTML">Edit</button>
-                    <button class="contrast small outline" hx-post="/ui/htmx/env-delete" hx-vals='{"var_name": "{{ var.name }}"}'
+                    <button class="contrast small outline" hx-post="{{ url_for('htmx_env_delete') }}" hx-vals='{"var_name": "{{ var.name }}"}'
                             hx-confirm="Delete {{ var.name }}?" hx-target="#env-vars-container" hx-swap="outerHTML" style="margin-left:0.25rem;">Delete</button>
                 </td>
             </tr>

flock/webapp/templates/partials/_execution_form.html

@@ -1,10 +1,14 @@
+<script>
+// Create URL template for agent input forms
+window.agentInputFormUrlTemplate = '{{ url_for("htmx_get_agent_input_form", agent_name="AGENT_PLACEHOLDER") }}';
+</script>
+
 <article id="execution-form-content">
     <header>
         <h2>Run Flock</h2>
     </header>
-    {% if flock and flock.agents %}
-    <form hx-post="/ui/api/flock/htmx/run" 
-          hx-target="#results-display" 
+    {% if flock and flock.agents %}    <form hx-post="{{ url_for('htmx_run_flock') }}" 
+          hx-target="#results-display"
           hx-swap="innerHTML" 
           hx-indicator="#run-loading-indicator"
           x-data="{ selectedAgentForInput: '' }">
@@ -12,11 +16,10 @@
         <label for="start_agent_name_select">Select Start Agent:</label>
         <select id="start_agent_name_select" 
                 name="start_agent_name" 
-                required
-                x-model="selectedAgentForInput"
-                @change="
+                required                x-model="selectedAgentForInput"                @change="
                     if ($event.target.value) {
-                        htmx.ajax('GET', '/ui/api/flock/htmx/agents/' + $event.target.value + '/input-form', {target: '#dynamic-input-form-fields', swap: 'innerHTML', indicator: '#input-form-loading-indicator'});
+                        const url = window.agentInputFormUrlTemplate.replace('AGENT_PLACEHOLDER', $event.target.value);
+                        htmx.ajax('GET', url, {target: '#dynamic-input-form-fields', swap: 'innerHTML', indicator: '#input-form-loading-indicator'});
                     } else {
                         document.getElementById('dynamic-input-form-fields').innerHTML = '<p><small>Select an agent to see its input fields.</small></p>';
                     }
@@ -37,10 +40,9 @@
 
         <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="#" 
+        <div id="share-agent-link-container" style="margin-top: 0.5rem;">            <a href="#" 
                id="shareAgentHtmxLink"
-               hx-post="/ui/htmx/share/generate-link" 
+               hx-post="{{ url_for('htmx_generate_share_link') }}" 
                hx-target="#shareLinkDisplayArea" 
                hx-swap="innerHTML"
                hx-indicator="#share-loading-indicator"

flock/webapp/templates/partials/_execution_view_container.html

@@ -1,14 +1,22 @@
-<article class="two-pane-flex-container">
-    <section id="execution-left-pane" style="flex: 1; min-width: 300px;">
-        {# The Execution Form will be loaded here #}
-        <div id="execution-form-wrapper" hx-get="/ui/api/flock/htmx/execution-form-content" {# New endpoint for just the
-            form #} hx-trigger="load" hx-swap="innerHTML">
+<article class="two-pane-flex-container" x-data="{ showLeftPane: true }">
+    <!-- Left pane - collapsed state -->
+    <div class="left-pane-collapsed" x-show="!showLeftPane" style="display: none;">
+        <a href="#" class="pane-toggle" @click.prevent="showLeftPane = true" aria-label="Expand left pane">Show</a>
+    </div>
+
+    <!-- Left pane - expanded state -->
+    <section id="execution-left-pane" x-show="showLeftPane" style="flex: 1; min-width: 200px; max-width: 500px;">
+        <div class="pane-header" style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
+            <a href="#" class="pane-toggle" @click.prevent="showLeftPane = false" aria-label="Hide left pane">Hide</a>
+        </div>
+        {# The Execution Form will be loaded here #}        <div id="execution-form-wrapper" hx-get="{{ url_for('htmx_get_execution_form_content') }}" 
+            hx-trigger="load" hx-swap="innerHTML">
             <p>Loading execution form...</p><progress indeterminate></progress>
         </div>
     </section>
 
     <section id="execution-right-pane" class="right-pane-framed"
-        style="flex: 2; border-left: 1px solid var(--pico-muted-border-color); padding-left: 1.5rem;">
+        :style="showLeftPane ? 'flex: 2; border-left: 1px solid var(--pico-muted-border-color); padding-left: 1.5rem;' : 'flex: 1; border-left: none; padding-left: 0;'">
         {# The Results Display area, always present when this container is loaded #}
         <header style=" border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem;">
             <h5>Execution Results</h5>

flock/webapp/templates/partials/_flock_file_list.html

@@ -1,7 +1,6 @@
 {% if flock_files %}
 <ul class="item-list">
-    {% for file_name in flock_files %}
-    <li hx-post="/ui/load-flock-action/by-name" 
+    {% for file_name in flock_files %}    <li hx-post="{{ url_for('ui_load_flock_by_name_action') }}" 
         hx-vals='{"selected_flock_filename": "{{ file_name }}"}'
         {# After successful load, the main.py route for by-name will now return 
            the flock properties form targeted to the main content area AND
@@ -13,7 +12,7 @@
         hx-target="#main-content-area" {# This will load the editor page content #}
         hx-swap="innerHTML" 
         hx-indicator="#flock-file-list-loading-indicator"
-        hx-push-url="/ui/editor/properties"> {# Push URL to editor after load #}
+        hx-push-url="{{ url_for('page_editor_section', ui_mode='properties') }}"> {# Push URL to editor after load #}
         {{ file_name }}
     </li>
     {% endfor %}

flock/webapp/templates/partials/_flock_properties_form.html

@@ -23,7 +23,7 @@
         </div>
     {% endif %}
 
-    <form hx-post="/ui/api/flock/htmx/flock-properties" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-props-loading">
+    <form hx-post="{{ url_for('htmx_update_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="/ui/api/flock/htmx/save-flock" hx-target="#flock-properties-form-article" hx-swap="innerHTML" hx-indicator="#flock-save-loading">
+     <form hx-post="{{ url_for('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/_flock_upload_form.html

@@ -1,8 +1,7 @@
 <article>
     <header>
         <h5>Upload New Flock File</h5>
-    </header>
-    <form hx-post="/ui/load-flock-action/by-upload"
+    </header>    <form hx-post="{{ url_for('load_flock_by_upload') }}"
           hx-target="#main-content-area" {# After upload, go to editor #}
           hx-swap="innerHTML"
           hx-encoding="multipart/form-data"

flock/webapp/templates/partials/_load_manager_view.html

@@ -20,12 +20,11 @@
             <header class="grid">
                 <h2>Load Flock</h2> {# Moved title here #}
                 <div style="text-align: right;">
-                    <button role="button" class="outline" hx-get="/ui/htmx/create-flock-form?ui_mode={{ ui_mode }}" hx-target="#flock-properties-or-action-content" hx-swap="innerHTML">Add New Flock</button>
+                    <button role="button" class="outline" hx-get="{{ url_for('htmx_get_create_flock_form') }}?ui_mode={{ ui_mode }}" hx-target="#flock-properties-or-action-content" hx-swap="innerHTML">Add New Flock</button>
                 </div>
             </header>
             {# Content of the left pane now goes into this article #}
-            <div style="padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); flex-grow: 1; display: flex; flex-direction: column;">
-                <div hx-get="/ui/htmx/dashboard-flock-file-list" 
+            <div style="padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); flex-grow: 1; display: flex; flex-direction: column;">                <div hx-get="{{ url_for('htmx_get_dashboard_flock_file_list_partial') }}" 
                      hx-trigger="load, flockFileListChanged from:body" 
                      hx-swap="innerHTML" 
                      id="dashboard-flock-file-list-target"

flock/webapp/templates/partials/_registry_viewer_content.html

@@ -5,19 +5,18 @@
     </header>
 
     <nav>
-        <ul role="group">
-            <li>
-                <button role="button" class="outline" hx-get="/ui/api/registry/htmx/type/table" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
+        <ul role="group">            <li>
+                <button role="button" class="outline" hx-get="{{ url_for('htmx_get_registry_table', item_type='type') }}" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
                     View Types
                 </button>
             </li>
             <li>
-                <button role="button" class="outline" hx-get="/ui/api/registry/htmx/tool/table" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
+                <button role="button" class="outline" hx-get="{{ url_for('htmx_get_registry_table', item_type='tool') }}" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
                     View Tools/Callables
                 </button>
             </li>
             <li>
-                <button role="button" class="outline" hx-get="/ui/api/registry/htmx/component/table" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
+                <button role="button" class="outline" hx-get="{{ url_for('htmx_get_registry_table', item_type='component') }}" hx-target="#registry-table-container" hx-indicator="#registry-loading" hx-on:click="setActiveButton(this)">
                     View Components
                 </button>
             </li>

flock/webapp/templates/partials/_settings_env_content.html

@@ -1,10 +1,9 @@
 <article>
     <h3>Environment Variables</h3>
-    <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
-        <button class="outline small" id="toggle-secrets-btn" hx-post="/ui/htmx/toggle-show-secrets" hx-target="#env-vars-container" hx-swap="outerHTML">
+    <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">        <button class="outline small" id="toggle-secrets-btn" hx-post="{{ url_for('htmx_toggle_show_secrets') }}" hx-target="#env-vars-container" hx-swap="outerHTML">
             {% if show_secrets %}Hide Secrets{% else %}Show Secrets{% endif %}
         </button>
-        <button class="outline small" hx-get="/ui/htmx/env-add-form" hx-target="#env-vars-container" hx-swap="afterbegin">Add Variable</button>
+        <button class="outline small" hx-get="{{ url_for('htmx_env_add_form') }}" hx-target="#env-vars-container" hx-swap="afterbegin">Add Variable</button>
     </div>
     {% include 'partials/_env_vars_table.html' %}
 </article> 

flock/webapp/templates/partials/_settings_theme_content.html

@@ -2,12 +2,12 @@
     <h3>Theme Switcher</h3>
     <div style="display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center;">
         <label for="theme-select" style="margin:0;">Select Theme:</label>
-        <select id="theme-select" name="theme" hx-get="/ui/htmx/theme-preview" hx-target="#theme-preview" hx-trigger="load, change" hx-include="#theme-select">
+        <select id="theme-select" name="theme" hx-get="{{ url_for('htmx_theme_preview') }}" hx-target="#theme-preview" hx-trigger="load, change" hx-include="#theme-select">
             {% for t in themes %}
             <option value="{{ t }}" {% if t == current_theme %}selected{% endif %}>{{ t }}</option>
             {% endfor %}
         </select>
-        <button class="small" hx-post="/ui/apply-theme" hx-target="body" hx-include="#theme-select" hx-swap="none">Apply</button>
+        <button class="small" hx-post="{{ url_for('apply_theme') }}" hx-target="body" hx-include="#theme-select" hx-swap="none">Apply</button>
     </div>
     <div id="theme-preview" style="margin-top:1rem;">
         <!-- Preview generated by theme-preview endpoint -->

flock/webapp/templates/partials/_settings_view.html

@@ -6,10 +6,10 @@
     <nav>
         <ul role="group">
             <li>
-                <button role="button" class="primary" hx-get="/ui/htmx/settings/env-vars" hx-target="#settings-content-container" hx-indicator="#settings-loading" hx-on:click="setActiveButton(this)">Environment</button>
+                <button role="button" class="primary" hx-get="{{ url_for('htmx_settings_env_vars') }}" hx-target="#settings-content-container" hx-indicator="#settings-loading" hx-on:click="setActiveButton(this)">Environment</button>
             </li>
             <li>
-                <button role="button" class="outline" hx-get="/ui/htmx/settings/theme" hx-target="#settings-content-container" hx-indicator="#settings-loading" hx-on:click="setActiveButton(this)">Theme</button>
+                <button role="button" class="outline" hx-get="{{ url_for('htmx_settings_theme') }}" hx-target="#settings-content-container" hx-indicator="#settings-loading" hx-on:click="setActiveButton(this)">Theme</button>
             </li>
         </ul>
     </nav>