@foresthubai/workflow-builder 0.3.0

package/src/panels/BuilderSidebar.tsx

@@ -0,0 +1,301 @@
+import { Button } from "../components/ui/button";
+import { ScrollArea } from "../components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
+import { cn } from "../cn";
+import { NodeCategory, NodeDefinition } from "@foresthubai/workflow-core/node";
+import { useMemo } from "react";
+import { Blocks, BrainCircuit, Braces, Bug, Cpu, Database, TriangleAlert, Variable, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { DiagnosticsPanel } from "./DiagnosticsPanel";
+import { FunctionListPanel } from "./FunctionListPanel";
+import NodeLibrary from "./NodeLibrary";
+import { ChannelsPanel } from "./ChannelsPanel";
+import { MemoryPanel } from "./MemoryPanel";
+import { ModelsPanel } from "./ModelsPanel";
+import { VariablesPanel } from "./VariablesPanel";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { DebugContextPanel } from "./DebugContextPanel";
+import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
+
+export type SidebarTab =
+  | "nodes"
+  | "variables"
+  | "channels"
+  | "memory"
+  | "models"
+  | "functions"
+  | "diagnostics"
+  | "debug-context"
+  | null;
+
+interface BuilderSidebarProps {
+  canvasId: string;
+  activeTab: SidebarTab;
+  onTabChange: (tab: SidebarTab) => void;
+  onAddNode: (nodeType: NodeDefinition, position?: { x: number; y: number }) => void;
+  nodeDefinitions: NodeDefinition[];
+  getAllCategories: () => NodeCategory[];
+  onSelectNode: (nodeId: string) => void;
+  onSelectEdge: (edgeId: string) => void;
+  isFunctionCanvas: boolean;
+  // Function management
+  functions: FunctionDeclaration[];
+  onOpenFunction: (functionId: string) => void;
+  onCreateFunction: () => string;
+  // Debug mode
+  isDebugMode?: boolean;
+}
+
+export const BuilderSidebar = ({
+  canvasId,
+  activeTab,
+  onTabChange,
+  onAddNode,
+  nodeDefinitions,
+  getAllCategories,
+  onSelectNode,
+  onSelectEdge,
+  isFunctionCanvas,
+  functions,
+  onOpenFunction,
+  onCreateFunction,
+  isDebugMode,
+}: BuilderSidebarProps) => {
+  const { t } = useTranslation();
+
+  const staticTabs = useMemo(
+    () => [
+      { id: "nodes" as const, icon: Blocks, label: t("nodeLibrary") },
+      { id: "variables" as const, icon: Variable, label: t("variables") },
+      { id: "channels" as const, icon: Cpu, label: t("channels") },
+      { id: "memory" as const, icon: Database, label: t("memoryFiles", "Memory") },
+      { id: "models" as const, icon: BrainCircuit, label: t("models", "AI Models") },
+      { id: "functions" as const, icon: Braces, label: t("functions") },
+      { id: "diagnostics" as const, icon: TriangleAlert, label: t("diagnostics") },
+    ],
+    [t],
+  );
+
+  const debugTabs = useMemo(() => [{ id: "debug-context" as const, icon: Bug, label: t("debug.context") }], [t]);
+
+  // Current-canvas diagnostics counts for the diagnostics tab — node + edge only.
+  const totalErrors = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byNodeId)) for (const d of diags) if (d.severity === "error") count++;
+    for (const diags of Object.values(s.byEdgeId)) for (const d of diags) if (d.severity === "error") count++;
+    return count;
+  });
+  const totalWarnings = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byNodeId)) for (const d of diags) if (d.severity === "warning") count++;
+    for (const diags of Object.values(s.byEdgeId)) for (const d of diags) if (d.severity === "warning") count++;
+    return count;
+  });
+
+  // Channels are project-scoped and own their own tab/badge — counts here
+  // drive the "channels" tab icon color + badge (mirrors the diagnostics tab).
+  const channelErrors = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byChannelId)) for (const d of diags) if (d.severity === "error") count++;
+    return count;
+  });
+  const channelWarnings = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byChannelId)) for (const d of diags) if (d.severity === "warning") count++;
+    return count;
+  });
+
+  // Memory primitives are project-scoped too — counts drive the "memory" tab
+  // icon color + badge (mirrors the channels tab).
+  const memoryErrors = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byMemoryId)) for (const d of diags) if (d.severity === "error") count++;
+    return count;
+  });
+  const memoryWarnings = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byMemoryId)) for (const d of diags) if (d.severity === "warning") count++;
+    return count;
+  });
+
+  // Declared models are project-scoped too — counts drive the "models" tab badge.
+  const modelErrors = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byModelId)) for (const d of diags) if (d.severity === "error") count++;
+    return count;
+  });
+  const modelWarnings = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byModelId)) for (const d of diags) if (d.severity === "warning") count++;
+    return count;
+  });
+
+  // Functions are project-scoped too — counts drive the "functions" tab badge.
+  const functionErrors = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byFunctionId)) for (const d of diags) if (d.severity === "error") count++;
+    return count;
+  });
+  const functionWarnings = useDiagnosticsStore((s) => {
+    let count = 0;
+    for (const diags of Object.values(s.byFunctionId)) for (const d of diags) if (d.severity === "warning") count++;
+    return count;
+  });
+
+  const tabs = useMemo(() => (isDebugMode ? debugTabs : staticTabs), [isDebugMode, debugTabs, staticTabs]);
+
+  const handleTabClick = (tabId: SidebarTab) => {
+    onTabChange(activeTab === tabId ? null : tabId);
+  };
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "nodes":
+        return (
+          <NodeLibrary
+            onAddNode={onAddNode}
+            nodeDefinitions={nodeDefinitions}
+            getAllCategories={getAllCategories}
+            functions={functions}
+            isFunctionCanvas={!!isFunctionCanvas}
+          />
+        );
+      case "variables":
+        return <VariablesPanel canvasId={canvasId} onSelectNode={onSelectNode} />;
+      case "channels":
+        return <ChannelsPanel />;
+      case "memory":
+        return <MemoryPanel />;
+      case "models":
+        return <ModelsPanel />;
+      case "functions":
+        return <FunctionListPanel onOpenFunction={onOpenFunction} onCreateFunction={onCreateFunction} />;
+      case "diagnostics":
+        return <DiagnosticsPanel canvasId={canvasId} onSelectNode={onSelectNode} onSelectEdge={onSelectEdge} />;
+      case "debug-context":
+        return <DebugContextPanel />;
+      default:
+        return null;
+    }
+  };
+
+  const getTabLabel = (tabId: SidebarTab) => {
+    const tab = tabs.find((tab) => tab.id === tabId);
+    return tab?.label ?? "";
+  };
+
+  return (
+    <div className="flex h-full">
+      {/* Icon Rail - Always visible */}
+      <div className="w-14 bg-card border-r border-border/50 flex flex-col items-center py-3 gap-1 shrink-0">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+
+          // Per-tab error/warning counts for icon coloring + badge.
+          // Diagnostics tab covers nodes+edges; channels tab covers channels.
+          let tabErrors = 0;
+          let tabWarnings = 0;
+          if (tab.id === "diagnostics") {
+            tabErrors = totalErrors;
+            tabWarnings = totalWarnings;
+          } else if (tab.id === "channels") {
+            tabErrors = channelErrors;
+            tabWarnings = channelWarnings;
+          } else if (tab.id === "memory") {
+            tabErrors = memoryErrors;
+            tabWarnings = memoryWarnings;
+          } else if (tab.id === "models") {
+            tabErrors = modelErrors;
+            tabWarnings = modelWarnings;
+          } else if (tab.id === "functions") {
+            tabErrors = functionErrors;
+            tabWarnings = functionWarnings;
+          }
+          const tabIssueCount = tabErrors + tabWarnings;
+          const showBadge = tabIssueCount > 0;
+
+          const iconColorClass =
+            showBadge && !isActive
+              ? tabErrors > 0
+                ? "text-destructive hover:text-destructive hover:bg-destructive/10"
+                : "text-warning hover:text-warning hover:bg-warning/10"
+              : undefined;
+
+          return (
+            <Tooltip key={tab.id} delayDuration={300}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={(e) => {
+                    // Drop focus after a mouse click so a follow-up Enter doesn't
+                    // re-fire (toggle) this tab. Keyboard activation (detail 0) keeps focus.
+                    if (e.detail !== 0) e.currentTarget.blur();
+                    handleTabClick(tab.id);
+                  }}
+                  className={cn(
+                    "w-10 h-10 transition-all duration-200 relative",
+                    isActive
+                      ? "bg-accent text-primary shadow-sm"
+                      : (iconColorClass ?? "text-muted-foreground hover:text-foreground hover:bg-accent/50"),
+                  )}
+                >
+                  <Icon className="w-5 h-5" />
+                  {showBadge && (
+                    <span
+                      className={cn(
+                        "absolute -top-0.5 -right-0.5 min-w-[16px] h-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1 shadow-sm",
+                        tabErrors > 0
+                          ? "bg-destructive text-destructive-foreground"
+                          : "bg-warning text-warning-foreground",
+                      )}
+                    >
+                      {tabIssueCount}
+                    </span>
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                {tab.label}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+
+      {/* Content Panel - Slides in/out */}
+      <div
+        className={cn(
+          "bg-card/95 backdrop-blur-xl border-r border-border/50 transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+          activeTab ? "w-64 opacity-100" : "w-0 opacity-0",
+        )}
+      >
+        {activeTab && (
+          <>
+            {/* Panel Header */}
+            <div className="flex items-center justify-between p-3 border-b border-border/50 shrink-0">
+              <h3 className="font-semibold text-sm text-foreground">{getTabLabel(activeTab)}</h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onTabChange(null)}
+                className="w-7 h-7 text-muted-foreground hover:text-foreground"
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+
+            {/* Panel Content — ScrollArea overlays the scrollbar in the panel's
+                gutter so content width stays constant whether overflow is
+                present or not. Padding lives on the inner viewport because the
+                Root must clip cleanly for the absolute-positioned scrollbar. */}
+            <ScrollArea className="flex-1" viewportClassName="p-3">
+              {renderTabContent()}
+            </ScrollArea>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/panels/ChannelConfigPanel.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { CHANNEL_DEFINITION, type Channel, type ChannelType } from "@foresthubai/workflow-core/channel";
+import { isParameterActive, type Parameter } from "@foresthubai/workflow-core/parameter";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { deleteChannel, updateChannel } from "../utils/channelOperations";
+import { ResourceConfigPanel } from "./ResourceConfigPanel";
+
+interface ChannelConfigPanelProps {
+  channel: Channel;
+  onClose: () => void;
+}
+
+export const ChannelConfigPanel = ({ channel, onClose }: ChannelConfigPanelProps) => {
+  const { t } = useTranslation();
+
+  // `type` is a parameter, so it's exposed through the same `arguments`-shaped
+  // record ParameterEditor reads — the top-level `type` is mirrored under the
+  // `type` key so the activation-rule evaluator can see it.
+  const allArguments: Record<string, unknown> = { ...channel.arguments, type: channel.type };
+  const parameters = CHANNEL_DEFINITION.parameters.filter((p) => isParameterActive(p, allArguments, false));
+  const channelDiags = useDiagnosticsStore((s) => s.byChannelId[channel.id]);
+
+  const handleParamChange = (paramId: string, value: unknown) => {
+    if (paramId === "type") {
+      updateChannel(channel.id, { type: value as ChannelType });
+    } else {
+      updateChannel(channel.id, { arguments: { [paramId]: value } });
+    }
+  };
+
+  return (
+    <ResourceConfigPanel
+      resetKey={channel.id}
+      label={channel.label}
+      labelTitle={t("channelLabel", "Channel label")}
+      onLabelChange={(label) => updateChannel(channel.id, { label })}
+      description={t("channelDescription", "Hardware interface declaration")}
+      parameters={parameters}
+      getValue={(p: Parameter) => (p.id === "type" ? channel.type : channel.arguments[p.id])}
+      allArguments={allArguments}
+      onParamChange={handleParamChange}
+      diagnostics={channelDiags}
+      translationPrefix="channels"
+      deleteLabel={t("deleteChannel", "Delete channel")}
+      onDelete={() => deleteChannel(channel.id)}
+      onClose={onClose}
+    />
+  );
+};

package/src/panels/ChannelsPanel.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import { Cpu, Plus } from "lucide-react";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useEditorStore } from "../stores/editorStore";
+import { addChannel } from "../utils/channelOperations";
+import { ResourceListPanel } from "./ResourceListPanel";
+
+export const ChannelsPanel = () => {
+  const { t } = useTranslation();
+  const channels = useEditorStore((s) => s.channels);
+  const selection = useEditorStore((s) => s.selection);
+  const selectChannel = useEditorStore((s) => s.selectChannel);
+  const byChannelId = useDiagnosticsStore((s) => s.byChannelId);
+
+  return (
+    <ResourceListPanel
+      items={Object.values(channels)}
+      selectedId={selection.kind === "channel" ? selection.id : null}
+      onSelect={selectChannel}
+      diagnosticsSlot={byChannelId}
+      badge={(c) => c.type}
+      emptyIcon={Cpu}
+      emptyText={t("noChannels")}
+      emptyHint={t("noChannelsHint")}
+      addActions={[{ label: t("addChannel"), icon: Plus, onAdd: () => selectChannel(addChannel("GPIOIN").id) }]}
+    />
+  );
+};

package/src/panels/DebugConsolePanel.tsx

@@ -0,0 +1,73 @@
+import { Button } from "../components/ui/button";
+import { ScrollArea } from "../components/ui/scroll-area";
+import { Trash2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useDebugStore, type ConsoleEntry } from "../stores/debugStore";
+
+export const DebugConsolePanel = () => {
+  const { t } = useTranslation();
+  const entries = useDebugStore((s) => s.console);
+  const clearConsole = useDebugStore((s) => s.clearConsole);
+  // Ref points at the ScrollArea Viewport (the element with overflow:scroll),
+  // not the Root — the Root is overflow:hidden and won't scroll.
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom on new entries
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries]);
+
+  return (
+    <div className="h-full flex flex-col bg-background border-t border-border">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50 shrink-0">
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          {t("debug.console")}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="w-6 h-6 text-muted-foreground hover:text-foreground"
+          onClick={clearConsole}
+          title={t("debug.clearConsole")}
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </Button>
+      </div>
+
+      {/* Console output. Radix wraps Viewport children in its own div, so
+          row-spacing utilities (space-y-*) on the Viewport don't reach the
+          actual rows — apply them on an explicit wrapper instead. */}
+      <ScrollArea className="flex-1" viewportRef={scrollRef} viewportClassName="p-2">
+        <div className="font-mono text-xs space-y-0.5">
+          {entries.length === 0 ? (
+            <div className="text-muted-foreground text-center py-4">{t("debug.consoleEmpty")}</div>
+          ) : (
+            entries.map((entry) => <ConsoleRow key={entry.id} entry={entry} />)
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+function ConsoleRow({ entry }: { entry: ConsoleEntry }) {
+  const time = new Date(entry.timestamp).toLocaleTimeString(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  const colorClass =
+    entry.type === "error" ? "text-destructive" : entry.type === "system" ? "text-muted-foreground" : "text-foreground";
+
+  return (
+    <div className={`flex gap-2 leading-relaxed ${colorClass}`}>
+      <span className="text-muted-foreground/50 shrink-0">{time}</span>
+      <span className="whitespace-pre-wrap break-all">{entry.text}</span>
+    </div>
+  );
+}

package/src/panels/DebugContextPanel.tsx

@@ -0,0 +1,77 @@
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Switch } from "../components/ui/switch";
+import { useTranslation } from "react-i18next";
+import { useDebugStore } from "../stores/debugStore";
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
+import type { DataType } from "@foresthubai/workflow-core";
+
+interface VariableEntry {
+  key: string;
+  name: string;
+  dataType: DataType;
+}
+
+/** Build the list of editable variables from the main canvas store. */
+function getVariableEntries(): VariableEntry[] {
+  const variables = getOrCreateCanvasStore(MAIN_CANVAS_ID).getState().variables;
+  const entries: VariableEntry[] = [];
+  for (const v of Object.values(variables)) {
+    if (v.kind === "declared" || v.kind === "node") {
+      entries.push({ key: v.name, name: v.name, dataType: v.dataType });
+    }
+  }
+  return entries.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export const DebugContextPanel = () => {
+  const { t } = useTranslation();
+  const context = useDebugStore((s) => s.context);
+  const updateContextVar = useDebugStore((s) => s.updateContextVar);
+  const entries = getVariableEntries();
+
+  if (entries.length === 0) {
+    return <div className="text-sm text-muted-foreground text-center py-4">{t("debug.noVariables")}</div>;
+  }
+
+  return (
+    <div className="space-y-3">
+      {entries.map(({ key, name, dataType }) => {
+        const value = context[key];
+        return (
+          <div key={key} className="space-y-1">
+            <Label className="text-xs font-medium flex items-center gap-1.5">
+              <span>{name}</span>
+              <span className="text-muted-foreground font-mono">({dataType})</span>
+            </Label>
+            {dataType === "bool" ? (
+              <Switch checked={!!value} onCheckedChange={(checked) => updateContextVar(key, checked)} />
+            ) : dataType === "int" ? (
+              <Input
+                type="number"
+                step={1}
+                value={(value as number) ?? 0}
+                onChange={(e) => updateContextVar(key, parseInt(e.target.value) || 0)}
+                className="h-8 font-mono text-sm"
+              />
+            ) : dataType === "float" ? (
+              <Input
+                type="number"
+                step={0.1}
+                value={(value as number) ?? 0}
+                onChange={(e) => updateContextVar(key, parseFloat(e.target.value) || 0)}
+                className="h-8 font-mono text-sm"
+              />
+            ) : (
+              <Input
+                value={String(value ?? "")}
+                onChange={(e) => updateContextVar(key, e.target.value)}
+                className="h-8 font-mono text-sm"
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};