Function BranchModal

app/dashboard/components/time-travel/BranchModal.tsx:41–151

({
  // llmEvents,
  setBranchModalOpen,
  project_id,
  session_id,
})

const TTD_QUERY_KEY = 'ttds';

export const BranchModal: React.FC<BranchModalProps> = ({
  // llmEvents,
  setBranchModalOpen,
  project_id,
  session_id,
}) => {
  const [branchState, setBranchState] = useState<BranchState>(BranchState.EnterBranchName);
  const [cliCommand, _] = useState<string>(``);
  // const [showBranchModal, setShowBranchModal] = useState<boolean>(false);
  const [branchName, setBranchName] = useState('');
  const queryClient = useQueryClient();

  const handleSaveBranch = async () => {
    if (!branchName.trim()) {
      toast({
        title: 'Error',
        description: 'Branch name cannot be empty.',
        variant: 'destructive',
      });
      return;
    }
    setBranchState(BranchState.Loading);
    try {
      await fetchAuthenticatedApi('/timetravel', {
        method: 'POST',
        body: JSON.stringify({
          name: branchName,
          projectId: project_id,
          sessionId: session_id,
        }),
      });
      toast({ title: '✅ Branch Created', description: `Snapshot "${branchName}" saved.` });
      queryClient.invalidateQueries({ queryKey: [TTD_QUERY_KEY] });
      setBranchModalOpen(false);
    } catch (error: any) {
      console.error('Error saving branch:', error);
      toast({
        title: '❌ Error Saving Branch',
        description: error.message,
        variant: 'destructive',
      });
    } finally {
      setBranchState(BranchState.BranchSucceeded);
    }
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Create Branch</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Create Branch</AlertDialogTitle>
          <AlertDialogDescription>
            Enter a name for your branch to save your changes.
          </AlertDialogDescription>
        </AlertDialogHeader>