milestone 27: diagnostics — operational failures land in one curated log, resolved history purgeable

2026-08-20 20:05:59 +02:00
parent 3dd8214ef2
commit 037f209179
50 changed files with 8608 additions and 102 deletions
@@ -0,0 +1,42 @@
+/**
+ * The severity chip both diagnostics views carry. The word is the affordance —
+ * colour alone would leave the severity unreadable to a screen reader and to
+ * anyone who does not separate the amber from the red.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import type { DiagnosticSeverity } from "@/lib/types";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	badge: {
+		display: "inline-block",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+		whiteSpace: "nowrap",
+	},
+	warning: {
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+	},
+	error: {
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		color: colors.dangerText,
+	},
+});
+
+export default function SeverityBadge({ severity }: { severity: DiagnosticSeverity }) {
+	return (
+		<span {...stylex.props(styles.badge, severity === "error" ? styles.error : styles.warning)}>
+			{severity === "error" ? "Error" : "Warning"}
+		</span>
+	);
+}