feat: enhance agent execution flow with multi-execution view and improved error handling

- Added multi-execution view to display multiple execution statuses.
- Improved error handling in agent triggering to surface failures.
- Updated execution view to support live updates via SSE and added a log panel for node logs.
- Enhanced pipeline canvas to display node statuses during execution.
- Introduced new fields in the build node form for Docker configurations.
- Updated API to support execution streaming and enhanced node catalog descriptions.

web/components/canvas/flow-node.tsx

@@ -1,13 +1,28 @@
 "use client";
 
 import { Handle, Position, type NodeProps } from "@xyflow/react";
-import { AlertTriangle } from "lucide-react";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  PauseCircle,
+  XCircle,
+} from "lucide-react";
 import { lookup } from "@/lib/node-catalog";
 import { cn } from "@/lib/utils";
 import type { FlowNodeData } from "@/lib/pipeline-graph";
 
+export type NodeRunStatus =
+  | "pending"
+  | "running"
+  | "success"
+  | "failed"
+  | "paused";
+
 export function FlowNode({ data, selected }: NodeProps) {
-  const pn = (data as FlowNodeData).pipelineNode;
+  const fd = data as FlowNodeData & { runStatus?: NodeRunStatus };
+  const pn = fd.pipelineNode;
+  const status = fd.runStatus;
   const entry = lookup(pn.type);
   const Icon = entry?.icon ?? AlertTriangle;
   const outputs = entry?.outputs ?? 1;
@@ -18,7 +33,11 @@ export function FlowNode({ data, selected }: NodeProps) {
       className={cn(
         "min-w-[200px] rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow",
         selected ? "ring-2 ring-primary shadow-md" : "hover:shadow-md",
-        !entry && "border-destructive/60"
+        !entry && "border-destructive/60",
+        status === "running" && "ring-2 ring-sky-500 animate-pulse",
+        status === "success" && "ring-2 ring-emerald-500",
+        status === "failed" && "ring-2 ring-rose-500",
+        status === "paused" && "ring-2 ring-amber-500"
       )}
     >
       <div
@@ -31,7 +50,10 @@ export function FlowNode({ data, selected }: NodeProps) {
         <span className="truncate">{entry?.label ?? "Unsupported"}</span>
       </div>
       <div className="px-3 py-2">
-        <div className="truncate text-sm font-medium">{pn.name}</div>
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-sm font-medium">{pn.name}</span>
+          <StatusIcon status={status} />
+        </div>
         <div className="truncate text-[11px] text-muted-foreground">{pn.type}</div>
       </div>
 
@@ -62,3 +84,16 @@ export function FlowNode({ data, selected }: NodeProps) {
     </div>
   );
 }
+
+function StatusIcon({ status }: { status?: NodeRunStatus }) {
+  if (!status || status === "pending") return null;
+  if (status === "running")
+    return <Loader2 className="size-3.5 animate-spin text-sky-500" />;
+  if (status === "success")
+    return <CheckCircle2 className="size-3.5 text-emerald-500" />;
+  if (status === "failed")
+    return <XCircle className="size-3.5 text-rose-500" />;
+  if (status === "paused")
+    return <PauseCircle className="size-3.5 text-amber-500" />;
+  return null;
+}