@weirdfingers/baseboards 0.4.1 → 0.5.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.4.1",
+    "@weirdfingers/boards": "^0.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "graphql": "^16.11.0",

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

@@ -2,32 +2,27 @@
 
 import React from "react";
 import { useParams } from "next/navigation";
-import { useBoard, useGenerators, useGeneration } from "@weirdfingers/boards";
+import { useBoard, useGenerators, useGeneration, GeneratorSelectionProvider } from "@weirdfingers/boards";
 import { GenerationGrid } from "@/components/boards/GenerationGrid";
 import { GenerationInput } from "@/components/boards/GenerationInput";
 
 export default function BoardPage() {
   const params = useParams();
   const boardId = params.boardId as string;
-  console.log("[BoardPage] Rendering with boardId:", boardId);
 
-  const boardHookResult = useBoard(boardId);
-  console.log("[BoardPage] useBoard result:", boardHookResult);
   const {
     board,
     loading: boardLoading,
     error: boardError,
     refresh: refreshBoard,
-  } = boardHookResult;
+  } = useBoard(boardId);
 
   // Fetch available generators
-  const generatorsHookResult = useGenerators();
-  console.log("[BoardPage] useGenerators result:", generatorsHookResult);
   const {
     generators,
     loading: generatorsLoading,
     error: generatorsError,
-  } = generatorsHookResult;
+  } = useGenerators();
 
   // Use generation hook for submitting generations and real-time progress
   const {
@@ -38,10 +33,6 @@ export default function BoardPage() {
     result,
   } = useGeneration();
 
-  console.log("[BoardPage] board:", board);
-  console.log("[BoardPage] boardError:", boardError);
-  console.log("[BoardPage] board is null/undefined?", !board);
-
   // Refresh board when a generation completes or fails
   // MUST be before conditional returns to satisfy Rules of Hooks
   React.useEffect(() => {
@@ -49,10 +40,6 @@ export default function BoardPage() {
       progress &&
       (progress.status === "completed" || progress.status === "failed")
     ) {
-      console.log(
-        "[BoardPage] Generation finished, refreshing board:",
-        progress.status
-      );
       refreshBoard();
     }
   }, [progress, refreshBoard]);
@@ -121,12 +108,6 @@ export default function BoardPage() {
 
   // Handle loading state
   if (boardLoading || !board) {
-    console.log(
-      "[BoardPage] Showing loading spinner - boardLoading:",
-      boardLoading,
-      "board:",
-      board
-    );
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
@@ -134,8 +115,6 @@ export default function BoardPage() {
     );
   }
 
-  console.log("[BoardPage] Board loaded successfully:", board);
-
   // Filter completed generations that can be used as inputs
   const availableArtifacts = generations.filter(
     (gen) => gen.status === "COMPLETED" && gen.storageUrl
@@ -186,47 +165,48 @@ export default function BoardPage() {
   };
 
   return (
-    <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>
-
-        {/* Generation Grid */}
-        <div className="mb-8">
-          <GenerationGrid
-            generations={generations}
-            onGenerationClick={(gen) => {
-              console.log("Clicked generation:", gen);
-              // TODO: Open generation detail modal
-            }}
-          />
-        </div>
-
-        {/* Generation Input */}
-        <div className="sticky bottom-6 z-10">
-          {generatorsLoading ? (
-            <div className="bg-white rounded-lg shadow-lg p-6 text-center">
-              <p className="text-gray-500">Loading generators...</p>
-            </div>
-          ) : generators.length === 0 ? (
-            <div className="bg-white rounded-lg shadow-lg p-6 text-center">
-              <p className="text-gray-500">No generators available</p>
-            </div>
-          ) : (
-            <GenerationInput
-              generators={generators}
-              availableArtifacts={availableArtifacts}
-              onSubmit={handleGenerationSubmit}
-              isGenerating={isGenerating}
+    <GeneratorSelectionProvider>
+      <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>
+
+          {/* Generation Grid */}
+          <div className="mb-8">
+            <GenerationGrid
+              generations={generations}
+              onGenerationClick={() => {
+                // TODO: Open generation detail modal
+              }}
             />
-          )}
+          </div>
+
+          {/* Generation Input */}
+          <div id="generation-input" className="sticky bottom-6 z-10">
+            {generatorsLoading ? (
+              <div className="bg-white rounded-lg shadow-lg p-6 text-center">
+                <p className="text-gray-500">Loading generators...</p>
+              </div>
+            ) : generators.length === 0 ? (
+              <div className="bg-white rounded-lg shadow-lg p-6 text-center">
+                <p className="text-gray-500">No generators available</p>
+              </div>
+            ) : (
+              <GenerationInput
+                generators={generators}
+                availableArtifacts={availableArtifacts}
+                onSubmit={handleGenerationSubmit}
+                isGenerating={isGenerating}
+              />
+            )}
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </GeneratorSelectionProvider>
   );
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import React, { useState } from "react";
 import { FileVideo, Volume2, X } from "lucide-react";
 import Image from "next/image";
 
@@ -29,6 +30,8 @@ export function ArtifactInputSlots({
   availableArtifacts,
   onSelectArtifact,
 }: ArtifactInputSlotsProps) {
+  const [dragOverSlot, setDragOverSlot] = useState<string | null>(null);
+
   const getIcon = (type: string) => {
     switch (type.toLowerCase()) {
       case "video":
@@ -47,6 +50,56 @@ export function ArtifactInputSlots({
     );
   };
 
+  const handleDragOver = (
+    e: React.DragEvent,
+    slotType: string,
+    slotName: string
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Check if the dragged artifact type matches the slot type
+    try {
+      const data = e.dataTransfer.types.includes("application/json");
+      if (data) {
+        e.dataTransfer.dropEffect = "copy";
+        setDragOverSlot(slotName);
+      }
+    } catch (err) {
+      // Ignore errors during drag over
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverSlot(null);
+  };
+
+  const handleDrop = (
+    e: React.DragEvent,
+    slotType: string,
+    slotName: string
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverSlot(null);
+
+    try {
+      const jsonData = e.dataTransfer.getData("application/json");
+      if (jsonData) {
+        const artifact = JSON.parse(jsonData) as Generation;
+
+        // Check if artifact type matches slot type
+        if (artifact.artifactType.toLowerCase() === slotType.toLowerCase()) {
+          onSelectArtifact(slotName, artifact);
+        }
+      }
+    } catch (err) {
+      console.error("Error handling drop:", err);
+    }
+  };
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       {slots.map((slot) => {
@@ -100,11 +153,22 @@ export function ArtifactInputSlots({
               </div>
             ) : (
               // Show slot placeholder
-              <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-gray-400 transition-colors">
+              <div
+                className={`border-2 border-dashed rounded-lg p-6 transition-all ${
+                  dragOverSlot === slot.name
+                    ? "border-orange-500 bg-orange-50"
+                    : "border-gray-300 hover:border-gray-400"
+                }`}
+                onDragOver={(e) => handleDragOver(e, slot.type, slot.name)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e) => handleDrop(e, slot.type, slot.name)}
+              >
                 <div className="flex flex-col items-center justify-center text-center">
                   <div className="mb-2">{getIcon(slot.type)}</div>
                   <p className="text-sm font-medium text-gray-700 mb-1">
-                    Add a {slot.type}
+                    {dragOverSlot === slot.name
+                      ? `Drop ${slot.type} here`
+                      : `Add a ${slot.type}`}
                   </p>
                   {matchingArtifacts.length > 0 ? (
                     <select
@@ -128,7 +192,7 @@ export function ArtifactInputSlots({
                     </select>
                   ) : (
                     <p className="text-xs text-gray-500 mt-1">
-                      No {slot.type} artifacts in this board yet
+                      No {slot.type} artifacts in this board yet.
                     </p>
                   )}
                 </div>

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

@@ -1,5 +1,25 @@
-import { FileVideo, Volume2, FileText, Image as ImageIcon } from "lucide-react";
+import React from "react";
+import {
+  FileVideo,
+  Volume2,
+  FileText,
+  Image as ImageIcon,
+  Plus,
+  MoreVertical,
+  GripVertical,
+  Download,
+  Eye,
+  Play,
+  Pause,
+  RotateCcw,
+} from "lucide-react";
 import Image from "next/image";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface ArtifactPreviewProps {
   artifactType: string;
@@ -8,6 +28,12 @@ interface ArtifactPreviewProps {
   status: string;
   errorMessage?: string | null;
   onClick?: () => void;
+  onAddToSlot?: () => void;
+  canAddToSlot?: boolean;
+  onDownload?: () => void;
+  onPreview?: () => void;
+  artifactId?: string;
+  prompt?: string | null;
 }
 
 export function ArtifactPreview({
@@ -17,13 +43,67 @@ export function ArtifactPreview({
   status,
   errorMessage,
   onClick,
+  onAddToSlot,
+  canAddToSlot = false,
+  onDownload,
+  onPreview,
+  artifactId,
+  prompt,
 }: ArtifactPreviewProps) {
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+
   const isLoading = status === "PENDING" || status === "PROCESSING";
   const isFailed = status === "FAILED" || status === "CANCELLED";
+  const isComplete = status === "COMPLETED";
 
   // Determine which URL to use for preview
   const previewUrl = thumbnailUrl || storageUrl;
 
+  // Media control functions
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const mediaElement = artifactType === "AUDIO" ? audioRef.current : videoRef.current;
+    if (!mediaElement) return;
+
+    if (isPlaying) {
+      mediaElement.pause();
+      setIsPlaying(false);
+    } else {
+      mediaElement.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const handleRestart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const mediaElement = artifactType === "AUDIO" ? audioRef.current : videoRef.current;
+    if (!mediaElement) return;
+
+    mediaElement.currentTime = 0;
+    setCurrentTime(0);
+  };
+
+  const handleTimeUpdate = () => {
+    const mediaElement = artifactType === "AUDIO" ? audioRef.current : videoRef.current;
+    if (!mediaElement) return;
+    setCurrentTime(mediaElement.currentTime);
+  };
+
+  const handleLoadedMetadata = () => {
+    const mediaElement = artifactType === "AUDIO" ? audioRef.current : videoRef.current;
+    if (!mediaElement) return;
+    setDuration(mediaElement.duration);
+  };
+
+  const handleMediaEnded = () => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+  };
+
   const renderContent = () => {
     if (isFailed) {
       return (
@@ -66,28 +146,116 @@ export function ArtifactPreview({
         );
 
       case "VIDEO":
-        return (
-          <div className="relative w-full h-full">
-            {previewUrl ? (
-              <Image
-                src={previewUrl}
-                alt="Video thumbnail"
+        if (storageUrl) {
+          return (
+            <div className="relative w-full h-full">
+              <video
+                ref={videoRef}
+                src={storageUrl}
+                onTimeUpdate={handleTimeUpdate}
+                onLoadedMetadata={handleLoadedMetadata}
+                onEnded={handleMediaEnded}
+                preload="metadata"
                 className="w-full h-full object-cover"
-                width={512}
-                height={512}
+                loop
               />
-            ) : (
-              <div className="flex items-center justify-center h-full bg-gray-100">
-                <FileVideo className="w-12 h-12 text-gray-400" />
+              <div className="absolute top-2 right-2 z-10 rounded-full bg-black/50 p-1.5">
+                <FileVideo className="w-4 h-4 text-white" />
+              </div>
+              {/* Video playback controls overlay */}
+              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-2 pointer-events-auto">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handlePlayPause}
+                      className="p-3 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+                    >
+                      {isPlaying ? (
+                        <Pause className="w-6 h-6" />
+                      ) : (
+                        <Play className="w-6 h-6" />
+                      )}
+                    </button>
+                    <button
+                      onClick={handleRestart}
+                      className="p-3 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+                    >
+                      <RotateCcw className="w-6 h-6" />
+                    </button>
+                  </div>
+                  {duration > 0 && (
+                    <div className="text-sm text-white font-medium">
+                      {Math.floor(currentTime)}s / {Math.floor(duration)}s
+                    </div>
+                  )}
+                </div>
               </div>
-            )}
-            <div className="absolute top-2 left-2 bg-black/50 rounded p-1">
-              <FileVideo className="w-5 h-5 text-white" />
             </div>
+          );
+        }
+        return (
+          <div className="flex items-center justify-center h-full bg-gray-100">
+            <FileVideo className="w-12 h-12 text-gray-400" />
           </div>
         );
 
       case "AUDIO":
+        if (storageUrl) {
+          const truncatedPrompt = prompt
+            ? prompt.length > 60
+              ? prompt.substring(0, 60) + "..."
+              : prompt
+            : "Audio file";
+
+          return (
+            <div className="relative w-full h-full bg-gradient-to-br from-purple-500/10 to-blue-500/10">
+              <audio
+                ref={audioRef}
+                src={storageUrl}
+                onTimeUpdate={handleTimeUpdate}
+                onLoadedMetadata={handleLoadedMetadata}
+                onEnded={handleMediaEnded}
+                preload="metadata"
+              />
+
+              <div className="flex flex-col items-center justify-center p-4 h-full">
+                <Volume2 className="w-8 h-8 text-primary mb-2" />
+                <p className="text-xs text-center text-foreground leading-relaxed">
+                  {truncatedPrompt}
+                </p>
+              </div>
+
+              {/* Audio playback controls overlay */}
+              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-2 pointer-events-auto">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handlePlayPause}
+                      className="p-3 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+                    >
+                      {isPlaying ? (
+                        <Pause className="w-6 h-6" />
+                      ) : (
+                        <Play className="w-6 h-6" />
+                      )}
+                    </button>
+                    <button
+                      onClick={handleRestart}
+                      className="p-3 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+                    >
+                      <RotateCcw className="w-6 h-6" />
+                    </button>
+                  </div>
+                  {duration > 0 && (
+                    <div className="text-sm text-white font-medium">
+                      {Math.floor(currentTime)}s / {Math.floor(duration)}s
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        }
         return (
           <div className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-blue-900 to-blue-700">
             <Volume2 className="w-12 h-12 text-white mb-2" />
@@ -114,12 +282,116 @@ export function ArtifactPreview({
 
   return (
     <div
-      className={`relative aspect-square rounded-lg overflow-hidden border border-gray-200 ${
-        onClick ? "cursor-pointer hover:opacity-80 transition-opacity" : ""
-      }`}
-      onClick={onClick}
+      className="relative aspect-square rounded-lg overflow-hidden border border-gray-200 group"
+      draggable={isComplete && !!artifactId && canAddToSlot}
+      onDragStart={(e) => {
+        if (isComplete && artifactId) {
+          e.dataTransfer.setData(
+            "application/json",
+            JSON.stringify({
+              id: artifactId,
+              artifactType,
+              storageUrl,
+              thumbnailUrl,
+            })
+          );
+          e.dataTransfer.effectAllowed = "copy";
+        }
+      }}
     >
-      {renderContent()}
+      <div
+        className={onClick ? "cursor-pointer aspect-square" : "aspect-square"}
+        onClick={onClick}
+      >
+        {renderContent()}
+      </div>
+
+      {/* Bottom overlay with controls - show for all artifacts when not loading/failed */}
+      {!isLoading && !isFailed && (
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity">
+          <div className="flex items-center justify-between gap-2">
+            {/* Drag handle - only for completed artifacts */}
+            {isComplete && (
+              <div
+                className="flex items-center gap-2 cursor-move text-white/80 hover:text-white"
+                title="Drag to input slot"
+              >
+                <GripVertical className="w-4 h-4" />
+              </div>
+            )}
+
+            <div
+              className={`flex items-center gap-2 ${
+                !isComplete ? "ml-auto" : ""
+              }`}
+            >
+              {/* Add button - only for completed artifacts */}
+              {isComplete && onAddToSlot && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAddToSlot();
+                  }}
+                  disabled={!canAddToSlot}
+                  className={`p-1.5 rounded transition-colors ${
+                    canAddToSlot
+                      ? "bg-white/20 hover:bg-white/30 text-white cursor-pointer"
+                      : "bg-white/10 text-white/40 cursor-not-allowed"
+                  }`}
+                  title={
+                    canAddToSlot
+                      ? "Add to input slot"
+                      : "No compatible input slots"
+                  }
+                >
+                  <Plus className="w-4 h-4" />
+                </button>
+              )}
+
+              {/* More options menu - show for all artifacts */}
+              {(onPreview || onDownload) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      onClick={(e) => e.stopPropagation()}
+                      className="p-1.5 rounded bg-white/20 hover:bg-white/30 text-white transition-colors"
+                      title="More options"
+                    >
+                      <MoreVertical className="w-4 h-4" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-40">
+                    {onPreview && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onPreview();
+                        }}
+                        className="cursor-pointer"
+                      >
+                        <Eye className="w-4 h-4 mr-2" />
+                        Preview
+                      </DropdownMenuItem>
+                    )}
+                    {onDownload && (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDownload();
+                        }}
+                        className="cursor-pointer"
+                      >
+                        <Download className="w-4 h-4 mr-2" />
+                        Download
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }