feat(web): anomalies live in the alerts hub

apps/web/src/lab/entries/anomaly-alerts.ts

@@ -0,0 +1,17 @@
+import { defineShellLab } from "../shell-lab"
+import { breadcrumbs, Flags, flags, init, Message, Model, update, view } from "../anomaly-alerts-lab"
+
+// `/lab/anomaly-alerts`: anomaly rules in the editor, an anomaly rule's incident and the Inbox's
+// Anomalies view over fixtures (`?state=`).
+
+export const lab = defineShellLab("Anomaly alerts", {
+	Model,
+	Message,
+	Flags,
+	flags,
+	init,
+	update,
+	view,
+	currentPath: "/lab/anomaly-alerts",
+	breadcrumbs,
+})

apps/web/src/lab/entries/empty-states.ts

@@ -1,5 +1,5 @@
 import { OrgId } from "@maple/domain"
-import { Clock, Effect, Result, Schema, Array as Arr } from "effect"
+import { Clock, Effect, Result, Schema } from "effect"
 import { AsyncData, Submodel } from "foldkit"
 import type { Html, HtmlBuilder } from "foldkit/html"
 import { defineMessageUnion } from "foldkit/message"
@@ -8,10 +8,6 @@ import * as AgentSessionMessage from "../../page/agent-sessions/session/message"
 import { dividerBlock } from "../../page/agent-sessions/session/transcript-lanes"
 import { init as initSession } from "../../page/agent-sessions/session/update"
 import { loadIndicator } from "../../page/agent-sessions/session/view-load"
-import * as AnomaliesMessage from "../../page/anomalies/list/message"
-import * as Anomalies from "../../page/anomalies/list/model"
-import { init as initAnomalies, update as updateAnomalies } from "../../page/anomalies/list/update"
-import { view as anomaliesView } from "../../page/anomalies/list/view"
 import { notFoundContent } from "../../page/chrome"
 import type { PageContext } from "../../page/contract"
 import * as ErrorsMessage from "../../page/errors/hub/message"
@@ -40,8 +36,6 @@ export const ITEMS = [
 	"releases-first-run",
 	"releases-quiet",
 	"releases-filtered",
-	"anomalies-first-run",
-	"anomalies-loading",
 	"session-rest-failed",
 	"recommendations-loading",
 	"not-found",
@@ -124,23 +118,6 @@ const releasesModel = (
 	return { ...loaded, presence: presenceOf(presence) }
 }
 
-const anomaliesModel = (nowMs: number, presence: Presence | null): Anomalies.Model => {
-	const entered = initAnomalies({ search: {} }, context).model
-	if (presence === null) return entered
-	const loaded = Arr.reduce(
-		[
-			AnomaliesMessage.Message.ReadClock({ nowMs }),
-			AnomaliesMessage.Message.CompletedFetchFirstPage({
-				key: entered.firstPage.key ?? "",
-				result: Result.succeed({ data: [], nextCursor: null }),
-			}),
-		],
-		entered,
-		(model, message) => updateAnomalies(model, message, context).model,
-	)
-	return { ...loaded, presence: presenceOf(presence) }
-}
-
 const FAILED_PROGRESS = {
 	phase: "failed",
 	agentSpansComplete: false,
@@ -199,15 +176,6 @@ const itemView = (model: Model, h: HtmlBuilder<Message>): Html => {
 				toParentMessage: ignore,
 				viewInputs: { context },
 			})
-		case "anomalies-first-run":
-		case "anomalies-loading":
-			return h.submodel({
-				slotId: "lab-anomalies",
-				model: anomaliesModel(nowMs, model.item === "anomalies-first-run" ? "absent" : null),
-				view: anomaliesView,
-				toParentMessage: ignore,
-				viewInputs: { context },
-			})
 		case "session-rest-failed":
 			return h.submodel({
 				slotId: "lab-session",

apps/web/src/lab/registry.ts

@@ -61,6 +61,14 @@ export const LAB_ENTRIES: ReadonlyArray<LabEntry> = [
 		kind: "lab",
 		session: "none",
 	},
+	{
+		path: "/lab/anomaly-alerts",
+		title: "Anomaly alerts",
+		description:
+			"Anomaly rules in the rule editor (scoped and the protected default), an anomaly rule's incident with the detector's evidence, and the Inbox's Anomalies view (`?state=`).",
+		kind: "lab",
+		session: "none",
+	},
 	{
 		path: "/lab/billing-orgs",
 		title: "Billing orgs",

apps/web/src/page/alerts/destination/email-fields.scene.test.ts

@@ -63,7 +63,7 @@ describe("email member picker", () => {
 			},
 			given(model),
 			expectView(text("Ada Lovelace")).toExist(),
-			expectView(role("button", { name: "Remove" })).toExist(),
+			expectView(role("button", { name: /^Remove / })).toExist(),
 		)
 	})
 })

