Automations
Recipes that run when something happens — no engineering required.
{[
{ id: "active", label: "Active", ct: autos.filter(a => a.on).length },
{ id: "off", label: "Disabled", ct: autos.filter(a => !a.on).length },
{ id: "library", label: "Recipe library" },
].map(t => (
setTab(t.id)}>
{t.label}{t.ct != null && {t.ct}}
))}
{tab !== "library" ? (
<>
setQ(e.target.value)}/>
{filtered.length === 0 ? (
) : filtered.map(a => (
onOpen(a.id)}>
⚡
{a.scope}
{a.runs7d} runs
7 days
{ e.stopPropagation(); toggle(a.id); }}>
))}
) : (
Browse pre-built recipes. Click one to customize it for your team.
{RECIPES.map(r => (
onOpen("new")}>
{r.tag}
{r.nm}
{r.parts.map((p, i) => i % 2 === 1 ? {p}{i < r.parts.length - 1 ? " " : ""} : {p}{i < r.parts.length - 1 ? " " : ""})}
))}
)}
);
}
// ── Editor view ──────────────────────────────────────────────────
function AutomationEditorPage({ automationId, onBack }) {
const initial = AUTOMATIONS.find(a => a.id === automationId) || {
id: "new", name: "Untitled automation", desc: "", on: false, scope: "All projects", runs7d: 0,
blocks: [{ kind: "trigger", id: "t", type: "status_change", to: "blocked" }],
};
const [name, setName] = React.useState(initial.name);
const [enabled, setEnabled] = React.useState(initial.on);
const blocks = initial.blocks;
const HISTORY = [
{ ic: "✓", color: "#14b76a", t: "Ran successfully · status_change → slack_notify", when: "2h ago", by: "auto" },
{ ic: "✓", color: "#14b76a", t: "Ran successfully · status_change → slack_notify", when: "5h ago", by: "auto" },
{ ic: "✎", color: "#a25ddc", t: "Marcus edited the channel slot", when: "Yesterday", by: "mj" },
{ ic: "⚠", color: "#d97f1f", t: "Skipped — Slack channel not found", when: "2d ago", by: "auto" },
{ ic: "✓", color: "#14b76a", t: "Ran successfully", when: "3d ago", by: "auto" },
];
return (