fix: deduplicate actions, promote ViewToggle tab bar, standardize naming

Remove duplicate Update/Close actions from chat toolbars (FlowPilotPage,
CockpitPage) — session lifecycle actions now live only in headers. Redesign
ViewToggle as a persistent tab bar with bottom-border active indicator and
ARIA attributes. Standardize all action naming: Resolve (emerald), Update
(blue), Close (rose), Pause (muted). Fix IncidentHeader Resolve from orange
to emerald. Delete unused FlowPilotActionBar component (227 lines). Update
ConcludeSessionModal copy to use forward-facing action verbs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-04 04:40:06 +00:00
parent aca976a49a
commit 165e402284
9 changed files with 109 additions and 328 deletions

View File

@@ -1,6 +1,6 @@
import { useState, useRef, useCallback, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Sparkles, Send, Loader2, Flag, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, FileText, GripHorizontal } from 'lucide-react'
import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, GripHorizontal } from 'lucide-react'
import { cn } from '@/lib/utils'
import { PageMeta } from '@/components/common/PageMeta'
import { aiSessionsApi } from '@/api/aiSessions'
@@ -254,9 +254,6 @@ export default function CockpitPage() {
Cases
</button>
<div className="flex-1" />
{session.activeChatId && (
<ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
)}
<button
onClick={session.handleNewChat}
className="rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors"
@@ -265,6 +262,11 @@ export default function CockpitPage() {
</button>
</div>
{/* View tab bar — persistent when a session is active */}
{session.activeChatId && (
<ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
)}
{session.activeChatId ? (
<>
{/* Incident Header */}
@@ -275,11 +277,6 @@ export default function CockpitPage() {
onResolve={() => session.setShowConclude(true)}
onStatusUpdate={session.messages.length >= 2 ? () => session.setShowStatusUpdate(true) : undefined}
onClose={() => session.setShowConclude(true)}
extraActions={
<div className="hidden sm:block">
<ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
</div>
}
/>
{/* Resizable work zone + conversation log split */}
@@ -520,18 +517,6 @@ export default function CockpitPage() {
<span className="hidden sm:inline">Paste Logs</span>
</button>
)}
{session.messages.length >= 2 && (
<>
<button type="button" onClick={() => session.setShowStatusUpdate(true)} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-blue-400 hover:bg-blue-500/10 transition-colors disabled:opacity-40" title="Share status update">
<FileText size={14} />
<span className="hidden sm:inline">Update</span>
</button>
<button type="button" onClick={() => session.setShowConclude(true)} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors disabled:opacity-40" title="Close case">
<Flag size={14} />
<span className="hidden sm:inline">Close Case</span>
</button>
</>
)}
{!session.showTaskLane && (session.activeQuestions.length > 0 || session.activeActions.length > 0) && (
<button
type="button"