@builderos/create-agent-os 0.0.2

package/src/template/design/src/components/ExportPage.tsx

@@ -0,0 +1,344 @@
+import { useMemo } from 'react'
+import { Check, AlertTriangle, FileText, FolderTree, ChevronDown, Download, Package, Copy } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { AppLayout } from '@/components/AppLayout'
+import { loadProductData, hasExportZip, getExportZipUrl } from '@/lib/product-loader'
+import { getAllSectionIds, getSectionScreenDesigns } from '@/lib/section-loader'
+import { useToast } from '@/components/ui/ToastContext'
+
+export function ExportPage() {
+  const productData = useMemo(() => loadProductData(), [])
+
+  // Get section stats
+  const sectionStats = useMemo(() => {
+    const allSectionIds = getAllSectionIds()
+    const sectionCount = productData.roadmap?.sections.length || 0
+    const sectionsWithScreenDesigns = allSectionIds.filter(id => {
+      const screenDesigns = getSectionScreenDesigns(id)
+      return screenDesigns.length > 0
+    }).length
+    return { sectionCount, sectionsWithScreenDesigns, allSectionIds }
+  }, [productData.roadmap])
+
+  const hasOverview = !!productData.overview
+  const hasRoadmap = !!productData.roadmap
+  const hasDataModel = !!productData.dataModel
+  const hasDesignSystem = !!productData.designSystem
+  const hasShell = !!productData.shell
+  const hasSections = sectionStats.sectionsWithScreenDesigns > 0
+
+  const requiredComplete = hasOverview && hasRoadmap && hasSections
+
+  // Check for export zip
+  const exportZipAvailable = hasExportZip()
+  const exportZipUrl = getExportZipUrl()
+
+  return (
+    <AppLayout>
+      <div className="space-y-6">
+        {/* Page intro */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold text-stone-900 dark:text-stone-100 mb-2">
+            {exportZipAvailable ? 'Ready for implementation!' : 'Export'}
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            {exportZipAvailable
+              ? 'Download your product design package and implement it in your codebase using the provided handoff prompts and assets.'
+              : 'Generate a complete handoff package for your development team.'}
+          </p>
+        </div>
+
+        {/* Status - only show if zip not available */}
+        {!exportZipAvailable && (
+          <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center gap-2">
+                {requiredComplete ? (
+                  <>
+                    <div className="w-6 h-6 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center">
+                      <Check className="w-4 h-4 text-lime-600 dark:text-lime-400" strokeWidth={2.5} />
+                    </div>
+                    Ready to Export
+                  </>
+                ) : (
+                  <>
+                    <div className="w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+                      <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400" strokeWidth={2.5} />
+                    </div>
+                    Not Ready
+                  </>
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-1">
+                <ChecklistItem label="Product Overview" isComplete={hasOverview} />
+                <ChecklistItem label="Product Roadmap" isComplete={hasRoadmap} />
+                <ChecklistItem label="Data Model" isComplete={hasDataModel} />
+                <ChecklistItem label="Design System" isComplete={hasDesignSystem} />
+                <ChecklistItem label="Application Shell" isComplete={hasShell} />
+                <ChecklistItem
+                  label={`Sections with screen designs (${sectionStats.sectionsWithScreenDesigns}/${sectionStats.sectionCount})`}
+                  isComplete={hasSections}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Export command */}
+        {requiredComplete && (
+          <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center gap-2">
+                {exportZipAvailable ? (
+                  <>
+                    <div className="w-6 h-6 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center">
+                      <Check className="w-4 h-4 text-lime-600 dark:text-lime-400" strokeWidth={2.5} />
+                    </div>
+                    Export Package is Ready
+                  </>
+                ) : (
+                  'Generate Export Package'
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {exportZipAvailable && exportZipUrl ? (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 p-4 bg-lime-50 dark:bg-lime-900/20 rounded-lg border border-lime-200 dark:border-lime-800">
+                    <div className="w-10 h-10 rounded-full bg-lime-100 dark:bg-lime-900/40 flex items-center justify-center shrink-0">
+                      <Package className="w-5 h-5 text-lime-600 dark:text-lime-400" strokeWidth={1.5} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-stone-900 dark:text-stone-100">
+                        Synced to Agent OS & Ready for Download
+                      </p>
+                      <p className="text-sm text-stone-500 dark:text-stone-400">
+                        Files handover complete. You can also download the zip backup.
+                      </p>
+                    </div>
+                    <a
+                      href={exportZipUrl}
+                      download="product-plan.zip"
+                      className="inline-flex items-center gap-2 px-4 py-2 bg-white hover:bg-stone-50 border border-stone-200 text-stone-700 font-medium text-sm rounded-md transition-colors shrink-0"
+                    >
+                      <Download className="w-4 h-4" strokeWidth={2} />
+                      Backup
+                    </a>
+                  </div>
+                  <p className="text-sm text-stone-500 dark:text-stone-400">
+                    To regenerate and re-sync, run <code className="font-mono text-stone-700 dark:text-stone-300">/export-product</code> again.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <p className="text-stone-600 dark:text-stone-400">
+                    Run the following command to generate the export package and <strong>automatically sync</strong> it to the Agent OS (app/agent-os):
+                  </p>
+                  <PromptButton
+                    command="/export-product"
+                    prompt="Antigravity, generate the export package and sync it. Read 'agent-os/commands/export-product/export-product.md'."
+                  />
+                </div>
+              )}
+
+              {/* What's included */}
+              <div className="pt-4 border-t border-stone-200 dark:border-stone-700">
+                <h4 className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-4 flex items-center gap-2">
+                  <FolderTree className="w-4 h-4" strokeWidth={1.5} />
+                  What's Included
+                </h4>
+                <div className="grid sm:grid-cols-2 gap-4">
+                  <ExportItem
+                    title="Ready-to-Use Prompts"
+                    description="Pre-written prompts to copy/paste into your coding agent."
+                    items={['one-shot-prompt.md', 'section-prompt.md']}
+                  />
+                  <ExportItem
+                    title="Instructions"
+                    description="Detailed implementation guides for your coding agent."
+                    items={['product-overview.md', 'one-shot-instructions.md', 'incremental/ (milestones)']}
+                  />
+                  <ExportItem
+                    title="Design System"
+                    description="Colors, typography, and styling configuration for consistent branding."
+                    items={['CSS tokens', 'Tailwind config', 'Font setup']}
+                  />
+                  <ExportItem
+                    title="Data Model"
+                    description="Entity definitions and sample data for your application."
+                    items={['TypeScript types', 'Sample data', 'Entity docs']}
+                  />
+                  <ExportItem
+                    title="Components"
+                    description="React components and visual references for each section."
+                    items={['Shell components', 'Section components', 'Screenshots']}
+                  />
+                  <ExportItem
+                    title="Test Instructions"
+                    description="Framework-agnostic test specs for TDD implementation."
+                    items={['tests.md per section', 'User flow tests', 'Empty state tests']}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* How to use */}
+        <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center gap-2">
+              <FileText className="w-5 h-5 text-stone-500 dark:text-stone-400" strokeWidth={1.5} />
+              How to Use the Export
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Option A - Incremental (Recommended) */}
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-start justify-between w-full text-left group">
+                <div className="flex-1">
+                  <h4 className="font-medium text-stone-900 dark:text-stone-100">
+                    Option A: Incremental (Recommended)
+                  </h4>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
+                    Build milestone by milestone for better control and easier debugging.
+                  </p>
+                </div>
+                <ChevronDown className="w-4 h-4 text-stone-400 dark:text-stone-500 mt-1 shrink-0 transition-transform group-data-[state=open]:rotate-180" strokeWidth={1.5} />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <ol className="text-sm text-stone-600 dark:text-stone-400 space-y-2 list-decimal list-inside mt-4 pl-1">
+                  <li>Copy the <code className="font-mono text-stone-800 dark:text-stone-200">product-plan/</code> folder into your codebase</li>
+                  <li>Start with Foundation (<code className="font-mono text-stone-800 dark:text-stone-200">instructions/incremental/01-foundation.md</code>)</li>
+                  <li>Then Shell (<code className="font-mono text-stone-800 dark:text-stone-200">instructions/incremental/02-shell.md</code>)</li>
+                  <li>
+                    For each section:
+                    <ul className="mt-1.5 ml-5 space-y-1">
+                      <li className="flex items-center gap-2">
+                        <span className="w-1 h-1 rounded-full bg-stone-400 dark:bg-stone-500" />
+                        Open <code className="font-mono text-stone-800 dark:text-stone-200">prompts/section-prompt.md</code>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <span className="w-1 h-1 rounded-full bg-stone-400 dark:bg-stone-500" />
+                        Fill in the section variables at the top (SECTION_NAME, SECTION_ID, NN)
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <span className="w-1 h-1 rounded-full bg-stone-400 dark:bg-stone-500" />
+                        Copy/paste the prompt into your AI coding agent
+                      </li>
+                    </ul>
+                  </li>
+                  <li>Review and test after each milestone before moving to the next</li>
+                </ol>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <div className="border-t border-stone-200 dark:border-stone-700" />
+
+            {/* Option B - One-Shot */}
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-start justify-between w-full text-left group">
+                <div className="flex-1">
+                  <h4 className="font-medium text-stone-900 dark:text-stone-100">
+                    Option B: One-Shot
+                  </h4>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
+                    Build the entire app in one session using a pre-written prompt.
+                  </p>
+                </div>
+                <ChevronDown className="w-4 h-4 text-stone-400 dark:text-stone-500 mt-1 shrink-0 transition-transform group-data-[state=open]:rotate-180" strokeWidth={1.5} />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <ol className="text-sm text-stone-600 dark:text-stone-400 space-y-2 list-decimal list-inside mt-4 pl-1">
+                  <li>Copy the <code className="font-mono text-stone-800 dark:text-stone-200">product-plan/</code> folder into your codebase</li>
+                  <li>Open <code className="font-mono text-stone-800 dark:text-stone-200">prompts/one-shot-prompt.md</code></li>
+                  <li>Add any additional notes to the prompt (tech stack preferences, etc.)</li>
+                  <li>Copy/paste the prompt into your AI coding agent</li>
+                  <li>Answer the agent's clarifying questions about auth, user modeling, etc.</li>
+                  <li>Let the agent plan and implement everything</li>
+                </ol>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
+        </Card>
+      </div>
+    </AppLayout>
+  )
+}
+
+interface ChecklistItemProps {
+  label: string
+  isComplete: boolean
+}
+
+function ChecklistItem({ label, isComplete }: ChecklistItemProps) {
+  return (
+    <div className="flex items-center gap-2 py-1">
+      {isComplete ? (
+        <div className="w-4 h-4 rounded bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
+          <Check className="w-2.5 h-2.5 text-stone-600 dark:text-stone-400" strokeWidth={3} />
+        </div>
+      ) : (
+        <div className="w-4 h-4 rounded border-2 border-amber-400 dark:border-amber-500" />
+      )}
+      <span className="text-sm text-stone-700 dark:text-stone-300">
+        {label}
+      </span>
+    </div>
+  )
+}
+
+interface ExportItemProps {
+  title: string
+  description: string
+  items: string[]
+}
+
+function ExportItem({ title, description, items }: ExportItemProps) {
+  return (
+    <div className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4">
+      <h4 className="font-medium text-stone-900 dark:text-stone-100 mb-1">{title}</h4>
+      <p className="text-xs text-stone-500 dark:text-stone-400 mb-3">{description}</p>
+      <ul className="text-sm text-stone-600 dark:text-stone-400 space-y-1">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center gap-2">
+            <span className="w-1 h-1 rounded-full bg-stone-400 dark:bg-stone-500" />
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function PromptButton({ command, prompt }: { command: string, prompt: string }) {
+  const { toast } = useToast()
+
+  const copyPrompt = () => {
+    navigator.clipboard.writeText(prompt)
+    toast({
+      title: "Prompt Copied!",
+      description: "Paste it into the Agent terminal to run the action.",
+      type: "success"
+    })
+  }
+
+  return (
+    <div className="bg-stone-100 dark:bg-stone-800 rounded-md px-4 py-2.5 w-full">
+      <button
+        onClick={copyPrompt}
+        className="w-full flex items-center justify-center gap-2 text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors mb-1"
+        title="Copy Agent Prompt"
+      >
+        <span className="text-xs font-medium uppercase tracking-wider text-stone-500">Run Action</span>
+        <Copy size={14} />
+      </button>
+      <code className="block text-center text-sm font-mono text-stone-700 dark:text-stone-300">
+        {command}
+      </code>
+    </div>
+  )
+}

package/src/template/design/src/components/NextPhaseButton.tsx

@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom'
+import { FileText, Boxes, Layout, LayoutList, Package, ArrowRight } from 'lucide-react'
+import type { Phase } from './PhaseNav'
+
+interface NextPhaseButtonProps {
+  nextPhase: Exclude<Phase, 'product'> // Can't navigate "next" to product since it's first
+}
+
+const phaseConfig: Record<Exclude<Phase, 'product'>, { label: string; icon: typeof FileText; path: string }> = {
+  'data-model': { label: 'Data Model', icon: Boxes, path: '/data-model' },
+  'design': { label: 'Design', icon: Layout, path: '/design' },
+  'sections': { label: 'Sections', icon: LayoutList, path: '/sections' },
+  'export': { label: 'Export', icon: Package, path: '/export' },
+}
+
+export function NextPhaseButton({ nextPhase }: NextPhaseButtonProps) {
+  const navigate = useNavigate()
+  const config = phaseConfig[nextPhase]
+  const Icon = config.icon
+
+  return (
+    <button
+      onClick={() => navigate(config.path)}
+      className="w-full flex items-center justify-between gap-4 px-6 py-4 bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 rounded-lg hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors group"
+    >
+      <div className="flex items-center gap-3">
+        <Icon className="w-5 h-5" strokeWidth={1.5} />
+        <span className="font-medium">Continue to {config.label}</span>
+      </div>
+      <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" strokeWidth={1.5} />
+    </button>
+  )
+}

package/src/template/design/src/components/PhaseNav.tsx

@@ -0,0 +1,152 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useMemo } from 'react'
+import { FileText, Boxes, Layout, LayoutList, Package } from 'lucide-react'
+import { loadProductData, hasExportZip } from '@/lib/product-loader'
+import { getAllSectionIds, getSectionScreenDesigns, hasSectionSpec } from '@/lib/section-loader'
+
+export type Phase = 'product' | 'data-model' | 'design' | 'sections' | 'export'
+
+interface PhaseConfig {
+  id: Phase
+  label: string
+  icon: typeof FileText
+  path: string
+}
+
+const phases: PhaseConfig[] = [
+  { id: 'product', label: 'Product', icon: FileText, path: '/' },
+  { id: 'data-model', label: 'Data Model', icon: Boxes, path: '/data-model' },
+  { id: 'design', label: 'Design', icon: Layout, path: '/design' },
+  { id: 'sections', label: 'Sections', icon: LayoutList, path: '/sections' },
+  { id: 'export', label: 'Export', icon: Package, path: '/export' },
+]
+
+export type PhaseStatus = 'completed' | 'current' | 'upcoming'
+
+interface PhaseInfo {
+  phase: PhaseConfig
+  status: PhaseStatus
+  isComplete: boolean
+}
+
+function usePhaseStatuses(): PhaseInfo[] {
+  const location = useLocation()
+  const productData = useMemo(() => loadProductData(), [])
+
+  // Calculate completion status for each phase
+  const hasOverview = !!productData.overview
+  const hasRoadmap = !!productData.roadmap
+  const hasDataModel = !!productData.dataModel
+  const hasDesignSystem = !!productData.designSystem
+  const hasShell = !!productData.shell
+
+  const sectionIds = useMemo(() => getAllSectionIds(), [])
+  const sectionsWithScreenDesigns = useMemo(() => {
+    return sectionIds.filter(id => getSectionScreenDesigns(id).length > 0 && hasSectionSpec(id)).length
+  }, [sectionIds])
+  const hasSections = sectionsWithScreenDesigns > 0
+
+  // Determine current phase from URL
+  const currentPath = location.pathname
+  let currentPhaseId: Phase = 'product'
+
+  if (currentPath === '/' || currentPath === '/product') {
+    currentPhaseId = 'product'
+  } else if (currentPath === '/data-model') {
+    currentPhaseId = 'data-model'
+  } else if (currentPath === '/design' || currentPath === '/design-system' || currentPath.startsWith('/shell')) {
+    currentPhaseId = 'design'
+  } else if (currentPath === '/sections' || currentPath.startsWith('/sections/')) {
+    currentPhaseId = 'sections'
+  } else if (currentPath === '/export') {
+    currentPhaseId = 'export'
+  }
+
+  // Check if export zip exists
+  const exportZipExists = hasExportZip()
+
+  // Determine completion status
+  const phaseComplete: Record<Phase, boolean> = {
+    'product': hasOverview && hasRoadmap,
+    'data-model': hasDataModel,
+    'design': hasDesignSystem || hasShell,
+    'sections': hasSections,
+    'export': exportZipExists,
+  }
+
+  return phases.map(phase => {
+    const isComplete = phaseComplete[phase.id]
+    let status: PhaseStatus
+    if (phase.id === currentPhaseId) {
+      status = 'current'
+    } else if (isComplete) {
+      status = 'completed'
+    } else {
+      status = 'upcoming'
+    }
+    return { phase, status, isComplete }
+  })
+}
+
+export function PhaseNav() {
+  const navigate = useNavigate()
+  const phaseInfos = usePhaseStatuses()
+
+  return (
+    <nav className="flex items-center justify-center">
+      {phaseInfos.map(({ phase, status, isComplete }, index) => {
+        const Icon = phase.icon
+        const isFirst = index === 0
+
+        return (
+          <div key={phase.id} className="flex items-center">
+            {/* Connector line */}
+            {!isFirst && (
+              <div
+                className={`w-4 sm:w-8 lg:w-12 h-px transition-colors duration-200 ${status === 'upcoming'
+                    ? 'bg-stone-200 dark:bg-stone-700'
+                    : 'bg-stone-400 dark:bg-stone-500'
+                  }`}
+              />
+            )}
+
+            {/* Phase button */}
+            <button
+              onClick={() => navigate(phase.path)}
+              className={`
+                group relative flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg transition-all duration-200 whitespace-nowrap
+                ${status === 'current'
+                  ? 'bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 shadow-sm'
+                  : status === 'completed'
+                    ? 'bg-stone-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700'
+                    : 'text-stone-400 dark:text-stone-500 hover:text-stone-600 dark:hover:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-800/50'
+                }
+              `}
+            >
+              <Icon
+                className={`w-4 h-4 shrink-0 transition-transform duration-200 group-hover:scale-110 ${status === 'current' ? '' : status === 'completed' ? '' : 'opacity-60'
+                  }`}
+                strokeWidth={1.5}
+              />
+              <span className={`text-sm font-medium hidden sm:inline ${status === 'upcoming' ? 'opacity-60' : ''
+                }`}>
+                {phase.label}
+              </span>
+
+              {/* Completion indicator - check circle at top-left (shows even when current) */}
+              {isComplete && (
+                <span className="absolute -top-1 -left-1 w-4 h-4 rounded-full bg-lime-500 flex items-center justify-center shadow-sm">
+                  <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                </span>
+              )}
+            </button>
+          </div>
+        )
+      })}
+    </nav>
+  )
+}
+
+export { phases }

package/src/template/design/src/components/PhaseWarningBanner.tsx

@@ -0,0 +1,81 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import { AlertTriangle, X } from 'lucide-react'
+import { loadProductData } from '@/lib/product-loader'
+
+/**
+ * Get a storage key based on the product name to track dismissed warnings per product
+ */
+function getStorageKey(productName: string): string {
+  const sanitized = productName.toLowerCase().replace(/[^a-z0-9]+/g, '-')
+  return `design-os-phase-warning-dismissed-${sanitized}`
+}
+
+export function PhaseWarningBanner() {
+  const productData = useMemo(() => loadProductData(), [])
+  const [isDismissed, setIsDismissed] = useState(true) // Start dismissed to avoid flash
+
+  const hasDataModel = !!productData.dataModel
+  const hasDesignSystem = !!(productData.designSystem?.colors || productData.designSystem?.typography)
+  const hasShell = !!productData.shell?.spec
+  const hasDesign = hasDesignSystem || hasShell
+
+  const productName = productData.overview?.name || 'default-product'
+  const storageKey = getStorageKey(productName)
+
+  // Check localStorage on mount
+  useEffect(() => {
+    const dismissed = localStorage.getItem(storageKey) === 'true'
+    setIsDismissed(dismissed)
+  }, [storageKey])
+
+  const handleDismiss = () => {
+    localStorage.setItem(storageKey, 'true')
+    setIsDismissed(true)
+  }
+
+  // Don't show if both phases are complete or if dismissed
+  if ((hasDataModel && hasDesign) || isDismissed) {
+    return null
+  }
+
+  // Build the warning message
+  const missingPhases: { name: string; path: string }[] = []
+  if (!hasDataModel) {
+    missingPhases.push({ name: 'Data Model', path: '/data-model' })
+  }
+  if (!hasDesign) {
+    missingPhases.push({ name: 'Design', path: '/design' })
+  }
+
+  return (
+    <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg px-4 py-3 mb-6">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" strokeWidth={2} />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-amber-800 dark:text-amber-200">
+            Consider completing{' '}
+            {missingPhases.map((phase, index) => (
+              <span key={phase.path}>
+                {index > 0 && ' and '}
+                <Link
+                  to={phase.path}
+                  className="font-medium underline hover:no-underline"
+                >
+                  {phase.name}
+                </Link>
+              </span>
+            ))}{' '}
+            before designing sections.
+          </p>
+        </div>
+        <button
+          onClick={handleDismiss}
+          className="text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-200 transition-colors shrink-0"
+        >
+          <X className="w-4 h-4" strokeWidth={2} />
+        </button>
+      </div>
+    </div>
+  )
+}