@actuate-media/cms-admin 0.48.0 → 0.49.1

package/src/views/page-builder/AIGenerateDialog.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useCallback } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import {
   Sparkles,
   X,
@@ -17,6 +18,7 @@ import {
 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../../lib/api.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { PageNode, GenerationStep } from '@actuate-media/cms-core'
 
 export interface AIGenerateDialogProps {
@@ -205,377 +207,387 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
     }
   }, [result, onAccept, handleClose])
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
-      <div className="bg-card border-border relative flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border shadow-2xl">
-        {/* Header */}
-        <div className="border-border flex items-center justify-between border-b px-6 py-4">
-          <div className="flex items-center gap-2.5">
-            <div className="bg-primary/10 rounded-lg p-1.5">
-              <Sparkles size={18} className="text-primary" />
-            </div>
-            <div>
-              <h2 className="text-foreground text-base font-medium">AI Page Generator</h2>
-              <p className="text-muted-foreground text-xs">
-                Describe your page and let AI build it
-              </p>
+    <Dialog.Root open={open} onOpenChange={(next) => !next && handleClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+        <Dialog.Content className="bg-card border-border text-card-foreground fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl focus:outline-none">
+          {/* Header */}
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+            <div className="flex items-center gap-2.5">
+              <div className="bg-primary/10 rounded-lg p-1.5">
+                <Sparkles size={18} className="text-primary" aria-hidden />
+              </div>
+              <div>
+                <Dialog.Title className="text-foreground text-base font-medium">
+                  AI Page Generator
+                </Dialog.Title>
+                <Dialog.Description className="text-muted-foreground text-xs">
+                  Describe your page and let AI build it
+                </Dialog.Description>
+              </div>
             </div>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="hover:bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                aria-label="Close AI page generator"
+              >
+                <X size={16} aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
-          <button
-            onClick={handleClose}
-            className="hover:bg-muted rounded-md p-1.5 transition-colors"
-            aria-label="Close"
-          >
-            <X size={16} className="text-muted-foreground" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-6">
-          {phase === 'prompt' && (
-            <div className="space-y-5">
-              {error && (
-                <div className="bg-destructive/5 border-destructive/20 flex items-start gap-2.5 rounded-lg border p-3">
-                  <AlertTriangle size={16} className="text-destructive mt-0.5 shrink-0" />
-                  <p className="text-destructive text-sm">{error}</p>
-                </div>
-              )}
 
-              {/* Prompt */}
-              <div>
-                <label className="text-foreground mb-1.5 block text-sm font-medium">
-                  Describe your page
-                </label>
-                <textarea
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                  placeholder="e.g. A landing page for a plumbing company with a hero section, service cards, testimonials, and a contact form"
-                  rows={4}
-                  className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full resize-none rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"
-                  autoFocus
-                />
-              </div>
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-6">
+            {phase === 'prompt' && (
+              <div className="space-y-5">
+                {error && (
+                  <div className="bg-destructive/5 border-destructive/20 flex items-start gap-2.5 rounded-lg border p-3">
+                    <AlertTriangle size={16} className="text-destructive mt-0.5 shrink-0" />
+                    <p className="text-destructive text-sm">{error}</p>
+                  </div>
+                )}
 
-              {/* Tone */}
-              <div>
-                <label className="text-foreground mb-1.5 block text-sm font-medium">Tone</label>
-                <div className="flex flex-wrap gap-2">
-                  {TONES.map((t) => (
-                    <button
-                      key={t.value}
-                      onClick={() => setTone(t.value)}
-                      className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
-                        tone === t.value
-                          ? 'border-primary bg-primary/10 text-primary'
-                          : 'border-border bg-background text-muted-foreground hover:border-primary/40'
-                      }`}
-                    >
-                      {t.label}
-                    </button>
-                  ))}
+                {/* Prompt */}
+                <div>
+                  <label className="text-foreground mb-1.5 block text-sm font-medium">
+                    Describe your page
+                  </label>
+                  <textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder="e.g. A landing page for a plumbing company with a hero section, service cards, testimonials, and a contact form"
+                    rows={4}
+                    className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full resize-none rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"
+                    autoFocus
+                  />
                 </div>
-              </div>
 
-              {/* Steps */}
-              <div>
-                <label className="text-foreground mb-1.5 block text-sm font-medium">
-                  Generation steps
-                </label>
-                <div className="space-y-1.5">
-                  {ALL_STEPS.map((step) => (
-                    <label
-                      key={step.key}
-                      className={`flex cursor-pointer items-center gap-3 rounded-lg border p-2.5 transition-colors ${
-                        enabledSteps.has(step.key)
-                          ? 'border-primary/30 bg-primary/5'
-                          : 'border-border bg-background'
-                      } ${step.key === 'structure' ? 'cursor-not-allowed opacity-70' : 'hover:border-primary/20'}`}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={enabledSteps.has(step.key)}
-                        onChange={() => toggleStep(step.key)}
-                        disabled={step.key === 'structure'}
-                        className="sr-only"
-                      />
-                      <div
-                        className={`flex h-5 w-5 shrink-0 items-center justify-center rounded ${
-                          enabledSteps.has(step.key)
-                            ? 'bg-primary text-white'
-                            : 'bg-muted border-border border'
+                {/* Tone */}
+                <div>
+                  <label className="text-foreground mb-1.5 block text-sm font-medium">Tone</label>
+                  <div className="flex flex-wrap gap-2">
+                    {TONES.map((t) => (
+                      <button
+                        key={t.value}
+                        onClick={() => setTone(t.value)}
+                        className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
+                          tone === t.value
+                            ? 'border-primary bg-primary/10 text-primary'
+                            : 'border-border bg-background text-muted-foreground hover:border-primary/40'
                         }`}
                       >
-                        {enabledSteps.has(step.key) && <Check size={12} />}
-                      </div>
-                      <div className="flex min-w-0 flex-1 items-center gap-2">
-                        <span className="text-muted-foreground">{step.icon}</span>
-                        <div>
-                          <span className="text-foreground text-sm">{step.label}</span>
-                          <span className="text-muted-foreground ml-2 text-xs">
-                            {step.description}
-                          </span>
-                        </div>
-                      </div>
-                    </label>
-                  ))}
+                        {t.label}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              </div>
 
-              {/* Business context (collapsible) */}
-              <div>
-                <button
-                  onClick={() => setShowContext(!showContext)}
-                  className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
-                >
-                  {showContext ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-                  Business context (optional)
-                </button>
-                {showContext && (
-                  <div className="bg-muted/50 border-border mt-3 space-y-3 rounded-lg border p-4">
-                    <div className="grid grid-cols-2 gap-3">
-                      <div>
-                        <label className="text-muted-foreground mb-1 block text-xs">
-                          Business name
-                        </label>
-                        <input
-                          type="text"
-                          value={businessName}
-                          onChange={(e) => setBusiness(e.target.value)}
-                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
-                        />
-                      </div>
-                      <div>
-                        <label className="text-muted-foreground mb-1 block text-xs">Industry</label>
-                        <input
-                          type="text"
-                          value={industry}
-                          onChange={(e) => setIndustry(e.target.value)}
-                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
-                        />
-                      </div>
-                      <div>
-                        <label className="text-muted-foreground mb-1 block text-xs">Phone</label>
+                {/* Steps */}
+                <div>
+                  <label className="text-foreground mb-1.5 block text-sm font-medium">
+                    Generation steps
+                  </label>
+                  <div className="space-y-1.5">
+                    {ALL_STEPS.map((step) => (
+                      <label
+                        key={step.key}
+                        className={`flex cursor-pointer items-center gap-3 rounded-lg border p-2.5 transition-colors ${
+                          enabledSteps.has(step.key)
+                            ? 'border-primary/30 bg-primary/5'
+                            : 'border-border bg-background'
+                        } ${step.key === 'structure' ? 'cursor-not-allowed opacity-70' : 'hover:border-primary/20'}`}
+                      >
                         <input
-                          type="text"
-                          value={phone}
-                          onChange={(e) => setPhone(e.target.value)}
-                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          type="checkbox"
+                          checked={enabledSteps.has(step.key)}
+                          onChange={() => toggleStep(step.key)}
+                          disabled={step.key === 'structure'}
+                          className="sr-only"
                         />
+                        <div
+                          className={`flex h-5 w-5 shrink-0 items-center justify-center rounded ${
+                            enabledSteps.has(step.key)
+                              ? 'bg-primary text-primary-foreground'
+                              : 'bg-muted border-border border'
+                          }`}
+                        >
+                          {enabledSteps.has(step.key) && <Check size={12} />}
+                        </div>
+                        <div className="flex min-w-0 flex-1 items-center gap-2">
+                          <span className="text-muted-foreground">{step.icon}</span>
+                          <div>
+                            <span className="text-foreground text-sm">{step.label}</span>
+                            <span className="text-muted-foreground ml-2 text-xs">
+                              {step.description}
+                            </span>
+                          </div>
+                        </div>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Business context (collapsible) */}
+                <div>
+                  <button
+                    onClick={() => setShowContext(!showContext)}
+                    className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
+                  >
+                    {showContext ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                    Business context (optional)
+                  </button>
+                  {showContext && (
+                    <div className="bg-muted/50 border-border mt-3 space-y-3 rounded-lg border p-4">
+                      <div className="grid grid-cols-2 gap-3">
+                        <div>
+                          <label className="text-muted-foreground mb-1 block text-xs">
+                            Business name
+                          </label>
+                          <input
+                            type="text"
+                            value={businessName}
+                            onChange={(e) => setBusiness(e.target.value)}
+                            className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-muted-foreground mb-1 block text-xs">
+                            Industry
+                          </label>
+                          <input
+                            type="text"
+                            value={industry}
+                            onChange={(e) => setIndustry(e.target.value)}
+                            className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-muted-foreground mb-1 block text-xs">Phone</label>
+                          <input
+                            type="text"
+                            value={phone}
+                            onChange={(e) => setPhone(e.target.value)}
+                            className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-muted-foreground mb-1 block text-xs">
+                            Address
+                          </label>
+                          <input
+                            type="text"
+                            value={address}
+                            onChange={(e) => setAddress(e.target.value)}
+                            className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          />
+                        </div>
                       </div>
                       <div>
-                        <label className="text-muted-foreground mb-1 block text-xs">Address</label>
+                        <label className="text-muted-foreground mb-1 block text-xs">
+                          Services (comma-separated)
+                        </label>
                         <input
                           type="text"
-                          value={address}
-                          onChange={(e) => setAddress(e.target.value)}
-                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                          value={services}
+                          onChange={(e) => setServices(e.target.value)}
+                          placeholder="e.g. Web design, SEO, Content marketing"
+                          className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                     </div>
-                    <div>
-                      <label className="text-muted-foreground mb-1 block text-xs">
-                        Services (comma-separated)
-                      </label>
-                      <input
-                        type="text"
-                        value={services}
-                        onChange={(e) => setServices(e.target.value)}
-                        placeholder="e.g. Web design, SEO, Content marketing"
-                        className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
-          {phase === 'generating' && (
-            <div className="space-y-6 py-8">
-              <div className="text-center">
-                <Loader2 size={32} className="text-primary mx-auto mb-3 animate-spin" />
-                <p className="text-foreground text-sm font-medium">
-                  {stepMessage || 'Generating...'}
-                </p>
-                <p className="text-muted-foreground mt-1 text-xs">This may take 15-30 seconds</p>
+                  )}
+                </div>
               </div>
+            )}
+
+            {phase === 'generating' && (
+              <div className="space-y-6 py-8">
+                <div className="text-center">
+                  <Loader2 size={32} className="text-primary mx-auto mb-3 animate-spin" />
+                  <p className="text-foreground text-sm font-medium">
+                    {stepMessage || 'Generating...'}
+                  </p>
+                  <p className="text-muted-foreground mt-1 text-xs">This may take 15-30 seconds</p>
+                </div>
 
-              <div className="space-y-2">
-                {ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((step) => {
-                  const isComplete = completedSteps.includes(step.key)
-                  const isCurrent = currentStep === step.key
-
-                  return (
-                    <div
-                      key={step.key}
-                      className={`flex items-center gap-3 rounded-lg border p-3 transition-colors ${
-                        isComplete
-                          ? 'border-primary/30 bg-primary/5'
-                          : isCurrent
-                            ? 'border-primary/50 bg-primary/10'
-                            : 'border-border bg-muted/30'
-                      }`}
-                    >
-                      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                        {isComplete ? (
-                          <div className="bg-primary flex h-6 w-6 items-center justify-center rounded-full">
-                            <Check size={12} className="text-white" />
-                          </div>
-                        ) : isCurrent ? (
-                          <Loader2 size={16} className="text-primary animate-spin" />
-                        ) : (
-                          <div className="bg-muted border-border h-6 w-6 rounded-full border" />
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <span className="text-muted-foreground">{step.icon}</span>
-                        <span
-                          className={`text-sm ${isCurrent || isComplete ? 'text-foreground' : 'text-muted-foreground'}`}
-                        >
-                          {step.label}
-                        </span>
+                <div className="space-y-2">
+                  {ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((step) => {
+                    const isComplete = completedSteps.includes(step.key)
+                    const isCurrent = currentStep === step.key
+
+                    return (
+                      <div
+                        key={step.key}
+                        className={`flex items-center gap-3 rounded-lg border p-3 transition-colors ${
+                          isComplete
+                            ? 'border-primary/30 bg-primary/5'
+                            : isCurrent
+                              ? 'border-primary/50 bg-primary/10'
+                              : 'border-border bg-muted/30'
+                        }`}
+                      >
+                        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                          {isComplete ? (
+                            <div className="bg-primary flex h-6 w-6 items-center justify-center rounded-full">
+                              <Check size={12} className="text-primary-foreground" />
+                            </div>
+                          ) : isCurrent ? (
+                            <Loader2 size={16} className="text-primary animate-spin" />
+                          ) : (
+                            <div className="bg-muted border-border h-6 w-6 rounded-full border" />
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-muted-foreground">{step.icon}</span>
+                          <span
+                            className={`text-sm ${isCurrent || isComplete ? 'text-foreground' : 'text-muted-foreground'}`}
+                          >
+                            {step.label}
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {phase === 'review' && result && (
-            <div className="space-y-5">
-              {/* Summary */}
-              <div className="bg-primary/5 border-primary/20 flex items-center gap-3 rounded-lg border p-4">
-                <div className="bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
-                  <Sparkles size={18} className="text-primary" />
-                </div>
-                <div>
-                  <p className="text-foreground text-sm font-medium">Page generated successfully</p>
-                  <p className="text-muted-foreground mt-0.5 text-xs">
-                    {result.totalTokensUsed.toLocaleString()} tokens
-                    {' \u00B7 '}
-                    {(result.totalDurationMs / 1000).toFixed(1)}s{' \u00B7 '}
-                    {result.steps.length} step{result.steps.length !== 1 ? 's' : ''}
-                  </p>
+                    )
+                  })}
                 </div>
               </div>
+            )}
+
+            {phase === 'review' && result && (
+              <div className="space-y-5">
+                {/* Summary */}
+                <div className="bg-primary/5 border-primary/20 flex items-center gap-3 rounded-lg border p-4">
+                  <div className="bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+                    <Sparkles size={18} className="text-primary" />
+                  </div>
+                  <div>
+                    <p className="text-foreground text-sm font-medium">
+                      Page generated successfully
+                    </p>
+                    <p className="text-muted-foreground mt-0.5 text-xs">
+                      {result.totalTokensUsed.toLocaleString()} tokens
+                      {' \u00B7 '}
+                      {(result.totalDurationMs / 1000).toFixed(1)}s{' \u00B7 '}
+                      {result.steps.length} step{result.steps.length !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                </div>
 
-              {/* Step details */}
-              <div className="space-y-2">
-                <h3 className="text-foreground text-sm font-medium">Generation steps</h3>
-                {result.steps.map((step) => {
-                  const info = ALL_STEPS.find((s) => s.key === step.step)
-                  const isExpanded = expandedStep === step.step
-
-                  return (
-                    <div
-                      key={step.step}
-                      className="border-border overflow-hidden rounded-lg border"
-                    >
-                      <button
-                        onClick={() => setExpandedStep(isExpanded ? null : step.step)}
-                        className="hover:bg-muted/50 flex w-full items-center gap-3 p-3 text-left transition-colors"
+                {/* Step details */}
+                <div className="space-y-2">
+                  <h3 className="text-foreground text-sm font-medium">Generation steps</h3>
+                  {result.steps.map((step) => {
+                    const info = ALL_STEPS.find((s) => s.key === step.step)
+                    const isExpanded = expandedStep === step.step
+
+                    return (
+                      <div
+                        key={step.step}
+                        className="border-border overflow-hidden rounded-lg border"
                       >
-                        <div className="bg-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                          <Check size={12} className="text-white" />
-                        </div>
-                        <span className="text-muted-foreground">{info?.icon}</span>
-                        <span className="text-foreground flex-1 text-sm">{info?.label}</span>
-                        <span className="text-muted-foreground text-xs">
-                          {(step.metadata.durationMs / 1000).toFixed(1)}s
-                        </span>
-                        {isExpanded ? (
-                          <ChevronUp size={14} className="text-muted-foreground" />
-                        ) : (
-                          <ChevronDown size={14} className="text-muted-foreground" />
+                        <button
+                          onClick={() => setExpandedStep(isExpanded ? null : step.step)}
+                          className="hover:bg-muted/50 flex w-full items-center gap-3 p-3 text-left transition-colors"
+                        >
+                          <div className="bg-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                            <Check size={12} className="text-primary-foreground" />
+                          </div>
+                          <span className="text-muted-foreground">{info?.icon}</span>
+                          <span className="text-foreground flex-1 text-sm">{info?.label}</span>
+                          <span className="text-muted-foreground text-xs">
+                            {(step.metadata.durationMs / 1000).toFixed(1)}s
+                          </span>
+                          {isExpanded ? (
+                            <ChevronUp size={14} className="text-muted-foreground" />
+                          ) : (
+                            <ChevronDown size={14} className="text-muted-foreground" />
+                          )}
+                        </button>
+                        {isExpanded && (
+                          <div className="border-border border-t px-3 pt-2 pb-3">
+                            <ul className="space-y-1">
+                              {step.metadata.changes.map((change, i) => (
+                                <li
+                                  key={i}
+                                  className="text-muted-foreground flex items-start gap-2 text-xs"
+                                >
+                                  <ArrowRight size={10} className="mt-0.5 shrink-0" />
+                                  {change}
+                                </li>
+                              ))}
+                            </ul>
+                            <p className="text-muted-foreground mt-2 text-xs">
+                              Tokens: {step.metadata.tokensUsed.toLocaleString()}
+                            </p>
+                          </div>
                         )}
-                      </button>
-                      {isExpanded && (
-                        <div className="border-border border-t px-3 pt-2 pb-3">
-                          <ul className="space-y-1">
-                            {step.metadata.changes.map((change, i) => (
-                              <li
-                                key={i}
-                                className="text-muted-foreground flex items-start gap-2 text-xs"
-                              >
-                                <ArrowRight size={10} className="mt-0.5 shrink-0" />
-                                {change}
-                              </li>
-                            ))}
-                          </ul>
-                          <p className="text-muted-foreground mt-2 text-xs">
-                            Tokens: {step.metadata.tokensUsed.toLocaleString()}
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  )
-                })}
+                      </div>
+                    )
+                  })}
+                </div>
+
+                <p className="text-muted-foreground text-xs">
+                  Review the generated page in the canvas after accepting. You can always undo to
+                  revert.
+                </p>
               </div>
+            )}
+          </div>
 
-              <p className="text-muted-foreground text-xs">
-                Review the generated page in the canvas after accepting. You can always undo to
-                revert.
-              </p>
-            </div>
-          )}
-        </div>
+          {/* Footer */}
+          <div className="border-border flex items-center justify-end gap-3 border-t px-6 py-4">
+            {phase === 'prompt' && (
+              <>
+                <button
+                  onClick={handleClose}
+                  className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleGenerate}
+                  disabled={!prompt.trim()}
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  <Sparkles size={14} />
+                  Generate Page
+                </button>
+              </>
+            )}
 
-        {/* Footer */}
-        <div className="border-border flex items-center justify-end gap-3 border-t px-6 py-4">
-          {phase === 'prompt' && (
-            <>
+            {phase === 'generating' && (
               <button
                 onClick={handleClose}
                 className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
               >
                 Cancel
               </button>
-              <button
-                onClick={handleGenerate}
-                disabled={!prompt.trim()}
-                className="bg-primary hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                <Sparkles size={14} />
-                Generate Page
-              </button>
-            </>
-          )}
-
-          {phase === 'generating' && (
-            <button
-              onClick={handleClose}
-              className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
-            >
-              Cancel
-            </button>
-          )}
-
-          {phase === 'review' && (
-            <>
-              <button
-                onClick={() => {
-                  setPhase('prompt')
-                  setResult(null)
-                }}
-                className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
-              >
-                Regenerate
-              </button>
-              <button
-                onClick={handleAccept}
-                className="bg-primary hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
-              >
-                <Check size={14} />
-                Accept &amp; Apply
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
+            )}
+
+            {phase === 'review' && (
+              <>
+                <button
+                  onClick={() => {
+                    setPhase('prompt')
+                    setResult(null)
+                  }}
+                  className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
+                >
+                  Regenerate
+                </button>
+                <button
+                  onClick={handleAccept}
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                >
+                  <Check size={14} />
+                  Accept &amp; Apply
+                </button>
+              </>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }