Merge PR BIT-DataLab#35: Add real example images

Merged example images feature from PR BIT-DataLab#35 with history persistence from PR BIT-DataLab#36.

Features combined:
- Real example images in showcase (/examples/*.jpg, *.png)
- History persistence with localStorage
- History navigation link in navbar
- Conversion history tracking in upload section

Author: jeff

.gitignore

@@ -50,3 +50,4 @@ sam3_src/
 # Local processing & debug
 arrow_processing/
 debug_output/
+TODO.md

.worktrees/T0-frontend-merge

@@ -0,0 +1 @@
+Subproject commit 329d4818e283f7f092592e0f1c075647582caac0

.worktrees/T0-logging-cleanup

@@ -0,0 +1 @@
+Subproject commit f515f509557bd2cadf5dc911e31001496401e5c7

.worktrees/T0-merge-stabilize

@@ -0,0 +1 @@
+Subproject commit 329d4818e283f7f092592e0f1c075647582caac0

apps/web/src/app/page.tsx

@@ -1,35 +1,47 @@
+<<<<<<< HEAD
 "use client"
 
+=======
+>>>>>>> pr-35
 import { Navbar } from "./sections/navbar"
 import { Hero } from "./sections/hero"
 import { UploadSection } from "./sections/upload-section"
 import { Features } from "./sections/features"
 import { ExampleShowcase } from "./sections/example-showcase"
 import { Footer } from "./sections/footer"
+<<<<<<< HEAD
 import { HistorySection } from "./sections/history-section"
 import { ConversionHistoryProvider, useConversionHistoryContext } from "@/components/history/conversion-history-provider"
 
 function HomeContent() {
   const { history, removeHistoryItem, clearHistory } = useConversionHistoryContext()
 
+=======
+
+export default function Home() {
+>>>>>>> pr-35
   return (
     <div className="min-h-screen bg-white">
       <Navbar />
       <main>
         <Hero />
         <UploadSection />
+<<<<<<< HEAD
         <HistorySection
           history={history}
           onRemove={removeHistoryItem}
           onClear={clearHistory}
         />
+=======
+>>>>>>> pr-35
         <Features />
         <ExampleShowcase />
       </main>
       <Footer />
     </div>
   )
 }
+<<<<<<< HEAD
 
 export default function Home() {
   return (
@@ -38,3 +50,5 @@ export default function Home() {
     </ConversionHistoryProvider>
   )
 }
+=======
+>>>>>>> pr-35

apps/web/src/app/sections/example-showcase.tsx

@@ -17,22 +17,37 @@ const examples: Example[] = [
     id: 1,
     title: "Flowchart Conversion",
     description: "Transform static flowchart images into editable diagrams",
+<<<<<<< HEAD
     beforeImage: "https://placehold.co/600x400/f3f4f6/9ca3af?text=Before:+Static+Flowchart+Image",
     afterImage: "https://placehold.co/600x400/fef3c7/d97706?text=After:+Editable+Diagram",
+=======
+    beforeImage: "/examples/flowchart-before.jpg",
+    afterImage: "/examples/flowchart-after.png",
+>>>>>>> pr-35
   },
   {
     id: 2,
     title: "Architecture Diagram",
     description: "Convert complex architecture diagrams to editable format",
+<<<<<<< HEAD
     beforeImage: "https://placehold.co/600x400/f3f4f6/9ca3af?text=Before:+Architecture+Image",
     afterImage: "https://placehold.co/600x400/fef3c7/d97706?text=After:+Editable+Architecture",
+=======
+    beforeImage: "/examples/architecture-before.png",
+    afterImage: "/examples/architecture-after.png",
+>>>>>>> pr-35
   },
   {
     id: 3,
     title: "Network Topology",
     description: "Turn network diagrams into fully editable assets",
+<<<<<<< HEAD
     beforeImage: "https://placehold.co/600x400/f3f4f6/9ca3af?text=Before:+Network+Image",
     afterImage: "https://placehold.co/600x400/fef3c7/d97706?text=After:+Editable+Network",
+=======
+    beforeImage: "/examples/network-before.jpg",
+    afterImage: "/examples/network-after.png",
+>>>>>>> pr-35
   },
 ]
 

apps/web/src/app/sections/navbar.tsx

@@ -1,6 +1,10 @@
 "use client"
 
+<<<<<<< HEAD
 import { Banana, History } from "lucide-react"
+=======
+import { Banana } from "lucide-react"
+>>>>>>> pr-35
 
 export function Navbar() {
   return (
@@ -15,13 +19,16 @@ export function Navbar() {
           </div>
           <div className="flex items-center gap-4">
             <a
+<<<<<<< HEAD
               href="#history"
               className="flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
             >
               <History className="w-4 h-4" />
               History
             </a>
             <a
+=======
+>>>>>>> pr-35
               href="https://github.com/yourusername/edit-banana"
               target="_blank"
               rel="noopener noreferrer"

apps/web/src/app/sections/upload-section.tsx

@@ -6,7 +6,10 @@ import { track } from "@vercel/analytics"
 import { Button } from "@/components/ui/button"
 import { FileUpload } from "@/components/upload/file-upload"
 import { uploadFile, getJobStatus, downloadResult, APIError } from "@/lib/api"
+<<<<<<< HEAD
 import { useConversionHistoryContext } from "@/components/history/conversion-history-provider"
+=======
+>>>>>>> pr-35
 import type { Job } from "@/lib/types"
 
 export function UploadSection() {
@@ -17,7 +20,10 @@ export function UploadSection() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [resultUrl, setResultUrl] = useState<string | null>(null)
+<<<<<<< HEAD
   const { addHistoryItem, updateHistoryItem } = useConversionHistoryContext()
+=======
+>>>>>>> pr-35
 
   const handleFileSelect = (file: File) => {
     setSelectedFile(file)
@@ -41,6 +47,7 @@ export function UploadSection() {
       setJobId(response.job_id)
       setJobStatus("pending")
 
+<<<<<<< HEAD
       // Create initial history item
       const apiUrl = process.env.NEXT_PUBLIC_API_URL || "https://editbanana.anxin6.cn"
       addHistoryItem({
@@ -54,6 +61,10 @@ export function UploadSection() {
 
       // Poll for status
       pollJobStatus(response.job_id, selectedFile.name, selectedFile.size)
+=======
+      // Poll for status
+      pollJobStatus(response.job_id)
+>>>>>>> pr-35
     } catch (err) {
       setLoading(false)
       if (err instanceof APIError) {
@@ -64,7 +75,11 @@ export function UploadSection() {
     }
   }
 
+<<<<<<< HEAD
   const pollJobStatus = async (id: string, filename: string, fileSize: number) => {
+=======
+  const pollJobStatus = async (id: string) => {
+>>>>>>> pr-35
     const interval = setInterval(async () => {
       try {
         const job = await getJobStatus(id)
@@ -79,6 +94,7 @@ export function UploadSection() {
           clearInterval(interval)
           setLoading(false)
           setProgress(100)
+<<<<<<< HEAD
           const apiUrl = process.env.NEXT_PUBLIC_API_URL || "https://editbanana.anxin6.cn"
           const newResultUrl = `${apiUrl}/api/v1/jobs/${id}/result`
           setResultUrl(newResultUrl)
@@ -89,27 +105,37 @@ export function UploadSection() {
             status: "completed",
             resultUrl: newResultUrl,
           })
+=======
+          setResultUrl(`${process.env.NEXT_PUBLIC_API_URL || "https://editbanana.anxin6.cn"}/api/v1/jobs/${id}/result`)
+          track("conversion_completed", { job_id: id })
+>>>>>>> pr-35
         } else if (job.status === "failed" || job.status === "cancelled") {
           clearInterval(interval)
           setLoading(false)
           setError(job.error || "Conversion failed")
+<<<<<<< HEAD
 
           // Update history item with error status
           updateHistoryItem(id, {
             status: job.status as "failed" | "cancelled",
             error: job.error || "Conversion failed",
           })
+=======
+>>>>>>> pr-35
         }
       } catch (err) {
         clearInterval(interval)
         setLoading(false)
         setError("Failed to get job status")
+<<<<<<< HEAD
 
         // Update history item with error
         updateHistoryItem(id, {
           status: "failed",
           error: "Failed to get job status",
         })
+=======
+>>>>>>> pr-35
       }
     }, 2000)
   }