flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/webapp/static/css/components.css

@@ -1,167 +0,0 @@
-/* ========================================================================
-   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

@@ -1,39 +0,0 @@
-/* ========================================================================
-   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

@@ -1,46 +0,0 @@
-/* ========================================================================
-   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

@@ -1,127 +0,0 @@
-/* ========================================================================
-   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/static/css/two-pane.css

@@ -1,48 +0,0 @@
-/* ========================================================================
-   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

@@ -1,200 +0,0 @@
-<!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" />
-    <!-- Split modular CSS files -->
-    <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) -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" referrerpolicy="no-referrer" />
-    {# Inject Theme CSS Variables #}
-    {% if theme_css and theme_css.strip() %}
-    <style>
-        /* Start Theme CSS */
-        {{ theme_css | safe }}
-        /* End Theme CSS */
-    </style>
-    {% endif %}
-    {# End Theme CSS Injection #}
-    <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>
-    <!-- Prism.js JS (core and autoloader) -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" referrerpolicy="no-referrer"></script>
-    <!-- Removed inline styles as they're in custom.css -->
-</head>
-
-<body>
-    <div id="global-toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;">
-        <!-- Toasts will be appended here -->
-    </div>
-
-    <header class="top-header">
-        <span><strong>🐧 Flock Playground 🐤</strong></span>        <span id="header-flock-status-container" hx-get="{{ 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="{{ 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>
-
-    <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 🦆 - Theme: {{ active_theme_name | default('default') }}</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);
-        }
-
-        // Add HTMX event listener for Prism highlighting
-        document.addEventListener('htmx:afterSwap', function(event) {
-            // Check if the swapped element or its parent is the main content area or results display
-            const mainContentArea = document.getElementById('main-content-area');
-            const resultsDisplay = document.getElementById('results-display-content');
-            let targetElement = event.detail.target;
-
-            if (targetElement === mainContentArea || (resultsDisplay && resultsDisplay.contains(targetElement)) || (mainContentArea && mainContentArea.contains(targetElement))) {
-                if (typeof Prism !== 'undefined') {
-                    // console.log('Prism highlighting triggered for swapped content in main area.');
-                    Prism.highlightAllUnder(mainContentArea || document.documentElement); 
-                }
-            }
-        });
-
-        // Initial highlight on page load
-        document.addEventListener('DOMContentLoaded', () => {
-            if (typeof Prism !== 'undefined') {
-                // console.log('Prism initial highlighting.');
-                Prism.highlightAll();
-            }
-        });
-    </script>
-    {# Global Toast Handler - identical to the one in chat.html #}
-    <script>
-        document.body.addEventListener('showGlobalToast', function (event) {
-            const detail = event.detail;
-            const message = detail.message || 'Done!';
-            const type = detail.type || 'info'; // success, error, warning, info
-
-            const toastContainer = document.getElementById('global-toast-container');
-            if (!toastContainer) return;
-
-            const toast = document.createElement('article');
-            toast.className = `toast-message ${type}`;
-            toast.innerHTML = `<button class="close-toast" style="float: right; background: none; border: none; font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer;">&times;</button>${message}`;
-            
-            toast.style.padding = '0.75rem';
-            toast.style.border = '1px solid';
-            toast.style.borderRadius = 'var(--pico-border-radius, 4px)';
-            toast.style.minWidth = '250px';
-            toast.style.maxWidth = '400px';
-            toast.style.opacity = '0';
-            toast.style.transition = 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out';
-            toast.style.transform = 'translateX(100%)';
-
-            if (type === 'success') {
-                toast.style.borderColor = 'var(--pico-color-green-500, green)';
-                toast.style.backgroundColor = 'var(--pico-color-green-150, #e6fffa)';
-                toast.style.color = 'var(--pico-color-green-700, darkgreen)';
-            } else if (type === 'error') {
-                toast.style.borderColor = 'var(--pico-color-red-500, red)';
-                toast.style.backgroundColor = 'var(--pico-color-red-150, #ffe6e6)';
-                toast.style.color = 'var(--pico-color-red-700, darkred)';
-            } else { // Default/info/warning
-                toast.style.borderColor = 'var(--pico-color-blue-500, blue)';
-                toast.style.backgroundColor = 'var(--pico-color-blue-150, #e6f7ff)';
-                toast.style.color = 'var(--pico-color-blue-700, darkblue)';
-            }
-
-            toastContainer.appendChild(toast);
-
-            setTimeout(() => {
-                toast.style.opacity = '1';
-                toast.style.transform = 'translateX(0)';
-            }, 10);
-
-            const closeButton = toast.querySelector('.close-toast');
-            closeButton.onclick = () => {
-                toast.style.opacity = '0';
-                toast.style.transform = 'translateY(-20px)';
-                setTimeout(() => toast.remove(), 300);
-            };
-
-            setTimeout(() => {
-                toast.style.opacity = '0';
-                toast.style.transform = 'translateY(-20px)';
-                setTimeout(() => toast.remove(), 300);
-            }, 5000);
-        });
-    </script>
-</body>
-
-</html>