@weirdfingers/baseboards 0.5.2 → 0.6.0

package/templates/web/package.json

@@ -14,7 +14,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/postcss": "^4.1.13",
-    "@weirdfingers/boards": "^0.5.2",
+    "@weirdfingers/boards": "^0.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "graphql": "^16.11.0",

package/templates/web/src/app/boards/[boardId]/page.tsx

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 import { useBoard, useGenerators, useGeneration, GeneratorSelectionProvider } from "@weirdfingers/boards";
 import { GenerationGrid } from "@/components/boards/GenerationGrid";
 import { GenerationInput } from "@/components/boards/GenerationInput";
+import { UploadArtifact } from "@/components/boards/UploadArtifact";
 
 export default function BoardPage() {
   const params = useParams();
@@ -169,11 +170,19 @@ export default function BoardPage() {
       <main className="min-h-screen bg-gray-50">
         <div className="container mx-auto px-4 py-6 max-w-7xl">
           {/* Header */}
-          <div className="mb-6">
-            <h1 className="text-3xl font-bold text-gray-900">{board.title}</h1>
-            {board.description && (
-              <p className="text-gray-600 mt-2">{board.description}</p>
-            )}
+          <div className="mb-6 flex items-start justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">{board.title}</h1>
+              {board.description && (
+                <p className="text-gray-600 mt-2">{board.description}</p>
+              )}
+            </div>
+            <UploadArtifact
+              boardId={boardId}
+              onUploadComplete={() => {
+                refreshBoard();
+              }}
+            />
           </div>
 
           {/* Generation Grid */}

package/templates/web/src/app/lineage/[generationId]/page.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import React from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useLineage, type AncestryNode, type DescendantNode } from "@weirdfingers/boards";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Loader2 } from "lucide-react";
+
+export default function LineageExplorerPage() {
+  const params = useParams();
+  const router = useRouter();
+  const generationId = params.generationId as string;
+
+  const { ancestry, descendants, loading, error } = useLineage(generationId, {
+    maxDepth: 10,
+  });
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-6 flex items-center justify-center min-h-screen">
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-6 w-6 animate-spin" />
+          <span>Loading lineage...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto p-6">
+        <Card className="p-6 border-red-500">
+          <h2 className="text-xl font-bold text-red-600 mb-2">Error</h2>
+          <p className="text-red-600">{error.message}</p>
+          <Button
+            onClick={() => router.back()}
+            variant="outline"
+            className="mt-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Go Back
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="mb-6">
+        <Button
+          onClick={() => router.back()}
+          variant="outline"
+          className="mb-4"
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back
+        </Button>
+        <h1 className="text-3xl font-bold">Artifact Lineage Explorer</h1>
+        <p className="text-muted-foreground mt-2">
+          Explore the ancestry and descendants of generation {generationId}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Ancestry Section */}
+        <Card className="p-6">
+          <h2 className="text-2xl font-bold mb-4">Ancestry</h2>
+          <p className="text-muted-foreground mb-4">
+            Shows all parent generations that contributed to this artifact
+          </p>
+          {ancestry ? (
+            <AncestryTree node={ancestry} currentGenerationId={generationId} />
+          ) : (
+            <p className="text-muted-foreground">No ancestry data available</p>
+          )}
+        </Card>
+
+        {/* Descendants Section */}
+        <Card className="p-6">
+          <h2 className="text-2xl font-bold mb-4">Descendants</h2>
+          <p className="text-muted-foreground mb-4">
+            Shows all child generations that used this artifact as input
+          </p>
+          {descendants ? (
+            <DescendantTree node={descendants} currentGenerationId={generationId} />
+          ) : (
+            <p className="text-muted-foreground">
+              No descendants data available
+            </p>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+interface AncestryTreeProps {
+  node: AncestryNode;
+  currentGenerationId: string;
+}
+
+function AncestryTree({ node, currentGenerationId }: AncestryTreeProps) {
+  const router = useRouter();
+  const isCurrentGeneration = node.generation.id === currentGenerationId;
+
+  return (
+    <div className="space-y-2">
+      <div
+        className={`p-3 rounded-lg border ${
+          isCurrentGeneration
+            ? "bg-primary/10 border-primary"
+            : "bg-card hover:bg-accent cursor-pointer"
+        }`}
+        onClick={() => {
+          if (!isCurrentGeneration) {
+            router.push(`/lineage/${node.generation.id}`);
+          }
+        }}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm text-muted-foreground">
+                Depth: {node.depth}
+              </span>
+              {node.role && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  {node.role}
+                </span>
+              )}
+            </div>
+            <p className="font-semibold mt-1">{node.generation.generatorName}</p>
+            <p className="text-sm text-muted-foreground">
+              {node.generation.artifactType} • {node.generation.status}
+            </p>
+            <p className="text-xs text-muted-foreground font-mono mt-1">
+              {node.generation.id.slice(0, 8)}...
+            </p>
+          </div>
+          {node.generation.thumbnailUrl && (
+            <img
+              src={node.generation.thumbnailUrl}
+              alt="Thumbnail"
+              className="w-16 h-16 object-cover rounded"
+            />
+          )}
+        </div>
+      </div>
+
+      {node.parents && node.parents.length > 0 && (
+        <div className="ml-6 pl-4 border-l-2 border-muted space-y-2">
+          {node.parents.map((parent, idx) => (
+            <AncestryTree
+              key={`${parent.generation.id}-${idx}`}
+              node={parent}
+              currentGenerationId={currentGenerationId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface DescendantTreeProps {
+  node: DescendantNode;
+  currentGenerationId: string;
+}
+
+function DescendantTree({ node, currentGenerationId }: DescendantTreeProps) {
+  const router = useRouter();
+  const isCurrentGeneration = node.generation.id === currentGenerationId;
+
+  return (
+    <div className="space-y-2">
+      <div
+        className={`p-3 rounded-lg border ${
+          isCurrentGeneration
+            ? "bg-primary/10 border-primary"
+            : "bg-card hover:bg-accent cursor-pointer"
+        }`}
+        onClick={() => {
+          if (!isCurrentGeneration) {
+            router.push(`/lineage/${node.generation.id}`);
+          }
+        }}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm text-muted-foreground">
+                Depth: {node.depth}
+              </span>
+              {node.role && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+                  {node.role}
+                </span>
+              )}
+            </div>
+            <p className="font-semibold mt-1">{node.generation.generatorName}</p>
+            <p className="text-sm text-muted-foreground">
+              {node.generation.artifactType} • {node.generation.status}
+            </p>
+            <p className="text-xs text-muted-foreground font-mono mt-1">
+              {node.generation.id.slice(0, 8)}...
+            </p>
+          </div>
+          {node.generation.thumbnailUrl && (
+            <img
+              src={node.generation.thumbnailUrl}
+              alt="Thumbnail"
+              className="w-16 h-16 object-cover rounded"
+            />
+          )}
+        </div>
+      </div>
+
+      {node.children && node.children.length > 0 && (
+        <div className="ml-6 pl-4 border-l-2 border-muted space-y-2">
+          {node.children.map((child, idx) => (
+            <DescendantTree
+              key={`${child.generation.id}-${idx}`}
+              node={child}
+              currentGenerationId={currentGenerationId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/web/src/components/boards/ArtifactPreview.tsx

@@ -12,13 +12,16 @@ import {
   Play,
   Pause,
   RotateCcw,
+  GitBranch,
 } from "lucide-react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 
 interface ArtifactPreviewProps {
@@ -50,6 +53,7 @@ export function ArtifactPreview({
   artifactId,
   prompt,
 }: ArtifactPreviewProps) {
+  const router = useRouter();
   const [isPlaying, setIsPlaying] = React.useState(false);
   const [currentTime, setCurrentTime] = React.useState(0);
   const [duration, setDuration] = React.useState(0);
@@ -349,7 +353,7 @@ export function ArtifactPreview({
               )}
 
               {/* More options menu - show for all artifacts */}
-              {(onPreview || onDownload) && (
+              {(onPreview || onDownload || artifactId) && (
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <button
@@ -361,6 +365,21 @@ export function ArtifactPreview({
                     </button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="w-40">
+                    {artifactId && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          router.push(`/lineage/${artifactId}`);
+                        }}
+                        className="cursor-pointer"
+                      >
+                        <GitBranch className="w-4 h-4 mr-2" />
+                        View Lineage
+                      </DropdownMenuItem>
+                    )}
+                    {artifactId && (onPreview || onDownload) && (
+                      <DropdownMenuSeparator />
+                    )}
                     {onPreview && (
                       <DropdownMenuItem
                         onClick={(e) => {

package/templates/web/src/components/boards/UploadArtifact.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import React, { useCallback, useState, useRef } from "react";
+import { useUpload, ArtifactType } from "@weirdfingers/boards";
+
+interface UploadArtifactProps {
+  boardId: string;
+  onUploadComplete?: (generationId: string) => void;
+}
+
+export function UploadArtifact({ boardId, onUploadComplete }: UploadArtifactProps) {
+  const { upload, isUploading, progress, error } = useUpload();
+  const [isOpen, setIsOpen] = useState(false);
+  const [urlInput, setUrlInput] = useState("");
+  const [dragActive, setDragActive] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = useCallback(
+    async (file: File) => {
+      // Detect artifact type from file
+      const type = file.type;
+      let artifactType: ArtifactType = ArtifactType.IMAGE;
+
+      if (type.startsWith("image/")) {
+        artifactType = ArtifactType.IMAGE;
+      } else if (type.startsWith("video/")) {
+        artifactType = ArtifactType.VIDEO;
+      } else if (type.startsWith("audio/")) {
+        artifactType = ArtifactType.AUDIO;
+      } else if (type.startsWith("text/")) {
+        artifactType = ArtifactType.TEXT;
+      }
+
+      try {
+        const result = await upload({
+          boardId,
+          artifactType,
+          source: file,
+        });
+        onUploadComplete?.(result.id);
+        setIsOpen(false);
+      } catch (err) {
+        console.error("Upload failed:", err);
+      }
+    },
+    [upload, boardId, onUploadComplete]
+  );
+
+  const handleUrlUpload = useCallback(async () => {
+    if (!urlInput.trim()) return;
+
+    try {
+      // Default to image for URL uploads
+      const result = await upload({
+        boardId,
+        artifactType: ArtifactType.IMAGE,
+        source: urlInput.trim(),
+      });
+      onUploadComplete?.(result.id);
+      setUrlInput("");
+      setIsOpen(false);
+    } catch (err) {
+      console.error("URL upload failed:", err);
+    }
+  }, [upload, boardId, urlInput, onUploadComplete]);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragActive(false);
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        handleFileUpload(files[0]);
+      }
+    },
+    [handleFileUpload]
+  );
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragActive(false);
+  };
+
+  const handlePaste = useCallback(
+    async (e: React.ClipboardEvent) => {
+      const items = Array.from(e.clipboardData.items);
+
+      // Check for image in clipboard
+      for (const item of items) {
+        if (item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) {
+            e.preventDefault();
+            await handleFileUpload(file);
+            return;
+          }
+        }
+      }
+    },
+    [handleFileUpload]
+  );
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(true)}
+        className="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
+      >
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+          />
+        </svg>
+        Upload
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-2 w-96 bg-white rounded-lg shadow-xl p-6 z-50 border border-gray-200">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-900">Upload Artifact</h3>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Drag and drop zone */}
+          <div
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+              dragActive
+                ? "border-orange-500 bg-orange-50"
+                : "border-gray-300 hover:border-gray-400"
+            }`}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) handleFileUpload(file);
+              }}
+              className="hidden"
+              accept="image/*,video/*,audio/*,text/*"
+            />
+
+            <div className="flex flex-col items-center gap-2">
+              <svg
+                className="w-12 h-12 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                />
+              </svg>
+
+              <div>
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="text-orange-600 hover:text-orange-700 font-medium"
+                >
+                  Choose a file
+                </button>
+                <span className="text-gray-500"> or drag and drop here</span>
+              </div>
+
+              <p className="text-sm text-gray-500">
+                Images, videos, audio, and text files (max 100MB)
+              </p>
+            </div>
+          </div>
+
+          {/* URL input */}
+          <div className="mt-4">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Or paste a URL or image
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={urlInput}
+                onChange={(e) => setUrlInput(e.target.value)}
+                onPaste={handlePaste}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleUrlUpload();
+                  }
+                }}
+                placeholder="https://example.com/image.jpg or paste an image"
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+                disabled={isUploading}
+              />
+              <button
+                onClick={handleUrlUpload}
+                disabled={!urlInput.trim() || isUploading}
+                className="px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+              >
+                Upload
+              </button>
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          {isUploading && (
+            <div className="mt-4">
+              <div className="flex items-center justify-between text-sm text-gray-600 mb-2">
+                <span>Uploading...</span>
+                <span>{Math.round(progress)}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2">
+                <div
+                  className="bg-orange-500 h-2 rounded-full transition-all duration-300"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Error message */}
+          {error && (
+            <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+              <p className="text-red-800 text-sm">{error.message}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}