// AUTOMATION — WORKFLOWS sub-platform (5 tabs: Dashboard · Active Runs · Performance · Designer · Activity) const { useState: useWspState } = React; const Twsp = window.ArbiterTokens; // ── Performance ────────────────────────────────────────────────────────── function AutoWorkflowsPerformance({ data }) { const au = window.__au; // Group by category const byCat = {}; data.workflows.forEach(w => { if (!byCat[w.category]) byCat[w.category] = { runs: 0, minutes: 0, successSum: 0, count: 0, active: 0 }; byCat[w.category].runs += w.totalRuns; byCat[w.category].minutes += w.avgMinutes * w.totalRuns; byCat[w.category].successSum += w.successRate; byCat[w.category].count += 1; byCat[w.category].active += w.activeRuns; }); const catRows = Object.entries(byCat).map(([c, d]) => ({ category: c, runs: d.runs, workflows: d.count, active: d.active, avgSuccess: d.successSum / d.count, avgMin: d.runs > 0 ? d.minutes / d.runs : 0, })).sort((a, b) => b.runs - a.runs); // Throughput (reuse daily14) const daily = data.analytics.daily14; const maxDaily = Math.max(...daily.map(d => d.runs)); const avgDaily = Math.round(daily.reduce((s, d) => s + d.runs, 0) / daily.length); // Runtime distribution histogram const durBuckets = [ { label: '< 30 min', min: 0, max: 30, color: au.emerald }, { label: '30–120 min', min: 30, max: 120, color: au.lime }, { label: '2–6 hrs', min: 120, max: 360, color: au.amber }, { label: '6+ hrs', min: 360, max: 99999,color: au.crimson }, ].map(b => ({ ...b, count: data.workflows.filter(w => w.avgMinutes >= b.min && w.avgMinutes < b.max).length })); const maxBucket = Math.max(...durBuckets.map(b => b.count), 1); // Reliability ranking const ranked = [...data.workflows].sort((a, b) => b.successRate - a.successRate).slice(0, 6); const bottom = [...data.workflows].sort((a, b) => a.successRate - b.successRate).slice(0, 3); return (
Runtime distribution, reliability ranking, and category throughput. {avgDaily} runs/day avg · {maxDaily} peak (14d).} />
Runs/day avg{avgDaily}
Peak (14d){maxDaily}
Longest workflow{Math.max(...data.workflows.map(w => w.avgMinutes))} min
Fastest workflow{Math.min(...data.workflows.map(w => w.avgMinutes))} min
Failure rate{(100 - data.kpis.successRatePct).toFixed(1)}%
{/* Throughput chart */}
Workflow throughput — last 14 days avg {avgDaily} / day · peak {maxDaily}
{daily.map(d => (
{d.runs}
{d.d}
))}
{/* Category table */}
Performance by category
{catRows.map(c => { const rc = c.avgSuccess >= 99 ? au.emerald : c.avgSuccess >= 97 ? au.lime : c.avgSuccess >= 90 ? au.amber : au.crimson; return ( ); })}
Category Workflows Runs YTD Active Avg min Success
{c.category} {c.workflows} {au.num(c.runs)} {c.active} {c.avgMin.toFixed(0)}
{c.avgSuccess.toFixed(1)}%
{/* Runtime distribution */}
Runtime distribution
{durBuckets.map(b => (
{b.label} {b.count}
))}
{/* Reliability leaderboard */}
ok Most reliable — top 6
{ranked.map(w => ( ))}
{w.id} {w.name} {w.successRate}% {au.num(w.totalRuns)} runs
! Needs attention — bottom 3
{bottom.map(w => ( ))}
{w.name} {w.successRate}%
); } // ── Designer (inspect a single workflow) ───────────────────────────────── function AutoWorkflowsDesigner({ data }) { const au = window.__au; const [selectedId, setSelectedId] = useWspState(data.workflows[0].id); const wf = data.workflows.find(w => w.id === selectedId) || data.workflows[0]; // Synthetic step names per category (best-effort from description) const stepsFor = (w) => { if (w.description.includes('→')) { return w.description.replace(/\.$/, '').split('→').map(s => s.trim()); } return Array.from({ length: w.steps }, (_, i) => `Step ${i + 1}`); }; const steps = stepsFor(wf); const activeRuns = data.workflowRuns.filter(r => r.workflow === wf.name); const rateColor = wf.successRate >= 99 ? au.emerald : wf.successRate >= 97 ? au.lime : wf.successRate >= 90 ? au.amber : au.crimson; return (
Read-only view of step order, owner, category, and runtime stats. For editable canvas with branching, see Authoring → Visual Designer.} />
Workflow Designer · {wf.id}
{/* Workflow meta */}
{wf.name}
{wf.description}
{wf.category} {wf.status}
Steps
{wf.steps}
Active runs
{wf.activeRuns}
Total runs
{au.num(wf.totalRuns)}
Success
{wf.successRate}%
Avg min
{au.num(wf.avgMinutes)}
{/* Step pipeline */}
Step pipeline
{steps.map((s, i) => (
STEP {i + 1}
{s}
{i < steps.length - 1 && (
›
)}
))}
{/* Active runs for this workflow */} {activeRuns.length > 0 && (
Active runs ({activeRuns.length})
{activeRuns.map(r => { const ss = au.statusColor(r.status); return ( ); })}
{r.id} {r.matter} {r.currentStep}
{r.progress}%
{r.status}
)}
); } // ── Workflows Activity ─────────────────────────────────────────────────── function AutoWorkflowsActivity({ data }) { const au = window.__au; const wfActivity = data.activity.filter(a => a.action.toLowerCase().includes('workflow') || a.target.toLowerCase().includes('workflow') || a.target.match(/RUN-/)); const list = wfActivity.length > 0 ? wfActivity : data.activity; return (
Workflow-related events filtered from the platform activity stream. {list.length} entries.} />
Workflow activity — {list.length}
{list.map(a => { const sev = a.severity === 'warn' ? au.amber : a.severity === 'critical' ? au.crimson : au.lime; return (
{a.time} {a.actor} {a.action} {a.target}
); })}
); } // ── Platform entry ─────────────────────────────────────────────────────── function AutoWorkflowsPlatform() { const [subTab, setSubTab] = useWspState('dashboard'); const au = window.__au; const data = window.AUTO_DATA; const subTabs = [ { id: 'dashboard', label: 'Dashboard' }, { id: 'runs', label: 'Active Runs' }, { id: 'performance', label: 'Performance' }, { id: 'designer', label: 'Designer' }, { id: 'editor', label: 'Visual Editor' }, { id: 'variants', label: 'A/B Variants' }, { id: 'activity', label: 'Activity' }, ]; const renderSub = () => { switch (subTab) { case 'dashboard': return ; case 'runs': return ; case 'performance': return ; case 'designer': return ; case 'editor': return ; case 'variants': return ; case 'activity': return ; default: return ; } }; return (
{renderSub()}
); } window.AutoWorkflowsPerformance = AutoWorkflowsPerformance; window.AutoWorkflowsDesigner = AutoWorkflowsDesigner; window.AutoWorkflowsActivity = AutoWorkflowsActivity; window.AutoWorkflowsPlatform = AutoWorkflowsPlatform;