Feat v0.3.0 workflow schema (#14)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

src/js/sw/surfaces/admin/workflows.js

@@ -4,7 +4,7 @@
 const { html } = window;
 const { useState, useEffect, useCallback } = hooks;
 
-const STAGE_MODES = ['chat_only', 'form_only', 'form_chat', 'review'];
+const STAGE_MODES = ['form', 'review', 'delegated', 'automated'];
 const ENTRY_MODES = ['public_link', 'team_only'];
 
 export default function WorkflowsSection() {
@@ -106,7 +106,7 @@ export default function WorkflowsSection() {
                         <span class="text-muted" style="font-size:11px;width:24px;">#${i + 1}</span>
                         <strong style="flex:1;">${s.name || `Stage ${i + 1}`}</strong>
                         <span class="badge">${s.stage_mode}</span>
-                        ${s.persona_id && html`<span class="badge badge-active">persona</span>`}
+                        <span class="badge">${s.audience || 'team'}</span>
                     </div>
                 `)}
                 ${stages.length === 0 && html`<div class="empty-hint">No stages defined</div>`}

src/js/sw/surfaces/team-admin/workflows.js

@@ -10,7 +10,9 @@ const { html } = window;
 const { useState, useEffect, useCallback } = hooks;
 
 const ENTRY_MODES = ['public_link', 'team_only'];
-const STAGE_MODES = ['form_only', 'form_chat', 'review', 'custom'];
+const STAGE_MODES = ['form', 'review', 'delegated', 'automated'];
+const STAGE_TYPES = ['simple', 'dynamic', 'automated'];
+const AUDIENCES = ['team', 'public', 'system'];
 const TABS = ['Workflows', 'Assignments', 'Monitor'];
 
 function _timeAgo(ts) {
@@ -253,6 +255,7 @@ function WorkflowEditor({ teamId, workflow, onBack }) {
                         <span class="text-muted" style="font-size:11px;width:24px;">#${i + 1}</span>
                         <strong style="flex:1;">${s.name || `Stage ${i + 1}`}</strong>
                         <span class="badge">${s.stage_mode || '\u2014'}</span>
+                        <span class="badge">${s.audience || 'team'}</span>
                         ${s.assignment_team_id && html`<span class="badge">team assign</span>`}
                         <button class="btn-small" onClick=${() => setEditingStage(s.id)}>Edit</button>
                         <button class="btn-small btn-danger" onClick=${() => deleteStage(s.id)}>\u00d7</button>
@@ -277,7 +280,10 @@ function WorkflowEditor({ teamId, workflow, onBack }) {
 
 function StageForm({ stage, teams, onSave, onCancel }) {
     const [name, setName] = useState(stage?.name || '');
-    const [mode, setMode] = useState(stage?.stage_mode || 'form_only');
+    const [mode, setMode] = useState(stage?.stage_mode || 'form');
+    const [audience, setAudience] = useState(stage?.audience || 'team');
+    const [stageType, setStageType] = useState(stage?.stage_type || 'simple');
+    const [starlarkHook, setStarlarkHook] = useState(stage?.starlark_hook || '');
     const [assignTeam, setAssignTeam] = useState(stage?.assignment_team_id || '');
     const [autoTransition, setAutoTransition] = useState(stage?.auto_transition || false);
     const [sla, setSla] = useState(stage?.sla_seconds || '');
@@ -286,6 +292,9 @@ function StageForm({ stage, teams, onSave, onCancel }) {
         onSave({
             name,
             stage_mode: mode,
+            audience,
+            stage_type: stageType,
+            starlark_hook: starlarkHook || null,
             assignment_team_id: assignTeam || null,
             auto_transition: autoTransition,
             sla_seconds: sla ? parseInt(sla, 10) : null,
@@ -302,10 +311,33 @@ function StageForm({ stage, teams, onSave, onCancel }) {
                 <div class="form-group">
                     <label>Mode</label>
                     <select value=${mode} onChange=${e => setMode(e.target.value)}>
-                        ${STAGE_MODES.map(m => html`<option key=${m} value=${m}>${m.replace('_', ' ')}</option>`)}
+                        ${STAGE_MODES.map(m => html`<option key=${m} value=${m}>${m}</option>`)}
                     </select>
                 </div>
             </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Audience</label>
+                    <select value=${audience} onChange=${e => setAudience(e.target.value)}>
+                        ${AUDIENCES.map(a => html`<option key=${a} value=${a}>${a}</option>`)}
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Stage Type</label>
+                    <select value=${stageType} onChange=${e => setStageType(e.target.value)}>
+                        ${STAGE_TYPES.map(t => html`<option key=${t} value=${t}>${t}</option>`)}
+                    </select>
+                </div>
+            </div>
+            ${stageType !== 'simple' && html`
+                <div class="form-row">
+                    <div class="form-group" style="flex:1;">
+                        <label>Starlark Hook</label>
+                        <input value=${starlarkHook} onInput=${e => setStarlarkHook(e.target.value)}
+                               placeholder="package_id:entry_point" />
+                    </div>
+                </div>
+            `}
             <div class="form-row">
                 <div class="form-group">
                     <label>Queue to Team</label>