@weirdfingers/baseboards 0.2.0

package/templates/compose.yaml

@@ -0,0 +1,109 @@
+# Docker Compose Configuration for Baseboards
+name: ${PROJECT_NAME:-baseboards}
+
+services:
+  db:
+    image: postgres:16
+    env_file: docker/.env
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+    networks:
+      - internal
+
+  cache:
+    image: redis:7
+    command: ["redis-server", "--appendonly", "yes"]
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 20
+    networks:
+      - internal
+
+  api:
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+    image: baseboards-api:local
+    env_file:
+      - docker/.env
+      - api/.env
+    depends_on:
+      db:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+    ports:
+      - "${API_PORT:-8800}:8800"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8800/health"]
+      interval: 30s
+      timeout: 3s
+      retries: 50
+    networks:
+      - internal
+
+  worker:
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+    image: baseboards-api:local
+    command:
+      [
+        "boards-worker",
+        "--log-level",
+        "debug",
+        "--processes",
+        "1",
+        "--threads",
+        "1",
+      ]
+    env_file:
+      - docker/.env
+      - api/.env
+    depends_on:
+      db:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+    networks:
+      - internal
+
+  web:
+    build:
+      context: ./web
+      dockerfile: Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=http://localhost:${API_PORT:-8800}
+        - NEXT_PUBLIC_GRAPHQL_URL=http://localhost:${API_PORT:-8800}/graphql
+    image: baseboards-web:local
+    env_file: web/.env
+    environment:
+      - NEXT_PUBLIC_API_URL=http://localhost:${API_PORT:-8800}
+      - NEXT_PUBLIC_GRAPHQL_URL=http://localhost:${API_PORT:-8800}/graphql
+      - INTERNAL_API_URL=http://api:8800
+    depends_on:
+      api:
+        condition: service_healthy
+    ports:
+      - "${WEB_PORT:-3300}:3000"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+      interval: 30s
+      timeout: 3s
+      retries: 50
+    networks:
+      - internal
+
+networks:
+  internal:
+    driver: bridge
+
+volumes:
+  db-data:

package/templates/docker/env.example

@@ -0,0 +1,23 @@
+# Docker Compose Environment Variables
+# Generated by CLI - DO NOT EDIT MANUALLY
+
+# Project configuration
+PROJECT_NAME=baseboards
+
+# Service ports
+WEB_PORT=3300
+API_PORT=8800
+
+# PostgreSQL configuration
+POSTGRES_USER=baseboards
+POSTGRES_PASSWORD=REPLACE_WITH_GENERATED_PASSWORD
+POSTGRES_DB=baseboards
+
+# Database URL (for API container)
+BOARDS_DATABASE_URL=postgresql://baseboards:REPLACE_WITH_GENERATED_PASSWORD@db:5432/baseboards
+
+# Redis URL (for API container)
+BOARDS_REDIS_URL=redis://cache:6379/0
+
+# Image version (matches CLI version)
+VERSION=latest

package/templates/web/.env.example

@@ -0,0 +1,28 @@
+# Frontend Environment Variables
+
+# API Configuration
+NEXT_PUBLIC_API_URL=http://localhost:8800
+NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8800/graphql
+
+# Internal API URL for Docker
+# When running in Docker, this URL is used for server-side requests (like image optimization)
+# to access the API via the internal Docker network instead of localhost
+INTERNAL_API_URL=http://api:8800
+
+# Auth Provider
+# For local development, 'none' allows unauthenticated access
+NEXT_PUBLIC_AUTH_PROVIDER=none
+
+# Clerk
+# NEXT_PUBLIC_AUTH_PROVIDER=clerk
+# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
+
+# Supabase
+# NEXT_PUBLIC_AUTH_PROVIDER=supabase
+# NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
+# NEXT_PUBLIC_SUPABASE_ANON_KEY=...
+
+# Auth0
+# NEXT_PUBLIC_AUTH_PROVIDER=auth0
+# NEXT_PUBLIC_AUTH0_DOMAIN=...
+# NEXT_PUBLIC_AUTH0_CLIENT_ID=...

package/templates/web/Dockerfile

@@ -0,0 +1,51 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* pnpm-lock.yaml* ./
+RUN corepack enable pnpm && pnpm install
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Accept build args for Next.js public env vars
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_GRAPHQL_URL
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ENV NEXT_PUBLIC_GRAPHQL_URL=${NEXT_PUBLIC_GRAPHQL_URL}
+
+RUN corepack enable pnpm && pnpm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Enable pnpm for dev mode (must be done as root before USER switch)
+RUN corepack enable pnpm
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

package/templates/web/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/templates/web/imageLoader.js

@@ -0,0 +1,18 @@
+/**
+ * Custom image loader for Next.js
+ * Rewrites NEXT_PUBLIC_API_URL to INTERNAL_API_URL in the image URL query parameter
+ * so that when Next.js's server-side image optimizer fetches the image,
+ * it uses the internal Docker network URL instead of localhost
+ */
+export default function imageLoader({ src, width, quality }) {
+  const publicApiUrl = process.env.NEXT_PUBLIC_API_URL;
+  const internalApiUrl = process.env.INTERNAL_API_URL;
+
+  // If we have an internal API URL and the src uses the public one, rewrite it
+  let targetSrc = src;
+  if (internalApiUrl && publicApiUrl && src.includes(publicApiUrl)) {
+    targetSrc = src.replace(publicApiUrl, internalApiUrl);
+  }
+
+  return `/_next/image?url=${encodeURIComponent(targetSrc)}&w=${width}&q=${quality || 75}`;
+}

