Show artifacts_json in sidebar and in /program/ pages

Author: jvm123

scripts/static/js/sidebar.js

@@ -32,7 +32,7 @@ export function showSidebarContent(d, fromHover = false) {
     let tabContentHtml = '';
     let tabNames = [];
     if (d.code && typeof d.code === 'string' && d.code.trim() !== '') tabNames.push('Code');
-    if (d.prompts && typeof d.prompts === 'object' && Object.keys(d.prompts).length > 0) tabNames.push('Prompts');
+    if ((d.prompts && typeof d.prompts === 'object' && Object.keys(d.prompts).length > 0) || (d.artifacts_json && typeof d.artifacts_json === 'object' && Object.keys(d.artifacts_json).length > 0)) tabNames.push('Prompts');
     const children = allNodeData.filter(n => n.parent_id === d.id);
     if (children.length > 0) tabNames.push('Children');
     let activeTab = lastSidebarTab && tabNames.includes(lastSidebarTab) ? lastSidebarTab : tabNames[0];
@@ -46,19 +46,28 @@ export function showSidebarContent(d, fromHover = false) {
             // --- Prompt select logic ---
             let promptOptions = [];
             let promptMap = {};
-            for (const [k, v] of Object.entries(d.prompts)) {
-                if (v && typeof v === 'object' && !Array.isArray(v)) {
-                    for (const [subKey, subVal] of Object.entries(v)) {
-                        const optLabel = `${k} - ${subKey}`;
+            // Prompts
+            if (d.prompts && typeof d.prompts === 'object') {
+                for (const [k, v] of Object.entries(d.prompts)) {
+                    if (v && typeof v === 'object' && !Array.isArray(v)) {
+                        for (const [subKey, subVal] of Object.entries(v)) {
+                            const optLabel = `${k} - ${subKey}`;
+                            promptOptions.push(optLabel);
+                            promptMap[optLabel] = subVal;
+                        }
+                    } else {
+                        const optLabel = `${k}`;
                         promptOptions.push(optLabel);
-                        promptMap[optLabel] = subVal;
+                        promptMap[optLabel] = v;
                     }
-                } else {
-                    const optLabel = `${k}`;
-                    promptOptions.push(optLabel);
-                    promptMap[optLabel] = v;
                 }
             }
+            // Artifacts
+            if (d.artifacts_json) {
+                const optLabel = `artifacts`;
+                promptOptions.push(optLabel);
+                promptMap[optLabel] = d.artifacts_json;
+            }
             // Get last selected prompt from localStorage, or default to first
             let lastPromptKey = localStorage.getItem('sidebarPromptSelect') || promptOptions[0] || '';
             if (!promptMap[lastPromptKey]) lastPromptKey = promptOptions[0] || '';
@@ -118,6 +127,24 @@ export function showSidebarContent(d, fromHover = false) {
             <b>Metrics:</b><br>${formatMetrics(d.metrics)}<br><br>
             ${tabHtml}${tabContentHtml}
         </div>`;
+
+    // Helper to attach prompt select handler
+    function attachPromptSelectHandler() {
+        const promptSelect = document.getElementById('sidebar-prompt-select');
+        if (promptSelect) {
+            promptSelect.onchange = function() {
+                localStorage.setItem('sidebarPromptSelect', promptSelect.value);
+                // Only re-render the Prompts tab, not the whole sidebar
+                const tabContent = document.getElementById('sidebar-tab-content');
+                if (tabContent) {
+                    tabContent.innerHTML = renderSidebarTabContent('Prompts', d, children);
+                    attachPromptSelectHandler();
+                }
+            };
+        }
+    }
+    attachPromptSelectHandler();
+
     if (tabNames.length > 1) {
         const tabBar = document.getElementById('sidebar-tab-bar');
         Array.from(tabBar.children).forEach(tabEl => {
@@ -128,19 +155,8 @@ export function showSidebarContent(d, fromHover = false) {
                 lastSidebarTab = tabName;
                 const tabContent = document.getElementById('sidebar-tab-content');
                 tabContent.innerHTML = renderSidebarTabContent(tabName, d, children);
-                // Add prompt select event if Prompts tab
                 if (tabName === 'Prompts') {
-                    const promptSelect = document.getElementById('sidebar-prompt-select');
-                    if (promptSelect) {
-                        promptSelect.onchange = function() {
-                            localStorage.setItem('sidebarPromptSelect', promptSelect.value);
-                            // Re-render Prompts tab with new selection
-                            tabContent.innerHTML = renderSidebarTabContent('Prompts', d, children);
-                            // Re-attach event
-                            const newPromptSelect = document.getElementById('sidebar-prompt-select');
-                            if (newPromptSelect) newPromptSelect.onchange = promptSelect.onchange;
-                        };
-                    }
+                    attachPromptSelectHandler();
                 }
                 setTimeout(() => {
                     document.querySelectorAll('.child-link').forEach(link => {
@@ -167,18 +183,7 @@ export function showSidebarContent(d, fromHover = false) {
         });
     }
     setTimeout(() => {
-        const promptSelect = document.getElementById('sidebar-prompt-select');
-        if (promptSelect) {
-            promptSelect.onchange = function() {
-                localStorage.setItem('sidebarPromptSelect', promptSelect.value);
-                // Re-render Prompts tab with new selection
-                const tabContent = document.getElementById('sidebar-tab-content');
-                tabContent.innerHTML = renderSidebarTabContent('Prompts', d, children);
-                // Re-attach event
-                const newPromptSelect = document.getElementById('sidebar-prompt-select');
-                if (newPromptSelect) newPromptSelect.onchange = promptSelect.onchange;
-            };
-        }
+        attachPromptSelectHandler();
         document.querySelectorAll('.child-link').forEach(link => {
             link.onclick = function(e) {
                 e.preventDefault();

scripts/templates/program_page.html

@@ -31,5 +31,9 @@ <h2>Prompts:</h2>
             <li><strong>{{ key }}:</strong> <pre style="white-space: pre-wrap; word-break: break-word;">{{ value }}</pre></li>
         {% endfor %}
     </ul>
+    {% if artifacts_json %}
+    <h2>Artifacts:</h2>
+    <pre style="white-space: pre-wrap; word-break: break-word;">{{ artifacts_json }}</pre>
+    {% endif %}
 </body>
 </html>

scripts/visualizer.py

@@ -96,9 +96,13 @@ def program_page(program_id):
     data = load_evolution_data(checkpoint_dir)
     program_data = next((p for p in data["nodes"] if p["id"] == program_id), None)
     program_data = {"code": "", "prompts": {}, **program_data}
+    artifacts_json = program_data.get("artifacts_json", None)
 
     return render_template(
-        "program_page.html", program_data=program_data, checkpoint_dir=checkpoint_dir
+        "program_page.html",
+        program_data=program_data,
+        checkpoint_dir=checkpoint_dir,
+        artifacts_json=artifacts_json,
     )