create-visualbuild-app 0.1.0 → 1.0.0

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

@@ -0,0 +1,295 @@
+import { useEffect, useState } from 'react'
+import {
+  deployProjectToVercel,
+  loadDeploymentConfiguration,
+  type DeploymentConfiguration,
+  type DeploymentResult,
+} from '../utils/deployment'
+
+type DeploymentState = 'loading' | 'ready' | 'deploying' | 'success' | 'error'
+
+export default function DeploymentModal({
+  open,
+  onClose,
+  onBeforeDeploy,
+}: {
+  open: boolean
+  onClose: () => void
+  onBeforeDeploy: () => Promise<boolean>
+}) {
+  if (!open) return null
+
+  return (
+    <DeploymentDialog onClose={onClose} onBeforeDeploy={onBeforeDeploy} />
+  )
+}
+
+function DeploymentDialog({
+  onClose,
+  onBeforeDeploy,
+}: {
+  onClose: () => void
+  onBeforeDeploy: () => Promise<boolean>
+}) {
+  const [configuration, setConfiguration] =
+    useState<DeploymentConfiguration | null>(null)
+  const [projectName, setProjectName] = useState('')
+  const [teamId, setTeamId] = useState('')
+  const [state, setState] = useState<DeploymentState>('loading')
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<DeploymentResult | null>(null)
+
+  useEffect(() => {
+    let active = true
+
+    void loadDeploymentConfiguration()
+      .then((nextConfiguration) => {
+        if (!active) return
+        setConfiguration(nextConfiguration)
+        setProjectName(nextConfiguration.projectName)
+        setTeamId(nextConfiguration.teamId)
+        setState('ready')
+      })
+      .catch((loadError) => {
+        if (!active) return
+        setError(
+          loadError instanceof Error
+            ? loadError.message
+            : 'Could not load deployment settings'
+        )
+        setState('error')
+      })
+
+    return () => {
+      active = false
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && state !== 'deploying') onClose()
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [onClose, state])
+
+  const handleDeploy = async () => {
+    if (!configuration?.tokenConfigured || state === 'deploying') return
+
+    setState('deploying')
+    setError('')
+    setResult(null)
+
+    try {
+      const saved = await onBeforeDeploy()
+      if (!saved) {
+        throw new Error('Save the project successfully before deploying')
+      }
+
+      const deployment = await deployProjectToVercel(projectName, teamId)
+      setResult(deployment)
+      setState('success')
+    } catch (deploymentError) {
+      setError(
+        deploymentError instanceof Error
+          ? deploymentError.message
+          : 'Vercel deployment failed'
+      )
+      setState('error')
+    }
+  }
+
+  return (
+    <div
+      data-vb-editor-chrome
+      className="fixed inset-0 z-[120] flex items-center justify-center bg-gray-950/70 px-4 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="deployment-title"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget && state !== 'deploying') {
+          onClose()
+        }
+      }}
+    >
+      <div className="w-full max-w-lg overflow-hidden rounded-xl border border-white/10 bg-[#171a20] text-gray-100 shadow-2xl">
+        <div className="flex items-start justify-between border-b border-white/[0.08] px-5 py-4">
+          <div>
+            <div className="mb-1 flex items-center gap-2">
+              <VercelIcon />
+              <h2 id="deployment-title" className="text-base font-semibold">
+                Deploy to Vercel
+              </h2>
+            </div>
+            <p className="text-xs leading-5 text-gray-400">
+              Publish a production build of the developer-owned application.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={state === 'deploying'}
+            aria-label="Close deployment dialog"
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-gray-500 hover:bg-white/[0.08] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="space-y-4 px-5 py-5">
+          {state === 'loading' ? (
+            <StatusRow label="Loading deployment settings..." />
+          ) : (
+            <>
+              <label className="block">
+                <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-[0.12em] text-gray-500">
+                  Vercel project
+                </span>
+                <input
+                  value={projectName}
+                  onChange={(event) => setProjectName(event.target.value)}
+                  disabled={state === 'deploying' || state === 'success'}
+                  autoComplete="off"
+                  spellCheck={false}
+                  className="h-10 w-full rounded-md border border-white/10 bg-black/20 px-3 text-sm text-white outline-none transition-colors focus:border-accent disabled:opacity-60"
+                />
+              </label>
+
+              <label className="block">
+                <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-[0.12em] text-gray-500">
+                  Team ID <span className="normal-case tracking-normal">(optional)</span>
+                </span>
+                <input
+                  value={teamId}
+                  onChange={(event) => setTeamId(event.target.value)}
+                  disabled={state === 'deploying' || state === 'success'}
+                  placeholder="team_..."
+                  autoComplete="off"
+                  spellCheck={false}
+                  className="h-10 w-full rounded-md border border-white/10 bg-black/20 px-3 text-sm text-white outline-none transition-colors placeholder:text-gray-600 focus:border-accent disabled:opacity-60"
+                />
+              </label>
+
+              <div className="rounded-lg border border-emerald-400/20 bg-emerald-400/[0.07] px-3.5 py-3">
+                <p className="vb-deploy-success-text text-xs font-medium text-emerald-300">
+                  Production boundary protected
+                </p>
+                <p className="mt-1 text-[11px] leading-5 text-gray-400">
+                  VisualBuild saves and builds locally, then uploads only{' '}
+                  <code>{configuration?.outputDirectory ?? 'dist'}</code>. Editor
+                  source, visualbuild metadata, node_modules, and credentials are
+                  excluded.
+                </p>
+              </div>
+
+              {configuration && !configuration.tokenConfigured && (
+                <div className="rounded-lg border border-amber-400/25 bg-amber-400/[0.08] px-3.5 py-3">
+                  <p className="vb-deploy-warning-text text-xs font-medium text-amber-200">
+                    Vercel access token required
+                  </p>
+                  <p className="mt-1 text-[11px] leading-5 text-gray-400">
+                    Keep the token out of browser code. Stop the builder, set it
+                    in the same PowerShell terminal, then restart:
+                  </p>
+                  <code className="mt-2 block overflow-x-auto rounded bg-black/25 px-2.5 py-2 text-[10px] text-gray-300">
+                    $env:VERCEL_TOKEN = 'your-token'
+                  </code>
+                </div>
+              )}
+
+              {state === 'deploying' && (
+                <StatusRow label="Saving, building, and publishing to Vercel..." />
+              )}
+
+              {error && (
+                <div
+                  role="alert"
+                  className="vb-deploy-error-text rounded-lg border border-red-400/25 bg-red-400/[0.08] px-3.5 py-3 text-xs leading-5 text-red-200"
+                >
+                  {error}
+                </div>
+              )}
+
+              {result && (
+                <div className="rounded-lg border border-blue-400/25 bg-blue-400/[0.08] px-3.5 py-3">
+                  <p className="vb-deploy-link-text text-xs font-semibold text-blue-200">
+                    Production deployment is ready
+                  </p>
+                  <a
+                    href={result.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="vb-deploy-link-text mt-1.5 block truncate text-sm text-blue-300 underline underline-offset-2 hover:text-blue-200"
+                  >
+                    {result.url}
+                  </a>
+                  <p className="mt-2 text-[10px] text-gray-500">
+                    {result.fileCount} files · {formatBytes(result.totalBytes)} ·{' '}
+                    {result.id}
+                  </p>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between border-t border-white/[0.08] px-5 py-3.5">
+          <p className="text-[10px] text-gray-500">
+            Token stays in the local builder process.
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={state === 'deploying'}
+              className="cursor-pointer rounded-md px-3 py-2 text-xs text-gray-400 hover:bg-white/[0.06] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {state === 'success' ? 'Done' : 'Cancel'}
+            </button>
+            {state !== 'success' && (
+              <button
+                type="button"
+                onClick={() => void handleDeploy()}
+                disabled={
+                  state === 'loading' ||
+                  state === 'deploying' ||
+                  !configuration?.tokenConfigured ||
+                  !projectName.trim()
+                }
+                className="cursor-pointer rounded-md bg-accent px-4 py-2 text-xs font-semibold text-white hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-45"
+              >
+                {state === 'deploying' ? 'Deploying...' : 'Deploy production'}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatusRow({ label }: { label: string }) {
+  return (
+    <div className="flex items-center gap-2.5 rounded-lg border border-white/[0.08] bg-white/[0.03] px-3.5 py-3 text-xs text-gray-300">
+      <span className="h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-white/15 border-t-accent" />
+      {label}
+    </div>
+  )
+}
+
+function VercelIcon() {
+  return (
+    <span className="flex h-6 w-6 items-center justify-center rounded bg-white text-black">
+      <svg width="13" height="12" viewBox="0 0 13 12" aria-hidden="true">
+        <path d="M6.5 0 13 12H0L6.5 0Z" fill="currentColor" />
+      </svg>
+    </span>
+  )
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

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

@@ -1,89 +1,89 @@
-import { useState } from 'react'
-import { useAppStore } from '../stores/useAppStore'
-import type { Page } from '../types'
-
-export default function PageSwitcher({
-  onSelectPage,
-  onDeletePage,
-}: {
-  onSelectPage?: (page: Page) => void
-  onDeletePage?: (page: Page) => void
-}) {
-  const {
-    pages,
-    activePageId,
-    setActivePage,
-    addPage,
-    deletePage,
-    saveProject,
-  } = useAppStore()
-  const [adding, setAdding] = useState(false)
-  const [newName, setNewName] = useState('')
-  const [newRoute, setNewRoute] = useState('/')
-  const [error, setError] = useState<string | null>(null)
-  const [busy, setBusy] = useState(false)
-
-  const handleAdd = async () => {
-    if (!newName.trim()) return
-    const route = newRoute.startsWith('/') ? newRoute : `/${newRoute}`
-
-    if (pages.some((page) => page.route === route)) {
-      setError('Route already exists')
-      return
-    }
-
-    if (
-      pages.some(
-        (page) => page.name.toLowerCase() === newName.trim().toLowerCase()
-      )
-    ) {
-      setError('Page name already exists')
-      return
-    }
-
-    setBusy(true)
-
-    try {
-      const page = addPage(newName.trim(), route)
-      setActivePage(page.id)
-      await saveProject()
-      onSelectPage?.(page)
-      setNewName('')
-      setNewRoute('/')
-      setError(null)
-      setAdding(false)
-    } catch (saveError) {
-      setError(getErrorMessage(saveError))
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const handleDelete = async (page: Page) => {
-    if (busy) return
-    setBusy(true)
-
-    try {
-      deletePage(page.id)
-      await saveProject()
-      onDeletePage?.(page)
-    } catch (saveError) {
-      setError(getErrorMessage(saveError))
-    } finally {
-      setBusy(false)
-    }
-  }
+import { useState } from 'react'
+import { useAppStore } from '../stores/useAppStore'
+import type { Page } from '../types'
+
+export default function PageSwitcher({
+  onSelectPage,
+  onDeletePage,
+}: {
+  onSelectPage?: (page: Page) => void
+  onDeletePage?: (page: Page) => void
+}) {
+  const {
+    pages,
+    activePageId,
+    setActivePage,
+    addPage,
+    deletePage,
+    saveProject,
+  } = useAppStore()
+  const [adding, setAdding] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [newRoute, setNewRoute] = useState('/')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  const handleAdd = async () => {
+    if (!newName.trim()) return
+    const route = newRoute.startsWith('/') ? newRoute : `/${newRoute}`
+
+    if (pages.some((page) => page.route === route)) {
+      setError('Route already exists')
+      return
+    }
+
+    if (
+      pages.some(
+        (page) => page.name.toLowerCase() === newName.trim().toLowerCase()
+      )
+    ) {
+      setError('Page name already exists')
+      return
+    }
+
+    setBusy(true)
+
+    try {
+      const page = addPage(newName.trim(), route)
+      setActivePage(page.id)
+      await saveProject()
+      onSelectPage?.(page)
+      setNewName('')
+      setNewRoute('/')
+      setError(null)
+      setAdding(false)
+    } catch (saveError) {
+      setError(getErrorMessage(saveError))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleDelete = async (page: Page) => {
+    if (busy) return
+    setBusy(true)
+
+    try {
+      deletePage(page.id)
+      await saveProject()
+      onDeletePage?.(page)
+    } catch (saveError) {
+      setError(getErrorMessage(saveError))
+    } finally {
+      setBusy(false)
+    }
+  }
 
   return (
-    <div className="flex items-center gap-1 px-3 h-9 bg-topbar border-t border-white/[0.06] shrink-0 overflow-x-auto">
+    <div data-vb-editor-chrome className="flex items-center gap-1 px-3 h-9 bg-topbar border-t border-white/[0.06] shrink-0 overflow-x-auto">
       {pages.map((page) => (
         <div key={page.id} className="flex items-center group shrink-0">
-          <button
-            onClick={() => {
-              setActivePage(page.id)
-              onSelectPage?.(page)
-            }}
-            className={`px-3 py-1 text-xs rounded transition-colors cursor-pointer select-none ${
+          <button
+            onClick={() => {
+              setActivePage(page.id)
+              onSelectPage?.(page)
+            }}
+            className={`px-3 py-1 text-xs rounded transition-colors cursor-pointer select-none ${
               activePageId === page.id
                 ? 'bg-white/[0.1] text-white'
                 : 'text-gray-500 hover:text-gray-300 hover:bg-white/[0.05]'
@@ -93,10 +93,10 @@ export default function PageSwitcher({
             <span className="ml-1 text-gray-600">{page.route}</span>
           </button>
           {pages.length > 1 && (
-            <button
-              onClick={() => void handleDelete(page)}
-              disabled={busy}
-              className="ml-0.5 w-4 h-4 text-gray-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all text-xs flex items-center justify-center cursor-pointer select-none"
+            <button
+              onClick={() => void handleDelete(page)}
+              disabled={busy}
+              className="ml-0.5 w-4 h-4 text-gray-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all text-xs flex items-center justify-center cursor-pointer select-none"
             >
               ×
             </button>
@@ -106,56 +106,56 @@ export default function PageSwitcher({
 
       {adding ? (
         <div className="flex items-center gap-1 shrink-0">
-          <input
-            autoFocus
-            value={newName}
-            onChange={(e) => {
-              setNewName(e.target.value)
-              setError(null)
-            }}
-            onKeyDown={(e) => e.key === 'Enter' && void handleAdd()}
-            placeholder="Page name"
-            className="w-24 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
+          <input
+            autoFocus
+            value={newName}
+            onChange={(e) => {
+              setNewName(e.target.value)
+              setError(null)
+            }}
+            onKeyDown={(e) => e.key === 'Enter' && void handleAdd()}
+            placeholder="Page name"
+            className="w-24 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
           />
-          <input
-            value={newRoute}
-            onChange={(e) => {
-              setNewRoute(e.target.value)
-              setError(null)
-            }}
-            placeholder="/route"
-            className="w-20 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
-          />
-          <button
-            onClick={() => void handleAdd()}
-            disabled={busy}
-            className="text-xs text-accent hover:text-white transition-colors cursor-pointer select-none disabled:cursor-default disabled:text-gray-600"
-          >
-            {busy ? 'Adding...' : 'Add'}
-          </button>
-          <button
-            onClick={() => {
-              setAdding(false)
-              setError(null)
-            }}
-            className="text-xs text-gray-600 hover:text-gray-300 transition-colors cursor-pointer select-none"
-          >
-            Cancel
-          </button>
-          {error && <span className="text-[10px] text-red-400">{error}</span>}
-        </div>
-      ) : (
-        <button
-          onClick={() => setAdding(true)}
-          className="px-2 py-1 text-xs text-gray-600 hover:text-gray-300 hover:bg-white/[0.05] rounded transition-colors shrink-0 cursor-pointer select-none"
+          <input
+            value={newRoute}
+            onChange={(e) => {
+              setNewRoute(e.target.value)
+              setError(null)
+            }}
+            placeholder="/route"
+            className="w-20 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
+          />
+          <button
+            onClick={() => void handleAdd()}
+            disabled={busy}
+            className="text-xs text-accent hover:text-white transition-colors cursor-pointer select-none disabled:cursor-default disabled:text-gray-600"
+          >
+            {busy ? 'Adding...' : 'Add'}
+          </button>
+          <button
+            onClick={() => {
+              setAdding(false)
+              setError(null)
+            }}
+            className="text-xs text-gray-600 hover:text-gray-300 transition-colors cursor-pointer select-none"
+          >
+            Cancel
+          </button>
+          {error && <span className="text-[10px] text-red-400">{error}</span>}
+        </div>
+      ) : (
+        <button
+          onClick={() => setAdding(true)}
+          className="px-2 py-1 text-xs text-gray-600 hover:text-gray-300 hover:bg-white/[0.05] rounded transition-colors shrink-0 cursor-pointer select-none"
         >
           + Add page
         </button>
       )}
     </div>
-  )
-}
-
-function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : 'Page operation failed'
-}
+  )
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Page operation failed'
+}