@weirdfingers/baseboards 0.6.2 → 0.8.0

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

@@ -1,5 +1,17 @@
-import { useGeneratorSelection } from "@weirdfingers/boards";
+import { useState } from "react";
+import { useGeneratorSelection, useGeneration } from "@weirdfingers/boards";
 import { ArtifactPreview } from "./ArtifactPreview";
+import { useToast } from "@/components/ui/use-toast";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 interface Generation {
   id: string;
@@ -14,24 +26,49 @@ interface Generation {
 interface GenerationGridProps {
   generations: Generation[];
   onGenerationClick?: (generation: Generation) => void;
+  onRemoveSuccess?: () => void;
 }
 
 export function GenerationGrid({
   generations,
   onGenerationClick,
+  onRemoveSuccess: onRemoveSuccess,
 }: GenerationGridProps) {
   const { canArtifactBeAdded, addArtifactToSlot } = useGeneratorSelection();
+  const { deleteGeneration } = useGeneration();
+  const { toast } = useToast();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [generationToDelete, setGenerationToDelete] =
+    useState<Generation | null>(null);
 
   if (generations.length === 0) {
     return (
-      <div className="flex items-center justify-center py-12 text-gray-500">
+      <div className="flex items-center justify-center py-12 text-muted-foreground">
         <p>No generations yet. Create your first one below!</p>
       </div>
     );
   }
 
-  const handleDownload = (generation: Generation) => {
-    if (generation.storageUrl) {
+  const handleDownload = async (generation: Generation) => {
+    if (!generation.storageUrl) return;
+
+    try {
+      // Add download query parameter to force download instead of inline preview
+      // Also add custom filename based on generation ID
+      const url = new URL(generation.storageUrl);
+      url.searchParams.set("download", "true");
+      url.searchParams.set("filename", `gen-${generation.id}`);
+
+      // Create temporary anchor and trigger download
+      const link = document.createElement("a");
+      link.href = url.toString();
+      link.target = "_blank";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error("Failed to download file:", error);
+      // Fallback to opening in new tab if download fails
       window.open(generation.storageUrl, "_blank");
     }
   };
@@ -51,17 +88,52 @@ export function GenerationGrid({
 
     if (success) {
       // Scroll to the generation input to show the user where the artifact was added
-      const generationInput = document.getElementById('generation-input');
+      const generationInput = document.getElementById("generation-input");
       if (generationInput) {
-        generationInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        generationInput.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
       }
     }
   };
 
+  const handleDeleteClick = (generation: Generation) => {
+    setGenerationToDelete(generation);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!generationToDelete) return;
+
+    try {
+      await deleteGeneration(generationToDelete.id);
+      toast({
+        title: "Generation deleted",
+        description: "The generation has been permanently removed.",
+      });
+      setDeleteDialogOpen(false);
+      setGenerationToDelete(null);
+      // Refresh the board data to update the generations list
+      onRemoveSuccess?.();
+    } catch (error) {
+      console.error("Failed to delete generation:", error);
+      toast({
+        title: "Failed to delete generation",
+        description:
+          error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
+      setDeleteDialogOpen(false);
+    }
+  };
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {generations.map((generation) => {
-        const canAdd = generation.status === "COMPLETED" && canArtifactBeAdded(generation.artifactType);
+        const canAdd =
+          generation.status === "COMPLETED" &&
+          canArtifactBeAdded(generation.artifactType);
 
         return (
           <ArtifactPreview
@@ -77,9 +149,31 @@ export function GenerationGrid({
             canAddToSlot={canAdd}
             onDownload={() => handleDownload(generation)}
             onPreview={() => handlePreview(generation)}
+            onDelete={() => handleDeleteClick(generation)}
           />
         );
       })}
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete generation?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. The generation will be permanently
+              deleted.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

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

@@ -122,9 +122,9 @@ export function GenerationInput({
         .every((s) => selectedArtifacts.has(s.name)));
 
   return (
-    <div className="border border-gray-300 rounded-lg bg-white shadow-sm">
+    <div className="border border-border rounded-lg bg-background shadow-sm">
       {/* Generator selector header */}
-      <div className="px-4 py-3 border-b border-gray-200 flex items-center justify-center">
+      <div className="px-4 py-3 border-b border-border flex items-center justify-center">
         <GeneratorSelector
           generators={generators}
           selectedGenerator={selectedGenerator}
@@ -134,7 +134,7 @@ export function GenerationInput({
 
       {/* Artifact input slots (for generators like lipsync) */}
       {needsArtifactInputs && (
-        <div className="px-4 py-4 border-b border-gray-200">
+        <div className="px-4 py-4 border-b border-border">
           <ArtifactInputSlots
             slots={artifactSlots}
             selectedArtifacts={selectedArtifacts}
@@ -142,7 +142,7 @@ export function GenerationInput({
             onSelectArtifact={handleSelectArtifact}
           />
           {artifactSlots.every((s) => selectedArtifacts.has(s.name)) && (
-            <div className="mt-3 flex items-center gap-2 text-sm text-green-600">
+            <div className="mt-3 flex items-center gap-2 text-sm text-success">
               <svg
                 className="w-4 h-4"
                 fill="none"
@@ -164,7 +164,7 @@ export function GenerationInput({
 
       {/* Attached image preview (if any) */}
       {attachedImage && (
-        <div className="px-4 py-3 border-b border-gray-200">
+        <div className="px-4 py-3 border-b border-border">
           <div className="flex items-center gap-3">
             <Image
               src={attachedImage.thumbnailUrl || attachedImage.storageUrl || ""}
@@ -175,13 +175,13 @@ export function GenerationInput({
             />
             <div className="flex-1">
               <p className="text-sm font-medium">Image attached</p>
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 ID: {attachedImage.id.substring(0, 8)}
               </p>
             </div>
             <button
               onClick={() => setAttachedImage(null)}
-              className="p-1 hover:bg-gray-100 rounded"
+              className="p-1 hover:bg-muted rounded"
             >
               <X className="w-4 h-4" />
             </button>
@@ -209,18 +209,18 @@ export function GenerationInput({
         <div className="flex items-center gap-2">
           <button
             onClick={() => setShowSettings(!showSettings)}
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            className="p-2 hover:bg-muted rounded-lg transition-colors"
             title="Settings"
           >
-            <Settings className="w-5 h-5 text-gray-600" />
+            <Settings className="w-5 h-5 text-muted-foreground" />
           </button>
           <button
             onClick={handleSubmit}
             disabled={!canSubmit}
             className={`p-3 rounded-full transition-all ${
               canSubmit
-                ? "bg-orange-500 hover:bg-orange-600 text-white shadow-lg"
-                : "bg-gray-200 text-gray-400 cursor-not-allowed"
+                ? "bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg"
+                : "bg-muted text-muted-foreground cursor-not-allowed"
             }`}
             title="Generate (⌘+Enter)"
           >
@@ -231,14 +231,14 @@ export function GenerationInput({
 
       {/* Settings panel (collapsed by default) */}
       {showSettings && (
-        <div className="px-4 py-4 border-t border-gray-200 bg-gray-50">
+        <div className="px-4 py-4 border-t border-border bg-muted/50">
           {!parsedSchema || parsedSchema.settingsFields.length === 0 ? (
-            <p className="text-sm text-gray-600">
+            <p className="text-sm text-muted-foreground">
               No additional settings available for this generator
             </p>
           ) : (
             <div>
-              <h3 className="text-sm font-medium text-gray-900 mb-4">
+              <h3 className="text-sm font-medium text-foreground mb-4">
                 Generator Settings
               </h3>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -246,12 +246,12 @@ export function GenerationInput({
                 <div key={field.fieldName} className="space-y-1.5">
                   <label
                     htmlFor={field.fieldName}
-                    className="block text-sm font-medium text-gray-700"
+                    className="block text-sm font-medium text-foreground"
                   >
                     {field.title}
                   </label>
                   {field.description && (
-                    <p className="text-xs text-gray-500">{field.description}</p>
+                    <p className="text-xs text-muted-foreground">{field.description}</p>
                   )}
 
                   {/* Slider control */}
@@ -274,9 +274,9 @@ export function GenerationInput({
                               : parseFloat(e.target.value),
                           })
                         }
-                        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-orange-500"
+                        className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
                       />
-                      <div className="flex justify-between text-xs text-gray-600">
+                      <div className="flex justify-between text-xs text-muted-foreground">
                         <span>{field.min}</span>
                         <span className="font-medium">
                           {String(settings[field.fieldName] ?? field.default ?? field.min)}
@@ -297,7 +297,7 @@ export function GenerationInput({
                           [field.fieldName]: e.target.value,
                         })
                       }
-                      className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+                      className="block w-full px-3 py-2 text-sm border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                     >
                       {field.options.map((option) => (
                         <option key={option} value={option}>
@@ -324,7 +324,7 @@ export function GenerationInput({
                             : parseFloat(e.target.value),
                         })
                       }
-                      className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+                      className="block w-full px-3 py-2 text-sm border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                     />
                   )}
 
@@ -341,7 +341,7 @@ export function GenerationInput({
                         })
                       }
                       pattern={field.pattern}
-                      className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+                      className="block w-full px-3 py-2 text-sm border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                     />
                   )}
                 </div>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Zap, Check } from "lucide-react";
+import { Zap, Check, Search } from "lucide-react";
 import type { JSONSchema7 } from "@weirdfingers/boards";
 import { useGeneratorSelection } from "@weirdfingers/boards";
 import {
@@ -9,6 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useState, useMemo, useEffect, useDeferredValue, useRef } from "react";
 
 export interface GeneratorInfo {
   name: string;
@@ -23,12 +24,102 @@ 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 [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) {
+      // Use requestAnimationFrame to wait for the DOM to update
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [isOpen]);
+
+  // Get unique artifact types from generators
+  const artifactTypes = useMemo(() => {
+    const types = new Set<string>();
+    generators.forEach((gen) => types.add(gen.artifactType));
+    return Array.from(types).sort();
+  }, [generators]);
+
+  // Filter generators based on search and type
+  const filteredGenerators = useMemo(() => {
+    let filtered = generators;
+
+    // Filter by type if any selected
+    if (selectedTypes.size > 0) {
+      filtered = filtered.filter((gen) => selectedTypes.has(gen.artifactType));
+    }
+
+    // Filter by search text - split by spaces and require all terms to match
+    if (deferredSearch.trim()) {
+      const searchTerms = deferredSearch
+        .toLowerCase()
+        .split(/\s+/)
+        .filter((term) => term.length > 0);
+
+      filtered = filtered.filter((gen) => {
+        const searchableText = `${gen.name} ${gen.description}`.toLowerCase();
+        // All search terms must be present in the combined name + description
+        return searchTerms.every((term) => searchableText.includes(term));
+      });
+    }
+
+    return filtered;
+  }, [generators, selectedTypes, deferredSearch]);
+
+  // Get MRU generators (only when no search input)
+  const mruList = useMemo(() => {
+    if (searchInput.trim()) {
+      return [];
+    }
+
+    return mruGenerators
+      .map((name) => generators.find((gen) => gen.name === name))
+      .filter((gen): gen is GeneratorInfo => gen !== undefined)
+      .filter((gen) =>
+        selectedTypes.size > 0 ? selectedTypes.has(gen.artifactType) : true
+      );
+  }, [mruGenerators, generators, searchInput, selectedTypes]);
+
+  // Get remaining generators (excluding MRU)
+  const remainingGenerators = useMemo(() => {
+    if (!searchInput.trim() && mruList.length > 0) {
+      const mruNames = new Set(mruList.map((gen) => gen.name));
+      return filteredGenerators.filter((gen) => !mruNames.has(gen.name));
+    }
+    return filteredGenerators;
+  }, [filteredGenerators, mruList, searchInput]);
 
   const getGeneratorIcon = (name: string) => {
     // You can customize icons per generator here
@@ -39,57 +130,168 @@ export function GeneratorSelector({
     // Update both local state and context
     setSelectedGenerator(generator);
     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);
+    }
+  };
+
+  const toggleType = (type: string) => {
+    setSelectedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
   };
 
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
-        <button className="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 flex items-center gap-2">
+        <button className="px-4 py-2 bg-background border border-border rounded-lg shadow-sm hover:bg-muted/50 flex items-center gap-2">
           {selectedGenerator ? (
             <>
               {getGeneratorIcon(selectedGenerator.name)}
               <span className="font-medium">{selectedGenerator.name}</span>
             </>
           ) : (
-            <span className="text-gray-500">Select Generator</span>
+            <span className="text-muted-foreground">Select Generator</span>
           )}
         </button>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="min-w-[250px] max-w-[400px] max-h-[400px] overflow-y-auto"
+        className="min-w-[250px] max-w-[400px] max-h-[500px] overflow-y-auto"
         align="start"
         side="bottom"
         sideOffset={8}
         collisionPadding={8}
       >
-        {generators.map((generator) => (
-          <DropdownMenuItem
-            key={generator.name}
-            onClick={() => handleSelect(generator)}
-            className="px-4 py-3 flex items-start gap-3 cursor-pointer"
-          >
-            <div className="flex-shrink-0 mt-0.5">
-              {getGeneratorIcon(generator.name)}
+        {/* Search Input */}
+        <div className="px-3 py-2 sticky top-0 bg-background border-b border-border z-10">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              ref={searchInputRef}
+              type="text"
+              placeholder="Search generators..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="w-full pl-8 pr-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          {/* Type Filter Pills */}
+          {artifactTypes.length > 1 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {artifactTypes.map((type) => (
+                <button
+                  key={type}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleType(type);
+                  }}
+                  className={`px-2 py-1 text-xs rounded-full border transition-colors ${
+                    selectedTypes.has(type)
+                      ? "bg-primary text-primary-foreground border-primary"
+                      : "bg-background border-border text-muted-foreground hover:bg-muted"
+                  }`}
+                >
+                  {type}
+                </button>
+              ))}
             </div>
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="font-medium text-sm">
-                  {generator.name}
-                </span>
-                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
-                  {generator.artifactType}
-                </span>
-              </div>
-              <p className="text-xs text-gray-600 mt-1">
-                {generator.description}
-              </p>
+          )}
+        </div>
+
+        {/* MRU Section */}
+        {mruList.length > 0 && (
+          <>
+            <div className="px-3 py-2 text-xs font-semibold text-muted-foreground">
+              Recently Used
             </div>
-            {selectedGenerator?.name === generator.name && (
-              <Check className="w-4 h-4 text-green-600 flex-shrink-0" />
-            )}
-          </DropdownMenuItem>
-        ))}
+            {mruList.map((generator) => (
+              <DropdownMenuItem
+                key={`mru-${generator.name}`}
+                onClick={() => handleSelect(generator)}
+                className="px-4 py-3 flex items-start gap-3 cursor-pointer"
+              >
+                <div className="flex-shrink-0 mt-0.5">
+                  {getGeneratorIcon(generator.name)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-sm">
+                      {generator.name}
+                    </span>
+                    <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">
+                      {generator.artifactType}
+                    </span>
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {generator.description}
+                  </p>
+                </div>
+                {selectedGenerator?.name === generator.name && (
+                  <Check className="w-4 h-4 text-success flex-shrink-0" />
+                )}
+              </DropdownMenuItem>
+            ))}
+            <div className="border-t border-border my-1" />
+          </>
+        )}
+
+        {/* All Generators Section */}
+        {mruList.length > 0 && remainingGenerators.length > 0 && (
+          <div className="px-3 py-2 text-xs font-semibold text-muted-foreground">
+            All Generators
+          </div>
+        )}
+        {remainingGenerators.length > 0 ? (
+          remainingGenerators.map((generator) => (
+            <DropdownMenuItem
+              key={generator.name}
+              onClick={() => handleSelect(generator)}
+              className="px-4 py-3 flex items-start gap-3 cursor-pointer"
+            >
+              <div className="flex-shrink-0 mt-0.5">
+                {getGeneratorIcon(generator.name)}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-sm">{generator.name}</span>
+                  <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">
+                    {generator.artifactType}
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {generator.description}
+                </p>
+              </div>
+              {selectedGenerator?.name === generator.name && (
+                <Check className="w-4 h-4 text-success flex-shrink-0" />
+              )}
+            </DropdownMenuItem>
+          ))
+        ) : (
+          <div className="px-4 py-3 text-sm text-muted-foreground text-center">
+            No generators found
+          </div>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );