@weirdfingers/baseboards 0.6.2 → 0.7.0

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

@@ -2,10 +2,17 @@
 
 import React from "react";
 import { useParams } from "next/navigation";
-import { useBoard, useGenerators, useGeneration, GeneratorSelectionProvider } from "@weirdfingers/boards";
+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();
@@ -16,8 +23,16 @@ export default function BoardPage() {
     loading: boardLoading,
     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,
@@ -26,13 +41,72 @@ export default function BoardPage() {
   } = useGenerators();
 
   // Use generation hook for submitting generations and real-time progress
-  const {
-    submit,
-    isGenerating,
-    progress,
-    error: generationError,
-    result,
-  } = useGeneration();
+  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
@@ -84,11 +158,11 @@ export default function BoardPage() {
     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">
+        <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-red-600">{boardError.message}</p>
+          <p className="text-destructive/90">{boardError.message}</p>
         </div>
       </div>
     );
@@ -97,11 +171,11 @@ export default function BoardPage() {
     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">
+        <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-red-600">{generatorsError.message}</p>
+          <p className="text-destructive/90">{generatorsError.message}</p>
         </div>
       </div>
     );
@@ -111,7 +185,7 @@ export default function BoardPage() {
   if (boardLoading || !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 className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
       </div>
     );
   }
@@ -167,14 +241,71 @@ export default function BoardPage() {
 
   return (
     <GeneratorSelectionProvider>
-      <main className="min-h-screen bg-gray-50">
+      <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>
-              <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 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
@@ -192,18 +323,19 @@ export default function BoardPage() {
               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-white rounded-lg shadow-lg p-6 text-center">
-                <p className="text-gray-500">Loading generators...</p>
+              <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-white rounded-lg shadow-lg p-6 text-center">
-                <p className="text-gray-500">No generators available</p>
+              <div className="bg-background rounded-lg shadow-lg p-6 text-center">
+                <p className="text-muted-foreground">No generators available</p>
               </div>
             ) : (
               <GenerationInput

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

@@ -23,6 +23,7 @@
   --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);
@@ -58,6 +59,7 @@
   --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);
@@ -92,6 +94,7 @@
   --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);

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

@@ -2,6 +2,8 @@ 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,
@@ -9,12 +11,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
-        <Providers>
-          <Header />
-          {children}
-        </Providers>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Providers>
+            <Header />
+            {children}
+            <Toaster />
+          </Providers>
+        </ThemeProvider>
       </body>
     </html>
   );

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

