"use client"; import { useEffect, useRef, useState } from "react"; import { Toolbar } from "@/components/toolbar"; import { EditorPane } from "@/components/editor-pane"; import { PreviewPane } from "@/components/preview-pane"; import { TasksSidebar } from "@/components/tasks-sidebar"; import { HistoryPane } from "@/components/history-pane"; import { WelcomeModal } from "@/components/welcome-modal"; import { SettingsModal, type SectionId } from "@/components/settings-modal"; import { ConvertChip } from "@/components/convert-chip"; import { useStore, type AgentInfo } from "@/lib/store"; export default function Home() { const iframeRef = useRef(null); const welcomeAck = useStore((s) => s.welcomeAck); const selectedAgent = useStore((s) => s.selectedAgent); const setAgents = useStore((s) => s.setAgents); const locale = useStore((s) => s.locale); const layoutMode = useStore((s) => s.layoutMode); const [welcomeOpen, setWelcomeOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const [settingsInitialSection, setSettingsInitialSection] = useState< SectionId | undefined >(undefined); const [deployConfigRev, setDeployConfigRev] = useState(0); const [hydrated, setHydrated] = useState(false); useEffect(() => { setHydrated(true); }, []); // Detect agents on mount so the toolbar's agent chip can resolve the // persisted `selectedAgent` to a label without waiting for the user to // open Settings or Welcome. Without this, after a hard reload the chip // briefly (or permanently) shows "Select agent" even though selection // is intact in localStorage. useEffect(() => { if (!hydrated) return; let cancelled = false; (async () => { try { const res = await fetch("/api/agents", { cache: "no-store" }); if (!res.ok) return; const data = (await res.json()) as { agents: AgentInfo[] }; if (!cancelled) setAgents(data.agents); } catch { // Settings / Welcome modals will retry on open. } })(); return () => { cancelled = true; }; }, [hydrated, setAgents]); // Keep in sync with the user's locale so screen readers // and browser features (autotranslate, hyphenation) pick the right language. useEffect(() => { if (typeof document !== "undefined") { document.documentElement.setAttribute("lang", locale); } }, [locale]); useEffect(() => { if (!hydrated) return; if (!welcomeAck || !selectedAgent) setWelcomeOpen(true); }, [hydrated, welcomeAck, selectedAgent]); return (
setSettingsOpen(true)} onOpenSettings={() => setSettingsOpen(true)} onRequestConfigureDeploy={() => { setSettingsInitialSection("deploy"); setSettingsOpen(true); }} deployConfigRev={deployConfigRev} />
{layoutMode !== "preview" && (
)} {layoutMode !== "editor" && (
)}
{welcomeOpen && setWelcomeOpen(false)} />} {settingsOpen && ( { setSettingsOpen(false); setSettingsInitialSection(undefined); setDeployConfigRev((r) => r + 1); }} /> )}
); }