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

flock/webapp/templates/partials/_agent_detail_form.html

@@ -0,0 +1,97 @@
+<article id="agent-detail-form-content">
+    <header>
+        <h4>{% if is_new %}Add New Agent{% else %}Edit Agent: {{ agent.name if agent else '' }}{% endif %}</h4>
+    </header>
+    {% if form_message %}
+        <div class="form-message {{ 'success' if success else 'error' }}"
+             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
+             x-transition:leave="transition ease-in duration-300"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0">
+            {{ form_message }}
+        </div>
+    {% endif %}
+
+    <form {% if is_new %}
+              hx-post="/api/flocks/htmx/agents"
+          {% else %}
+              hx-put="/api/flocks/htmx/agents/{{ agent.name if agent else '' }}"
+          {% endif %}
+          hx-target="#agent-detail-form-content"
+          hx-swap="innerHTML"
+          hx-indicator="#agent-detail-loading-indicator">
+
+        <fieldset>
+            <label for="agent_name_field">Name *</label>
+            <input type="text" id="agent_name_field" name="agent_name" value="{{ agent.name if agent and not form_errors else (form_data.agent_name if form_data else '') }}" required placeholder="my_processing_agent">
+            {% if form_errors and form_errors.agent_name %}<small class="field-error">{{ form_errors.agent_name }}</small>{% endif %}
+
+            <label for="agent_description_field">Description</label>
+            <textarea id="agent_description_field" name="agent_description" placeholder="Briefly describe what this agent does.">{{ agent.description if agent and not form_errors else (form_data.agent_description if form_data else '') }}</textarea>
+
+            <label for="agent_model_field">Model Override (Optional)</label>
+            <input type="text" id="agent_model_field" name="agent_model" value="{{ agent.model if agent and agent.model and not form_errors else (form_data.agent_model if form_data else '') }}" placeholder="e.g., openai/gpt-3.5-turbo (uses Flock default if blank)">
+
+            <label for="input_signature_field">Input Signature *</label>
+            <input type="text" id="input_signature_field" name="input_signature" value="{{ agent.input if agent and not form_errors else (form_data.input_signature if form_data else '') }}" required placeholder="e.g., query: str | The user's question, context: list[str]">
+            <small>Format: `name1: type1 | desc1, name2: type2 | desc2`</small>
+            {% if form_errors and form_errors.input_signature %}<small class="field-error">{{ form_errors.input_signature }}</small>{% endif %}
+
+            <label for="output_signature_field">Output Signature *</label>
+            <input type="text" id="output_signature_field" name="output_signature" value="{{ agent.output if agent and not form_errors else (form_data.output_signature if form_data else '') }}" required placeholder="e.g., answer: str | The final answer, sources: list[str]">
+            <small>Format: `name1: type1 | desc1, name2: type2 | desc2`</small>
+            {% if form_errors and form_errors.output_signature %}<small class="field-error">{{ form_errors.output_signature }}</small>{% endif %}
+        </fieldset>
+
+        <fieldset>
+            <legend>Tools (Optional)</legend>
+            <div class="tool-checklist">
+            {% if registered_tools %}
+                {% for tool in registered_tools %}
+                <label for="tool_{{ tool.name }}">
+                    <input type="checkbox" id="tool_{{ tool.name }}" name="tools" value="{{ tool.name }}"
+                           {% if tool.name in (current_tools if not form_errors else (form_data.getlist('tools') if form_data else [])) %}checked{% endif %}>
+                    {{ tool.name }} <small>({{ tool.module }})</small>
+                </label>
+                {% endfor %}
+            {% else %}
+                <p>No tools registered. Add tools via the Registry page or ensure they are discovered by Flock.</p>
+            {% endif %}
+            </div>
+        </fieldset>
+        
+        <fieldset>
+            <legend>Routing (Default Handoff)</legend>
+            <label for="default_router_handoff_field">Next Agent Name (Optional)</label>
+            <input type="text" id="default_router_handoff_field" name="default_router_handoff" 
+                   value="{{ agent.handoff_router.config.hand_off if agent and agent.handoff_router and agent.handoff_router.config and agent.handoff_router.config.hand_off is string and not form_errors else (form_data.default_router_handoff if form_data else '') }}" 
+                   placeholder="Enter name of next agent">
+            <small>If set, this agent will hand off to the specified agent by default.</small>
+        </fieldset>
+
+        <div class="grid">
+            <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="/api/flocks/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">
+                Delete Agent
+            </button>
+            {% endif %}
+            <button type="button" class="outline" 
+                    hx-get="/api/flocks/htmx/agents/new-agent-form" 
+                    hx-target="#agent-detail-panel" 
+                    hx-swap="innerHTML"
+                    hx-indicator="#agent-detail-loading-indicator">
+                Cancel / New Form
+            </button>
+        </div>
+        <div id="agent-detail-loading-indicator" class="htmx-indicator" style="margin-top: 0.5rem;">
+            <progress indeterminate></progress> Processing...
+        </div>
+    </form>
+</article>

