@builderos/create-agent-os 0.0.2

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

@@ -0,0 +1,256 @@
+import { useMemo } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppLayout } from '@/components/AppLayout'
+import { EmptyState } from '@/components/EmptyState'
+import { PhaseWarningBanner } from '@/components/PhaseWarningBanner'
+import { SpecCard } from '@/components/SpecCard'
+import { DataCard } from '@/components/DataCard'
+import { StepIndicator, type StepStatus } from '@/components/StepIndicator'
+import { loadProductData } from '@/lib/product-loader'
+import { loadSectionData } from '@/lib/section-loader'
+import { ChevronRight, Layout, Image, Download, ArrowRight, LayoutList } from 'lucide-react'
+
+/**
+ * Determine the status of each step based on what data exists
+ * Steps: 1. Section Overview (Spec), 2. Sample Data, 3. Screen Designs, 4. Screenshots
+ */
+function getStepStatuses(sectionData: ReturnType<typeof loadSectionData> | null): StepStatus[] {
+  const hasSpec = !!sectionData?.specParsed
+  const hasData = !!sectionData?.data
+  const hasScreenDesigns = !!(sectionData?.screenDesigns && sectionData.screenDesigns.length > 0)
+  const hasScreenshots = !!(sectionData?.screenshots && sectionData.screenshots.length > 0)
+
+  const steps: boolean[] = [hasSpec, hasData, hasScreenDesigns, hasScreenshots]
+  const firstIncomplete = steps.findIndex((done) => !done)
+
+  return steps.map((done, index) => {
+    if (done) return 'completed'
+    if (index === firstIncomplete) return 'current'
+    return 'upcoming'
+  })
+}
+
+/**
+ * Check if the required steps for a section are complete (Spec, Data, Screen Designs)
+ * Screenshots are optional and don't count toward completion
+ */
+function areRequiredStepsComplete(sectionData: ReturnType<typeof loadSectionData> | null): boolean {
+  const hasSpec = !!sectionData?.specParsed
+  const hasData = !!sectionData?.data
+  const hasScreenDesigns = !!(sectionData?.screenDesigns && sectionData.screenDesigns.length > 0)
+  return hasSpec && hasData && hasScreenDesigns
+}
+
+export function SectionPage() {
+  const { sectionId } = useParams<{ sectionId: string }>()
+  const navigate = useNavigate()
+
+  // Load product data to get section info
+  const productData = useMemo(() => loadProductData(), [])
+  const sections = productData.roadmap?.sections || []
+  const section = sections.find((s) => s.id === sectionId)
+  const currentIndex = sections.findIndex((s) => s.id === sectionId)
+
+  // Load section-specific data (spec, data.json, screen designs, screenshots)
+  const sectionData = useMemo(
+    () => (sectionId ? loadSectionData(sectionId) : null),
+    [sectionId]
+  )
+
+  // Handle missing section
+  if (!section) {
+    return (
+      <AppLayout backTo="/sections" backLabel="Sections">
+        <div className="text-center py-12">
+          <p className="text-stone-600 dark:text-stone-400">
+            Section not found: {sectionId}
+          </p>
+        </div>
+      </AppLayout>
+    )
+  }
+
+  const stepStatuses = getStepStatuses(sectionData)
+  const requiredStepsComplete = areRequiredStepsComplete(sectionData)
+
+  // Next section navigation logic
+  const isLastSection = currentIndex === sections.length - 1 || currentIndex === -1
+  const nextSection = !isLastSection ? sections[currentIndex + 1] : null
+
+  return (
+    <AppLayout backTo="/sections" backLabel="Sections" title={section.title}>
+      <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">
+            {section.title}
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            {section.description}
+          </p>
+        </div>
+
+        {/* Warning banner for incomplete prerequisite phases */}
+        <PhaseWarningBanner />
+
+        {/* Step 1: Section Overview (Spec) */}
+        <StepIndicator step={1} status={stepStatuses[0]}>
+          <SpecCard
+            spec={sectionData?.specParsed || null}
+            sectionTitle={section?.title || "Section Overview"}
+            sectionId={sectionId}
+          />
+        </StepIndicator>
+
+        {/* Step 2: Sample Data */}
+        <StepIndicator step={2} status={stepStatuses[1]}>
+          <DataCard
+            data={sectionData?.data || null}
+            sectionTitle={section?.title}
+            sectionId={sectionId}
+          />
+        </StepIndicator>
+
+        {/* Step 3: Screen Designs */}
+        <StepIndicator step={3} status={stepStatuses[2]}>
+          {!sectionData?.screenDesigns || sectionData.screenDesigns.length === 0 ? (
+            <EmptyState
+              type="screen-designs"
+              context={section?.title}
+              contextId={sectionId}
+            />
+          ) : (
+            <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                  Screen Designs
+                  <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                    ({sectionData.screenDesigns.length})
+                  </span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-0">
+                <ul className="divide-y divide-stone-200 dark:divide-stone-700">
+                  {sectionData.screenDesigns.map((screenDesign) => (
+                    <li key={screenDesign.name}>
+                      <Link
+                        to={`/sections/${sectionId}/screen-designs/${screenDesign.name}`}
+                        className="flex items-center justify-between gap-4 px-6 py-4 hover:bg-stone-50 dark:hover:bg-stone-800/50 transition-colors"
+                      >
+                        <div className="flex items-center gap-3 min-w-0">
+                          <div className="w-8 h-8 rounded-md bg-stone-200 dark:bg-stone-700 flex items-center justify-center shrink-0">
+                            <Layout className="w-4 h-4 text-stone-600 dark:text-stone-300" strokeWidth={1.5} />
+                          </div>
+                          <span className="font-medium text-stone-900 dark:text-stone-100 truncate">
+                            {screenDesign.name}
+                          </span>
+                        </div>
+                        <ChevronRight className="w-4 h-4 text-stone-400 dark:text-stone-500 shrink-0" strokeWidth={1.5} />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          )}
+        </StepIndicator>
+
+        {/* Step 4: Screenshots */}
+        <StepIndicator step={4} status={stepStatuses[3]} isLast={!requiredStepsComplete}>
+          {!sectionData?.screenshots || sectionData.screenshots.length === 0 ? (
+            <EmptyState
+              type="screenshots"
+              context={section?.title}
+              contextId={sectionId}
+            />
+          ) : (
+            <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                  Screenshots
+                  <span className="ml-2 text-sm font-normal text-stone-500 dark:text-stone-400">
+                    ({sectionData.screenshots.length})
+                  </span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-4">
+                  {sectionData.screenshots.map((screenshot) => (
+                    <div key={screenshot.name} className="group">
+                      <div className="aspect-video rounded-lg overflow-hidden bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
+                        <img
+                          src={screenshot.url}
+                          alt={screenshot.name}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      <div className="mt-2 flex items-center justify-between gap-2">
+                        <p className="text-sm text-stone-600 dark:text-stone-400 truncate">
+                          {screenshot.name}
+                        </p>
+                        <a
+                          href={screenshot.url}
+                          download={`${screenshot.name}.png`}
+                          className="shrink-0 p-1.5 rounded-md text-stone-400 hover:text-stone-600 dark:text-stone-500 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
+                          title="Download screenshot"
+                        >
+                          <Download className="w-4 h-4" strokeWidth={1.5} />
+                        </a>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </StepIndicator>
+
+        {/* Next Step - shown when required steps (Spec, Data, Screen Designs) are complete */}
+        {requiredStepsComplete && (
+          <StepIndicator step={5} status="current" isLast>
+            <div className="space-y-3">
+              {/* If there's a next section, show two options */}
+              {nextSection ? (
+                <>
+                  <button
+                    onClick={() => navigate(`/sections/${nextSection.id}`)}
+                    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">
+                      <ArrowRight className="w-5 h-5" strokeWidth={1.5} />
+                      <span className="font-medium">Continue to {nextSection.title}</span>
+                    </div>
+                    <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" strokeWidth={1.5} />
+                  </button>
+                  <button
+                    onClick={() => navigate('/sections')}
+                    className="w-full flex items-center justify-between gap-4 px-6 py-4 bg-stone-100 dark:bg-stone-800 text-stone-700 dark:text-stone-300 rounded-lg hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors group"
+                  >
+                    <div className="flex items-center gap-3">
+                      <LayoutList className="w-5 h-5" strokeWidth={1.5} />
+                      <span className="font-medium">View All Sections</span>
+                    </div>
+                    <ChevronRight className="w-5 h-5 transition-transform group-hover:translate-x-1" strokeWidth={1.5} />
+                  </button>
+                </>
+              ) : (
+                /* If this is the last or only section, show single link back to sections */
+                <button
+                  onClick={() => navigate('/sections')}
+                  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">
+                    <LayoutList className="w-5 h-5" strokeWidth={1.5} />
+                    <span className="font-medium">Back to All Sections</span>
+                  </div>
+                  <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          </StepIndicator>
+        )}
+      </div>
+    </AppLayout>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { ChevronRight } from 'lucide-react'
+import type { ProductRoadmap } from '@/types/product'
+
+interface SectionsCardProps {
+  roadmap: ProductRoadmap
+  onSectionClick: (sectionId: string) => void
+}
+
+export function SectionsCard({ roadmap, onSectionClick }: SectionsCardProps) {
+  return (
+    <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+          Sections
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ul className="divide-y divide-stone-200 dark:divide-stone-700">
+          {roadmap.sections.map((section) => (
+            <li key={section.id}>
+              <button
+                onClick={() => onSectionClick(section.id)}
+                className="w-full px-6 py-4 flex items-center justify-between gap-4 text-left hover:bg-stone-50 dark:hover:bg-stone-800/50 transition-colors"
+              >
+                <div className="flex items-start gap-4 min-w-0">
+                  <span className="shrink-0 w-6 h-6 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 text-xs font-medium flex items-center justify-center">
+                    {section.order}
+                  </span>
+                  <div className="min-w-0">
+                    <h3 className="font-medium text-stone-900 dark:text-stone-100 truncate">
+                      {section.title}
+                    </h3>
+                    <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5 line-clamp-1">
+                      {section.description}
+                    </p>
+                  </div>
+                </div>
+                <ChevronRight className="w-4 h-4 text-stone-400 dark:text-stone-500 flex-shrink-0" strokeWidth={1.5} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,181 @@
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppLayout } from '@/components/AppLayout'
+import { EmptyState } from '@/components/EmptyState'
+import { PhaseWarningBanner } from '@/components/PhaseWarningBanner'
+import { NextPhaseButton } from '@/components/NextPhaseButton'
+import { loadProductData } from '@/lib/product-loader'
+import { getSectionScreenDesigns, getSectionScreenshots, hasSectionSpec, hasSectionData } from '@/lib/section-loader'
+import { ChevronRight, Check, Circle } from 'lucide-react'
+
+interface SectionProgress {
+  hasSpec: boolean
+  hasData: boolean
+  hasScreenDesigns: boolean
+  screenDesignCount: number
+  hasScreenshots: boolean
+  screenshotCount: number
+}
+
+function getSectionProgress(sectionId: string): SectionProgress {
+  const screenDesigns = getSectionScreenDesigns(sectionId)
+  const screenshots = getSectionScreenshots(sectionId)
+  return {
+    hasSpec: hasSectionSpec(sectionId),
+    hasData: hasSectionData(sectionId),
+    hasScreenDesigns: screenDesigns.length > 0,
+    screenDesignCount: screenDesigns.length,
+    hasScreenshots: screenshots.length > 0,
+    screenshotCount: screenshots.length,
+  }
+}
+
+export function SectionsPage() {
+  const navigate = useNavigate()
+  const productData = useMemo(() => loadProductData(), [])
+
+  const sections = productData.roadmap?.sections || []
+
+  // Calculate progress for each section
+  const sectionProgressMap = useMemo(() => {
+    const map: Record<string, SectionProgress> = {}
+    for (const section of sections) {
+      map[section.id] = getSectionProgress(section.id)
+    }
+    return map
+  }, [sections])
+
+  // Count completed sections (those with spec, data, AND screen designs)
+  const completedSections = sections.filter(s => {
+    const p = sectionProgressMap[s.id]
+    return p?.hasSpec && p?.hasData && p?.hasScreenDesigns
+  }).length
+
+  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">
+            Sections
+          </h1>
+          <p className="text-stone-600 dark:text-stone-400">
+            Design each section of your product with specifications, sample data, and screen designs.
+          </p>
+          {sections.length > 0 && (
+            <p className="text-sm text-stone-500 dark:text-stone-400 mt-2">
+              {completedSections} of {sections.length} sections completed
+            </p>
+          )}
+        </div>
+
+        {/* Warning banner for incomplete prerequisite phases */}
+        <PhaseWarningBanner />
+
+        {/* Sections list */}
+        {sections.length === 0 ? (
+          <EmptyState type="roadmap" />
+        ) : (
+          <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+                All Sections
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <ul className="divide-y divide-stone-200 dark:divide-stone-700">
+                {sections.map((section) => {
+                  const progress = sectionProgressMap[section.id]
+                  const isComplete = progress?.hasSpec && progress?.hasData && progress?.hasScreenDesigns
+
+                  return (
+                    <li key={section.id}>
+                      <button
+                        onClick={() => navigate(`/sections/${section.id}`)}
+                        className="w-full px-6 py-4 flex items-center justify-between gap-4 text-left hover:bg-stone-50 dark:hover:bg-stone-800/50 transition-colors"
+                      >
+                        <div className="flex items-start gap-4 min-w-0">
+                          {/* Status indicator */}
+                          <div className="shrink-0 mt-0.5">
+                            {isComplete ? (
+                              <div className="w-6 h-6 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center">
+                                <Check className="w-3.5 h-3.5 text-lime-600 dark:text-lime-400" strokeWidth={2.5} />
+                              </div>
+                            ) : (
+                              <div className="w-6 h-6 rounded-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
+                                <span className="text-xs font-medium text-stone-600 dark:text-stone-400">
+                                  {section.order}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+
+                          <div className="min-w-0 flex-1">
+                            <h3 className="font-medium text-stone-900 dark:text-stone-100 truncate">
+                              {section.title}
+                            </h3>
+                            <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5 line-clamp-1">
+                              {section.description}
+                            </p>
+
+                            {/* Progress indicators */}
+                            <div className="flex items-center gap-3 mt-2">
+                              <ProgressDot label="Spec" done={progress?.hasSpec} />
+                              <ProgressDot label="Data" done={progress?.hasData} />
+                              <ProgressDot
+                                label={progress?.screenDesignCount ? `${progress.screenDesignCount} screen design${progress.screenDesignCount !== 1 ? 's' : ''}` : 'Screen Designs'}
+                                done={progress?.hasScreenDesigns}
+                              />
+                              <ProgressDot
+                                label={progress?.screenshotCount ? `${progress.screenshotCount} screenshot${progress.screenshotCount !== 1 ? 's' : ''}` : 'Screenshots'}
+                                done={progress?.hasScreenshots}
+                                optional
+                              />
+                            </div>
+                          </div>
+                        </div>
+
+                        <ChevronRight className="w-4 h-4 text-stone-400 dark:text-stone-500 flex-shrink-0" strokeWidth={1.5} />
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Next Phase Button - shown when all sections are complete */}
+        {sections.length > 0 && completedSections === sections.length && (
+          <NextPhaseButton nextPhase="export" />
+        )}
+      </div>
+    </AppLayout>
+  )
+}
+
+interface ProgressDotProps {
+  label: string
+  done?: boolean
+  optional?: boolean
+}
+
+function ProgressDot({ label, done, optional }: ProgressDotProps) {
+  return (
+    <span className={`flex items-center gap-1 text-xs ${
+      done
+        ? 'text-stone-700 dark:text-stone-300'
+        : optional
+          ? 'text-stone-300 dark:text-stone-600'
+          : 'text-stone-400 dark:text-stone-500'
+    }`}>
+      {done ? (
+        <Check className="w-3 h-3 text-lime-600 dark:text-lime-400" strokeWidth={2.5} />
+      ) : (
+        <Circle className={`w-3 h-3 ${optional ? 'opacity-50' : ''}`} strokeWidth={1.5} />
+      )}
+      {label}
+    </span>
+  )
+}

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

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ChevronDown, ChevronRight, PanelLeft, Layout } from 'lucide-react'
+import type { ShellInfo } from '@/types/product'
+
+interface ShellCardProps {
+  shell: ShellInfo
+}
+
+export function ShellCard({ shell }: ShellCardProps) {
+  const [navigationOpen, setNavigationOpen] = useState(false)
+
+  return (
+    <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100 flex items-center gap-2">
+          <PanelLeft className="w-5 h-5 text-stone-500 dark:text-stone-400" strokeWidth={1.5} />
+          Application Shell
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Overview */}
+        {shell.spec && shell.spec.overview && (
+          <p className="text-stone-600 dark:text-stone-400 leading-relaxed">
+            {shell.spec.overview}
+          </p>
+        )}
+
+        {/* Navigation - Collapsible */}
+        {shell.spec && shell.spec.navigationItems.length > 0 && (
+          <Collapsible open={navigationOpen} onOpenChange={setNavigationOpen}>
+            <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-left group">
+              <span className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide">
+                Navigation
+                <span className="ml-2 text-stone-400 dark:text-stone-500 normal-case tracking-normal">
+                  ({shell.spec.navigationItems.length})
+                </span>
+              </span>
+              <ChevronDown
+                className={`w-4 h-4 text-stone-400 dark:text-stone-500 transition-transform ${
+                  navigationOpen ? 'rotate-180' : ''
+                }`}
+                strokeWidth={1.5}
+              />
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <ul className="space-y-2 pt-2 ml-1">
+                {shell.spec.navigationItems.map((item, index) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <span className="w-1.5 h-1.5 rounded-full bg-stone-400 dark:bg-stone-500 mt-2 shrink-0" />
+                    <span className="text-stone-600 dark:text-stone-400">
+                      {item}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+
+        {/* View Shell Design Link */}
+        {shell.hasComponents && (
+          <div className="pt-2 border-t border-stone-100 dark:border-stone-800">
+            <Link
+              to="/shell/design"
+              className="flex items-center justify-between gap-4 py-2 hover:text-stone-900 dark:hover:text-stone-100 transition-colors group"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 rounded-md bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
+                  <Layout className="w-4 h-4 text-stone-600 dark:text-stone-300" strokeWidth={1.5} />
+                </div>
+                <span className="font-medium text-stone-700 dark:text-stone-300 group-hover:text-stone-900 dark:group-hover:text-stone-100">
+                  View Shell Design
+                </span>
+              </div>
+              <ChevronRight className="w-4 h-4 text-stone-400 dark:text-stone-500" strokeWidth={1.5} />
+            </Link>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}