frontend/src/studio/StudioShell.tsx

import { useState } from 'react'
import { StudioAssetsPanel } from './components/StudioAssetsPanel'
import { StudioCommandPanel } from './components/StudioCommandPanel'
import { StudioPipelinePanel } from './components/StudioPipelinePanel'
import { useStudioReview } from './hooks/use-studio-review'
import { useStudioSession } from './hooks/use-studio-session'
import type { StudioKind } from './protocol/studio-agent-types'

interface StudioShellProps {
  onExit: () => void
  isExiting?: boolean
  studioKind?: StudioKind
}

export function StudioShell({ onExit, isExiting, studioKind = 'manim' }: StudioShellProps) {
  const studio = useStudioSession({
    studioKind,
    title: studioKind === 'plot' ? 'Plot Studio' : 'Manim Studio'
  })
  const [selectedWorkId, setSelectedWorkId] = useState<string | null>(null)
  const effectiveSelectedWorkId =
    selectedWorkId && studio.works.some((work) => work.id === selectedWorkId)
      ? selectedWorkId
      : studio.works[0]?.id ?? null
  const selected = studio.selectWork(effectiveSelectedWorkId)
  const review = useStudioReview(selected.result)

  return (
    <div
      className={`h-screen overflow-hidden bg-bg-primary text-text-primary studio-shell-root ${
        isExiting ? 'animate-studio-exit' : 'animate-studio-entrance'
      }`}
    >
      <div className="fixed inset-0 pointer-events-none opacity-40">
        <div className="absolute left-[-5%] top-[-10%] h-[40%] w-[40%] rounded-full bg-accent-rgb/10 blur-[120px]" />
        <div className="absolute bottom-[-5%] right-[-5%] h-[35%] w-[35%] rounded-full bg-accent-rgb/5 blur-[100px]" />
      </div>

      <div className="relative flex h-screen min-h-0 overflow-hidden backdrop-blur-[2px]">
        <StudioAssetsPanel
          session={studio.session}
          works={studio.workSummaries}
          selectedWorkId={effectiveSelectedWorkId}
          work={selected.work}
          result={selected.result}
          latestRun={studio.latestRun}
          onSelectWork={setSelectedWorkId}
        />

        <StudioCommandPanel
          session={studio.session}
          messages={studio.messages}
          latestAssistantText={studio.latestAssistantText}
          isBusy={studio.isBusy}
          disabled={studio.isBusy || studio.state.connection.snapshotStatus !== 'ready'}
          onRun={studio.runCommand}
          onExit={onExit}
        />

        <StudioPipelinePanel
          latestRun={studio.latestRun}
          work={selected.work}
          result={selected.result}
          tasks={selected.tasks}
          review={review}
          requests={studio.pendingPermissions}
          replyingPermissionIds={studio.replyingPermissionIds}
          latestAssistantText={studio.latestAssistantText}
          latestQuestion={studio.latestQuestion}
          snapshotStatus={studio.state.connection.snapshotStatus}
          eventStatus={studio.state.connection.eventStatus}
          errorMessage={studio.state.error ?? studio.state.connection.eventError}
          onReply={studio.replyPermission}
          onRefresh={studio.refresh}
        />
      </div>
    </div>
  )
}