django-agent-studio 0.1.0__py3-none-any.whl

django_agent_studio/templates/django_agent_studio/builder.html

@@ -0,0 +1,1443 @@
+{% extends "django_agent_studio/base.html" %}
+
+{% block title %}{% if is_new %}Create Agent{% else %}Edit {{ agent.name }}{% endif %} - Agent Studio{% endblock %}
+
+{% block breadcrumbs %}
+<nav class="flex items-center space-x-2 ml-4 text-sm">
+    <span class="text-gray-400">/</span>
+    <a href="{% url 'agent_studio:agent_list' %}" class="text-gray-500 hover:text-gray-700">My Agents</a>
+    <span class="text-gray-400">/</span>
+    <span class="text-gray-600">{% if is_new %}New Agent{% else %}{{ agent.name }}{% endif %}</span>
+</nav>
+{% endblock %}
+
+{% block extra_head %}
+<style>
+    /* Embedded chat widget styles */
+    .chat-pane {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .chat-pane .chat-container {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+    }
+
+    /* Make chat widgets fill their containers */
+    #test-chat-container .cw-container,
+    #builder-chat-container .cw-container {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100% !important;
+        height: 100% !important;
+        max-height: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    #test-chat-container .cw-toggle-btn,
+    #builder-chat-container .cw-toggle-btn {
+        display: none !important;
+    }
+
+    #test-chat-container .cw-widget,
+    #builder-chat-container .cw-widget {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100% !important;
+        height: 100% !important;
+        max-height: none !important;
+        border-radius: 0 !important;
+        display: flex !important;
+    }
+
+    /* Schema Editor Modal Styles */
+    .schema-modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .schema-modal {
+        background: white;
+        border-radius: 0.75rem;
+        width: 100%;
+        max-width: 1200px;
+        height: 90vh;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    }
+
+    .schema-modal-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+    }
+
+    .schema-modal-body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .schema-tabs {
+        display: flex;
+        border-bottom: 1px solid #e5e7eb;
+        padding: 0 1rem;
+        flex-shrink: 0;
+    }
+
+    .schema-tab {
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        color: #6b7280;
+        font-size: 0.875rem;
+        font-weight: 500;
+        transition: all 0.15s;
+    }
+
+    .schema-tab:hover {
+        color: #374151;
+    }
+
+    .schema-tab.active {
+        color: #3b82f6;
+        border-bottom-color: #3b82f6;
+    }
+
+    .schema-content {
+        flex: 1;
+        overflow: auto;
+        padding: 1rem;
+    }
+
+    .schema-editor {
+        width: 100%;
+        height: 100%;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 13px;
+        line-height: 1.5;
+        padding: 1rem;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        resize: none;
+        background: #1e1e1e;
+        color: #d4d4d4;
+    }
+
+    .schema-editor:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .schema-modal-footer {
+        padding: 1rem 1.5rem;
+        border-top: 1px solid #e5e7eb;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+        background: #f9fafb;
+        border-radius: 0 0 0.75rem 0.75rem;
+    }
+
+    .schema-status {
+        font-size: 0.875rem;
+        color: #6b7280;
+    }
+
+    .schema-status.error {
+        color: #dc2626;
+    }
+
+    .schema-status.success {
+        color: #16a34a;
+    }
+
+    .btn-group {
+        display: flex;
+        gap: 0.5rem;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="h-full flex flex-col">
+    <!-- Top Bar: Agent Selector -->
+    <div class="px-4 py-2 bg-white border-b border-gray-200 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <!-- Agent Selector -->
+            <div class="flex items-center space-x-2">
+                <label class="text-sm font-medium text-gray-600">Agent:</label>
+                <select v-model="selectedAgentId"
+                        @change="onAgentChange"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-[200px]">
+                    <option value="">-- Select an agent --</option>
+                    <option v-for="agent in agents" :key="agent.id" :value="agent.id">
+                        [[ agent.icon || '🤖' ]] [[ agent.name ]]
+                    </option>
+                </select>
+                <button @click="createNewAgent"
+                        class="px-3 py-1.5 text-sm text-green-600 border border-green-300 rounded hover:bg-green-50"
+                        title="Create new agent">
+                    <span>+ New</span>
+                </button>
+                <button v-if="selectedAgentId"
+                        @click="deleteAgent"
+                        class="px-2 py-1.5 text-sm text-red-600 border border-red-300 rounded hover:bg-red-50"
+                        title="Delete this agent">
+                    <span>🗑️</span>
+                </button>
+            </div>
+
+            <!-- Version Selector (shown when agent selected) -->
+            <div v-if="selectedAgentId && versions.length > 0" class="flex items-center space-x-2 border-l border-gray-200 pl-4">
+                <label class="text-sm font-medium text-gray-600">Version:</label>
+                <select v-model="selectedVersionId"
+                        @change="onVersionChange"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option v-for="version in versions" :key="version.id" :value="version.id">
+                        [[ version.version ]] [[ version.is_active ? '(active)' : '' ]] [[ version.is_draft ? '(draft)' : '' ]]
+                    </option>
+                </select>
+                <button v-if="selectedVersionId && !isActiveVersion"
+                        @click="activateVersion"
+                        class="px-2 py-1 text-xs text-blue-600 border border-blue-300 rounded hover:bg-blue-50"
+                        title="Make this version active">
+                    Activate
+                </button>
+            </div>
+
+            <!-- Systems Selector -->
+            <div class="flex items-center space-x-2 border-l border-gray-200 pl-4">
+                <label class="text-sm font-medium text-gray-600">System:</label>
+                <select v-model="selectedSystemId"
+                        @change="onSystemChange"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[180px]">
+                    <option value="">-- No system --</option>
+                    <option v-for="system in systems" :key="system.id" :value="system.id">
+                        🔗 [[ system.name ]]
+                    </option>
+                </select>
+                <button @click="openSystemsModal"
+                        class="px-2 py-1.5 text-sm text-purple-600 border border-purple-300 rounded hover:bg-purple-50"
+                        title="Manage multi-agent systems">
+                    <span>⚙️</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Agent Info & Actions -->
+        <div class="flex items-center space-x-3">
+            <div v-if="selectedAgent" class="text-sm text-gray-500">
+                <span class="font-mono text-xs bg-gray-100 px-2 py-0.5 rounded">[[ selectedAgent.slug ]]</span>
+            </div>
+            <button @click="openSchemaEditor"
+                    class="flex items-center space-x-1 px-2 py-1 text-sm rounded border"
+                    :class="selectedAgentId ? 'text-blue-600 border-blue-300 hover:bg-blue-50 hover:border-blue-400' : 'text-gray-400 border-gray-200 cursor-not-allowed'"
+                    title="Edit Agent Schema (JSON)"
+                    :disabled="!selectedAgentId">
+                <span>📋</span>
+                <span>Schema</span>
+            </button>
+            <button @click="loadAgents"
+                    class="text-gray-500 hover:text-gray-700 p-1.5 rounded hover:bg-gray-100"
+                    title="Refresh agent list">
+                <i class="pi pi-refresh"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex overflow-hidden">
+        <!-- Left Pane: Test Your Agent -->
+        <div class="w-1/2 border-r border-gray-200 flex flex-col">
+            <div class="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
+                <div class="flex items-center space-x-2">
+                    <span class="text-lg">🧪</span>
+                    <h2 class="font-medium text-gray-700">Test Your Agent</h2>
+                </div>
+                <button @click="refreshTestAgent"
+                        class="text-gray-500 hover:text-gray-700 p-1 rounded hover:bg-gray-200"
+                        title="Refresh agent config">
+                    <i class="pi pi-refresh text-sm"></i>
+                </button>
+            </div>
+            <div class="flex-1 relative bg-gray-100">
+                <div id="test-chat-container" class="absolute inset-0"></div>
+            </div>
+        </div>
+
+        <!-- Right Pane: Builder Agent -->
+        <div class="w-1/2 flex flex-col">
+            <div class="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
+                <div class="flex items-center space-x-2">
+                    <span class="text-lg">🛠️</span>
+                    <h2 class="font-medium text-gray-700">Agent Builder</h2>
+                </div>
+                <span class="text-xs text-gray-500">Chat with the builder to customize your agent</span>
+            </div>
+            <div class="flex-1 relative bg-gray-50">
+                <div id="builder-chat-container" class="absolute inset-0"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Schema Editor Modal -->
+<div v-if="schemaEditorOpen" class="schema-modal-overlay" @click.self="closeSchemaEditor">
+    <div class="schema-modal">
+        <div class="schema-modal-header">
+            <div class="flex items-center space-x-3">
+                <span class="text-xl">📋</span>
+                <div>
+                    <h3 class="text-lg font-semibold text-gray-800">Agent Schema Editor</h3>
+                    <p class="text-sm text-gray-500">View and edit the complete agent configuration</p>
+                </div>
+            </div>
+            <div class="flex items-center space-x-2">
+                <button @click="reloadSchema"
+                        class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded"
+                        :disabled="schemaLoading"
+                        title="Reload schema from server">
+                    <i class="pi pi-refresh" :class="{'pi-spin': schemaLoading}"></i>
+                    <span class="ml-1">Reload</span>
+                </button>
+                <button @click="closeSchemaEditor"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                    <i class="pi pi-times text-lg"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="schema-tabs">
+            <div class="schema-tab" :class="{active: schemaTab === 'full'}" @click="schemaTab = 'full'">
+                Full Schema
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'version'}" @click="schemaTab = 'version'">
+                Version Config
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'tools'}" @click="schemaTab = 'tools'">
+                Tools
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'dynamic_tools'}" @click="schemaTab = 'dynamic_tools'">
+                Dynamic Tools
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'sub_agents'}" @click="schemaTab = 'sub_agents'">
+                🔗 Sub-Agents
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'knowledge'}" @click="schemaTab = 'knowledge'">
+                Knowledge
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'rag'}" @click="schemaTab = 'rag'">
+                RAG Config
+            </div>
+            <div class="schema-tab" :class="{active: schemaTab === 'functions'}" @click="schemaTab = 'functions'">
+                Available Functions
+            </div>
+        </div>
+
+        <div class="schema-modal-body">
+            <div class="schema-content">
+                <textarea
+                    v-if="schemaTab === 'full'"
+                    class="schema-editor"
+                    v-model="schemaJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'version'"
+                    class="schema-editor"
+                    v-model="versionJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'tools'"
+                    class="schema-editor"
+                    v-model="toolsJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'dynamic_tools'"
+                    class="schema-editor"
+                    v-model="dynamicToolsJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'sub_agents'"
+                    class="schema-editor"
+                    v-model="subAgentToolsJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'knowledge'"
+                    class="schema-editor"
+                    v-model="knowledgeJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'rag'"
+                    class="schema-editor"
+                    v-model="ragConfigJson"
+                    @input="validateSchema"
+                    spellcheck="false"
+                ></textarea>
+                <textarea
+                    v-else-if="schemaTab === 'functions'"
+                    class="schema-editor"
+                    v-model="functionsJson"
+                    readonly
+                    spellcheck="false"
+                ></textarea>
+            </div>
+        </div>
+
+        <div class="schema-modal-footer">
+            <div class="schema-status" :class="{error: schemaError, success: schemaSaved}">
+                <span v-if="schemaLoading"><i class="pi pi-spin pi-spinner"></i> Loading...</span>
+                <span v-else-if="schemaError"><i class="pi pi-exclamation-triangle"></i> [[ schemaError ]]</span>
+                <span v-else-if="schemaSaved"><i class="pi pi-check"></i> Saved successfully</span>
+                <span v-else-if="schemaModified"><i class="pi pi-pencil"></i> Modified (unsaved)</span>
+                <span v-else>Last loaded: [[ schemaLoadedAt ]]</span>
+            </div>
+            <div class="btn-group">
+                <button @click="copySchema"
+                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded hover:bg-gray-50">
+                    <i class="pi pi-copy mr-1"></i> Copy
+                </button>
+                <button @click="closeSchemaEditor"
+                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded hover:bg-gray-50">
+                    Cancel
+                </button>
+                <button @click="saveSchema"
+                        class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded"
+                        :disabled="schemaLoading || !!schemaError || schemaTab === 'functions'">
+                    <i class="pi pi-save mr-1"></i> Save Changes
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Systems Management Modal -->
+<div v-if="systemsModalOpen" class="schema-modal-overlay" @click.self="closeSystemsModal">
+    <div class="schema-modal" style="max-width: 900px; height: 80vh;">
+        <div class="schema-modal-header">
+            <div class="flex items-center space-x-3">
+                <span class="text-xl">🔗</span>
+                <div>
+                    <h3 class="text-lg font-semibold text-gray-800">Multi-Agent Systems</h3>
+                    <p class="text-sm text-gray-500">Manage agent systems and their members</p>
+                </div>
+            </div>
+            <div class="flex items-center space-x-2">
+                <button @click="loadSystems"
+                        class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded"
+                        :disabled="systemsLoading"
+                        title="Refresh systems">
+                    <i class="pi pi-refresh" :class="{'pi-spin': systemsLoading}"></i>
+                </button>
+                <button @click="closeSystemsModal"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                    <i class="pi pi-times text-lg"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="schema-modal-body" style="padding: 1rem;">
+            <!-- Create New System -->
+            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                <h4 class="text-sm font-medium text-gray-700 mb-3">Create New System</h4>
+                <div class="flex items-end space-x-3">
+                    <div class="flex-1">
+                        <label class="block text-xs text-gray-500 mb-1">Name</label>
+                        <input v-model="newSystemName"
+                               type="text"
+                               placeholder="e.g., Customer Support"
+                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    </div>
+                    <div class="flex-1">
+                        <label class="block text-xs text-gray-500 mb-1">Slug</label>
+                        <input v-model="newSystemSlug"
+                               type="text"
+                               placeholder="e.g., customer-support"
+                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    </div>
+                    <div>
+                        <label class="block text-xs text-gray-500 mb-1">Entry Agent</label>
+                        <select v-model="newSystemEntryAgent"
+                                class="px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
+                            <option value="">-- Select --</option>
+                            <option v-for="agent in agents" :key="agent.id" :value="agent.id">
+                                [[ agent.name ]]
+                            </option>
+                        </select>
+                    </div>
+                    <button @click="createSystem"
+                            :disabled="!newSystemName || !newSystemSlug"
+                            class="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded disabled:opacity-50 disabled:cursor-not-allowed">
+                        Create
+                    </button>
+                </div>
+            </div>
+
+            <!-- Systems List -->
+            <div class="space-y-3 overflow-y-auto" style="max-height: calc(80vh - 280px);">
+                <div v-if="systemsLoading" class="text-center py-8 text-gray-500">
+                    <i class="pi pi-spin pi-spinner text-2xl"></i>
+                    <p class="mt-2">Loading systems...</p>
+                </div>
+                <div v-else-if="systems.length === 0" class="text-center py-8 text-gray-500">
+                    <span class="text-4xl">🔗</span>
+                    <p class="mt-2">No systems yet. Create one above!</p>
+                </div>
+                <div v-else v-for="system in systems" :key="system.id"
+                     class="p-4 bg-white border border-gray-200 rounded-lg hover:border-purple-300 transition-colors">
+                    <div class="flex items-start justify-between">
+                        <div class="flex-1">
+                            <div class="flex items-center space-x-2">
+                                <h4 class="font-medium text-gray-800">[[ system.name ]]</h4>
+                                <span class="text-xs font-mono bg-gray-100 px-2 py-0.5 rounded">[[ system.slug ]]</span>
+                            </div>
+                            <p class="text-sm text-gray-500 mt-1">[[ system.description || 'No description' ]]</p>
+                            <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500">
+                                <span v-if="system.entry_agent_slug">
+                                    Entry: <span class="font-mono">[[ system.entry_agent_slug ]]</span>
+                                </span>
+                                <span>[[ system.member_count || 0 ]] members</span>
+                                <span v-if="system.active_version">
+                                    Active: v[[ system.active_version ]]
+                                </span>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <button @click="viewSystemDetails(system)"
+                                    class="px-3 py-1.5 text-xs text-purple-600 border border-purple-300 rounded hover:bg-purple-50">
+                                Details
+                            </button>
+                            <button @click="publishSystem(system)"
+                                    class="px-3 py-1.5 text-xs text-green-600 border border-green-300 rounded hover:bg-green-50">
+                                Publish
+                            </button>
+                            <button @click="deleteSystem(system)"
+                                    class="px-3 py-1.5 text-xs text-red-600 border border-red-300 rounded hover:bg-red-50">
+                                Delete
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- System Members (expandable) -->
+                    <div v-if="expandedSystemId === system.id" class="mt-4 pt-4 border-t border-gray-100">
+                        <div class="flex items-center justify-between mb-2">
+                            <h5 class="text-sm font-medium text-gray-700">Members</h5>
+                            <button @click="addMemberToSystem(system)"
+                                    class="text-xs text-purple-600 hover:text-purple-800">
+                                + Add Member
+                            </button>
+                        </div>
+                        <div v-if="system.members && system.members.length > 0" class="space-y-2">
+                            <div v-for="member in system.members" :key="member.id"
+                                 class="flex items-center justify-between p-2 bg-gray-50 rounded text-sm">
+                                <div class="flex items-center space-x-2">
+                                    <span>[[ member.agent_name ]]</span>
+                                    <span class="text-xs font-mono text-gray-500">([[ member.agent_slug ]])</span>
+                                    <span v-if="member.role" class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">
+                                        [[ member.role ]]
+                                    </span>
+                                    <span v-if="member.is_entry_point" class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">
+                                        Entry Point
+                                    </span>
+                                </div>
+                                <button @click="removeMemberFromSystem(system, member)"
+                                        class="text-red-500 hover:text-red-700">
+                                    <i class="pi pi-times text-xs"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div v-else class="text-sm text-gray-500 italic">No members yet</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="schema-modal-footer">
+            <div class="text-sm text-gray-500">
+                [[ systems.length ]] system(s)
+            </div>
+            <button @click="closeSystemsModal"
+                    class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded hover:bg-gray-50">
+                Close
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div v-if="deleteConfirmOpen" class="schema-modal-overlay" @click.self="cancelDelete">
+    <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full">
+        <div class="flex items-center space-x-3 mb-4">
+            <span class="text-3xl">⚠️</span>
+            <div>
+                <h3 class="text-lg font-semibold text-gray-800">Confirm Delete</h3>
+                <p class="text-sm text-gray-500">[[ deleteConfirmMessage ]]</p>
+            </div>
+        </div>
+        <div class="flex justify-end space-x-3">
+            <button @click="cancelDelete"
+                    class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50">
+                Cancel
+            </button>
+            <button @click="confirmDelete"
+                    class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded">
+                Delete
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const { createApp } = Vue;
+
+// Agent configuration from Django
+const agentConfig = {
+    isNew: {{ is_new|yesno:"true,false" }},
+    agentId: {% if agent %}"{{ agent.id }}"{% else %}null{% endif %},
+    agentSlug: {% if agent %}"{{ agent.slug }}"{% else %}null{% endif %},
+    builderAgentKey: "{{ builder_agent_key }}",
+};
+
+// Backend URL (same origin)
+const backendUrl = window.location.origin;
+
+// Initialize the test agent chat widget
+function initTestChat(agentSlug = null) {
+    const container = document.getElementById('test-chat-container');
+    if (!container) return;  // Container not ready yet
+
+    // Use passed slug or fall back to agentConfig
+    const slugToUse = agentSlug || agentConfig.agentSlug;
+
+    if (!slugToUse) {
+        // Show placeholder for new agents
+        container.innerHTML = `
+            <div class="flex items-center justify-center h-full text-gray-500">
+                <div class="text-center">
+                    <div class="text-4xl mb-4">🤖</div>
+                    <p>Select an agent above to test it</p>
+                    <p class="text-sm mt-2">Or create a new one with the "+ New" button</p>
+                </div>
+            </div>
+        `;
+        return;
+    }
+
+    // Create a unique instance for the test chat
+    if (window.testChatWidget) {
+        window.testChatWidget.destroy();
+    }
+
+    window.testChatWidget = ChatWidget.createInstance({
+        containerId: 'test-chat-container',
+        backendUrl: backendUrl,
+        agentKey: slugToUse,
+        title: 'Test Agent',
+        primaryColor: '#3b82f6',
+        showClearButton: true,
+        showDebugButton: true,
+        showExpandButton: false,
+        showModelSelector: true,
+        embedded: true,
+        authStrategy: 'session',
+        apiPaths: {
+            runs: '/api/agent-runtime/runs/',
+            runEvents: '/api/agent-runtime/runs/{runId}/events/',
+            models: '/api/agent-runtime/models/',
+        },
+    });
+}
+
+// Initialize the builder agent chat widget
+function initBuilderChat(targetAgentId = null, vueApp = null) {
+    const container = document.getElementById('builder-chat-container');
+    if (!container) return;  // Container not ready yet
+
+    if (window.builderChatWidget) {
+        window.builderChatWidget.destroy();
+    }
+
+    // Use passed agent ID or fall back to agentConfig
+    const agentIdToUse = targetAgentId || agentConfig.agentId;
+
+    window.builderChatWidget = ChatWidget.createInstance({
+        containerId: 'builder-chat-container',
+        backendUrl: backendUrl,
+        agentKey: agentConfig.builderAgentKey,
+        title: 'Agent Builder',
+        primaryColor: '#8b5cf6',
+        showClearButton: true,
+        showDebugButton: true,
+        showExpandButton: false,
+        showModelSelector: true,
+        embedded: true,
+        authStrategy: 'session',
+        apiPaths: {
+            runs: '/api/agent-runtime/runs/',
+            runEvents: '/api/agent-runtime/runs/{runId}/events/',
+            models: '/api/agent-runtime/models/',
+        },
+        // Pass the agent ID to the builder agent
+        metadata: {
+            agent_id: agentIdToUse,
+        },
+        // Handle UI control events from the builder agent
+        onUIControl: (payload) => {
+            console.log('[Builder] UI Control event:', payload);
+            if (vueApp && payload.action) {
+                switch (payload.action) {
+                    case 'switch_agent':
+                        // Switch to a different agent
+                        if (payload.agent_id) {
+                            vueApp.selectedAgentId = payload.agent_id;
+                            vueApp.onAgentChange();
+                        }
+                        break;
+                    case 'switch_system':
+                        // Switch to a different system
+                        if (payload.system_id) {
+                            vueApp.selectedSystemId = payload.system_id;
+                            vueApp.onSystemChange();
+                        }
+                        break;
+                }
+            }
+        },
+        // Handle events for debugging/logging
+        onEvent: (eventType, payload) => {
+            // Log sub-agent events for visibility
+            if (eventType === 'sub_agent.start' || eventType === 'sub_agent.end') {
+                console.log(`[Builder] ${eventType}:`, payload);
+            }
+        },
+    });
+}
+
+createApp({
+    delimiters: ['[[', ']]'],  // Avoid conflict with Django templates
+    data() {
+        return {
+            agentConfig,
+            // Agent/version selection
+            agents: [],
+            versions: [],
+            selectedAgentId: agentConfig.agentId || '',
+            selectedVersionId: '',
+            // Schema editor state
+            schemaEditorOpen: false,
+            schemaTab: 'full',
+            schemaLoading: false,
+            schemaError: null,
+            schemaSaved: false,
+            schemaModified: false,
+            schemaLoadedAt: null,
+            // Schema data
+            fullSchema: null,
+            schemaJson: '',
+            versionJson: '',
+            toolsJson: '',
+            dynamicToolsJson: '',
+            subAgentToolsJson: '',
+            knowledgeJson: '',
+            ragConfigJson: '',
+            functionsJson: '',
+            // Systems management
+            systems: [],
+            selectedSystemId: '',
+            systemsModalOpen: false,
+            systemsLoading: false,
+            expandedSystemId: null,
+            newSystemName: '',
+            newSystemSlug: '',
+            newSystemEntryAgent: '',
+            // Delete confirmation
+            deleteConfirmOpen: false,
+            deleteConfirmMessage: '',
+            deleteConfirmCallback: null,
+        }
+    },
+    computed: {
+        selectedAgent() {
+            return this.agents.find(a => a.id === this.selectedAgentId);
+        },
+        isActiveVersion() {
+            const version = this.versions.find(v => v.id === this.selectedVersionId);
+            return version && version.is_active;
+        },
+    },
+    methods: {
+        async loadAgents() {
+            try {
+                const response = await fetch('/studio/api/agents/', {
+                    credentials: 'include',
+                    headers: { 'Accept': 'application/json' },
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    // Handle paginated response (results array) or direct array
+                    const agentList = Array.isArray(data) ? data : (data.results || []);
+                    // Filter out any agents without valid IDs
+                    this.agents = agentList.filter(a => a && a.id);
+                    // If we have a pre-selected agent, load its versions
+                    if (this.selectedAgentId) {
+                        await this.loadVersions();
+                    }
+                }
+            } catch (error) {
+                console.error('Error loading agents:', error);
+            }
+        },
+
+        async loadVersions() {
+            if (!this.selectedAgentId) {
+                this.versions = [];
+                return;
+            }
+            try {
+                const response = await fetch(`/studio/api/agents/${this.selectedAgentId}/versions/`, {
+                    credentials: 'include',
+                    headers: { 'Accept': 'application/json' },
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    // Handle paginated response (results array) or direct array
+                    this.versions = Array.isArray(data) ? data : (data.results || []);
+                    // Select the active version by default
+                    const activeVersion = this.versions.find(v => v.is_active);
+                    if (activeVersion) {
+                        this.selectedVersionId = activeVersion.id;
+                    } else if (this.versions.length > 0) {
+                        this.selectedVersionId = this.versions[0].id;
+                    }
+                }
+            } catch (error) {
+                console.error('Error loading versions:', error);
+            }
+        },
+
+        async onAgentChange() {
+            // Update the agentConfig for chat widgets
+            const agent = this.selectedAgent;
+            if (agent) {
+                this.agentConfig.agentId = agent.id;
+                this.agentConfig.agentSlug = agent.slug;
+                // Update URL without reload
+                window.history.replaceState({}, '', `/studio/agents/${agent.id}/`);
+            } else {
+                this.agentConfig.agentId = null;
+                this.agentConfig.agentSlug = null;
+                window.history.replaceState({}, '', '/studio/agents/new/');
+            }
+
+            // Load versions for the new agent
+            await this.loadVersions();
+
+            // Reinitialize chat widgets
+            this.refreshTestAgent();
+            this.refreshBuilderChat();
+        },
+
+        async onVersionChange() {
+            // Version change might affect the test agent behavior
+            // For now, just refresh the test chat
+            this.refreshTestAgent();
+        },
+
+        async activateVersion() {
+            if (!this.selectedAgentId || !this.selectedVersionId) return;
+
+            try {
+                const response = await fetch(
+                    `/studio/api/agents/${this.selectedAgentId}/versions/${this.selectedVersionId}/activate/`,
+                    {
+                        method: 'POST',
+                        credentials: 'include',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRFToken': this.getCsrfToken(),
+                        },
+                    }
+                );
+                if (response.ok) {
+                    await this.loadVersions();
+                    this.refreshTestAgent();
+                }
+            } catch (error) {
+                console.error('Error activating version:', error);
+            }
+        },
+
+        async createNewAgent() {
+            const name = prompt('Enter a name for the new agent:');
+            if (!name) return;
+
+            const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+
+            try {
+                const response = await fetch('/studio/api/agents/', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                    body: JSON.stringify({ name, slug }),
+                });
+
+                if (response.ok) {
+                    const newAgent = await response.json();
+                    await this.loadAgents();
+                    this.selectedAgentId = newAgent.id;
+                    await this.onAgentChange();
+                } else {
+                    const error = await response.json();
+                    alert(`Failed to create agent: ${error.detail || error.slug || JSON.stringify(error)}`);
+                }
+            } catch (error) {
+                console.error('Error creating agent:', error);
+                alert('Failed to create agent');
+            }
+        },
+
+        refreshTestAgent() {
+            const agent = this.selectedAgent;
+            initTestChat(agent ? agent.slug : null);
+        },
+
+        refreshBuilderChat() {
+            initBuilderChat(this.selectedAgentId, this);
+        },
+
+        async openSchemaEditor() {
+            if (!this.selectedAgentId) return;
+            this.schemaEditorOpen = true;
+            await this.reloadSchema();
+        },
+
+        closeSchemaEditor() {
+            this.schemaEditorOpen = false;
+            this.schemaError = null;
+            this.schemaSaved = false;
+            this.schemaModified = false;
+        },
+
+        async reloadSchema() {
+            if (!this.selectedAgentId) return;
+
+            this.schemaLoading = true;
+            this.schemaError = null;
+            this.schemaSaved = false;
+            this.schemaModified = false;
+
+            try {
+                const response = await fetch(`/studio/api/agents/${this.selectedAgentId}/full-schema/`, {
+                    credentials: 'include',
+                    headers: {
+                        'Accept': 'application/json',
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to load schema: ${response.status}`);
+                }
+
+                this.fullSchema = await response.json();
+                this.schemaLoadedAt = new Date().toLocaleTimeString();
+
+                // Update individual JSON views
+                this.updateJsonViews();
+
+            } catch (error) {
+                console.error('Error loading schema:', error);
+                this.schemaError = error.message;
+            } finally {
+                this.schemaLoading = false;
+            }
+        },
+
+        updateJsonViews() {
+            if (!this.fullSchema) return;
+
+            this.schemaJson = JSON.stringify(this.fullSchema, null, 2);
+            this.versionJson = JSON.stringify(this.fullSchema.version || {}, null, 2);
+            this.toolsJson = JSON.stringify(this.fullSchema.tools || [], null, 2);
+            this.dynamicToolsJson = JSON.stringify(this.fullSchema.dynamic_tools || [], null, 2);
+            this.subAgentToolsJson = JSON.stringify(this.fullSchema.sub_agent_tools || [], null, 2);
+            this.knowledgeJson = JSON.stringify(this.fullSchema.knowledge || [], null, 2);
+            this.ragConfigJson = JSON.stringify(this.fullSchema.rag_config || {}, null, 2);
+            this.functionsJson = JSON.stringify(this.fullSchema.available_functions || [], null, 2);
+        },
+
+        validateSchema() {
+            this.schemaModified = true;
+            this.schemaSaved = false;
+            this.schemaError = null;
+
+            try {
+                // Validate current tab's JSON
+                switch (this.schemaTab) {
+                    case 'full':
+                        JSON.parse(this.schemaJson);
+                        break;
+                    case 'version':
+                        JSON.parse(this.versionJson);
+                        break;
+                    case 'tools':
+                        JSON.parse(this.toolsJson);
+                        break;
+                    case 'dynamic_tools':
+                        JSON.parse(this.dynamicToolsJson);
+                        break;
+                    case 'sub_agents':
+                        JSON.parse(this.subAgentToolsJson);
+                        break;
+                    case 'knowledge':
+                        JSON.parse(this.knowledgeJson);
+                        break;
+                    case 'rag':
+                        JSON.parse(this.ragConfigJson);
+                        break;
+                }
+            } catch (e) {
+                this.schemaError = `Invalid JSON: ${e.message}`;
+            }
+        },
+
+        async saveSchema() {
+            if (this.schemaError || this.schemaTab === 'functions') return;
+
+            this.schemaLoading = true;
+            this.schemaError = null;
+
+            try {
+                // Build the update payload based on current tab
+                let payload = {};
+
+                switch (this.schemaTab) {
+                    case 'full':
+                        payload = JSON.parse(this.schemaJson);
+                        break;
+                    case 'version':
+                        payload = { version: JSON.parse(this.versionJson) };
+                        break;
+                    case 'tools':
+                        payload = { tools: JSON.parse(this.toolsJson) };
+                        break;
+                    case 'dynamic_tools':
+                        payload = { dynamic_tools: JSON.parse(this.dynamicToolsJson) };
+                        break;
+                    case 'sub_agents':
+                        payload = { sub_agent_tools: JSON.parse(this.subAgentToolsJson) };
+                        break;
+                    case 'knowledge':
+                        payload = { knowledge: JSON.parse(this.knowledgeJson) };
+                        break;
+                    case 'rag':
+                        payload = { rag_config: JSON.parse(this.ragConfigJson) };
+                        break;
+                }
+
+                const response = await fetch(`/studio/api/agents/${this.selectedAgentId}/full-schema/`, {
+                    method: 'PUT',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                    body: JSON.stringify(payload),
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || error.message || `Failed to save: ${response.status}`);
+                }
+
+                this.schemaSaved = true;
+                this.schemaModified = false;
+
+                // Reload to get the updated schema
+                setTimeout(() => {
+                    this.reloadSchema();
+                }, 1000);
+
+            } catch (error) {
+                console.error('Error saving schema:', error);
+                this.schemaError = error.message;
+            } finally {
+                this.schemaLoading = false;
+            }
+        },
+
+        async copySchema() {
+            let textToCopy = '';
+            switch (this.schemaTab) {
+                case 'full':
+                    textToCopy = this.schemaJson;
+                    break;
+                case 'version':
+                    textToCopy = this.versionJson;
+                    break;
+                case 'tools':
+                    textToCopy = this.toolsJson;
+                    break;
+                case 'dynamic_tools':
+                    textToCopy = this.dynamicToolsJson;
+                    break;
+                case 'sub_agents':
+                    textToCopy = this.subAgentToolsJson;
+                    break;
+                case 'knowledge':
+                    textToCopy = this.knowledgeJson;
+                    break;
+                case 'rag':
+                    textToCopy = this.ragConfigJson;
+                    break;
+                case 'functions':
+                    textToCopy = this.functionsJson;
+                    break;
+            }
+
+            try {
+                await navigator.clipboard.writeText(textToCopy);
+                // Could show a toast here
+            } catch (e) {
+                console.error('Failed to copy:', e);
+            }
+        },
+
+        // ==========================================================================
+        // Delete Agent Methods
+        // ==========================================================================
+
+        async deleteAgent() {
+            if (!this.selectedAgentId) return;
+            const agent = this.selectedAgent;
+            if (!agent) return;
+
+            this.deleteConfirmMessage = `Are you sure you want to delete "${agent.name}"? This action cannot be undone.`;
+            this.deleteConfirmCallback = async () => {
+                try {
+                    const response = await fetch(`/studio/api/agents/${this.selectedAgentId}/`, {
+                        method: 'DELETE',
+                        credentials: 'include',
+                        headers: {
+                            'X-CSRFToken': this.getCsrfToken(),
+                        },
+                    });
+
+                    if (response.ok || response.status === 204) {
+                        this.selectedAgentId = '';
+                        this.agentConfig.agentId = null;
+                        this.agentConfig.agentSlug = null;
+                        window.history.replaceState({}, '', '/studio/agents/new/');
+                        await this.loadAgents();
+                        this.refreshTestAgent();
+                        this.refreshBuilderChat();
+                    } else {
+                        const error = await response.json();
+                        alert(`Failed to delete agent: ${error.detail || JSON.stringify(error)}`);
+                    }
+                } catch (error) {
+                    console.error('Error deleting agent:', error);
+                    alert('Failed to delete agent');
+                }
+            };
+            this.deleteConfirmOpen = true;
+        },
+
+        // ==========================================================================
+        // Systems Management Methods
+        // ==========================================================================
+
+        async loadSystems() {
+            this.systemsLoading = true;
+            try {
+                const response = await fetch('/studio/api/systems/', {
+                    credentials: 'include',
+                    headers: { 'Accept': 'application/json' },
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    this.systems = Array.isArray(data) ? data : (data.results || []);
+                }
+            } catch (error) {
+                console.error('Error loading systems:', error);
+            } finally {
+                this.systemsLoading = false;
+            }
+        },
+
+        onSystemChange() {
+            // Could filter agents by system or show system-specific info
+            console.log('Selected system:', this.selectedSystemId);
+        },
+
+        openSystemsModal() {
+            this.systemsModalOpen = true;
+            this.loadSystems();
+        },
+
+        closeSystemsModal() {
+            this.systemsModalOpen = false;
+            this.expandedSystemId = null;
+        },
+
+        async createSystem() {
+            if (!this.newSystemName || !this.newSystemSlug) return;
+
+            try {
+                const payload = {
+                    name: this.newSystemName,
+                    slug: this.newSystemSlug,
+                };
+                if (this.newSystemEntryAgent) {
+                    payload.entry_agent = this.newSystemEntryAgent;
+                }
+
+                const response = await fetch('/studio/api/systems/', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                    body: JSON.stringify(payload),
+                });
+
+                if (response.ok) {
+                    this.newSystemName = '';
+                    this.newSystemSlug = '';
+                    this.newSystemEntryAgent = '';
+                    await this.loadSystems();
+                } else {
+                    const error = await response.json();
+                    alert(`Failed to create system: ${error.detail || error.slug || JSON.stringify(error)}`);
+                }
+            } catch (error) {
+                console.error('Error creating system:', error);
+                alert('Failed to create system');
+            }
+        },
+
+        viewSystemDetails(system) {
+            if (this.expandedSystemId === system.id) {
+                this.expandedSystemId = null;
+            } else {
+                this.expandedSystemId = system.id;
+                this.loadSystemMembers(system);
+            }
+        },
+
+        async loadSystemMembers(system) {
+            try {
+                const response = await fetch(`/studio/api/systems/${system.id}/members/`, {
+                    credentials: 'include',
+                    headers: { 'Accept': 'application/json' },
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    const members = Array.isArray(data) ? data : (data.results || []);
+                    // Update the system in our list with members
+                    const idx = this.systems.findIndex(s => s.id === system.id);
+                    if (idx !== -1) {
+                        this.systems[idx] = { ...this.systems[idx], members };
+                    }
+                }
+            } catch (error) {
+                console.error('Error loading system members:', error);
+            }
+        },
+
+        async publishSystem(system) {
+            try {
+                const response = await fetch(`/studio/api/systems/${system.id}/publish/`, {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                });
+
+                if (response.ok) {
+                    alert('System version published successfully!');
+                    await this.loadSystems();
+                } else {
+                    const error = await response.json();
+                    alert(`Failed to publish: ${error.detail || JSON.stringify(error)}`);
+                }
+            } catch (error) {
+                console.error('Error publishing system:', error);
+                alert('Failed to publish system');
+            }
+        },
+
+        async deleteSystem(system) {
+            this.deleteConfirmMessage = `Are you sure you want to delete system "${system.name}"? This action cannot be undone.`;
+            this.deleteConfirmCallback = async () => {
+                try {
+                    const response = await fetch(`/studio/api/systems/${system.id}/`, {
+                        method: 'DELETE',
+                        credentials: 'include',
+                        headers: {
+                            'X-CSRFToken': this.getCsrfToken(),
+                        },
+                    });
+
+                    if (response.ok || response.status === 204) {
+                        if (this.selectedSystemId === system.id) {
+                            this.selectedSystemId = '';
+                        }
+                        await this.loadSystems();
+                    } else {
+                        const error = await response.json();
+                        alert(`Failed to delete system: ${error.detail || JSON.stringify(error)}`);
+                    }
+                } catch (error) {
+                    console.error('Error deleting system:', error);
+                    alert('Failed to delete system');
+                }
+            };
+            this.deleteConfirmOpen = true;
+        },
+
+        async addMemberToSystem(system) {
+            // Simple prompt for now - could be a modal
+            const agentId = prompt('Enter the agent ID to add:');
+            if (!agentId) return;
+
+            try {
+                const response = await fetch(`/studio/api/systems/${system.id}/members/`, {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                    body: JSON.stringify({ agent: agentId }),
+                });
+
+                if (response.ok) {
+                    await this.loadSystemMembers(system);
+                } else {
+                    const error = await response.json();
+                    alert(`Failed to add member: ${error.detail || JSON.stringify(error)}`);
+                }
+            } catch (error) {
+                console.error('Error adding member:', error);
+                alert('Failed to add member');
+            }
+        },
+
+        async removeMemberFromSystem(system, member) {
+            try {
+                const response = await fetch(`/studio/api/systems/${system.id}/members/${member.id}/`, {
+                    method: 'DELETE',
+                    credentials: 'include',
+                    headers: {
+                        'X-CSRFToken': this.getCsrfToken(),
+                    },
+                });
+
+                if (response.ok || response.status === 204) {
+                    await this.loadSystemMembers(system);
+                } else {
+                    const error = await response.json();
+                    alert(`Failed to remove member: ${error.detail || JSON.stringify(error)}`);
+                }
+            } catch (error) {
+                console.error('Error removing member:', error);
+                alert('Failed to remove member');
+            }
+        },
+
+        // ==========================================================================
+        // Delete Confirmation Methods
+        // ==========================================================================
+
+        cancelDelete() {
+            this.deleteConfirmOpen = false;
+            this.deleteConfirmMessage = '';
+            this.deleteConfirmCallback = null;
+        },
+
+        async confirmDelete() {
+            if (this.deleteConfirmCallback) {
+                await this.deleteConfirmCallback();
+            }
+            this.cancelDelete();
+        },
+
+        getCsrfToken() {
+            const name = 'csrftoken';
+            let cookieValue = null;
+            if (document.cookie && document.cookie !== '') {
+                const cookies = document.cookie.split(';');
+                for (let i = 0; i < cookies.length; i++) {
+                    const cookie = cookies[i].trim();
+                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        },
+    },
+    async mounted() {
+        // Load agents and systems lists
+        await Promise.all([
+            this.loadAgents(),
+            this.loadSystems(),
+        ]);
+
+        // Auto-select first agent if none selected and agents exist
+        if (!this.selectedAgentId && this.agents.length > 0) {
+            this.selectedAgentId = this.agents[0].id;
+            await this.onAgentChange();
+        }
+
+        // Initialize chat widgets with current selection
+        this.refreshTestAgent();
+        this.refreshBuilderChat();
+    }
+}).use(primevue.config.default).mount('#app');
+</script>
+{% endblock %}
+