flock-core 0.4.0b42__py3-none-any.whl → 0.4.0b44__py3-none-any.whl

flock/webapp/static/css/components.css

@@ -0,0 +1,167 @@
+/* ========================================================================
+   components.css — Reusable component / utility styles
+   ======================================================================== */
+
+/* ---------- Message container (toast notifications) ---------- */
+.message-container {
+    position: fixed;
+    bottom: 3rem;
+    right: 1rem;
+    z-index: 1002;
+    max-width: 400px;
+}
+
+.message-container > div {
+    margin-top: 0.5rem;
+    box-shadow: var(--pico-card-box-shadow);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    border-radius: var(--pico-border-radius);
+    font-weight: 500;
+}
+
+.message-container .success {
+    background-color: var(--flock-success-color, var(--pico-ins-color));
+    color: var(--pico-primary-inverse);
+    border: 1px solid var(--flock-success-color, var(--pico-ins-color));
+}
+
+.message-container .error {
+    background-color: var(--flock-error-color, var(--pico-del-color));
+    color: var(--pico-primary-inverse);
+    border: 1px solid var(--flock-error-color, var(--pico-del-color));
+}
+
+.message-container .close {
+    background: none;
+    border: none;
+    color: inherit;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 0 0.5rem;
+    margin-left: 1rem;
+}
+
+/* ---------- HTMX loading indicator ---------- */
+.htmx-indicator { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; }
+.htmx-request .htmx-indicator { display: inline-block; opacity: 1; margin-left: 0.5em; }
+.htmx-request.htmx-indicator { display: inline-block; opacity: 1; }
+
+/* ---------- Form & validation helpers ---------- */
+.field-error { color: var(--flock-error-color, var(--pico-del-color)); font-size: var(--pico-font-size-small); margin-top: -0.5rem; margin-bottom: 0.5rem; }
+
+/* ---------- Main content headings ---------- */
+main.main-content h1, main.main-content h2, main.main-content h3 {
+    color: var(--pico-color);
+    font-weight: 600;
+    line-height: 1.2;
+    margin-top: 0;
+}
+main.main-content h1 { font-size: 2rem; margin-bottom: 1.5rem; }
+main.main-content h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }
+main.main-content h3 { font-size: 1.5rem; margin-bottom: 1rem; }
+
+.panel-title { margin-top: 0; margin-bottom: 1.25rem; }
+
+/* ---------- Two-pane flex container (Execution, Agents, etc.) ---------- */
+.two-pane-flex-container {
+    display: flex;
+    gap: 1.5rem;
+    border: 1px solid var(--pico-muted-border-color);
+    background-color: var(--pico-card-background-color);
+}
+
+.left-pane { flex: 1; min-width: 300px; display: flex; flex-direction: column; }
+.left-pane > .scrollable-content { flex-grow: 1; }
+
+.right-pane-framed { flex: 2; border-left: 1px solid var(--pico-muted-border-color); padding-left: 1.5rem; }
+.right-pane-framed > header { padding-bottom: 0.75rem; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
+.right-pane-framed > header > h5 { margin-bottom: 0; font-size: 1.1rem; }
+
+/* ---------- Item-list utility ---------- */
+.item-list-container { flex-grow: 1; }
+ul.item-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Guard against ::marker still appearing in some browsers */
+ul.item-list li::marker { content: none; }
+
+ul.item-list li { padding: 0.75rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color); cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; }
+ul.item-list li:last-child { border-bottom: none; }
+ul.item-list li:hover, ul.item-list li.selected-item { background-color: var(--pico-primary-focus); color: var(--pico-primary-inverse); }
+
+/* ---------- Misc ---------- */
+progress { border-radius: 10px; height: 8px; }
+progress:indeterminate { background: rgba(var(--pico-primary-rgb, 0, 0, 0), 0.2); }
+
+/* ---------- Tool checklist (Agent form) ---------- */
+.tool-checklist {
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid var(--pico-muted-border-color);
+    padding: 0.5rem;
+    margin-bottom: 0.75rem;
+    border-radius: var(--pico-border-radius);
+    background-color: var(--pico-form-element-background-color);
+}
+
+.tool-checklist label { display: block; margin-bottom: 0.25rem; font-weight: normal; }
+.tool-checklist input[type="checkbox"] { margin-right: 0.5rem; }
+.tool-checklist label small { color: var(--pico-muted-color); }
+
+/* ---------- Execution / Results display ---------- */
+#results-display {
+    background-color: var(--pico-code-background-color);
+    color: var(--pico-code-color);
+    padding: 1rem;
+    border-radius: var(--pico-border-radius);
+    overflow-x: auto;
+    margin-top: 1rem;
+    min-height: 100px;
+    border: 1px solid var(--pico-muted-border-color);
+}
+
+#results-display pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
+
+#results-display .structured-table {
+    border: 1px solid var(--pico-muted-border-color);
+    font-size: 0.9em;
+    width: 100%;
+    margin-bottom: 0.75rem !important;
+    border-collapse: collapse;
+}
+#results-display .structured-table td,
+#results-display .structured-table th {
+    padding: 0.4em 0.6em !important;
+    vertical-align: top;
+    border-bottom: 1px solid var(--pico-muted-border-color);
+}
+#results-display .structured-table tr:last-child td { border-bottom: none; }
+#results-display .structured-table td[style*="font-weight: bold"] {
+    color: var(--pico-secondary);
+    min-width: 120px;
+    max-width: 250px;
+    word-break: break-word;
+    border-right: 1px solid var(--pico-muted-border-color);
+}
+#results-display .structured-table ul { margin-left: 1em; padding-left: 1em; }
+
+/* ---------- Registry viewer tweaks ---------- */
+nav ul[role="group"] { margin-bottom: 1rem; }
+nav ul[role="group"] li button { width: 100%; }
+#registry-table-container table { margin-top: 1rem; }
+
+/* ---------- Progress elements ---------- */
+.sidebar progress { width: 80%; margin: 1rem auto; display: block; }
+progress { border-radius: 10px; height: 8px; }
+progress:indeterminate { background: rgba(var(--pico-primary-rgb, 0, 0, 0), 0.2); } 
+
+
+
+
+

