@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/panels/ChannelConfigPanel.tsx

@@ -1,49 +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}
-    />
-  );
-};
+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

@@ -1,28 +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) }]}
-    />
-  );
-};
+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

@@ -1,73 +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>
-  );
-}
+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

@@ -1,77 +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>
-  );
-};
+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>
+  );
+};