@weirdfingers/baseboards 0.4.1 → 0.5.1

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>
   );
 }

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

@@ -1,3 +1,4 @@
+import { useGeneratorSelection } from "@weirdfingers/boards";
 import { ArtifactPreview } from "./ArtifactPreview";
 
 interface Generation {
@@ -19,6 +20,8 @@ export function GenerationGrid({
   generations,
   onGenerationClick,
 }: GenerationGridProps) {
+  const { canArtifactBeAdded, addArtifactToSlot } = useGeneratorSelection();
+
   if (generations.length === 0) {
     return (
       <div className="flex items-center justify-center py-12 text-gray-500">
@@ -27,19 +30,56 @@ export function GenerationGrid({
     );
   }
 
+  const handleDownload = (generation: Generation) => {
+    if (generation.storageUrl) {
+      window.open(generation.storageUrl, "_blank");
+    }
+  };
+
+  const handlePreview = (generation: Generation) => {
+    // For now, use the same handler as onClick
+    onGenerationClick?.(generation);
+  };
+
+  const handleAddToSlot = (generation: Generation) => {
+    const success = addArtifactToSlot({
+      id: generation.id,
+      artifactType: generation.artifactType,
+      storageUrl: generation.storageUrl,
+      thumbnailUrl: generation.thumbnailUrl,
+    });
+
+    if (success) {
+      // Scroll to the generation input to show the user where the artifact was added
+      const generationInput = document.getElementById('generation-input');
+      if (generationInput) {
+        generationInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  };
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      {generations.map((generation) => (
-        <ArtifactPreview
-          key={generation.id}
-          artifactType={generation.artifactType}
-          storageUrl={generation.storageUrl}
-          thumbnailUrl={generation.thumbnailUrl}
-          status={generation.status}
-          errorMessage={generation.errorMessage}
-          onClick={() => onGenerationClick?.(generation)}
-        />
-      ))}
+      {generations.map((generation) => {
+        const canAdd = generation.status === "COMPLETED" && canArtifactBeAdded(generation.artifactType);
+
+        return (
+          <ArtifactPreview
+            key={generation.id}
+            artifactId={generation.id}
+            artifactType={generation.artifactType}
+            storageUrl={generation.storageUrl}
+            thumbnailUrl={generation.thumbnailUrl}
+            status={generation.status}
+            errorMessage={generation.errorMessage}
+            onClick={() => onGenerationClick?.(generation)}
+            onAddToSlot={() => handleAddToSlot(generation)}
+            canAddToSlot={canAdd}
+            onDownload={() => handleDownload(generation)}
+            onPreview={() => handlePreview(generation)}
+          />
+        );
+      })}
     </div>
   );
 }

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

@@ -4,8 +4,7 @@ import { useState, useMemo, useEffect } from "react";
 import { Settings, ArrowUp, X } from "lucide-react";
 import Image from "next/image";
 import {
-  ParsedGeneratorSchema,
-  parseGeneratorSchema,
+  useGeneratorSelection,
 } from "@weirdfingers/boards";
 import { GeneratorSelector, GeneratorInfo } from "./GeneratorSelector";
 import { ArtifactInputSlots } from "./ArtifactInputSlots";
@@ -35,44 +34,49 @@ export function GenerationInput({
   onSubmit,
   isGenerating = false,
 }: GenerationInputProps) {
-  const [selectedGenerator, setSelectedGenerator] =
-    useState<GeneratorInfo | null>(generators[0] || null);
+  const {
+    selectedGenerator,
+    setSelectedGenerator,
+    parsedSchema,
+    selectedArtifacts,
+    setSelectedArtifacts
+  } = useGeneratorSelection();
+
   const [prompt, setPrompt] = useState("");
-  const [selectedArtifacts, setSelectedArtifacts] = useState<
-    Map<string, Generation>
-  >(new Map());
   const [attachedImage, setAttachedImage] = useState<Generation | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [settings, setSettings] = useState<Record<string, unknown>>({});
 
-  // Parse input schema using the toolkit's schema parser
-  const parsedSchema = useMemo((): ParsedGeneratorSchema => {
-    if (!selectedGenerator) {
-      return { artifactSlots: [], promptField: null, settingsFields: [] };
+  // Initialize selected generator if not set
+  useEffect(() => {
+    if (!selectedGenerator && generators.length > 0) {
+      setSelectedGenerator(generators[0]);
     }
-    return parseGeneratorSchema(selectedGenerator.inputSchema);
-  }, [selectedGenerator]);
+  }, [generators, selectedGenerator, setSelectedGenerator]);
 
   const artifactSlots = useMemo(() => {
+    if (!parsedSchema) return [];
     return parsedSchema.artifactSlots.map((slot) => ({
       name: slot.fieldName,
       type: slot.artifactType,
       required: slot.required,
     }));
-  }, [parsedSchema.artifactSlots]);
+  }, [parsedSchema]);
 
   const needsArtifactInputs = artifactSlots.length > 0;
 
   // Initialize settings with defaults when generator changes
   const defaultSettings = useMemo(() => {
     const defaults: Record<string, unknown> = {};
-    parsedSchema.settingsFields.forEach((field) => {
-      if (field.default !== undefined) {
-        defaults[field.fieldName] = field.default;
-      }
-    });
+    if (parsedSchema) {
+      parsedSchema.settingsFields.forEach((field) => {
+        if (field.default !== undefined) {
+          defaults[field.fieldName] = field.default;
+        }
+      });
+    }
     return defaults;
-  }, [parsedSchema.settingsFields]);
+  }, [parsedSchema]);
 
   // Reset settings when generator changes or defaultSettings change
   useEffect(() => {
@@ -89,9 +93,8 @@ export function GenerationInput({
       settings,
     });
 
-    // Reset form
+    // Reset form (but keep selected artifacts and generator)
     setPrompt("");
-    setSelectedArtifacts(new Map());
     setAttachedImage(null);
     setSettings(defaultSettings);
   };
@@ -229,7 +232,7 @@ export function GenerationInput({
       {/* Settings panel (collapsed by default) */}
       {showSettings && (
         <div className="px-4 py-4 border-t border-gray-200 bg-gray-50">
-          {parsedSchema.settingsFields.length === 0 ? (
+          {!parsedSchema || parsedSchema.settingsFields.length === 0 ? (
             <p className="text-sm text-gray-600">
               No additional settings available for this generator
             </p>

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

@@ -2,6 +2,7 @@
 
 import { Zap, Check } from "lucide-react";
 import type { JSONSchema7 } from "@weirdfingers/boards";
+import { useGeneratorSelection } from "@weirdfingers/boards";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,11 +28,19 @@ export function GeneratorSelector({
   selectedGenerator,
   onSelect,
 }: GeneratorSelectorProps) {
+  const { setSelectedGenerator } = useGeneratorSelection();
+
   const getGeneratorIcon = (name: string) => {
     // You can customize icons per generator here
     return <Zap className="w-4 h-4" />;
   };
 
+  const handleSelect = (generator: GeneratorInfo) => {
+    // Update both local state and context
+    setSelectedGenerator(generator);
+    onSelect(generator);
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -57,7 +66,7 @@ export function GeneratorSelector({
         {generators.map((generator) => (
           <DropdownMenuItem
             key={generator.name}
-            onClick={() => onSelect(generator)}
+            onClick={() => handleSelect(generator)}
             className="px-4 py-3 flex items-start gap-3 cursor-pointer"
           >
             <div className="flex-shrink-0 mt-0.5">