hanzo.ai/components/app.tsx

'use client'

/**
 * The rooms, mounted under this site's router.
 *
 * @hanzo/app names no framework: it takes the router, the route and the link
 * component here, and the integrations Directory lists from this build's data —
 * named only where the rooms are drawn, so a marketing page does not carry them.
 *
 * The path is passed by the one surface whose rooms read it, the app
 * (`/chat/<id>`, Dev's path under `/dev`), which renders on the client only.
 * A room under app/(app) reads none, so the static export needs no Suspense
 * boundary around them and ships the veil the rooms draw before hydration.
 */
import type { ReactNode } from 'react'
import NextLink from 'next/link'
import { useRouter } from 'next/navigation'
import { Rooms } from '@hanzo/app'
import { AccountProvider } from '@hanzo/app/lib/account'
import { Box } from '@hanzo/ui'
import { useRoute } from '@/components/shell/route'

export function RoomsHost({ path, children }: { path?: string | null; children: ReactNode }) {
  const router = useRouter()
  const route = useRoute()
  return (
    <Rooms router={router} path={path} route={route} Link={NextLink}>
      {children}
    </Rooms>
  )
}

/**
 * A room's frame: the account, the rooms' host, and the box that is the whole
 * window — full-screen APP, not a marketing page: no SiteHeader, no SiteFooter,
 * and no site rail either. Every room under app/(app) is drawn in it
 * (app/(app)/layout.tsx), and so is Dev for a signed-in reader (app/dev/_door).
 *
 * `data-room` marks the room, for whatever needs to know it is in one.
 */
export function Room({ children }: { children: ReactNode }) {
  return (
    <AccountProvider>
      <RoomsHost>
        <Box data-room="" bg="$background" height="100dvh" overflow="hidden">
          {children}
        </Box>
      </RoomsHost>
    </AccountProvider>
  )
}