Build workflows from a plain-English description

apps/dashboard/src/components/workflow/DescribeWorkflow.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { Loader2, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Deployment } from "@/hooks/useReadyDeployments";
+import { INFERENCE_URL } from "@/lib/api";
+import { getToken } from "@/lib/tokenStore";
+import { generateWorkflow, type PlanSource } from "@/lib/workflow/generate";
+import { NODE_KINDS } from "@/lib/workflow/nodeKinds";
+import type { Workflow } from "@/lib/workflow/types";
+import { cn } from "@/lib/utils";
+
+const inputClass =
+  "w-full rounded-md border bg-background px-2 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ember-500";
+
+// The planner call goes through the LLM node itself so it shares the sandbox auth and reasoning stripping.
+function complete(model: string) {
+  return async (system: string, user: string) => {
+    const out = await NODE_KINDS.llm.run(
+      { type: "text", text: user },
+      { id: "planner", kind: "llm", position: { x: 0, y: 0 }, config: { model, systemPrompt: system } },
+      { baseUrl: INFERENCE_URL, token: getToken(), fetch: window.fetch.bind(window), audioInputs: {} },
+    );
+    return out.type === "text" ? out.text : "";
+  };
+}
+
+export function DescribeWorkflow({
+  deployments,
+  onGenerated,
+}: {
+  deployments: Deployment[];
+  onGenerated: (workflow: Workflow) => void;
+}) {
+  const models = deployments.filter((d) => d.model_type === "inference" && d.modelName !== "-").map((d) => d.modelName);
+  const [description, setDescription] = useState("");
+  const [picked, setPicked] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [source, setSource] = useState<PlanSource | null>(null);
+  const model = models.includes(picked) ? picked : models[0];
+
+  const submit = async () => {
+    if (!description.trim() || busy) return;
+    setBusy(true);
+    try {
+      const result = await generateWorkflow(description, model, model ? complete(model) : async () => "");
+      setSource(result.source);
+      onGenerated(result.workflow);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <section className="space-y-2">
+      <h3 className="text-xs font-medium uppercase text-muted-foreground">Describe a workflow</h3>
+      <textarea
+        rows={3}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void submit();
+        }}
+        placeholder="A voice assistant that answers questions and talks back"
+        aria-label="Describe a workflow"
+        className={cn(inputClass, "resize-y")}
+      />
+      <select value={model ?? ""} onChange={(e) => setPicked(e.target.value)} aria-label="Planner model" className={inputClass}>
+        {models.length === 0 && <option value="">No inference deployments</option>}
+        {models.map((m) => (
+          <option key={m} value={m}>
+            {m}
+          </option>
+        ))}
+      </select>
+      <Button size="sm" className="w-full" onClick={() => void submit()} disabled={busy || !description.trim()}>
+        {busy ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" /> : <Sparkles className="mr-1.5 h-4 w-4" />}
+        Generate
+      </Button>
+      {source && (
+        <p
+          className="line-clamp-3 text-[11px] text-muted-foreground"
+          data-testid="plan-source"
+          title={source.kind === "fallback" ? source.reason : undefined}
+        >
+          {source.kind === "model" ? (
+            <>
+              Generated by <span className="font-mono text-foreground">{source.model}</span>
+            </>
+          ) : (
+            <>
+              <span className="text-foreground">Fallback planner</span>: {source.reason}
+            </>
+          )}
+        </p>
+      )}
+    </section>
+  );
+}

apps/dashboard/src/components/workflow/WorkflowNodeCard.test.tsx

@@ -20,6 +20,7 @@ function canvas(setAudio: CanvasContextValue["setAudio"]): CanvasContextValue {
   return {
     deployments: [], runs: {}, history: {}, audioInputs: {},
     setConfig: () => {}, setAudio, removeNode: () => {},
+    readiness: {}, deploy: () => {},
   };
 }
 

