From 47e71c4753b362b255ae96e6738e2196aa54e32f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 4 Apr 2026 00:43:48 +0000
Subject: [PATCH] fix: opaque overflow menu, add Update button to cockpit and
 assistant headers

The IncidentHeader overflow menu was see-through due to bg-elevated on
bg-card. Switched to bg-card with shadow-xl and fixed-scrim dismiss
pattern matching production FlowPilotSessionPage. Replaced unicode
ellipsis with MoreHorizontal icon + aria-label. Added Update button
(StatusUpdateModal) to IncidentHeader and FlowPilotPage header bar
for feature parity with production.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/assistant/IncidentHeader.tsx   | 81 ++++++++++---------
 frontend/src/pages/CockpitPage.tsx            |  1 +
 frontend/src/pages/FlowPilotPage.tsx          | 28 ++++++-
 3 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/assistant/IncidentHeader.tsx b/frontend/src/components/assistant/IncidentHeader.tsx
index 4a84d2be..023ffd55 100644
--- a/frontend/src/components/assistant/IncidentHeader.tsx
+++ b/frontend/src/components/assistant/IncidentHeader.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Pencil, X, Check, ExternalLink, Pause, XCircle, Link2 } from 'lucide-react'
+import { Pencil, X, Check, ExternalLink, Pause, XCircle, Link2, MoreHorizontal, FileText } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import type { TriageMeta } from '@/types/ai-session'
@@ -9,6 +9,7 @@ interface IncidentHeaderProps {
   psaTicketId: string | null
   onFieldSave: (field: keyof TriageMeta, value: string) => void
   onResolve: () => void
+  onStatusUpdate?: () => void
   onPause?: () => void
   onClose?: () => void
 }
@@ -98,22 +99,14 @@ function HeaderField({ label, value, placeholder, onSave, isHypothesis }: Header
 
 function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: () => void }) {
   const [open, setOpen] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (!open) return
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false)
-    }
     const handleEsc = (e: KeyboardEvent) => {
       if (e.key === 'Escape') setOpen(false)
     }
-    document.addEventListener('mousedown', handleClickOutside)
     document.addEventListener('keydown', handleEsc)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-      document.removeEventListener('keydown', handleEsc)
-    }
+    return () => { document.removeEventListener('keydown', handleEsc) }
   }, [open])
 
   const handleCopyLink = () => {
@@ -123,41 +116,45 @@ function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: ()
   }
 
   return (
-    <div ref={menuRef} className="relative">
+    <div className="relative">
       <button
         onClick={() => setOpen(!open)}
-        className="bg-elevated border border-default rounded px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        aria-label="More actions"
+        className="flex items-center justify-center rounded-lg px-2 py-1.5 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
       >
-        ⋯
+        <MoreHorizontal size={16} />
       </button>
       {open && (
-        <div className="absolute right-0 top-full mt-1 z-50 w-44 bg-elevated border border-hover rounded-md shadow-lg py-1">
-          {onPause && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 top-full mt-1 z-50 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
+            {onPause && (
+              <button
+                onClick={() => { onPause(); setOpen(false) }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors text-left"
+              >
+                <Pause size={13} />
+                Pause Case
+              </button>
+            )}
             <button
-              onClick={() => { onPause(); setOpen(false) }}
-              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-card transition-colors text-left"
+              onClick={handleCopyLink}
+              className="w-full flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors text-left"
             >
-              <Pause size={12} />
-              Pause Case
+              <Link2 size={13} />
+              Copy Link
             </button>
-          )}
-          <button
-            onClick={handleCopyLink}
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-card transition-colors text-left"
-          >
-            <Link2 size={12} />
-            Copy Link
-          </button>
-          {onClose && (
-            <button
-              onClick={() => { onClose(); setOpen(false) }}
-              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger hover:text-danger hover:bg-danger-dim transition-colors text-left"
-            >
-              <XCircle size={12} />
-              Close Case
-            </button>
-          )}
-        </div>
+            {onClose && (
+              <button
+                onClick={() => { onClose(); setOpen(false) }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors text-left"
+              >
+                <XCircle size={13} />
+                Close Case
+              </button>
+            )}
+          </div>
+        </>
       )}
     </div>
   )
@@ -168,6 +165,7 @@ export function IncidentHeader({
   psaTicketId,
   onFieldSave,
   onResolve,
+  onStatusUpdate,
   onPause,
   onClose,
 }: IncidentHeaderProps) {
@@ -215,6 +213,15 @@ export function IncidentHeader({
         >
           Resolve
         </button>
+        {onStatusUpdate && (
+          <button
+            onClick={onStatusUpdate}
+            className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded px-3 py-1 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
+          >
+            <FileText size={13} />
+            Update
+          </button>
+        )}
         <OverflowMenu onPause={onPause} onClose={onClose} />
       </div>
     </div>
diff --git a/frontend/src/pages/CockpitPage.tsx b/frontend/src/pages/CockpitPage.tsx
index ed954d05..86c8fea4 100644
--- a/frontend/src/pages/CockpitPage.tsx
+++ b/frontend/src/pages/CockpitPage.tsx
@@ -273,6 +273,7 @@ export default function CockpitPage() {
               psaTicketId={psaTicketId}
               onFieldSave={handleTriageFieldSave}
               onResolve={() => session.setShowConclude(true)}
+              onStatusUpdate={session.messages.length >= 2 ? () => session.setShowStatusUpdate(true) : undefined}
               onClose={() => session.setShowConclude(true)}
             />
             {/* View toggle bar — desktop only (mobile has it in the header) */}
diff --git a/frontend/src/pages/FlowPilotPage.tsx b/frontend/src/pages/FlowPilotPage.tsx
index f1b97156..1790b3d9 100644
--- a/frontend/src/pages/FlowPilotPage.tsx
+++ b/frontend/src/pages/FlowPilotPage.tsx
@@ -128,8 +128,32 @@ export default function FlowPilotPage() {
 
               {session.activeChatId ? (
                 <>
-                  {/* Desktop view toggle bar */}
-                  <div className="hidden sm:flex items-center justify-end px-4 py-1.5 border-b border-border/50">
+                  {/* Desktop view toggle + action bar */}
+                  <div className="hidden sm:flex items-center justify-between px-4 py-1.5 border-b border-border/50">
+                    <div className="flex items-center gap-1.5">
+                      {session.messages.length >= 2 && (
+                        <>
+                          <button
+                            type="button"
+                            onClick={() => session.setShowStatusUpdate(true)}
+                            disabled={session.loading}
+                            className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded-lg px-3 py-1 text-xs font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                          >
+                            <FileText size={13} />
+                            Update
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => session.setShowConclude(true)}
+                            disabled={session.loading}
+                            className="flex items-center gap-1.5 bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-1 text-xs font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                          >
+                            <Flag size={13} />
+                            Conclude
+                          </button>
+                        </>
+                      )}
+                    </div>
                     <ViewToggle currentView="flowpilot" sessionId={session.activeChatId} />
                   </div>