setEditing(w)}>
${w.name}
/${w.slug}
@@ -169,3 +138,372 @@ export default function WorkflowsSection({ teamId }) {
`;
}
+
+// ── Workflow Editor (with Stage Editor) ─────
+
+function WorkflowEditor({ teamId, workflow, onBack }) {
+ const [stages, setStages] = useState([]);
+ const [personas, setPersonas] = useState([]);
+ const [teams, setTeams] = useState([]);
+ const [editingStage, setEditingStage] = useState(null); // null | 'new' | stage_id
+
+ const loadStages = useCallback(async () => {
+ try {
+ const [s, p] = await Promise.all([
+ sw.api.teams.workflowStages(teamId, workflow.id),
+ sw.api.teams.personas(teamId),
+ ]);
+ setStages(s || []);
+ setPersonas(p || []);
+ setTeams(sw.auth?.teams || []);
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }, [teamId, workflow.id]);
+
+ useEffect(() => { loadStages(); }, [loadStages]);
+
+ async function updateWorkflow(e) {
+ e.preventDefault();
+ const form = e.target;
+ try {
+ await sw.api.teams.updateWorkflow(teamId, workflow.id, {
+ name: form.name.value.trim(),
+ description: form.description.value.trim(),
+ entry_mode: form.entry_mode.value,
+ is_active: form.is_active.checked,
+ });
+ sw.toast('Workflow updated', 'success');
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function publishWorkflow() {
+ try {
+ await sw.api.teams.publishWorkflow(teamId, workflow.id);
+ sw.toast('Workflow published', 'success');
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function deleteWorkflow() {
+ const ok = await sw.confirm('Delete this workflow? All stages, versions, and instances will be deleted.', true);
+ if (!ok) return;
+ try {
+ await sw.api.teams.deleteWorkflow(teamId, workflow.id);
+ sw.toast('Workflow deleted', 'success');
+ onBack();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function addStage(data) {
+ try {
+ await sw.api.teams.createWorkflowStage(teamId, workflow.id, data);
+ setEditingStage(null);
+ loadStages();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function updateStage(stageId, data) {
+ try {
+ await sw.api.teams.updateWorkflowStage(teamId, workflow.id, stageId, data);
+ setEditingStage(null);
+ loadStages();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function deleteStage(stageId) {
+ const ok = await sw.confirm('Delete this stage?', true);
+ if (!ok) return;
+ try {
+ await sw.api.teams.deleteWorkflowStage(teamId, workflow.id, stageId);
+ loadStages();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ return html`
+
+
+
+
+
+
Stages (${stages.length})
+
+
+
+
+
+ ${stages.map((s, i) => html`
+
+ #${i + 1}
+ ${s.name || `Stage ${i + 1}`}
+ ${s.stage_mode || '\u2014'}
+ ${s.persona_id && html`persona`}
+ ${s.assignment_team_id && html`team assign`}
+
+
+
+ `)}
+ ${stages.length === 0 && html`
No stages defined
`}
+
+
+ ${editingStage && html`
+ <${StageForm}
+ stage=${editingStage === 'new' ? null : stages.find(s => s.id === editingStage)}
+ personas=${personas}
+ teams=${teams}
+ onSave=${(data) => editingStage === 'new' ? addStage(data) : updateStage(editingStage, data)}
+ onCancel=${() => setEditingStage(null)}
+ />
+ `}
+
+ `;
+}
+
+// ── Stage Form ──────────────────────────────
+
+function StageForm({ stage, personas, teams, onSave, onCancel }) {
+ const [name, setName] = useState(stage?.name || '');
+ const [mode, setMode] = useState(stage?.stage_mode || 'chat_only');
+ const [personaId, setPersonaId] = useState(stage?.persona_id || '');
+ const [assignTeam, setAssignTeam] = useState(stage?.assignment_team_id || '');
+ const [historyMode, setHistoryMode] = useState(stage?.history_mode || 'full');
+ const [autoTransition, setAutoTransition] = useState(stage?.auto_transition || false);
+ const [sla, setSla] = useState(stage?.sla_seconds || '');
+
+ function submit() {
+ onSave({
+ name,
+ stage_mode: mode,
+ persona_id: personaId || null,
+ assignment_team_id: assignTeam || null,
+ history_mode: historyMode,
+ auto_transition: autoTransition,
+ sla_seconds: sla ? parseInt(sla, 10) : null,
+ });
+ }
+
+ return html`
+
+
+
+
+
+
+
+
+
+
+ `;
+}
+
+// ── Tab 2: Assignments ──────────────────────
+
+function AssignmentsTab({ teamId }) {
+ const [claimed, setClaimed] = useState([]);
+ const [unassigned, setUnassigned] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ const load = useCallback(async () => {
+ try {
+ const [c, u] = await Promise.all([
+ sw.api.teams.assignments(teamId, { status: 'claimed' }),
+ sw.api.teams.assignments(teamId, { status: 'unassigned' }),
+ ]);
+ setClaimed(c || []);
+ setUnassigned(u || []);
+ } catch (e) { sw.toast(e.message, 'error'); }
+ finally { setLoading(false); }
+ }, [teamId]);
+
+ useEffect(() => { load(); }, [load]);
+
+ // WS live updates
+ useEffect(() => {
+ const off1 = sw.on('workflow.assigned', load);
+ const off2 = sw.on('workflow.claimed', load);
+ const off3 = sw.on('workflow.unclaimed', load);
+ return () => { off1(); off2(); off3(); };
+ }, [teamId]);
+
+ async function claim(id) {
+ try {
+ await sw.api.workflowAssignments.claim(id);
+ load();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function unclaim(id) {
+ try {
+ await sw.api.workflowAssignments.unclaim(id);
+ load();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ async function complete(id) {
+ try {
+ await sw.api.workflowAssignments.complete(id);
+ sw.toast('Assignment completed', 'success');
+ load();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ if (loading) return html`
Loading\u2026
`;
+
+ const userId = sw.auth?.user?.id;
+
+ return html`
+
+
My Active (${claimed.length})
+
+ ${claimed.map(a => html`
+
+
+ ${a.workflow_name || 'Workflow'}
+ ${a.stage_name || `Stage ${a.stage}`}
+ ${a.sla_breached && html`SLA`}
+
+
+
+
+
+
+
+ `)}
+ ${claimed.length === 0 && html`
No claimed assignments
`}
+
+
+
Available (${unassigned.length})
+
+ ${unassigned.map(a => html`
+
+
+ ${a.workflow_name || 'Workflow'}
+ ${a.stage_name || `Stage ${a.stage}`}
+ ${_timeAgo(a.created_at)}
+
+
+
+ `)}
+ ${unassigned.length === 0 && html`
No available assignments
`}
+
+
+ `;
+}
+
+// ── Tab 3: Monitor ──────────────────────────
+
+function MonitorTab({ teamId }) {
+ const [instances, setInstances] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ const load = useCallback(async () => {
+ try {
+ const data = await sw.api.teams.workflowInstances(teamId);
+ setInstances(data || []);
+ } catch (e) { sw.toast(e.message, 'error'); }
+ finally { setLoading(false); }
+ }, [teamId]);
+
+ useEffect(() => { load(); }, [load]);
+
+ async function cancelInstance(channelId) {
+ const ok = await sw.confirm('Cancel this workflow instance? All open assignments will be cancelled.', true);
+ if (!ok) return;
+ try {
+ await sw.api.teams.cancelWorkflowInstance(teamId, channelId);
+ sw.toast('Instance cancelled', 'success');
+ load();
+ } catch (e) { sw.toast(e.message, 'error'); }
+ }
+
+ if (loading) return html`
Loading\u2026
`;
+
+ return html`
+
+
Active Instances (${instances.length})
+
+ ${instances.map(inst => html`
+
+
+ ${inst.workflow_name}
+ ${inst.stage_name || `Stage ${inst.current_stage}`}
+ ${inst.sla_breached && html`SLA breached`}
+ Age: ${_formatDuration(inst.age_seconds)}
+
+
+
+
+
+
+ `)}
+ ${instances.length === 0 && html`
No active instances
`}
+
+
+ `;
+}