Jeffrey Smith
f9cd5bce0f
Four example workflow packages proving the engine end-to-end: - Bug Report Triage: public entry, branch routing, SLA timer - Employee Onboarding: Starlark automated stages, signoff gate - Content Approval: multi-party signoff, revision cycle loop - Webhook Notifier: http.post, connections fallback, delivery logging Demo surface at /s/workflow-demo with cards, stage diagrams, Starlark viewer, API examples, active/published status, and copyable public links. Engine fixes: started_by in automated context, sla_seconds in package installer, parseSnapshotStages for wrapped/legacy formats. Platform fixes: extension SDK boot in base.html (Preact globals + boot()), admin teams paginated response extraction, workflow adoption endpoint (POST /teams/:teamId/workflows/:id/adopt), team-admin copyable link. Review pass remains on roadmap for remaining UI polish. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
356 lines
16 KiB
JavaScript
356 lines
16 KiB
JavaScript
// ==========================================
|
|
// Switchboard Core — Workflow Demo Surface
|
|
// ==========================================
|
|
// Interactive walkthrough of the four example workflow packages.
|
|
// Shows workflow cards with feature badges, stage flow diagrams,
|
|
// Starlark code viewer, and API curl examples.
|
|
// ==========================================
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const SURFACE_ID = 'workflow-demo';
|
|
if (window.__SURFACE__ !== SURFACE_ID) return;
|
|
|
|
const base = window.__BASE__ || '';
|
|
|
|
// ── Workflow catalog ──────────────────────────
|
|
|
|
const WORKFLOWS = [
|
|
{
|
|
slug: 'bug-report-triage',
|
|
title: 'Bug Report Triage',
|
|
icon: '🐛',
|
|
description: 'Public bug report submission with severity-based routing, team assignment, and SLA timers.',
|
|
badges: ['Public Entry', 'Branch Rules', 'SLA Timer', 'Team Assignment'],
|
|
tier: 'browser',
|
|
stages: [
|
|
{ name: 'submit', mode: 'form', audience: 'public' },
|
|
{ name: 'classify', mode: 'form', audience: 'team', note: 'branch rules' },
|
|
{ name: 'fix-critical', mode: 'form', audience: 'team', note: 'SLA 1h', branch: true },
|
|
{ name: 'fix-normal', mode: 'form', audience: 'team', branch: true },
|
|
{ name: 'verify', mode: 'review', audience: 'team' },
|
|
],
|
|
curl: [
|
|
'# 1. Start public instance (no auth required)\ncurl -X POST $BASE/api/v1/public/workflows/$WF_ID/start \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"reporter_email": "user@example.com", "summary": "Login broken", "component": "ui", "severity": "critical", "steps": "1. Click login", "expected": "Login page", "actual": "500 error"}}\'',
|
|
'# 2. Resume (check status)\ncurl $BASE/api/v1/public/workflows/resume/$TOKEN',
|
|
'# 3. Team member claims classify assignment\ncurl -X POST $BASE/api/v1/teams/$TEAM/assignments/$ASSIGN_ID/claim \\\n -H "Authorization: Bearer $TOKEN"',
|
|
'# 4. Advance classify (triggers branch rule)\ncurl -X POST $BASE/api/v1/teams/$TEAM/instances/$INST/advance \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"severity": "critical", "notes": "Confirmed production issue"}}\'',
|
|
],
|
|
},
|
|
{
|
|
slug: 'employee-onboarding',
|
|
title: 'Employee Onboarding',
|
|
icon: '🏢',
|
|
description: 'Automated provisioning with Starlark hooks, manager signoff gate, and welcome notification.',
|
|
badges: ['Starlark', 'Signoff Gate', 'Rejection Reroute', 'db.insert', 'notifications.send'],
|
|
tier: 'starlark',
|
|
stages: [
|
|
{ name: 'new-hire-info', mode: 'form', audience: 'team' },
|
|
{ name: 'provision-accounts', mode: 'automated', audience: 'system', note: 'Starlark' },
|
|
{ name: 'manager-signoff', mode: 'review', audience: 'team', note: 'signoff gate' },
|
|
{ name: 'it-setup', mode: 'form', audience: 'team' },
|
|
{ name: 'welcome', mode: 'automated', audience: 'system', note: 'Starlark' },
|
|
],
|
|
starlark: 'on_provision(ctx): db.insert("provisions", ...), notifications.send(...)\non_welcome(ctx): db.insert("onboarding_log", ...), notifications.send(...)',
|
|
curl: [
|
|
'# 1. Start instance (team auth required)\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"full_name": "Alice Smith", "department": "engineering", "needs_vpn": "true", "needs_admin": "false", "equipment": "developer workstation"}}\'',
|
|
'# 2. After auto-provision, submit manager signoff\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $MANAGER_TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"action": "approve"}\'',
|
|
],
|
|
},
|
|
{
|
|
slug: 'content-approval',
|
|
title: 'Content Approval',
|
|
icon: '📝',
|
|
description: 'Multi-party review with quorum signoff (2 approvals) and revision cycle loop.',
|
|
badges: ['Multi-party Signoff', 'Quorum', 'Rejection Reroute', 'Review Cycle'],
|
|
tier: 'browser',
|
|
stages: [
|
|
{ name: 'draft', mode: 'form', audience: 'team' },
|
|
{ name: 'review', mode: 'review', audience: 'team', note: '2 approvals' },
|
|
{ name: 'revision', mode: 'form', audience: 'team', note: 'loops to review' },
|
|
{ name: 'publish', mode: 'form', audience: 'team' },
|
|
],
|
|
curl: [
|
|
'# 1. Submit draft\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"title": "Q1 Update", "body": "...", "category": "blog"}}\'',
|
|
'# 2. Reviewer A approves\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $REVIEWER_A" \\\n -d \'{"action": "approve"}\'',
|
|
'# 3. Reviewer B rejects -> routes to revision\ncurl -X POST $BASE/api/v1/instances/$INST/signoffs \\\n -H "Authorization: Bearer $REVIEWER_B" \\\n -d \'{"action": "reject"}\'',
|
|
],
|
|
},
|
|
{
|
|
slug: 'webhook-notifier',
|
|
title: 'Webhook Notifier',
|
|
icon: '🔔',
|
|
description: 'Outbound HTTP delivery via Starlark with connection credentials and delivery logging.',
|
|
badges: ['Starlark', 'http.post', 'connections.get', 'db.insert'],
|
|
tier: 'starlark',
|
|
stages: [
|
|
{ name: 'configure', mode: 'form', audience: 'team' },
|
|
{ name: 'fire-webhook', mode: 'automated', audience: 'system', note: 'http.post' },
|
|
{ name: 'result', mode: 'review', audience: 'team' },
|
|
],
|
|
starlark: 'on_fire(ctx): http.post(url, body=payload), db.insert("webhook_log", ...)',
|
|
curl: [
|
|
'# 1. Configure and start\ncurl -X POST $BASE/api/v1/teams/$TEAM/workflows/$WF_ID/start \\\n -H "Authorization: Bearer $TOKEN" \\\n -H "Content-Type: application/json" \\\n -d \'{"data": {"webhook_url": "https://webhook.site/test", "event_name": "deploy.complete", "payload": "{}"}}\'',
|
|
],
|
|
},
|
|
];
|
|
|
|
// ── Init ─────────────────────────────────────
|
|
|
|
async function _init() {
|
|
const mount = document.getElementById('extension-mount');
|
|
if (!mount) return;
|
|
|
|
const surface = document.createElement('div');
|
|
surface.className = 'surface-workflow-demo';
|
|
mount.appendChild(surface);
|
|
|
|
// Topbar with user menu
|
|
const topbar = document.createElement('div');
|
|
topbar.className = 'demo-topbar';
|
|
topbar.innerHTML = '<h1>Workflow Demo</h1>';
|
|
surface.appendChild(topbar);
|
|
sw.userMenu(topbar, { flyout: 'down' });
|
|
|
|
// Subtitle
|
|
const subtitle = document.createElement('p');
|
|
subtitle.className = 'demo-subtitle';
|
|
subtitle.textContent = 'Four example workflows that prove the engine works end-to-end. Install any package via Admin > Packages.';
|
|
surface.appendChild(subtitle);
|
|
|
|
// Workflow cards
|
|
const grid = document.createElement('div');
|
|
grid.className = 'demo-grid';
|
|
surface.appendChild(grid);
|
|
|
|
// Fetch installed workflows to check status
|
|
// The API returns { data: [...], total, page } — _unwrap keeps the
|
|
// full object when siblings exist, so extract .data ourselves.
|
|
let installed = {};
|
|
try {
|
|
const resp = await sw.api.get('/api/v1/workflows');
|
|
const list = Array.isArray(resp) ? resp : (resp && resp.data ? resp.data : []);
|
|
for (const wf of list) {
|
|
if (wf.slug) installed[wf.slug] = wf;
|
|
}
|
|
} catch (e) { /* ignore — show all as not-installed */ }
|
|
|
|
for (const wf of WORKFLOWS) {
|
|
grid.appendChild(_buildCard(wf, installed[wf.slug]));
|
|
}
|
|
}
|
|
|
|
// ── Card builder ─────────────────────────────
|
|
|
|
function _buildCard(wf, installedWf) {
|
|
const card = document.createElement('div');
|
|
card.className = 'demo-card';
|
|
|
|
// Title row
|
|
const titleRow = document.createElement('div');
|
|
titleRow.className = 'card-title-row';
|
|
titleRow.innerHTML = '<span class="card-icon">' + wf.icon + '</span>'
|
|
+ '<h2>' + _esc(wf.title) + '</h2>'
|
|
+ '<span class="card-tier badge-' + wf.tier + '">' + wf.tier + '</span>';
|
|
card.appendChild(titleRow);
|
|
|
|
// Description
|
|
const desc = document.createElement('p');
|
|
desc.className = 'card-desc';
|
|
desc.textContent = wf.description;
|
|
card.appendChild(desc);
|
|
|
|
// Badges
|
|
const badges = document.createElement('div');
|
|
badges.className = 'card-badges';
|
|
for (const b of wf.badges) {
|
|
const span = document.createElement('span');
|
|
span.className = 'badge';
|
|
span.textContent = b;
|
|
badges.appendChild(span);
|
|
}
|
|
card.appendChild(badges);
|
|
|
|
// Stage flow diagram
|
|
card.appendChild(_buildStageDiagram(wf));
|
|
|
|
// Starlark viewer (if applicable)
|
|
if (wf.starlark) {
|
|
card.appendChild(_buildCollapsible('Starlark Hooks', '<pre><code>' + _esc(wf.starlark) + '</code></pre>'));
|
|
}
|
|
|
|
// API examples
|
|
if (wf.curl && wf.curl.length) {
|
|
const curlHtml = wf.curl.map(function (c) { return '<pre><code>' + _esc(c) + '</code></pre>'; }).join('');
|
|
card.appendChild(_buildCollapsible('API Examples', curlHtml));
|
|
}
|
|
|
|
// Status + action
|
|
const actions = document.createElement('div');
|
|
actions.className = 'card-actions';
|
|
|
|
if (installedWf) {
|
|
const isActive = installedWf.is_active;
|
|
const version = installedWf.version || 0;
|
|
// version > 1 means published at least once (version increments on edit, publish snapshots it)
|
|
const isPublished = version >= 2;
|
|
const isReady = isActive && isPublished;
|
|
|
|
// Installed badge
|
|
const status = document.createElement('span');
|
|
status.className = 'badge badge-installed';
|
|
status.textContent = 'Installed';
|
|
actions.appendChild(status);
|
|
|
|
if (!isActive) {
|
|
const hint = document.createElement('span');
|
|
hint.className = 'badge badge-needs-publish';
|
|
hint.textContent = 'Not Active';
|
|
actions.appendChild(hint);
|
|
} else if (!isPublished) {
|
|
const hint = document.createElement('span');
|
|
hint.className = 'badge badge-needs-publish';
|
|
hint.textContent = 'Not Published';
|
|
actions.appendChild(hint);
|
|
}
|
|
|
|
const tryBtn = document.createElement('button');
|
|
tryBtn.className = 'btn btn-primary';
|
|
tryBtn.textContent = 'Try It';
|
|
tryBtn.disabled = !isReady;
|
|
if (!isReady) {
|
|
tryBtn.title = 'Activate and publish this workflow in Team Admin first';
|
|
}
|
|
tryBtn.onclick = function () {
|
|
if (!isReady) return;
|
|
if (wf.slug === 'bug-report-triage') {
|
|
window.open(base + '/api/v1/public/workflows/' + installedWf.id + '/form', '_blank');
|
|
} else {
|
|
sw.toast('Navigate to your team admin to start a ' + wf.title + ' instance.', 'info');
|
|
}
|
|
};
|
|
actions.appendChild(tryBtn);
|
|
|
|
// Public link for public_link workflows
|
|
if (installedWf.entry_mode === 'public_link' && isReady) {
|
|
const linkRow = document.createElement('div');
|
|
linkRow.className = 'public-link-row';
|
|
const linkInput = document.createElement('input');
|
|
linkInput.type = 'text';
|
|
linkInput.readOnly = true;
|
|
linkInput.value = window.location.origin + base + '/api/v1/public/workflows/' + installedWf.id + '/start';
|
|
linkRow.appendChild(linkInput);
|
|
const copyBtn = document.createElement('button');
|
|
copyBtn.className = 'btn-copy';
|
|
copyBtn.textContent = 'Copy';
|
|
copyBtn.onclick = function () {
|
|
navigator.clipboard.writeText(linkInput.value).then(function () {
|
|
copyBtn.textContent = 'Copied!';
|
|
setTimeout(function () { copyBtn.textContent = 'Copy'; }, 1500);
|
|
});
|
|
};
|
|
linkRow.appendChild(copyBtn);
|
|
card.appendChild(linkRow);
|
|
}
|
|
} else {
|
|
const status = document.createElement('span');
|
|
status.className = 'badge badge-not-installed';
|
|
status.textContent = 'Not Installed';
|
|
actions.appendChild(status);
|
|
}
|
|
|
|
card.appendChild(actions);
|
|
return card;
|
|
}
|
|
|
|
// ── Stage flow diagram ───────────────────────
|
|
|
|
function _buildStageDiagram(wf) {
|
|
const container = document.createElement('div');
|
|
container.className = 'stage-flow';
|
|
|
|
const stages = wf.stages;
|
|
let hasBranch = false;
|
|
|
|
for (let i = 0; i < stages.length; i++) {
|
|
const s = stages[i];
|
|
|
|
const node = document.createElement('div');
|
|
node.className = 'stage-node stage-' + s.audience;
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'stage-label';
|
|
label.textContent = s.name;
|
|
node.appendChild(label);
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = 'stage-meta';
|
|
meta.textContent = s.mode + (s.audience !== 'team' ? ' (' + s.audience + ')' : '');
|
|
node.appendChild(meta);
|
|
|
|
if (s.note) {
|
|
const note = document.createElement('div');
|
|
note.className = 'stage-note';
|
|
note.textContent = s.note;
|
|
node.appendChild(note);
|
|
}
|
|
|
|
container.appendChild(node);
|
|
|
|
// Arrow (except after last stage)
|
|
if (i < stages.length - 1 && !stages[i + 1].branch) {
|
|
const arrow = document.createElement('div');
|
|
arrow.className = 'stage-arrow';
|
|
arrow.textContent = '\u2192';
|
|
container.appendChild(arrow);
|
|
} else if (stages[i + 1] && stages[i + 1].branch) {
|
|
if (!hasBranch) {
|
|
const split = document.createElement('div');
|
|
split.className = 'stage-arrow stage-branch';
|
|
split.textContent = '\u2193\u2197';
|
|
container.appendChild(split);
|
|
hasBranch = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return container;
|
|
}
|
|
|
|
// ── Collapsible section ──────────────────────
|
|
|
|
function _buildCollapsible(title, innerHtml) {
|
|
const details = document.createElement('details');
|
|
details.className = 'card-collapsible';
|
|
|
|
const summary = document.createElement('summary');
|
|
summary.textContent = title;
|
|
details.appendChild(summary);
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'collapsible-content';
|
|
content.innerHTML = innerHtml;
|
|
details.appendChild(content);
|
|
|
|
return details;
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────
|
|
|
|
function _esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s;
|
|
return d.innerHTML;
|
|
}
|
|
|
|
// ── Boot ──────────────────────────────────────
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', _init);
|
|
} else {
|
|
_init();
|
|
}
|
|
|
|
})();
|