flock/webapp/static/css/header.css

@@ -0,0 +1,39 @@
+/* ========================================================================
+   header.css — Top header bar styles
+   ======================================================================== */
+
+header.top-header {
+    grid-area: header;
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    padding: 0.7rem 1.5rem;
+    background-color: var(--pico-card-sectioning-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    box-shadow: var(--pico-card-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2));
+}
+
+header.top-header strong {
+    color: var(--pico-color);
+    font-weight: 600;
+    font-size: 1.2rem;
+    letter-spacing: 0.02em;
+}
+
+header.top-header small {
+    color: var(--pico-muted-color);
+    font-size: 0.85rem;
+}
+
+header.top-header code {
+    background: var(--pico-code-background-color);
+    color: var(--pico-code-color);
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    font-size: 0.85rem;
+} 

flock/webapp/static/css/layout.css

@@ -0,0 +1,46 @@
+/* ========================================================================
+   layout.css — Global layout & structure styles for Flock web UI
+   (extracted from legacy custom.css)
+   ======================================================================== */
+
+/* ---------- Global grid layout ---------- */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    display: grid;
+    /* Sidebar column (300px) + main flexible column */
+    grid-template-columns: 300px 1fr;
+    /* Header (auto height) + main (flex) + footer (auto) rows */
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+        "header header"
+        "sidebar main"
+        "footer footer";
+    min-height: 100vh;
+    margin: 0;
+    background-color: var(--pico-background-color);
+}
+
+/* ---------- Main content area ---------- */
+main.main-content {
+    grid-area: main;
+    padding: 1.5rem;
+    overflow-y: auto;
+    /* account for fixed header height so content starts below */
+    margin-top: 3.5rem;
+    background-color: var(--pico-background-color);
+    /* ensure footer does not overlap scrolling content */
+    padding-bottom: 50px;
+}
+
+/* ---------- Footer ---------- */
+footer.main-footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--pico-card-background-color);
+    border-top: 1px solid var(--pico-muted-border-color);
+    padding: 0.5rem 1rem;
+    text-align: center;
+    z-index: 1000;
+} 

flock/webapp/static/css/sidebar.css

