json-object-editor 0.10.665 → 0.10.670

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## 0.10.668 - The Workflow Widget
+
 ## 0.10.665
 
 - AI Response JSON extraction and audit trail improvements

package/TESTING_PHASE1_PROGRESS.md

@@ -0,0 +1,216 @@
+# Phase 1 Progress Tracking - Testing Steps
+
+## Overview
+Phase 1 implements client-side multi-job progress tracking UI. Jobs are tracked per button, with support for single and multiple jobs per button.
+
+## Token Format
+- **select_prompt**: Button token: `{objectId}_select_prompt_{timestamp}_{random}`, Job token: `{objectId}_{promptId}_{timestamp}_{random}`
+- **ai:prompt (autofill)**: Token: `{objectId}_{fieldId}_{timestamp}_{random}`
+- **proposeThought**: Token: `{objectId}_proposeThought_{timestamp}_{random}`
+
+## Test 1: ai:prompt Button (Single Job) - Task Description Field
+
+### Setup
+1. Open a task object in JOE
+2. Navigate to the "description" field (should have an "AI" button)
+
+### Test Steps
+1. **Verify button rendering**:
+   - Button should have class `joe-ai-button` and `joe-ai-autofill-button`
+   - Button should have `data-progress-token` attribute (format: `{objectId}_description_{timestamp}_{random}`)
+   - Button should have `data-field-name="description"` attribute
+   - Progress div should exist below button with `data-for-token` matching button token
+   - Jobs list container should exist below progress div
+
+2. **Click AI button**:
+   - Button should disable and show loading state
+   - Button text should change to "Running..." or show percentage if available
+   - Progress text field should show "Starting..." or progress message
+   - Jobs list should show one job: "AI Autofill - Running..."
+
+3. **During execution** (if progress updates are sent):
+   - Button text should update with percentage: "Running... X%"
+   - Progress text should show detailed message
+   - Job in list should show percentage
+
+4. **On completion**:
+   - Button text should show "Complete" briefly, then restore to "AI"
+   - Button should re-enable
+   - Progress text should clear after 2 seconds
+   - Job should be removed from list
+
+5. **On error**:
+   - Button should re-enable
+   - Job should be cleared
+   - Error alert should appear
+
+### Expected Results
+- Single job tracked correctly
+- Button shows percentage when single job is active
+- UI updates properly
+- Job cleared on completion/error
+
+---
+
+## Test 2: select_prompt Field (Multiple Jobs)
+
+### Setup
+1. Open a protocol object (or any object with `select_prompt` field)
+2. Navigate to the "Run AI Prompt" field
+
+### Test Steps
+1. **Verify button rendering**:
+   - Button token format: `{objectId}_select_prompt_{timestamp}_{random}`
+   - Progress and jobs containers exist
+
+2. **Run first prompt**:
+   - Select a prompt from dropdown
+   - Click "Run AI Prompt"
+   - Button should disable
+   - Job token should be generated: `{objectId}_{promptId}_{timestamp}_{random}`
+   - Jobs list should show: "{Prompt Name} - Running..."
+   - Button text should show percentage (single job)
+
+3. **Run second prompt** (while first is running):
+   - Select a different prompt
+   - Click "Run AI Prompt" again
+   - Second job should be added to jobs list
+   - Button text should change to "2 jobs running"
+   - Progress text field should clear (multiple jobs shown in list)
+
+4. **Verify multiple jobs display**:
+   - Jobs list should show both jobs with their names and statuses
+   - Each job should show percentage or "Running..."
+
+5. **Complete jobs**:
+   - As jobs complete, they should be removed from list
+   - Button text should update: "2 jobs running" → "1 job running" → percentage → "Complete" → original text
+   - When all jobs complete, button should re-enable
+
+### Expected Results
+- Multiple jobs tracked correctly
+- Button shows "X jobs running" when multiple active
+- Jobs list displays all active jobs
+- Button shows percentage when only one job remains
+- All jobs cleared when complete
+
+---
+
+## Test 3: proposeThought Field (Single Job)
+
+### Setup
+1. Open a task object
+2. Navigate to "Propose Thought" field
+
+### Test Steps
+1. **Verify button rendering**:
+   - Button token format: `{objectId}_proposeThought_{timestamp}_{random}`
+   - Progress and jobs containers exist
+
+2. **Run thought agent**:
+   - Click "Run Thought Agent"
+   - Button should disable
+   - Job should be tracked (token: `{objectId}_proposeThought_{timestamp}_{random}`)
+   - Button text should show "Running..." or percentage
+   - Progress text should show status
+
+3. **On completion**:
+   - Button should re-enable
+   - Job should be cleared
+   - UI should restore
+
+### Expected Results
+- Single job tracked correctly
+- UI updates properly
+- Job cleared on completion
+
+---
+
+## Test 4: Navigation (Field Rerender)
+
+### Setup
+1. Start a job on any field
+2. Navigate away (list view or different object)
+3. Navigate back to the same object
+
+### Test Steps
+1. **Before navigation**:
+   - Note the button token
+   - Start a job
+   - Verify job is tracked
+
+2. **After navigation**:
+   - Field rerenders with new button token
+   - Old job tracking is lost (expected for Phase 1)
+   - New button has no active jobs
+
+### Expected Results
+- Field rerender creates new button with new token
+- Old jobs are not visible (Phase 2 will add server-side reconnection)
+- New button works normally
+
+---
+
+## Test 5: Error Handling
+
+### Test Steps
+1. **Network error**:
+   - Start a job
+   - Simulate network failure (disable network or invalid endpoint)
+   - Verify error alert appears
+   - Verify job is cleared
+   - Verify button re-enables
+
+2. **Server error**:
+   - Start a job with invalid parameters
+   - Verify error message appears
+   - Verify job is cleared
+   - Verify button re-enables
+
+### Expected Results
+- Errors are handled gracefully
+- Jobs are cleared on error
+- UI is restored
+
+---
+
+## Test 6: Multiple Windows
+
+### Setup
+1. Open same object in two browser windows/tabs
+
+### Test Steps
+1. **Window 1**:
+   - Start a job
+   - Verify job is tracked
+
+2. **Window 2**:
+   - Should have independent button token
+   - Can start separate job
+   - Jobs are tracked independently
+
+### Expected Results
+- Each window has independent job tracking
+- No conflicts between windows
+
+---
+
+## Debugging
+
+### Console Checks
+- `Ai.activeJobs` Map should contain button tokens as keys
+- Each value should be an array of job objects
+- Job objects should have: `token`, `promptId`, `promptName`, `progress`, `total`, `message`
+
+### Common Issues
+1. **Button not found**: Check `data-progress-token` attribute exists
+2. **Jobs not showing**: Check `Ai.activeJobs` Map has entries
+3. **UI not updating**: Check `renderJobsList` is being called
+4. **Token format wrong**: Verify token matches expected format for field type
+
+---
+
+## Notes
+- Phase 1 is client-side only. Server-side progress tracking comes in Phase 2.
+- Jobs are lost on page refresh or field rerender (Phase 2 will add persistence).
+- Progress updates require server-side implementation (Phase 2/3).

