diff --git a/apps/dashboard/src/app/(dashboard)/incidents/breadcrumb.tsx b/apps/dashboard/src/app/(dashboard)/incidents/breadcrumb.tsx
new file mode 100644
index 00000000..dfe54d30
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/incidents/breadcrumb.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { Incident } from "@openstatus/icons";
+
+import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb";
+
+export function Breadcrumb() {
+  return (
+    <NavBreadcrumb
+      items={[{ type: "page", label: "Incidents", icon: Incident }]}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/incidents/client.tsx b/apps/dashboard/src/app/(dashboard)/incidents/client.tsx
new file mode 100644
index 00000000..be78aa5d
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/incidents/client.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@openstatus/ui/components/ui/button";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  EmptyStateContainer,
+  EmptyStateDescription,
+  EmptyStateTitle,
+} from "@/components/content/empty-state";
+import {
+  Section,
+  SectionDescription,
+  SectionGroup,
+  SectionHeader,
+  SectionHeaderRow,
+  SectionTitle,
+} from "@/components/content/section";
+import { columns } from "@/components/data-table/managed-incidents/columns";
+import { DeclareIncidentButton } from "@/components/incidents/declare-incident-button";
+import { DataTable } from "@/components/ui/data-table/data-table";
+import { useFeature } from "@/hooks/use-feature";
+import { useTRPC } from "@/lib/trpc/client";
+
+export function Client() {
+  const trpc = useTRPC();
+  const enabled = useFeature("incident-management");
+  const { data: incidents } = useQuery({
+    ...trpc.incident.list.queryOptions(),
+    enabled,
+  });
+
+  if (!enabled) {
+    return (
+      <SectionGroup>
+        <EmptyStateContainer>
+          <EmptyStateTitle>Incidents are not available yet</EmptyStateTitle>
+          <EmptyStateDescription>
+            Incident management is rolling out gradually.
+          </EmptyStateDescription>
+        </EmptyStateContainer>
+      </SectionGroup>
+    );
+  }
+
+  return (
+    <SectionGroup>
+      <Section>
+        <SectionHeaderRow>
+          <SectionHeader>
+            <SectionTitle>Incidents</SectionTitle>
+            <SectionDescription>
+              Declare an incident when the team is responding to an outage: a
+              severity, a commander and a timeline, resolved and closed with a
+              postmortem. Monitor downtime is detected automatically and lives
+              on each monitor.
+            </SectionDescription>
+          </SectionHeader>
+          <DeclareIncidentButton>
+            <Button size="sm">Declare incident</Button>
+          </DeclareIncidentButton>
+        </SectionHeaderRow>
+        {!incidents ? null : incidents.length === 0 ? (
+          <EmptyStateContainer>
+            <EmptyStateTitle>No incidents declared</EmptyStateTitle>
+            <EmptyStateDescription>
+              Declared incidents keep the timeline your team builds while
+              responding. Nothing here is public: use a status report to tell
+              your users.
+            </EmptyStateDescription>
+          </EmptyStateContainer>
+        ) : (
+          <DataTable columns={columns} data={incidents} />
+        )}
+      </Section>
+    </SectionGroup>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/incidents/layout.tsx b/apps/dashboard/src/app/(dashboard)/incidents/layout.tsx
new file mode 100644
index 00000000..3b3dc63c
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/incidents/layout.tsx
@@ -0,0 +1,31 @@
+import {
+  AppHeader,
+  AppHeaderActions,
+  AppHeaderContent,
+} from "@/components/nav/app-header";
+import { AppSidebarTrigger } from "@/components/nav/app-sidebar";
+import { HydrateClient } from "@/lib/trpc/server";
+
+import { Breadcrumb } from "./breadcrumb";
+import { NavActions } from "./nav-actions";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <HydrateClient>
+      <AppHeader>
+        <AppHeaderContent>
+          <AppSidebarTrigger />
+          <Breadcrumb />
+        </AppHeaderContent>
+        <AppHeaderActions>
+          <NavActions />
+        </AppHeaderActions>
+      </AppHeader>
+      <main className="w-full flex-1">{children}</main>
+    </HydrateClient>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/incidents/nav-actions.tsx b/apps/dashboard/src/app/(dashboard)/incidents/nav-actions.tsx
new file mode 100644
index 00000000..768c5c97
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/incidents/nav-actions.tsx
@@ -0,0 +1,9 @@
+import { NavFeedback } from "@/components/nav/nav-feedback";
+
+export function NavActions() {
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <NavFeedback />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/incidents/page.tsx b/apps/dashboard/src/app/(dashboard)/incidents/page.tsx
new file mode 100644
index 00000000..e3dc7ede
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/incidents/page.tsx
@@ -0,0 +1,5 @@
+import { Client } from "./client";
+
+export default function Page() {
+  return <Client />;
+}
diff --git a/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx b/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx
new file mode 100644
index 00000000..bff0a6bd
--- /dev/null
+++ b/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import type { RouterOutputs } from "@openstatus/api";
+import { Badge } from "@openstatus/ui/components/ui/badge";
+import type { ColumnDef } from "@tanstack/react-table";
+import { formatDistanceStrict } from "date-fns";
+
+import { Link } from "@/components/common/link";
+import { TableCellDate } from "@/components/data-table/table-cell-date";
+import { TableCellNumber } from "@/components/data-table/table-cell-number";
+import { TableCellText } from "@/components/data-table/table-cell-text";
+import {
+  personName,
+  severityConfig,
+  statusConfig,
+} from "@/data/managed-incidents.client";
+import { cn } from "@/lib/utils";
+
+type ManagedIncident = NonNullable<RouterOutputs["incident"]["list"]>[number];
+
+export const columns: ColumnDef<ManagedIncident>[] = [
+  {
+    accessorKey: "severity",
+    header: "Severity",
+    enableSorting: false,
+    cell: ({ row }) => {
+      const config = severityConfig[row.original.severity];
+      return (
+        <Badge variant="outline" className={cn("font-mono", config.className)}>
+          {config.label}
+        </Badge>
+      );
+    },
+  },
+  {
+    accessorKey: "title",
+    header: "Title",
+    enableSorting: false,
+    cell: ({ row }) => (
+      <Link href={`/incidents/${row.original.id}`} className="font-medium">
+        {row.original.title}
+      </Link>
+    ),
+    meta: { cellClassName: "max-w-[260px] truncate" },
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    enableSorting: false,
+    cell: ({ row }) => {
+      const config = statusConfig[row.original.status];
+      return (
+        <span className={cn("font-mono text-sm", config.className)}>
+          {config.label}
+          {row.original.closedAt && row.original.status !== "canceled"
+            ? " · closed"
+            : null}
+        </span>
+      );
+    },
+  },
+  {
+    id: "commander",
+    header: "Commander",
+    cell: ({ row }) => (
+      <TableCellText value={personName(row.original.commander)} />
+    ),
+  },
+  {
+    accessorKey: "declaredAt",
+    header: "Declared",
+    cell: ({ row }) => <TableCellDate value={row.original.declaredAt} />,
+  },
+  {
+    id: "duration",
+    header: "Duration",
+    cell: ({ row }) => {
+      const end =
+        row.original.status === "resolved" && row.original.resolvedAt
+          ? row.original.resolvedAt
+          : row.original.status === "canceled"
+            ? row.original.closedAt
+            : new Date();
+      if (!end) return <TableCellText value={null} />;
+      const [amount, unit] = formatDistanceStrict(
+        row.original.startedAt,
+        end,
+      ).split(" ");
+      return <TableCellNumber value={amount} unit={unit} />;
+    },
+  },
+  {
+    id: "statusReport",
+    header: "Status report",
+    cell: ({ row }) => (
+      <TableCellText value={row.original.statusReport?.title ?? null} />
+    ),
+    meta: { cellClassName: "max-w-[200px] truncate" },
+  },
+];
diff --git a/apps/dashboard/src/components/forms/incident/form.tsx b/apps/dashboard/src/components/forms/incident/form.tsx
new file mode 100644
index 00000000..16f625ec
--- /dev/null
+++ b/apps/dashboard/src/components/forms/incident/form.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { incidentSeverity } from "@openstatus/db/src/schema/incidents/constants";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@openstatus/ui/components/ui/form";
+import { Input } from "@openstatus/ui/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@openstatus/ui/components/ui/select";
+import { Textarea } from "@openstatus/ui/components/ui/textarea";
+import { cn } from "@openstatus/ui/lib/utils";
+import { useQuery } from "@tanstack/react-query";
+import { isTRPCClientError } from "@trpc/client";
+import { format } from "date-fns";
+import React, { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import {
+  FormCardContent,
+  FormCardSeparator,
+} from "@/components/forms/form-card";
+import { useFormSheetDirty } from "@/components/forms/form-sheet";
+import { personName, severityConfig } from "@/data/managed-incidents.client";
+import { useTRPC } from "@/lib/trpc/client";
+
+const NONE = "none";
+
+const schema = z.object({
+  title: z.string().trim().min(1, "Title is required.").max(256),
+  severity: z.enum(incidentSeverity),
+  summary: z.string().max(4000),
+  commanderId: z.string(),
+  startedAt: z.string().min(1, "Start time is required."),
+  statusReportId: z.string(),
+});
+
+export type FormValues = z.infer<typeof schema>;
+
+export type DeclareIncidentValues = {
+  title: string;
+  severity: FormValues["severity"];
+  summary?: string;
+  commanderId: number | null;
+  startedAt: Date;
+  statusReportId?: number;
+};
+
+export function toLocalInput(date: Date): string {
+  return format(date, "yyyy-MM-dd'T'HH:mm");
+}
+
+export function FormDeclareIncident({
+  defaultValues,
+  onSubmit,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"form">, "onSubmit" | "defaultValues"> & {
+  defaultValues?: Partial<FormValues>;
+  onSubmit: (values: DeclareIncidentValues) => Promise<void>;
+}) {
+  const trpc = useTRPC();
+  const { data: user } = useQuery(trpc.user.get.queryOptions());
+  const { data: members } = useQuery(trpc.member.list.queryOptions());
+  const { data: reports } = useQuery(
+    trpc.statusReport.list.queryOptions({ order: "desc" }),
+  );
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: "",
+      severity: "major",
+      summary: "",
+      commanderId: user ? String(user.id) : NONE,
+      startedAt: toLocalInput(new Date()),
+      statusReportId: NONE,
+      ...defaultValues,
+    },
+  });
+  const [isPending, startTransition] = useTransition();
+  const { setIsDirty } = useFormSheetDirty();
+
+  const formIsDirty = form.formState.isDirty;
+  React.useEffect(() => {
+    setIsDirty(formIsDirty);
+  }, [formIsDirty, setIsDirty]);
+
+  function submitAction(values: FormValues) {
+    if (isPending) return;
+    startTransition(async () => {
+      try {
+        const promise = onSubmit({
+          title: values.title,
+          severity: values.severity,
+          summary: values.summary || undefined,
+          commanderId:
+            values.commanderId === NONE ? null : Number(values.commanderId),
+          startedAt: new Date(values.startedAt),
+          statusReportId:
+            values.statusReportId === NONE
+              ? undefined
+              : Number(values.statusReportId),
+        });
+        toast.promise(promise, {
+          loading: "Declaring...",
+          success: () => "Incident declared",
+          error: (error) =>
+            isTRPCClientError(error) ? error.message : "Failed to declare",
+        });
+        await promise;
+      } catch (error) {
+        console.error(error);
+      }
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn("grid gap-4", className)}
+        onSubmit={form.handleSubmit(submitAction)}
+        {...props}
+      >
+        <FormCardContent className="grid gap-4">
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input placeholder="Checkout is failing" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="severity"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Severity</FormLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <FormControl>
+                    <SelectTrigger size="sm" className="font-mono">
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {incidentSeverity.map((severity) => (
+                      <SelectItem key={severity} value={severity}>
+                        {severityConfig[severity].label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  Critical: major outage or data loss. Major: significant
+                  degradation. Minor: limited impact.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="summary"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Summary</FormLabel>
+                <FormControl>
+                  <Textarea rows={3} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormCardContent>
+        <FormCardSeparator />
+        <FormCardContent className="grid gap-4">
+          <FormField
+            control={form.control}
+            name="commanderId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Commander</FormLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <FormControl>
+                    <SelectTrigger size="sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={NONE}>No commander</SelectItem>
+                    {(members ?? []).map((member) => (
+                      <SelectItem
+                        key={member.user.id}
+                        value={String(member.user.id)}
+                      >
+                        {personName(member.user) ?? `User ${member.user.id}`}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="startedAt"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Started at</FormLabel>
+                <FormControl>
+                  <Input type="datetime-local" {...field} />
+                </FormControl>
+                <FormDescription>
+                  When the impact began. Set it in the past to record an
+                  incident after the fact.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="statusReportId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status report</FormLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <FormControl>
+                    <SelectTrigger size="sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={NONE}>None</SelectItem>
+                    {(reports ?? [])
+                      .filter((report) => report.status !== "resolved")
+                      .map((report) => (
+                        <SelectItem key={report.id} value={String(report.id)}>
+                          {report.title}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  Link an open status report. You can also create one from the
+                  incident later.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormCardContent>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/components/forms/incident/sheet.tsx b/apps/dashboard/src/components/forms/incident/sheet.tsx
new file mode 100644
index 00000000..c501cc2e
--- /dev/null
+++ b/apps/dashboard/src/components/forms/incident/sheet.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Button } from "@openstatus/ui/components/ui/button";
+import { useState } from "react";
+
+import { FormCard, FormCardGroup } from "@/components/forms/form-card";
+import {
+  FormSheetContent,
+  FormSheetDescription,
+  FormSheetFooter,
+  FormSheetHeader,
+  FormSheetTitle,
+  FormSheetTrigger,
+  FormSheetWithDirtyProtection,
+} from "@/components/forms/form-sheet";
+
+import {
+  type DeclareIncidentValues,
+  FormDeclareIncident,
+  type FormValues,
+} from "./form";
+
+export function FormSheetDeclareIncident({
+  children,
+  defaultValues,
+  onSubmit,
+  footer,
+}: {
+  children: React.ReactNode;
+  defaultValues?: Partial<FormValues>;
+  onSubmit: (values: DeclareIncidentValues) => Promise<void>;
+  footer?: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <FormSheetWithDirtyProtection open={open} onOpenChange={setOpen}>
+      <FormSheetTrigger asChild>{children}</FormSheetTrigger>
+      <FormSheetContent className="sm:max-w-lg">
+        <FormSheetHeader>
+          <FormSheetTitle>Declare incident</FormSheetTitle>
+          <FormSheetDescription>
+            An internal record for the team: severity, commander and a timeline.
+            Nothing is published until you create a status report.
+          </FormSheetDescription>
+        </FormSheetHeader>
+        <FormCardGroup className="overflow-y-scroll">
+          <FormCard className="overflow-auto rounded-none border-none">
+            <FormDeclareIncident
+              id="declare-incident-form"
+              className="my-4"
+              defaultValues={defaultValues}
+              onSubmit={async (values) => {
+                await onSubmit(values);
+                setOpen(false);
+              }}
+            />
+          </FormCard>
+        </FormCardGroup>
+        {footer}
+        <FormSheetFooter>
+          <Button type="submit" form="declare-incident-form">
+            Declare
+          </Button>
+        </FormSheetFooter>
+      </FormSheetContent>
+    </FormSheetWithDirtyProtection>
+  );
+}
diff --git a/apps/dashboard/src/components/incidents/declare-incident-button.tsx b/apps/dashboard/src/components/incidents/declare-incident-button.tsx
new file mode 100644
index 00000000..7fc72b4f
--- /dev/null
+++ b/apps/dashboard/src/components/incidents/declare-incident-button.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+import type { FormValues } from "@/components/forms/incident/form";
+import { FormSheetDeclareIncident } from "@/components/forms/incident/sheet";
+import { useTRPC } from "@/lib/trpc/client";
+
+export type DeclareSource = {
+  type: "monitor_incident" | "status_report";
+  id: number;
+};
+
+/** Opens the declare sheet and lands on the new incident once declared. */
+export function DeclareIncidentButton({
+  children,
+  defaultValues,
+  source,
+  footer,
+}: {
+  children: React.ReactNode;
+  defaultValues?: Partial<FormValues>;
+  source?: DeclareSource;
+  footer?: React.ReactNode;
+}) {
+  const trpc = useTRPC();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const declare = useMutation(
+    trpc.incident.declare.mutationOptions({
+      onSuccess: (incident) => {
+        queryClient.invalidateQueries({
+          queryKey: trpc.incident.list.queryKey(),
+        });
+        if (incident) router.push(`/incidents/${incident.id}`);
+      },
+    }),
+  );
+
+  return (
+    <FormSheetDeclareIncident
+      defaultValues={defaultValues}
+      footer={footer}
+      onSubmit={async (values) => {
+        await declare.mutateAsync({ ...values, source });
+      }}
+    >
+      {children}
+    </FormSheetDeclareIncident>
+  );
+}
diff --git a/apps/dashboard/src/components/nav/app-sidebar.tsx b/apps/dashboard/src/components/nav/app-sidebar.tsx
index bbc6f5c1..b330dc7d 100644
--- a/apps/dashboard/src/components/nav/app-sidebar.tsx
+++ b/apps/dashboard/src/components/nav/app-sidebar.tsx
@@ -25,6 +25,7 @@ import { NavStatusPages } from "@/components/nav/nav-status-pages";
 import { NavUser } from "@/components/nav/nav-user";
 import { WorkspaceSwitcher } from "@/components/nav/workspace-switcher";
 import { NAV } from "@/config/nav";
+import { useFeature } from "@/hooks/use-feature";
 
 import { NavBanner } from "./nav-banner";
 import { NavHelp } from "./nav-help";
@@ -58,13 +59,26 @@ const data = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const incidents = useFeature("incident-management");
+  const overview = incidents
+    ? [
+        data.overview[0],
+        {
+          name: NAV.incidents.label,
+          url: NAV.incidents.href,
+          icon: NAV.incidents.icon,
+        },
+        ...data.overview.slice(1),
+      ]
+    : data.overview;
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="flex h-14 justify-center gap-0 border-b p-0">
         <WorkspaceSwitcher />
       </SidebarHeader>
       <SidebarContent>
-        <NavOverview items={data.overview} />
+        <NavOverview items={overview} />
         <NavStatusPages />
         <NavMonitors />
         <div className="mt-auto px-2">
diff --git a/apps/dashboard/src/config/nav.ts b/apps/dashboard/src/config/nav.ts
index ecf9cd12..55ec063d 100644
--- a/apps/dashboard/src/config/nav.ts
+++ b/apps/dashboard/src/config/nav.ts
@@ -2,6 +2,7 @@ import {
   Agent,
   Chat,
   type IconType,
+  Incident,
   Monitor,
   Notification,
   Overview,
@@ -28,6 +29,12 @@ export const NAV = {
     icon: Overview,
     keywords: ["home", "dashboard"],
   },
+  incidents: {
+    label: "Incidents",
+    href: "/incidents",
+    icon: Incident,
+    keywords: ["declare", "outage", "postmortem", "commander"],
+  },
   monitors: {
     label: "Monitors",
     href: "/monitors",
diff --git a/apps/dashboard/src/data/managed-incidents.client.ts b/apps/dashboard/src/data/managed-incidents.client.ts
new file mode 100644
index 00000000..e29a1e38
--- /dev/null
+++ b/apps/dashboard/src/data/managed-incidents.client.ts
@@ -0,0 +1,39 @@
+import type {
+  IncidentSeverity,
+  IncidentStatus,
+} from "@openstatus/db/src/schema/incidents/constants";
+
+export const severityConfig = {
+  critical: {
+    label: "Critical",
+    className: "text-destructive border-destructive/40",
+  },
+  major: { label: "Major", className: "text-warning border-warning/40" },
+  minor: { label: "Minor", className: "text-info border-info/40" },
+} as const satisfies Record<
+  IncidentSeverity,
+  { label: string; className: string }
+>;
+
+export const statusConfig = {
+  open: { label: "Open", className: "text-destructive" },
+  mitigated: { label: "Mitigated", className: "text-warning" },
+  resolved: { label: "Resolved", className: "text-success" },
+  canceled: { label: "Canceled", className: "text-muted-foreground" },
+} as const satisfies Record<
+  IncidentStatus,
+  { label: string; className: string }
+>;
+
+export function personName(
+  person: {
+    name: string | null;
+    firstName: string | null;
+    lastName: string | null;
+    email: string | null;
+  } | null,
+): string | null {
+  if (!person) return null;
+  const full = [person.firstName, person.lastName].filter(Boolean).join(" ");
+  return person.name || full || person.email || null;
+}