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

flock/webapp/static/css/custom.css

@@ -0,0 +1,527 @@
+/* Global styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    /* Increased sidebar width from 280px to 300px */
+    grid-template-rows: auto 1fr auto;
+    /* Header, content, footer */
+    grid-template-areas:
+        "header header"
+        "sidebar main"
+        "footer footer";
+    min-height: 100vh;
+    margin: 0;
+    background-color: var(--pico-background-color);
+    /* Ensure body background is dark too */
+}
+
+/* --- Improved Header 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-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+header.top-header strong {
+    color: white;
+    font-weight: 600;
+    font-size: 1.2rem;
+    letter-spacing: 0.02em;
+}
+
+header.top-header small {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.85rem;
+}
+
+header.top-header code {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+/* --- End Header Styles --- */
+
+main.main-content {
+    grid-area: main;
+    padding: 1.5rem;
+    overflow-y: auto;
+    margin-top: 3.5rem;
+    background-color: var(--pico-background-color);
+    /* Main content area background */
+}
+
+footer.main-footer {
+    grid-area: footer;
+    padding: 0.5rem 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.07);
+    font-size: 0.8em;
+    text-align: center;
+    z-index: 1;
+    background: var(--pico-card-background-color);
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* --- Improved Sidebar Styles --- */
+aside.sidebar {
+    grid-area: sidebar;
+    background: var(--pico-card-background-color);
+    padding: 1.5rem 0;
+    border-right: 1px solid rgba(255, 255, 255, 0.07);
+    margin-top: 3.3rem;
+    height: calc(100vh - 3.5rem - 2.1rem);
+    position: fixed;
+    left: 0;
+    bottom: 2.1rem;
+    width: 320px;
+    /* Increased from 280px to 300px */
+    z-index: 1000;
+}
+
+.sidebar nav h5 {
+
+    margin-bottom: 0.9rem;
+    padding-left: 1.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+}
+
+.sidebar nav h5:first-of-type {
+    margin-top: 0;
+    /* First heading should not have top margin */
+    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: rgba(255, 255, 255, 0.1);
+    opacity: 0.5;
+}
+
+/* Links and buttons in sidebar */
+.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: rgba(255, 255, 255, 0.85);
+    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;
+    /* Prevent text wrapping in menu items */
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Icons in sidebar buttons */
+.sidebar nav a i,
+.sidebar nav button i {
+    width: 24px;
+    margin-right: 8px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.7);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+    /* Prevent icon from shrinking */
+}
+
+.sidebar nav a:hover i,
+.sidebar nav button:hover i,
+.sidebar nav a.active-nav i,
+.sidebar nav button.active-nav i {
+    color: white;
+    transform: scale(1.1);
+}
+
+/* Remove Pico's default outline styling for buttons if class 'outline' or 'contrast' is used */
+.sidebar nav button.outline,
+.sidebar nav button.contrast {
+    border: none;
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.85);
+    box-shadow: none;
+}
+
+.sidebar nav button:focus {
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
+}
+
+.sidebar nav a:hover,
+.sidebar nav button:hover {
+    background-color: rgba(79, 70, 229, 0.15);
+    color: #fff;
+    transform: translateX(3px);
+}
+
+/* Active navigation item */
+.sidebar nav a[aria-current="page"],
+.sidebar nav button[aria-current="page"],
+.sidebar nav a.active-nav,
+.sidebar nav button.active-nav {
+    background-color: #4f46e5;
+    color: white;
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+}
+
+/* --- End Sidebar Styles --- */
+
+
+/* Message container positioning */
+.message-container {
+    position: fixed;
+    bottom: 3rem;
+    right: 1rem;
+    z-index: 1002;
+    /* Higher than sidebar */
+    width: auto;
+    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(--pico-ins-color);
+    color: var(--pico-primary-inverse);
+    border: 1px solid var(--pico-ins-color);
+}
+
+.message-container .error {
+    background-color: var(--pico-del-color);
+    color: var(--pico-primary-inverse);
+    border: 1px solid 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;
+}
+
+/* -- Progress & Loading Indicators -- */
+progress {
+    border-radius: 10px;
+    height: 8px;
+}
+
+progress:indeterminate {
+    background: rgba(79, 70, 229, 0.2);
+}
+
+progress:indeterminate::after {
+    background-image: linear-gradient(90deg, rgba(79, 70, 229, 0.2) 0%, #4f46e5 50%, rgba(79, 70, 229, 0.2) 100%);
+}
+
+.sidebar progress {
+    width: 80%;
+    margin: 1rem auto;
+    display: block;
+}
+
+/* Editor Layout - Agent Manager View */
+.editor-grid {
+    display: grid;
+    grid-template-columns: minmax(250px, 1fr) 2fr;
+    gap: var(--pico-spacing);
+    align-items: start;
+}
+
+#agent-list-panel,
+#agent-detail-panel {
+    height: calc(80vh - var(--pico-block-spacing-vertical) * 2);
+    overflow-y: auto;
+}
+
+#agent-list-panel article,
+#agent-detail-panel article {
+    background-color: var(--pico-card-background-color);
+    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#agent-list-panel header,
+#agent-detail-panel header {
+    flex-shrink: 0;
+}
+
+#agent-list-panel ul {
+    flex-grow: 1;
+    overflow-y: auto;
+    list-style-type: none;
+    padding: 0;
+    margin-top: 1rem;
+}
+
+#agent-list-panel li {
+    padding: 0.75rem;
+    border: 1px solid var(--pico-muted-border-color);
+    margin-bottom: 0.5rem;
+    border-radius: var(--pico-border-radius);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+}
+
+#agent-list-panel li:hover,
+#agent-list-panel li.htmx-settling {
+    background-color: var(--pico-muted-hover-background-color);
+}
+
+#agent-list-panel li.selected-agent {
+    background-color: var(--pico-primary-focus);
+    border-color: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+}
+
+#agent-list-panel li small {
+    color: var(--pico-muted-color);
+}
+
+#agent-list-panel .grid {
+    margin-top: auto;
+    padding-top: 1rem;
+}
+
+/* Agent Detail Form Refinements */
+#agent-detail-panel form {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+#agent-detail-panel fieldset {
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--pico-muted-border-color);
+}
+
+#agent-detail-panel fieldset:last-of-type {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+#agent-detail-form-content .grid {
+    margin-top: 1rem;
+    flex-shrink: 0;
+}
+
+/* Buttons and Forms Styling */
+button[type="submit"],
+button.primary {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+button[type="submit"]:hover,
+button.primary:hover {
+    background-color: #4338ca;
+    border-color: #4338ca;
+    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.4);
+}
+
+/* Tool Checklist */
+.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);
+    /* Match form input background */
+}
+
+.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 */
+#execution-panel article {
+    margin-bottom: 1rem;
+}
+
+#results-display-container {
+    margin-top: 0;
+}
+
+#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;
+}
+
+/* HTMX Indicators */
+.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;
+}
+
+/* Registry Viewer Specific */
+#registry-page-content nav ul[role="group"] {
+    margin-bottom: 1rem;
+}
+
+#registry-page-content nav ul[role="group"] li button {
+    width: 100%;
+}
+
+#registry-table-container table {
+    margin-top: 1rem;
+}
+
+/* Utility for form field errors */
+.field-error {
+    color: var(--pico-del-color);
+    font-size: var(--pico-font-size-small);
+    margin-top: -0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Main content headings - ensure consistent vertical alignment */
+main.main-content h1 {
+    font-size: 2rem;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    color: white;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+main.main-content h2 {
+    font-size: 1.75rem;
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+    color: white;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+main.main-content h3 {
+    font-size: 1.5rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: white;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+/* Panel titles styling for consistency */
+.panel-title {
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+}

flock/webapp/templates/base.html

@@ -0,0 +1,98 @@
+<!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>{% 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">
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script src="https://unpkg.com/htmx.org@1.9.10"
+        integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
+        crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <!-- Removed inline styles as they're in custom.css -->
+</head>
+
+<body>
+    <header class="top-header">
+        <span><strong>🐧 Flock UI 🐤</strong></span>
+        {# Use the variables passed from the route handler #}
+        {% if current_flock %}
+        <small>Current: <code>{{ current_filename or current_flock.name }}</code></small>
+        {% else %}
+        <small>No Flock Loaded</small>
+        {% endif %}
+    </header>
+
+    <aside class="sidebar" hx-get="/ui/htmx/sidebar?ui_mode={{ ui_mode }}"
+        hx-trigger="load, flockLoaded from:body, flockListChanged from:body" hx-swap="innerHTML">
+        <p>Loading navigation...</p><progress></progress>
+    </aside>
+
+    <main class="main-content" id="main-content-area">
+        {# Initial content is now loaded via HTMX based on the route #}
+        <div hx-get="{{ initial_content_url }}" hx-trigger="load" hx-swap="innerHTML">
+            <p>Loading content...</p><progress></progress>
+        </div>
+        {# Render block content if navigating directly and template extends base #}
+        {% block content %}{% endblock %}
+    </main>
+
+    <div class="message-container" x-data="messageHandler(
+            {{ success_message | tojson | safe if success_message else 'null' }},
+            {{ error_message | tojson | safe if error_message else 'null' }}
+         )">
+        <template x-if="showSuccess && successMsg">
+            <div class="success" role="alert" @click="showSuccess = false" style="cursor: pointer;">
+                <span x-text="successMsg"></span>
+                <button type="button" class="close" aria-label="Dismiss">×</button>
+            </div>
+        </template>
+        <template x-if="showError && errorMsg">
+            <div class="error" role="alert" @click="showError = false" style="cursor: pointer;">
+                <span x-text="errorMsg"></span>
+                <button type="button" class="close" aria-label="Dismiss">×</button>
+            </div>
+        </template>
+    </div>
+
+    <footer class="main-footer">
+        <small>Built with FastAPI, HTMX, Pico.CSS by 🤍 white duck 🦆</small>
+    </footer>
+
+    <script>
+        function messageHandler(initialSuccessMsg, initialErrorMsg) {
+            return {
+                showSuccess: !!initialSuccessMsg,
+                showError: !!initialErrorMsg,
+                successMsg: initialSuccessMsg,
+                errorMsg: initialErrorMsg,
+                init() {
+                    if (this.successMsg) { setTimeout(() => this.showSuccess = false, 5000); }
+                    if (this.errorMsg) { setTimeout(() => this.showError = false, 7000); }
+
+                    window.addEventListener('notify', event => {
+                        if (event.detail.type === 'success') {
+                            this.successMsg = event.detail.message;
+                            this.showSuccess = true; this.showError = false;
+                            setTimeout(() => this.showSuccess = false, 5000);
+                        }
+                        if (event.detail.type === 'error') {
+                            this.errorMsg = event.detail.message;
+                            this.showError = true; this.showSuccess = false;
+                            setTimeout(() => this.showError = false, 7000);
+                        }
+                    });
+                }
+            };
+        }
+        function triggerEvent(eventName, detail = {}) {
+            htmx.trigger(document.body, eventName, detail);
+        }
+    </script>
+</body>
+
+</html>

flock/webapp/templates/flock_editor.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block title %}Flock Editor - {{ flock.name if flock else 'Loading...' }}{% endblock %}
+
+{% 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="/api/flocks/htmx/flock-properties-form" 
+     hx-trigger="load"
+     hx-swap="innerHTML">
+     <article>
+        <p>Loading editor content...</p>
+        <progress></progress>
+     </article>
+</div>
+{% endblock %}

flock/webapp/templates/index.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}Flock UI - Dashboard{% endblock %}
+
+{% 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">
+    <p>Loading dashboard content...</p>
+    <progress></progress>
+</div>
+{% endblock %}