package/_www/ai-jobs.html

@@ -0,0 +1,218 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>JOE AI Jobs Test</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<style>
+		body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:20px;}
+		label{display:block;margin:8px 0 4px}
+		select, input, textarea, button{font-size:14px;padding:6px 12px}
+		textarea{width:100%;height:160px;font-family:ui-monospace,Menlo,Consolas,monospace}
+		pre{background:#f6f8fa;border:1px solid #e1e4e8;padding:10px;overflow:auto;max-height:400px}
+		.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
+		.small{font-size:12px;color:#666}
+		.bad{color:#b00020}
+		.good{color:#0a7d00}
+		.section{margin:20px 0;padding:15px;border:1px solid #e1e4e8;border-radius:4px}
+		button{cursor:pointer;background:#0366d6;color:white;border:none;border-radius:4px}
+		button:hover{background:#0256c2}
+		button:disabled{background:#ccc;cursor:not-allowed}
+		input[type="text"]{min-width:300px;padding:6px}
+	</style>
+</head>
+<body>
+    <div id="mcp-nav"></div>
+    <script src="/JsonObjectEditor/_www/mcp-nav.js"></script>
+    <h1>JOE AI Jobs Test</h1>
+    <div class="small">View and test active AI job tracking. Jobs are keyed by {objectId}_{identifier}.</div>
+    
+    <div class="section">
+        <h3>All Active Jobs</h3>
+        <div class="row">
+            <button id="refreshAll">Refresh</button>
+            <span id="allStatus" class="small"></span>
+        </div>
+        <pre id="allJobsResult"></pre>
+    </div>
+
+    <div class="section">
+        <h3>View Active Jobs for Object</h3>
+        <div class="row">
+            <label for="objectId">Object ID:</label>
+            <input id="objectId" type="text" placeholder="e.g. 5ce3d147-f37d-4c8f-9c00-bc185182c4d5" />
+            <button id="loadJobs">Load Jobs</button>
+            <span id="loadStatus" class="small"></span>
+        </div>
+        <pre id="jobsResult"></pre>
+    </div>
+
+    <div class="section">
+        <h3>Example Job Tokens</h3>
+        <div class="small">Use these formats to understand token structure:</div>
+        <pre id="examples">select_prompt: {objectId}_select_prompt_{timestamp}_{random}
+  Example: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_select_prompt_1771022571836_abc123
+  Lookup Key: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_select_prompt
+
+Job token (when prompt selected): {objectId}_{promptId}_{timestamp}_{random}
+  Example: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_promptId123_1771022571837_xyz789
+  Lookup Key: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_promptId123
+
+ai:prompt (autofill): {objectId}_{fieldId}_{timestamp}_{random}
+  Example: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_description_1771022571838_def456
+  Lookup Key: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_description
+
+proposeThought: {objectId}_proposeThought_{timestamp}_{random}
+  Example: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_proposeThought_1771022571839_ghi789
+  Lookup Key: 5ce3d147-f37d-4c8f-9c00-bc185182c4d5_proposeThought</pre>
+    </div>
+
+    <div class="section">
+        <h3>Example Job JSON</h3>
+        <div class="small">Example job data structure (for reference):</div>
+        <pre id="exampleJson">{
+  "token": "5ce3d147-f37d-4c8f-9c00-bc185182c4d5_promptId123_1771022571837_xyz789",
+  "startTime": "2025-01-15T10:30:00.000Z",
+  "status": "running",
+  "promptId": "promptId123",
+  "promptName": "Generate Summary",
+  "fieldId": null,
+  "progress": 45,
+  "total": 100,
+  "message": "Processing files..."
+}</pre>
+    </div>
+
+    <div class="section">
+        <h3>Test extractKey Function</h3>
+        <div class="row">
+            <label for="testToken">Token:</label>
+            <input id="testToken" type="text" placeholder="Paste a token here" style="flex:1" />
+            <button id="testExtract">Test extractKey</button>
+        </div>
+        <pre id="extractResult"></pre>
+    </div>
+
+    <script>
+        // Load all active jobs on page load
+        function loadAllJobs() {
+            var statusEl = document.getElementById('allStatus');
+            var resultEl = document.getElementById('allJobsResult');
+            
+            statusEl.textContent = 'Loading...';
+            statusEl.className = 'small';
+            resultEl.textContent = '';
+            
+            fetch('/API/aijobs')
+                .then(function(res) {
+                    if (!res.ok) {
+                        throw new Error('HTTP ' + res.status + ': ' + res.statusText);
+                    }
+                    return res.json();
+                })
+                .then(function(data) {
+                    var count = data.count || 0;
+                    var lookupKeys = data.lookupKeys || 0;
+                    var jobsArray = data.jobs || [];
+                    statusEl.textContent = 'Success - ' + count + ' job(s) across ' + lookupKeys + ' lookup key(s)';
+                    statusEl.className = 'small good';
+                    
+                    // Format for display
+                    var displayData = {
+                        count: count,
+                        lookupKeys: lookupKeys,
+                        jobs: jobsArray
+                    };
+                    resultEl.textContent = JSON.stringify(displayData, null, 2);
+                })
+                .catch(function(e) {
+                    statusEl.textContent = 'Error: ' + e.message;
+                    statusEl.className = 'small bad';
+                    resultEl.textContent = 'Error: ' + e.message;
+                });
+        }
+        
+        // Load on page load
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadAllJobs);
+        } else {
+            loadAllJobs();
+        }
+        
+        document.getElementById('refreshAll').addEventListener('click', loadAllJobs);
+
+        document.getElementById('loadJobs').addEventListener('click', async function() {
+            var objectId = document.getElementById('objectId').value.trim();
+            var statusEl = document.getElementById('loadStatus');
+            var resultEl = document.getElementById('jobsResult');
+            
+            if (!objectId) {
+                statusEl.textContent = 'Please enter an object ID';
+                statusEl.className = 'small bad';
+                return;
+            }
+            
+            statusEl.textContent = 'Loading...';
+            statusEl.className = 'small';
+            resultEl.textContent = '';
+            
+            try {
+                var res = await fetch('/API/aijobs/' + encodeURIComponent(objectId));
+                if (!res.ok) {
+                    throw new Error('HTTP ' + res.status + ': ' + res.statusText);
+                }
+                var data = await res.json();
+                statusEl.textContent = 'Success - ' + (data.count || 0) + ' job(s)';
+                statusEl.className = 'small good';
+                resultEl.textContent = JSON.stringify(data, null, 2);
+            } catch (e) {
+                statusEl.textContent = 'Error: ' + e.message;
+                statusEl.className = 'small bad';
+                resultEl.textContent = 'Error: ' + e.message;
+            }
+        });
+
+        document.getElementById('testExtract').addEventListener('click', function() {
+            var token = document.getElementById('testToken').value.trim();
+            var resultEl = document.getElementById('extractResult');
+            
+            if (!token) {
+                resultEl.textContent = 'Please enter a token';
+                return;
+            }
+            
+            // Token format: objectId_identifier_timestamp_random
+            // Extract: objectId_identifier (everything before last 2 underscores)
+            var parts = token.split('_');
+            if (parts.length < 3) {
+                resultEl.textContent = 'Invalid token format. Need at least 3 parts separated by underscores.';
+                return;
+            }
+            
+            var lookupKey = parts.slice(0, -2).join('_');
+            var timestamp = parts[parts.length - 2];
+            var random = parts[parts.length - 1];
+            
+            resultEl.textContent = JSON.stringify({
+                token: token,
+                lookupKey: lookupKey,
+                timestamp: timestamp,
+                random: random,
+                parts: parts.length
+            }, null, 2);
+        });
+
+        // Auto-load on Enter key
+        document.getElementById('objectId').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                document.getElementById('loadJobs').click();
+            }
+        });
+        document.getElementById('testToken').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                document.getElementById('testExtract').click();
+            }
+        });
+    </script>
+</body>
+</html>

