supervaizer 0.10.5__py3-none-any.whl

supervaizer/admin/templates/agents.html

@@ -0,0 +1,249 @@
+{% extends "base.html" %}
+
+{% block title %}Agents - Supervaizer Admin{% endblock %}
+
+{% block content %}
+<div class="px-4 py-6 sm:px-0">
+    <!-- Header -->
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Agents
+            </h2>
+            <p class="mt-1 text-sm text-gray-500">Manage AI agents and their configurations</p>
+        </div>
+        <div class="mt-4 flex md:mt-0 space-x-3">
+            <button
+                hx-get="/admin/api/agents"
+                hx-target="#agents-table-container"
+                hx-indicator="#refresh-indicator"
+                class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+                <svg id="refresh-indicator" class="htmx-indicator -ml-1 mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Refresh
+            </button>
+            <button
+                onclick="showCreateAgentModal()"
+                class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+                <svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                </svg>
+                New Agent
+            </button>
+        </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="mt-6 bg-white shadow rounded-lg" x-data="{ filtersOpen: false }">
+        <div class="px-6 py-4 border-b border-gray-200">
+            <button
+                @click="filtersOpen = !filtersOpen"
+                class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"></path>
+                </svg>
+                Filters
+                <svg class="w-4 h-4 ml-2 transition-transform" :class="filtersOpen ? 'rotate-180' : 'rotate-0'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </button>
+        </div>
+
+        <div x-show="filtersOpen" x-cloak class="px-6 py-4 border-b border-gray-200">
+            <form
+                hx-get="/admin/api/agents"
+                hx-target="#agents-table-container"
+                hx-trigger="change, submit"
+                class="grid grid-cols-1 gap-4 sm:grid-cols-4"
+            >
+                <!-- Status Filter -->
+                <div>
+                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
+                    <select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                        <option value="">All statuses</option>
+                        <option value="active">Active</option>
+                        <option value="inactive">Inactive</option>
+                        <option value="error">Error</option>
+                        <option value="training">Training</option>
+                    </select>
+                </div>
+
+                <!-- Agent Type Filter -->
+                <div>
+                    <label for="agent_type" class="block text-sm font-medium text-gray-700">Type</label>
+                    <select name="agent_type" id="agent_type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                        <option value="">All types</option>
+                        <option value="conversational">Conversational</option>
+                        <option value="analytical">Analytical</option>
+                        <option value="specialist">Specialist</option>
+                        <option value="workflow">Workflow</option>
+                    </select>
+                </div>
+
+                <!-- Search -->
+                <div>
+                    <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
+                    <input type="text" name="search" id="search" placeholder="Agent name or description..." class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                </div>
+
+                <!-- Sort -->
+                <div>
+                    <label for="sort" class="block text-sm font-medium text-gray-700">Sort by</label>
+                    <select name="sort" id="sort" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                        <option value="-created_at">Newest first</option>
+                        <option value="created_at">Oldest first</option>
+                        <option value="name">Name A-Z</option>
+                        <option value="-name">Name Z-A</option>
+                        <option value="status">Status</option>
+                        <option value="-last_used">Last used</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Agents Grid -->
+    <div id="agents-table-container" class="mt-6">
+        {% include "agents_grid.html" %}
+    </div>
+</div>
+
+<!-- Agent Detail Modal -->
+<div id="agent-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak>
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="open = false"></div>
+
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+            <div id="agent-modal-content">
+                <!-- Content will be loaded here via HTMX -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Instructions Modal -->
+<div id="instructions-modal"
+     class="fixed inset-0 z-50"
+     x-data="{ open: false, agentSlug: '', instructionsPath: 'supervaize_instructions.html' }"
+     x-show="open"
+     x-cloak
+     @open-instructions.window="agentSlug = $event.detail.slug; instructionsPath = $event.detail.instructionsPath || 'supervaize_instructions.html'; open = true">
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="open = false"></div>
+
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg leading-6 font-medium text-gray-900">Supervaize Instructions</h3>
+                    <button
+                        @click="open = false"
+                        class="bg-white rounded-md text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    >
+                        <span class="sr-only">Close</span>
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="mt-4" style="height: 80vh; overflow-y: auto;">
+                    <iframe
+                        id="instructions-iframe"
+                        x-bind:src="agentSlug && instructionsPath ? `/supervaizer/agents/${agentSlug}/${instructionsPath}` : ''"
+                        class="w-full h-full border-0"
+                        style="min-height: 600px;"
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Handle agent modal
+    document.body.addEventListener('htmx:afterRequest', function(e) {
+        if (e.detail.target.id === 'agent-modal-content') {
+            console.log('Agent modal content loaded, showing modal');
+            // Show modal after content loads
+            const modal = document.getElementById('agent-modal');
+            if (modal && modal._x_dataStack && modal._x_dataStack[0]) {
+                modal._x_dataStack[0].open = true;
+                console.log('Modal opened via Alpine.js');
+            } else {
+                console.log('Alpine.js not available, using fallback');
+                // Fallback: remove x-cloak and set open state manually
+                modal.classList.remove('x-cloak');
+                modal.style.display = 'block';
+            }
+        }
+    });
+
+    // Global functions for agent actions
+    window.showAgentDetails = function(agentSlug) {
+        console.log('Showing agent details for slug:', agentSlug);
+        htmx.ajax('GET', `/admin/api/agents/${encodeURIComponent(agentSlug)}`, {target: '#agent-modal-content'});
+    };
+
+    window.showAgentInstructions = function(agentSlug, instructionsPath) {
+        console.log('showAgentInstructions called with slug:', agentSlug, 'path:', instructionsPath);
+
+        if (!agentSlug || agentSlug.trim() === '') {
+            console.error('Agent slug is missing or empty');
+            return;
+        }
+
+        // Default instructions path if not provided
+        instructionsPath = instructionsPath || 'supervaize_instructions.html';
+
+        const modal = document.getElementById('instructions-modal');
+        if (!modal) {
+            console.error('Instructions modal not found');
+            return;
+        }
+
+        // Dispatch Alpine.js event to open modal (Alpine will handle iframe src reactively)
+        const event = new CustomEvent('open-instructions', {
+            detail: { slug: agentSlug, instructionsPath: instructionsPath },
+            bubbles: true
+        });
+        modal.dispatchEvent(event);
+        console.log('Dispatched open-instructions event with slug:', agentSlug, 'path:', instructionsPath);
+
+        // Also try direct Alpine.js access as fallback
+        if (modal._x_dataStack && modal._x_dataStack[0]) {
+            const alpineData = modal._x_dataStack[0];
+            alpineData.agentSlug = agentSlug;
+            alpineData.instructionsPath = instructionsPath;
+            alpineData.open = true;
+            console.log('Modal opened via direct Alpine.js access');
+        } else {
+            console.warn('Alpine.js data not available, modal may not open');
+        }
+    };
+
+    window.editAgent = function(agentId) {
+        console.log('Edit agent:', agentId);
+        // Future: htmx.ajax('GET', `/admin/api/agents/${agentId}/edit`, {target: '#agent-modal-content'});
+    };
+
+    window.showCreateAgentModal = function() {
+        console.log('Create new agent');
+        // Future: htmx.ajax('GET', '/admin/api/agents/new', {target: '#agent-modal-content'});
+    };
+
+    // Auto-load and refresh agents
+    document.addEventListener('DOMContentLoaded', function() {
+        // Load agents immediately
+        htmx.ajax('GET', '/admin/api/agents', {target: '#agents-table-container'});
+
+        // Set up auto-refresh interval
+        setInterval(function() {
+            htmx.ajax('GET', '/admin/api/agents', {target: '#agents-table-container'});
+        }, 30000); // Refresh every 30 seconds
+    });
+</script>
+{% endblock %}

