@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/components/panels/panel/index.module.css

@@ -0,0 +1,66 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ds-panel-border);
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.count {
+  color: var(--ds-fg-muted);
+  font-size: 0.9rem;
+}
+
+.table {
+  flex: 1;
+  overflow: auto;
+}
+
+.titleCell {
+  font-weight: 500;
+}
+
+.idCell code {
+  font-size: 0.85rem;
+  color: var(--ds-preformat-fg);
+  background-color: var(--ds-code-bg);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+}
+
+.groupCell {
+  color: var(--ds-fg-muted);
+  font-size: 0.9rem;
+}
+
+.optionsCell {
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--ds-badge-bg);
+  color: var(--ds-badge-fg);
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.actionCell {
+  text-align: right;
+}

package/src/components/panels/panel/index.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { useSystem } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { BasePanel } from '../base';
+import styles from './index.module.css';
+
+export const PanelPanel = () => {
+  const system = useSystem();
+
+  // Get all registered panels from the TabLoader
+  const registeredPanels = useMemo(() => {
+    const panels = Object.keys(system.tabLoader.tabs).map((id) => {
+      const tabData = system.tabLoader.tabs[id]?.();
+      return {
+        id,
+        title: tabData?.title || id,
+        group: tabData?.group || 'default',
+        closable: tabData?.closable ?? true,
+        cached: tabData?.cached ?? false
+      };
+    });
+
+    // Sort by title for easier browsing
+    return panels.sort((a, b) => a.title.localeCompare(b.title));
+  }, [system.tabLoader.tabs]);
+
+  const handleOpenPanel = (panelId: string) => {
+    system.tabStore.getState().openTab(panelId);
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>Registered Panels</h2>
+          <div className={styles.count}>{registeredPanels.length} panels</div>
+        </div>
+
+        <VscodeTable className={styles.table}>
+          <VscodeTableHeader slot="header">
+            <VscodeTableHeaderCell>Panel</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>ID</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Group</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Options</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Action</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody slot="body">
+            {registeredPanels.map((panel) => (
+              <VscodeTableRow key={panel.id}>
+                <VscodeTableCell className={styles.titleCell}>
+                  {panel.title}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.idCell}>
+                  <code>{panel.id}</code>
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.groupCell}>
+                  {panel.group}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.optionsCell}>
+                  {panel.cached && <span className={styles.badge}>cached</span>}
+                  {!panel.closable && (
+                    <span className={styles.badge}>not closable</span>
+                  )}
+                </VscodeTableCell>
+                <VscodeTableCell className={styles.actionCell}>
+                  <VscodeButton
+                    onClick={() => handleOpenPanel(panel.id)}
+                    secondary
+                  >
+                    Open
+                  </VscodeButton>
+                </VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+};

package/src/components/panels/search/index.module.css

@@ -0,0 +1,16 @@
+.searchGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+}
+
+.searchRow {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.fullWidth {
+    width: 100%;
+}

package/src/components/panels/search/index.tsx

@@ -0,0 +1,215 @@
+import { annotatedTitle } from '@/annotations/index.js';
+import React from 'react';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption,
+  VscodeLabel,
+  VscodeTreeItem,
+  VscodeTree,
+  VscodeCollapsible,
+  VscodeBadge
+} from '@vscode-elements/react-elements';
+import { useRefFromStore, useActiveGraph } from '@/system';
+import type { Node } from 'reactflow';
+import { Search } from 'iconoir-react';
+import Fuse from 'fuse.js';
+import { useStore } from 'zustand';
+import { BasePanel } from '../base';
+import styles from './index.module.css';
+import { Icon } from '@/components/primitives/icon';
+
+type AnnotatedNode = Node & {
+  annotations: Record<string, string>;
+};
+
+type SearchResult = {
+  id: string;
+  type: string;
+  title?: string;
+};
+
+export const SearchPanel = () => {
+  const [id, setId] = React.useState('');
+  const [title, setTitle] = React.useState('');
+  const [nodeType, setNodeType] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
+
+  const sys = useActiveGraph()!;
+  const graphNodes = useStore(sys.nodeStore, (s) => s.nodes);
+  const reactflow = useRefFromStore(sys.refStore, 'reactflow');
+
+  // Get available node types from the current graph
+  const availableNodeTypes = React.useMemo(() => {
+    const types = new Set<string>();
+
+    for (const node of graphNodes) {
+      const type = node?.data?.type;
+      if (typeof type === 'string' && type.length > 0) {
+        types.add(type);
+      }
+    }
+
+    return [...types].sort();
+  }, [graphNodes]);
+
+  const onClick = () => {
+    if (!reactflow) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Find all nodes matching the ID (partial match)
+    const matchingNodes = graphNodes.filter((n) =>
+      n.id.toLowerCase().includes(id.toLowerCase())
+    );
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  const onClickTitle = () => {
+    if (!reactflow) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Filter nodes that have titles
+    const nodesWithTitles = graphNodes.map((n) => ({
+      node: n,
+      title: (n as AnnotatedNode).data.type
+    }));
+
+    // Use Fuse.js for fuzzy search
+    const fuse = new Fuse(nodesWithTitles, {
+      keys: ['title'],
+      threshold: 0.4, // Lower = more strict, Higher = more fuzzy (0.0 = exact, 1.0 = match anything)
+      includeScore: true,
+      ignoreLocation: true
+    });
+
+    const fuseResults = fuse.search(title);
+    const matchingNodes = fuseResults.map((result) => result.item.node);
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  const onClickType = () => {
+    if (!reactflow || !nodeType) {
+      return;
+    }
+
+    const nodes = sys.nodeStore.getState().nodes;
+    const graphNodes = Object.values(nodes);
+
+    // Find all nodes matching the selected type
+    const matchingNodes = graphNodes.filter((n) => n.data.type === nodeType);
+
+    const results: SearchResult[] = matchingNodes.map((n) => ({
+      id: n.id,
+      type: n.data.type,
+      title: (n as AnnotatedNode).annotations?.[annotatedTitle]
+    }));
+
+    setSearchResults(results);
+  };
+
+  const handleTreeSelect = (ev: unknown) => {
+    const detail = (ev as CustomEvent<any>)?.detail;
+    const selectedItems = Array.isArray(detail)
+      ? detail
+      : detail?.selectedItems;
+    const firstSelected = selectedItems?.[0] as HTMLElement | undefined;
+    const key = firstSelected?.dataset?.varKey;
+
+    if (key) {
+      sys.actionStore.getState().actions.focusNode(key);
+    }
+  };
+
+  return (
+    <BasePanel>
+      <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Find Node</span>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by ID</VscodeLabel>
+        <div className={styles.searchRow}>
+          <VscodeTextfield
+            className={styles.fullWidth}
+            value={id}
+            onChange={(e: any) => setId(e.target.value)}
+          />
+          <Icon onClick={onClick}>
+            <Search />
+          </Icon>
+        </div>
+      </div>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by Title</VscodeLabel>
+        <div className={styles.searchRow}>
+          <VscodeTextfield
+            className={styles.fullWidth}
+            value={title}
+            onChange={(e: any) => setTitle(e.target.value)}
+          />
+          <Icon onClick={onClickTitle}>
+            <Search />
+          </Icon>
+        </div>
+      </div>
+
+      <div className={styles.searchGroup}>
+        <VscodeLabel>Find by Type</VscodeLabel>
+
+        <VscodeSingleSelect
+          className={styles.fullWidth}
+          value={nodeType}
+          onChange={(e: any) => setNodeType(e.target.value)}
+        >
+          <VscodeOption value="">Select a type...</VscodeOption>
+          {availableNodeTypes.map((type) => (
+            <VscodeOption key={type} value={type}>
+              {type}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeButton onClick={onClickType} disabled={!nodeType}>
+          Search
+        </VscodeButton>
+      </div>
+
+      {searchResults.length > 0 && (
+        <VscodeCollapsible title="Results" open>
+          <VscodeBadge slot="decorations">{searchResults.length}</VscodeBadge>
+          <VscodeTree onVscTreeSelect={handleTreeSelect}>
+            {searchResults.map((result) => (
+              <VscodeTreeItem key={result.id} data-var-key={result.id}>
+                <span>
+                  # {result.id} / {result.title}
+                </span>
+                <span slot="description">{result.type}</span>
+              </VscodeTreeItem>
+            ))}
+          </VscodeTree>
+        </VscodeCollapsible>
+      )}
+    </BasePanel>
+  );
+};

package/src/components/panels/systemSettings/ConversionsSettings.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeButton,
+  VscodeOption,
+  VscodeSingleSelect
+} from '@vscode-elements/react-elements';
+import { Trash } from 'iconoir-react';
+import { useSystem } from '@/system/provider';
+import styles from './styles.module.css';
+
+/**
+ * Editor for the custom automatic type conversions used by auto-convert. Rules
+ * defined here override the generic spec-derived defaults and are persisted with
+ * the editor settings.
+ *
+ * A rule pins the converter node AND the specific ports to wire: which input
+ * receives the `from` value and which output produces the `to` value. The port
+ * choices are filtered to type-compatible sockets, so converter nodes with more
+ * than one input/output resolve unambiguously.
+ */
+export const ConversionsSettings: React.FC = () => {
+  const sys = useSystem();
+  const values = useStore(sys.registry, (s) => s.values);
+  const specs = useStore(sys.specStore, (s) => s.specs);
+  const conversions = useStore(sys.conversionStore, (s) => s.conversions);
+
+  const valueTypes = useMemo(
+    () => Object.keys(values).filter((t) => t !== 'flow'),
+    [values]
+  );
+  const nodeTypes = useMemo(() => specs.map((s) => s.type).sort(), [specs]);
+
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  const [nodeType, setNodeType] = useState('');
+  const [inputKey, setInputKey] = useState('');
+  const [outputKey, setOutputKey] = useState('');
+
+  const selectedSpec = useMemo(
+    () => specs.find((s) => s.type === nodeType),
+    [specs, nodeType]
+  );
+
+  // Only ports whose type matches the conversion endpoints are valid targets:
+  // the spliced node must accept `from` and emit `to`.
+  const inputPorts = useMemo(
+    () =>
+      (selectedSpec?.inputs ?? []).filter(
+        (i) => i.valueType !== 'flow' && (!from || i.valueType === from)
+      ),
+    [selectedSpec, from]
+  );
+  const outputPorts = useMemo(
+    () =>
+      (selectedSpec?.outputs ?? []).filter(
+        (o) => o.valueType !== 'flow' && (!to || o.valueType === to)
+      ),
+    [selectedSpec, to]
+  );
+
+  // Default the port selection to the first compatible socket whenever the node
+  // or endpoints change; the user can still override when several ports match.
+  useEffect(() => {
+    setInputKey(inputPorts[0]?.name ?? '');
+  }, [inputPorts]);
+  useEffect(() => {
+    setOutputKey(outputPorts[0]?.name ?? '');
+  }, [outputPorts]);
+
+  const nodeChosen = Boolean(nodeType);
+  const portsMissing =
+    nodeChosen && (inputPorts.length === 0 || outputPorts.length === 0);
+  const canAdd =
+    Boolean(from && to && nodeType && inputKey && outputKey) && from !== to;
+
+  const add = () => {
+    if (!canAdd) return;
+    sys.conversionStore
+      .getState()
+      .registerConversion({ from, to, nodeType, inputKey, outputKey });
+    setFrom('');
+    setTo('');
+    setNodeType('');
+    setInputKey('');
+    setOutputKey('');
+  };
+
+  return (
+    <div className={styles.conversions}>
+      <span className={styles.conversionsLabel}>
+        Custom rules override the built-in defaults.
+      </span>
+      {conversions.length === 0 && (
+        <div className={styles.empty}>No custom conversions.</div>
+      )}
+      {conversions.map((rule) => (
+        <div key={`${rule.from}->${rule.to}`} className={styles.rule}>
+          <span className={styles.ruleText}>
+            {rule.from} → {rule.to}{' '}
+            <span className={styles.ruleNode}>
+              ({rule.nodeType}
+              {rule.inputKey && rule.outputKey
+                ? `: ${rule.inputKey} → ${rule.outputKey}`
+                : ''}
+              )
+            </span>
+          </span>
+          <VscodeButton
+            secondary
+            iconOnly
+            title="Remove"
+            onClick={() =>
+              sys.conversionStore
+                .getState()
+                .removeConversion(rule.from, rule.to)
+            }
+          >
+            <Trash />
+          </VscodeButton>
+        </div>
+      ))}
+
+      <div className={styles.addForm}>
+        <VscodeSingleSelect
+          value={from}
+          onChange={(e: any) => setFrom(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">from…</VscodeOption>
+          {valueTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeSingleSelect
+          value={to}
+          onChange={(e: any) => setTo(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">to…</VscodeOption>
+          {valueTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeSingleSelect
+          value={nodeType}
+          onChange={(e: any) => setNodeType(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">converter node…</VscodeOption>
+          {nodeTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+
+        {nodeChosen && !portsMissing && (
+          <>
+            <VscodeSingleSelect
+              value={inputKey}
+              onChange={(e: any) => setInputKey(String(e?.target?.value ?? ''))}
+            >
+              <VscodeOption value="">input port…</VscodeOption>
+              {inputPorts.map((p) => (
+                <VscodeOption key={p.name} value={p.name}>
+                  {p.name} ({p.valueType})
+                </VscodeOption>
+              ))}
+            </VscodeSingleSelect>
+            <VscodeSingleSelect
+              value={outputKey}
+              onChange={(e: any) =>
+                setOutputKey(String(e?.target?.value ?? ''))
+              }
+            >
+              <VscodeOption value="">output port…</VscodeOption>
+              {outputPorts.map((p) => (
+                <VscodeOption key={p.name} value={p.name}>
+                  {p.name} ({p.valueType})
+                </VscodeOption>
+              ))}
+            </VscodeSingleSelect>
+          </>
+        )}
+
+        {portsMissing && (
+          <span className={styles.empty}>
+            “{nodeType}” has no {inputPorts.length === 0 ? `${from} input` : ''}
+            {inputPorts.length === 0 && outputPorts.length === 0 ? ' / ' : ''}
+            {outputPorts.length === 0 ? `${to} output` : ''} , not a valid
+            converter for {from} → {to}.
+          </span>
+        )}
+
+        <VscodeButton secondary disabled={!canAdd} onClick={add}>
+          + Add conversion
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};