package/templates/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/templates/web/next.config.js

@@ -0,0 +1,36 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  reactStrictMode: true,
+  transpilePackages: ["@weirdfingers/boards"],
+  images: {
+    unoptimized: true, // Disable server-side optimization for Docker compatibility
+    // Use custom loader when INTERNAL_API_URL is set (Docker environment)
+    // This allows server-side image optimization to fetch from internal network
+    ...(process.env.INTERNAL_API_URL && {
+      loader: "custom",
+      loaderFile: "./imageLoader.js",
+    }),
+    remotePatterns: [
+      {
+        protocol: "http",
+        hostname: "localhost",
+        port: "8800",
+        pathname: "/api/storage/**",
+      },
+      // Allow internal Docker hostname for image optimization
+      ...(process.env.INTERNAL_API_URL
+        ? [
+            {
+              protocol: "http",
+              hostname: "api",
+              port: "8800",
+              pathname: "/api/storage/**",
+            },
+          ]
+        : []),
+    ],
+  },
+};
+
+module.exports = nextConfig;

package/templates/web/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "baseboards",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p ${PORT:-3033}",
+    "build": "next build",
+    "start": "next start -p ${PORT:-3033}",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@weirdfingers/boards": "^0.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.0.0",
+    "graphql": "^16.11.0",
+    "lucide-react": "^0.544.0",
+    "next": "14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.5.3"
+  }
+}

package/templates/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

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

@@ -0,0 +1,232 @@
+"use client";
+
+import React from "react";
+import { useParams } from "next/navigation";
+import { useBoard, useGenerators, useGeneration } 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;
+
+  // Fetch available generators
+  const generatorsHookResult = useGenerators();
+  console.log("[BoardPage] useGenerators result:", generatorsHookResult);
+  const {
+    generators,
+    loading: generatorsLoading,
+    error: generatorsError,
+  } = generatorsHookResult;
+
+  // Use generation hook for submitting generations and real-time progress
+  const {
+    submit,
+    isGenerating,
+    progress,
+    error: generationError,
+    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(() => {
+    if (
+      progress &&
+      (progress.status === "completed" || progress.status === "failed")
+    ) {
+      console.log(
+        "[BoardPage] Generation finished, refreshing board:",
+        progress.status
+      );
+      refreshBoard();
+    }
+  }, [progress, refreshBoard]);
+
+  // Merge database generations with live progress for real-time updates
+  // MUST be before conditional returns to satisfy Rules of Hooks
+  const generations = React.useMemo(() => {
+    const dbGenerations = board?.generations || [];
+
+    // If we have live progress, update the matching generation's status
+    if (progress) {
+      return dbGenerations.map((gen) => {
+        if (gen.id === progress.jobId) {
+          // Map SSE status to GraphQL status format (lowercase to UPPERCASE)
+          const statusMap: Record<string, string> = {
+            queued: "PENDING",
+            processing: "PROCESSING",
+            completed: "COMPLETED",
+            failed: "FAILED",
+            cancelled: "CANCELLED",
+          };
+
+          return {
+            ...gen,
+            status: statusMap[progress.status] || gen.status,
+            errorMessage:
+              progress.status === "failed"
+                ? progress.message || "Generation failed"
+                : gen.errorMessage,
+          };
+        }
+        return gen;
+      });
+    }
+
+    return dbGenerations;
+  }, [board?.generations, progress]);
+
+  // Handle board error
+  if (boardError) {
+    console.error("[BoardPage] Board error:", boardError);
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-lg">
+          <h2 className="text-red-800 text-xl font-semibold mb-2">
+            Error Loading Board
+          </h2>
+          <p className="text-red-600">{boardError.message}</p>
+        </div>
+      </div>
+    );
+  }
+  if (generatorsError) {
+    console.error("[BoardPage] Generators error:", generatorsError);
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-lg">
+          <h2 className="text-red-800 text-xl font-semibold mb-2">
+            Error Loading Generators
+          </h2>
+          <p className="text-red-600">{generatorsError.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 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>
+      </div>
+    );
+  }
+
+  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
+  );
+
+  const handleGenerationSubmit = async (params: {
+    generatorName: string;
+    prompt: string;
+    artifacts: Map<string, unknown>;
+    settings: Record<string, unknown>;
+  }) => {
+    try {
+      // Find the selected generator to validate it exists
+      const selectedGenerator = generators.find(
+        (g) => g.name === params.generatorName
+      );
+
+      if (!selectedGenerator) {
+        throw new Error(`Generator ${params.generatorName} not found`);
+      }
+
+      // Build inputs object with prompt and artifact references
+      const inputs: Record<string, unknown> = {
+        prompt: params.prompt,
+      };
+
+      // Add artifact inputs (convert artifact objects to their IDs)
+      params.artifacts.forEach((artifact, slotName) => {
+        if (artifact && typeof artifact === "object" && "id" in artifact) {
+          inputs[slotName] = artifact.id;
+        } else if (artifact) {
+          inputs[slotName] = artifact;
+        }
+      });
+
+      // Submit generation using the hook
+      // Provider is typically encoded in the generator name or use "default"
+      await submit({
+        boardId,
+        model: params.generatorName,
+        artifactType: selectedGenerator.artifactType,
+        inputs: inputs as { prompt: string; [key: string]: unknown },
+        options: params.settings,
+      });
+    } catch (error) {
+      console.error("Failed to create generation:", error);
+    }
+  };
+
+  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}
+            />
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}