django-agent-studio 0.1.8__py3-none-any.whl → 0.2.0__py3-none-any.whl

django_agent_studio/templates/django_agent_studio/builder.html

@@ -1,2130 +1,37 @@
-{% 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="openSpecDocuments"
-                    class="flex items-center space-x-1 px-2 py-1 text-sm rounded border text-emerald-600 border-emerald-300 hover:bg-emerald-50 hover:border-emerald-400"
-                    title="Manage Spec Documents">
-                <span>📄</span>
-                <span>Specs</span>
-            </button>
-            <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>
-                <div class="flex items-center space-x-3">
-                    <!-- Auth Mode Toggle -->
-                    <div class="flex items-center space-x-2 text-xs">
-                        <span class="text-gray-500">Test as:</span>
-                        <button @click="setTestAuthMode('authenticated')"
-                                :class="testAuthMode === 'authenticated'
-                                    ? 'bg-blue-100 text-blue-700 border-blue-300'
-                                    : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'"
-                                class="px-2 py-1 border rounded-l text-xs font-medium transition-colors"
-                                title="Test as logged-in user (memories will be saved to your account)">
-                            <i class="pi pi-user text-xs mr-1"></i>Logged In
-                        </button>
-                        <button @click="setTestAuthMode('anonymous')"
-                                :class="testAuthMode === 'anonymous'
-                                    ? 'bg-orange-100 text-orange-700 border-orange-300'
-                                    : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'"
-                                class="px-2 py-1 border border-l-0 rounded-r text-xs font-medium transition-colors"
-                                title="Test as anonymous visitor (no persistent memories)">
-                            <i class="pi pi-eye-slash text-xs mr-1"></i>Anonymous
-                        </button>
-                    </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>
-            <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>
-
-<!-- Spec Documents Modal -->
-<div v-if="specDocsModalOpen" class="schema-modal-overlay" @click.self="closeSpecDocuments">
-    <div class="schema-modal" style="max-width: 1400px; height: 90vh;">
-        <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">Spec Documents</h3>
-                    <p class="text-sm text-gray-500">Manage agent specifications with version history</p>
-                </div>
-            </div>
-            <div class="flex items-center space-x-2">
-                <button @click="renderFullSpec"
-                        class="px-3 py-1.5 text-sm text-emerald-600 hover:text-emerald-800 hover:bg-emerald-50 rounded border border-emerald-300"
-                        title="Render all specs as markdown">
-                    <i class="pi pi-file-export mr-1"></i>Export
-                </button>
-                <button @click="loadSpecTree"
-                        class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded"
-                        :disabled="specDocsLoading"
-                        title="Refresh">
-                    <i class="pi pi-refresh" :class="{'pi-spin': specDocsLoading}"></i>
-                </button>
-                <button @click="closeSpecDocuments"
-                        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="display: flex; flex-direction: row; overflow: hidden;">
-            <!-- Left: Document Tree -->
-            <div class="w-1/3 border-r border-gray-200 flex flex-col" style="min-width: 300px;">
-                <div class="p-3 border-b border-gray-100 bg-gray-50">
-                    <button @click="createRootDocument"
-                            class="w-full px-3 py-2 text-sm text-emerald-600 border border-emerald-300 rounded hover:bg-emerald-50">
-                        <i class="pi pi-plus mr-1"></i> New Root Document
-                    </button>
-                </div>
-                <div class="flex-1 overflow-y-auto p-2">
-                    <div v-if="specDocsLoading" class="text-center py-8 text-gray-500">
-                        <i class="pi pi-spin pi-spinner text-2xl"></i>
-                        <p class="mt-2">Loading...</p>
-                    </div>
-                    <div v-else-if="specTree.length === 0" class="text-center py-8 text-gray-500">
-                        <span class="text-4xl">📄</span>
-                        <p class="mt-2">No spec documents yet</p>
-                        <p class="text-xs mt-1">Create one to get started</p>
-                    </div>
-                    <div v-else>
-                        <spec-tree-node
-                            v-for="node in specTree"
-                            :key="node.id"
-                            :node="node"
-                            :selected-id="selectedSpecId"
-                            :depth="0"
-                            @select="selectSpecDocument"
-                            @add-child="addChildDocument"
-                        ></spec-tree-node>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right: Document Editor -->
-            <div class="flex-1 flex flex-col overflow-hidden">
-                <div v-if="!selectedSpecId" class="flex-1 flex items-center justify-center text-gray-500">
-                    <div class="text-center">
-                        <span class="text-5xl">📝</span>
-                        <p class="mt-3">Select a document to edit</p>
-                        <p class="text-sm mt-1">Or create a new one from the tree</p>
-                    </div>
-                </div>
-                <template v-else>
-                    <!-- Document Header -->
-                    <div class="p-4 border-b border-gray-200 bg-gray-50">
-                        <div class="flex items-center justify-between">
-                            <div class="flex-1 mr-4">
-                                <input v-model="specDocTitle"
-                                       @blur="updateSpecTitle"
-                                       class="text-lg font-semibold text-gray-800 bg-transparent border-b border-transparent hover:border-gray-300 focus:border-emerald-500 focus:outline-none w-full"
-                                       placeholder="Document Title">
-                                <div class="flex items-center space-x-3 mt-1 text-xs text-gray-500">
-                                    <span>v[[ specDocVersion ]]</span>
-                                    <span v-if="specDocPath">[[ specDocPath ]]</span>
-                                </div>
-                            </div>
-                            <div class="flex items-center space-x-2">
-                                <!-- Link to Agent -->
-                                <div class="flex items-center space-x-1">
-                                    <select v-model="specDocLinkedAgent"
-                                            @change="linkSpecToAgent"
-                                            class="text-xs px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-emerald-500">
-                                        <option value="">Not linked</option>
-                                        <option v-for="agent in agents" :key="agent.id" :value="agent.id">
-                                            🤖 [[ agent.name ]]
-                                        </option>
-                                    </select>
-                                </div>
-                                <button @click="showSpecHistory"
-                                        class="px-2 py-1 text-xs text-gray-600 border border-gray-300 rounded hover:bg-gray-100"
-                                        title="Version history">
-                                    <i class="pi pi-history"></i>
-                                </button>
-                                <button @click="deleteSpecDocument"
-                                        class="px-2 py-1 text-xs text-red-600 border border-red-300 rounded hover:bg-red-50"
-                                        title="Delete document">
-                                    <i class="pi pi-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Content Editor -->
-                    <div class="flex-1 flex overflow-hidden">
-                        <!-- Edit Mode -->
-                        <div class="flex-1 flex flex-col" :class="{'w-1/2': specPreviewMode}">
-                            <div class="px-4 py-2 bg-gray-100 border-b border-gray-200 flex items-center justify-between">
-                                <span class="text-xs font-medium text-gray-600">MARKDOWN</span>
-                                <div class="flex items-center space-x-2">
-                                    <button @click="specPreviewMode = !specPreviewMode"
-                                            class="text-xs px-2 py-1 rounded"
-                                            :class="specPreviewMode ? 'bg-emerald-100 text-emerald-700' : 'text-gray-600 hover:bg-gray-200'">
-                                        <i class="pi pi-eye mr-1"></i>Preview
-                                    </button>
-                                </div>
-                            </div>
-                            <textarea v-model="specDocContent"
-                                      @input="markSpecModified"
-                                      class="flex-1 p-4 font-mono text-sm resize-none focus:outline-none"
-                                      placeholder="Write your spec in markdown..."
-                                      spellcheck="false"></textarea>
-                        </div>
-
-                        <!-- Preview Mode -->
-                        <div v-if="specPreviewMode" class="w-1/2 border-l border-gray-200 flex flex-col">
-                            <div class="px-4 py-2 bg-gray-100 border-b border-gray-200">
-                                <span class="text-xs font-medium text-gray-600">PREVIEW</span>
-                            </div>
-                            <div class="flex-1 p-4 overflow-y-auto prose prose-sm max-w-none"
-                                 v-html="renderedSpecContent"></div>
-                        </div>
-                    </div>
-
-                    <!-- Footer -->
-                    <div class="p-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
-                        <div class="text-sm text-gray-500">
-                            <span v-if="specDocModified" class="text-orange-600">
-                                <i class="pi pi-pencil mr-1"></i>Unsaved changes
-                            </span>
-                            <span v-else-if="specDocSaved" class="text-green-600">
-                                <i class="pi pi-check mr-1"></i>Saved
-                            </span>
-                        </div>
-                        <button @click="saveSpecDocument"
-                                :disabled="!specDocModified"
-                                class="px-4 py-2 text-sm text-white bg-emerald-600 hover:bg-emerald-700 rounded disabled:opacity-50 disabled:cursor-not-allowed">
-                            <i class="pi pi-save mr-1"></i>Save
-                        </button>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Spec History Modal -->
-<div v-if="specHistoryOpen" class="schema-modal-overlay" @click.self="specHistoryOpen = false">
-    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col">
-        <div class="p-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-gray-800">Version History</h3>
-            <button @click="specHistoryOpen = false" class="text-gray-400 hover:text-gray-600">
-                <i class="pi pi-times"></i>
-            </button>
-        </div>
-        <div class="flex-1 overflow-y-auto p-4">
-            <div v-if="specHistory.length === 0" class="text-center py-8 text-gray-500">
-                No version history available
-            </div>
-            <div v-else class="space-y-3">
-                <div v-for="version in specHistory" :key="version.version_number"
-                     class="p-3 border border-gray-200 rounded-lg hover:border-emerald-300 cursor-pointer"
-                     @click="restoreSpecVersion(version.version_number)">
-                    <div class="flex items-center justify-between">
-                        <span class="font-medium text-gray-800">Version [[ version.version_number ]]</span>
-                        <span class="text-xs text-gray-500">[[ formatDate(version.created_at) ]]</span>
-                    </div>
-                    <div class="text-sm text-gray-600 mt-1">[[ version.title ]]</div>
-                    <div v-if="version.content_preview" class="text-xs text-gray-400 mt-1 truncate">
-                        [[ version.content_preview ]]
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Rendered Spec Modal -->
-<div v-if="renderedSpecModalOpen" class="schema-modal-overlay" @click.self="renderedSpecModalOpen = false">
-    <div class="schema-modal" style="max-width: 900px; height: 85vh;">
-        <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">Full Specification</h3>
-                    <p class="text-sm text-gray-500">All spec documents rendered as markdown</p>
-                </div>
-            </div>
-            <div class="flex items-center space-x-2">
-                <button @click="copyRenderedSpec"
-                        class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded border border-gray-300">
-                    <i class="pi pi-copy mr-1"></i>Copy
-                </button>
-                <button @click="renderedSpecModalOpen = false"
-                        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="flex-1 overflow-y-auto p-6">
-            <pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 bg-gray-50 p-4 rounded-lg">[[ fullRenderedSpec ]]</pre>
-        </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, authMode = 'authenticated', anonymousToken = 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();
-    }
-
-    // Configure auth based on mode
-    const authConfig = authMode === 'anonymous'
-        ? {
-            authStrategy: 'anonymous',
-            authToken: anonymousToken,
-            anonymousSessionEndpoint: '/api/accounts/anonymous-session/',
-          }
-        : {
-            authStrategy: 'session',
-          };
-
-    window.testChatWidget = ChatWidget.createInstance({
-        containerId: 'test-chat-container',
-        backendUrl: backendUrl,
-        agentKey: slugToUse,
-        title: authMode === 'anonymous' ? 'Test Agent (Anonymous)' : 'Test Agent',
-        primaryColor: authMode === 'anonymous' ? '#f97316' : '#3b82f6',
-        showClearButton: true,
-        showDebugButton: true,
-        showExpandButton: false,
-        showModelSelector: true,
-        embedded: true,
-        ...authConfig,
-        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);
-            }
-        },
-    });
-}
-
-// Spec Tree Node Component
-const SpecTreeNode = {
-    name: 'spec-tree-node',
-    props: ['node', 'selectedId', 'depth'],
-    emits: ['select', 'add-child'],
-    template: `
-        <div class="spec-tree-node">
-            <div class="flex items-center py-1.5 px-2 rounded cursor-pointer hover:bg-gray-100 group"
-                 :class="{'bg-emerald-50 border-l-2 border-emerald-500': node.id === selectedId}"
-                 :style="{ paddingLeft: (depth * 16 + 8) + 'px' }"
-                 @click="$emit('select', node.id)">
-                <span v-if="node.children && node.children.length > 0"
-                      class="mr-1 text-gray-400 text-xs"
-                      @click.stop="expanded = !expanded">
-                    {{ expanded ? '▼' : '▶' }}
-                </span>
-                <span v-else class="mr-1 text-gray-300 text-xs">•</span>
-                <span class="flex-1 text-sm truncate" :class="node.has_content ? 'text-gray-800' : 'text-gray-400 italic'">
-                    {{ node.title }}
-                </span>
-                <span v-if="node.linked_agent"
-                      class="text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded ml-1"
-                      :title="'Linked to ' + node.linked_agent.name">
-                    🤖
-                </span>
-                <button @click.stop="$emit('add-child', node.id)"
-                        class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-emerald-600 ml-1 text-xs"
-                        title="Add child document">
-                    +
-                </button>
-            </div>
-            <div v-if="expanded && node.children && node.children.length > 0">
-                <spec-tree-node
-                    v-for="child in node.children"
-                    :key="child.id"
-                    :node="child"
-                    :selected-id="selectedId"
-                    :depth="depth + 1"
-                    @select="$emit('select', $event)"
-                    @add-child="$emit('add-child', $event)"
-                ></spec-tree-node>
-            </div>
-        </div>
-    `,
-    data() {
-        return {
-            expanded: true
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% if is_new %}Create Agent{% else %}Edit {{ agent.name }}{% endif %} - Agent Studio</title>
+
+    <!-- Built Vue app styles (PrimeVue + custom) -->
+    <link rel="stylesheet" href="{% static 'django_agent_studio/js/style.css' %}">
+
+    <!-- Agent Frontend Chat Widget (external dependency) -->
+    <link rel="stylesheet" href="{% static 'agent-frontend/chat-widget.css' %}">
+    <script src="{% static 'agent-frontend/chat-widget.js' %}"></script>
+
+    <!-- Markdown support for chat widget -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <script src="{% static 'agent-frontend/chat-widget-markdown.js' %}"></script>
+</head>
+<body>
+    <div id="studio-app"></div>
+
+    <script>
+        // Configuration passed from Django
+        window.STUDIO_CONFIG = {
+            agentId: {% if agent %}"{{ agent.id }}"{% else %}null{% endif %},
+            csrfToken: "{{ csrf_token }}",
+            builderAgentKey: "{{ builder_agent_key }}",
         };
-    }
-};
-
-const app = 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,
-            // Test auth mode
-            testAuthMode: 'authenticated',
-            anonymousToken: null,
-            // Spec documents
-            specDocsModalOpen: false,
-            specDocsLoading: false,
-            specTree: [],
-            selectedSpecId: null,
-            specDocTitle: '',
-            specDocContent: '',
-            specDocVersion: 1,
-            specDocPath: '',
-            specDocLinkedAgent: '',
-            specDocModified: false,
-            specDocSaved: false,
-            specPreviewMode: false,
-            specHistoryOpen: false,
-            specHistory: [],
-            renderedSpecModalOpen: false,
-            fullRenderedSpec: '',
-        }
-    },
-    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;
-        },
-        renderedSpecContent() {
-            if (!this.specDocContent) return '';
-            // Simple markdown rendering (could use marked.js for better rendering)
-            if (typeof marked !== 'undefined') {
-                return marked.parse(this.specDocContent);
-            }
-            return this.specDocContent.replace(/\n/g, '<br>');
-        },
-    },
-    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, this.testAuthMode, this.anonymousToken);
-        },
-
-        async setTestAuthMode(mode) {
-            this.testAuthMode = mode;
-
-            // If switching to anonymous and we don't have a token, create one
-            if (mode === 'anonymous' && !this.anonymousToken) {
-                try {
-                    const response = await fetch('/api/accounts/anonymous-session/', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                    });
-                    if (response.ok) {
-                        const data = await response.json();
-                        this.anonymousToken = data.token;
-                    }
-                } catch (e) {
-                    console.warn('Failed to create anonymous session:', e);
-                }
-            }
-
-            // Refresh the test chat with new auth mode
-            this.refreshTestAgent();
-        },
-
-        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;
-        },
-
-        // ==========================================================================
-        // Spec Document Methods
-        // ==========================================================================
-
-        openSpecDocuments() {
-            this.specDocsModalOpen = true;
-            this.loadSpecTree();
-        },
-
-        closeSpecDocuments() {
-            this.specDocsModalOpen = false;
-            this.selectedSpecId = null;
-            this.specDocModified = false;
-        },
-
-        async loadSpecTree() {
-            this.specDocsLoading = true;
-            try {
-                const response = await fetch('/studio/api/spec-documents/tree/', {
-                    credentials: 'include',
-                    headers: { 'Accept': 'application/json' },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    this.specTree = data.tree || [];
-                }
-            } catch (error) {
-                console.error('Error loading spec tree:', error);
-            } finally {
-                this.specDocsLoading = false;
-            }
-        },
-
-        async selectSpecDocument(docId) {
-            if (this.specDocModified) {
-                if (!confirm('You have unsaved changes. Discard them?')) {
-                    return;
-                }
-            }
-
-            this.selectedSpecId = docId;
-            this.specDocModified = false;
-            this.specDocSaved = false;
-
-            try {
-                const response = await fetch(`/studio/api/spec-documents/${docId}/`, {
-                    credentials: 'include',
-                    headers: { 'Accept': 'application/json' },
-                });
-                if (response.ok) {
-                    const doc = await response.json();
-                    this.specDocTitle = doc.title;
-                    this.specDocContent = doc.content;
-                    this.specDocVersion = doc.current_version;
-                    this.specDocPath = doc.full_path;
-                    this.specDocLinkedAgent = doc.linked_agent ? doc.linked_agent.id : '';
-                }
-            } catch (error) {
-                console.error('Error loading spec document:', error);
-            }
-        },
-
-        async createRootDocument() {
-            const title = prompt('Enter document title:');
-            if (!title) return;
-
-            try {
-                const response = await fetch('/studio/api/spec-documents/', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                    body: JSON.stringify({ title, content: '' }),
-                });
-
-                if (response.ok) {
-                    const doc = await response.json();
-                    await this.loadSpecTree();
-                    this.selectSpecDocument(doc.id);
-                } else {
-                    const error = await response.json();
-                    alert(`Failed to create document: ${error.error || JSON.stringify(error)}`);
-                }
-            } catch (error) {
-                console.error('Error creating document:', error);
-                alert('Failed to create document');
-            }
-        },
-
-        async addChildDocument(parentId) {
-            const title = prompt('Enter child document title:');
-            if (!title) return;
-
-            try {
-                const response = await fetch('/studio/api/spec-documents/', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                    body: JSON.stringify({ title, content: '', parent_id: parentId }),
-                });
-
-                if (response.ok) {
-                    const doc = await response.json();
-                    await this.loadSpecTree();
-                    this.selectSpecDocument(doc.id);
-                } else {
-                    const error = await response.json();
-                    alert(`Failed to create document: ${error.error || JSON.stringify(error)}`);
-                }
-            } catch (error) {
-                console.error('Error creating document:', error);
-                alert('Failed to create document');
-            }
-        },
-
-        markSpecModified() {
-            this.specDocModified = true;
-            this.specDocSaved = false;
-        },
-
-        async updateSpecTitle() {
-            if (!this.selectedSpecId || !this.specDocTitle) return;
-
-            try {
-                await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/`, {
-                    method: 'PUT',
-                    credentials: 'include',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                    body: JSON.stringify({ title: this.specDocTitle }),
-                });
-                await this.loadSpecTree();
-            } catch (error) {
-                console.error('Error updating title:', error);
-            }
-        },
-
-        async saveSpecDocument() {
-            if (!this.selectedSpecId) return;
-
-            try {
-                const response = await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/`, {
-                    method: 'PUT',
-                    credentials: 'include',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                    body: JSON.stringify({
-                        title: this.specDocTitle,
-                        content: this.specDocContent,
-                    }),
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    this.specDocVersion = data.current_version;
-                    this.specDocModified = false;
-                    this.specDocSaved = true;
-                    setTimeout(() => { this.specDocSaved = false; }, 2000);
-                } else {
-                    const error = await response.json();
-                    alert(`Failed to save: ${error.error || JSON.stringify(error)}`);
-                }
-            } catch (error) {
-                console.error('Error saving document:', error);
-                alert('Failed to save document');
-            }
-        },
-
-        async linkSpecToAgent() {
-            if (!this.selectedSpecId) return;
-
-            if (this.specDocLinkedAgent) {
-                try {
-                    await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/link/`, {
-                        method: 'POST',
-                        credentials: 'include',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRFToken': this.getCsrfToken(),
-                        },
-                        body: JSON.stringify({ agent_id: this.specDocLinkedAgent }),
-                    });
-                    await this.loadSpecTree();
-                } catch (error) {
-                    console.error('Error linking to agent:', error);
-                }
-            } else {
-                try {
-                    await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/link/`, {
-                        method: 'DELETE',
-                        credentials: 'include',
-                        headers: {
-                            'X-CSRFToken': this.getCsrfToken(),
-                        },
-                    });
-                    await this.loadSpecTree();
-                } catch (error) {
-                    console.error('Error unlinking from agent:', error);
-                }
-            }
-        },
-
-        async deleteSpecDocument() {
-            if (!this.selectedSpecId) return;
-            if (!confirm('Are you sure you want to delete this document? This will also delete all child documents.')) {
-                return;
-            }
-
-            try {
-                const response = await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/`, {
-                    method: 'DELETE',
-                    credentials: 'include',
-                    headers: {
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                });
-
-                if (response.ok) {
-                    this.selectedSpecId = null;
-                    this.specDocTitle = '';
-                    this.specDocContent = '';
-                    await this.loadSpecTree();
-                } else {
-                    const error = await response.json();
-                    alert(`Failed to delete: ${error.error || JSON.stringify(error)}`);
-                }
-            } catch (error) {
-                console.error('Error deleting document:', error);
-                alert('Failed to delete document');
-            }
-        },
-
-        async showSpecHistory() {
-            if (!this.selectedSpecId) return;
-
-            try {
-                const response = await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/history/`, {
-                    credentials: 'include',
-                    headers: { 'Accept': 'application/json' },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    this.specHistory = data.versions || [];
-                    this.specHistoryOpen = true;
-                }
-            } catch (error) {
-                console.error('Error loading history:', error);
-            }
-        },
-
-        async restoreSpecVersion(versionNumber) {
-            if (!confirm(`Restore to version ${versionNumber}? This will create a new version with the old content.`)) {
-                return;
-            }
-
-            try {
-                const response = await fetch(`/studio/api/spec-documents/${this.selectedSpecId}/restore/`, {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': this.getCsrfToken(),
-                    },
-                    body: JSON.stringify({ version_number: versionNumber }),
-                });
-
-                if (response.ok) {
-                    this.specHistoryOpen = false;
-                    await this.selectSpecDocument(this.selectedSpecId);
-                } else {
-                    const error = await response.json();
-                    alert(`Failed to restore: ${error.error || JSON.stringify(error)}`);
-                }
-            } catch (error) {
-                console.error('Error restoring version:', error);
-                alert('Failed to restore version');
-            }
-        },
-
-        async renderFullSpec() {
-            try {
-                const response = await fetch('/studio/api/spec-documents/render/', {
-                    credentials: 'include',
-                    headers: { 'Accept': 'application/json' },
-                });
-                if (response.ok) {
-                    const data = await response.json();
-                    this.fullRenderedSpec = data.markdown;
-                    this.renderedSpecModalOpen = true;
-                }
-            } catch (error) {
-                console.error('Error rendering spec:', error);
-            }
-        },
-
-        async copyRenderedSpec() {
-            try {
-                await navigator.clipboard.writeText(this.fullRenderedSpec);
-            } catch (e) {
-                console.error('Failed to copy:', e);
-            }
-        },
-
-        formatDate(isoString) {
-            return new Date(isoString).toLocaleString();
-        },
-    },
-    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();
-    }
-});
-
-// Register the tree node component
-app.component('spec-tree-node', SpecTreeNode);
-
-// Use PrimeVue and mount
-app.use(primevue.config.default).mount('#app');
-</script>
-{% endblock %}
+    </script>
 
+    <!-- Built Vue app -->
+    <script src="{% static 'django_agent_studio/js/builder.js' %}"></script>
+</body>
+</html>