@weirdfingers/baseboards 0.4.0 → 0.5.0

package/templates/api/src/boards/generators/resolution.py

@@ -24,6 +24,55 @@ from .artifacts import (
 logger = get_logger(__name__)
 
 
+def _rewrite_storage_url(storage_url: str) -> str:
+    """
+    Rewrite storage URL for Docker internal networking.
+
+    Similar to the Next.js imageLoader, this rewrites public API URLs
+    to internal Docker network URLs when running in containers.
+
+    Args:
+        storage_url: The original storage URL
+
+    Returns:
+        str: Rewritten URL if internal_api_url is configured, otherwise original URL
+    """
+    from ..config import settings
+
+    logger.debug(
+        "Checking URL rewriting configuration",
+        internal_api_url=settings.internal_api_url,
+        storage_url=storage_url[:100] if storage_url else None,
+    )
+
+    if not settings.internal_api_url:
+        logger.debug("No internal_api_url configured, skipping URL rewrite")
+        return storage_url
+
+    # Common patterns to replace (localhost and 127.0.0.1 with various ports)
+    # In Docker, the public URL is typically http://localhost:8800 or http://localhost:8088
+    # We need to replace it with the internal URL (http://api:8800)
+    replacements = [
+        ("http://localhost:8800", settings.internal_api_url),
+        ("http://127.0.0.1:8800", settings.internal_api_url),
+        ("http://localhost:8088", settings.internal_api_url),
+        ("http://127.0.0.1:8088", settings.internal_api_url),
+    ]
+
+    rewritten_url = storage_url
+    for public_pattern, internal_url in replacements:
+        if public_pattern in storage_url:
+            rewritten_url = storage_url.replace(public_pattern, internal_url)
+            logger.info(
+                "Rewrote storage URL for internal Docker networking",
+                original_url=storage_url,
+                rewritten_url=rewritten_url,
+            )
+            break
+
+    return rewritten_url
+
+
 async def resolve_artifact(
     artifact: AudioArtifact | VideoArtifact | ImageArtifact | LoRArtifact,
 ) -> str:
@@ -97,9 +146,17 @@ async def download_artifact_to_temp(
     os.chmod(temp_path, 0o600)
 
     try:
+        # Rewrite URL for Docker internal networking
+        download_url = _rewrite_storage_url(artifact.storage_url)
+
         # Stream the download to avoid loading large files into memory
         async with httpx.AsyncClient(timeout=300.0) as client:
-            async with client.stream("GET", artifact.storage_url) as response:
+            logger.info(
+                "Attempting to download artifact",
+                original_url=artifact.storage_url,
+                download_url=download_url,
+            )
+            async with client.stream("GET", download_url) as response:
                 response.raise_for_status()
 
                 # Close the file descriptor returned by mkstemp and use aiofiles

package/templates/api/src/boards/jobs/repository.py

@@ -115,7 +115,7 @@ async def create_batch_generation(
     input_params: dict,
     batch_id: str,
     batch_index: int,
-) -> Generations:
+) -> str:
     """Create a batch generation record for multi-output generators.
 
     This creates a new generation record that is part of a batch, with
@@ -133,7 +133,7 @@ async def create_batch_generation(
         batch_index: Index of this output in the batch
 
     Returns:
-        Created generation record
+        ID of the created generation record
     """
     gen = Generations()
     gen.tenant_id = tenant_id
@@ -150,4 +150,4 @@ async def create_batch_generation(
     }
     session.add(gen)
     await session.flush()
-    return gen
+    return str(gen.id)

package/templates/api/src/boards/workers/context.py

@@ -6,7 +6,12 @@ from uuid import UUID, uuid4
 
 from ..database.connection import get_async_session
 from ..generators import resolution
-from ..generators.artifacts import AudioArtifact, ImageArtifact, TextArtifact, VideoArtifact
+from ..generators.artifacts import (
+    AudioArtifact,
+    ImageArtifact,
+    TextArtifact,
+    VideoArtifact,
+)
 from ..jobs import repository as jobs_repo
 from ..logging import get_logger
 from ..progress.models import ProgressUpdate
@@ -319,7 +324,7 @@ class GeneratorExecutionContext:
 
         # Create new batch generation record
         async with get_async_session() as session:
-            batch_gen = await jobs_repo.create_batch_generation(
+            batch_gen_id = await jobs_repo.create_batch_generation(
                 session,
                 tenant_id=UUID(self.tenant_id),
                 board_id=UUID(self.board_id),
@@ -331,7 +336,6 @@ class GeneratorExecutionContext:
                 batch_index=output_index,
             )
             await session.commit()
-            batch_gen_id = str(batch_gen.id)
 
         self._batch_generations.append(batch_gen_id)
         logger.info(

package/templates/compose.dev.yaml

@@ -5,7 +5,6 @@ services:
   api:
     volumes:
       - ./api:/app
-      - ./data/storage:/app/data/storage
     environment:
       - PYTHONUNBUFFERED=1
     command:
@@ -24,9 +23,9 @@ services:
   worker:
     volumes:
       - ./api:/app
-      - ./data/storage:/app/data/storage
     environment:
       - PYTHONUNBUFFERED=1
+      - BOARDS_INTERNAL_API_URL=http://api:8800
 
   web:
     command: sh -c "pnpm install && pnpm dev"

package/templates/compose.yaml

@@ -34,6 +34,8 @@ services:
     env_file:
       - docker/.env
       - api/.env
+    volumes:
+      - ./data/storage:/app/data/storage
     depends_on:
       db:
         condition: service_healthy
@@ -67,6 +69,10 @@ services:
     env_file:
       - docker/.env
       - api/.env
+    volumes:
+      - ./data/storage:/app/data/storage
+    environment:
+      - BOARDS_INTERNAL_API_URL=http://api:8800
     depends_on:
       db:
         condition: service_healthy

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.0",
+    "@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>