@argus-vrt/web 0.1.0

package/scripts/backfill-kind.ts

@@ -0,0 +1,148 @@
+/**
+ * Backfill script to populate the `kind` field from storyId
+ *
+ * Run with: npx tsx scripts/backfill-kind.ts
+ */
+
+import { drizzle } from 'drizzle-orm/postgres-js'
+import postgres from 'postgres'
+import { eq, isNull } from 'drizzle-orm'
+import * as schema from '../src/db/schema'
+
+const connectionString = process.env.DATABASE_URL
+
+if (!connectionString) {
+  console.error('DATABASE_URL environment variable is required')
+  process.exit(1)
+}
+
+const client = postgres(connectionString)
+const db = drizzle(client, { schema })
+
+/**
+ * Reconstruct kind (full path) from storyId
+ * e.g., "ui-button--primary" -> "UI/Button"
+ * e.g., "components-forms-textinput--default" -> "Components/Forms/TextInput"
+ */
+function extractKindFromStoryId(storyId: string): string {
+  const parts = storyId.split('--')
+  if (parts.length === 0) return storyId
+
+  const titlePart = parts[0]
+  const segments = titlePart.split('-')
+
+  if (segments.length === 1) {
+    // Single segment - just capitalize
+    return capitalize(segments[0])
+  }
+
+  // Multiple segments - treat all but last as directory path, last as component
+  // e.g., ["ui", "button"] -> "UI/Button"
+  // e.g., ["components", "forms", "text", "input"] is ambiguous...
+
+  // Heuristic: common directory names are short (ui, components, screens, etc.)
+  // We'll assume segments that look like common dirs stay as dirs
+  const commonDirs = ['ui', 'components', 'screens', 'forms', 'layout', 'navigation', 'common', 'shared', 'core', 'atoms', 'molecules', 'organisms', 'templates', 'pages']
+
+  const pathParts: string[] = []
+  let i = 0
+
+  // Collect directory parts
+  while (i < segments.length - 1) {
+    if (commonDirs.includes(segments[i].toLowerCase())) {
+      pathParts.push(capitalize(segments[i]))
+      i++
+    } else {
+      break
+    }
+  }
+
+  // If no common dirs found, assume first segment is directory
+  if (pathParts.length === 0 && segments.length > 1) {
+    pathParts.push(capitalize(segments[0]))
+    i = 1
+  }
+
+  // Remaining segments form the component name (PascalCase)
+  const componentSegments = segments.slice(i)
+  const componentName = componentSegments.map(capitalize).join('')
+
+  if (pathParts.length > 0) {
+    return [...pathParts, componentName].join('/')
+  }
+
+  return componentName
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}
+
+async function backfill() {
+  console.log('Starting backfill of kind field...\n')
+
+  // Get all story results without kind
+  const stories = await db
+    .select()
+    .from(schema.storyResults)
+    .where(isNull(schema.storyResults.kind))
+
+  console.log(`Found ${stories.length} stories without kind field\n`)
+
+  if (stories.length === 0) {
+    console.log('Nothing to backfill!')
+    await client.end()
+    return
+  }
+
+  // Group by derived kind to show preview
+  const preview = new Map<string, string[]>()
+  for (const story of stories) {
+    const kind = extractKindFromStoryId(story.storyId)
+    if (!preview.has(kind)) {
+      preview.set(kind, [])
+    }
+    preview.get(kind)!.push(story.storyId)
+  }
+
+  console.log('Preview of kind mappings:')
+  console.log('='.repeat(60))
+  for (const [kind, storyIds] of Array.from(preview.entries()).slice(0, 20)) {
+    console.log(`  ${kind}`)
+    for (const id of storyIds.slice(0, 3)) {
+      console.log(`    <- ${id}`)
+    }
+    if (storyIds.length > 3) {
+      console.log(`    ... and ${storyIds.length - 3} more`)
+    }
+  }
+  if (preview.size > 20) {
+    console.log(`  ... and ${preview.size - 20} more directories`)
+  }
+  console.log('='.repeat(60))
+  console.log()
+
+  // Update each story
+  let updated = 0
+  for (const story of stories) {
+    const kind = extractKindFromStoryId(story.storyId)
+
+    await db
+      .update(schema.storyResults)
+      .set({ kind })
+      .where(eq(schema.storyResults.id, story.id))
+
+    updated++
+    if (updated % 100 === 0) {
+      console.log(`Updated ${updated}/${stories.length}...`)
+    }
+  }
+
+  console.log(`\nBackfill complete! Updated ${updated} stories.`)
+  await client.end()
+}
+
+backfill().catch((err) => {
+  console.error('Backfill failed:', err)
+  process.exit(1)
+})