supervaizer/admin/templates/agents_grid.html

@@ -0,0 +1,82 @@
+<div class="bg-white shadow overflow-hidden rounded-md">
+    <div class="px-4 py-5 sm:p-6">
+        {% if agents %}
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {% for agent in agents %}
+            <div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                <div class="p-6">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            {% if agent.type == "analytical" %}
+                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                                </svg>
+                            </div>
+                            {% elif agent.type == "workflow" %}
+                            <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                </svg>
+                            </div>
+                            {% elif agent.type == "specialist" %}
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                                </svg>
+                            </div>
+                            {% else %}
+                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                </svg>
+                            </div>
+                            {% endif %}
+                            <div class="ml-3">
+                                <h3 class="text-lg font-medium text-gray-900">{{ agent.name }} </h3>
+                                <p class="text-sm text-gray-500 capitalize">{{ agent.type or "conversational" }}</p>
+                            </div>
+                        </div>
+                        <!-- For now, assume all agents are active since we don't have real status -->
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            Active
+                        </span>
+                    </div>
+                    <p class="mt-4 text-sm text-gray-600">
+                        {{ agent.description or "AI agent ready to assist with various tasks." }}
+                    </p>
+                    <div class="mt-4 grid grid-cols-2 gap-4 text-sm">
+                        <div>
+                            <span class="text-gray-500">Version:</span>
+                            <span class="font-medium text-gray-900">{{ agent.version or "1.0.0" }}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500">Status:</span>
+                            <span class="font-medium text-green-600">Ready</span>
+                        </div>
+                    </div>
+                    <div class="mt-6 flex space-x-3">
+                        {% set agent_slug = agent.slug if agent.slug else (agent.api_path.replace('/agents/', '').rstrip('/') if agent.api_path and agent.api_path.startswith('/agents/') else '') %}
+                        {% set instructions_path = agent.instructions_path if agent.instructions_path else 'supervaize_instructions.html' %}
+                        <button onclick="showAgentInstructions('{{ agent_slug }}', '{{ instructions_path }}')" class="flex-1 bg-blue-50 text-blue-700 hover:bg-blue-100 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                            View
+                        </button>
+                        <button onclick="showAgentDetails('{{ agent_slug }}')" class="flex-1 bg-gray-50 text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                            Configure
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="text-center py-12">
+            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No agents available</h3>
+            <p class="mt-1 text-sm text-gray-500">No agents are currently configured in the server.</p>
+        </div>
+        {% endif %}
+    </div>
+</div>

