supervaizer 0.9.7__py3-none-any.whl → 0.10.0__py3-none-any.whl

supervaizer/admin/templates/agents.html

@@ -126,6 +126,43 @@
     </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) {
@@ -151,6 +188,43 @@
         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'});

supervaizer/admin/templates/agents_grid.html

@@ -33,7 +33,7 @@
                             </div>
                             {% endif %}
                             <div class="ml-3">
-                                <h3 class="text-lg font-medium text-gray-900">{{ agent.name }}</h3>
+                                <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>
@@ -56,10 +56,12 @@
                         </div>
                     </div>
                     <div class="mt-6 flex space-x-3">
-                        <button onclick="showAgentDetails('{{ agent.slug }}')" 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">
+                        {% 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="editAgent('{{ 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">
+                        <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>

supervaizer/admin/templates/job_start_test.html

@@ -0,0 +1,109 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="max-w-4xl mx-auto">
+    <div class="bg-white shadow rounded-lg p-6">
+        <h1 class="text-2xl font-bold text-gray-900 mb-6">Job Start Form Test</h1>
+
+        <!-- Validation Errors Container -->
+        <div id="validation-errors" class="mb-6"></div>
+
+        <!-- Agent Parameter Errors Container -->
+        <div id="agent-parameter-errors" class="mb-6"></div>
+
+        <!-- Job Start Form -->
+        <form data-job-start method="POST" class="space-y-6">
+            <!-- Job Fields -->
+            <div class="space-y-4">
+                <h3 class="text-lg font-medium text-gray-900">Job Parameters</h3>
+
+                <div>
+                    <label for="company_name" class="block text-sm font-medium text-gray-700">
+                        Company Name *
+                    </label>
+                    <input
+                        type="text"
+                        id="company_name"
+                        name="company_name"
+                        required
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        placeholder="Enter company name"
+                    >
+                </div>
+
+                <div>
+                    <label for="max_results" class="block text-sm font-medium text-gray-700">
+                        Max Results *
+                    </label>
+                    <input
+                        type="number"
+                        id="max_results"
+                        name="max_results"
+                        required
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        placeholder="Enter maximum results"
+                    >
+                </div>
+
+                <div>
+                    <label for="subscribe_updates" class="block text-sm font-medium text-gray-700">
+                        Subscribe to Updates
+                    </label>
+                    <input
+                        type="checkbox"
+                        id="subscribe_updates"
+                        name="subscribe_updates"
+                        class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    >
+                    <span class="ml-2 text-sm text-gray-600">Receive email updates about this job</span>
+                </div>
+            </div>
+
+            <!-- Hidden Fields for Testing -->
+            <input type="hidden" name="encrypted_agent_parameters" value="test_encrypted_params">
+            <input type="hidden" name="api_key" value="{{ api_key }}">
+
+            <!-- Submit Button -->
+            <div class="flex justify-end">
+                <button
+                    type="submit"
+                    class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                    Start Job
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    // Initialize JobStartForm when the page loads
+    document.addEventListener('DOMContentLoaded', function() {
+        // Wait for JobStartForm class to be available
+        function waitForJobStartForm() {
+            if (typeof window.JobStartForm !== 'undefined') {
+                console.log('JobStartForm class found, initializing...');
+
+                // Initialize the form with the current agent path
+                const form = new JobStartForm('/test-agent');
+
+                // Set up callbacks
+                form.setOnJobStarted(function(jobData) {
+                    console.log('Job started successfully:', jobData);
+                });
+
+                form.setOnJobError(function(error) {
+                    console.error('Job failed:', error);
+                });
+
+                console.log('JobStartForm initialized successfully');
+            } else {
+                console.log('JobStartForm class not ready yet, waiting...');
+                setTimeout(waitForJobStartForm, 100);
+            }
+        }
+
+        waitForJobStartForm();
+    });
+</script>
+{% endblock %}

supervaizer/admin/templates/navigation.html

@@ -83,6 +83,14 @@
                              class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
                              x-cloak>
                             <div class="py-1">
+                                <a href="https://doc.supervaize.com/docs/category/supervaizer-controller" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                                    Supervaizer Doc
+                                    <svg class="inline ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                    </svg>
+                                </a>
+                                <div class="border-t border-gray-200 my-1"></div>
+                                <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">API Documentation</div>
                                 <a href="/docs" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                     Swagger API
                                     <svg class="inline ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -110,7 +118,7 @@
 
             <!-- Right side -->
             <div class="flex items-center space-x-4">
-                <span class="text-sm text-gray-500">API {{ api_version }}</span>
+                <span class="text-sm text-gray-500">{{ api_version }}</span>
 
                 <!-- Mobile menu button -->
                 <button @click="mobileMenuOpen = !mobileMenuOpen" class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
@@ -142,6 +150,8 @@
             <!-- Documentation section -->
             <div class="pl-3 pr-4 py-2">
                 <div class="text-base font-medium text-gray-700 mb-2">Documentation</div>
+                <a href="https://doc.supervaize.com/docs/category/supervaizer-controller" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Supervaizer Controller</a>
+                <div class="pl-4 py-1 text-xs font-semibold text-gray-500 uppercase tracking-wider">API Documentation</div>
                 <a href="/docs" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Swagger API</a>
                 <a href="/redoc" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">ReDoc</a>
                 <a href="https://github.com/supervaize/supervaizer-controller" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Supervaizer GitHub</a>

supervaizer/admin/templates/supervaize_instructions.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Supervaize Instructions - {{ registration_info.name }}</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+        pre {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .json-key {
+            color: #0369a1;
+            font-weight: 600;
+        }
+        .json-string {
+            color: #059669;
+        }
+        .json-number {
+            color: #dc2626;
+        }
+        .json-boolean {
+            color: #7c3aed;
+        }
+        .json-null {
+            color: #6b7280;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        <!-- Header -->
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ registration_info.name }}</h1>
+            {% if registration_info.description %}
+            <p class="text-lg text-gray-600">{{ registration_info.description }}</p>
+            {% endif %}
+            {% if registration_info.version %}
+            <p class="text-sm text-gray-500 mt-2">Version: {{ registration_info.version }}</p>
+            {% endif %}
+        </div>
+
+        <!-- Basic Information -->
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h2 class="text-xl font-semibold text-gray-900 mb-4">Agent Information</h2>
+            <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {% if registration_info.id %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">ID</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.id }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.api_path %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">API Path</dt>
+                    <dd class="mt-1 text-sm text-gray-900 font-mono">{{ registration_info.api_path }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.author %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Author</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.author }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.developer %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Developer</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.developer }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.maintainer %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Maintainer</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.maintainer }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.editor %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Editor</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.editor }}</dd>
+                </div>
+                {% endif %}
+                {% if registration_info.max_execution_time %}
+                <div>
+                    <dt class="text-sm font-medium text-gray-500">Max Execution Time</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ registration_info.max_execution_time }} seconds</dd>
+                </div>
+                {% endif %}
+            </dl>
+        </div>
+
+        <!-- Tags -->
+        {% if registration_info.tags %}
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h2 class="text-xl font-semibold text-gray-900 mb-4">Tags</h2>
+            <div class="flex flex-wrap gap-2">
+                {% for tag in registration_info.tags %}
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                    {{ tag }}
+                </span>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+
+        <!-- Methods -->
+        {% if registration_info.methods %}
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h2 class="text-xl font-semibold text-gray-900 mb-4">Available Methods</h2>
+            <div class="space-y-4">
+                {% if registration_info.methods.job_start %}
+                <div class="border-l-4 border-green-500 pl-4">
+                    <h3 class="font-medium text-gray-900">Job Start</h3>
+                    {% if registration_info.methods.job_start.description %}
+                    <p class="text-sm text-gray-600 mt-1">{{ registration_info.methods.job_start.description }}</p>
+                    {% endif %}
+                </div>
+                {% endif %}
+                {% if registration_info.methods.job_stop %}
+                <div class="border-l-4 border-red-500 pl-4">
+                    <h3 class="font-medium text-gray-900">Job Stop</h3>
+                    {% if registration_info.methods.job_stop.description %}
+                    <p class="text-sm text-gray-600 mt-1">{{ registration_info.methods.job_stop.description }}</p>
+                    {% endif %}
+                </div>
+                {% endif %}
+                {% if registration_info.methods.job_status %}
+                <div class="border-l-4 border-blue-500 pl-4">
+                    <h3 class="font-medium text-gray-900">Job Status</h3>
+                    {% if registration_info.methods.job_status.description %}
+                    <p class="text-sm text-gray-600 mt-1">{{ registration_info.methods.job_status.description }}</p>
+                    {% endif %}
+                </div>
+                {% endif %}
+                {% if registration_info.methods.chat %}
+                <div class="border-l-4 border-purple-500 pl-4">
+                    <h3 class="font-medium text-gray-900">Chat</h3>
+                    {% if registration_info.methods.chat.description %}
+                    <p class="text-sm text-gray-600 mt-1">{{ registration_info.methods.chat.description }}</p>
+                    {% endif %}
+                </div>
+                {% endif %}
+                {% if registration_info.methods.custom %}
+                {% for method_name, method_info in registration_info.methods.custom.items() %}
+                <div class="border-l-4 border-yellow-500 pl-4">
+                    <h3 class="font-medium text-gray-900">{{ method_name }}</h3>
+                    {% if method_info.description %}
+                    <p class="text-sm text-gray-600 mt-1">{{ method_info.description }}</p>
+                    {% endif %}
+                </div>
+                {% endfor %}
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        <!-- Parameters Setup -->
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h2 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h2>
+            {% if registration_info.parameters_setup %}
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for param in registration_info.parameters_setup %}
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ param.name }}</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">{{ param.description or "-" }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                {% if param.is_secret %}
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Secret</span>
+                                {% else %}
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Standard</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                {% if param.is_required %}
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Required</span>
+                                {% else %}
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Optional</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <p class="text-sm text-gray-500">No parameters configured.</p>
+            {% endif %}
+        </div>
+
+        <!-- Custom instructions -->
+        <div class="bg-white shadow rounded-lg mb-6 p-6">
+            <h2 class="text-xl font-semibold text-gray-900 mb-4">Setup instructions</h2>
+            <div class="overflow-x-auto">
+                TBD
+            </div>
+        </div>
+    </div>
+</body>
+</html>