feat: add ViewToggle component, uncomment in both pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/assistant/ViewToggle.tsx

@@ -0,0 +1,50 @@
+import { useNavigate } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+import { useFeatureFlag } from '@/hooks/useFeatureFlag'
+
+interface ViewToggleProps {
+  currentView: 'flowpilot' | 'cockpit'
+  sessionId: string
+}
+
+export function ViewToggle({ currentView, sessionId }: ViewToggleProps) {
+  const navigate = useNavigate()
+  const hasCockpit = useFeatureFlag('flowpilot_cockpit')
+
+  if (!hasCockpit) return null
+
+  const handleSwitch = (view: 'flowpilot' | 'cockpit') => {
+    if (view === currentView) return
+    const path = view === 'cockpit'
+      ? `/cockpit/${sessionId}`
+      : `/assistant/${sessionId}`
+    navigate(path)
+  }
+
+  return (
+    <div className="flex items-center rounded-lg border border-border bg-card p-0.5 text-xs">
+      <button
+        onClick={() => handleSwitch('flowpilot')}
+        className={cn(
+          'rounded-md px-2.5 py-1 font-medium transition-colors',
+          currentView === 'flowpilot'
+            ? 'bg-elevated text-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        FlowPilot
+      </button>
+      <button
+        onClick={() => handleSwitch('cockpit')}
+        className={cn(
+          'rounded-md px-2.5 py-1 font-medium transition-colors',
+          currentView === 'cockpit'
+            ? 'bg-elevated text-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        Cockpit
+      </button>
+    </div>
+  )
+}

frontend/src/pages/CockpitPage.tsx

@@ -11,8 +11,7 @@ import { IncidentHeader } from '@/components/assistant/IncidentHeader'
 import { StepsPanel } from '@/components/assistant/StepsPanel'
 import { FlowPilotAsks } from '@/components/assistant/FlowPilotAsks'
 import { WhatWeKnow } from '@/components/assistant/WhatWeKnow'
-// TODO: uncomment after Task 4
-// import { ViewToggle } from '@/components/assistant/ViewToggle'
+import { ViewToggle } from '@/components/assistant/ViewToggle'
 import { useAssistantSession } from '@/hooks/useAssistantSession'
 import { useFeatureFlag } from '@/hooks/useFeatureFlag'
 import type { TriageMeta, EvidenceItem, TriageUpdate } from '@/types/ai-session'
@@ -248,8 +247,7 @@ export default function CockpitPage() {
               onResolve={() => session.setShowConclude(true)}
               onClose={() => session.setShowConclude(true)}
             />
-            {/* TODO: uncomment after Task 4 */}
-            {/* <ViewToggle currentView="cockpit" sessionId={session.activeChatId} /> */}
+            <ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
 
             {/* Resizable work zone + conversation log split */}
             <div ref={splitContainerRef} className="flex-1 flex flex-col min-h-0 relative">

frontend/src/pages/FlowPilotPage.tsx

@@ -8,8 +8,7 @@ import { ChatMessage } from '@/components/assistant/ChatMessage'
 import { TaskLane } from '@/components/assistant/TaskLane'
 import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
 import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
-// TODO: uncomment after Task 4
-// import { ViewToggle } from '@/components/assistant/ViewToggle'
+import { ViewToggle } from '@/components/assistant/ViewToggle'
 import { useAssistantSession } from '@/hooks/useAssistantSession'
 
 export default function FlowPilotPage() {
@@ -116,10 +115,9 @@ export default function FlowPilotPage() {
                   Chats
                 </button>
                 <div className="flex-1" />
-                {/* TODO: uncomment after Task 4 */}
-                {/* {session.activeChatId && (
+                {session.activeChatId && (
                   <ViewToggle currentView="flowpilot" 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"
@@ -132,8 +130,7 @@ export default function FlowPilotPage() {
                 <>
                   {/* Desktop view toggle bar */}
                   <div className="hidden sm:flex items-center justify-end px-4 py-1.5 border-b border-border/50">
-                    {/* TODO: uncomment after Task 4 */}
-                    {/* <ViewToggle currentView="flowpilot" sessionId={session.activeChatId} /> */}
+                    <ViewToggle currentView="flowpilot" sessionId={session.activeChatId} />
                   </div>
 
                   {/* Messages */}