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>
This commit is contained in:
chihlasm
2026-04-04 00:43:48 +00:00
parent 91e3f80707
commit 47e71c4753
3 changed files with 71 additions and 39 deletions

View File

@@ -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>