// AUTOMATION PLATFORM — Ops sub-platform // Views: Secrets · Cost · HITL Inbox const { useState: useOpsState } = React; const Tops = window.ArbiterTokens; const OPS_VIEWS = [ { id: 'secrets', label: 'Secrets Vault' }, { id: 'cost', label: 'Cost & Chargeback' }, { id: 'hitl', label: 'HITL Inbox' }, { id: 'analytics', label: 'Analytics' }, { id: 'audit', label: 'Audit Log' }, { id: 'activity', label: 'Activity' }, ]; function OBadge({ color, bg, children, mono = false }) { return {children}; } // ─── SECRETS ────────────────────────────────────────────────────────────────── function OpsSecrets({ data }) { const au = window.__au; const rows = data.secrets; const expired = rows.filter(s => s.status === 'Expired').length; const dueSoon = rows.filter(s => s.status === 'Due Soon').length; const statusStyle = (s) => { if (s === 'Expired') return { bg: au.crimsonBg, color: au.crimson }; if (s === 'Due Soon') return { bg: au.amberBg, color: au.amber }; return { bg: au.emeraldBg, color: au.emerald }; }; return (
◆ Secrets vault — {expired} expired · {dueSoon} due soon
Azure Key Vault + HSM-backed. Rotation schedule, scope audit, access telemetry. Expired secrets auto-disable integrations.
Secrets managed{rows.length}
Expired 0 ? au.crimson : au.emerald }}>{expired}
Due soon (≤30d){dueSoon}
Accesses (30d){rows.reduce((s, r) => s + r.accesses30d, 0).toLocaleString()}
Vault inventory — {rows.length}
{rows.map(s => { const ss = statusStyle(s.status); return ( ); })}
ID Name Category Owner Vault Last rotated Rotate every Expires in Accesses (30d) Scopes Status
{s.id} {s.name} {s.category} {s.owner} {s.vault} {s.lastRotated} {s.rotateEvery}d {s.expiresIn < 0 ? `${Math.abs(s.expiresIn)}d ago` : `${s.expiresIn}d`} {s.accesses30d.toLocaleString()}
{s.scopes.slice(0, 2).map(sc => {sc})} {s.scopes.length > 2 && +{s.scopes.length - 2}}
{s.status} {s.status !== 'Healthy' && }
); } // ─── COST ───────────────────────────────────────────────────────────────────── function OpsCost({ data }) { const au = window.__au; const k = data.costKpis; const byWf = data.costByWorkflow; const byTenant = data.costByTenant; const licenses = data.licenses; const maxWfMtd = Math.max(...byWf.map(w => w.mtd)); const maxTenMtd = Math.max(...byTenant.map(t => t.mtd)); const trendColor = (t) => t.startsWith('+') ? au.amber : t.startsWith('-') ? au.emerald : Tops.color.text.tertiary; const licStatus = (s) => { if (s === 'Near Cap') return { bg: au.amberBg, color: au.amber }; if (s === 'At Cap') return { bg: au.crimsonBg, color: au.crimson }; return { bg: au.emeraldBg, color: au.emerald }; }; return (
◆ Cost & chargeback — ${(k.ytd / 1000).toFixed(0)}K YTD · projected {k.projectedEoyPct}% of budget
Per-workflow, per-tenant attribution. ${(k.savingsYtd / 1000).toFixed(0)}K saved YTD via automation vs manual equivalent. Chargeback recovered ${(k.chargebackRecovered / 1000).toFixed(0)}K.
MTD spend${(k.mtd / 1000).toFixed(1)}K
YTD spend${(k.ytd / 1000).toFixed(0)}K
Avg run cost${k.avgRunCost.toFixed(2)}
Projected EoY 100 ? au.amber : au.emerald }}>{k.projectedEoyPct}%vs budget
Savings vs manual${(k.savingsYtd / 1000).toFixed(0)}K
Cost by workflow
{byWf.map(w => ( ))}
Workflow Runs MTD YTD Avg / run Trend
{w.workflow} {w.runs}
${(w.mtd / 1000).toFixed(1)}K
${(w.ytd / 1000).toFixed(0)}K ${w.avgRunCost.toFixed(2)} {w.trend}
Chargeback by tenant
{byTenant.map(t => ( ))}
Tenant Runs MTD YTD Model
{t.tenant} {t.runs}
${(t.mtd / 1000).toFixed(1)}K
${(t.ytd / 1000).toFixed(0)}K {t.chargeback}
License utilization — {licenses.length} vendors
{licenses.map(l => { const ls = licStatus(l.status); const color = l.utilizationPct >= 90 ? au.crimson : l.utilizationPct >= 80 ? au.amber : au.emerald; return ( ); })}
Vendor Product Commit Utilization MTD spend MTD cap Status
{l.vendor} {l.product} {l.commit}
{l.utilizationPct}%
${(l.mtdSpend / 1000).toFixed(1)}K ${(l.capMtd / 1000).toFixed(1)}K {l.status}
); } // ─── HITL INBOX ─────────────────────────────────────────────────────────────── function OpsHITL({ data }) { const au = window.__au; const rows = data.hitlInbox; const [selected, setSelected] = useOpsState({}); const toggle = (id) => setSelected(s => ({ ...s, [id]: !s[id] })); const selCount = Object.values(selected).filter(Boolean).length; const overdue = rows.filter(r => r.status === 'Overdue').length; const slaStyle = (min) => { if (min < 0) return { color: au.crimson, label: `${Math.abs(min)}m OVERDUE` }; if (min < 60) return { color: au.crimson, label: `${min}m left` }; if (min < 480) return { color: au.amber, label: `${Math.round(min / 60)}h left` }; return { color: au.emerald, label: `${Math.round(min / 60)}h left` }; }; return (
◆ Human-in-loop inbox — {rows.length} waiting · {overdue} overdue
Approval tasks gating workflow progress. Batch actions, SLA timers, auto-escalation on breach.
{selCount > 0 && (
)}
Waiting{rows.filter(r => r.status === 'Waiting').length}
Overdue{overdue}
P0 priority{rows.filter(r => r.priority === 'P0').length}
Batched actions{rows.reduce((s, r) => s + (r.batch > 1 ? r.batch : 0), 0)}
Inbox — {rows.length}
{rows.map(h => { const sla = slaStyle(h.slaLeftMin); const prio = au.priorityColor(h.priority); const isOverdue = h.status === 'Overdue'; return (
toggle(h.id)} />
{h.id}
{h.priority}
{h.title}
{h.workflow} · {h.runId} · created {h.createdAt} {h.batch > 1 && BATCH × {h.batch}}
Waiting on
{h.waitingFor}
SLA
{sla.label}
escalates → {h.escalatesTo}
); })}
); } // ─── ROOT ───────────────────────────────────────────────────────────────────── function AutoOps({ data }) { const au = window.__au; const [view, setView] = useOpsState('secrets'); const renderView = () => { switch (view) { case 'secrets': return ; case 'cost': return ; case 'hitl': return ; case 'analytics': return ; case 'audit': return ; case 'activity': return ; default: return ; } }; return (
{renderView()}
); } window.AutoOps = AutoOps;