'use client';

import { SidebarNav } from '@/components/sidebar-nav';
import { HermesInstanceSwitcher } from '@/components/hermes-instance-switcher';
import { ThemeToggle } from '@/components/theme-toggle';
import { HermesInstanceProvider } from '@/lib/hermes-instance-context';

export default function HermesLayout({ children }: { children: React.ReactNode }) {
  return (
    <HermesInstanceProvider>
      <div className="flex min-h-screen bg-[var(--bl-bg-canvas)] text-[var(--bl-text-primary)]">
        <SidebarNav />
        <main className="flex-1 min-w-0 overflow-y-auto">
          <div className="p-4 lg:p-8">
            {/* Global instance switcher + theme toggle — every Mission
                Control pane reads from the same hooks so these controls
                propagate everywhere. */}
            <div className="mb-4 flex items-center justify-end gap-2">
              <HermesInstanceSwitcher />
              <ThemeToggle />
            </div>
            {children}
          </div>
        </main>
      </div>
    </HermesInstanceProvider>
  );
}
