Changeset 0.27.1 (#167)

src/js/ui-core.js

@@ -823,6 +823,7 @@ const UI = {
         const ac = App.activeConversation;
         if (!ac || ac.type === 'direct') {
             el.style.display = 'none';
+            this.updateWorkflowStageBar();
             return;
         }
 
@@ -852,6 +853,71 @@ const UI = {
         }
         el.innerHTML = html;
         el.style.display = '';
+        this.updateWorkflowStageBar();
+    },
+    // Fetches workflow status and renders stage dots, name, advance/reject buttons.
+    updateWorkflowStageBar() {
+        const el = document.getElementById('workflowStageBar');
+        if (!el) return;
+
+        const ac = App.activeConversation;
+        if (!ac || ac.type !== 'workflow') {
+            el.style.display = 'none';
+            return;
+        }
+
+        // Fetch status (async, non-blocking — renders on completion)
+        const base = window.__BASE__ || '';
+        API._get(`/api/v1/channels/${ac.id}/workflow/status`).then(ws => {
+            if (!ws || !ws.workflow_id) {
+                el.style.display = 'none';
+                return;
+            }
+
+            // Cache on App for WS event handler access
+            App._workflowStatus = ws;
+
+            // Load stage definitions for name display
+            API._get(`/api/v1/workflows/${ws.workflow_id}`).then(wf => {
+                const stages = wf.stages || [];
+                const current = ws.current_stage || 0;
+                const status = ws.status || 'active';
+                const totalStages = stages.length || 1;
+                const stageName = stages[current] ? stages[current].name : 'Stage ' + current;
+
+                // Step dots
+                let dots = '';
+                for (let i = 0; i < totalStages; i++) {
+                    const cls = i < current ? 'completed' : i === current ? 'current' : '';
+                    dots += '<div class="wf-bar-step ' + cls + '" title="Stage ' + i + (stages[i] ? ': ' + esc(stages[i].name) : '') + '"></div>';
+                }
+
+                // Status badge
+                const statusCls = status === 'completed' ? 'completed' : status === 'stale' ? 'stale' : 'active';
+                const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);
+
+                // Advance/reject buttons (only for active workflows, admin or team members)
+                let actions = '';
+                if (status === 'active' && API.isAdmin) {
+                    actions =
+                        '<button class="btn-small btn-primary" onclick="advanceWorkflowStage()">Advance ▸</button>' +
+                        (current > 0 ? '<button class="btn-small btn-danger" onclick="rejectWorkflowStage()">◂ Reject</button>' : '');
+                }
+
+                el.innerHTML =
+                    '<div class="wf-bar-steps">' + dots + '</div>' +
+                    '<span class="wf-bar-stage-name">' + esc(stageName) + '</span>' +
+                    '<span class="wf-bar-status ' + statusCls + '">' + esc(statusLabel) + '</span>' +
+                    '<span class="wf-bar-spacer"></span>' +
+                    '<span style="font-size:11px;color:var(--text-3)">Step ' + (current + 1) + ' of ' + totalStages + '</span>' +
+                    (actions ? '<div class="wf-bar-actions">' + actions + '</div>' : '');
+                el.style.display = '';
+            }).catch(() => {
+                el.style.display = 'none';
+            });
+        }).catch(() => {
+            el.style.display = 'none';
+        });
     },
 
     showEditInline(messageId, currentContent) {