create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/components/CodePanel.tsx

@@ -1,812 +1,1147 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { useAppStore } from '../stores/useAppStore'
-import {
-  getPageSourcePath,
-  generateAppCode,
-  generateLayoutCode,
-  generatePageCode,
-  generateProjectSchema,
-} from '../utils/codegen'
-import { importProjectPage } from '../utils/projectPersistence'
-import {
-  loadProjectFile,
-  saveProjectFile,
-  type ProjectFile,
-} from '../utils/projectFiles'
-import type { Page } from '../types'
-import ProjectExplorer from './ProjectExplorer'
-
-export type CodeView = 'page' | 'app' | 'layout' | 'schema' | 'file'
-
-interface FileSystemChangeDetail {
-  type: 'filesystem-change'
-  path: string
-  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
-}
-
-const externalMoveMatchWindowMs = 1600
-
-function getProjectFileName(path: string) {
-  return path.split('/').pop() ?? path
-}
-
-export default function CodePanel({
-  view,
-  onViewChange,
-  onPageRegistered,
-  onWorkspaceSelectFile,
-  filePath,
-  embedded = false,
-}: {
-  view: CodeView
-  onViewChange: (view: CodeView) => void
-  onPageRegistered?: (page: Page) => void
-  onWorkspaceSelectFile?: (path: string) => void
-  filePath?: string | null
-  embedded?: boolean
-}) {
-  const {
-    appShell,
-    pages,
-    activePageId,
-    projectName,
-    registerPage,
-    saveProject,
-    setActivePage,
-    setSelectedComponent,
-  } = useAppStore()
-  const [copied, setCopied] = useState(false)
-  const [projectFile, setProjectFile] = useState<ProjectFile | null>(null)
-  const [fileContent, setFileContent] = useState('')
-  const [fileLoading, setFileLoading] = useState(false)
-  const [fileError, setFileError] = useState<string | null>(null)
-  const [fileSaveState, setFileSaveState] = useState<
-    'idle' | 'saving' | 'saved'
-  >('idle')
-  const [fileReloadVersion, setFileReloadVersion] = useState(0)
-  const [externalFileChangePending, setExternalFileChangePending] =
-    useState(false)
-  const fileStateRef = useRef({
-    view,
-    filePath,
-    projectFile,
-    fileContent,
-  })
-  const workspaceSelectFileRef = useRef(onWorkspaceSelectFile)
-  const recentAddedFilesRef = useRef(new Map<string, number>())
-  const pendingMovedFileRef = useRef<{
-    path: string
-    fileName: string
-  } | null>(null)
-  const missingFileTimerRef = useRef<number | null>(null)
-  const [registeringPage, setRegisteringPage] = useState(false)
-  const [registerName, setRegisterName] = useState('')
-  const [registerRoute, setRegisterRoute] = useState('')
-  const [registerError, setRegisterError] = useState<string | null>(null)
-  const [registerBusy, setRegisterBusy] = useState(false)
-  const [workspaceOpen, setWorkspaceOpen] = useState(false)
-  const activePage = pages.find((page) => page.id === activePageId) ?? pages[0]
-
-  useEffect(() => {
-    if (!workspaceOpen) return
-
-    const previousOverflow = document.body.style.overflow
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setWorkspaceOpen(false)
-      }
-    }
-
-    document.body.style.overflow = 'hidden'
-    window.addEventListener('keydown', closeOnEscape)
-
-    return () => {
-      document.body.style.overflow = previousOverflow
-      window.removeEventListener('keydown', closeOnEscape)
-    }
-  }, [workspaceOpen])
-
-  useEffect(() => {
-    fileStateRef.current = {
-      view,
-      filePath,
-      projectFile,
-      fileContent,
-    }
-  }, [fileContent, filePath, projectFile, view])
-
-  useEffect(() => {
-    workspaceSelectFileRef.current = onWorkspaceSelectFile
-  }, [onWorkspaceSelectFile])
-
-  useEffect(
-    () => () => {
-      if (missingFileTimerRef.current !== null) {
-        window.clearTimeout(missingFileTimerRef.current)
-      }
-    },
-    []
-  )
-
-  useEffect(() => {
-    if (view !== 'file' || !filePath) return
-    let cancelled = false
-
-    pendingMovedFileRef.current = null
-    if (missingFileTimerRef.current !== null) {
-      window.clearTimeout(missingFileTimerRef.current)
-      missingFileTimerRef.current = null
-    }
-
-    void Promise.resolve().then(async () => {
-      if (cancelled) return
-      setFileLoading(true)
-      setFileError(null)
-      setFileSaveState('idle')
-      setExternalFileChangePending(false)
-
-      try {
-        const nextFile = await loadProjectFile(filePath)
-
-        if (cancelled) return
-        setProjectFile(nextFile)
-        setFileContent(nextFile.content)
-      } catch (error) {
-        if (cancelled) return
-        setProjectFile(null)
-        setFileError(getErrorMessage(error))
-      } finally {
-        if (!cancelled) setFileLoading(false)
-      }
-    })
-
-    return () => {
-      cancelled = true
-    }
-  }, [filePath, fileReloadVersion, view])
-
-  useEffect(() => {
-    const handleFileSystemChange = (event: Event) => {
-      const detail = (event as CustomEvent<FileSystemChangeDetail>).detail
-      const current = fileStateRef.current
-      const normalizedEventPath = detail?.path.replace(/\\/g, '/') ?? ''
-      const normalizedCurrentPath = current.filePath?.replace(/\\/g, '/')
-      const now = Date.now()
-
-      if (
-        !detail ||
-        detail.type !== 'filesystem-change' ||
-        current.view !== 'file' ||
-        !normalizedCurrentPath
-      ) {
-        return
-      }
-
-      for (const [addedPath, addedAt] of recentAddedFilesRef.current) {
-        if (now - addedAt > externalMoveMatchWindowMs) {
-          recentAddedFilesRef.current.delete(addedPath)
-        }
-      }
-
-      if (detail.action === 'add') {
-        recentAddedFilesRef.current.set(normalizedEventPath, now)
-        const pendingMove = pendingMovedFileRef.current
-
-        if (
-          pendingMove &&
-          normalizedEventPath !== pendingMove.path &&
-          getProjectFileName(normalizedEventPath) === pendingMove.fileName
-        ) {
-          pendingMovedFileRef.current = null
-          if (missingFileTimerRef.current !== null) {
-            window.clearTimeout(missingFileTimerRef.current)
-            missingFileTimerRef.current = null
-          }
-          setFileError(null)
-          workspaceSelectFileRef.current?.(normalizedEventPath)
-          return
-        }
-      }
-
-      const selectedPathWasRemoved =
-        (detail.action === 'unlink' &&
-          normalizedEventPath === normalizedCurrentPath) ||
-        (detail.action === 'unlinkDir' &&
-          normalizedCurrentPath.startsWith(`${normalizedEventPath}/`))
-
-      if (selectedPathWasRemoved) {
-        const hasLocalEdits =
-          current.projectFile?.content !== current.fileContent
-
-        if (hasLocalEdits) {
-          setExternalFileChangePending(true)
-          return
-        }
-
-        const fileName = getProjectFileName(normalizedCurrentPath)
-        const movedPath = Array.from(
-          recentAddedFilesRef.current.entries()
-        )
-          .filter(
-            ([addedPath, addedAt]) =>
-              addedPath !== normalizedCurrentPath &&
-              now - addedAt <= externalMoveMatchWindowMs &&
-              getProjectFileName(addedPath) === fileName
-          )
-          .sort((left, right) => right[1] - left[1])[0]?.[0]
-
-        if (movedPath) {
-          setFileError(null)
-          workspaceSelectFileRef.current?.(movedPath)
-          return
-        }
-
-        pendingMovedFileRef.current = {
-          path: normalizedCurrentPath,
-          fileName,
-        }
-        setFileError(null)
-
-        if (missingFileTimerRef.current !== null) {
-          window.clearTimeout(missingFileTimerRef.current)
-        }
-        missingFileTimerRef.current = window.setTimeout(() => {
-          if (pendingMovedFileRef.current?.path !== normalizedCurrentPath) {
-            return
-          }
-
-          pendingMovedFileRef.current = null
-          missingFileTimerRef.current = null
-          setProjectFile(null)
-          setFileError('This file was removed from the project.')
-        }, externalMoveMatchWindowMs)
-        return
-      }
-
-      if (normalizedEventPath !== normalizedCurrentPath) {
-        return
-      }
-
-      const hasLocalEdits =
-        current.projectFile?.content !== current.fileContent
-
-      if (hasLocalEdits) {
-        setExternalFileChangePending(true)
-        return
-      }
-
-      setFileReloadVersion((version) => version + 1)
-    }
-
-    window.addEventListener(
-      'visualbuild:filesystem-changed',
-      handleFileSystemChange
-    )
-    return () =>
-      window.removeEventListener(
-        'visualbuild:filesystem-changed',
-        handleFileSystemChange
-      )
-  }, [])
-
-  const generated = useMemo(() => {
-    if (view === 'file') {
-      return {
-        filename: filePath ?? 'No file selected',
-        code: fileContent,
-      }
-    }
-
-    if (view === 'page') {
-      return {
-        filename: getPageSourcePath(activePage),
-        code: generatePageCode(activePage),
-      }
-    }
-
-    if (view === 'app') {
-      return {
-        filename: 'src/App.tsx',
-        code: generateAppCode(pages, appShell),
-      }
-    }
-
-    if (view === 'layout') {
-      return {
-        filename: 'src/layouts/AppLayout.tsx',
-        code: generateLayoutCode(appShell),
-      }
-    }
-
-    if (view === 'schema') {
-      return {
-        filename: 'visualbuild/pages.json',
-        code: generateProjectSchema(pages, appShell, projectName),
-      }
-    }
-
-    return {
-      filename: 'visualbuild/pages.json',
-      code: generateProjectSchema(pages, appShell, projectName),
-    }
-  }, [activePage, appShell, fileContent, filePath, pages, projectName, view])
-
-  const copyCode = () => {
-    void navigator.clipboard?.writeText(generated.code)
-    setCopied(true)
-    window.setTimeout(() => setCopied(false), 1000)
-  }
-
-  const saveFile = async () => {
-    if (!filePath || !projectFile || projectFile.isBinary || projectFile.isTooLarge) {
-      return
-    }
-
-    setFileSaveState('saving')
-    setFileError(null)
-
-    try {
-      await saveProjectFile(filePath, fileContent)
-      setProjectFile({
-        ...projectFile,
-        content: fileContent,
-        size: new Blob([fileContent]).size,
-      })
-      setExternalFileChangePending(false)
-      setFileSaveState('saved')
-      window.setTimeout(() => setFileSaveState('idle'), 1200)
-    } catch (error) {
-      setFileError(getErrorMessage(error))
-      setFileSaveState('idle')
-    }
-  }
-
-  const isFileDirty =
-    view === 'file' && projectFile?.content !== fileContent
-  const normalizedFilePath = filePath?.replace(/\\/g, '/') ?? ''
-  const canRegisterFileAsPage =
-    view === 'file' &&
-    Boolean(projectFile) &&
-    /^src\/.+\.(jsx|tsx)$/i.test(normalizedFilePath) &&
-    !pages.some((page) => getPageSourcePath(page) === normalizedFilePath)
-
-  const openPageRegistration = () => {
-    const name = derivePageName(normalizedFilePath)
-
-    setRegisterName(name)
-    setRegisterRoute(derivePageRoute(name))
-    setRegisterError(null)
-    setRegisteringPage(true)
-  }
-
-  const registerFileAsPage = async () => {
-    const name = registerName.trim()
-    const routeInput = registerRoute.trim()
-    const route = routeInput.startsWith('/') ? routeInput : `/${routeInput}`
-
-    if (!filePath || !name || !routeInput) {
-      setRegisterError('Enter a page name and route')
-      return
-    }
-
-    if (
-      pages.some((page) => page.name.toLowerCase() === name.toLowerCase())
-    ) {
-      setRegisterError('Page name already exists')
-      return
-    }
-
-    if (pages.some((page) => page.route === route)) {
-      setRegisterError('Route already exists')
-      return
-    }
-
-    setRegisterBusy(true)
-    setRegisterError(null)
-
-    try {
-      if (isFileDirty) {
-        await saveProjectFile(filePath, fileContent)
-        setProjectFile((current) =>
-          current
-            ? {
-                ...current,
-                content: fileContent,
-                size: new Blob([fileContent]).size,
-              }
-            : current
-        )
-      }
-
-      const page = await importProjectPage(filePath, name, route)
-      registerPage(page)
-      setActivePage(page.id)
-      await saveProject()
-      onViewChange('page')
-      onPageRegistered?.(page)
-      setRegisteringPage(false)
-    } catch (error) {
-      setRegisterError(getErrorMessage(error))
-    } finally {
-      setRegisterBusy(false)
-    }
-  }
-
-  const panelContent = (
-    <>
-      <div className="h-10 px-3 border-b border-white/[0.06] flex items-center justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
-            Code
-          </p>
-          <p className="text-[10px] text-gray-400 truncate">
-            {generated.filename}
-          </p>
-        </div>
-        <div className="flex shrink-0 items-center gap-1">
-          {!workspaceOpen && (
-            <button
-              type="button"
-              onClick={() => setWorkspaceOpen(true)}
-              className="cursor-pointer rounded bg-white/[0.06] px-2 py-1 text-[10px] font-medium text-gray-300 transition-colors hover:bg-white/[0.1] hover:text-white"
-              title="Open a larger code workspace"
-            >
-              Open editor
-            </button>
-          )}
-          {canRegisterFileAsPage && (
-            <button
-              type="button"
-              onClick={openPageRegistration}
-              className="cursor-pointer rounded bg-emerald-500/15 px-2 py-1 text-[10px] font-medium text-emerald-300 transition-colors hover:bg-emerald-500/25 hover:text-emerald-200"
-            >
-              Register page
-            </button>
-          )}
-          {view === 'file' && externalFileChangePending && (
-            <button
-              type="button"
-              onClick={() => {
-                setExternalFileChangePending(false)
-                setFileReloadVersion((version) => version + 1)
-              }}
-              className="cursor-pointer rounded bg-amber-500/15 px-2 py-1 text-[10px] font-medium text-amber-300 transition-colors hover:bg-amber-500/25 hover:text-amber-200"
-              title="Discard unsaved editor text and load the external file version"
-            >
-              Reload disk
-            </button>
-          )}
-          {view === 'file' && projectFile && !projectFile.isBinary && !projectFile.isTooLarge && (
-            <button
-              type="button"
-              onClick={() => void saveFile()}
-              disabled={!isFileDirty || fileSaveState === 'saving'}
-              className="cursor-pointer rounded bg-blue-500 px-2 py-1 text-[10px] font-medium text-white transition-colors hover:bg-blue-400 disabled:cursor-default disabled:bg-white/[0.06] disabled:text-gray-500"
-            >
-              {fileSaveState === 'saving'
-                ? 'Saving...'
-                : fileSaveState === 'saved'
-                  ? 'Saved'
-                  : 'Save file'}
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={copyCode}
-            className="px-2 py-1 text-[10px] text-gray-300 bg-white/[0.06] hover:bg-white/[0.1] rounded transition-colors cursor-pointer select-none"
-          >
-            {copied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
-      </div>
-
-      <div className="px-2 py-2 border-b border-white/[0.06] flex flex-wrap gap-1">
-        <CodeTab active={view === 'page'} onClick={() => onViewChange('page')}>
-          Page
-        </CodeTab>
-        <CodeTab active={view === 'app'} onClick={() => onViewChange('app')}>
-          App
-        </CodeTab>
-        {(appShell.header || appShell.footer) && (
-          <CodeTab
-            active={view === 'layout'}
-            onClick={() => onViewChange('layout')}
-          >
-            Layout
-          </CodeTab>
-        )}
-        <CodeTab
-          active={view === 'schema'}
-          onClick={() => onViewChange('schema')}
-        >
-          JSON
-        </CodeTab>
-        {filePath && (
-          <CodeTab active={view === 'file'} onClick={() => onViewChange('file')}>
-            File{isFileDirty ? ' *' : ''}
-          </CodeTab>
-        )}
-      </div>
-
-      {view === 'file' ? (
-        <FileEditor
-          file={projectFile}
-          content={fileContent}
-          loading={fileLoading}
-          error={fileError}
-          onChange={setFileContent}
-          onSave={() => void saveFile()}
-        />
-      ) : (
-        <pre className="flex-1 overflow-auto p-4 text-[11px] leading-5 font-mono text-gray-200 bg-[#0b0d11]">
-          <code>{generated.code}</code>
-        </pre>
-      )}
-      {registeringPage && (
-        <PageRegistrationDialog
-          name={registerName}
-          route={registerRoute}
-          error={registerError}
-          busy={registerBusy}
-          onNameChange={setRegisterName}
-          onRouteChange={setRegisterRoute}
-          onCancel={() => setRegisteringPage(false)}
-          onConfirm={() => void registerFileAsPage()}
-        />
-      )}
-    </>
-  )
-
-  const compactPanel = (
-    <aside
-      className={`${embedded ? 'h-full w-full' : 'w-[460px] border-l'} relative flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-[#101318]`}
-      onClick={() => setSelectedComponent(null)}
-    >
-      {panelContent}
-    </aside>
-  )
-
-  if (!workspaceOpen) {
-    return compactPanel
-  }
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[140] flex bg-black/70 p-3 backdrop-blur-sm"
-      role="dialog"
-      aria-modal="true"
-      aria-label="VisualBuild code workspace"
-    >
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-white/10 bg-[#0b0d11] shadow-2xl">
-        <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.08] bg-[#15181e] px-4">
-          <div className="min-w-0">
-            <p className="text-xs font-semibold text-white">
-              VisualBuild Code Editor
-            </p>
-            <p className="truncate text-[10px] text-gray-500">
-              {generated.filename}
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => setWorkspaceOpen(false)}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
-            aria-label="Close code editor"
-            title="Close code editor"
-          >
-            x
-          </button>
-        </header>
-
-        <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
-          <aside className="flex h-[38%] w-full shrink-0 flex-col overflow-hidden border-b border-white/[0.08] bg-[#101318] sm:h-auto sm:w-[300px] sm:border-r sm:border-b-0">
-            <div className="flex h-10 shrink-0 items-center border-b border-white/[0.06] px-3">
-              <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
-                Project files
-              </p>
-            </div>
-            <div className="min-h-0 flex-1 overflow-hidden">
-              <ProjectExplorer
-                selectedPath={filePath ?? null}
-                onSelectFile={(path) => {
-                  if (path) onWorkspaceSelectFile?.(path)
-                }}
-              />
-            </div>
-          </aside>
-
-          <section
-            className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-[#101318]"
-            onClick={() => setSelectedComponent(null)}
-          >
-            {panelContent}
-          </section>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}
-
-function PageRegistrationDialog({
-  name,
-  route,
-  error,
-  busy,
-  onNameChange,
-  onRouteChange,
-  onCancel,
-  onConfirm,
-}: {
-  name: string
-  route: string
-  error: string | null
-  busy: boolean
-  onNameChange: (value: string) => void
-  onRouteChange: (value: string) => void
-  onCancel: () => void
-  onConfirm: () => void
-}) {
-  return (
-    <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/55 p-5 backdrop-blur-sm">
-      <div className="w-full max-w-sm rounded-lg border border-white/10 bg-[#191d24] p-4 shadow-2xl">
-        <h2 className="text-sm font-semibold text-white">Register as page</h2>
-        <p className="mt-1 text-[11px] leading-4 text-gray-400">
-          VisualBuild will manage this file from the canvas after registration.
-        </p>
-        <label className="mt-4 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
-          Page name
-          <input
-            autoFocus
-            value={name}
-            onChange={(event) => onNameChange(event.target.value)}
-            className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
-          />
-        </label>
-        <label className="mt-3 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
-          Route
-          <input
-            value={route}
-            onChange={(event) => onRouteChange(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') onConfirm()
-            }}
-            className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
-          />
-        </label>
-        {error && <p className="mt-3 text-xs text-red-300">{error}</p>}
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            disabled={busy}
-            className="cursor-pointer rounded px-3 py-1.5 text-xs text-gray-400 hover:bg-white/[0.06] hover:text-white disabled:cursor-default"
-          >
-            Keep as file
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            disabled={busy}
-            className="cursor-pointer rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-400 disabled:cursor-default disabled:bg-blue-500/40"
-          >
-            {busy ? 'Registering...' : 'Register page'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function FileEditor({
-  file,
-  content,
-  loading,
-  error,
-  onChange,
-  onSave,
-}: {
-  file: ProjectFile | null
-  content: string
-  loading: boolean
-  error: string | null
-  onChange: (content: string) => void
-  onSave: () => void
-}) {
-  if (loading) {
-    return (
-      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] text-xs text-gray-500">
-        Opening file...
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-red-300">
-        {error}
-      </div>
-    )
-  }
-
-  if (file?.isBinary || file?.isTooLarge) {
-    return (
-      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-gray-400">
-        {file.isBinary
-          ? 'Binary files cannot be edited in the code panel.'
-          : 'This file is larger than the 2 MB editor limit.'}
-      </div>
-    )
-  }
-
-  return (
-    <textarea
-      value={content}
-      onChange={(event) => onChange(event.target.value)}
-      onKeyDown={(event) => {
-        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
-          event.preventDefault()
-          onSave()
-        }
-      }}
-      spellCheck={false}
-      className="min-h-0 flex-1 resize-none overflow-auto bg-[#0b0d11] p-4 font-mono text-[11px] leading-5 text-gray-200 outline-none"
-      aria-label="Project file editor"
-    />
-  )
-}
-
-function CodeTab({
-  active,
-  children,
-  onClick,
-}: {
-  active: boolean
-  children: React.ReactNode
-  onClick: () => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`px-2 py-1 text-[10px] rounded transition-colors cursor-pointer select-none ${
-        active
-          ? 'bg-accent text-white'
-          : 'text-gray-500 hover:text-gray-200 hover:bg-white/[0.06]'
-      }`}
-    >
-      {children}
-    </button>
-  )
-}
-
-function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : 'Project file operation failed'
-}
-
-function derivePageName(filePath: string) {
-  const filename = filePath.split('/').pop() ?? 'Page'
-  const baseName = filename
-    .replace(/\.[^.]+$/, '')
-    .replace(/Page$/i, '')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .replace(/[-_]+/g, ' ')
-    .trim()
-
-  return baseName
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ') || 'Page'
-}
-
-function derivePageRoute(name: string) {
-  const slug = name
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-
-  return slug === 'home' ? '/' : `/${slug || 'page'}`
-}
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { syncCustomComponentRoot } from '../../shared/syncCustomComponentSource.mjs'
+import { useAppStore } from '../stores/useAppStore'
+import {
+  getPageSourcePath,
+  generateAppCode,
+  generateLayoutCode,
+  generatePageCode,
+  generateProjectSchema,
+} from '../utils/codegen'
+import {
+  importProjectPage,
+  registerProjectComponent,
+} from '../utils/projectPersistence'
+import {
+  loadProjectFile,
+  saveProjectFile,
+  type ProjectFile,
+} from '../utils/projectFiles'
+import type { Page, VisualNode } from '../types'
+import ProjectExplorer from './ProjectExplorer'
+
+export type CodeView = 'page' | 'app' | 'layout' | 'schema' | 'file'
+
+interface FileSystemChangeDetail {
+  type: 'filesystem-change'
+  path: string
+  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
+}
+
+const externalMoveMatchWindowMs = 1600
+
+function getProjectFileName(path: string) {
+  return path.split('/').pop() ?? path
+}
+
+function findVisualNodeById(
+  nodes: VisualNode[],
+  nodeId: string
+): VisualNode | null {
+  for (const node of nodes) {
+    if (node.id === nodeId) return node
+    const child = findVisualNodeById(node.children, nodeId)
+    if (child) return child
+    const tree = node.props.componentTree
+    if (
+      typeof tree === 'object' &&
+      tree !== null &&
+      Array.isArray((tree as { children?: unknown }).children)
+    ) {
+      const definitionChild = findVisualNodeById(
+        (tree as { children: VisualNode[] }).children,
+        nodeId
+      )
+      if (definitionChild) return definitionChild
+    }
+  }
+
+  return null
+}
+
+function findCustomOwnerNode(
+  nodes: VisualNode[],
+  nodeId: string,
+  names: Set<string>
+): VisualNode | null {
+  for (const node of nodes) {
+    if (names.has(node.type)) {
+      const tree = node.props.componentTree
+      const children =
+        typeof tree === 'object' &&
+        tree !== null &&
+        Array.isArray((tree as { children?: unknown }).children)
+          ? (tree as { children: VisualNode[] }).children
+          : []
+      if (node.id === nodeId || findVisualNodeById(children, nodeId)) {
+        return node
+      }
+    }
+    const owner = findCustomOwnerNode(node.children, nodeId, names)
+    if (owner) return owner
+  }
+  return null
+}
+
+function getCustomComponentTreeChildren(node: VisualNode) {
+  const tree = node.props.componentTree
+  return typeof tree === 'object' &&
+    tree !== null &&
+    Array.isArray((tree as { children?: unknown }).children)
+    ? (tree as { children: VisualNode[] }).children
+    : []
+}
+
+export default function CodePanel({
+  view,
+  onViewChange,
+  onPageRegistered,
+  onWorkspaceSelectFile,
+  filePath,
+  embedded = false,
+}: {
+  view: CodeView
+  onViewChange: (view: CodeView) => void
+  onPageRegistered?: (page: Page) => void
+  onWorkspaceSelectFile?: (path: string) => void
+  filePath?: string | null
+  embedded?: boolean
+}) {
+  const {
+    appShell,
+    pages,
+    activePageId,
+    selectedComponentId,
+    projectName,
+    registerPage,
+    saveProject,
+    setActivePage,
+    setSelectedComponent,
+    customComponents,
+    registerCustomComponent,
+    projectConfig,
+  } = useAppStore()
+  const [copied, setCopied] = useState(false)
+  const [projectFile, setProjectFile] = useState<ProjectFile | null>(null)
+  const [fileContent, setFileContent] = useState('')
+  const fileContentOriginRef = useRef<'disk' | 'generated' | 'user'>('disk')
+  const [fileLoading, setFileLoading] = useState(false)
+  const [fileError, setFileError] = useState<string | null>(null)
+  const [fileSaveState, setFileSaveState] = useState<
+    'idle' | 'saving' | 'saved'
+  >('idle')
+  const [fileReloadVersion, setFileReloadVersion] = useState(0)
+  const [externalFileChangePending, setExternalFileChangePending] =
+    useState(false)
+  const fileStateRef = useRef({
+    view,
+    filePath,
+    projectFile,
+    fileContent,
+  })
+  const workspaceSelectFileRef = useRef(onWorkspaceSelectFile)
+  const recentAddedFilesRef = useRef(new Map<string, number>())
+  const pendingMovedFileRef = useRef<{
+    path: string
+    fileName: string
+  } | null>(null)
+  const missingFileTimerRef = useRef<number | null>(null)
+  const [registrationOpen, setRegistrationOpen] = useState(false)
+  const [registrationKind, setRegistrationKind] =
+    useState<'page' | 'component'>('page')
+  const [registerName, setRegisterName] = useState('')
+  const [registerRoute, setRegisterRoute] = useState('')
+  const [registerError, setRegisterError] = useState<string | null>(null)
+  const [registerBusy, setRegisterBusy] = useState(false)
+  const [workspaceOpen, setWorkspaceOpen] = useState(false)
+  const activePage = pages.find((page) => page.id === activePageId) ?? pages[0]
+  const selectedCustomSource = useMemo(() => {
+    if (!selectedComponentId || !filePath) return null
+
+    const projectNodes = [
+        ...(appShell.header ? [appShell.header] : []),
+        ...pages.flatMap((page) => [page.root, ...page.components]),
+        ...(appShell.footer ? [appShell.footer] : []),
+      ]
+    const selectedNode = findVisualNodeById(
+      projectNodes,
+      selectedComponentId
+    )
+    const customOwner = findCustomOwnerNode(
+      projectNodes,
+      selectedComponentId,
+      new Set(customComponents.map((component) => component.name))
+    )
+    const definition = customComponents.find(
+      (component) =>
+        component.name === (customOwner?.type ?? selectedNode?.type)
+    )
+
+    if (
+      !selectedNode ||
+      !definition ||
+      definition.importPath.replace(/\\/g, '/') !==
+        filePath.replace(/\\/g, '/')
+    ) {
+      return null
+    }
+
+    return {
+      definition,
+      node: customOwner ?? selectedNode,
+    }
+  }, [
+    appShell,
+    customComponents,
+    filePath,
+    pages,
+    selectedComponentId,
+  ])
+
+  useEffect(() => {
+    if (!workspaceOpen) return
+
+    const previousOverflow = document.body.style.overflow
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setWorkspaceOpen(false)
+      }
+    }
+
+    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', closeOnEscape)
+
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [workspaceOpen])
+
+  useEffect(() => {
+    fileStateRef.current = {
+      view,
+      filePath,
+      projectFile,
+      fileContent,
+    }
+  }, [fileContent, filePath, projectFile, view])
+
+  useEffect(() => {
+    workspaceSelectFileRef.current = onWorkspaceSelectFile
+  }, [onWorkspaceSelectFile])
+
+  useEffect(
+    () => () => {
+      if (missingFileTimerRef.current !== null) {
+        window.clearTimeout(missingFileTimerRef.current)
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    if (view !== 'file' || !filePath) return
+    let cancelled = false
+
+    pendingMovedFileRef.current = null
+    if (missingFileTimerRef.current !== null) {
+      window.clearTimeout(missingFileTimerRef.current)
+      missingFileTimerRef.current = null
+    }
+
+    void Promise.resolve().then(async () => {
+      if (cancelled) return
+      setFileLoading(true)
+      setFileError(null)
+      setFileSaveState('idle')
+      setExternalFileChangePending(false)
+
+      try {
+        const nextFile = await loadProjectFile(filePath)
+
+        if (cancelled) return
+        setProjectFile(nextFile)
+        setFileContent(nextFile.content)
+        fileContentOriginRef.current = 'disk'
+      } catch (error) {
+        if (cancelled) return
+        setProjectFile(null)
+        setFileError(getErrorMessage(error))
+      } finally {
+        if (!cancelled) setFileLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [filePath, fileReloadVersion, view])
+
+  useEffect(() => {
+    const handleFileSystemChange = (event: Event) => {
+      const detail = (event as CustomEvent<FileSystemChangeDetail>).detail
+      const current = fileStateRef.current
+      const normalizedCurrentPath = current.filePath?.replace(/\\/g, '/')
+
+      if (
+        !detail &&
+        current.view === 'file' &&
+        normalizedCurrentPath
+      ) {
+        const hasLocalEdits =
+          fileContentOriginRef.current === 'user' &&
+          current.projectFile?.content !== current.fileContent
+
+        if (hasLocalEdits) {
+          setExternalFileChangePending(true)
+        } else {
+          setFileReloadVersion((version) => version + 1)
+        }
+        return
+      }
+
+      const normalizedEventPath = detail?.path.replace(/\\/g, '/') ?? ''
+      const now = Date.now()
+
+      if (
+        !detail ||
+        detail.type !== 'filesystem-change' ||
+        current.view !== 'file' ||
+        !normalizedCurrentPath
+      ) {
+        return
+      }
+
+      for (const [addedPath, addedAt] of recentAddedFilesRef.current) {
+        if (now - addedAt > externalMoveMatchWindowMs) {
+          recentAddedFilesRef.current.delete(addedPath)
+        }
+      }
+
+      if (detail.action === 'add') {
+        recentAddedFilesRef.current.set(normalizedEventPath, now)
+        const pendingMove = pendingMovedFileRef.current
+
+        if (
+          pendingMove &&
+          normalizedEventPath !== pendingMove.path &&
+          getProjectFileName(normalizedEventPath) === pendingMove.fileName
+        ) {
+          pendingMovedFileRef.current = null
+          if (missingFileTimerRef.current !== null) {
+            window.clearTimeout(missingFileTimerRef.current)
+            missingFileTimerRef.current = null
+          }
+          setFileError(null)
+          workspaceSelectFileRef.current?.(normalizedEventPath)
+          return
+        }
+      }
+
+      const selectedPathWasRemoved =
+        (detail.action === 'unlink' &&
+          normalizedEventPath === normalizedCurrentPath) ||
+        (detail.action === 'unlinkDir' &&
+          normalizedCurrentPath.startsWith(`${normalizedEventPath}/`))
+
+      if (selectedPathWasRemoved) {
+        const hasLocalEdits =
+          fileContentOriginRef.current === 'user' &&
+          current.projectFile?.content !== current.fileContent
+
+        if (hasLocalEdits) {
+          setExternalFileChangePending(true)
+          return
+        }
+
+        const fileName = getProjectFileName(normalizedCurrentPath)
+        const movedPath = Array.from(
+          recentAddedFilesRef.current.entries()
+        )
+          .filter(
+            ([addedPath, addedAt]) =>
+              addedPath !== normalizedCurrentPath &&
+              now - addedAt <= externalMoveMatchWindowMs &&
+              getProjectFileName(addedPath) === fileName
+          )
+          .sort((left, right) => right[1] - left[1])[0]?.[0]
+
+        if (movedPath) {
+          setFileError(null)
+          workspaceSelectFileRef.current?.(movedPath)
+          return
+        }
+
+        pendingMovedFileRef.current = {
+          path: normalizedCurrentPath,
+          fileName,
+        }
+        setFileError(null)
+
+        if (missingFileTimerRef.current !== null) {
+          window.clearTimeout(missingFileTimerRef.current)
+        }
+        missingFileTimerRef.current = window.setTimeout(() => {
+          if (pendingMovedFileRef.current?.path !== normalizedCurrentPath) {
+            return
+          }
+
+          pendingMovedFileRef.current = null
+          missingFileTimerRef.current = null
+          setProjectFile(null)
+          setFileError('This file was removed from the project.')
+        }, externalMoveMatchWindowMs)
+        return
+      }
+
+      if (normalizedEventPath !== normalizedCurrentPath) {
+        return
+      }
+
+      const hasLocalEdits =
+        fileContentOriginRef.current === 'user' &&
+        current.projectFile?.content !== current.fileContent
+
+      if (hasLocalEdits) {
+        setExternalFileChangePending(true)
+        return
+      }
+
+      setFileReloadVersion((version) => version + 1)
+    }
+
+    window.addEventListener(
+      'visualbuild:filesystem-changed',
+      handleFileSystemChange
+    )
+    return () =>
+      window.removeEventListener(
+        'visualbuild:filesystem-changed',
+        handleFileSystemChange
+      )
+  }, [])
+
+  const generated = useMemo(() => {
+    if (view === 'file') {
+      return {
+        filename: filePath ?? 'No file selected',
+        code: fileContent,
+      }
+    }
+
+    if (view === 'page') {
+      return {
+        filename: getPageSourcePath(activePage),
+        code: generatePageCode(activePage, customComponents),
+      }
+    }
+
+    if (view === 'app') {
+      return {
+        filename: projectConfig.paths.appFile,
+        code: generateAppCode(pages, appShell, {
+          appFile: projectConfig.paths.appFile,
+          layoutFile: `${projectConfig.paths.layoutsDir}/AppLayout.tsx`,
+          emitLayout: projectConfig.generator.emitLayout,
+        }),
+      }
+    }
+
+    if (view === 'layout') {
+      return {
+        filename: `${projectConfig.paths.layoutsDir}/AppLayout.tsx`,
+        code: generateLayoutCode(appShell, customComponents, {
+          layoutFile: `${projectConfig.paths.layoutsDir}/AppLayout.tsx`,
+        }),
+      }
+    }
+
+    if (view === 'schema') {
+      return {
+        filename: projectConfig.paths.schemaFile,
+        code: generateProjectSchema(pages, appShell, projectName),
+      }
+    }
+
+    return {
+      filename: projectConfig.paths.schemaFile,
+      code: generateProjectSchema(pages, appShell, projectName),
+    }
+  }, [
+    activePage,
+    appShell,
+    customComponents,
+    fileContent,
+    filePath,
+    pages,
+    projectConfig,
+    projectName,
+    view,
+  ])
+
+  useEffect(() => {
+    if (
+      view !== 'file' ||
+      !filePath ||
+      !projectFile ||
+      fileLoading ||
+      fileContentOriginRef.current === 'user'
+    ) {
+      return
+    }
+
+    const normalizedPath = filePath.replace(/\\/g, '/')
+    const managedPage = pages.find(
+      (page) => getPageSourcePath(page) === normalizedPath
+    )
+
+    if (!managedPage) return
+
+    const nextContent = generatePageCode(managedPage, customComponents)
+    const timer = window.setTimeout(() => {
+      setFileContent(nextContent)
+      fileContentOriginRef.current =
+        nextContent === projectFile.content ? 'disk' : 'generated'
+    }, 0)
+
+    return () => window.clearTimeout(timer)
+  }, [
+    customComponents,
+    fileLoading,
+    filePath,
+    pages,
+    projectFile,
+    view,
+  ])
+
+  useEffect(() => {
+    if (
+      view !== 'file' ||
+      !filePath ||
+      !projectFile ||
+      fileLoading ||
+      !selectedCustomSource ||
+      fileContentOriginRef.current === 'user'
+    ) {
+      return
+    }
+
+    try {
+      const nextContent = syncCustomComponentRoot(projectFile.content, {
+        name: selectedCustomSource.definition.name,
+        rootTag:
+          typeof selectedCustomSource.node.props.wrapperTag === 'string'
+            ? selectedCustomSource.node.props.wrapperTag
+            : undefined,
+        id: selectedCustomSource.node.props.id,
+        className: selectedCustomSource.node.props.className,
+        attributes: selectedCustomSource.node.props.attributes,
+        children: getCustomComponentTreeChildren(
+          selectedCustomSource.node
+        ),
+      })
+      const timer = window.setTimeout(() => {
+        setFileError(null)
+        setFileContent(nextContent)
+        fileContentOriginRef.current =
+          nextContent === projectFile.content ? 'disk' : 'generated'
+      }, 0)
+
+      return () => window.clearTimeout(timer)
+    } catch (error) {
+      const timer = window.setTimeout(
+        () => setFileError(getErrorMessage(error)),
+        0
+      )
+      return () => window.clearTimeout(timer)
+    }
+  }, [
+    fileLoading,
+    filePath,
+    projectFile,
+    selectedCustomSource,
+    view,
+  ])
+
+  const copyCode = () => {
+    void navigator.clipboard?.writeText(generated.code)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1000)
+  }
+
+  const saveFile = async () => {
+    if (!filePath || !projectFile || projectFile.isBinary || projectFile.isTooLarge) {
+      return
+    }
+
+    setFileSaveState('saving')
+    setFileError(null)
+
+    try {
+      if (selectedCustomSource) {
+        const contentOrigin = fileContentOriginRef.current
+        await saveProject()
+
+        if (contentOrigin === 'user') {
+          await saveProjectFile(filePath, fileContent)
+        }
+
+        const savedFile = await loadProjectFile(filePath)
+        setProjectFile(savedFile)
+        setFileContent(savedFile.content)
+      } else {
+        await saveProjectFile(filePath, fileContent)
+        setProjectFile({
+          ...projectFile,
+          content: fileContent,
+          size: new Blob([fileContent]).size,
+        })
+      }
+      fileContentOriginRef.current = 'disk'
+      setExternalFileChangePending(false)
+      setFileSaveState('saved')
+      window.setTimeout(() => setFileSaveState('idle'), 1200)
+    } catch (error) {
+      setFileError(getErrorMessage(error))
+      setFileSaveState('idle')
+    }
+  }
+
+  const isFileDirty =
+    view === 'file' && projectFile?.content !== fileContent
+  const normalizedFilePath = filePath?.replace(/\\/g, '/') ?? ''
+  const canRegisterFile =
+    view === 'file' &&
+    Boolean(projectFile) &&
+    normalizedFilePath.startsWith(`${projectConfig.paths.sourceDir}/`) &&
+    /\.(jsx|tsx)$/i.test(normalizedFilePath) &&
+    !pages.some((page) => getPageSourcePath(page) === normalizedFilePath) &&
+    !customComponents.some(
+      (component) => component.importPath === normalizedFilePath
+    )
+
+  const openRegistration = () => {
+    const name = derivePageName(normalizedFilePath)
+
+    setRegistrationKind('page')
+    setRegisterName(name)
+    setRegisterRoute(derivePageRoute(name))
+    setRegisterError(null)
+    setRegistrationOpen(true)
+  }
+
+  const registerFileAsPage = async () => {
+    const name = registerName.trim()
+    const routeInput = registerRoute.trim()
+    const route = routeInput.startsWith('/') ? routeInput : `/${routeInput}`
+
+    if (!filePath || !name || !routeInput) {
+      setRegisterError('Enter a page name and route')
+      return
+    }
+
+    if (
+      pages.some((page) => page.name.toLowerCase() === name.toLowerCase())
+    ) {
+      setRegisterError('Page name already exists')
+      return
+    }
+
+    if (pages.some((page) => page.route === route)) {
+      setRegisterError('Route already exists')
+      return
+    }
+
+    setRegisterBusy(true)
+    setRegisterError(null)
+
+    try {
+      if (isFileDirty) {
+        await saveProjectFile(filePath, fileContent)
+        setProjectFile((current) =>
+          current
+            ? {
+                ...current,
+                content: fileContent,
+                size: new Blob([fileContent]).size,
+              }
+            : current
+        )
+      }
+
+      const page = await importProjectPage(filePath, name, route)
+      registerPage(page)
+      setActivePage(page.id)
+      await saveProject()
+      onViewChange('page')
+      onPageRegistered?.(page)
+      setRegistrationOpen(false)
+    } catch (error) {
+      setRegisterError(getErrorMessage(error))
+    } finally {
+      setRegisterBusy(false)
+    }
+  }
+
+  const registerFileAsComponent = async () => {
+    if (!filePath) return
+
+    setRegisterBusy(true)
+    setRegisterError(null)
+
+    try {
+      if (isFileDirty) {
+        await saveProjectFile(filePath, fileContent)
+        setProjectFile((current) =>
+          current
+            ? {
+                ...current,
+                content: fileContent,
+                size: new Blob([fileContent]).size,
+              }
+            : current
+        )
+      }
+
+      const definition = await registerProjectComponent(filePath)
+      registerCustomComponent(definition)
+      setRegistrationOpen(false)
+      window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+    } catch (error) {
+      setRegisterError(getErrorMessage(error))
+    } finally {
+      setRegisterBusy(false)
+    }
+  }
+
+  const panelContent = (
+    <>
+      <div className="h-10 px-3 border-b border-white/[0.06] flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+            Code
+          </p>
+          <p className="text-[10px] text-gray-400 truncate">
+            {generated.filename}
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {!workspaceOpen && (
+            <button
+              type="button"
+              onClick={() => setWorkspaceOpen(true)}
+              className="cursor-pointer rounded bg-white/[0.06] px-2 py-1 text-[10px] font-medium text-gray-300 transition-colors hover:bg-white/[0.1] hover:text-white"
+              title="Open a larger code workspace"
+            >
+              Open editor
+            </button>
+          )}
+          {canRegisterFile && (
+            <button
+              type="button"
+              onClick={openRegistration}
+              className="cursor-pointer rounded bg-emerald-500/15 px-2 py-1 text-[10px] font-medium text-emerald-300 transition-colors hover:bg-emerald-500/25 hover:text-emerald-200"
+            >
+              Register
+            </button>
+          )}
+          {view === 'file' && externalFileChangePending && (
+            <button
+              type="button"
+              onClick={() => {
+                setExternalFileChangePending(false)
+                setFileReloadVersion((version) => version + 1)
+              }}
+              className="cursor-pointer rounded bg-amber-500/15 px-2 py-1 text-[10px] font-medium text-amber-300 transition-colors hover:bg-amber-500/25 hover:text-amber-200"
+              title="Discard unsaved editor text and load the external file version"
+            >
+              Reload disk
+            </button>
+          )}
+          {view === 'file' && projectFile && !projectFile.isBinary && !projectFile.isTooLarge && (
+            <button
+              type="button"
+              onClick={() => void saveFile()}
+              disabled={!isFileDirty || fileSaveState === 'saving'}
+              className="cursor-pointer rounded bg-blue-500 px-2 py-1 text-[10px] font-medium text-white transition-colors hover:bg-blue-400 disabled:cursor-default disabled:bg-white/[0.06] disabled:text-gray-500"
+            >
+              {fileSaveState === 'saving'
+                ? 'Saving...'
+                : fileSaveState === 'saved'
+                  ? 'Saved'
+                  : 'Save file'}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={copyCode}
+            className="px-2 py-1 text-[10px] text-gray-300 bg-white/[0.06] hover:bg-white/[0.1] rounded transition-colors cursor-pointer select-none"
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+
+      <div className="px-2 py-2 border-b border-white/[0.06] flex flex-wrap gap-1">
+        <CodeTab active={view === 'page'} onClick={() => onViewChange('page')}>
+          Page
+        </CodeTab>
+        <CodeTab active={view === 'app'} onClick={() => onViewChange('app')}>
+          App
+        </CodeTab>
+        {(appShell.header || appShell.footer) && (
+          <CodeTab
+            active={view === 'layout'}
+            onClick={() => onViewChange('layout')}
+          >
+            Layout
+          </CodeTab>
+        )}
+        <CodeTab
+          active={view === 'schema'}
+          onClick={() => onViewChange('schema')}
+        >
+          JSON
+        </CodeTab>
+        {filePath && (
+          <CodeTab active={view === 'file'} onClick={() => onViewChange('file')}>
+            File{isFileDirty ? ' *' : ''}
+          </CodeTab>
+        )}
+      </div>
+
+      {view === 'file' ? (
+        <FileEditor
+          file={projectFile}
+          content={fileContent}
+          loading={fileLoading}
+          error={fileError}
+          onChange={(content) => {
+            fileContentOriginRef.current = 'user'
+            setFileContent(content)
+          }}
+          onSave={() => void saveFile()}
+        />
+      ) : (
+        <pre className="flex-1 overflow-auto p-4 text-[11px] leading-5 font-mono text-gray-200 bg-[#0b0d11]">
+          <code>{generated.code}</code>
+        </pre>
+      )}
+      {registrationOpen && (
+        <RegistrationDialog
+          kind={registrationKind}
+          componentName={derivePageName(normalizedFilePath)}
+          name={registerName}
+          route={registerRoute}
+          error={registerError}
+          busy={registerBusy}
+          onKindChange={(kind) => {
+            setRegistrationKind(kind)
+            setRegisterError(null)
+          }}
+          onNameChange={setRegisterName}
+          onRouteChange={setRegisterRoute}
+          onCancel={() => setRegistrationOpen(false)}
+          onConfirm={() =>
+            void (registrationKind === 'page'
+              ? registerFileAsPage()
+              : registerFileAsComponent())
+          }
+        />
+      )}
+    </>
+  )
+
+  const compactPanel = (
+    <aside
+      className={`${embedded ? 'h-full w-full' : 'w-[460px] border-l'} relative flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-[#101318]`}
+      onClick={() => setSelectedComponent(null)}
+    >
+      {panelContent}
+    </aside>
+  )
+
+  if (!workspaceOpen) {
+    return compactPanel
+  }
+
+  return createPortal(
+    <div
+      data-vb-editor-chrome
+      className="fixed inset-0 z-[140] flex bg-black/70 p-3 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-label="VisualBuild code workspace"
+    >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-white/10 bg-[#0b0d11] shadow-2xl">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.08] bg-[#15181e] px-4">
+          <div className="min-w-0">
+            <p className="text-xs font-semibold text-white">
+              VisualBuild Code Editor
+            </p>
+            <p className="truncate text-[10px] text-gray-500">
+              {generated.filename}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setWorkspaceOpen(false)}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
+            aria-label="Close code editor"
+            title="Close code editor"
+          >
+            x
+          </button>
+        </header>
+
+        <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
+          <aside className="flex h-[38%] w-full shrink-0 flex-col overflow-hidden border-b border-white/[0.08] bg-[#101318] sm:h-auto sm:w-[300px] sm:border-r sm:border-b-0">
+            <div className="flex h-10 shrink-0 items-center border-b border-white/[0.06] px-3">
+              <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+                Project files
+              </p>
+            </div>
+            <div className="min-h-0 flex-1 overflow-hidden">
+              <ProjectExplorer
+                selectedPath={filePath ?? null}
+                onSelectFile={(path) => {
+                  if (path) onWorkspaceSelectFile?.(path)
+                }}
+              />
+            </div>
+          </aside>
+
+          <section
+            className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-[#101318]"
+            onClick={() => setSelectedComponent(null)}
+          >
+            {panelContent}
+          </section>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+function RegistrationDialog({
+  kind,
+  componentName,
+  name,
+  route,
+  error,
+  busy,
+  onKindChange,
+  onNameChange,
+  onRouteChange,
+  onCancel,
+  onConfirm,
+}: {
+  kind: 'page' | 'component'
+  componentName: string
+  name: string
+  route: string
+  error: string | null
+  busy: boolean
+  onKindChange: (kind: 'page' | 'component') => void
+  onNameChange: (value: string) => void
+  onRouteChange: (value: string) => void
+  onCancel: () => void
+  onConfirm: () => void
+}) {
+  return (
+    <div data-vb-editor-chrome className="absolute inset-0 z-20 flex items-center justify-center bg-black/55 p-5 backdrop-blur-sm">
+      <div className="w-full max-w-sm rounded-lg border border-white/10 bg-[#191d24] p-4 shadow-2xl">
+        <h2 className="text-sm font-semibold text-white">Register file</h2>
+        <p className="mt-1 text-[11px] leading-4 text-gray-400">
+          Add this React source file to VisualBuild as a page or component.
+        </p>
+        <label className="mt-4 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+          Register as
+          <select
+            autoFocus
+            value={kind}
+            onChange={(event) =>
+              onKindChange(event.target.value as 'page' | 'component')
+            }
+            className="mt-1 w-full rounded border border-white/10 bg-[#11151b] px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
+          >
+            <option value="page">Page</option>
+            <option value="component">Component</option>
+          </select>
+        </label>
+        {kind === 'page' ? (
+          <>
+            <label className="mt-3 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              Page name
+              <input
+                value={name}
+                onChange={(event) => onNameChange(event.target.value)}
+                className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
+              />
+            </label>
+            <label className="mt-3 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              Route
+              <input
+                value={route}
+                onChange={(event) => onRouteChange(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') onConfirm()
+                }}
+                className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
+              />
+            </label>
+          </>
+        ) : (
+          <div className="mt-3 rounded border border-white/[0.08] bg-black/20 px-3 py-2">
+            <p className="text-[10px] uppercase tracking-wider text-gray-500">
+              Component
+            </p>
+            <p className="mt-1 text-xs font-medium text-white">
+              {componentName}
+            </p>
+            <p className="mt-1 text-[10px] text-gray-500">
+              VisualBuild detects the exported component from the source file.
+            </p>
+          </div>
+        )}
+        {error && <p className="mt-3 text-xs text-red-300">{error}</p>}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={busy}
+            className="cursor-pointer rounded px-3 py-1.5 text-xs text-gray-400 hover:bg-white/[0.06] hover:text-white disabled:cursor-default"
+          >
+            Keep as file
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={busy}
+            className="cursor-pointer rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-400 disabled:cursor-default disabled:bg-blue-500/40"
+          >
+            {busy
+              ? 'Registering...'
+              : kind === 'page'
+                ? 'Register page'
+                : 'Register component'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function FileEditor({
+  file,
+  content,
+  loading,
+  error,
+  onChange,
+  onSave,
+}: {
+  file: ProjectFile | null
+  content: string
+  loading: boolean
+  error: string | null
+  onChange: (content: string) => void
+  onSave: () => void
+}) {
+  if (loading) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] text-xs text-gray-500">
+        Opening file...
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-red-300">
+        {error}
+      </div>
+    )
+  }
+
+  if (file?.isBinary || file?.isTooLarge) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-gray-400">
+        {file.isBinary
+          ? 'Binary files cannot be edited in the code panel.'
+          : 'This file is larger than the 2 MB editor limit.'}
+      </div>
+    )
+  }
+
+  return (
+    <textarea
+      value={content}
+      onChange={(event) => onChange(event.target.value)}
+      onKeyDown={(event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+          event.preventDefault()
+          onSave()
+        }
+      }}
+      spellCheck={false}
+      className="min-h-0 flex-1 resize-none overflow-auto bg-[#0b0d11] p-4 font-mono text-[11px] leading-5 text-gray-200 outline-none"
+      aria-label="Project file editor"
+    />
+  )
+}
+
+function CodeTab({
+  active,
+  children,
+  onClick,
+}: {
+  active: boolean
+  children: React.ReactNode
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-2 py-1 text-[10px] rounded transition-colors cursor-pointer select-none ${
+        active
+          ? 'bg-accent text-white'
+          : 'text-gray-500 hover:text-gray-200 hover:bg-white/[0.06]'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Project file operation failed'
+}
+
+function derivePageName(filePath: string) {
+  const filename = filePath.split('/').pop() ?? 'Page'
+  const baseName = filename
+    .replace(/\.[^.]+$/, '')
+    .replace(/Page$/i, '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]+/g, ' ')
+    .trim()
+
+  return baseName
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ') || 'Page'
+}
+
+function derivePageRoute(name: string) {
+  const slug = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+  return slug === 'home' ? '/' : `/${slug || 'page'}`
+}