feat(recipe): add measurement Recipe agent, streaming, and Canvas/Recipe tabs

app/api/recipe/stream/route.ts

@@ -0,0 +1,171 @@
+import { NextRequest } from "next/server";
+import { z } from "zod";
+import type { RecipeSSEEvent } from "@/types/recipe-events";
+import { WORKFLOW_TIMEOUT_MS } from "@/lib/constants";
+import { createLogger } from "@/lib/logger";
+import { categorizeError, extractErrorMessage } from "@/lib/workflow-errors";
+import { mastra } from "@/mastra";
+import { RecipeMetricContextSchema, RecipeLocaleSchema, RecipeSchema, type Recipe } from "@/types";
+
+// Recipe generation involves a single LLM call but with a large input.
+// Mirror the workflow stream's serverless timeout.
+export const maxDuration = 300;
+
+const logger = createLogger({ module: "api:recipe-stream" });
+
+const RequestSchema = z.object({
+  logicModelTitle: z.string().min(1).max(300),
+  metrics: z.array(RecipeMetricContextSchema).min(1).max(30),
+  locale: RecipeLocaleSchema.default("en"),
+});
+
+function formatSSE(event: RecipeSSEEvent): string {
+  return `data: ${JSON.stringify(event)}\n\n`;
+}
+
+export async function POST(request: NextRequest) {
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const parsed = RequestSchema.safeParse(body);
+  if (!parsed.success) {
+    return new Response(
+      JSON.stringify({ error: "Invalid request", details: parsed.error.flatten() }),
+      { status: 400, headers: { "Content-Type": "application/json" } },
+    );
+  }
+
+  const workflowInput = parsed.data;
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const encoder = new TextEncoder();
+      const send = (event: RecipeSSEEvent) => {
+        try {
+          controller.enqueue(encoder.encode(formatSSE(event)));
+        } catch {
+          // controller may already be closed
+        }
+      };
+
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+      try {
+        const workflow = mastra.getWorkflow("recipeWorkflow");
+        const run = await workflow.createRun();
+        const output = await run.stream({ inputData: workflowInput });
+
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          timeoutId = setTimeout(() => reject(new Error("Recipe timeout")), WORKFLOW_TIMEOUT_MS);
+        });
+
+        let lastFailedStepId: string | undefined;
+        let lastFailedStepError: string | undefined;
+
+        const processStream = async () => {
+          const reader = output.fullStream.getReader();
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+
+              const event = value;
+
+              switch (event.type) {
+                case "workflow-step-start":
+                  send({ type: "step-start", stepId: event.payload.id });
+                  break;
+
+                case "workflow-step-result":
+                  if (event.payload.status === "failed") {
+                    lastFailedStepId = event.payload.id;
+                    const errorMsg = extractErrorMessage(
+                      event.payload as unknown as Record<string, unknown>,
+                    );
+                    lastFailedStepError = errorMsg;
+                    const { category } = categorizeError(errorMsg);
+                    send({
+                      type: "step-error",
+                      stepId: event.payload.id,
+                      error: errorMsg,
+                      errorCategory: category,
+                    });
+                  } else if (event.payload.status === "success") {
+                    send({ type: "step-finish", stepId: event.payload.id });
+                  }
+                  break;
+
+                case "workflow-finish": {
+                  if (event.payload.workflowStatus === "success") {
+                    try {
+                      const result = await output.result;
+                      if (result.status !== "success") {
+                        throw new Error(`Unexpected workflow result status: ${result.status}`);
+                      }
+                      const recipe: Recipe = RecipeSchema.parse(
+                        (result.result as Record<string, unknown>)?.recipe,
+                      );
+                      send({ type: "recipe-complete", recipe });
+                    } catch (err) {
+                      const message =
+                        err instanceof Error ? err.message : "Failed to parse recipe result";
+                      logger.error({ error: message }, "Recipe result validation failed");
+                      send({
+                        type: "recipe-error",
+                        error: message,
+                        failedStepId: lastFailedStepId,
+                      });
+                    }
+                  } else {
+                    const errorMsg =
+                      lastFailedStepError || `Workflow ${event.payload.workflowStatus}`;
+                    const { category } = categorizeError(errorMsg);
+                    send({
+                      type: "recipe-error",
+                      error: errorMsg,
+                      errorCategory: category,
+                      rawError: lastFailedStepError,
+                      failedStepId: lastFailedStepId,
+                    });
+                  }
+                  break;
+                }
+              }
+            }
+          } finally {
+            reader.releaseLock();
+          }
+        };
+
+        await Promise.race([processStream(), timeoutPromise]);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unknown error";
+        const { category } = categorizeError(message);
+        logger.error({ error: message, category }, "Recipe stream error");
+        send({ type: "recipe-error", error: message, errorCategory: category });
+      } finally {
+        clearTimeout(timeoutId);
+        try {
+          controller.close();
+        } catch {
+          // Already closed
+        }
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+}

