From 732e8829a7b1b9e5b17c6bfbaa467a2a695adcb3 Mon Sep 17 00:00:00 2001
From: Thibault Le Ouay <thibaultleouay@gmail.Com>
Date: Wed, 30 Sep 2026 16:38:00 +0200
Subject: [PATCH] dashboard: Postmortem tab (#2808)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../app/(dashboard)/incidents/[id]/client.tsx |   8 +
 .../incidents/incident-postmortem.tsx         | 203 ++++++++++++++++++
 .../incidents/incident-properties.tsx         |  34 ++-
 3 files changed, 235 insertions(+), 10 deletions(-)
 create mode 100644 apps/dashboard/src/components/incidents/incident-postmortem.tsx

diff --git a/apps/dashboard/src/app/(dashboard)/incidents/[id]/client.tsx b/apps/dashboard/src/app/(dashboard)/incidents/[id]/client.tsx
index bd2022e83..31791ccae 100644
--- a/apps/dashboard/src/app/(dashboard)/incidents/[id]/client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/incidents/[id]/client.tsx
@@ -23,6 +23,7 @@ import {
   SectionTitle,
 } from "@/components/content/section";
 import { IncidentComposer } from "@/components/incidents/incident-composer";
+import { IncidentPostmortem } from "@/components/incidents/incident-postmortem";
 import { IncidentProperties } from "@/components/incidents/incident-properties";
 import { IncidentStatusReport } from "@/components/incidents/incident-status-report";
 import { IncidentTimeline } from "@/components/incidents/incident-timeline";
@@ -100,6 +101,7 @@ export function Client({ id }: { id: number }) {
           <Tabs defaultValue="timeline" className="min-w-0">
             <TabsList>
               <TabsTrigger value="timeline">Timeline</TabsTrigger>
+              <TabsTrigger value="postmortem">Postmortem</TabsTrigger>
             </TabsList>
             <TabsContent value="timeline" className="grid gap-6">
               {incident.closedAt === null ? (
@@ -110,6 +112,12 @@ export function Client({ id }: { id: number }) {
               ) : null}
               <IncidentTimeline events={events ?? []} />
             </TabsContent>
+            <TabsContent value="postmortem">
+              <IncidentPostmortem
+                incident={incident}
+                agentAllowed={workspace?.limits["slack-agent"] === true}
+              />
+            </TabsContent>
           </Tabs>
           <aside className="grid content-start gap-6">
             <IncidentProperties incident={incident} />
diff --git a/apps/dashboard/src/components/incidents/incident-postmortem.tsx b/apps/dashboard/src/components/incidents/incident-postmortem.tsx
new file mode 100644
index 000000000..1000e2dfe
--- /dev/null
+++ b/apps/dashboard/src/components/incidents/incident-postmortem.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import type { RouterOutputs } from "@openstatus/api";
+import { Badge } from "@openstatus/ui/components/ui/badge";
+import { Button } from "@openstatus/ui/components/ui/button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@openstatus/ui/components/ui/tabs";
+import { Textarea } from "@openstatus/ui/components/ui/textarea";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { isTRPCClientError } from "@trpc/client";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { ProcessMessage } from "@/components/content/process-message";
+import { useTRPC } from "@/lib/trpc/client";
+
+type Incident = NonNullable<RouterOutputs["incident"]["get"]>;
+
+const TEMPLATE = `## Summary
+
+## Impact
+
+## Timeline
+
+## Root cause
+
+## What went well
+
+## What went wrong
+
+## Action items
+- [ ] `;
+
+function errorText(error: { message: string }) {
+  return isTRPCClientError(error) ? error.message : "Something went wrong";
+}
+
+/** The postmortem editor: draft by hand or with the agent, then approve. */
+export function IncidentPostmortem({
+  incident,
+  agentAllowed,
+}: {
+  incident: Incident;
+  agentAllowed: boolean;
+}) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { data: postmortem } = useQuery(
+    trpc.incident.getPostmortem.queryOptions({ id: incident.id }),
+  );
+  // null = pristine: the editor follows the server copy, so a background
+  // refetch never clobbers unsaved edits.
+  const [draft, setDraft] = useState<string | null>(null);
+  const server = postmortem?.content ?? TEMPLATE;
+  const content = draft ?? server;
+
+  const refresh = () =>
+    Promise.all([
+      queryClient.invalidateQueries({
+        queryKey: trpc.incident.getPostmortem.queryKey({ id: incident.id }),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: trpc.incident.get.queryKey({ id: incident.id }),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: trpc.incident.listEvents.queryKey({ id: incident.id }),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: trpc.incident.list.queryKey(),
+      }),
+    ]);
+  const onError = (error: { message: string }) => {
+    toast.error(errorText(error));
+  };
+
+  const save = useMutation(
+    trpc.incident.draftPostmortem.mutationOptions({
+      onSuccess: () => {
+        toast.success("Postmortem saved");
+        return refresh().then(() => setDraft(null));
+      },
+      onError,
+    }),
+  );
+  const draftWithAgent = useMutation(
+    trpc.incident.draftPostmortemWithAgent.mutationOptions({
+      onSuccess: () => {
+        toast.success("Draft ready");
+        return refresh().then(() => setDraft(null));
+      },
+      onError,
+    }),
+  );
+  const approve = useMutation(
+    trpc.incident.approvePostmortem.mutationOptions({
+      onSuccess: () => {
+        toast.success("Postmortem approved");
+        return refresh();
+      },
+      onError,
+    }),
+  );
+
+  if (incident.status !== "resolved") {
+    return (
+      <p className="text-muted-foreground text-sm">
+        The postmortem opens once the incident is resolved.
+      </p>
+    );
+  }
+
+  const approved = postmortem?.status === "approved";
+  const dirty = draft !== null && draft !== server;
+  const busy = save.isPending || draftWithAgent.isPending || approve.isPending;
+
+  return (
+    <div className="grid gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="flex items-center gap-2 text-sm">
+          {postmortem ? (
+            <Badge variant="outline" className="font-mono capitalize">
+              {postmortem.status}
+            </Badge>
+          ) : (
+            <span className="text-muted-foreground">No postmortem yet</span>
+          )}
+          {postmortem?.draftedBy === "agent" ? (
+            <span className="text-muted-foreground">Drafted by the agent</span>
+          ) : null}
+        </div>
+        {agentAllowed && !approved ? (
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={busy}
+            onClick={() => draftWithAgent.mutate({ id: incident.id })}
+          >
+            {draftWithAgent.isPending ? "Drafting..." : "Draft with agent"}
+          </Button>
+        ) : null}
+      </div>
+      <Tabs defaultValue="write">
+        <TabsList>
+          <TabsTrigger value="write">Write</TabsTrigger>
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+        </TabsList>
+        <TabsContent value="write">
+          <Textarea
+            rows={18}
+            className="font-mono text-sm"
+            value={content}
+            onChange={(e) => setDraft(e.target.value)}
+          />
+        </TabsContent>
+        <TabsContent value="preview">
+          <div className="prose dark:prose-invert prose-sm max-w-none rounded-md border px-3 py-2">
+            <ProcessMessage value={content} />
+          </div>
+        </TabsContent>
+      </Tabs>
+      <div className="flex flex-wrap justify-end gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={busy || !dirty || !content.trim()}
+          onClick={() =>
+            save.mutate({ id: incident.id, content, draftedBy: "user" })
+          }
+        >
+          Save
+        </Button>
+        {postmortem && !approved ? (
+          <>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={busy || dirty}
+              onClick={() => approve.mutate({ id: incident.id })}
+            >
+              Approve
+            </Button>
+            <Button
+              size="sm"
+              disabled={busy || dirty || incident.closedAt !== null}
+              onClick={() => approve.mutate({ id: incident.id, close: true })}
+            >
+              Approve & close
+            </Button>
+          </>
+        ) : null}
+      </div>
+      {approved && incident.closedAt === null ? (
+        <p className="text-muted-foreground text-right text-xs">
+          Approved. Close the incident from the panel on the right.
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/incidents/incident-properties.tsx b/apps/dashboard/src/components/incidents/incident-properties.tsx
index 125f6bbe8..335acaae5 100644
--- a/apps/dashboard/src/components/incidents/incident-properties.tsx
+++ b/apps/dashboard/src/components/incidents/incident-properties.tsx
@@ -56,6 +56,9 @@ export function IncidentProperties({ incident }: { incident: Incident }) {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { data: members } = useQuery(trpc.member.list.queryOptions());
+  const { data: postmortem } = useQuery(
+    trpc.incident.getPostmortem.queryOptions({ id: incident.id }),
+  );
   const [startedAt, setStartedAt] = useState(toLocalInput(incident.startedAt));
   const closed = incident.closedAt !== null;
 
@@ -202,16 +205,27 @@ export function IncidentProperties({ incident }: { incident: Incident }) {
       </Row>
       <div className="flex flex-wrap gap-2 pt-2">
         {incident.status === "resolved" && !closed ? (
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={close.isPending}
-            onClick={() =>
-              close.mutate({ id: incident.id, skipPostmortem: true })
-            }
-          >
-            Close without postmortem
-          </Button>
+          postmortem?.status === "approved" ? (
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={close.isPending}
+              onClick={() => close.mutate({ id: incident.id })}
+            >
+              Close incident
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={close.isPending}
+              onClick={() =>
+                close.mutate({ id: incident.id, skipPostmortem: true })
+              }
+            >
+              Close (skip postmortem)
+            </Button>
+          )
         ) : null}
         {incident.deletable ? (
           <FormAlertDialog
-- 
2.51.2