@weirdfingers/baseboards 0.9.6 → 0.9.7

package/templates/web/imageLoader.js

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,5 +0,0 @@
-/// <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

@@ -1,36 +0,0 @@
-/** @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

@@ -1,41 +0,0 @@
-{
-  "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-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@tailwindcss/postcss": "^4.1.13",
-    "@weirdfingers/boards": "^0.9.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.0.0",
-    "graphql": "^16.11.0",
-    "lucide-react": "^0.544.0",
-    "next": "14.2.5",
-    "next-themes": "^0.4.6",
-    "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

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

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

@@ -1,353 +0,0 @@
-"use client";
-
-import React from "react";
-import { useParams } from "next/navigation";
-import {
-  useBoard,
-  useGenerators,
-  useGeneration,
-  GeneratorSelectionProvider,
-} from "@weirdfingers/boards";
-import { GenerationGrid } from "@/components/boards/GenerationGrid";
-import { GenerationInput } from "@/components/boards/GenerationInput";
-import { UploadArtifact } from "@/components/boards/UploadArtifact";
-import { Button } from "@/components/ui/button";
-import { Pencil, Check, X } from "lucide-react";
-
-export default function BoardPage() {
-  const params = useParams();
-  const boardId = params.boardId as string;
-
-  const {
-    board,
-    error: boardError,
-    refresh: refreshBoard,
-    updateBoard,
-  } = useBoard(boardId);
-
-  // State for inline title editing
-  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
-  const [editedTitle, setEditedTitle] = React.useState("");
-  const [titleError, setTitleError] = React.useState<string | null>(null);
-  const [isUpdatingTitle, setIsUpdatingTitle] = React.useState(false);
-  const titleInputRef = React.useRef<HTMLInputElement>(null);
-
-  // Fetch available generators
-  const {
-    generators,
-    loading: generatorsLoading,
-    error: generatorsError,
-  } = useGenerators();
-
-  // Use generation hook for submitting generations and real-time progress
-  const { submit, isGenerating, progress } = useGeneration();
-
-  // Auto-focus input when entering edit mode
-  React.useEffect(() => {
-    if (isEditingTitle && titleInputRef.current) {
-      titleInputRef.current.focus();
-      titleInputRef.current.select();
-    }
-  }, [isEditingTitle]);
-
-  // Handlers for title editing
-  const handleEditTitle = () => {
-    if (board) {
-      setEditedTitle(board.title);
-      setTitleError(null);
-      setIsEditingTitle(true);
-    }
-  };
-
-  const handleCancelEdit = () => {
-    setIsEditingTitle(false);
-    setEditedTitle("");
-    setTitleError(null);
-  };
-
-  const handleSaveTitle = async () => {
-    const trimmedTitle = editedTitle.trim();
-
-    // Validation
-    if (!trimmedTitle) {
-      setTitleError("Title cannot be empty");
-      return;
-    }
-
-    if (trimmedTitle === board?.title) {
-      // No changes, just exit edit mode
-      handleCancelEdit();
-      return;
-    }
-
-    setIsUpdatingTitle(true);
-    setTitleError(null);
-
-    try {
-      await updateBoard({ title: trimmedTitle });
-      setIsEditingTitle(false);
-      setEditedTitle("");
-    } catch (error) {
-      console.error("Failed to update board title:", error);
-      setTitleError(
-        error instanceof Error ? error.message : "Failed to update title"
-      );
-    } finally {
-      setIsUpdatingTitle(false);
-    }
-  };
-
-  const handleTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleSaveTitle();
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      handleCancelEdit();
-    }
-  };
-
-  // 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")
-    ) {
-      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-destructive/10 border border-destructive/50 rounded-lg p-6 max-w-lg">
-          <h2 className="text-destructive text-xl font-semibold mb-2">
-            Error Loading Board
-          </h2>
-          <p className="text-destructive/90">{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-destructive/10 border border-destructive/50 rounded-lg p-6 max-w-lg">
-          <h2 className="text-destructive text-xl font-semibold mb-2">
-            Error Loading Generators
-          </h2>
-          <p className="text-destructive/90">{generatorsError.message}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Handle loading state
-  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>
-      </div>
-    );
-  }
-
-  // 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 (
-    <GeneratorSelectionProvider>
-      <main className="min-h-screen bg-muted/30">
-        <div className="container mx-auto px-4 py-6 max-w-7xl">
-          {/* Header */}
-          <div className="mb-6 flex items-start justify-between">
-            <div className="flex-1">
-              {isEditingTitle ? (
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <input
-                      ref={titleInputRef}
-                      type="text"
-                      value={editedTitle}
-                      onChange={(e) => setEditedTitle(e.target.value)}
-                      onKeyDown={handleTitleKeyDown}
-                      disabled={isUpdatingTitle}
-                      className="text-3xl font-bold text-foreground border-2 border-border rounded px-2 py-1 focus:outline-none focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed flex-1"
-                      placeholder="Enter board title"
-                      aria-label="Edit board title"
-                      aria-invalid={!!titleError}
-                    />
-                    <Button
-                      onClick={handleSaveTitle}
-                      disabled={isUpdatingTitle}
-                      size="icon"
-                      variant="default"
-                      aria-label="Save title"
-                    >
-                      <Check className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      onClick={handleCancelEdit}
-                      disabled={isUpdatingTitle}
-                      size="icon"
-                      variant="outline"
-                      aria-label="Cancel editing"
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
-                  </div>
-                  {titleError && (
-                    <p className="text-sm text-destructive" role="alert">
-                      {titleError}
-                    </p>
-                  )}
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <h1 className="text-3xl font-bold text-foreground">
-                    {board.title}
-                  </h1>
-                  <Button
-                    onClick={handleEditTitle}
-                    size="icon"
-                    variant="ghost"
-                    className="h-8 w-8"
-                    aria-label="Edit board title"
-                  >
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                </div>
-              )}
-              {board.description && !isEditingTitle && (
-                <p className="text-muted-foreground mt-2">
-                  {board.description}
-                </p>
-              )}
-            </div>
-            <UploadArtifact
-              boardId={boardId}
-              onUploadComplete={() => {
-                refreshBoard();
-              }}
-            />
-          </div>
-
-          {/* Generation Grid */}
-          <div className="mb-8">
-            <GenerationGrid
-              generations={generations}
-              boardId={boardId}
-              onGenerationClick={() => {
-                // TODO: Open generation detail modal
-              }}
-              onRemoveSuccess={refreshBoard}
-            />
-          </div>
-
-          {/* Generation Input */}
-          <div id="generation-input" className="sticky bottom-6 z-10">
-            {generatorsLoading ? (
-              <div className="bg-background rounded-lg shadow-lg p-6 text-center">
-                <p className="text-muted-foreground">Loading generators...</p>
-              </div>
-            ) : generators.length === 0 ? (
-              <div className="bg-background rounded-lg shadow-lg p-6 text-center">
-                <p className="text-muted-foreground">No generators available</p>
-              </div>
-            ) : (
-              <GenerationInput
-                generators={generators}
-                availableArtifacts={availableArtifacts}
-                onSubmit={handleGenerationSubmit}
-                isGenerating={isGenerating}
-              />
-            )}
-          </div>
-        </div>
-      </main>
-    </GeneratorSelectionProvider>
-  );
-}

package/templates/web/src/app/globals.css

@@ -1,123 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-success: var(--success);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --success: oklch(0.55 0.15 145);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --success: oklch(0.70 0.15 145);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/templates/web/src/app/layout.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import "./globals.css";
-import { Providers } from "./providers";
-import { Header } from "@/components/header";
-import { Toaster } from "@/components/ui/toaster";
-import { ThemeProvider } from "@/components/theme-provider";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <Providers>
-            <Header />
-            {children}
-            <Toaster />
-          </Providers>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}