From 4870d4e9770ab3a55a1b9fd57694a7cf8adc2c01 Mon Sep 17 00:00:00 2001
From: singret <100959986+singret@users.noreply.github.com>
Date: Wed, 3 Jun 2026 05:10:14 +0000
Subject: [PATCH 1/3] feat(postmortem): auto-select first template on load

---
 frontend/src/components/incidents/PostMortemPanel.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/incidents/PostMortemPanel.tsx b/frontend/src/components/incidents/PostMortemPanel.tsx
index 1ec6e8c..ee952e8 100644
--- a/frontend/src/components/incidents/PostMortemPanel.tsx
+++ b/frontend/src/components/incidents/PostMortemPanel.tsx
@@ -73,7 +73,13 @@ export function PostMortemPanel({ incidentId, onPostMortemLoaded }: PostMortemPa
     Promise.all([
       fetchPm(),
       getAISettings().then((s) => setAiEnabled(s.enabled)).catch(() => setAiEnabled(false)),
-      listPostMortemTemplates().then(setTemplates).catch(() => setTemplates([])),
+      listPostMortemTemplates()
+        .then((data) => {
+          setTemplates(data)
+          const first = data[0]
+          if (first) setSelectedTemplateId(first.id)
+        })
+        .catch(() => setTemplates([])),
     ]).finally(() => setLoading(false))
   }, [fetchPm])
 

From f7a8dfbfbd5e46b29a1cd071f248c2912ac44489 Mon Sep 17 00:00:00 2001
From: singret <100959986+singret@users.noreply.github.com>
Date: Wed, 3 Jun 2026 05:14:47 +0000
Subject: [PATCH 2/3] feat(postmortem): add TemplatePills, wire into empty
 state, update Generate button label

---
 .../components/incidents/PostMortemPanel.tsx  | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/incidents/PostMortemPanel.tsx b/frontend/src/components/incidents/PostMortemPanel.tsx
index ee952e8..f12b250 100644
--- a/frontend/src/components/incidents/PostMortemPanel.tsx
+++ b/frontend/src/components/incidents/PostMortemPanel.tsx
@@ -286,6 +286,16 @@ export function PostMortemPanel({ incidentId, onPostMortemLoaded }: PostMortemPa
             <p className="text-sm font-medium text-text-primary mb-1">No post-mortem yet</p>
             <p className="text-xs text-text-tertiary">Write it yourself or let AI draft it from the incident timeline.</p>
           </div>
+          {aiEnabled && templates.length > 0 && (
+            <div className="flex flex-col items-center gap-2">
+              <span className="text-[10px] text-text-tertiary font-medium uppercase tracking-wide">Template</span>
+              <TemplatePills
+                templates={templates}
+                selectedId={selectedTemplateId}
+                onSelect={setSelectedTemplateId}
+              />
+            </div>
+          )}
           <div className="flex items-center justify-center gap-3 flex-wrap">
             <Button
               variant="primary"
@@ -306,7 +316,9 @@ export function PostMortemPanel({ incidentId, onPostMortemLoaded }: PostMortemPa
                 disabled={generating || creating}
               >
                 {!generating && <Sparkles className="w-3.5 h-3.5" />}
-                Generate with AI
+                {selectedTemplateId
+                  ? `Generate · ${templates.find((t) => t.id === selectedTemplateId)?.name ?? 'AI'}`
+                  : 'Generate with AI'}
               </Button>
             )}
           </div>
@@ -482,6 +494,50 @@ function AIActionsDropdown({
   )
 }
 
+function TemplatePills({
+  templates,
+  selectedId,
+  onSelect,
+}: {
+  templates: PostMortemTemplate[]
+  selectedId: string
+  onSelect: (id: string) => void
+}) {
+  if (templates.length === 0) return null
+  const single = templates.length === 1
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {templates.map((t) => {
+        const isSelected = t.id === selectedId
+        if (single) {
+          return (
+            <span
+              key={t.id}
+              className="px-2.5 py-1 text-xs rounded-full border border-border text-text-tertiary opacity-60 cursor-default"
+            >
+              {t.name}
+            </span>
+          )
+        }
+        return (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => onSelect(t.id)}
+            className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
+              isSelected
+                ? 'bg-primary border-primary text-white'
+                : 'border-border text-text-secondary hover:border-primary hover:text-primary'
+            }`}
+          >
+            {t.name}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
 function formatRelativeTime(isoString: string): string {
   const date = new Date(isoString)
   const now = new Date()

From 3cde53574f5cde4fa50b6c3714f85b378bd06c79 Mon Sep 17 00:00:00 2001
From: singret <100959986+singret@users.noreply.github.com>
Date: Wed, 3 Jun 2026 05:34:24 +0000
Subject: [PATCH 3/3] fix(postmortem): use correct brand-primary color for
 selected template pill

---
 frontend/src/components/incidents/PostMortemPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/incidents/PostMortemPanel.tsx b/frontend/src/components/incidents/PostMortemPanel.tsx
index f12b250..53ff40d 100644
--- a/frontend/src/components/incidents/PostMortemPanel.tsx
+++ b/frontend/src/components/incidents/PostMortemPanel.tsx
@@ -526,8 +526,8 @@ function TemplatePills({
             onClick={() => onSelect(t.id)}
             className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
               isSelected
-                ? 'bg-primary border-primary text-white'
-                : 'border-border text-text-secondary hover:border-primary hover:text-primary'
+                ? 'bg-brand-primary border-brand-primary text-white'
+                : 'border-border text-text-secondary hover:border-brand-primary hover:text-brand-primary'
             }`}
           >
             {t.name}