Workflow state representing an exception/failure.
Connection to warehouse timed out after 30s
<div class="exception" data-severity="major" style="--accent:#E8A020;">
<div class="exception__status">
<span class="exception__icon exception__icon--minor"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="exception__icon exception__icon--major"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="exception__icon exception__icon--critical"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
<span class="exception__text">major</span>
</div>
<h3 class="exception__title">Nightly ETL job</h3>
<p class="exception__reason">Connection to warehouse timed out after 30s</p>
<p class="exception__timestamp">Failed 18 Aug 2026, 03:41</p>
</div>
<style>
.exception { font: 15px/1.5 system-ui, sans-serif; max-width: 340px; padding: 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; border-left: 4px solid #b23b3b; }
.exception__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #24143010; margin-bottom: 12px; }
.exception__icon { display: none; color: #b23b3b; }
.exception[data-severity="minor"] .exception__icon--minor { display: inline-flex; color: var(--accent); }
.exception[data-severity="major"] .exception__icon--major { display: inline-flex; color: #c17a00; }
.exception[data-severity="critical"] .exception__icon--critical { display: inline-flex; color: #b23b3b; }
.exception__text { font-weight: 700; font-size: 13px; text-transform: capitalize; }
.exception__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.exception__reason { margin: 0 0 4px; font-size: 14px; color: #241430cc; }
.exception__timestamp { margin: 0; font-size: 12px; color: #24143099; }
</style><div class="exception-tw font-sans max-w-[340px] p-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020] border-l-4 border-l-[#b23b3b]" data-severity="major">
<div class="inline-flex items-center gap-1.5 py-1 px-2.5 rounded-full bg-[#24143010] mb-3">
<span class="exception-tw__icon exception-tw__icon--minor" style="color:#E8A020"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="exception-tw__icon exception-tw__icon--major" style="color:#c17a00"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="exception-tw__icon exception-tw__icon--critical" style="color:#b23b3b"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
<span class="font-bold text-[13px] capitalize">major</span>
</div>
<h3 class="m-0 mb-1.5 text-[17px] font-semibold">Nightly ETL job</h3>
<p class="m-0 mb-1 text-sm text-[#241430]/80">Connection to warehouse timed out after 30s</p>
<p class="m-0 text-xs text-[#241430]/60">Failed 18 Aug 2026, 03:41</p>
</div>
<style>
.exception-tw__icon { display: none; }
.exception-tw[data-severity="minor"] .exception-tw__icon--minor { display: inline-flex; }
.exception-tw[data-severity="major"] .exception-tw__icon--major { display: inline-flex; }
.exception-tw[data-severity="critical"] .exception-tw__icon--critical { display: inline-flex; }
</style>export function ExceptionState({
taskTitle = "Nightly ETL job",
reason = "Connection to warehouse timed out after 30s",
timestamp = "Failed 18 Aug 2026, 03:41",
severity = "major",
accent = "#E8A020",
}) {
const icons = {
minor: { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2.5l6.5 11h-13z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\"/></svg>", color: accent },
major: { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2.5l6.5 11h-13z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\"/></svg>", color: "#c17a00" },
critical: { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M5.5 5.5l5 5M10.5 5.5l-5 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>", color: "#b23b3b" },
};
const active = icons[severity] ?? icons.minor;
return (
<div style={{ fontFamily: "system-ui, sans-serif", maxWidth: 340, padding: 20, background: "#FAF7F2",
color: "#241430", borderRadius: 14, border: "1.5px solid #24143020", borderLeft: "4px solid #b23b3b" }}>
<div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px", borderRadius: 999, background: "#24143010", marginBottom: 12 }}>
<span style={{ color: active.color, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: active.svg }} />
<span style={{ fontWeight: 700, fontSize: 13, textTransform: "capitalize" }}>{severity}</span>
</div>
<h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 600 }}>{taskTitle}</h3>
<p style={{ margin: "0 0 4px", fontSize: 14, color: "#241430cc" }}>{reason}</p>
<p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>{timestamp}</p>
</div>
);
}