package/src/api-plugin.ts

@@ -0,0 +1,169 @@
+import type { Plugin } from 'vite'
+import { drizzle } from 'drizzle-orm/postgres-js'
+import postgres from 'postgres'
+import { createReadStream, existsSync, statSync } from 'fs'
+import { extname } from 'path'
+import * as schema from './db/schema'
+
+const MIME_TYPES: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+}
+
+/**
+ * Vite plugin to add API endpoints for the CLI
+ */
+export function apiPlugin(): Plugin {
+  let db: ReturnType<typeof drizzle> | null = null
+
+  return {
+    name: 'api-plugin',
+    configureServer(server) {
+      // Initialize database connection
+      const connectionString = process.env.DATABASE_URL
+      if (connectionString) {
+        const client = postgres(connectionString)
+        db = drizzle(client, { schema })
+      }
+
+      // Add middleware for API routes
+      server.middlewares.use(async (req, res, next) => {
+        // Image serving endpoint
+        if (req.url?.startsWith('/api/images') && req.method === 'GET') {
+          const url = new URL(req.url, 'http://localhost')
+          const filePath = url.searchParams.get('path')
+
+          if (!filePath) {
+            res.statusCode = 400
+            res.end('Missing path parameter')
+            return
+          }
+
+          // Security: only allow image files
+          const ext = extname(filePath).toLowerCase()
+          if (!MIME_TYPES[ext]) {
+            res.statusCode = 400
+            res.end('Invalid file type')
+            return
+          }
+
+          // Check if file exists
+          if (!existsSync(filePath)) {
+            res.statusCode = 404
+            res.end('File not found')
+            return
+          }
+
+          try {
+            const stat = statSync(filePath)
+            res.setHeader('Content-Type', MIME_TYPES[ext])
+            res.setHeader('Content-Length', stat.size)
+            res.setHeader('Cache-Control', 'public, max-age=31536000') // Cache for 1 year
+            createReadStream(filePath).pipe(res)
+          } catch (error) {
+            console.error('Error serving image:', error)
+            res.statusCode = 500
+            res.end('Error serving image')
+          }
+          return
+        }
+
+        if (req.url === '/api/upload' && req.method === 'POST') {
+          if (!db) {
+            res.statusCode = 500
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ error: 'Database not configured' }))
+            return
+          }
+
+          let body = ''
+          req.on('data', (chunk) => {
+            body += chunk.toString()
+          })
+
+          req.on('end', async () => {
+            try {
+              const data = JSON.parse(body)
+              const {
+                branch,
+                baseBranch = 'main',
+                commitHash,
+                commitMessage,
+                stories = [],
+              } = data
+
+              // Validate required fields
+              if (!branch || !commitHash) {
+                res.statusCode = 400
+                res.setHeader('Content-Type', 'application/json')
+                res.end(JSON.stringify({ error: 'Missing required fields: branch, commitHash' }))
+                return
+              }
+
+              // Calculate counts
+              const totalStories = stories.length
+              const changedCount = stories.filter((s: any) => s.hasDiff || s.isNew).length
+              const passedCount = stories.filter((s: any) => !s.hasDiff && !s.isNew).length
+              const failedCount = stories.filter((s: any) => s.hasDiff).length
+
+              // Create test record
+              const [test] = await db
+                .insert(schema.tests)
+                .values({
+                  branch,
+                  baseBranch,
+                  commitHash,
+                  commitMessage,
+                  status: 'PENDING',
+                  totalStories,
+                  changedCount,
+                  passedCount,
+                  failedCount,
+                })
+                .returning()
+
+              // Create story results
+              if (stories.length > 0) {
+                await db.insert(schema.storyResults).values(
+                  stories.map((story: any) => ({
+                    testId: test.id,
+                    storyId: story.storyId,
+                    kind: story.kind || story.title || null, // Full path like "UI/Button"
+                    componentName: story.componentName,
+                    storyName: story.storyName,
+                    baselineUrl: story.baselineUrl || null,
+                    currentUrl: story.currentUrl,
+                    diffUrl: story.diffUrl || null,
+                    pixelDiff: story.pixelDiff,
+                    ssimScore: story.ssimScore,
+                    hasDiff: story.hasDiff,
+                    isNew: story.isNew,
+                  }))
+                )
+              }
+
+              res.statusCode = 200
+              res.setHeader('Content-Type', 'application/json')
+              res.end(JSON.stringify({
+                success: true,
+                testId: test.id,
+                url: `/tests/${test.id}`,
+              }))
+            } catch (error) {
+              console.error('Upload error:', error)
+              res.statusCode = 500
+              res.setHeader('Content-Type', 'application/json')
+              res.end(JSON.stringify({ error: 'Failed to upload test results' }))
+            }
+          })
+          return
+        }
+
+        next()
+      })
+    },
+  }
+}

