'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' interface TerminalToolbarProps { sessionId: string sessionKind: string sessionName?: string isActive?: boolean mode: 'readonly' | 'interactive' viewMode: 'terminal' | 'transcript' onModeChange: (mode: 'readonly' | 'interactive') => void onViewModeChange: (mode: 'terminal' | 'transcript') => void onDetach?: () => void } export function TerminalToolbar({ sessionId, sessionKind, sessionName, isActive, mode, viewMode, onModeChange, onViewModeChange, onDetach, }: TerminalToolbarProps) { const [confirmingInteractive, setConfirmingInteractive] = useState(false) const kindLabel = sessionKind === 'claude-code' ? 'Claude' : sessionKind === 'codex-cli' ? 'Codex' : sessionKind const shortId = sessionId.length > 12 ? sessionId.slice(0, 8) + '...' : sessionId return (

{/* Left: Session info */}

{sessionName || kindLabel} {shortId}

{/* Right: Controls */}

{/* View mode toggle */}

{/* Mode toggle (only in terminal view) */} {viewMode === 'terminal' && ( <> {confirmingInteractive ? (

Enable interactive?

) : ( )} )} {/* Detach */} {onDetach && ( )}

) }