components/canvas/ContextActions.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useCallback } from "react";
+import { Download, Loader2, RefreshCw, Sparkles } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { AddLogicSheet } from "./AddLogicSheet";
+import { useCanvasOperations, useCanvasState, useRecipe } from "./context";
+import { GenerateLogicModelDialog } from "./GenerateLogicModelDialog";
+import { collectMetricContexts } from "@/lib/recipe-helpers";
+
+interface ContextActionsProps {
+  activeTab: "canvas" | "recipe";
+}
+
+export function ContextActions({ activeTab }: ContextActionsProps) {
+  const t = useTranslations("recipe");
+  const { nodes, cardMetrics } = useCanvasState();
+  const { addCard, loadGeneratedCanvas } = useCanvasOperations();
+  const recipe = useRecipe();
+
+  const canGenerate = collectMetricContexts(nodes, cardMetrics).length > 0;
+
+  const handleGenerate = useCallback(() => {
+    recipe.triggerGeneration({ nodes, cardMetrics });
+  }, [recipe, nodes, cardMetrics]);
+
+  const handleDownload = useCallback(() => {
+    void recipe.downloadHtml(nodes);
+  }, [recipe, nodes]);
+
+  if (activeTab === "canvas") {
+    return (
+      <div className="flex items-center gap-2">
+        <GenerateLogicModelDialog onGenerate={loadGeneratedCanvas} />
+        <AddLogicSheet onSubmit={addCard} />
+      </div>
+    );
+  }
+
+  if (recipe.phase === "waiting-for-logic-model") {
+    return null;
+  }
+
+  if (recipe.phase === "running") {
+    return (
+      <Button size="sm" variant="outline" disabled className="cursor-not-allowed">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        {t("statusGenerating")}
+      </Button>
+    );
+  }
+
+  if (recipe.phase === "success" && recipe.recipe) {
+    return (
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleGenerate}
+          disabled={!canGenerate}
+          className="cursor-pointer"
+        >
+          <RefreshCw className="mr-2 h-4 w-4" />
+          {t("regenerate")}
+        </Button>
+        <Button
+          size="sm"
+          onClick={handleDownload}
+          disabled={recipe.downloadingHtml}
+          className="cursor-pointer"
+        >
+          {recipe.downloadingHtml ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Download className="mr-2 h-4 w-4" />
+          )}
+          {t("downloadHtml")}
+        </Button>
+      </div>
+    );
+  }
+
+  if (recipe.phase === "error") {
+    return (
+      <Button size="sm" onClick={handleGenerate} disabled={!canGenerate} className="cursor-pointer">
+        <RefreshCw className="mr-2 h-4 w-4" />
+        {t("retry")}
+      </Button>
+    );
+  }
+
+  if (canGenerate) {
+    return (
+      <Button size="sm" onClick={handleGenerate} className="cursor-pointer">
+        <Sparkles className="mr-2 h-4 w-4" />
+        {t("generateNow")}
+      </Button>
+    );
+  }
+
+  return null;
+}

components/canvas/GenerateLogicModelDialog.tsx

@@ -54,6 +54,7 @@ const generateLogicModelSchema = z
     file: z.instanceof(File).nullable(),
     enableExternalSearch: z.boolean(),
     enableMetrics: z.boolean(),
+    enableRecipe: z.boolean(),
   })
   .superRefine((data, ctx) => {
     if (data.mode === "goal") {
@@ -100,6 +101,7 @@ interface GenerateLogicModelDialogProps {
     cards: Card[];
     arrows: Arrow[];
     cardMetrics: Record<string, Metric[]>;
+    enableRecipe: boolean;
   }) => void;
 }
 
@@ -227,11 +229,21 @@ export function GenerateLogicModelDialog({ onGenerate }: GenerateLogicModelDialo
       file: null,
       enableExternalSearch: false,
       enableMetrics: false,
+      enableRecipe: false,
     },
   });
 
   const mode = form.watch("mode");
   const selectedFile = form.watch("file");
+  const enableMetricsValue = form.watch("enableMetrics");
+
+  // Recipe generation requires metrics — if the user turns metrics off, force
+  // enableRecipe off as well so the submit payload stays consistent.
+  useEffect(() => {
+    if (!enableMetricsValue) {
+      form.setValue("enableRecipe", false);
+    }
+  }, [enableMetricsValue, form]);
 
   // Track the last processed event index to avoid re-processing
   const processedEventCountRef = useRef(0);
@@ -267,6 +279,7 @@ export function GenerateLogicModelDialog({ onGenerate }: GenerateLogicModelDialo
         cards: canvasData.cards,
         arrows: canvasData.arrows,
         cardMetrics: canvasData.cardMetrics,
+        enableRecipe: form.getValues("enableRecipe"),
       });
 
       // Auto-close after brief delay
@@ -560,6 +573,35 @@ export function GenerateLogicModelDialog({ onGenerate }: GenerateLogicModelDialo
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="enableRecipe"
+                  render={({ field }) => {
+                    const recipeDisabled = isRunning || !enableMetricsValue;
+                    return (
+                      <FormItem className="flex items-center justify-between">
+                        <div className="flex items-center gap-1.5">
+                          <FormLabel className="text-sm font-normal">{t("recipeLabel")}</FormLabel>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Info className="text-muted-foreground h-4 w-4 cursor-help" />
+                            </TooltipTrigger>
+                            <TooltipContent side="top" className="max-w-[260px]">
+                              {enableMetricsValue ? t("recipeTooltip") : t("recipeMetricsRequired")}
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            disabled={recipeDisabled}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    );
+                  }}
+                />
               </CollapsibleContent>
             </Collapsible>