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>

frontend/src/components/assistant/ConcludeSessionModal.tsx

@@ -33,8 +33,8 @@ interface ConcludeSessionModalProps {
 const OUTCOMES: { value: ConclusionOutcome; label: string; description: string; icon: typeof CheckCircle2; color: string; bg: string; border: string }[] = [
   {
     value: 'resolved',
-    label: 'Resolved',
-    description: 'Issue has been fixed or answered',
+    label: 'Resolve',
+    description: 'Mark the issue as fixed',
     icon: CheckCircle2,
     color: 'text-emerald-400',
     bg: 'bg-emerald-400/10',
@@ -43,7 +43,7 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
   {
     value: 'escalated',
     label: 'Escalate',
-    description: 'Needs to be handed off or escalated',
+    description: 'Hand off to another engineer or team',
     icon: ArrowUpRight,
     color: 'text-amber-400',
     bg: 'bg-amber-400/10',
@@ -51,8 +51,8 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
   },
   {
     value: 'paused',
-    label: 'Paused',
-    description: 'Continuing later — saving progress',
+    label: 'Pause',
+    description: 'Save progress and come back later',
     icon: Pause,
     color: 'text-blue-400',
     bg: 'bg-blue-400/10',
@@ -155,7 +155,7 @@ export function ConcludeSessionModal({
         setSummary('')
       }
     } catch {
-      setError('Failed to conclude session. Please try again.')
+      setError('Failed to close case. Please try again.')
       setGenerating(false)
     }
   }
@@ -296,7 +296,7 @@ export function ConcludeSessionModal({
           {step === 'select-outcome' && (
             <div className="space-y-3">
               <p className="text-sm text-muted-foreground mb-4">
-                How did this session end?
+                What would you like to do?
               </p>
               {OUTCOMES.map(o => {
                 const Icon = o.icon
@@ -526,12 +526,12 @@ export function ConcludeSessionModal({
                 {generating ? (
                   <>
                     <Loader2 size={15} className="animate-spin" />
-                    Generating...
+                    Closing...
                   </>
                 ) : (
                   <>
                     <Sparkles size={15} />
-                    Generate Summary
+                    Close &amp; Generate
                   </>
                 )}
               </button>

frontend/src/components/assistant/IncidentHeader.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Pencil, X, Check, ExternalLink, Pause, XCircle, Link2, MoreHorizontal, FileText } from 'lucide-react'
+import { Pencil, X, Check, CheckCircle2, 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'
@@ -12,8 +12,6 @@ interface IncidentHeaderProps {
   onStatusUpdate?: () => void
   onPause?: () => void
   onClose?: () => void
-  /** Extra elements rendered in the action group (e.g. ViewToggle) */
-  extraActions?: React.ReactNode
 }
 
 interface EditPopoverProps {
@@ -129,14 +127,14 @@ function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: ()
       {open && (
         <>
           <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">
+          <div className="absolute right-0 top-full mt-1 z-50 w-40 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
+                Pause
               </button>
             )}
             <button
@@ -152,7 +150,7 @@ function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: ()
                 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
+                Close
               </button>
             )}
           </div>
@@ -170,7 +168,6 @@ export function IncidentHeader({
   onStatusUpdate,
   onPause,
   onClose,
-  extraActions,
 }: IncidentHeaderProps) {
   return (
     <div className="bg-card border-b border-default px-4 py-2 flex items-center gap-4 flex-wrap">
@@ -212,21 +209,21 @@ export function IncidentHeader({
         )}
         <button
           onClick={onResolve}
-          className="bg-accent/15 border border-accent rounded px-3 py-1 text-xs font-medium text-accent hover:bg-accent/25 transition-colors"
+          className="flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
         >
+          <CheckCircle2 size={13} />
           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"
+            className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
           >
             <FileText size={13} />
             Update
           </button>
         )}
         <OverflowMenu onPause={onPause} onClose={onClose} />
-        {extraActions}
       </div>
     </div>
   )

frontend/src/components/assistant/ViewToggle.tsx

@@ -18,6 +18,13 @@ interface ViewToggleProps {
   sessionId?: string
 }
 
+/**
+ * Persistent tab bar for switching between FlowPilot (chat) and Cockpit (triage) views.
+ * Renders as a horizontal tab strip with an active bottom-border indicator.
+ *
+ * NOTE: If the tab bar proves too tall or prominent in certain layouts,
+ * consider pivoting to a compact segmented control (Option A from the critique).
+ */
 export function ViewToggle({ currentView, sessionId }: ViewToggleProps) {
   const navigate = useNavigate()
   const hasCockpit = useFeatureFlag('flowpilot_cockpit')
@@ -37,19 +44,24 @@ export function ViewToggle({ currentView, sessionId }: ViewToggleProps) {
   }
 
   return (
-    <div className="flex items-center rounded-lg border border-border bg-card p-0.5 text-xs">
+    <div className="flex items-center border-b border-border px-3 shrink-0" role="tablist">
       {VIEW_OPTIONS.map(({ key, label, icon: Icon }) => (
         <button
           key={key}
+          role="tab"
+          aria-selected={currentView === key}
+          aria-current={currentView === key ? 'page' : undefined}
           onClick={() => handleSwitch(key)}
           className={cn(
-            'flex items-center gap-1.5 rounded-md px-2.5 py-1 font-medium transition-colors',
+            'flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 -mb-px',
+            'transition-[color,border-color] duration-150',
+            'active:opacity-80',
             currentView === key
-              ? 'bg-elevated text-foreground'
-              : 'text-muted-foreground hover:text-foreground'
+              ? 'text-foreground border-primary'
+              : 'text-muted-foreground hover:text-foreground border-transparent'
           )}
         >
-          <Icon size={12} />
+          <Icon size={14} />
           {label}
         </button>
       ))}

frontend/src/components/flowpilot/FlowPilotActionBar.tsx

@@ -1,227 +0,0 @@
-import { useState } from 'react'
-import { CheckCircle2, ArrowUpRight, Pause, X, FileText } from 'lucide-react'
-import { EscalateModal } from './EscalateModal'
-import { StatusUpdateModal } from './StatusUpdateModal'
-import type {
-  ResolveSessionRequest,
-  EscalateSessionRequest,
-  SessionDocumentation,
-  StatusUpdateAudience,
-  StatusUpdateLength,
-  StatusUpdateContext,
-  StatusUpdateResponse,
-} from '@/types/ai-session'
-
-interface FlowPilotActionBarProps {
-  canResolve: boolean
-  canEscalate: boolean
-  isProcessing: boolean
-  hasPsaTicket?: boolean
-  sessionId?: string
-  canShareUpdate?: boolean
-  onResolve: (data: ResolveSessionRequest) => Promise<SessionDocumentation>
-  onEscalate: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
-  onPause?: () => Promise<void>
-  onAbandon?: () => Promise<void>
-  onGenerateStatusUpdate?: (audience: StatusUpdateAudience, length: StatusUpdateLength, context: StatusUpdateContext) => Promise<StatusUpdateResponse>
-}
-
-export function FlowPilotActionBar({
-  canResolve,
-  canEscalate,
-  isProcessing,
-  hasPsaTicket = false,
-  sessionId,
-  canShareUpdate = false,
-  onResolve,
-  onEscalate,
-  onPause,
-  onAbandon,
-  onGenerateStatusUpdate,
-}: FlowPilotActionBarProps) {
-  const [showResolve, setShowResolve] = useState(false)
-  const [showEscalate, setShowEscalate] = useState(false)
-  const [showAbandon, setShowAbandon] = useState(false)
-  const [showStatusUpdate, setShowStatusUpdate] = useState(false)
-  const [resolutionSummary, setResolutionSummary] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  const handleResolve = async () => {
-    if (!resolutionSummary.trim() || resolutionSummary.length < 5) return
-    setSubmitting(true)
-    try {
-      await onResolve({ resolution_summary: resolutionSummary })
-      setShowResolve(false)
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const handlePause = async () => {
-    if (onPause) {
-      setSubmitting(true)
-      try {
-        await onPause()
-      } finally {
-        setSubmitting(false)
-      }
-    }
-  }
-
-  const handleAbandon = async () => {
-    if (onAbandon) {
-      setSubmitting(true)
-      try {
-        await onAbandon()
-        setShowAbandon(false)
-      } finally {
-        setSubmitting(false)
-      }
-    }
-  }
-
-  return (
-    <>
-      {/* Bottom bar — fixed to viewport bottom, single row on all screen sizes */}
-      <div
-        className="fixed bottom-0 right-0 z-40 flex items-center gap-1.5 sm:gap-3 border-t border-border bg-card px-2 sm:px-5 py-2 sm:py-3"
-        style={{ left: 'var(--sidebar-w, 0px)' }}
-      >
-        {/* Primary actions */}
-        <button
-          onClick={() => { setShowResolve(true); setShowEscalate(false) }}
-          disabled={!canResolve || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >
-          <CheckCircle2 size={15} />
-          Resolve
-        </button>
-        <button
-          onClick={() => setShowEscalate(true)}
-          disabled={!canEscalate || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >
-          <ArrowUpRight size={15} />
-          Escalate
-        </button>
-        {canShareUpdate && onGenerateStatusUpdate && (
-          <button
-            onClick={() => setShowStatusUpdate(true)}
-            disabled={isProcessing}
-            className="flex items-center justify-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-            title="Share Update"
-          >
-            <FileText size={15} />
-            <span className="hidden sm:inline">Share Update</span>
-          </button>
-        )}
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Secondary actions — right side */}
-        {onPause && (
-          <button
-            onClick={handlePause}
-            disabled={isProcessing || submitting}
-            className="flex items-center justify-center gap-1.5 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
-          >
-            <Pause size={15} />
-            <span className="hidden sm:inline">Pause</span>
-          </button>
-        )}
-        {onAbandon && (
-          <button
-            onClick={() => setShowAbandon(true)}
-            disabled={isProcessing || submitting}
-            className="flex items-center justify-center gap-1.5 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
-          >
-            <X size={15} />
-            <span className="hidden sm:inline">Close</span>
-          </button>
-        )}
-      </div>
-
-      {/* Resolve modal */}
-      {showResolve && (
-        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm">
-          <div className="card-flat w-full max-w-full sm:max-w-lg mx-0 sm:mx-4 p-4 sm:p-6 rounded-t-2xl sm:rounded-2xl">
-            <h3 className="font-heading text-lg font-semibold text-foreground mb-1">Resolve Session</h3>
-            <p className="text-sm text-muted-foreground mb-4">Summarize what fixed the issue. This will be included in the auto-generated documentation.</p>
-            <textarea
-              value={resolutionSummary}
-              onChange={(e) => setResolutionSummary(e.target.value)}
-              placeholder="What resolved the issue?"
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none resize-none"
-              rows={4}
-              autoFocus
-            />
-            <div className="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-              <button
-                onClick={() => setShowResolve(false)}
-                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleResolve}
-                disabled={resolutionSummary.length < 5 || submitting}
-                className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
-              >
-                {submitting ? 'Resolving...' : 'Resolve Session'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Close/Abandon confirmation */}
-      {showAbandon && (
-        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm">
-          <div className="card-flat w-full max-w-full sm:max-w-lg mx-0 sm:mx-4 p-4 sm:p-6 rounded-t-2xl sm:rounded-2xl">
-            <h3 className="font-heading text-lg font-semibold text-foreground mb-1">Close Session</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              Are you sure you want to close this session? The session history will be kept but it won't count as resolved.
-            </p>
-            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-              <button
-                onClick={() => setShowAbandon(false)}
-                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleAbandon}
-                disabled={submitting}
-                className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
-              >
-                {submitting ? 'Closing...' : 'Close Session'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Escalate modal */}
-      <EscalateModal
-        open={showEscalate}
-        onClose={() => setShowEscalate(false)}
-        onEscalate={onEscalate}
-        isProcessing={isProcessing || submitting}
-        hasPsaTicket={hasPsaTicket}
-        sessionId={sessionId}
-      />
-
-      {/* Status Update modal */}
-      {onGenerateStatusUpdate && (
-        <StatusUpdateModal
-          open={showStatusUpdate}
-          onClose={() => setShowStatusUpdate(false)}
-          onGenerate={onGenerateStatusUpdate}
-          context="status"
-          hasPsaTicket={hasPsaTicket}
-        />
-      )}
-    </>
-  )
-}

frontend/src/components/flowpilot/index.ts

@@ -2,7 +2,6 @@ export { FlowPilotIntake } from './FlowPilotIntake'
 export { FlowPilotSession } from './FlowPilotSession'
 export { FlowPilotStepCard } from './FlowPilotStepCard'
 export { FlowPilotOptions } from './FlowPilotOptions'
-export { FlowPilotActionBar } from './FlowPilotActionBar'
 export { ConfidenceIndicator } from './ConfidenceIndicator'
 export { SessionDocView } from './SessionDocView'
 export { AISessionListItem } from './AISessionListItem'