thatcher 1.0.57 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thatcher",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "description": "A config-driven application framework for building data-intensive web apps without code.",
   "main": "src/index.js",
   "type": "module",

package/src/lib/config-generator-engine.js

@@ -54,6 +54,16 @@ export class ConfigGeneratorEngine {
     return this.masterConfig?.system?.multi_tenancy?.enabled === true;
   }
 
+  updateWorkflow(workflowName, updatedDef) {
+    if (!workflowName || typeof workflowName !== 'string') {
+      throw new Error('[ConfigGeneratorEngine] updateWorkflow: workflowName required');
+    }
+    const nextWorkflows = { ...(this.masterConfig.workflows || {}), [workflowName]: updatedDef };
+    this.masterConfig = deepFreeze({ ...this.masterConfig, workflows: nextWorkflows });
+    this.specCache.clear();
+    return this;
+  }
+
   registerPlugin(entityName, plugin = {}) {
     if (!entityName || typeof entityName !== 'string') {
       throw new Error('[ConfigGeneratorEngine] registerPlugin: entityName required');

package/src/lib/workflow-engine.js

@@ -30,6 +30,11 @@ const log = createLogger('[WorkflowEngine]');
 const LOCKOUT_SECONDS = 300; // 5 minutes default
 const workflowCache = new Map();
 
+export function clearWorkflowCache(workflowName) {
+  if (workflowName) workflowCache.delete(workflowName);
+  else workflowCache.clear();
+}
+
 function getWorkflowDef(workflowName) {
   if (workflowCache.has(workflowName)) {
     return workflowCache.get(workflowName);

package/src/server/server.js

@@ -114,6 +114,10 @@ export function createServer(options) {
           return await handleListMemberships(req, res, thatcher, configEngine);
         }
 
+        if (req.method === 'POST' && entity === 'workflow' && id && action === 'update') {
+          return await handleUpdateWorkflow(req, res, id, thatcher, configEngine);
+        }
+
         // Check if user has custom route for this
         const userRoutePath = path.join(process.cwd(), 'app/api', ...parts, 'route.js');
         const routeExists = await fileExists(userRoutePath);
@@ -341,6 +345,85 @@ async function handleGenericCrud(req, res, entity, id, action, thatcher, configE
   }
 }
 
+async function handleUpdateWorkflow(req, res, workflowName, thatcher, configEngineArg) {
+  const user = await resolveRequestUser(req);
+  if (!user) {
+    res.writeHead(401, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Authentication required' }));
+    return;
+  }
+  const { isPartner } = await import('../ui/permissions-ui.js');
+  if (!isPartner(user)) {
+    res.writeHead(403, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Forbidden' }));
+    return;
+  }
+
+  let configEngine = configEngineArg || thatcher?.configEngine || globalThis.__thatcherConfigEngine;
+  if (!configEngine) {
+    const { getConfigEngineSync } = await import('../lib/config-generator-engine.js');
+    configEngine = getConfigEngineSync();
+  }
+  const existingDef = configEngine.getConfig().workflows?.[workflowName];
+  if (!existingDef) {
+    res.writeHead(404);
+    res.end(JSON.stringify({ error: `Workflow "${workflowName}" not found` }));
+    return;
+  }
+
+  let body;
+  try {
+    body = await readBody(req);
+  } catch (e) {
+    res.writeHead(400);
+    res.end(JSON.stringify({ error: e.message }));
+    return;
+  }
+  const stages = Array.isArray(body?.stages) ? body.stages : null;
+  if (!stages || !stages.length) {
+    res.writeHead(400);
+    res.end(JSON.stringify({ error: 'stages array required and must be non-empty' }));
+    return;
+  }
+  const seenNames = new Set();
+  for (const s of stages) {
+    if (!s || typeof s.name !== 'string' || !s.name.trim()) {
+      res.writeHead(400);
+      res.end(JSON.stringify({ error: 'every stage requires a non-empty name' }));
+      return;
+    }
+    if (seenNames.has(s.name)) {
+      res.writeHead(400);
+      res.end(JSON.stringify({ error: `duplicate stage name "${s.name}"` }));
+      return;
+    }
+    seenNames.add(s.name);
+  }
+  const validNames = new Set(stages.map(s => s.name));
+  for (const s of stages) {
+    for (const target of (s.forward || [])) {
+      if (!validNames.has(target)) {
+        res.writeHead(400);
+        res.end(JSON.stringify({ error: `stage "${s.name}" has a forward transition to unknown stage "${target}"` }));
+        return;
+      }
+    }
+  }
+
+  try {
+    const updatedDef = { ...existingDef, stages };
+    configEngine.updateWorkflow(workflowName, updatedDef);
+    const { clearWorkflowCache } = await import('../lib/workflow-engine.js');
+    clearWorkflowCache(workflowName);
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ ok: true, workflow: workflowName, stageCount: stages.length }));
+  } catch (err) {
+    apiLog.error(err.message);
+    res.writeHead(500);
+    res.end(JSON.stringify({ error: err.message }));
+  }
+}
+
 async function handleListMemberships(req, res, thatcher, configEngineArg) {
   const user = await resolveRequestUser(req);
   if (!user) {

package/src/ui/page-handler-admin.js

@@ -6,6 +6,7 @@ import { renderSettingsTemplates, renderSettingsChecklists, renderSettingsEntity
 import { renderSettingsNotifications, renderSettingsIntegrations, renderSettingsRecreation, renderSettingsReviewSettings, renderSettingsFileReview, renderSettingsMwrPermissions } from '@/ui/settings/review.js';
 import { renderChecklistsManagement } from '@/ui/checklist-renderer.js';
 import { renderJobManagement } from '@/ui/job-management-renderer.js';
+import { renderWorkflowList, renderWorkflowEditor } from '@/ui/workflow-builder-renderer.js';
 import { isPartner, isManager } from '@/ui/permissions-ui.js';
 import { getSystemConfig, getSettingsCounts, getAuditData, getSystemHealth, renderBuildLogsContent } from '@/ui/page-handler-helpers.js';
 import { fileURLToPath } from 'url';
@@ -127,5 +128,19 @@ export async function handleAdminPage(normalized, segments, user) {
     let logs = []; try { logs = (await list('job_log', {})).slice(0, 20); } catch {}
     return renderJobManagement(user, jobs, logs);
   }
+  if (normalized === '/admin/workflows') {
+    const { getConfigEngineSync } = await import('@/lib/config-generator-engine.js');
+    const engine = getConfigEngineSync();
+    const config = engine.getConfig();
+    return renderWorkflowList(user, Object.keys(config.workflows || {}));
+  }
+  if (segments.length === 3 && segments[1] === 'workflows') {
+    const { getConfigEngineSync } = await import('@/lib/config-generator-engine.js');
+    const engine = getConfigEngineSync();
+    const config = engine.getConfig();
+    const workflowDef = config.workflows?.[segments[2]];
+    if (!workflowDef) return null;
+    return renderWorkflowEditor(user, segments[2], workflowDef);
+  }
   return null;
 }

package/src/ui/page-handler.js

@@ -28,13 +28,13 @@ function reqUrl(req) {
 
 async function handleEngagementDetail(user, engId) {
   if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-  const engagement = await get('engagement', engId);
+  const engagement = await get('engagement', engId, { user });
   if (!engagement) return null;
   let client = null; try { client = engagement.client_id ? await get('client', engagement.client_id) : null; } catch {}
-  let rfis = []; try { rfis = await list('rfi', { engagement_id: engId }); } catch {}
+  let rfis = []; try { rfis = await list('rfi', { engagement_id: engId }, { user }); } catch {}
   let sections = [];
   try {
-    sections = await list('rfi_section', { engagement_id: engId }, { sort: { field: 'sort_order', dir: 'ASC' } });
+    sections = await list('rfi_section', { engagement_id: engId }, { sort: { field: 'sort_order', dir: 'ASC' }, user });
   } catch {}
   let team = null; try { team = engagement.team_id ? await get('team', engagement.team_id) : null; } catch {}
   let assignedUsers = [];
@@ -49,7 +49,7 @@ async function handleEngagementDetail(user, engId) {
 }
 async function handleEngagementList(user, req) {
   if (!canList(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'list');
-  let engagements = await list('engagement', {});
+  let engagements = await list('engagement', {}, { user });
   const clientMap = Object.fromEntries((await list('client', {})).map(c => [c.id, c.name]));
   engagements = engagements.map(e => ({ ...e, client_name: clientMap[e.client_id] || e.client_name || '-' }));
   const spec = getSpec('engagement'); if (spec) engagements = resolveRefFields(engagements, spec);
@@ -91,14 +91,14 @@ async function handleGenericEntityView(user, entityName, id) {
 }
 async function handleClientSubRoute(user, clientId, subRoute) {
   if (!canView(user, 'client')) return renderAccessDenied(user, 'client', 'view');
-  const client = await get('client', clientId); if (!client) return null;
+  const client = await get('client', clientId, { user }); if (!client) return null;
   if (isClientUser(user) && user.client_id && user.client_id !== clientId) return renderAccessDenied(user, 'client', 'view');
   if (subRoute === 'dashboard' || subRoute === 'users') return renderClientDashboard(user, client, await getClientDashboardStats(clientId));
   if (subRoute === 'progress') {
-    let engagements = []; try { engagements = (await list('engagement', {})).filter(e => e.client_id === clientId); } catch {}
+    let engagements = []; try { engagements = (await list('engagement', {}, { user })).filter(e => e.client_id === clientId); } catch {}
     const spec = getSpec('engagement'); if (spec) engagements = resolveRefFields(engagements, spec);
     let rfiStats = { total: 0, responded: 0, overdue: 0 };
-    try { const allRfis = (await list('rfi', {})).filter(r => engagements.some(e => e.id === r.engagement_id)); const now = Math.floor(Date.now() / 1000); rfiStats = { total: allRfis.length, responded: allRfis.filter(r => r.status === 'responded' || r.status === 'completed').length, overdue: allRfis.filter(r => r.due_date && r.due_date < now && r.status !== 'closed').length }; } catch {}
+    try { const allRfis = (await list('rfi', {}, { user })).filter(r => engagements.some(e => e.id === r.engagement_id)); const now = Math.floor(Date.now() / 1000); rfiStats = { total: allRfis.length, responded: allRfis.filter(r => r.status === 'responded' || r.status === 'completed').length, overdue: allRfis.filter(r => r.due_date && r.due_date < now && r.status !== 'closed').length }; } catch {}
     return renderClientProgress(user, client, engagements, rfiStats);
   }
   return null;
@@ -106,7 +106,7 @@ async function handleClientSubRoute(user, clientId, subRoute) {
 async function handleGenericEntityEdit(user, entityName, id) {
   const spec = getSpec(entityName); if (!spec) return null;
   if (!canEdit(user, entityName)) return renderAccessDenied(user, entityName, 'edit');
-  const item = await get(entityName, id); if (!item) return null;
+  const item = await get(entityName, id, { user }); if (!item) return null;
   if (item.team_id && user.team_id && item.team_id !== user.team_id && !isPartner(user)) return renderAccessDenied(user, entityName, 'edit');
   const resolvedSpec = resolveEnumOptions(spec);
   const { renderEntityForm: lazyEntityForm } = await lazyRenderer('entity-renderer.js');
@@ -131,7 +131,7 @@ export async function handlePage(pathname, req, res) {
   const user = await getUser();
   if (!user) { res.writeHead(302, { Location: '/login' }); res.end(); return REDIRECT; }
   if (normalized === '/unauthorized') return renderAccessDenied(user, 'system', 'access');
-  if (normalized === '/notifications') { let notifs=[]; try{notifs=await list('notification',{user_id:user.id},{sort:{field:'created_at',dir:'DESC'},limit:100})}catch{} const{renderNotificationsPage}=await lazyRenderer('notifications-renderer.js'); return renderNotificationsPage(user,notifs); }
+  if (normalized === '/notifications') { let notifs=[]; try{notifs=await list('notification',{user_id:user.id},{sort:{field:'created_at',dir:'DESC'},limit:100,user})}catch{} const{renderNotificationsPage}=await lazyRenderer('notifications-renderer.js'); return renderNotificationsPage(user,notifs); }
   if (normalized === '/' || normalized === '/dashboard') return renderDashboard(user, await getDashboardStats(user));
   if (normalized.startsWith('/admin/') || normalized === '/admin/jobs') return handleAdminPage(normalized, segments, user);
   if (segments[0] === 'client' && segments.length === 3 && ['dashboard', 'users', 'progress'].includes(segments[2])) return handleClientSubRoute(user, segments[1], segments[2]);
@@ -141,7 +141,7 @@ export async function handlePage(pathname, req, res) {
     let myReviews = [], sharedReviews = [], recentActivity = [];
     // OR across two columns: busybase eq() is single-column, so fetch + filter in JS.
     try {
-      const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' } });
+      const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' }, user });
       myReviews = reviews.filter(r => r.created_by === user.id || r.assigned_to === user.id).slice(0, 100);
     } catch {}
     // Old JOIN collaborator -> two-step: collaborator rows for this user, then their reviews.
@@ -149,12 +149,12 @@ export async function handlePage(pathname, req, res) {
       const collabs = await list('collaborator', { user_id: user.id });
       const ids = new Set(collabs.map(c => c.review_id));
       if (ids.size) {
-        const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' } });
+        const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' }, user });
         sharedReviews = reviews.filter(r => ids.has(r.id)).slice(0, 100);
       }
     } catch {}
     try {
-      recentActivity = (await list('audit_logs', { entity_type: 'review' }, { sort: { field: 'created_at', dir: 'DESC' } })).slice(0, 50);
+      recentActivity = (await list('audit_logs', { entity_type: 'review' }, { sort: { field: 'created_at', dir: 'DESC' }, user })).slice(0, 50);
     } catch {}
     const all = [...myReviews, ...sharedReviews];
     const stats = { myReviews, sharedReviews, recentActivity, totalReviews: all.length, activeReviews: all.filter(r => (r.status||'open') !== 'archived' && (r.status||'open') !== 'completed' && (r.status||'open') !== 'closed').length, flaggedReviews: all.filter(r => r.flagged).length, overdueReviews: 0 };
@@ -179,11 +179,11 @@ export async function handlePage(pathname, req, res) {
     let candidates = []; let reviewMap = {};
     try {
       // Old: highlights with a non-trivial comment (LIKE '%?' OR length>40), newest 50.
-      const all = await list('highlight', {}, { sort: { field: 'created_at', dir: 'DESC' } });
+      const all = await list('highlight', {}, { sort: { field: 'created_at', dir: 'DESC' }, user });
       candidates = all.filter(c => c.comment && (c.comment.includes('?') || c.comment.length > 40)).slice(0, 50);
       const revIds = [...new Set(candidates.map((c) => c.review_id))];
       if (revIds.length) {
-        const reviews = await list('review', {});
+        const reviews = await list('review', {}, { user });
         const byId = new Map(reviews.map(r => [r.id, r.name || '-']));
         reviewMap = Object.fromEntries(revIds.map(id => [id, byId.get(id) || '-']));
       }
@@ -194,19 +194,19 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 2 && (segments[0] === 'engagements' || segments[0] === 'engagement') && segments[1] !== 'new') return handleEngagementDetail(user, segments[1]);
   if (segments[0] === 'engagement' && segments.length === 3 && segments[2] === 'letter') {
     if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-    const engagement = await get('engagement', segments[1]); if (!engagement) return null;
+    const engagement = await get('engagement', segments[1], { user }); if (!engagement) return null;
     return renderLetterWorkflow(user, engagement);
   }
   if (segments[0] === 'engagement' && segments.length === 3 && segments[2] === 'report') {
     if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-    const engId = segments[1]; const engagement = await get('engagement', engId); if (!engagement) return null;
+    const engId = segments[1]; const engagement = await get('engagement', engId, { user }); if (!engagement) return null;
     let client=null,team=null,rfis=[],reviews=[],highlights=[],activity=[];
     try{client=engagement.client_id?await get('client',engagement.client_id):null}catch{}
     try{team=engagement.team_id?await get('team',engagement.team_id):null}catch{}
-    try{rfis=await list('rfi',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'}})}catch{}
-    try{reviews=await list('review',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'}})}catch{}
-    try{const rids=new Set(reviews.map(r=>r.id));if(rids.size){const allHl=await list('highlight',{});highlights=allHl.filter(h=>rids.has(h.review_id))}}catch{}
-    try{activity=(await list('audit_logs',{entity_type:'engagement',entity_id:engId},{sort:{field:'created_at',dir:'DESC'}})).slice(0,20)}catch{}
+    try{rfis=await list('rfi',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'},user})}catch{}
+    try{reviews=await list('review',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'},user})}catch{}
+    try{const rids=new Set(reviews.map(r=>r.id));if(rids.size){const allHl=await list('highlight',{},{user});highlights=allHl.filter(h=>rids.has(h.review_id))}}catch{}
+    try{activity=(await list('audit_logs',{entity_type:'engagement',entity_id:engId},{sort:{field:'created_at',dir:'DESC'},user})).slice(0,20)}catch{}
     const{renderFlexupReport}=await lazyRenderer('flexup-report-renderer.js');
     return renderFlexupReport(user,engagement,client,rfis,reviews,highlights,activity,team);
   }
@@ -215,7 +215,7 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 1 && segments[0] === 'rfi') return handleRfiList(user);
   if (segments.length === 1 && segments[0] === 'client') {
     if (!canList(user, 'client')) return renderAccessDenied(user, 'client', 'list');
-    let clients = await list('client', {});
+    let clients = await list('client', {}, { user });
     if (isClientUser(user) && user.client_id) clients = clients.filter(c => c.id === user.client_id);
     return renderClientList(user, clients);
   }
@@ -261,7 +261,7 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 2 && segments[0] === 'client' && segments[1] !== 'new') {
     if (!canView(user, 'client')) return renderAccessDenied(user, 'client', 'view');
     if (isClientUser(user) && user.client_id && user.client_id !== segments[1]) return renderAccessDenied(user, 'client', 'view');
-    const client = await get('client', segments[1]); if (!client) return null;
+    const client = await get('client', segments[1], { user }); if (!client) return null;
     return renderClientDashboard(user, client, await getClientDashboardStats(segments[1]));
   }
   if (segments.length === 2) return handleGenericEntityView(user, segments[0], segments[1]);

package/src/ui/workflow-builder-renderer.js

@@ -0,0 +1,109 @@
+import { page } from '@/ui/layout.js';
+import { esc } from '@/ui/render-helpers.js';
+
+export function renderWorkflowList(user, workflowNames) {
+  const rows = workflowNames.map(name =>
+    `<tr data-row data-navigate="/admin/workflows/${esc(name)}" style="cursor:pointer"><td>${esc(name)}</td></tr>`
+  ).join('') || '<tr><td>No workflows configured</td></tr>';
+  const content = `<div class="page-header"><h1 class="page-title">Workflows</h1></div>
+    <div class="table-wrap"><table class="data-table"><thead><tr><th>Name</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+  return page(user, 'Workflows | Thatcher', [{ href: '/admin/settings', label: 'Settings' }, { label: 'Workflows' }], content);
+}
+
+function stageRow(stage, allStageNames) {
+  const forwardOpts = allStageNames.filter(n => n !== stage.name).map(n =>
+    `<label style="display:inline-flex;align-items:center;gap:4px;margin-right:10px"><input type="checkbox" name="forward_${esc(stage.name)}" value="${esc(n)}"${(stage.forward || []).includes(n) ? ' checked' : ''}>${esc(n)}</label>`
+  ).join('');
+  return `<div class="card-clean" style="margin-bottom:12px" data-stage-card="${esc(stage.name)}">
+    <div class="card-clean-body">
+      <div style="display:flex;gap:12px;align-items:center;margin-bottom:8px">
+        <input type="text" name="name_${esc(stage.name)}" value="${esc(stage.name)}" placeholder="stage name" style="width:140px" readonly>
+        <input type="text" name="label_${esc(stage.name)}" value="${esc(stage.label || '')}" placeholder="Label" style="flex:1">
+        <input type="text" name="role_${esc(stage.name)}" value="${esc((stage.requires_role || []).join(','))}" placeholder="requires_role (comma-separated)" style="width:200px">
+        <button type="button" class="btn-ghost-clean" data-action="removeStage" data-args='["${esc(stage.name)}"]'>Remove</button>
+      </div>
+      <div style="font-size:12px;color:var(--color-text-muted,#666)">Forward transitions:</div>
+      <div>${forwardOpts || '<span style="font-size:12px;color:var(--color-text-muted,#666)">(no other stages)</span>'}</div>
+    </div>
+  </div>`;
+}
+
+export function renderWorkflowEditor(user, workflowName, workflowDef) {
+  const stages = workflowDef?.stages || [];
+  const stageNames = stages.map(s => s.name);
+  const stageCards = stages.map(s => stageRow(s, stageNames)).join('');
+
+  const content = `<div class="page-header"><h1 class="page-title">Workflow: ${esc(workflowName)}</h1></div>
+    <form id="workflow-form">
+      <div id="stage-list">${stageCards}</div>
+      <div style="margin:16px 0;display:flex;gap:8px">
+        <input type="text" id="new-stage-name" placeholder="new stage name" style="width:200px">
+        <button type="button" class="btn-ghost-clean" data-action="addStage">Add Stage</button>
+      </div>
+      <button type="button" class="btn-primary-clean" data-action="saveWorkflow" data-args='["${esc(workflowName)}"]'>Save Workflow</button>
+      <span id="save-status" style="margin-left:12px;font-size:13px"></span>
+    </form>`;
+
+  const script = `(function(){
+    function collectStages(){
+      var cards=document.querySelectorAll('[data-stage-card]');
+      var stages=[];
+      cards.forEach(function(card,idx){
+        var origName=card.getAttribute('data-stage-card');
+        var nameInput=card.querySelector('input[name^="name_"]');
+        var labelInput=card.querySelector('input[name^="label_"]');
+        var roleInput=card.querySelector('input[name^="role_"]');
+        var checked=Array.prototype.slice.call(card.querySelectorAll('input[type="checkbox"]:checked')).map(function(cb){return cb.value});
+        var roles=(roleInput.value||'').split(',').map(function(s){return s.trim()}).filter(Boolean);
+        stages.push({name:origName,label:labelInput.value||origName,order:idx,forward:checked,requires_role:roles});
+      });
+      return stages;
+    }
+    window.addStage=function(){
+      var input=document.getElementById('new-stage-name');
+      var name=(input.value||'').trim();
+      if(!name)return;
+      if(document.querySelector('[data-stage-card="'+name+'"]')){alert('Stage already exists');return}
+      var div=document.createElement('div');
+      div.className='card-clean';
+      div.style.marginBottom='12px';
+      div.setAttribute('data-stage-card',name);
+      var body=document.createElement('div');
+      body.className='card-clean-body';
+      var row=document.createElement('div');
+      row.style.cssText='display:flex;gap:12px;align-items:center;margin-bottom:8px';
+      var nameInput=document.createElement('input');
+      nameInput.type='text';nameInput.name='name_'+name;nameInput.value=name;nameInput.readOnly=true;nameInput.style.width='140px';
+      var labelInput=document.createElement('input');
+      labelInput.type='text';labelInput.name='label_'+name;labelInput.placeholder='Label';labelInput.style.flex='1';
+      var roleInput=document.createElement('input');
+      roleInput.type='text';roleInput.name='role_'+name;roleInput.placeholder='requires_role (comma-separated)';roleInput.style.width='200px';
+      var removeBtn=document.createElement('button');
+      removeBtn.type='button';removeBtn.className='btn-ghost-clean';removeBtn.textContent='Remove';
+      removeBtn.addEventListener('click',function(){window.removeStage(name)});
+      row.appendChild(nameInput);row.appendChild(labelInput);row.appendChild(roleInput);row.appendChild(removeBtn);
+      var hint=document.createElement('div');
+      hint.style.cssText='font-size:12px;color:var(--color-text-muted,#666)';
+      hint.textContent='Forward transitions: (save and reload to link)';
+      body.appendChild(row);body.appendChild(hint);
+      div.appendChild(body);
+      document.getElementById('stage-list').appendChild(div);
+      input.value='';
+    };
+    window.removeStage=function(name){
+      var card=document.querySelector('[data-stage-card="'+name+'"]');
+      if(card)card.remove();
+    };
+    window.saveWorkflow=function(workflowName){
+      var stages=collectStages();
+      var status=document.getElementById('save-status');
+      status.textContent='Saving...';
+      fetch('/api/workflow/'+workflowName+'/update',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({stages:stages})})
+        .then(function(r){return r.json().then(function(d){return {ok:r.ok,d:d}})})
+        .then(function(res){if(res.ok){status.textContent='Saved';status.style.color='var(--color-success,#22c55e)';setTimeout(function(){location.reload()},500)}else{status.textContent='Error: '+(res.d.error||'save failed');status.style.color='var(--color-danger,#ef4444)'}})
+        .catch(function(err){status.textContent='Error: '+err.message;status.style.color='var(--color-danger,#ef4444)'});
+    };
+  })();`;
+
+  return page(user, `Workflow: ${workflowName} | Thatcher`, [{ href: '/admin/settings', label: 'Settings' }, { href: '/admin/workflows', label: 'Workflows' }, { label: workflowName }], content, [script]);
+}