flock/webapp/templates/partials/_agent_list.html

@@ -0,0 +1,24 @@
+<article id="agent-list-content">
+    <header class="grid">
+        <h4>Agents ({{ flock.agents|length }})</h4>
+        <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>
+        </div>
+    </header>
+    {% if message %}
+        <div class="form-message {{ 'success' if success else 'error' }}">{{ message }}</div>
+    {% endif %}
+    {% if flock.agents %}
+    <ul>
+        {% 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">
+            <strong>{{ agent.name }}</strong><br>
+            <small>{{ agent.description|truncate(80) if agent.description else 'No description' }}</small>
+        </li>
+        {% endfor %}
+    </ul>
+    {% else %}
+    <p>No agents defined in this Flock yet. Click "Add New Agent" to create one.</p>
+    {% endif %}
+    <div id="agent-list-loading" class="htmx-indicator">Loading agents... <progress></progress></div>
+</article>

flock/webapp/templates/partials/_agent_manager_view.html

@@ -0,0 +1,15 @@
+<div class="editor-grid"> {# Use the improved two-column grid #}
+    <section id="agent-list-panel"
+             hx-get="/api/flocks/htmx/agent-list"
+             hx-trigger="load, agentListChanged from:body" {# Reload when agent list changes #}
+             hx-swap="innerHTML">
+        <article><p>Loading agents...</p><progress></progress></article>
+    </section>
+
+    <section id="agent-detail-panel">
+         <article>
+            <header><h4>Agent Details</h4></header>
+            <p>Select an agent from the list to view/edit, or click "Add New Agent".</p>
+        </article>
+    </section>
+</div>

flock/webapp/templates/partials/_agent_tools_checklist.html

@@ -0,0 +1,14 @@
+<!-- This partial might be used if tool selection becomes more complex -->
+<!-- For MVP, it's integrated into _agent_detail_form.html -->
+<fieldset>
+    <legend>Select Tools</legend>
+    {% for tool in registered_tools %}
+    <label for="tool_{{ tool.name }}_{{ context_id }}"> <!-- context_id for uniqueness if form is loaded multiple times -->
+        <input type="checkbox" id="tool_{{ tool.name }}_{{ context_id }}" name="tools" value="{{ tool.name }}"
+               {% if tool.name in current_tools %}checked{% endif %}>
+        {{ tool.name }} <small>({{ tool.module }})</small>
+    </label>
+    {% else %}
+    <p>No tools available in registry.</p>
+    {% endfor %}
+</fieldset>

flock/webapp/templates/partials/_create_flock_form.html

@@ -0,0 +1,52 @@
+<article id="create-flock-view-content">
+    <header>
+        <h3>Create or Upload Flock</h3>
+    </header>
+
+    {% if error_message %}
+        <div class="error DANGER" role="alert" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
+            {{ error_message }} <button type="button" class="close" @click="show = false">×</button>
+        </div>
+    {% endif %}
+    {% if success_message %} {# For messages after an action within this view #}
+        <div class="success SUCCESS" role="alert" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
+            {{ success_message }} <button type="button" class="close" @click="show = false">×</button>
+        </div>
+    {% endif %}
+    
+    <section id="create-by-details-section">
+        <h4>Define New Flock Properties</h4>
+        <form hx-post="/ui/create-flock" 
+              hx-target="#main-content-area" {# On success, loads properties form into main area #}
+              hx-swap="innerHTML" 
+              hx-indicator="#create-indicator-details">
+            <label for="flock_name_create_details">Flock Name *</label>
+            <input type="text" id="flock_name_create_details" name="flock_name" placeholder="My Awesome Flock" required>
+
+            <label for="default_model_create_details">Default Model (Optional)</label>
+            <input type="text" id="default_model_create_details" name="default_model" placeholder="openai/gpt-4o">
+
+            <label for="description_create_details">Description (Optional)</label>
+            <textarea id="description_create_details" name="description" placeholder="A brief description..."></textarea>
+
+            <button type="submit">Create and Edit Flock</button>
+            <span id="create-indicator-details" class="htmx-indicator"><progress indeterminate></progress> Creating...</span>
+        </form>
+    </section>
+
+    <hr>
+
+    <section id="create-by-upload-section">
+        <h4>Upload Existing Flock File</h4>
+        <form hx-post="/ui/load-flock-action/by-upload"
+              hx-target="#main-content-area" {# On success, loads properties form into main area #}
+              hx-swap="innerHTML"
+              hx-encoding="multipart/form-data"
+              hx-indicator="#create-upload-loading-indicator">
+            <label for="flock_file_upload_create">Upload <code>.flock.yaml</code>, <code>.yaml</code>, or <code>.yml</code> file:</label>
+            <input type="file" id="flock_file_upload_create" name="flock_file_upload" accept=".yaml,.yml,.flock" required>
+            <button type="submit">Upload and Edit Flock</button>
+            <span id="create-upload-loading-indicator" class="htmx-indicator"><progress indeterminate></progress> Uploading...</span>
+        </form>
+    </section>
+</article>

flock/webapp/templates/partials/_dashboard_flock_detail.html

@@ -0,0 +1,18 @@
+<article>
+    <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" 
+          hx-target="#main-content-area" {# Target the main area to show editor on success #}
+          hx-swap="innerHTML"
+          hx-indicator="#dashboard-flock-detail-loading-indicator">
+        <input type="hidden" name="selected_flock_filename" value="{{ selected_filename }}">
+        <button type="submit">Load this Flock into Editor</button>
+        <span id="dashboard-flock-detail-loading-indicator" class="htmx-indicator"><progress indeterminate></progress></span>
+    </form>
+    <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>
+</article>

flock/webapp/templates/partials/_dashboard_flock_file_list.html

@@ -0,0 +1,17 @@
+{% if flock_files %}
+<ul class="item-list">
+    {% for file_name in flock_files %}
+    <li hx-get="/ui/htmx/dashboard-flock-properties-preview/{{ file_name }}" 
+        hx-target="#flock-properties-or-action-content" {# Target the right pane #}
+        hx-swap="innerHTML"
+        hx-indicator="#flock-properties-or-action-content progress" 
+        {# Optional: Add hx-select-from-response or other advanced HTMX if needed to highlight this li #}
+        onclick="this.closest('ul').querySelectorAll('li').forEach(li => li.classList.remove('selected-item')); this.classList.add('selected-item');"
+        > 
+        <strong>{{ file_name }}</strong>
+    </li>
+    {% endfor %}
+</ul>
+{% else %}
+<p style="padding: 1rem;">No Flock files found in <code>./.flock_ui_projects/</code>.</p>
+{% endif %}

flock/webapp/templates/partials/_dashboard_flock_properties_preview.html

@@ -0,0 +1,29 @@
+<article id="flock-preview-article">
+    <header>
+        <h4>Preview: {{ preview_flock.name if preview_flock else selected_filename }}</h4>
+    </header>
+    {% if preview_flock %}
+        <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|length }}</p>
+        
+        <form hx-post="/ui/load-flock-action/by-name" 
+              hx-target="#main-content-area" {# This will load the full editor for this flock #}
+              hx-swap="innerHTML" 
+              hx-indicator="#flock-preview-loading-indicator">
+            <input type="hidden" name="selected_flock_filename" value="{{ selected_filename }}">
+            <button type="submit" class="primary">Load this Flock into Editor</button>
+            <span id="flock-preview-loading-indicator" class="htmx-indicator"><progress indeterminate></progress></span>
+        </form>
+    {% 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">
+            <input type="hidden" name="selected_flock_filename" value="{{ selected_filename }}">
+            <button type="submit" class="secondary">Attempt to Load into Editor</button>
+        </form>
+    {% endif %}
+    <hr>
+    
+
+</article>

flock/webapp/templates/partials/_dashboard_upload_flock_form.html

@@ -0,0 +1,17 @@
+<article>
+    <header>
+        <h5>Upload New Flock File</h5>
+    </header>
+    <form hx-post="/ui/load-flock-action/by-upload"
+          hx-target="#main-content-area" {# Target the main area to show editor on success #}
+          hx-swap="innerHTML"
+          hx-encoding="multipart/form-data"
+          hx-indicator="#dashboard-upload-loading-indicator">
+        <label for="flock_file_upload_dashboard">Upload <code>.flock.yaml</code>, <code>.yaml</code>, or <code>.yml</code> file:</label>
+        <input type="file" id="flock_file_upload_dashboard" name="flock_file_upload" accept=".yaml,.yml,.flock" required>
+        <button type="submit">Upload and Load Flock</button>
+        <span id="dashboard-upload-loading-indicator" class="htmx-indicator"><progress indeterminate></progress> Uploading...</span>
+    </form>
+    <hr>
+    <p><small>Alternatively, select a Flock from the list on the left to view its details or load it.</small></p>
+</article>

flock/webapp/templates/partials/_dynamic_input_form_content.html

@@ -0,0 +1,22 @@
+{% if input_fields %}
+    {% for field in input_fields %}
+    <fieldset> {# Group each field #}
+        <label for="agent_input_{{ field.name }}">{{ field.name }} ({{ field.type }})</label>
+        {% if field.description %}
+            <small>{{ field.description }}</small>
+        {% endif %}
+        {% if field.html_type == 'textarea' %}
+            <textarea id="agent_input_{{ field.name }}" name="agent_input_{{ field.name }}" rows="3" placeholder="{{ field.placeholder if field.placeholder else ('Enter ' + field.type) }}"></textarea>
+        {% elif field.html_type == 'checkbox' %}
+            <label for="agent_input_{{ field.name }}_cb">
+                <input type="checkbox" id="agent_input_{{ field.name }}_cb" name="agent_input_{{ field.name }}" value="true">
+                Enabled
+            </label>
+        {% else %}
+            <input type="{{ field.html_type }}" id="agent_input_{{ field.name }}" name="agent_input_{{ field.name }}" placeholder="{{ field.placeholder if field.placeholder else ('Enter ' + field.type) }}">
+        {% endif %}
+    </fieldset>
+    {% endfor %}
+{% else %}
+    <p><small>This agent requires no specific inputs, or input signature could not be parsed.</small></p>
+{% endif %}

flock/webapp/templates/partials/_execution_form.html

@@ -0,0 +1,48 @@
+<article id="execution-form-content">
+    <header>
+        <h4>Run Flock</h4>
+    </header>
+    {% if flock and flock.agents %}
+    <form hx-post="/api/flocks/htmx/run" 
+          hx-target="#results-display" 
+          hx-swap="innerHTML" 
+          hx-indicator="#run-loading-indicator"
+          x-data="{ selectedAgentForInput: '' }">
+        
+        <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="
+                    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'});
+                    } else {
+                        document.getElementById('dynamic-input-form-fields').innerHTML = '<p><small>Select an agent to see its input fields.</small></p>';
+                    }
+                ">
+            <option value="" disabled {% if not selected_agent_name %}selected{% endif %}>-- Choose an agent --</option>
+            {% for agent_name_key in flock.agents.keys() %}
+            <option value="{{ agent_name_key }}" {% if selected_agent_name == agent_name_key %}selected{% endif %}>{{ agent_name_key }}</option>
+            {% endfor %}
+        </select>
+
+        <div id="dynamic-input-form-fields">
+            <!-- Input fields for the selected agent will be loaded here -->
+            <p><small>Select an agent to see its input fields.</small></p>
+        </div>
+        <div id="input-form-loading-indicator" class="htmx-indicator">
+            <progress indeterminate></progress> Loading input form...
+        </div>
+
+        <button type="submit" {% if not flock.agents %}disabled{% endif %}>Run Flock</button>
+        <span id="run-loading-indicator" class="htmx-indicator">
+            <progress indeterminate></progress> Running...
+        </span>
+    </form>
+    {% elif flock and not flock.agents %}
+    <p>No agents available in the current Flock. Add agents to enable execution.</p>
+    {% else %}
+    <p>Load or create a Flock to enable execution.</p>
+    {% endif %}
+</article>

flock/webapp/templates/partials/_execution_view_container.html

@@ -0,0 +1,19 @@
+<article id="execution-view-container-content">
+    {# The Execution Form will be loaded here #}
+    <div id="execution-form-wrapper"
+         hx-get="/api/flocks/htmx/execution-form-content" {# New endpoint for just the form #}
+         hx-trigger="load"
+         hx-swap="innerHTML">
+        <p>Loading execution form...</p><progress indeterminate></progress>
+    </div>
+
+    {# The Results Display area, always present when this container is loaded #}
+    <section id="results-display-container" style="margin-top: 1.5rem;">
+        <header>
+            <h5>Execution Results</h5>
+        </header>
+        <div id="results-display">
+            <p><small>Results will appear here after running the Flock.</small></p>
+        </div>
+    </section>
+</article>

flock/webapp/templates/partials/_flock_file_list.html

@@ -0,0 +1,24 @@
+{% if flock_files %}
+<ul class="item-list">
+    {% for file_name in flock_files %}
+    <li hx-post="/ui/load-flock-action/by-name" 
+        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
+           trigger flockLoaded event for the sidebar.
+           For the right pane of *this* view, we might want to show file details.
+           Let's assume for now loading a flock navigates to the editor.
+           If we want to show details *here*, the target would be #flock-file-detail-or-upload
+        #}
+        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 #}
+        {{ file_name }}
+    </li>
+    {% endfor %}
+</ul>
+{% else %}
+<p style="padding: 1rem;">No Flock files found. Create one or upload.</p>
+{% endif %}
+<div id="flock-file-list-loading-indicator" class="htmx-indicator" style="text-align:center;"><progress indeterminate></progress></div>

flock/webapp/templates/partials/_flock_properties_form.html

@@ -0,0 +1,51 @@
+<article id="flock-properties-form-article">
+    <header>
+        <h4>Flock Properties {% if current_filename %}(Current File: <code>{{ current_filename }}</code>){% else %}(Unsaved Flock){% endif %}</h4>
+    </header>
+    
+    {% if update_message %}
+        <div class="form-message {{ 'success' if success else 'error' }}" role="alert"
+             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
+             x-transition:leave="transition ease-in duration-300"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0">
+            {{ update_message }}
+        </div>
+    {% endif %}
+    {% if save_message %}
+        <div class="form-message {{ 'success' if success else 'error' }}" role="alert"
+             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
+             x-transition:leave="transition ease-in duration-300"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0">
+            {{ save_message }}
+        </div>
+    {% endif %}
+
+    <form hx-post="/api/flocks/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>
+
+        <label for="default_model">Default Model</label>
+        <input type="text" id="default_model" name="default_model" value="{{ flock.model if flock and flock.model else '' }}" placeholder="e.g., openai/gpt-4o">
+
+        <label for="description">Description</label>
+        <textarea id="description" name="description" placeholder="A brief description of this Flock.">{{ flock.description if flock and flock.description else '' }}</textarea>
+        
+        <div class="grid">
+            <button type="submit">Update Properties <span id="flock-props-loading" class="htmx-indicator"><progress indeterminate></progress></span></button>
+        </div>
+    </form>
+    <hr>
+     <form hx-post="/api/flocks/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') }}" 
+               required
+               placeholder="filename.flock.yaml">
+        <small>Will save to <code>./.flock_ui_projects/</code>. Use <code>.flock.yaml</code>, <code>.yaml</code>, or <code>.yml</code>.</small>
+        <div class="grid">
+            <button type="submit">Save to File <span id="flock-save-loading" class="htmx-indicator"><progress indeterminate></progress></span></button>
+        </div>
+    </form>
+</article>

flock/webapp/templates/partials/_flock_upload_form.html

@@ -0,0 +1,17 @@
+<article>
+    <header>
+        <h5>Upload New Flock File</h5>
+    </header>
+    <form hx-post="/ui/load-flock-action/by-upload"
+          hx-target="#main-content-area" {# After upload, go to editor #}
+          hx-swap="innerHTML"
+          hx-encoding="multipart/form-data"
+          hx-indicator="#upload-loading-indicator-pane">
+        <label for="flock_file_upload_pane">Upload <code>.flock.yaml</code>, <code>.yaml</code>, or <code>.yml</code> file:</label>
+        <input type="file" id="flock_file_upload_pane" name="flock_file_upload" accept=".yaml,.yml,.flock" required>
+        <button type="submit">Upload and Load Flock</button>
+        <span id="upload-loading-indicator-pane" class="htmx-indicator"><progress indeterminate></progress> Uploading...</span>
+    </form>
+    {# Optionally, if a file from the list was clicked to show details before loading: #}
+    {# {% if selected_file_details %} ... display details ... {% endif %} #}
+</article>

flock/webapp/templates/partials/_load_manage_view.html

@@ -0,0 +1,88 @@
+<article id="dashboard-flock-manager-content">
+    <header>
+        <h3>Manage & Load Flocks</h3>
+    </header>
+
+    {% if error_message %}
+        <div class="error DANGER" role="alert" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
+            {{ error_message }} <button type="button" class="close" @click="show = false">×</button>
+        </div>
+    {% endif %}
+    {% if success_message %}
+        <div class="success SUCCESS" role="alert" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
+            {{ success_message }} <button type="button" class="close" @click="show = false">×</button>
+        </div>
+    {% endif %}
+
+    <div class="flock-manager-grid"> 
+        <section id="flock-file-list-column" class="list-pane">
+            <header style="padding: 0.5rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color);">
+                <h6>Available Flock Files</h6>
+                <small>(in <code>./.flock_ui_projects/</code>)</small>
+            </header>
+            <div hx-get="/ui/htmx/dashboard-flock-file-list" 
+                 hx-trigger="load, flockFileListChanged from:body" 
+                 hx-swap="innerHTML" 
+                 id="dashboard-flock-file-list-target">
+                <p style="padding:1rem;">Loading files...</p><progress indeterminate></progress>
+            </div>
+        </section>
+
+        <section id="flock-detail-action-column" class="detail-pane">
+            {# This area will be updated when a file is selected from the list. #}
+            <div id="flock-properties-or-action-content">
+                 <article style="text-align:center; margin-top: 2rem; border: none; background: transparent;">
+                    <p>Select a Flock from the list to view its details and load it into the editor.</p>
+                    <p><small>To create a new Flock or upload an existing one, use the options in the sidebar.</small></p>
+                </article>
+            </div>
+        </section>
+    </div>
+</article>
+
+<style>
+    /* Styles for the dashboard's two-pane layout for flock management */
+    .flock-manager-grid {
+        display: grid;
+        grid-template-columns: minmax(280px, 1fr) 2.5fr; 
+        gap: 0; 
+        height: calc(100vh - var(--header-height) - 6rem); 
+        border: 1px solid var(--pico-muted-border-color);
+        border-radius: var(--pico-border-radius);
+        background-color: var(--pico-card-background-color); 
+    }
+
+    .flock-manager-grid .list-pane { 
+        border-right: 1px solid var(--pico-muted-border-color);
+        padding: 0; 
+        overflow-y: auto;
+        display: flex; 
+        flex-direction: column;
+    }
+    .flock-manager-grid .list-pane header {
+        flex-shrink: 0;
+    }
+    .flock-manager-grid .list-pane #dashboard-flock-file-list-target {
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
+    .flock-manager-grid .detail-pane { 
+        padding: 1rem;
+        overflow-y: auto;
+        background-color: var(--pico-background-color); 
+    }
+
+    #dashboard-flock-file-list-target ul.item-list {
+        list-style-type: none; padding: 0; margin:0;
+    }
+    #dashboard-flock-file-list-target li {
+        padding: 0.75rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color);
+        cursor: pointer; transition: background-color 0.15s ease-in-out;
+    }
+    #dashboard-flock-file-list-target li:last-child { border-bottom: none; }
+    #dashboard-flock-file-list-target li:hover,
+    #dashboard-flock-file-list-target li.selected-item { 
+        background-color: var(--pico-primary-focus); color: var(--pico-primary-inverse);
+    }
+</style>

flock/webapp/templates/partials/_registry_table.html

@@ -0,0 +1,25 @@
+<article style="margin-top:0; padding-top:0;"> {# Remove top margin/padding from article to align with buttons #}
+    <header>
+        <h4 style="margin-bottom: 0.5rem;">{{ item_type_display }}</h4>
+    </header>
+    {% if items %}
+    <table>
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Module Path</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for item in items %}
+            <tr>
+                <td>{{ item.name }}</td>
+                <td>{{ item.module }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% else %}
+    <p>No {{ item_type_display.lower() }} found in the registry.</p>
+    {% endif %}
+</article>