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

flock/webapp/static/css/custom.css

@@ -0,0 +1,612 @@
+/* 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;
+    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);
+    /* Add body padding here if needed, instead of in base.html <style> */
+    /* padding-bottom: 50px; */ 
+}
+
+/* --- 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-sectioning-background-color); /* Use custom or fallback */
+    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)); /* Use Pico shadow or fallback */
+}
+
+header.top-header strong {
+    color: var(--pico-color); /* Use theme text color */
+    font-weight: 600;
+    font-size: 1.2rem;
+    letter-spacing: 0.02em;
+}
+
+header.top-header small {
+    color: var(--pico-muted-color); /* Use muted color */
+    font-size: 0.85rem;
+}
+
+header.top-header code {
+    background: var(--pico-code-background-color); /* Use code background */
+    color: var(--pico-code-color); /* Use code text color */
+    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; /* Needs to match header height */
+    background-color: var(--pico-background-color);
+    padding-bottom: 50px; /* Add padding here to avoid overlap with fixed 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;
+}
+
+/* --- Improved Sidebar Styles --- */
+aside.sidebar {
+    grid-area: sidebar;
+    background: var(--flock-sidebar-background, var(--pico-card-background-color)); /* Use custom or fallback */
+    padding: 1.5rem 0;
+    border-right: 1px solid var(--pico-muted-border-color);
+    margin-top: 3.2rem; /* Adjust if header height changed */
+    height: calc(100vh - 3.5rem - 2.1rem); /* Adjust based on header/footer heights */
+    position: fixed;
+    left: 0;
+    bottom: 2.1rem; /* Adjust based on footer height */
+    width: 300px; /* Match grid-template-columns */
+    z-index: 1000;
+}
+
+.sidebar nav h5 {
+    margin-bottom: 0.9rem;
+    padding-left: 1.5rem;
+    color: var(--pico-color); /* Use muted 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); /* Use muted border */
+    opacity: 0.5; /* Keep opacity or adjust as needed */
+}
+
+/* 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: var(--pico-button-base-color); /* Use theme text 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;
+}
+
+/* Icons in sidebar buttons */
+.sidebar nav a i,
+.sidebar nav button i {
+    width: 24px;
+    margin-right: 8px;
+    text-align: center;
+    color: var(--pico-h2-color); /* Use muted 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); /* Color for icon on active/hover background */
+    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: var(--pico-muted-color); /* Use theme text color */
+    box-shadow: none;
+}
+
+.sidebar nav button:focus {
+    /* Use Pico's focus style or define a custom one using theme vars */
+    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)); /* Use hover background or focus as fallback */
+    color: var(--pico-primary-inverse); /* Text color on hover background */
+    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: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+    font-weight: 600;
+    box-shadow: var(--pico-card-box-shadow); /* Use a standard shadow or define custom */
+}
+
+/* --- End Sidebar Styles --- */
+
+
+/* Message container positioning */
+.message-container {
+    position: fixed;
+    bottom: 3rem;
+    right: 1rem;
+    z-index: 1002;
+    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(--flock-success-color, var(--pico-ins-color)); /* Use custom or Pico fallback */
+    color: var(--pico-primary-inverse); /* Assuming success background provides contrast */
+    border: 1px solid var(--flock-success-color, var(--pico-ins-color));
+}
+
+.message-container .error {
+    background-color: var(--flock-error-color, var(--pico-del-color)); /* Use custom or Pico fallback */
+    color: var(--pico-primary-inverse); /* Assuming error background provides contrast */
+    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;
+}
+
+/* -- Progress & Loading Indicators -- */
+progress {
+    border-radius: 10px;
+    height: 8px;
+}
+
+progress:indeterminate {
+    background: rgba(var(--pico-primary-rgb), 0.2); /* Need RGB version or approximation */
+    /* Fallback if RGB not available */
+    /* background: var(--pico-loading-bar-background-color); */
+}
+
+progress:indeterminate::after {
+    /* Fallback if RGB not available */
+    /* background-image: var(--pico-loading-bar-indeterminate-background-image); */
+    background-image: linear-gradient(90deg, rgba(var(--pico-primary-rgb), 0.2) 0%, var(--pico-primary) 50%, rgba(var(--pico-primary-rgb), 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);
+    
+}
+
+#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 {
+    /* background-color: var(--pico-card-sectioning-background-color); */
+    flex-shrink: 0;
+}
+
+#agent-list-panel ul {
+    flex-grow: 1;
+    overflow-y: auto;
+    list-style-type: none;
+    padding: 0;
+}
+
+#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-setting {
+    background-color: var(--pico-muted-hover-background-color);
+}
+
+#agent-list-panel li.selected-agent {
+    background-color: var(--pico-primary-focus); /* Use focus color for selection */
+    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 {
+    color: var(--pico-color);
+    background-color: var(--pico-primary);
+    border-color: var(--pico-primary);
+    box-shadow: var(--pico-card-box-shadow); /* Use standard shadow or focus? */
+}
+
+button[type="submit"]:hover,
+button.primary:hover {
+    background-color: var(--pico-primary-hover);
+    border-color: var(--pico-primary-hover);
+    box-shadow: var(--pico-card-box-shadow); /* Enhance shadow on hover? */
+}
+
+/* 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);
+}
+
+.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); /* Use secondary color for keys? */
+    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(--flock-error-color, var(--pico-del-color)); /* Use custom or fallback */
+    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,
+main.main-content h2,
+main.main-content h3 {
+    color: var(--pico-color); /* Use theme text color */
+    font-weight: 600;
+    line-height: 1.2;
+    margin-top: 0; /* Reset top margin */
+}
+
+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 titles styling for consistency */
+.panel-title {
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+    /* Inherits color from h1/h2/h3 now */
+}
+
+/* ==========================================================================
+   Two-Pane Flex Layout (Unified)
+   ========================================================================== */
+
+.two-pane-flex-container {
+    display: flex;
+    gap: 1.5rem; /* Consistent gap like in execution view */
+    border: 1px solid var(--pico-muted-border-color); /* Optional: If the container itself needs a border
+    /* border-radius: var(--pico-border-radius); */
+    background-color: var(--pico-card-background-color); /* Optional: If the container needs a distinct background */
+}
+
+.left-pane {
+    flex: 1;
+    min-width: 300px; /* Minimum width for the left selection/control pane */
+    /* background-color: var(--pico-card-background-color); /* Optional: if left pane needs card-like bg */
+    /* border: 1px solid var(--pico-muted-border-color); /* Optional: if left pane needs border */
+    /* border-radius: var(--pico-border-radius); */
+    display: flex; /* To allow header and scrollable content within */
+    flex-direction: column;
+   
+}
+
+/* If the left pane has a content div that should be scrollable (e.g., a list) */
+.left-pane > .scrollable-content {
+    flex-grow: 1;
+    
+}
+
+.right-pane-framed {
+    flex: 2; /* Right pane takes more space */
+    /* background-color: var(--pico-background-color); /* Match execution view's right pane style if it's plain */
+    border-left: 1px solid var(--pico-muted-border-color); /* Separator line */
+    padding-left: 1.5rem; /* Padding to the left of the separator */
+    
+}
+
+.right-pane-framed > header {
+    padding-bottom: 0.75rem; /* Space below the title in the right pane */
+    border-bottom: 1px solid var(--pico-muted-border-color); /* Line below title */
+    margin-bottom: 1rem; /* Space between header and content */
+}
+
+.right-pane-framed > header > h5 {
+    margin-bottom: 0; /* Reset Pico's default h5 margin if needed */
+    font-size: 1.1rem; /* Consistent header size */
+}
+
+/* Styles for item lists within the left-pane if needed globally */
+.item-list-container {
+    flex-grow: 1;
+    
+    /* border-top: 1px solid var(--pico-muted-border-color);  */
+}
+
+ul.item-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+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); /* Or var(--pico-active-background-color) */
+    color: var(--pico-primary-inverse); /* Or var(--pico-active-color) */
+}
+
+/* Attempt to override/reset .editor-grid if it's defined elsewhere and conflicts.
+   If .editor-grid and .flock-manager-grid are only in <style> tags, they will be removed with the HTML. */
+.editor-grid {
+    display: unset;
+    grid-template-columns: unset;
+    gap: unset;
+    height: unset;
+    border: unset;
+    border-radius: unset;
+    background-color: unset;
+}

flock/webapp/templates/base.html

@@ -0,0 +1,105 @@
+<!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">
+    {# Inject Theme CSS Variables #}
+    {% if theme_css %}
+    <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>
+    <!-- Removed inline styles as they're in custom.css -->
+</head>
+
+<body>
+    <header class="top-header">
+        <span><strong>🐧 Flock UI 🐤</strong></span>
+        <span id="header-flock-status-container" hx-get="/ui/htmx/header-flock-status?ui_mode={{ ui_mode }}"
+            hx-trigger="load, flockLoaded from:body, flockCleared from:body" hx-swap="innerHTML">
+            <small>Loading status...</small> {# Placeholder while loading #}
+        </span>
+    </header>
+
+    <aside class="sidebar" hx-get="/ui/htmx/sidebar?ui_mode={{ ui_mode }}"
+        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);
+        }
+    </script>
+</body>
+
+</html>