@@ -110,7 +110,7 @@ export function ArtifactInputSlots({
           <div key={slot.name} className="relative">
             {selectedArtifact ? (
               // Show selected artifact
-              <div className="border-2 border-yellow-500 rounded-lg p-4 bg-yellow-50">
+              <div className="border-2 border-primary rounded-lg p-4 bg-primary/5">
                 <div className="flex items-start gap-3">
                   <div className="flex-shrink-0">
                     {selectedArtifact.thumbnailUrl ||
@@ -127,7 +127,7 @@ export function ArtifactInputSlots({
                         height={64}
                       />
                     ) : (
-                      <div className="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
+                      <div className="w-16 h-16 bg-muted rounded flex items-center justify-center">
                         {getIcon(slot.type)}
                       </div>
                     )}
@@ -139,13 +139,13 @@ export function ArtifactInputSlots({
                         {slot.type} {selectedArtifact.id.substring(0, 7)}
                       </span>
                     </div>
-                    <p className="text-xs text-gray-600 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       {slot.name.replace(/_/g, " ")}
                     </p>
                   </div>
                   <button
                     onClick={() => onSelectArtifact(slot.name, null)}
-                    className="flex-shrink-0 p-1 hover:bg-yellow-200 rounded"
+                    className="flex-shrink-0 p-1 hover:bg-primary/10 rounded"
                   >
                     <X className="w-4 h-4" />
                   </button>
@@ -156,8 +156,8 @@ export function ArtifactInputSlots({
               <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"
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:border-border/80"
                 }`}
                 onDragOver={(e) => handleDragOver(e, slot.type, slot.name)}
                 onDragLeave={handleDragLeave}
@@ -165,7 +165,7 @@ export function ArtifactInputSlots({
               >
                 <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">
+                  <p className="text-sm font-medium text-foreground mb-1">
                     {dragOverSlot === slot.name
                       ? `Drop ${slot.type} here`
                       : `Add a ${slot.type}`}
@@ -180,7 +180,7 @@ export function ArtifactInputSlots({
                           onSelectArtifact(slot.name, artifact);
                         }
                       }}
-                      className="mt-2 px-3 py-1.5 text-sm border border-gray-300 rounded bg-white"
+                      className="mt-2 px-3 py-1.5 text-sm border border-border rounded bg-background"
                     >
                       <option value="">Select from board...</option>
                       {matchingArtifacts.map((artifact) => (
@@ -191,7 +191,7 @@ export function ArtifactInputSlots({
                       ))}
                     </select>
                   ) : (
-                    <p className="text-xs text-gray-500 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       No {slot.type} artifacts in this board yet.
                     </p>
                   )}

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

@@ -13,6 +13,7 @@ import {
   Pause,
   RotateCcw,
   GitBranch,
+  Trash2,
 } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -35,6 +36,7 @@ interface ArtifactPreviewProps {
   canAddToSlot?: boolean;
   onDownload?: () => void;
   onPreview?: () => void;
+  onDelete?: () => void;
   artifactId?: string;
   prompt?: string | null;
 }
@@ -50,6 +52,7 @@ export function ArtifactPreview({
   canAddToSlot = false,
   onDownload,
   onPreview,
+  onDelete,
   artifactId,
   prompt,
 }: ArtifactPreviewProps) {
@@ -112,11 +115,11 @@ export function ArtifactPreview({
     if (isFailed) {
       return (
         <div className="flex flex-col items-center justify-center h-full p-4 text-center">
-          <div className="text-red-500 mb-2">
+          <div className="text-destructive mb-2">
             {status === "CANCELLED" ? "Cancelled" : "Failed"}
           </div>
           {errorMessage && (
-            <p className="text-sm text-gray-500">{errorMessage}</p>
+            <p className="text-sm text-muted-foreground">{errorMessage}</p>
           )}
         </div>
       );
@@ -125,7 +128,7 @@ export function ArtifactPreview({
     if (isLoading) {
       return (
         <div className="flex items-center justify-center h-full">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
         </div>
       );
     }
@@ -144,8 +147,8 @@ export function ArtifactPreview({
           );
         }
         return (
-          <div className="flex items-center justify-center h-full bg-gray-100">
-            <ImageIcon className="w-12 h-12 text-gray-400" />
+          <div className="flex items-center justify-center h-full bg-muted/50">
+            <ImageIcon className="w-12 h-12 text-muted-foreground" />
           </div>
         );
 
@@ -198,8 +201,8 @@ export function ArtifactPreview({
           );
         }
         return (
-          <div className="flex items-center justify-center h-full bg-gray-100">
-            <FileVideo className="w-12 h-12 text-gray-400" />
+          <div className="flex items-center justify-center h-full bg-muted/50">
+            <FileVideo className="w-12 h-12 text-muted-foreground" />
           </div>
         );
 
@@ -277,8 +280,8 @@ export function ArtifactPreview({
 
       default:
         return (
-          <div className="flex items-center justify-center h-full bg-gray-100">
-            <span className="text-gray-400">Unknown type</span>
+          <div className="flex items-center justify-center h-full bg-muted/50">
+            <span className="text-muted-foreground">Unknown type</span>
           </div>
         );
     }
@@ -286,7 +289,7 @@ export function ArtifactPreview({
 
   return (
     <div
-      className="relative aspect-square rounded-lg overflow-hidden border border-gray-200 group"
+      className="relative aspect-square rounded-lg overflow-hidden border border-border group"
       draggable={isComplete && !!artifactId && canAddToSlot}
       onDragStart={(e) => {
         if (isComplete && artifactId) {
@@ -310,9 +313,8 @@ export function ArtifactPreview({
         {renderContent()}
       </div>
 
-      {/* Bottom overlay with controls - show for all artifacts when not loading/failed */}
-      {!isLoading && !isFailed && (
-        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity">
+      {/* Bottom overlay with controls - show for all artifacts */}
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity">
           <div className="flex items-center justify-between gap-2">
             {/* Drag handle - only for completed artifacts */}
             {isComplete && (
@@ -353,7 +355,7 @@ export function ArtifactPreview({
               )}
 
               {/* More options menu - show for all artifacts */}
-              {(onPreview || onDownload || artifactId) && (
+              {(onPreview || onDownload || artifactId || onDelete) && (
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <button
@@ -377,10 +379,10 @@ export function ArtifactPreview({
                         View Lineage
                       </DropdownMenuItem>
                     )}
-                    {artifactId && (onPreview || onDownload) && (
+                    {artifactId && isComplete && (onPreview || onDownload) && (
                       <DropdownMenuSeparator />
                     )}
-                    {onPreview && (
+                    {isComplete && onPreview && (
                       <DropdownMenuItem
                         onClick={(e) => {
                           e.stopPropagation();
@@ -392,7 +394,7 @@ export function ArtifactPreview({
                         Preview
                       </DropdownMenuItem>
                     )}
-                    {onDownload && (
+                    {isComplete && onDownload && (
                       <DropdownMenuItem
                         onClick={(e) => {
                           e.stopPropagation();
@@ -404,13 +406,27 @@ export function ArtifactPreview({
                         Download
                       </DropdownMenuItem>
                     )}
+                    {onDelete && (
+                      <>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete();
+                          }}
+                          className="cursor-pointer text-destructive focus:text-destructive"
+                        >
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          Delete
+                        </DropdownMenuItem>
+                      </>
+                    )}
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
             </div>
           </div>
         </div>
-      )}
     </div>
   );
 }