@@ -0,0 +1,127 @@
+/* ========================================================================
+   sidebar.css — Left navigation sidebar styles
+   ======================================================================== */
+
+aside.sidebar {
+    grid-area: sidebar;
+    background: var(--flock-sidebar-background, var(--pico-card-background-color));
+    padding: 1.5rem 0;
+    border-right: 1px solid var(--pico-muted-border-color);
+    margin-top: 3.2rem; /* header height compensation */
+    height: calc(100vh - 3.5rem - 2.1rem); /* header + footer */
+    position: fixed;
+    left: 0;
+    bottom: 2.1rem; /* footer height */
+    width: 300px;
+    z-index: 1000;
+}
+
+.sidebar nav h5 {
+    margin-bottom: 0.9rem;
+    padding-left: 1.5rem;
+    color: var(--pico-color);
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+}
+
+.sidebar nav h5:first-of-type {
+    margin-top: 0;
+    margin-bottom: 0.9rem;
+}
+
+.sidebar nav ul {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    list-style: none;
+    margin-bottom: 1.5rem;
+}
+
+.sidebar nav li {
+    margin-bottom: 0.2rem;
+}
+
+.sidebar hr {
+    margin: 1.25rem 1.5rem;
+    border-color: var(--pico-muted-border-color);
+    opacity: 0.5;
+}
+
+/* Links & buttons */
+.sidebar nav a,
+.sidebar nav button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+    padding: 0.7rem 1rem;
+    border: none;
+    background-color: transparent;
+    color: var(--pico-button-base-color);
+    text-decoration: none;
+    border-radius: 8px;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sidebar nav a i,
+.sidebar nav button i {
+    width: 24px;
+    margin-right: 8px;
+    text-align: center;
+    color: var(--pico-h2-color);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+}
+
+.sidebar nav a:hover i,
+.sidebar nav button:hover i,
+.sidebar nav a.active-nav i,
+.sidebar nav button.active-nav i {
+    color: var(--pico-primary-inverse);
+    transform: scale(1.1);
+}
+
+/* Button variations / states */
+.sidebar nav button.outline,
+.sidebar nav button.contrast {
+    border: none;
+    background-color: transparent;
+    color: var(--pico-muted-color);
+    box-shadow: none;
+}
+
+.sidebar nav button:focus {
+    box-shadow: 0 0 0 3px var(--pico-primary-focus);
+}
+
+.sidebar nav a:hover,
+.sidebar nav button:hover {
+    background-color: var(--pico-primary-hover-background, var(--pico-primary-focus));
+    color: var(--pico-primary-inverse);
+    transform: translateX(3px);
+}
+
+/* Active navigation */
+.sidebar nav a[aria-current="page"],
+.sidebar nav button[aria-current="page"],
+.sidebar nav a.active-nav,
+.sidebar nav button.active-nav {
+    background-color: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+    font-weight: 600;
+    box-shadow: var(--pico-card-box-shadow);
+}
+
+/* Progress bar inside sidebar (used as loading indicator) */
+.sidebar progress {
+    width: 80%;
+    margin: 1rem auto;
+    display: block;
+} 

flock/webapp/templates/base.html