package/_www/mcp-nav.js

@@ -1,25 +1,33 @@
 ;(function(){
+  // Creates navigation element with two rows of links and info display. Returns the nav DOM element.
   function buildNav(){
     var nav = document.createElement('nav');
-    nav.setAttribute('style','display:flex;flex-direction:column;gap:6px;margin-bottom:8px');
+    nav.setAttribute('style','display:flex;flex-direction:column;gap:6px;margin-bottom:8px;font-size:14px;');
     var infoRow = '<div id="mcp-nav-info" class="small" style="opacity:.8"></div>';
-    var linksRow = [
+    var linksRow1 = [
       '<div style="display:flex;gap:10px;align-items:center">',
-      '<a href="/mcp-test.html" target="mcp_test_win" rel="noopener">MCP Test</a>',
-      '<a href="/mcp-export.html" target="mcp_export_win" rel="noopener">MCP Export</a>',
-      '<a href="/mcp-schemas.html" target="mcp_schemas_win" rel="noopener">Schemas</a>',
-      '<a href="/matrix.html" target="matrix_win" rel="noopener">Matrix</a>',
-      '<a href="/mcp-prompt.html" target="mcp_prompt_win" rel="noopener">MCP Prompt</a>',
-      '<a href="/ai-widget-test.html" target="ai_widget_test_win" rel="noopener">AI Widget</a>',
-      '<a href="/plugins-test.html" target="plugins_test_win" rel="noopener">Plugins</a>',
+      '<a href="/mcp-test.html" target="mcp_test_win">MCP Test</a>',
+      '<a href="/mcp-export.html" target="mcp_export_win">MCP Export</a>',
+      '<a href="/mcp-prompt.html" target="mcp_prompt_win">MCP Prompt</a>',
+      '<a href="/.well-known/mcp/manifest.json" target="mcp_manifest_win">MCP Manifest</a>',
       '<span style="margin-left:auto"></span>',
-      '<a href="/privacy" target="privacy_win" rel="noopener">Privacy</a>',
-      '<a href="/terms" target="terms_win" rel="noopener">Terms</a>',
+      '<a href="/privacy" target="privacy_win">Privacy</a>',
+      '<a href="/terms" target="terms_win">Terms</a>',
       '</div>'
     ].join('');
-    nav.innerHTML = infoRow + linksRow;
+    var linksRow2 = [
+      '<div style="display:flex;gap:10px;align-items:center">',
+      '<a href="/mcp-schemas.html" target="mcp_schemas_win">Schemas</a>',
+      '<a href="/matrix.html" target="matrix_win">Matrix</a>',
+      '<a href="/ai-widget-test.html" target="ai_widget_test_win">AI Widget</a>',
+      '<a href="/ai-jobs.html" target="ai_jobs_win">AI Jobs</a>',
+      '<a href="/plugins-test.html" target="plugins_test_win">Plugins</a>',
+      '</div>'
+    ].join('');
+    nav.innerHTML = infoRow + linksRow1 + linksRow2;
     return nav;
   }
+  // Inserts navigation into DOM, replacing placeholder if present or prepending to body. No return value.
   function insert(){
     var placeholder = document.getElementById('mcp-nav');
     var nav = buildNav();
@@ -29,6 +37,7 @@
       document.body.insertBefore(nav, document.body.firstChild);
     }
   }
+  // Fetches MCP manifest and updates info display with instance name, version, and hostname. No return value.
   async function updateInstance(){
     try{
       var res = await fetch('/.well-known/mcp/manifest.json');