apps/web/src/page/alerts/editor/actions.ts

@@ -7,7 +7,7 @@ import { Result } from "effect"
 import { PageOutMessage } from "../../contract"
 import { alertsHref } from "../shared/links"
 import { RunRuleTest, SaveRule, TrackRuleCreated } from "./command"
-import { previewIdentityKey, saveIssues } from "./derive"
+import { isProtectedDefault, previewIdentityKey, saveIssues } from "./derive"
 import { draftTimingOf } from "./derive-rows"
 import type { Message } from "./message"
 import type { Model } from "./model"
@@ -23,15 +23,22 @@ export const runTest = (model: Model, isSending: boolean): Return => {
 	const form = model.form
 	if (form === null || model.isDryRunning || model.isSendingTest) return { model }
 	if (!isRulePreviewReady(form))
-		return { model, outMessage: errorToast("Complete the rule name, query, and threshold before testing") }
+		return {
+			model,
+			outMessage: errorToast("Complete the rule name, query, and threshold before testing"),
+		}
 	return {
 		model: isSending ? { ...model, isSendingTest: true } : { ...model, isDryRunning: true },
-		commands: [RunRuleTest({ key: previewIdentityKey(form), payload: buildRuleTestParamsV2(form, isSending) })],
+		commands: [
+			RunRuleTest({ key: previewIdentityKey(form), payload: buildRuleTestParamsV2(form, isSending) }),
+		],
 	}
 }
 
 export const completeTest = (model: Model, message: Extract<Message, { _tag: "CompletedTest" }>): Return => {
-	const settled: Model = message.isSending ? { ...model, isSendingTest: false } : { ...model, isDryRunning: false }
+	const settled: Model = message.isSending
+		? { ...model, isSendingTest: false }
+		: { ...model, isDryRunning: false }
 	return Result.match(message.result, {
 		onSuccess: (dryRun) => ({
 			model: { ...settled, dryRun },
@@ -41,15 +48,22 @@ export const completeTest = (model: Model, message: Extract<Message, { _tag: "Co
 				description: "",
 			}),
 		}),
-		onFailure: (error) => ({ model: settled, outMessage: errorToast("Couldn't preview rule", error.message) }),
+		onFailure: (error) => ({
+			model: settled,
+			// A failed Send test is a delivery failure, not a preview one: say which.
+			outMessage: errorToast(
+				message.isSending ? "Couldn't send test notification" : "Couldn't preview rule",
+				error.message,
+			),
+		}),
 	})
 }
 
 /** `handleSave`: the ready form as create (or update) params; success lands on `/alerts`. */
 export const save = (model: Model): Return => {
 	const form = model.form
 	if (form === null || model.isSaving) return { model }
-	if (saveIssues(form, draftTimingOf(model, form)).length > 0) return { model }
+	if (saveIssues(form, draftTimingOf(model, form), isProtectedDefault(model)).length > 0) return { model }
 	return {
 		model: { ...model, isSaving: true },
 		commands: [SaveRule({ ruleId: model.editingRuleId, payload: buildRuleCreateParamsV2(form) })],
@@ -61,7 +75,9 @@ export const completeSave = (model: Model, message: Extract<Message, { _tag: "Co
 		onSuccess: () => ({
 			model: { ...model, isSaving: false },
 			commands:
-				model.editingRuleId === null && model.form !== null ? [TrackRuleCreated({ signal: model.form.signalType })] : [],
+				model.editingRuleId === null && model.form !== null
+					? [TrackRuleCreated({ signal: model.form.signalType })]
+					: [],
 			outMessage: PageOutMessage.RequestedNavigation({
 				url: alertsHref({}),
 				isReplace: false,

apps/web/src/page/alerts/editor/derive.ts

@@ -10,6 +10,7 @@
 	signalLabels,
 	thresholdUnitLabel,
 } from "@maple/web-data/alerts/form-utils"
+import { anomalyScopeSummary, isDefaultAnomalyRule } from "@maple/web-data/alerts/anomaly-rule"
 import { destinationProvider } from "../shared/providers"
 import type { RuleForm } from "./form"
 import { intervalWindowIssue, queryTimingIssue } from "./interval"
@@ -19,6 +20,12 @@
 
 // The rule editor's pure helpers: form surface, condition bar, live chart hero, notifications.
 
+/** Editing the org's default anomaly rule: its scope, kind and enabled state are the server's. */
+export const isProtectedDefault = (
+	model: Readonly<{ editingRuleId: string | null; savedForm: RuleForm | null }>,
+): boolean =>
+	model.editingRuleId !== null && model.savedForm !== null && isDefaultAnomalyRule(model.savedForm)
+
 export const COMPARATOR_WORDS = new Map<AlertComparator, string>([
 	["gt", "is above"],
 	["gte", "is at or above"],
@@ -33,6 +40,7 @@
 
 /** What the threshold is compared against, in words: the aggregation for a query, the signal otherwise. */
 export const conditionSubject = (form: RuleForm): string => {
+	if (form.signalType === "anomaly") return "anomalies"
 	if (form.signalType === "raw_query") return "the SQL value"
 	if (form.signalType === "builder_query") {
 		const aggregation = Str.trim(Str.replaceAll("_", " ")(form.queryBuilderDraft.aggregation))
@@ -42,7 +50,13 @@
 }
 
 /** The rule in one plain sentence, shown in the action bar. */
-export const describeRuleCondition = (form: RuleForm): string => {
+export const describeRuleCondition = (form: RuleForm, isDefault = false): string => {
+	if (form.signalType === "anomaly")
+		return isDefault
+			? "Pages on every anomaly no narrower rule handles"
+			: isDefaultAnomalyRule(form)
+				? "Anomalies in a service, environment or signal"
+				: `Pages on anomalies in ${anomalyScopeSummary(form)}`
 	const unit = thresholdUnitLabel(form) ?? ""
 	const value = (raw: string) => `${Str.trim(raw) || "?"}${unit === "%" ? "%" : unit ? ` ${unit}` : ""}`
 	const threshold = isRangeComparator(form.comparator)
@@ -80,7 +94,8 @@
 }
 
 /** `deriveValidationIssues`: what the action bar lists as missing. */
-export const validationIssues = (form: RuleForm): ReadonlyArray<string> => {
+export const validationIssues = (form: RuleForm, isDefault = false): ReadonlyArray<string> => {
+	if (form.signalType === "anomaly") return anomalyIssues(form, isDefault)
 	const issues: Array<string> = []
 	if (Str.trim(form.name).length === 0) issues.push("Rule name")
 	if (!isFilledNumber(form.threshold)) issues.push("Threshold")
@@ -110,10 +125,28 @@
 	return issues
 }
 
+/**
+ * An anomaly rule has no query or timing to get wrong: a name, a scope and someone to page. Only
+ * Maple creates the unscoped default rule, which may stay unrouted (anomaly paging is opt-in); the
+ * server refuses any other unscoped or unrouted enabled anomaly rule.
+ */
+const anomalyIssues = (form: RuleForm, isDefault: boolean): ReadonlyArray<string> => [
+	...(Str.trim(form.name).length === 0 ? ["Rule name"] : []),
+	...(!isDefault && isDefaultAnomalyRule(form) ? ["Scope"] : []),
+	...(!isDefault && form.destinationIds.length === 0 && (form.escalation?.destinationIds.length ?? 0) === 0
+		? ["Who gets notified"]
+		: []),
+]
+
 /** What blocks saving: the form's own issues and a query too slow for its interval. */
-export const saveIssues = (form: RuleForm, timing: AlertQueryTiming | null): ReadonlyArray<string> => {
+export const saveIssues = (
+	form: RuleForm,
+	timing: AlertQueryTiming | null,
+	isDefault = false,
+): ReadonlyArray<string> => {
 	const timingIssue = queryTimingIssue(form, timing)
-	return timingIssue === null ? validationIssues(form) : [...validationIssues(form), timingIssue]
+	const issues = validationIssues(form, isDefault)
+	return timingIssue === null ? issues : [...issues, timingIssue]
 }
 
 /** `previewIdentityKey`: the rule as evaluated; a dry-run verdict is only shown while it matches. */
@@ -138,6 +171,7 @@
 /** `makeSuggestedName`: signal and scope, offered while the name is empty. */
 export const suggestedName = (form: RuleForm): string | null => {
 	if (Str.trim(form.name).length > 0) return null
+	if (form.signalType === "anomaly") return `Anomalies · ${anomalyScopeSummary(form)}`
 	const subject = conditionSubject(form)
 	const base = Str.toUpperCase(Str.slice(0, 1)(subject)) + Str.slice(1)(subject)
 	const queryGroupBy =

apps/web/src/page/alerts/editor/dest-steps.ts

@@ -8,7 +8,7 @@ import { PageOutMessage } from "../../contract"
 import * as DestinationDialog from "../destination/dialog"
 import * as ChatConnect from "../shared/chat-connect"
 import { FetchEditorConnectors } from "./command"
-import { addId, removeId, updateTierIds } from "./form-steps"
+import { assignToTier, removeId, updateTierIds } from "./form-steps"
 import { Message, type Tier } from "./message"
 import type { Model } from "./model"
 import type { Return } from "./steps"
@@ -31,7 +31,13 @@ export const liftDialog = (model: Model, step: ReturnType<typeof DestinationDial
 	return DestinationDialog.OutMessage.match(step.outMessage, {
 		CreatedDestination: ({ id }) => ({
 			model:
-				next.form === null ? next : { ...next, form: updateTierIds(next.form, "warning", addId(id)) },
+				next.form === null
+					? next
+					: {
+							...next,
+							autoDestinationId: null,
+							form: assignToTier(next.form, next.destinationTier, id),
+						},
 			commands,
 			outMessage: PageOutMessage.RequestedToast({
 				type: "success",
@@ -58,15 +64,15 @@ const picked = (model: Model, menuId: string, value: string): Return => {
 				model:
 					model.form === null
 						? model
-						: { ...model, form: updateTierIds(model.form, tier, addId(id)) },
+						: { ...model, autoDestinationId: null, form: assignToTier(model.form, tier, id) },
 			}),
 		})
 	if (kind === "type")
 		return Option.match(decodeType(Arr.join(rest, ":")), {
 			onNone: () => ({ model }),
 			onSome: (type) =>
 				liftDialog(
-					model,
+					{ ...model, destinationTier: tier },
 					DestinationDialog.openNew(model.destinationDialog, defaultDestinationForm(type)),
 				),
 		})
@@ -81,7 +87,7 @@ const picked = (model: Model, menuId: string, value: string): Return => {
 				onNone: (): Return => ({ model }),
 				onSome: (workspace) =>
 					liftDialog(
-						model,
+						{ ...model, destinationTier: tier },
 						DestinationDialog.openNew(
 							model.destinationDialog,
 							chatDestinationForm(connector, workspace.id),
@@ -127,7 +133,13 @@ export const connectorsAnswered = (model: Model, connectors: ReadonlyArray<V2Cha
 		onNone: () => ({ model: next }),
 		onSome: (linked) =>
 			liftDialog(
-				{ ...next, chatConnect: ChatConnect.finish(next.chatConnect), chatConnectMenuId: null },
+				{
+					...next,
+					chatConnect: ChatConnect.finish(next.chatConnect),
+					chatConnectMenuId: null,
+					destinationTier:
+						model.chatConnectMenuId === null ? "warning" : tierOfMenu(model.chatConnectMenuId),
+				},
 				DestinationDialog.openNew(
 					next.destinationDialog,
 					chatDestinationForm(linked.connector, linked.id),
@@ -151,4 +163,10 @@ export const menuStep = (model: Model, menuId: string, message: Menu.Message): R
 export const removeDestination = (model: Model, tier: Tier, id: AlertDestinationId): Return =>
 	model.form === null
 		? { model }
-		: { model: { ...model, form: updateTierIds(model.form, tier, removeId(id)) } }
+		: {
+				model: {
+					...model,
+					autoDestinationId: null,
+					form: updateTierIds(model.form, tier, removeId(id)),
+				},
+			}

apps/web/src/page/alerts/editor/draft.ts

@@ -133,6 +133,9 @@ export const initialization = (model: Model, draftId: string): Initialization =>
 			{ severity: "warning", message: "Couldn't load dashboards. Starting from a blank alert." },
 		])
 	}
+	// "New rule → Anomaly rule" in the hub: the editor opens on the anomaly kind.
+	if (search.template === "anomaly")
+		return ready("new:anomaly", fromFormState(switchSignalKind(base, "anomaly").form))
 	const template = Arr.findFirst(ALERT_TEMPLATES, (candidate) => candidate.id === search.template)
 	if (Option.isSome(template))
 		return ready(`new:template:${template.value.id}`, fromFormState(template.value.apply(base)))