@@ -6,7 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Flock UI{% endblock %}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
-    <link rel="stylesheet" href="/static/css/custom.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">
     <!-- Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     {# Inject Theme CSS Variables #}

flock/webapp/templates/chat.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <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">
+    {# Inject active theme variables #}
+    {% if theme_css %}
+    <style>
+        /* Start Theme CSS */
+        /* stylelint-disable */
+        {{ theme_css | safe }}
+        /* stylelint-enable */
+        /* End Theme CSS */
+    </style>
+    {% endif %}
+    <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+</head>
+<body class="chat-page">
+    <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>
+        </div>
+
+        <div id="chat-content-area">
+            <div id="chat-log" hx-get="/chat/messages" hx-trigger="load" hx-swap="innerHTML">
+                <p><em>Loading chat…</em></p>
+            </div>
+            
+            <form id="chat-form" hx-post="/chat/send" hx-target="#chat-log" hx-swap="innerHTML" hx-on::after-request="this.reset()">
+                <input type="text" name="message" placeholder="Type a message…" required autofocus>
+                <button type="submit">Send</button>
+            </form>
+        </div>
+
+        <div class="chat-footer">
+            <small>Built with FastAPI • HTMX • Pico.css – Theme: {{ active_theme_name | default('default') }}</small>
+        </div>
+    </div>
+
+<script>
+    (function() {
+        const log = document.getElementById('chat-log');
+        function scrollBottom() {
+            log.scrollTop = log.scrollHeight;
+        }
+        document.addEventListener('htmx:afterSwap', e => {
+            if (e.detail.target.id === 'chat-log') scrollBottom();
+        });
+        window.addEventListener('load', scrollBottom);
+    })();
+</script>
+</body>
+</html>

flock/webapp/templates/chat_settings.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <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">
+    {# 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>
+</head>
+<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>
+    </main>
+</body>
+</html> 

flock/webapp/templates/flock_editor.html

@@ -6,7 +6,7 @@
 {# 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="/api/flocks/htmx/flock-properties-form" 
+     hx-get="/ui/api/flock/htmx/flock-properties-form" 
      hx-trigger="load"
      hx-swap="innerHTML">
      <article>

flock/webapp/templates/partials/_agent_detail_form.html

@@ -14,9 +14,9 @@
     {% endif %}
 
     <form {% if is_new %}
-              hx-post="/api/flocks/htmx/agents"
+              hx-post="/api/flock/htmx/agents"
           {% else %}
-              hx-put="/api/flocks/htmx/agents/{{ agent.name if agent else '' }}"
+              hx-put="/api/flock/htmx/agents/{{ agent.name if agent else '' }}"
           {% endif %}
           hx-target="#agent-detail-form-content"
           hx-swap="innerHTML"
@@ -76,7 +76,7 @@
             </button>
             {% if not is_new and agent %}
             <button type="button" role="button" class="secondary outline"
-                    hx-delete="/api/flocks/htmx/agents/{{ agent.name }}"
+                    hx-delete="/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">
@@ -84,7 +84,7 @@
             </button>
             {% endif %}
             <button type="button" class="outline" 
-                    hx-get="/api/flocks/htmx/agents/new-agent-form" 
+                    hx-get="/ui/api/flock/htmx/agents/new-agent-form" 
                     hx-target="#agent-detail-panel" 
                     hx-swap="innerHTML"
                     hx-indicator="#agent-detail-loading-indicator">

flock/webapp/templates/partials/_agent_list.html

@@ -4,9 +4,9 @@
         <div class="form-message {{ 'success' if success else 'error' }}">{{ message }}</div>
     {% endif %}
     {% if flock.agents %}
-    <ul>
+    <ul class="item-list">
         {% for agent_name, agent in flock.agents.items() %}
-        <li hx-get="/api/flocks/htmx/agents/{{ agent.name }}/details-form" hx-target="#agent-detail-panel" hx-swap="innerHTML" hx-indicator="#agent-detail-loading">
+        <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');">
             <strong>{{ agent.name }}</strong><br>
             <small>{{ agent.description|truncate(80) if agent.description else 'No description' }}</small>
         </li>

flock/webapp/templates/partials/_agent_manager_view.html

@@ -20,19 +20,18 @@
             <header class="grid">
               <h2>Agents ({{ flock.agents|length }}) </h2>
               <div style="text-align: right;">
-                  <button role="button" class="outline" hx-get="/api/flocks/htmx/agents/new-agent-form" hx-target="#agent-detail-panel" hx-swap="innerHTML">Add New Agent</button>
+                  <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>
               </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="/api/flocks/htmx/agent-list" 
+                <div hx-get="/ui/api/flock/htmx/agent-list" 
                      hx-trigger="load, agentListChanged from:body"
                      hx-swap="innerHTML"
                      id="agent-list-panel"
-                     class="item-list-container" style="flex-grow: 1; ">
+                     class="item-list-container" style="flex-grow: 1; overflow-y: auto;border: 1px solid var(--pico-border-color); border-radius: var(--pico-border-radius);">
                     <p style="padding:1rem;">Loading Agents...</p><progress indeterminate></progress>
                 </div>
             </div>

flock/webapp/templates/partials/_chat_container.html

@@ -0,0 +1,9 @@
+<article id="chat-container" class="chat-container">
+    <div id="chat-log" hx-get="/chat/messages" hx-trigger="load" hx-swap="innerHTML">
+        <p><em>Loading chat…</em></p>
+    </div>
+    <form id="chat-form" class="chat-form" hx-post="/chat/send" hx-target="#chat-log" hx-swap="innerHTML" hx-on::after-request="this.reset()">
+        <input type="text" name="message" placeholder="Type a message…" required>
+        <button type="submit">Send</button>
+    </form>
+</article> 

flock/webapp/templates/partials/_chat_messages.html

@@ -0,0 +1,13 @@
+{% for entry in history %}
+    {% if entry.role == 'user' %}
+        <div class="bubble user">
+            {{ entry.text }}
+            <span class="chat-timestamp">{{ entry.timestamp|default(now().strftime('%H:%M')) }}</span>
+        </div>
+    {% else %}
+        <div class="bubble bot">
+            {{ entry.text }}
+            <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 %}
+{% endfor %}

flock/webapp/templates/partials/_chat_settings_form.html

@@ -0,0 +1,65 @@
+<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;">
+    <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"
+            hx-target="closest form"
+            hx-trigger="change"
+            hx-include="[name=agent_name]">
+        <option value="" {% if not chat_cfg.agent_name %}selected{% endif %}>-- Echo (no agent) --</option>
+        {% if current_flock and current_flock.agents %}
+            {% for agent_name in current_flock.agents.keys() %}
+            <option value="{{ agent_name }}" {% if chat_cfg.agent_name == agent_name %}selected{% endif %}>{{ agent_name }}</option>
+            {% endfor %}
+        {% else %}
+            <option disabled>(no agents loaded)</option>
+        {% endif %}
+    </select>
+
+    <label for="message_key_field">Message Key</label>
+    {% if input_fields %}
+    <select id="message_key_field" name="message_key">
+        <option value="" {% if not chat_cfg.message_key %}selected{% endif %}>-- None --</option>
+        {% for field in input_fields %}
+        <option value="{{ field }}" {% if chat_cfg.message_key == field %}selected{% endif %}>{{ field }}</option>
+        {% endfor %}
+    </select>
+    {% else %}
+    <input type="text" id="message_key_field" name="message_key" value="{{ chat_cfg.message_key }}" required>
+    {% endif %}
+
+    <label for="history_key_field">History Key</label>
+    {% if input_fields %}
+    <select id="history_key_field" name="history_key">
+        <option value="" {% if not chat_cfg.history_key %}selected{% endif %}>-- None --</option>
+        {% for field in input_fields %}
+        <option value="{{ field }}" {% if chat_cfg.history_key == field %}selected{% endif %}>{{ field }}</option>
+        {% endfor %}
+    </select>
+    {% else %}
+    <input type="text" id="history_key_field" name="history_key" value="{{ chat_cfg.history_key }}" required>
+    {% endif %}
+
+    <label for="response_key_field">Response Key</label>
+    {% if output_fields %}
+    <select id="response_key_field" name="response_key">
+        <option value="" {% if not chat_cfg.response_key %}selected{% endif %}>-- None --</option>
+        {% for field in output_fields %}
+        <option value="{{ field }}" {% if chat_cfg.response_key == field %}selected{% endif %}>{{ field }}</option>
+        {% endfor %}
+    </select>
+    {% else %}
+    <input type="text" id="response_key_field" name="response_key" value="{{ chat_cfg.response_key }}" required>
+    {% 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>
+    </div>
+    <div id="chat-settings-saving" class="htmx-indicator" style="text-align:center; margin-top:0.5rem;"><progress indeterminate></progress></div>
+</form> 

flock/webapp/templates/partials/_execution_form.html

@@ -3,7 +3,7 @@
         <h2>Run Flock</h2>
     </header>
     {% if flock and flock.agents %}
-    <form hx-post="/api/flocks/htmx/run" 
+    <form hx-post="/ui/api/flock/htmx/run" 
           hx-target="#results-display" 
           hx-swap="innerHTML" 
           hx-indicator="#run-loading-indicator"
@@ -16,7 +16,7 @@
                 x-model="selectedAgentForInput"
                 @change="
                     if ($event.target.value) {
-                        htmx.ajax('GET', '/api/flocks/htmx/agents/' + $event.target.value + '/input-form', {target: '#dynamic-input-form-fields', swap: 'innerHTML', indicator: '#input-form-loading-indicator'});
+                        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'});
                     } else {
                         document.getElementById('dynamic-input-form-fields').innerHTML = '<p><small>Select an agent to see its input fields.</small></p>';
                     }