client/src/hooks/useAgentOrchestrator.ts

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { io } from 'socket.io-client';
import { RootState, AppDispatch } from '../store';
import { fetchProjects } from '../store/projectsSlice';

export function useAgentOrchestrator() {
    const navigate = useNavigate();
    const dispatch = useDispatch<AppDispatch>();
    const { token } = useSelector((state: RootState) => state.auth);

    useEffect(() => {
        if (!token) return;

        // The browser connects to the /browser namespace to listen to the agent
        const socket = io('http://localhost:5000/browser', {
            auth: { token },
        });

        // When the CLI agent wants to guide the user's view:
        socket.on('agent:navigate', (path: string) => {
            console.log(`[Agent Orchestrator] Navigating to ${path}`);
            navigate(path);
        });

        // When the CLI agent creates a project, we should refresh our state so the UI updates
        socket.on('agent:project_created', () => {
            console.log(`[Agent Orchestrator] Agent created a project, refreshing list`);
            dispatch(fetchProjects());
        });

        // You could add logic here for 'agent:video_draft_updated' 
        // to fill out the form fields in VideoCreate automatically.

        return () => {
            socket.disconnect();
        };
    }, [token, navigate, dispatch]);
}