apps/dashboard/src/components/workflow/WorkflowNodeCard.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-import { CheckCircle2, Loader2, Mic, Square, Upload, X, XCircle } from "lucide-react";
+import { CheckCircle2, CloudUpload, Loader2, Mic, Square, Upload, X, XCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { NODE_KINDS, type ConfigField } from "@/lib/workflow/nodeKinds";
+import type { Readiness } from "@/lib/workflow/readiness";
 import { stats } from "@/lib/workflow/stats";
 import type { NodeKind, NodeRun, Payload } from "@/lib/workflow/types";
 import { useCanvas } from "./canvasContext";
@@ -15,8 +16,9 @@ const inputClass =
 
 export function WorkflowNodeCard({ id, data, selected }: NodeProps<FlowNode>) {
   const spec = NODE_KINDS[data.kind];
-  const { runs } = useCanvas();
+  const { runs, readiness } = useCanvas();
   const run = runs[id];
+  const ready = readiness[id];
 
   return (
     <div
@@ -25,11 +27,13 @@ export function WorkflowNodeCard({ id, data, selected }: NodeProps<FlowNode>) {
         selected && "ring-2 ring-ember-500",
         run?.status === "running" && "border-ember-500",
         run?.status === "error" && "border-red-500",
+        !run && ready && ready.state !== "ready" && ready.state !== "selectModel" && "border-amber-500/70",
       )}
     >
       {spec.input && <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-ember-500" />}
       <NodeHeader id={id} label={spec.label} run={run} ports={`${spec.input ?? "-"} -> ${spec.output ?? "-"}`} />
       <LatencyStats nodeId={id} />
+      {ready && <ReadinessBanner nodeId={id} readiness={ready} />}
       <div className="space-y-2 p-3">
         {data.kind === "audioInput" && <AudioSource nodeId={id} />}
         {spec.fields.map((field) => (
@@ -81,6 +85,39 @@ function Elapsed({ run }: { run: NodeRun }) {
   );
 }
 
+function ReadinessBanner({ nodeId, readiness }: { nodeId: string; readiness: Readiness }) {
+  const { deploy } = useCanvas();
+  if (readiness.state === "ready" || readiness.state === "selectModel" || readiness.state === "deployed") return null;
+  const { recommended } = readiness;
+  return (
+    <div className="space-y-1.5 border-b bg-amber-500/5 px-3 py-2 text-[11px]">
+      <div className="flex items-center justify-between gap-2">
+        <span className="font-medium text-amber-600 dark:text-amber-400">
+          {readiness.state === "needsDeployment" && "Needs deployment"}
+          {readiness.state === "deploying" && "Deploying..."}
+          {readiness.state === "waiting" && "Waiting for compute"}
+        </span>
+        {readiness.state === "deploying" ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-amber-500" />
+        ) : (
+          <button
+            type="button"
+            onClick={() => deploy(nodeId)}
+            className="nodrag flex items-center gap-1 rounded-md bg-ember-600 px-2 py-0.5 font-medium text-white hover:bg-ember-700"
+          >
+            <CloudUpload className="h-3 w-3" />
+            {readiness.state === "waiting" ? "Retry" : "Deploy"}
+          </button>
+        )}
+      </div>
+      <div className="text-muted-foreground">
+        Recommended <span className="font-mono text-foreground">{recommended.modelId}</span> on {recommended.engine}
+      </div>
+      {readiness.state === "waiting" && <p className="break-words text-red-500">{readiness.reason}</p>}
+    </div>
+  );
+}
+
 function LatencyStats({ nodeId }: { nodeId: string }) {
   const { history } = useCanvas();
   const s = stats(history[nodeId] ?? []);

apps/dashboard/src/components/workflow/canvasContext.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from "react";
 import type { Deployment } from "@/hooks/useReadyDeployments";
+import type { Readiness } from "@/lib/workflow/readiness";
 import type { History } from "@/lib/workflow/stats";
 import type { NodeRun } from "@/lib/workflow/types";
 
@@ -8,9 +9,11 @@ export interface CanvasContextValue {
   runs: Record<string, NodeRun>;
   history: History;
   audioInputs: Record<string, Blob>;
+  readiness: Record<string, Readiness>;
   setConfig: (nodeId: string, key: string, value: string) => void;
   setAudio: (nodeId: string, blob: Blob) => void;
   removeNode: (nodeId: string) => void;
+  deploy: (nodeId: string) => void;
 }
 
 export const CanvasContext = createContext<CanvasContextValue | null>(null);

apps/dashboard/src/components/workflow/useNodeDeploys.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { computeApi } from "@/lib/api";
+import { deployRequests, type CatalogModel, type PendingDeploy } from "@/lib/workflow/readiness";
+import { listPools } from "@/services/poolService";
+
+interface PreflightResponse {
+  ready: boolean;
+  checks: Array<{ passed: boolean; message?: string | null; check: string }>;
+}
+
+function errorMessage(err: unknown): string {
+  const body = (err as { response?: { data?: { detail?: unknown; message?: unknown } } }).response?.data;
+  const detail = body?.detail ?? body?.message;
+  if (typeof detail === "string") return detail;
+  return err instanceof Error ? err.message : "Request failed";
+}
+
+// Preflight, then deploy on the first usable pool, the same requests NewDeployment sends for a pool deploy.
+export function useNodeDeploys() {
+  const { user, organizations } = useAuth();
+  const [pending, setPending] = useState<Record<string, PendingDeploy>>({});
+
+  const set = useCallback((nodeId: string, p: PendingDeploy | null) => {
+    setPending((prev) => {
+      const next = { ...prev };
+      if (p) next[nodeId] = p;
+      else delete next[nodeId];
+      return next;
+    });
+  }, []);
+
+  const deploy = async (nodeId: string, entry: CatalogModel) => {
+    const orgId = user?.org_id || organizations?.[0]?.id;
+    if (!orgId) return set(nodeId, { status: "waiting", reason: "organization context missing" });
+    set(nodeId, { status: "deploying", deploymentName: entry.deploymentName });
+    try {
+      const pool = (await listPools(orgId)).find((p) => p.is_active && p.lifecycle_state !== "terminated");
+      if (!pool) return set(nodeId, { status: "waiting", reason: "no active compute pool" });
+      const req = deployRequests(entry, pool.pool_id, { orgId, ownerId: user?.user_id });
+      const { data } = await computeApi.post<PreflightResponse>("/deployment/preflight", req.preflight);
+      if (!data.ready) {
+        const failed = data.checks.filter((c) => !c.passed).map((c) => c.message || c.check);
+        return set(nodeId, { status: "waiting", reason: failed.join("; ") || "preflight failed" });
+      }
+      await computeApi.post("/deployment/deploy", req.deploy);
+    } catch (err) {
+      set(nodeId, { status: "waiting", reason: errorMessage(err) });
+    }
+  };
+
+  const clear = useCallback((nodeId: string) => set(nodeId, null), [set]);
+  const reset = useCallback(() => setPending({}), []);
+  return { pending, deploy, clear, reset };
+}

apps/dashboard/src/hooks/useReadyDeployments.ts

@@ -26,7 +26,8 @@ interface DeploymentResponse {
   }>;
 }
 
-export function useReadyDeployments() {
+// Pass a refetch interval to poll while a deployment is coming up.
+export function useReadyDeployments(refetchInterval: number | false = false) {
   return useQuery<Deployment[]>({
     queryKey: ["sandbox-deployments"],
     queryFn: async () => {
@@ -45,5 +46,6 @@ export function useReadyDeployments() {
         }));
     },
     staleTime: 30000,
+    refetchInterval,
   });
 }

apps/dashboard/src/lib/workflow/__tests__/engine.test.ts

@@ -80,6 +80,13 @@ describe("autofillModels", () => {
     expect(filled.nodes.map((n) => n.config.model ?? null)).toEqual([null, "whisper-small", "llama-3-8b", "kokoro-tts", null]);
   });
 
+  it("leaves a model empty rather than binding a deployment for the other audio direction", () => {
+    const filled = autofillModels(TEMPLATES.bankingVoice.build(), [
+      { id: "k", name: "kokoro-tts", modelName: "kokoro-tts", model_type: "audio_generation", endpointUrl: "", status: "READY" },
+    ]);
+    expect(filled.nodes.map((n) => n.config.model ?? null)).toEqual([null, null, null, "kokoro-tts", null]);
+  });
+
   const audio = (modelName: string) => ({
     id: modelName, name: modelName, modelName, model_type: "audio_generation", endpointUrl: "", status: "READY",
   });
@@ -89,9 +96,9 @@ describe("autofillModels", () => {
     expect(filled.nodes.map((n) => n.config.model ?? null)).toEqual([null, "Speech Recognition", null, "Kokoro", null]);
   });
 
-  it("gives STT and TTS different deployments when no name matches", () => {
+  it("leaves STT and TTS empty when no name matches", () => {
     const filled = autofillModels(TEMPLATES.bankingVoice.build(), [audio("model-a"), audio("model-b")]);
-    expect(filled.nodes.map((n) => n.config.model ?? null)).toEqual([null, "model-a", null, "model-b", null]);
+    expect(filled.nodes.map((n) => n.config.model ?? null)).toEqual([null, null, null, null, null]);
   });
 });