supervaizer/admin/templates/base.html

@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Supervaizer Admin{% endblock %}</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        // Suppress Tailwind CDN warning in development
+        if (typeof console !== 'undefined' && console.warn) {
+            const originalWarn = console.warn;
+            console.warn = function(...args) {
+                if (args[0] && args[0].includes && args[0].includes('cdn.tailwindcss.com should not be used in production')) {
+                    return; // Suppress this specific warning
+                }
+                originalWarn.apply(console, args);
+            };
+        }
+    </script>
+
+    <!-- HTMX -->
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+
+    <!-- Alpine.js -->
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+    <style>
+        [x-cloak] { display: none !important; }
+        .htmx-request { opacity: 0.5; }
+        .htmx-request.htmx-swapping { opacity: 1; }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Navigation -->
+    {% include "navigation.html" %}
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Live Console -->
+    <div id="live-console" class="fixed bottom-0 left-0 right-0 bg-black text-green-300 font-mono text-xs z-40 border-t border-gray-700" x-data="{ expanded: false, logs: [] }" x-cloak>
+        <!-- Console Header -->
+        <div class="flex items-center justify-between px-4 py-2 bg-gray-900 border-b border-gray-700">
+            <span class="text-green-400 font-semibold">Live Console</span>
+            <div class="flex items-center space-x-2">
+                <button @click="logs = []" class="text-gray-400 hover:text-white text-xs px-2 py-1 rounded bg-gray-800 hover:bg-gray-700">Clear</button>
+                <button @click="expanded = !expanded" class="text-gray-400 hover:text-white">
+                    <svg class="w-4 h-4 transform transition-transform" :class="expanded ? 'rotate-180' : ''" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- Console Body -->
+        <div id="console-body" x-show="expanded" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="h-64 overflow-y-auto p-4 space-y-1">
+            <template x-for="log in logs" :key="log.id">
+                <div class="flex space-x-2" :class="{
+                    'text-red-400': log.level === 'ERROR' || log.level === 'CRITICAL',
+                    'text-yellow-400': log.level === 'WARNING',
+                    'text-blue-400': log.level === 'INFO',
+                    'text-green-300': log.level === 'SUCCESS',
+                    'text-gray-400': log.level === 'DEBUG',
+                    'text-cyan-400': log.level === 'USER',
+                    'text-purple-400': log.level === 'SYSTEM'
+                }">
+                    <span class="text-gray-500 whitespace-nowrap" x-text="log.time"></span>
+                    <span class="font-semibold min-w-[60px]" x-text="log.level"></span>
+                    <span x-text="log.message"></span>
+                </div>
+            </template>
+            <div x-show="logs.length === 0" class="text-gray-500 text-center py-8">
+                No logs yet. Start using the application to see live logs here.
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notifications -->
+    <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
+
+    <script>
+        // HTMX Event Handlers
+        document.body.addEventListener('htmx:responseError', function(e) {
+            showToast('Error: ' + e.detail.xhr.statusText, 'error');
+        });
+
+        document.body.addEventListener('htmx:sendError', function(e) {
+            showToast('Network error occurred', 'error');
+        });
+
+        // Toast Notification System
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            const bgColor = type === 'error' ? 'bg-red-500' : type === 'success' ? 'bg-green-500' : 'bg-blue-500';
+
+            toast.className = `${bgColor} text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full`;
+            toast.innerHTML = `
+                <div class="flex items-center">
+                    <span>${message}</span>
+                    <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-white hover:text-gray-200">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+            `;
+
+            document.getElementById('toast-container').appendChild(toast);
+
+            // Animate in
+            setTimeout(() => {
+                toast.classList.remove('translate-x-full');
+            }, 100);
+
+            // Auto remove after 5 seconds
+            setTimeout(() => {
+                toast.classList.add('translate-x-full');
+                setTimeout(() => toast.remove(), 300);
+            }, 5000);
+        }
+
+        // Make showToast globally available
+        window.showToast = showToast;
+
+        // Live Console - Server-Sent Events
+        function initializeLogStream() {
+            console.log('initializeLogStream called, pathname:', window.location.pathname);
+
+            // Skip if we're on the dedicated console page to avoid conflicts
+            if (window.location.pathname.includes('/console')) {
+                console.log('Skipping live console on console page');
+                return;
+            }
+
+            const consoleComponent = document.querySelector('#live-console');
+            if (!consoleComponent) {
+                console.error('Live console component not found');
+                return;
+            }
+
+            console.log('Initializing live console log stream');
+
+            let eventSource = null;
+            let logCounter = 0;
+
+            function connectLogStream() {
+                if (eventSource) {
+                    eventSource.close();
+                }
+
+                // For live console, always connect without authentication (admin interface)
+                const streamUrl = '/admin/log-stream';
+                eventSource = new EventSource(streamUrl);
+
+                eventSource.onmessage = function(event) {
+                    try {
+                        console.log('Received log message:', event.data);
+                        // Handle different event data formats
+                        let logData;
+                        if (event.data.startsWith('data: ')) {
+                            // Remove "data: " prefix if present
+                            logData = JSON.parse(event.data.substring(6));
+                        } else {
+                            logData = JSON.parse(event.data);
+                        }
+                        const logEntry = {
+                            id: ++logCounter,
+                            time: new Date(logData.timestamp).toLocaleTimeString(),
+                            level: logData.level,
+                            message: logData.message
+                        };
+
+                        // Get Alpine.js component data
+                        const alpineData = Alpine.$data(consoleComponent);
+
+                        // Add log and limit to last 1000 entries
+                        alpineData.logs.push(logEntry);
+                        if (alpineData.logs.length > 1000) {
+                            alpineData.logs.shift();
+                        }
+                        console.log('Added log entry, total logs:', alpineData.logs.length);
+
+                        // Auto-scroll to bottom if expanded
+                        if (alpineData.expanded) {
+                            const consoleBody = document.getElementById('console-body');
+                            if (consoleBody) {
+                                setTimeout(() => {
+                                    consoleBody.scrollTop = consoleBody.scrollHeight;
+                                }, 10);
+                            }
+                        }
+                    } catch (error) {
+                        console.error('Error processing log message:', error, event.data);
+                    }
+                };
+
+                eventSource.onerror = function(event) {
+                    console.error('Log stream error:', event);
+                    showToast('Log stream disconnected. Attempting to reconnect...', 'error');
+
+                    // Attempt reconnection after 5 seconds
+                    setTimeout(() => {
+                        connectLogStream();
+                    }, 5000);
+                };
+
+                eventSource.onopen = function(event) {
+                    console.log('Log stream connected successfully');
+                };
+            }
+
+            // Initialize connection
+            connectLogStream();
+
+            // Cleanup on page unload
+            window.addEventListener('beforeunload', function() {
+                if (eventSource) {
+                    eventSource.close();
+                }
+            });
+        }
+
+        // Initialize when Alpine.js is ready
+        document.addEventListener('alpine:init', function() {
+            initializeLogStream();
+        });
+    </script>
+</body>
+</html>