Claude/client workflow save k qr90

src/app/api/generate/providers/gemini.ts

@@ -18,6 +18,25 @@ export const MODEL_MAP: Record<ModelType, string> = {
   "nano-banana-2": "gemini-3.1-flash-image-preview",
 };
 
+/**
+ * Convert a base64 data URL image to Gemini inlineData format
+ */
+function imageToInlineData(
+  requestId: string,
+  image: string,
+  label: string
+): { inlineData: { mimeType: string; data: string } } {
+  if (image.includes("base64,")) {
+    const [header, data] = image.split("base64,");
+    const mimeMatch = header.match(/data:([^;]+)/);
+    const mimeType = mimeMatch ? mimeMatch[1] : "image/png";
+    console.log(`[API:${requestId}]   Image ${label}: ${mimeType}, ${(data.length / 1024).toFixed(1)}KB`);
+    return { inlineData: { mimeType, data } };
+  }
+  console.log(`[API:${requestId}]   Image ${label}: raw, ${(image.length / 1024).toFixed(1)}KB`);
+  return { inlineData: { mimeType: "image/png", data: image } };
+}
+
 /**
  * Generate image using Gemini API (legacy/default path)
  */
@@ -30,37 +49,34 @@ export async function generateWithGemini(
   aspectRatio?: string,
   resolution?: string,
   useGoogleSearch?: boolean,
-  useImageSearch?: boolean
+  useImageSearch?: boolean,
+  multimodalParts?: Array<{ type: string; value: string; name?: string }>
 ): Promise<NextResponse<GenerateResponse>> {
-  console.log(`[API:${requestId}] Gemini generation - Model: ${model}, Images: ${images?.length || 0}, Prompt: ${prompt?.length || 0} chars`);
-
-  // Extract base64 data and MIME types from data URLs
-  const imageData = (images || []).map((image, idx) => {
-    if (image.includes("base64,")) {
-      const [header, data] = image.split("base64,");
-      // Extract MIME type from header (e.g., "data:image/png;" -> "image/png")
-      const mimeMatch = header.match(/data:([^;]+)/);
-      const mimeType = mimeMatch ? mimeMatch[1] : "image/png";
-      console.log(`[API:${requestId}]   Image ${idx + 1}: ${mimeType}, ${(data.length / 1024).toFixed(1)}KB`);
-      return { data, mimeType };
-    }
-    console.log(`[API:${requestId}]   Image ${idx + 1}: raw, ${(image.length / 1024).toFixed(1)}KB`);
-    return { data: image, mimeType: "image/png" };
-  });
+  console.log(`[API:${requestId}] Gemini generation - Model: ${model}, Images: ${images?.length || 0}, Prompt: ${prompt?.length || 0} chars, Parts: ${multimodalParts?.length || 0}`);
 
   // Initialize Gemini client
   const ai = new GoogleGenAI({ apiKey });
 
-  // Build request parts array with prompt and all images
-  const requestParts: Array<{ text: string } | { inlineData: { mimeType: string; data: string } }> = [
-    { text: prompt },
-    ...imageData.map(({ data, mimeType }) => ({
-      inlineData: {
-        mimeType,
-        data,
-      },
-    })),
-  ];
+  // Build request parts array — use multimodal parts if provided, otherwise legacy prompt+images
+  type GeminiPart = { text: string } | { inlineData: { mimeType: string; data: string } };
+  let requestParts: GeminiPart[];
+
+  if (multimodalParts && multimodalParts.length > 0) {
+    // Build interleaved multimodal request from image variable parts
+    requestParts = multimodalParts.map((part) => {
+      if (part.type === "image" && part.value) {
+        return imageToInlineData(requestId, part.value, part.name || "var");
+      }
+      return { text: part.value };
+    });
+  } else {
+    // Legacy: prompt text + all images appended
+    const imageData = (images || []).map((image, idx) => imageToInlineData(requestId, image, `${idx + 1}`));
+    requestParts = [
+      { text: prompt },
+      ...imageData,
+    ];
+  }
 
   // Build config object based on model capabilities
   const config: Record<string, unknown> = {

src/app/api/generate/route.ts

@@ -100,7 +100,8 @@ export async function POST(request: NextRequest) {
       parameters,
       dynamicInputs,
       mediaType,
-    } = body;
+      parts,
+    } = body as MultiProviderGenerateRequest & { parts?: Array<{ type: string; value: string; name?: string }> };
 
     // Prompt is required unless:
     // - Provided via dynamicInputs
@@ -524,7 +525,8 @@ export async function POST(request: NextRequest) {
       aspectRatio,
       resolution,
       useGoogleSearch,
-      useImageSearch
+      useImageSearch,
+      parts as Array<{ type: string; value: string; name?: string }> | undefined
     );
   } catch (error) {
     // Extract error information

src/app/api/llm/route.ts

@@ -5,6 +5,15 @@ import { logger } from "@/utils/logger";
 
 export const maxDuration = 60; // 1 minute timeout
 
+// Convert a base64 data URL image to Gemini inlineData format
+function imageDataToInlinePart(img: string): { inlineData: { mimeType: string; data: string } } {
+  const matches = img.match(/^data:(.+?);base64,(.+)$/);
+  if (matches) {
+    return { inlineData: { mimeType: matches[1], data: matches[2] } };
+  }
+  return { inlineData: { mimeType: "image/png", data: img } };
+}
+
 // Generate a unique request ID for tracking
 function generateRequestId(): string {
   return `llm-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
@@ -36,7 +45,8 @@ async function generateWithGoogle(
   maxTokens: number,
   images?: string[],
   requestId?: string,
-  userApiKey?: string | null
+  userApiKey?: string | null,
+  parts?: Array<{ type: string; value: string; name?: string }>
 ): Promise<string> {
   // User-provided key takes precedence over env variable
   const apiKey = userApiKey || process.env.GEMINI_API_KEY;
@@ -55,31 +65,24 @@ async function generateWithGoogle(
     maxTokens,
     imageCount: images?.length || 0,
     promptLength: prompt.length,
+    partsCount: parts?.length || 0,
   });
 
-  // Build multimodal content if images are provided
-  let contents: string | Array<{ inlineData: { mimeType: string; data: string } } | { text: string }>;
-  if (images && images.length > 0) {
+  // Build multimodal content
+  type GeminiPart = { inlineData: { mimeType: string; data: string } } | { text: string };
+  let contents: string | GeminiPart[];
+
+  if (parts && parts.length > 0) {
+    // Interleaved multimodal parts from image variable resolution
+    contents = parts.map((part): GeminiPart => {
+      if (part.type === "image" && part.value) {
+        return imageDataToInlinePart(part.value);
+      }
+      return { text: part.value };
+    });
+  } else if (images && images.length > 0) {
     contents = [
-      ...images.map((img) => {
-        // Extract base64 data and mime type from data URL
-        const matches = img.match(/^data:(.+?);base64,(.+)$/);
-        if (matches) {
-          return {
-            inlineData: {
-              mimeType: matches[1],
-              data: matches[2],
-            },
-          };
-        }
-        // Fallback: assume PNG if no data URL prefix
-        return {
-          inlineData: {
-            mimeType: "image/png",
-            data: img,
-          },
-        };
-      }),
+      ...images.map((img) => imageDataToInlinePart(img)),
       { text: prompt },
     ];
   } else {
@@ -298,14 +301,15 @@ export async function POST(request: NextRequest) {
     const openaiApiKey = request.headers.get("X-OpenAI-API-Key");
     const anthropicApiKey = request.headers.get("X-Anthropic-API-Key");
 
-    const body: LLMGenerateRequest = await request.json();
+    const body = await request.json() as LLMGenerateRequest & { parts?: Array<{ type: string; value: string; name?: string }> };
     const {
       prompt,
       images,
       provider,
       model,
       temperature = 0.7,
-      maxTokens = 1024
+      maxTokens = 1024,
+      parts,
     } = body;
 
     logger.info('api.llm', 'LLM generation request received', {
@@ -330,7 +334,7 @@ export async function POST(request: NextRequest) {
     let text: string;
 
     if (provider === "google") {
-      text = await generateWithGoogle(prompt, model, temperature, maxTokens, images, requestId, geminiApiKey);
+      text = await generateWithGoogle(prompt, model, temperature, maxTokens, images, requestId, geminiApiKey, parts);
     } else if (provider === "openai") {
       text = await generateWithOpenAI(prompt, model, temperature, maxTokens, images, requestId, openaiApiKey);
     } else if (provider === "anthropic") {

src/components/ConnectionDropMenu.tsx

@@ -109,6 +109,15 @@ const IMAGE_TARGET_OPTIONS: MenuOption[] = [
       </svg>
     ),
   },
+  {
+    type: "promptConstructor",
+    label: "Prompt Constructor",
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
+      </svg>
+    ),
+  },
 ];
 
 const TEXT_TARGET_OPTIONS: MenuOption[] = [

src/components/Header.tsx

@@ -68,6 +68,7 @@ export function Header() {
     isSaving,
     setWorkflowMetadata,
     saveToFile,
+    saveWorkflow,
     loadWorkflow,
     previousWorkflowSnapshot,
     revertToSnapshot,
@@ -83,6 +84,7 @@ export function Header() {
     isSaving: state.isSaving,
     setWorkflowMetadata: state.setWorkflowMetadata,
     saveToFile: state.saveToFile,
+    saveWorkflow: state.saveWorkflow,
     loadWorkflow: state.loadWorkflow,
     previousWorkflowSnapshot: state.previousWorkflowSnapshot,
     revertToSnapshot: state.revertToSnapshot,
@@ -94,6 +96,7 @@ export function Header() {
   const [showProjectModal, setShowProjectModal] = useState(false);
   const [projectModalMode, setProjectModalMode] = useState<"new" | "settings">("new");
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const uploadInputRef = useRef<HTMLInputElement>(null);
 
   const isProjectConfigured = !!workflowName;
   const canSave = !!(workflowId && workflowName && saveDirectoryPath);
@@ -119,6 +122,35 @@ export function Header() {
     fileInputRef.current?.click();
   };
 
+  const handleDownloadWorkflow = () => {
+    saveWorkflow(workflowName || undefined);
+  };
+
+  const handleUploadWorkflow = () => {
+    uploadInputRef.current?.click();
+  };
+
+  const handleUploadFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (event) => {
+      try {
+        const workflow = JSON.parse(event.target?.result as string) as WorkflowFile;
+        if (workflow.version && workflow.nodes && workflow.edges) {
+          await loadWorkflow(workflow);
+        } else {
+          alert("Invalid workflow file format");
+        }
+      } catch {
+        alert("Failed to parse workflow file");
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -189,6 +221,49 @@ export function Header() {
     }
   }, [revertToSnapshot]);
 
+  const clientWorkflowButtons = (
+    <div className="flex items-center gap-0.5 ml-1 pl-1 border-l border-neutral-700/50">
+      <button
+        onClick={handleDownloadWorkflow}
+        className="p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded transition-colors"
+        title="Download workflow"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+          />
+        </svg>
+      </button>
+      <button
+        onClick={handleUploadWorkflow}
+        className="p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded transition-colors"
+        title="Upload workflow"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+
   const settingsButtons = (
     <div className="flex items-center gap-0.5 ml-1 pl-1 border-l border-neutral-700/50">
       <button
@@ -233,6 +308,13 @@ export function Header() {
         onChange={handleFileChange}
         className="hidden"
       />
+      <input
+        ref={uploadInputRef}
+        type="file"
+        accept=".json"
+        onChange={handleUploadFileChange}
+        className="hidden"
+      />
       <header className="h-11 bg-neutral-900 border-b border-neutral-800 flex items-center justify-between px-4 shrink-0">
         <div className="flex items-center gap-2">
           <button
@@ -321,6 +403,7 @@ export function Header() {
                 </div>
 
                 {settingsButtons}
+                {clientWorkflowButtons}
               </>
             ) : (
               <>
@@ -370,6 +453,7 @@ export function Header() {
                 </div>
 
                 {settingsButtons}
+                {clientWorkflowButtons}
               </>
             )}
           </div>

src/components/WorkflowCanvas.tsx

@@ -144,7 +144,7 @@ const getNodeHandles = (nodeType: string): { inputs: string[]; outputs: string[]
     case "array":
       return { inputs: ["text"], outputs: ["text"] };
     case "promptConstructor":
-      return { inputs: ["text"], outputs: ["text"] };
+      return { inputs: ["text", "image"], outputs: ["text"] };
     case "nanoBanana":
       return { inputs: ["image", "text"], outputs: ["image"] };
     case "generateVideo":

src/components/__tests__/ConnectionDropMenu.test.tsx

@@ -218,7 +218,7 @@ describe("ConnectionDropMenu", () => {
       fireEvent.keyDown(document, { key: "ArrowUp" });
 
       // Last item should now be highlighted
-      const lastButton = screen.getByText("Switch").closest("button");
+      const lastButton = screen.getByText("Prompt Constructor").closest("button");
       expect(lastButton).toHaveClass("bg-neutral-700");
     });