@weirdfingers/baseboards 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weirdfingers/baseboards",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "One-command launcher for the Boards image generation application",
   "type": "module",
   "bin": {

package/templates/api/src/boards/__init__.py

@@ -3,7 +3,7 @@ Boards Backend SDK
 Open-source creative toolkit for AI-generated content
 """
 
-__version__ = "0.9.0"
+__version__ = "0.9.2"
 
 from .config import settings
 

package/templates/web/package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-toast": "^1.2.15",
     "@tailwindcss/postcss": "^4.1.13",
-    "@weirdfingers/boards": "^0.9.0",
+    "@weirdfingers/boards": "^0.9.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "graphql": "^16.11.0",

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

@@ -20,7 +20,6 @@ export default function BoardPage() {
 
   const {
     board,
-    loading: boardLoading,
     error: boardError,
     refresh: refreshBoard,
     updateBoard,
@@ -182,7 +181,7 @@ export default function BoardPage() {
   }
 
   // Handle loading state
-  if (boardLoading || !board) {
+  if (!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-primary"></div>
@@ -320,6 +319,7 @@ export default function BoardPage() {
           <div className="mb-8">
             <GenerationGrid
               generations={generations}
+              boardId={boardId}
               onGenerationClick={() => {
                 // TODO: Open generation detail modal
               }}

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

@@ -140,6 +140,7 @@ function AncestryTree({ node, currentGenerationId }: AncestryTreeProps) {
             </p>
           </div>
           {node.generation.thumbnailUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
             <img
               src={node.generation.thumbnailUrl}
               alt="Thumbnail"
@@ -208,6 +209,7 @@ function DescendantTree({ node, currentGenerationId }: DescendantTreeProps) {
             </p>
           </div>
           {node.generation.thumbnailUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
             <img
               src={node.generation.thumbnailUrl}
               alt="Thumbnail"

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

@@ -65,7 +65,7 @@ export function ArtifactInputSlots({
         e.dataTransfer.dropEffect = "copy";
         setDragOverSlot(slotName);
       }
-    } catch (err) {
+    } catch {
       // Ignore errors during drag over
     }
   };

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

@@ -14,6 +14,7 @@ import {
   RotateCcw,
   GitBranch,
   Trash2,
+  Film,
 } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -23,6 +24,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
 } from "@/components/ui/dropdown-menu";
 
 interface ArtifactPreviewProps {
@@ -37,6 +41,7 @@ interface ArtifactPreviewProps {
   onDownload?: () => void;
   onPreview?: () => void;
   onDelete?: () => void;
+  onExtractFrame?: (position: "first" | "last") => void;
   artifactId?: string;
   prompt?: string | null;
 }
@@ -53,6 +58,7 @@ export function ArtifactPreview({
   onDownload,
   onPreview,
   onDelete,
+  onExtractFrame,
   artifactId,
   prompt,
 }: ArtifactPreviewProps) {
@@ -406,6 +412,34 @@ export function ArtifactPreview({
                         Download
                       </DropdownMenuItem>
                     )}
+                    {isComplete && artifactType === "VIDEO" && onExtractFrame && (
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger className="cursor-pointer">
+                          <Film className="w-4 h-4 mr-2" />
+                          Extract Frame
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onExtractFrame("first");
+                            }}
+                            className="cursor-pointer"
+                          >
+                            First Frame
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onExtractFrame("last");
+                            }}
+                            className="cursor-pointer"
+                          >
+                            Last Frame
+                          </DropdownMenuItem>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuSub>
+                    )}
                     {onDelete && (
                       <>
                         <DropdownMenuSeparator />

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

@@ -1,5 +1,10 @@
-import { useState } from "react";
-import { useGeneratorSelection, useGeneration } from "@weirdfingers/boards";
+import { useState, useCallback } from "react";
+import {
+  useGeneratorSelection,
+  useGeneration,
+  useMultiUpload,
+  ArtifactType,
+} from "@weirdfingers/boards";
 import { ArtifactPreview } from "./ArtifactPreview";
 import { useToast } from "@/components/ui/use-toast";
 import {
@@ -25,29 +30,118 @@ interface Generation {
 
 interface GenerationGridProps {
   generations: Generation[];
+  boardId: string;
   onGenerationClick?: (generation: Generation) => void;
   onRemoveSuccess?: () => void;
 }
 
 export function GenerationGrid({
   generations,
+  boardId,
   onGenerationClick,
   onRemoveSuccess: onRemoveSuccess,
 }: GenerationGridProps) {
   const { canArtifactBeAdded, addArtifactToSlot } = useGeneratorSelection();
   const { deleteGeneration } = useGeneration();
+  const { uploadMultiple } = useMultiUpload();
   const { toast } = useToast();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [generationToDelete, setGenerationToDelete] =
     useState<Generation | null>(null);
+  const [isExtractingFrame, setIsExtractingFrame] = useState(false);
 
-  if (generations.length === 0) {
-    return (
-      <div className="flex items-center justify-center py-12 text-muted-foreground">
-        <p>No generations yet. Create your first one below!</p>
-      </div>
-    );
-  }
+  const handleExtractFrame = useCallback(
+    async (generation: Generation, position: "first" | "last") => {
+      if (!generation.storageUrl || isExtractingFrame) return;
+
+      setIsExtractingFrame(true);
+
+      try {
+        // Create a video element to load the video
+        const video = document.createElement("video");
+        video.crossOrigin = "anonymous";
+        video.preload = "metadata";
+
+        // Wait for video metadata to load
+        await new Promise<void>((resolve, reject) => {
+          video.onloadedmetadata = () => resolve();
+          video.onerror = () => reject(new Error("Failed to load video"));
+          video.src = generation.storageUrl!;
+        });
+
+        // Seek to the desired position
+        const targetTime = position === "first" ? 0 : video.duration - 0.1;
+        video.currentTime = Math.max(0, targetTime);
+
+        // Wait for the video to seek to the frame
+        await new Promise<void>((resolve, reject) => {
+          video.onseeked = () => resolve();
+          video.onerror = () => reject(new Error("Failed to seek video"));
+        });
+
+        // Create a canvas and draw the video frame
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext("2d");
+
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        // Convert canvas to blob
+        const blob = await new Promise<Blob>((resolve, reject) => {
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(blob);
+              } else {
+                reject(new Error("Failed to create image blob"));
+              }
+            },
+            "image/png",
+            1.0
+          );
+        });
+
+        // Create a File object from the blob
+        const fileName = `${position}-frame-${generation.id}.png`;
+        const file = new File([blob], fileName, { type: "image/png" });
+
+        // Upload the extracted frame as a new image generation
+        const results = await uploadMultiple([
+          {
+            boardId,
+            artifactType: ArtifactType.IMAGE,
+            source: file,
+            userDescription: `${position === "first" ? "First" : "Last"} frame extracted from video`,
+            parentGenerationId: generation.id,
+          },
+        ]);
+
+        if (results.length > 0) {
+          toast({
+            title: "Frame extracted",
+            description: `${position === "first" ? "First" : "Last"} frame has been saved as a new image.`,
+          });
+          onRemoveSuccess?.(); // Refresh the grid to show the new generation
+        }
+      } catch (error) {
+        console.error("Failed to extract frame:", error);
+        toast({
+          title: "Failed to extract frame",
+          description:
+            error instanceof Error ? error.message : "An unknown error occurred",
+          variant: "destructive",
+        });
+      } finally {
+        setIsExtractingFrame(false);
+      }
+    },
+    [boardId, uploadMultiple, toast, onRemoveSuccess, isExtractingFrame]
+  );
 
   const handleDownload = async (generation: Generation) => {
     if (!generation.storageUrl) return;
@@ -128,6 +222,14 @@ export function GenerationGrid({
     }
   };
 
+  if (generations.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12 text-muted-foreground">
+        <p>No generations yet. Create your first one below!</p>
+      </div>
+    );
+  }
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {generations.map((generation) => {
@@ -150,6 +252,7 @@ export function GenerationGrid({
             onDownload={() => handleDownload(generation)}
             onPreview={() => handlePreview(generation)}
             onDelete={() => handleDeleteClick(generation)}
+            onExtractFrame={(position) => handleExtractFrame(generation, position)}
           />
         );
       })}

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

@@ -7,6 +7,7 @@ import {
   useGeneratorSelection,
 } from "@weirdfingers/boards";
 import { GeneratorSelector, GeneratorInfo } from "./GeneratorSelector";
+import { useGeneratorMRU } from "@/hooks/useGeneratorMRU";
 import { ArtifactInputSlots } from "./ArtifactInputSlots";
 
 interface Generation {
@@ -42,6 +43,8 @@ export function GenerationInput({
     setSelectedArtifacts
   } = useGeneratorSelection();
 
+  const { lastUsedGenerator } = useGeneratorMRU();
+
   const [prompt, setPrompt] = useState("");
   const [attachedImage, setAttachedImage] = useState<Generation | null>(null);
   const [showSettings, setShowSettings] = useState(false);
@@ -49,10 +52,21 @@ export function GenerationInput({
 
   // Initialize selected generator if not set
   useEffect(() => {
-    if (!selectedGenerator && generators.length > 0) {
-      setSelectedGenerator(generators[0]);
+    if (selectedGenerator || generators.length === 0) {
+      return;
+    }
+
+    // Try to load from MRU
+    if (lastUsedGenerator) {
+      const match = generators.find(g => g.name === lastUsedGenerator);
+      if (match) {
+        setSelectedGenerator(match);
+        return;
+      }
     }
-  }, [generators, selectedGenerator, setSelectedGenerator]);
+
+    setSelectedGenerator(generators[0]);
+  }, [generators, selectedGenerator, setSelectedGenerator, lastUsedGenerator]);
 
   const artifactSlots = useMemo(() => {
     if (!parsedSchema) return [];

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

@@ -1,15 +1,16 @@
 "use client";
 
-import { Zap, Check, Search } from "lucide-react";
+import { useState, useMemo, useEffect, useDeferredValue, useRef } from "react";
 import type { JSONSchema7 } from "@weirdfingers/boards";
 import { useGeneratorSelection } from "@weirdfingers/boards";
+import { Zap, Search, Check } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useState, useMemo, useEffect, useDeferredValue, useRef } from "react";
+import { useGeneratorMRU } from "@/hooks/useGeneratorMRU";
 
 export interface GeneratorInfo {
   name: string;
@@ -24,37 +25,20 @@ interface GeneratorSelectorProps {
   onSelect: (generator: GeneratorInfo) => void;
 }
 
-const MRU_STORAGE_KEY = "boards-generator-mru";
-const MRU_MAX_SIZE = 3;
-
 export function GeneratorSelector({
   generators,
   selectedGenerator,
   onSelect,
 }: GeneratorSelectorProps) {
   const { setSelectedGenerator } = useGeneratorSelection();
+  const { mruGenerators, addGeneratorToMRU } = useGeneratorMRU();
+
   const [searchInput, setSearchInput] = useState("");
   const deferredSearch = useDeferredValue(searchInput);
   const [selectedTypes, setSelectedTypes] = useState<Set<string>>(new Set());
-  const [mruGenerators, setMruGenerators] = useState<string[]>([]);
   const [isOpen, setIsOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  // Load MRU from localStorage on mount
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(MRU_STORAGE_KEY);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        if (Array.isArray(parsed)) {
-          setMruGenerators(parsed);
-        }
-      }
-    } catch (error) {
-      console.error("Failed to load MRU generators:", error);
-    }
-  }, []);
-
   // Focus search input when dropdown opens
   useEffect(() => {
     if (isOpen) {
@@ -123,7 +107,7 @@ export function GeneratorSelector({
 
   const getGeneratorIcon = (name: string) => {
     // You can customize icons per generator here
-    return <Zap className="w-4 h-4" />;
+    return <Zap className="w-4 h-4" aria-label={name} />;
   };
 
   const handleSelect = (generator: GeneratorInfo) => {
@@ -132,17 +116,7 @@ export function GeneratorSelector({
     onSelect(generator);
 
     // Update MRU
-    const newMru = [
-      generator.name,
-      ...mruGenerators.filter((name) => name !== generator.name),
-    ].slice(0, MRU_MAX_SIZE);
-
-    setMruGenerators(newMru);
-    try {
-      localStorage.setItem(MRU_STORAGE_KEY, JSON.stringify(newMru));
-    } catch (error) {
-      console.error("Failed to save MRU generators:", error);
-    }
+    addGeneratorToMRU(generator.name);
   };
 
   const toggleType = (type: string) => {

package/templates/web/src/components/ui/use-toast.ts

@@ -12,6 +12,7 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",

package/templates/web/src/hooks/useGeneratorMRU.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "react";
+
+const MRU_STORAGE_KEY = "boards-generator-mru";
+const MRU_MAX_SIZE = 3;
+
+export function useGeneratorMRU() {
+  const [mruGenerators, setMruGenerators] = useState<string[]>([]);
+
+  // Load MRU from localStorage on mount
+  useEffect(() => {
+    try {
+      if (typeof window === "undefined") return;
+
+      const stored = localStorage.getItem(MRU_STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Robustness check: Ensure it's an array of strings
+        if (
+          Array.isArray(parsed) &&
+          parsed.every((item) => typeof item === "string")
+        ) {
+          setMruGenerators(parsed);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load MRU generators:", error);
+      // Fallback to empty list is implicit via initial state
+    }
+  }, []);
+
+  const addGeneratorToMRU = useCallback((generatorName: string) => {
+    setMruGenerators((prev) => {
+      // Create new list with generator at the front, removing duplicates
+      const newMru = [
+        generatorName,
+        ...prev.filter((name) => name !== generatorName),
+      ].slice(0, MRU_MAX_SIZE);
+
+      // Persist to localStorage
+      try {
+        if (typeof window !== "undefined") {
+          localStorage.setItem(MRU_STORAGE_KEY, JSON.stringify(newMru));
+        }
+      } catch (error) {
+        console.error("Failed to save MRU generators:", error);
+      }
+
+      return newMru;
+    });
+  }, []);
+
+  return {
+    mruGenerators,
+    lastUsedGenerator: mruGenerators.length > 0 ? mruGenerators[0] : undefined,
+    addGeneratorToMRU,
+  };
+}