@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/panels/DiagnosticsPanel.tsx

@@ -1,170 +1,170 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Badge } from "../components/ui/badge";
-import { AlertCircle, AlertTriangle, CheckCircle2, ChevronDown } from "lucide-react";
-import { cn } from "../cn";
-import { useDiagnosticsStore } from "../stores/diagnosticsStore";
-import { getOrCreateCanvasStore } from "../stores/canvasStore";
-import { useNodeDefinitions } from "../hooks/useNodeDefinitions";
-import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
-
-interface DiagnosticsPanelProps {
-  canvasId: string;
-  onSelectNode: (nodeId: string) => void;
-  onSelectEdge: (edgeId: string) => void;
-}
-
-interface DiagnosticGroup {
-  entityId: string;
-  entityType: "node" | "edge";
-  label: string;
-  diagnostics: Diagnostic[];
-  errorCount: number;
-  warningCount: number;
-}
-
-export const DiagnosticsPanel = ({ canvasId, onSelectNode, onSelectEdge }: DiagnosticsPanelProps) => {
-  const { t } = useTranslation();
-  const { getNodeDefinition } = useNodeDefinitions();
-
-  const byNodeId = useDiagnosticsStore((s) => s.byNodeId);
-  const byEdgeId = useDiagnosticsStore((s) => s.byEdgeId);
-  const useCanvasStore = getOrCreateCanvasStore(canvasId);
-  const nodes = useCanvasStore((s) => s.nodes);
-  const edges = useCanvasStore((s) => s.edges);
-
-  // Build groups
-  const groups: DiagnosticGroup[] = [];
-
-  // Node groups
-  for (const [nodeId, diags] of Object.entries(byNodeId)) {
-    if (diags.length === 0) continue;
-    const node = nodes.find((n) => n.id === nodeId);
-    const nodeDef = node ? getNodeDefinition(node.data) : undefined;
-    const label = (node?.data?.label as string) || nodeDef?.label || nodeId;
-    groups.push({
-      entityId: nodeId,
-      entityType: "node",
-      label,
-      diagnostics: diags,
-      errorCount: diags.filter((d) => d.severity === "error").length,
-      warningCount: diags.filter((d) => d.severity === "warning").length,
-    });
-  }
-
-  // Edge groups
-  for (const [edgeId, diags] of Object.entries(byEdgeId)) {
-    if (diags.length === 0) continue;
-    const edge = edges.find((e) => e.id === edgeId);
-    const sourceNode = edge ? nodes.find((n) => n.id === edge.source) : undefined;
-    const targetNode = edge ? nodes.find((n) => n.id === edge.target) : undefined;
-    const sourceDef = sourceNode ? getNodeDefinition(sourceNode.data) : undefined;
-    const targetDef = targetNode ? getNodeDefinition(targetNode.data) : undefined;
-    const sourceLabel = (sourceNode?.data?.label as string) || sourceDef?.label || "?";
-    const targetLabel = (targetNode?.data?.label as string) || targetDef?.label || "?";
-    const label = `${sourceLabel} → ${targetLabel}`;
-    groups.push({
-      entityId: edgeId,
-      entityType: "edge",
-      label,
-      diagnostics: diags,
-      errorCount: diags.filter((d) => d.severity === "error").length,
-      warningCount: diags.filter((d) => d.severity === "warning").length,
-    });
-  }
-
-  // IO variable diagnostics are surfaced on the IO sidebar tab itself
-  // (red ring on cards + count badge on the tab icon) — not duplicated here.
-
-  // Sort: errors first, then warnings; within same severity, nodes before edges;
-  // within same type, alphabetical by label so the panel order stays stable
-  // regardless of which nodes ReactFlow currently has mounted (virtualization
-  // can reshuffle the diagnostics store's insertion order on pan/select).
-  groups.sort((a, b) => {
-    const aHasError = a.errorCount > 0 ? 0 : 1;
-    const bHasError = b.errorCount > 0 ? 0 : 1;
-    if (aHasError !== bHasError) return aHasError - bHasError;
-    const aType = a.entityType === "node" ? 0 : 1;
-    const bType = b.entityType === "node" ? 0 : 1;
-    if (aType !== bType) return aType - bType;
-    return a.label.localeCompare(b.label);
-  });
-
-  if (groups.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
-        <CheckCircle2 className="w-8 h-8 text-success" />
-        <span className="text-sm">{t("noIssuesFound")}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-1">
-      {groups.map((group) => (
-        <DiagnosticGroupItem
-          key={`${group.entityType}-${group.entityId}`}
-          group={group}
-          onSelect={() => (group.entityType === "node" ? onSelectNode(group.entityId) : onSelectEdge(group.entityId))}
-        />
-      ))}
-    </div>
-  );
-};
-
-function DiagnosticGroupItem({ group, onSelect }: { group: DiagnosticGroup; onSelect: () => void }) {
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => {
-          setOpen((v) => !v);
-          onSelect();
-        }}
-        className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md hover:bg-muted/50 text-left text-sm"
-      >
-        <ChevronDown className={cn("w-3.5 h-3.5 shrink-0 transition-transform", !open && "-rotate-90")} />
-        <span className="truncate flex-1 font-medium">{group.label}</span>
-        <div className="flex items-center gap-1">
-          {group.errorCount > 0 && (
-            <Badge
-              variant="outline"
-              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-destructive/40 text-destructive bg-destructive/10"
-            >
-              {group.errorCount}
-            </Badge>
-          )}
-          {group.warningCount > 0 && (
-            <Badge
-              variant="outline"
-              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-warning/40 text-warning bg-warning/10"
-            >
-              {group.warningCount}
-            </Badge>
-          )}
-        </div>
-      </button>
-      {open && (
-        <div className="ml-3 border-l border-border/50 pl-2 flex flex-col gap-0.5 pb-1">
-          {group.diagnostics.map((diag, i) => (
-            <button
-              key={i}
-              type="button"
-              onClick={onSelect}
-              className="flex items-start gap-1.5 px-2 py-1 rounded text-xs text-left hover:bg-muted/50 transition-colors w-full"
-            >
-              {diag.severity === "error" ? (
-                <AlertTriangle className="w-3.5 h-3.5 text-destructive shrink-0 mt-0.5" />
-              ) : (
-                <AlertCircle className="w-3.5 h-3.5 text-warning shrink-0 mt-0.5" />
-              )}
-              <span className="text-muted-foreground">{diag.message}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "../components/ui/badge";
+import { AlertCircle, AlertTriangle, CheckCircle2, ChevronDown } from "lucide-react";
+import { cn } from "../cn";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { getOrCreateCanvasStore } from "../stores/canvasStore";
+import { useNodeDefinitions } from "../hooks/useNodeDefinitions";
+import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
+
+interface DiagnosticsPanelProps {
+  canvasId: string;
+  onSelectNode: (nodeId: string) => void;
+  onSelectEdge: (edgeId: string) => void;
+}
+
+interface DiagnosticGroup {
+  entityId: string;
+  entityType: "node" | "edge";
+  label: string;
+  diagnostics: Diagnostic[];
+  errorCount: number;
+  warningCount: number;
+}
+
+export const DiagnosticsPanel = ({ canvasId, onSelectNode, onSelectEdge }: DiagnosticsPanelProps) => {
+  const { t } = useTranslation();
+  const { getNodeDefinition } = useNodeDefinitions();
+
+  const byNodeId = useDiagnosticsStore((s) => s.byNodeId);
+  const byEdgeId = useDiagnosticsStore((s) => s.byEdgeId);
+  const useCanvasStore = getOrCreateCanvasStore(canvasId);
+  const nodes = useCanvasStore((s) => s.nodes);
+  const edges = useCanvasStore((s) => s.edges);
+
+  // Build groups
+  const groups: DiagnosticGroup[] = [];
+
+  // Node groups
+  for (const [nodeId, diags] of Object.entries(byNodeId)) {
+    if (diags.length === 0) continue;
+    const node = nodes.find((n) => n.id === nodeId);
+    const nodeDef = node ? getNodeDefinition(node.data) : undefined;
+    const label = (node?.data?.label as string) || nodeDef?.label || nodeId;
+    groups.push({
+      entityId: nodeId,
+      entityType: "node",
+      label,
+      diagnostics: diags,
+      errorCount: diags.filter((d) => d.severity === "error").length,
+      warningCount: diags.filter((d) => d.severity === "warning").length,
+    });
+  }
+
+  // Edge groups
+  for (const [edgeId, diags] of Object.entries(byEdgeId)) {
+    if (diags.length === 0) continue;
+    const edge = edges.find((e) => e.id === edgeId);
+    const sourceNode = edge ? nodes.find((n) => n.id === edge.source) : undefined;
+    const targetNode = edge ? nodes.find((n) => n.id === edge.target) : undefined;
+    const sourceDef = sourceNode ? getNodeDefinition(sourceNode.data) : undefined;
+    const targetDef = targetNode ? getNodeDefinition(targetNode.data) : undefined;
+    const sourceLabel = (sourceNode?.data?.label as string) || sourceDef?.label || "?";
+    const targetLabel = (targetNode?.data?.label as string) || targetDef?.label || "?";
+    const label = `${sourceLabel} → ${targetLabel}`;
+    groups.push({
+      entityId: edgeId,
+      entityType: "edge",
+      label,
+      diagnostics: diags,
+      errorCount: diags.filter((d) => d.severity === "error").length,
+      warningCount: diags.filter((d) => d.severity === "warning").length,
+    });
+  }
+
+  // IO variable diagnostics are surfaced on the IO sidebar tab itself
+  // (red ring on cards + count badge on the tab icon) — not duplicated here.
+
+  // Sort: errors first, then warnings; within same severity, nodes before edges;
+  // within same type, alphabetical by label so the panel order stays stable
+  // regardless of which nodes ReactFlow currently has mounted (virtualization
+  // can reshuffle the diagnostics store's insertion order on pan/select).
+  groups.sort((a, b) => {
+    const aHasError = a.errorCount > 0 ? 0 : 1;
+    const bHasError = b.errorCount > 0 ? 0 : 1;
+    if (aHasError !== bHasError) return aHasError - bHasError;
+    const aType = a.entityType === "node" ? 0 : 1;
+    const bType = b.entityType === "node" ? 0 : 1;
+    if (aType !== bType) return aType - bType;
+    return a.label.localeCompare(b.label);
+  });
+
+  if (groups.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
+        <CheckCircle2 className="w-8 h-8 text-success" />
+        <span className="text-sm">{t("noIssuesFound")}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      {groups.map((group) => (
+        <DiagnosticGroupItem
+          key={`${group.entityType}-${group.entityId}`}
+          group={group}
+          onSelect={() => (group.entityType === "node" ? onSelectNode(group.entityId) : onSelectEdge(group.entityId))}
+        />
+      ))}
+    </div>
+  );
+};
+
+function DiagnosticGroupItem({ group, onSelect }: { group: DiagnosticGroup; onSelect: () => void }) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((v) => !v);
+          onSelect();
+        }}
+        className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md hover:bg-muted/50 text-left text-sm"
+      >
+        <ChevronDown className={cn("w-3.5 h-3.5 shrink-0 transition-transform", !open && "-rotate-90")} />
+        <span className="truncate flex-1 font-medium">{group.label}</span>
+        <div className="flex items-center gap-1">
+          {group.errorCount > 0 && (
+            <Badge
+              variant="outline"
+              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-destructive/40 text-destructive bg-destructive/10"
+            >
+              {group.errorCount}
+            </Badge>
+          )}
+          {group.warningCount > 0 && (
+            <Badge
+              variant="outline"
+              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-warning/40 text-warning bg-warning/10"
+            >
+              {group.warningCount}
+            </Badge>
+          )}
+        </div>
+      </button>
+      {open && (
+        <div className="ml-3 border-l border-border/50 pl-2 flex flex-col gap-0.5 pb-1">
+          {group.diagnostics.map((diag, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={onSelect}
+              className="flex items-start gap-1.5 px-2 py-1 rounded text-xs text-left hover:bg-muted/50 transition-colors w-full"
+            >
+              {diag.severity === "error" ? (
+                <AlertTriangle className="w-3.5 h-3.5 text-destructive shrink-0 mt-0.5" />
+              ) : (
+                <AlertCircle className="w-3.5 h-3.5 text-warning shrink-0 mt-0.5" />
+              )}
+              <span className="text-muted-foreground">{diag.message}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/panels/EdgeConfigPanel.tsx

@@ -1,104 +1,104 @@
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "../components/ui/button";
-import { Separator } from "../components/ui/separator";
-import { ChevronRight } from "lucide-react";
-import { getEdgeDefinition } from "@foresthubai/workflow-core/edge";
-import type { EdgeData, EdgeType } from "@foresthubai/workflow-core/edge";
-import ParameterEditor from "../inputs/ParameterEditor";
-import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
-import { useDiagnosticsStore } from "../stores/diagnosticsStore";
-import { useParamErrors } from "../hooks/useParamErrors";
-import { ReadOnlyBanner } from "../components/ui/readonly-banner";
-import { DeleteButton } from "../components/ui/delete-button";
-import { getEdgeDescription } from "../utils/translation";
-
-interface EdgeConfigPanelProps {
-  canvasId: string;
-  edgeId: string;
-  edgeType: EdgeType;
-  edgeData: EdgeData;
-  sourceControlEdgeCount: number;
-  onEdgeUpdate: (edgeId: string, updates: Record<string, unknown>) => void;
-  onEdgeDelete: (edgeId: string) => void;
-  onClose: () => void;
-}
-
-export const EdgeConfigPanel = ({
-  canvasId,
-  edgeId,
-  edgeType,
-  edgeData,
-  sourceControlEdgeCount,
-  onEdgeUpdate,
-  onEdgeDelete,
-  onClose,
-}: EdgeConfigPanelProps) => {
-  const { t } = useTranslation();
-  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
-  const definition = getEdgeDefinition(edgeType);
-
-  // Read per-parameter error state from diagnostics store
-  const edgeDiags = useDiagnosticsStore((s) => s.byEdgeId[edgeId]);
-  const paramErrors = useParamErrors(edgeDiags);
-
-  const handleParamChange = useCallback(
-    (paramId: string, value: unknown) => {
-      onEdgeUpdate(edgeId, { [paramId]: value });
-    },
-    [edgeId, onEdgeUpdate],
-  );
-
-  return (
-    <div className="p-4 space-y-4">
-      {/* Header - matches NodeConfigPanel layout */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="font-semibold text-lg">{definition.label}</h3>
-          <p className="text-sm text-muted-foreground">{getEdgeDescription(t, definition, edgeType)}</p>
-        </div>
-        <Button variant="ghost" size="icon" onClick={onClose}>
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </div>
-      {readOnly && <ReadOnlyBanner />}
-
-      <Separator />
-
-      <div className={readOnly ? "pointer-events-none opacity-60" : ""}>
-        {definition.parameters.length > 0 ? (
-          definition.parameters.map((param) => {
-            const isDescriptionOptional =
-              param.id === "description" &&
-              sourceControlEdgeCount <= 1 &&
-              (edgeType === "agentChoice" || edgeType === "agentDelegate");
-            const effectiveParam = isDescriptionOptional ? { ...param, optional: true } : param;
-
-            return (
-              <ParameterEditor
-                key={param.id}
-                canvasId={canvasId}
-                parameter={effectiveParam}
-                value={edgeData[param.id]}
-                allArguments={edgeData}
-                onChange={(value) => handleParamChange(param.id, value)}
-                errors={paramErrors.get(param.id)}
-                translationPrefix={`edges.${edgeType}`}
-              />
-            );
-          })
-        ) : (
-          <p className="text-sm text-muted-foreground">{t("noEdgeParams")}</p>
-        )}
-      </div>
-
-      {!readOnly && (
-        <>
-          <Separator />
-          <DeleteButton onClick={() => onEdgeDelete(edgeId)}>{t("deleteEdge")}</DeleteButton>
-        </>
-      )}
-    </div>
-  );
-};
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
+import { ChevronRight } from "lucide-react";
+import { getEdgeDefinition } from "@foresthubai/workflow-core/edge";
+import type { EdgeData, EdgeType } from "@foresthubai/workflow-core/edge";
+import ParameterEditor from "../inputs/ParameterEditor";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useParamErrors } from "../hooks/useParamErrors";
+import { ReadOnlyBanner } from "../components/ui/readonly-banner";
+import { DeleteButton } from "../components/ui/delete-button";
+import { getEdgeDescription } from "../utils/translation";
+
+interface EdgeConfigPanelProps {
+  canvasId: string;
+  edgeId: string;
+  edgeType: EdgeType;
+  edgeData: EdgeData;
+  sourceControlEdgeCount: number;
+  onEdgeUpdate: (edgeId: string, updates: Record<string, unknown>) => void;
+  onEdgeDelete: (edgeId: string) => void;
+  onClose: () => void;
+}
+
+export const EdgeConfigPanel = ({
+  canvasId,
+  edgeId,
+  edgeType,
+  edgeData,
+  sourceControlEdgeCount,
+  onEdgeUpdate,
+  onEdgeDelete,
+  onClose,
+}: EdgeConfigPanelProps) => {
+  const { t } = useTranslation();
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const definition = getEdgeDefinition(edgeType);
+
+  // Read per-parameter error state from diagnostics store
+  const edgeDiags = useDiagnosticsStore((s) => s.byEdgeId[edgeId]);
+  const paramErrors = useParamErrors(edgeDiags);
+
+  const handleParamChange = useCallback(
+    (paramId: string, value: unknown) => {
+      onEdgeUpdate(edgeId, { [paramId]: value });
+    },
+    [edgeId, onEdgeUpdate],
+  );
+
+  return (
+    <div className="p-4 space-y-4">
+      {/* Header - matches NodeConfigPanel layout */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-semibold text-lg">{definition.label}</h3>
+          <p className="text-sm text-muted-foreground">{getEdgeDescription(t, definition, edgeType)}</p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={onClose}>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+      {readOnly && <ReadOnlyBanner />}
+
+      <Separator />
+
+      <div className={readOnly ? "pointer-events-none opacity-60" : ""}>
+        {definition.parameters.length > 0 ? (
+          definition.parameters.map((param) => {
+            const isDescriptionOptional =
+              param.id === "description" &&
+              sourceControlEdgeCount <= 1 &&
+              (edgeType === "agentChoice" || edgeType === "agentDelegate");
+            const effectiveParam = isDescriptionOptional ? { ...param, optional: true } : param;
+
+            return (
+              <ParameterEditor
+                key={param.id}
+                canvasId={canvasId}
+                parameter={effectiveParam}
+                value={edgeData[param.id]}
+                allArguments={edgeData}
+                onChange={(value) => handleParamChange(param.id, value)}
+                errors={paramErrors.get(param.id)}
+                translationPrefix={`edges.${edgeType}`}
+              />
+            );
+          })
+        ) : (
+          <p className="text-sm text-muted-foreground">{t("noEdgeParams")}</p>
+        )}
+      </div>
+
+      {!readOnly && (
+        <>
+          <Separator />
+          <DeleteButton onClick={() => onEdgeDelete(edgeId)}>{t("deleteEdge")}</DeleteButton>
+        </>
+      )}
+    </div>
+  );
+};