package/src/components/image/ImageCompare.tsx

@@ -0,0 +1,188 @@
+import { useState } from 'react'
+import { Eye, Layers } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+type ViewMode = 'side-by-side' | 'diff' | 'overlay' | 'current'
+
+interface ImageCompareProps {
+  baseline: string | null
+  current: string
+  diff: string | null
+  className?: string
+}
+
+const placeholderSvg = (text: string) =>
+  `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill="%23f3f4f6" width="200" height="200"/><text fill="%239ca3af" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="14">${encodeURIComponent(text)}</text></svg>`
+
+export function ImageCompare({ baseline, current, diff, className }: ImageCompareProps) {
+  const [view, setView] = useState<ViewMode>('side-by-side')
+  const [overlayOpacity, setOverlayOpacity] = useState(0.5)
+
+  const viewModes: { value: ViewMode; label: string; icon: typeof Eye; showIf?: boolean }[] = [
+    { value: 'side-by-side', label: 'Side by Side', icon: Layers },
+    { value: 'diff', label: 'Diff Only', icon: Eye, showIf: !!diff },
+    { value: 'overlay', label: 'Overlay', icon: Layers, showIf: !!diff },
+    { value: 'current', label: 'Current Only', icon: Eye },
+  ]
+
+  return (
+    <div className={cn('flex flex-col overflow-hidden', className)}>
+      {/* View mode buttons */}
+      <div className="flex gap-2 mb-4 flex-wrap items-center flex-shrink-0">
+        {viewModes.map(
+          (mode) =>
+            (mode.showIf === undefined || mode.showIf) && (
+              <button
+                key={mode.value}
+                onClick={() => setView(mode.value)}
+                className={cn(
+                  'px-3 py-1.5 text-sm rounded-md transition-colors',
+                  view === mode.value
+                    ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                )}
+              >
+                <mode.icon className="w-4 h-4 inline mr-1" />
+                <span className="hidden sm:inline">{mode.label}</span>
+              </button>
+            )
+        )}
+
+        {/* Overlay opacity slider */}
+        {view === 'overlay' && diff && (
+          <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-300 dark:border-gray-600">
+            <span className="text-sm text-gray-500 dark:text-gray-400 hidden sm:inline">
+              Diff Opacity:
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              value={overlayOpacity}
+              onChange={(e) => setOverlayOpacity(parseFloat(e.target.value))}
+              className="w-24"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400 w-8">
+              {Math.round(overlayOpacity * 100)}%
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Image content area - fills remaining height */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {/* Side by side view */}
+        {view === 'side-by-side' && (
+          <div className="h-full grid grid-cols-2 gap-4">
+            <div className="min-h-0 flex flex-col">
+              <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex-shrink-0">
+                Baseline
+              </div>
+              <div className="flex-1 min-h-0 flex items-center justify-center">
+                {baseline ? (
+                  <img
+                    src={baseline}
+                    alt="Baseline"
+                    className="max-w-full max-h-full object-contain rounded-lg border border-gray-200 dark:border-gray-600"
+                    onError={(e) => {
+                      e.currentTarget.src = placeholderSvg('No baseline')
+                    }}
+                  />
+                ) : (
+                  <div className="border border-gray-200 dark:border-gray-600 rounded-lg h-48 w-32 flex items-center justify-center text-gray-400 text-sm text-center px-2">
+                    No baseline<br />(new story)
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="min-h-0 flex flex-col">
+              <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex-shrink-0">
+                Current
+              </div>
+              <div className="flex-1 min-h-0 flex items-center justify-center">
+                <img
+                  src={current}
+                  alt="Current"
+                  className="max-w-full max-h-full object-contain rounded-lg border border-gray-200 dark:border-gray-600"
+                  onError={(e) => {
+                    e.currentTarget.src = placeholderSvg('Image not found')
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Diff only view */}
+        {view === 'diff' && diff && (
+          <div className="h-full flex flex-col">
+            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex-shrink-0">
+              Difference Highlight
+            </div>
+            <div className="flex-1 min-h-0 flex items-center justify-center">
+              <img
+                src={diff}
+                alt="Diff"
+                className="max-w-full max-h-full object-contain rounded-lg border border-gray-200 dark:border-gray-600"
+                onError={(e) => {
+                  e.currentTarget.src = placeholderSvg('Diff not available')
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Overlay view */}
+        {view === 'overlay' && diff && (
+          <div className="h-full flex flex-col">
+            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex-shrink-0">
+              Current with Diff Overlay
+              <span className="ml-2 text-xs text-gray-400 dark:text-gray-500">
+                (red/magenta areas show differences)
+              </span>
+            </div>
+            <div className="flex-1 min-h-0 flex items-center justify-center relative">
+              <img
+                src={current}
+                alt="Current"
+                className="max-w-full max-h-full object-contain rounded-lg border border-gray-200 dark:border-gray-600"
+                onError={(e) => {
+                  e.currentTarget.src = placeholderSvg('Image not found')
+                }}
+              />
+              <img
+                src={diff}
+                alt="Diff overlay"
+                className="absolute max-w-full max-h-full object-contain pointer-events-none rounded-lg"
+                style={{ opacity: overlayOpacity }}
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none'
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Current only view */}
+        {view === 'current' && (
+          <div className="h-full flex flex-col">
+            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex-shrink-0">
+              Current Screenshot
+            </div>
+            <div className="flex-1 min-h-0 flex items-center justify-center">
+              <img
+                src={current}
+                alt="Current"
+                className="max-w-full max-h-full object-contain rounded-lg border border-gray-200 dark:border-gray-600"
+                onError={(e) => {
+                  e.currentTarget.src = placeholderSvg('Image not found')
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/story/StoryFlatList.tsx

@@ -0,0 +1,67 @@
+import { CheckCircle } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { Story } from '../../hooks/useStoryTree'
+
+interface StoryFlatListProps {
+  stories: Story[]
+  selectedStoryId: string | null
+  onSelectStory: (storyId: string) => void
+  className?: string
+}
+
+export function StoryFlatList({
+  stories,
+  selectedStoryId,
+  onSelectStory,
+  className,
+}: StoryFlatListProps) {
+  if (stories.length === 0) {
+    return (
+      <div className="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+        No stories match your filters
+      </div>
+    )
+  }
+
+  return (
+    <ul className={cn('divide-y divide-gray-200 dark:divide-gray-700', className)}>
+      {stories.map((story) => (
+        <li
+          key={story.id}
+          onClick={() => onSelectStory(story.id)}
+          className={cn(
+            'px-4 py-3 cursor-pointer transition-colors',
+            'hover:bg-gray-50 dark:hover:bg-gray-700',
+            selectedStoryId === story.id && 'bg-primary-50 dark:bg-primary-900/30'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <div className="min-w-0 flex-1">
+              <div className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                {story.componentName}
+              </div>
+              <div className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                {story.storyName}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 ml-2 flex-shrink-0">
+              {story.isNew && (
+                <span className="px-2 py-0.5 bg-info-100 text-info-700 dark:bg-info-900 dark:text-info-200 text-xs rounded-full">
+                  New
+                </span>
+              )}
+              {story.hasDiff && (
+                <span className="px-2 py-0.5 bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-200 text-xs rounded-full">
+                  {story.pixelDiff.toFixed(1)}%
+                </span>
+              )}
+              {!story.hasDiff && !story.isNew && (
+                <CheckCircle className="w-4 h-4 text-success-500" />
+              )}
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}