django-agent-studio 0.1.5__py3-none-any.whl → 0.1.9__py3-none-any.whl

django_agent_studio/templates/django_agent_studio/builder.html

@@ -252,6 +252,12 @@
             <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'"
@@ -642,6 +648,230 @@
         </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 %}
@@ -782,7 +1012,58 @@ function initBuilderChat(targetAgentId = null, vueApp = null) {
     });
 }
 
-createApp({
+// Spec Tree Node Component
+const SpecTreeNode = {
+    name: 'spec-tree-node',
+    props: ['node', 'selectedId', 'depth'],
+    emits: ['select', 'add-child'],
+    template: `{% verbatim %}
+        <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>
+    {% endverbatim %}`,
+    data() {
+        return {
+            expanded: true
+        };
+    }
+};
+
+const app = createApp({
     delimiters: ['[[', ']]'],  // Avoid conflict with Django templates
     data() {
         return {
@@ -826,6 +1107,23 @@ createApp({
             // 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: {
@@ -836,6 +1134,14 @@ createApp({
             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() {
@@ -1478,6 +1784,322 @@ createApp({
             }
             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
@@ -1496,7 +2118,13 @@ createApp({
         this.refreshTestAgent();
         this.refreshBuilderChat();
     }
-}).use(primevue.config.default).mount('#app');
+});
+
+// Register the tree node component
+app.component('spec-tree-node', SpecTreeNode);
+
+// Use PrimeVue and mount
+app.use(primevue.config.default).mount('#app');
 </script>
 {% endblock %}