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

package/tests/settings.test.ts

@@ -0,0 +1,178 @@
+import { describe, it, expect, vi } from 'vitest';
+import { System } from '../src/system/system.js';
+import { registerDefaults } from '../src/generators/registerDefaults.js';
+
+describe('editor settings serialization', () => {
+  it('round-trips toggles and custom conversions', () => {
+    const a = new System();
+    a.systemSettings.getState().setAutoConvert(false);
+    a.systemSettings.getState().setGridSize(42);
+    a.registerConversion({ from: 'integer', to: 'string', nodeType: 'x/conv' });
+
+    const json = a.serializeSettings();
+
+    const b = new System();
+    b.applySettings(json);
+
+    expect(b.systemSettings.getState().autoConvert).toBe(false);
+    expect(b.systemSettings.getState().gridSize).toBe(42);
+    expect(b.conversionStore.getState().conversions).toEqual([
+      { from: 'integer', to: 'string', nodeType: 'x/conv' }
+    ]);
+  });
+
+  it('round-trips settings that the old hand-written store dropped', () => {
+    // inlineValues lacked a setter (so applySettings could not restore it) and
+    // setShowMenu was untyped , both fixed by the declarative schema.
+    const a = new System();
+    a.systemSettings.getState().setInlineValues(true);
+    a.systemSettings.getState().setShowMenu(false);
+
+    const b = new System();
+    b.applySettings(a.serializeSettings());
+
+    expect(b.systemSettings.getState().inlineValues).toBe(true);
+    expect(b.systemSettings.getState().showMenu).toBe(false);
+  });
+
+  it('does not persist transient settings (showSearch)', () => {
+    const a = new System();
+    a.systemSettings.getState().setShowSearch(true);
+    expect(a.serializeSettings().settings).not.toHaveProperty('showSearch');
+  });
+});
+
+describe('plugin-contributed settings (schema registry)', () => {
+  it('seeds the built-in descriptors so the panel auto-generates', () => {
+    const sys = new System();
+    const keys = sys.settingsSchema.getState().settings.map((s) => s.key);
+    expect(keys).toContain('edgeType');
+    expect(keys).toContain('autoConvert');
+    expect(sys.settingsSchema.getState().sectionOrder).toContain('Layout');
+  });
+
+  it('registerSetting adds a descriptor and seeds its default value', () => {
+    const sys = new System();
+    sys.registerSetting({
+      key: 'myPlugin.apiUrl',
+      section: 'My Plugin',
+      type: 'string',
+      default: 'https://example.com',
+      title: 'API URL'
+    });
+
+    expect(sys.getSetting('myPlugin.apiUrl')).toBe('https://example.com');
+    expect(
+      sys.settingsSchema
+        .getState()
+        .settings.some((s) => s.key === 'myPlugin.apiUrl')
+    ).toBe(true);
+    expect(sys.settingsSchema.getState().sectionOrder).toContain('My Plugin');
+  });
+
+  it('ignores a duplicate key without clobbering the original', () => {
+    const sys = new System();
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      // edgeType is a built-in; a plugin must not be able to redefine it.
+      sys.registerSetting({
+        key: 'edgeType',
+        section: 'Hijack',
+        type: 'boolean',
+        default: true
+      });
+      expect(warn).toHaveBeenCalled();
+      const edge = sys.settingsSchema
+        .getState()
+        .settings.find((s) => s.key === 'edgeType');
+      expect(edge?.section).toBe('Layout');
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it('round-trips plugin setting values through persistence', () => {
+    const a = new System();
+    a.registerSetting({
+      key: 'myPlugin.autoStart',
+      section: 'My Plugin',
+      type: 'boolean',
+      default: false
+    });
+    a.setSetting('myPlugin.autoStart', true);
+
+    const json = a.serializeSettings();
+    expect(json.settings).toHaveProperty('myPlugin.autoStart', true);
+
+    const b = new System();
+    b.registerSetting({
+      key: 'myPlugin.autoStart',
+      section: 'My Plugin',
+      type: 'boolean',
+      default: false
+    });
+    b.applySettings(json);
+    expect(b.getSetting('myPlugin.autoStart')).toBe(true);
+  });
+
+  it('excludes persist:false plugin settings from serialization', () => {
+    const sys = new System();
+    sys.registerSetting({
+      key: 'myPlugin.scratch',
+      section: 'My Plugin',
+      type: 'boolean',
+      default: false,
+      persist: false
+    });
+    sys.setSetting('myPlugin.scratch', true);
+    expect(sys.serializeSettings().settings).not.toHaveProperty(
+      'myPlugin.scratch'
+    );
+  });
+});
+
+describe('registerDefaults', () => {
+  it('registers built-in generators and is idempotent per editor', () => {
+    const sys = new System();
+    registerDefaults(sys);
+    const first = sys.socketGeneratorStore.getState().generators.length;
+    expect(first).toBeGreaterThan(0);
+
+    // Second call (e.g. another graph tab mounting) is a no-op.
+    expect(() => registerDefaults(sys)).not.toThrow();
+    expect(sys.socketGeneratorStore.getState().generators.length).toBe(first);
+  });
+
+  it('persists to and loads from a storage adapter', () => {
+    vi.useFakeTimers();
+    try {
+      const backing: Record<string, string> = {};
+      const storage = {
+        getItem: (k: string) => backing[k] ?? null,
+        setItem: (k: string, v: string) => {
+          backing[k] = v;
+        }
+      };
+
+      const a = new System();
+      a.enableSettingsPersistence(storage);
+      a.registerConversion({ from: 'float', to: 'string', nodeType: 'f/conv' });
+      a.systemSettings.getState().setShowGrid(false);
+      vi.advanceTimersByTime(400); // flush the debounced save
+
+      expect(Object.keys(backing).length).toBe(1);
+
+      // A fresh system loads the saved state on init.
+      const b = new System();
+      b.enableSettingsPersistence(storage);
+      expect(b.systemSettings.getState().showGrid).toBe(false);
+      expect(b.conversionStore.getState().conversions).toContainEqual({
+        from: 'float',
+        to: 'string',
+        nodeType: 'f/conv'
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/tests/traceStore.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { traceStoreFactory } from '../src/store/traces.js';
+import type { TraceSpan } from '../src/store/traces.js';
+
+const newStore = () => traceStoreFactory({} as any).getState();
+
+const usedLanes = (spans: TraceSpan[], size: number): Set<number> =>
+  new Set(spans.slice(0, size).map((s) => s.lane));
+
+describe('trace store lane allocation', () => {
+  it('reuses a lane for sequential spans (closed before the next opens)', () => {
+    const s = newStore();
+    // A opens and closes, then B opens and closes , never overlapping.
+    s.addSpan({ nodeId: 'a', name: 'a', start: 0, end: Number.NaN });
+    s.updateSpan('a', { end: 1 });
+    s.addSpan({ nodeId: 'b', name: 'b', start: 2, end: Number.NaN });
+    s.updateSpan('b', { end: 3 });
+
+    const c = s.collector;
+    expect(c.size).toBe(2);
+    // Both land in lane 0 → the panel shows a single lane.
+    expect(usedLanes(c.spans, c.size)).toEqual(new Set([0]));
+  });
+
+  it('allocates separate lanes for concurrent (overlapping) spans', () => {
+    const s = newStore();
+    // Both open at once (no end between them) → must not share a lane.
+    s.addSpan({ nodeId: 'a', name: 'a', start: 0, end: Number.NaN });
+    s.addSpan({ nodeId: 'b', name: 'b', start: 0, end: Number.NaN });
+
+    const c = s.collector;
+    expect(c.size).toBe(2);
+    expect(usedLanes(c.spans, c.size)).toEqual(new Set([0, 1]));
+  });
+
+  it('keeps an open span as open (NaN end) until updateSpan closes it', () => {
+    const s = newStore();
+    s.addSpan({ nodeId: 'a', name: 'a', start: 5, end: Number.NaN });
+
+    const open = s.collector.spans[0]!;
+    expect(Number.isNaN(open.end)).toBe(true);
+
+    s.updateSpan('a', { end: 9 });
+    expect(s.collector.spans[0]!.end).toBe(9);
+  });
+});

package/tests/visual/README.md

@@ -32,7 +32,7 @@ pnpm test:visual:update
 
 ## How it works
 
-- Config: [`vitest.visual.config.ts`](../../vitest.visual.config.ts) — browser
+- Config: [`vitest.visual.config.ts`](../../vitest.visual.config.ts) , browser
   mode, Playwright/Chromium, headless, fixed `900x700` viewport.
 - Test files: `tests/visual/**/*.visual.test.tsx`.
 - Each panel is rendered inside a fixed-size `640x480` frame on the editor
@@ -60,5 +60,5 @@ When a new panel is added under `src/components/panels`, add one entry to the
 ```
 
 Then run `pnpm test:visual:update` to create the baseline, eyeball the generated
-PNG, and commit it. Keep it to a single representative snapshot per panel — the
+PNG, and commit it. Keep it to a single representative snapshot per panel , the
 unit tests under `tests/util` and `tests/components` cover finer-grained logic.

package/tests/visual/panels.visual.test.tsx

@@ -9,7 +9,6 @@ import { cleanup, render } from 'vitest-browser-react';
 import { DefaultSystemProvider } from '../../stories/defaults/defaultStoryProvider';
 
 import { AlignmentPanel } from '@/components/panels/alignment';
-import { ConversationPanel } from '@/components/panels/conversation';
 import { EventsPanel } from '@/components/panels/events';
 import { HistoryPanel } from '@/components/panels/history';
 import { KeymapsPanel } from '@/components/panels/keymaps';
@@ -23,6 +22,7 @@ import { SearchPanel } from '@/components/panels/search';
 import { Settings } from '@/components/panels/systemSettings';
 import { TracesPanel } from '@/components/panels/traces';
 import { VariablesPanel } from '@/components/panels/variables';
+import { LocalGraphRunnerPanel } from '@/plugin/graphrunner-local';
 
 /**
  * One pixel-snapshot per panel. The shared {@link DefaultSystemProvider} (the
@@ -31,7 +31,6 @@ import { VariablesPanel } from '@/components/panels/variables';
  */
 const panels: ReadonlyArray<readonly [name: string, element: ReactElement]> = [
   ['alignment', <AlignmentPanel />],
-  ['conversation', <ConversationPanel />],
   ['events', <EventsPanel />],
   ['history', <HistoryPanel />],
   ['keymaps', <KeymapsPanel />],
@@ -44,7 +43,8 @@ const panels: ReadonlyArray<readonly [name: string, element: ReactElement]> = [
   ['search', <SearchPanel />],
   ['systemSettings', <Settings />],
   ['traces', <TracesPanel />],
-  ['variables', <VariablesPanel />]
+  ['variables', <VariablesPanel />],
+  ['localGraphRunner', <LocalGraphRunnerPanel />]
 ];
 
 afterEach(() => {

package/tests/wasdPan.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { isEventFromEditable } from '../src/hooks/useWasdPan.js';
+
+const keydownOn = (element: HTMLElement): KeyboardEvent => {
+  document.body.appendChild(element);
+  let captured: KeyboardEvent | undefined;
+  element.addEventListener('keydown', (e) => {
+    captured = e;
+  });
+  element.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'w', bubbles: true })
+  );
+  element.remove();
+  if (!captured) throw new Error('keydown was not captured');
+  return captured;
+};
+
+describe('WASD pan editable guard', () => {
+  it('treats form fields as editable (no pan)', () => {
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('input')))
+    ).toBe(true);
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('textarea')))
+    ).toBe(true);
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('select')))
+    ).toBe(true);
+  });
+
+  it('treats contenteditable divs (e.g. the note editor) as editable', () => {
+    const editor = document.createElement('div');
+    editor.contentEditable = 'true';
+    expect(isEventFromEditable(keydownOn(editor))).toBe(true);
+  });
+
+  it('treats inputs inside shadow DOM (e.g. vscode-textfield) as editable', () => {
+    // The conversation panel's chat input is a web component; at a window-level
+    // listener the event is retargeted to the host element, so the guard must
+    // look through composedPath. Simulate that with a shadow-DOM input and a
+    // document-level capture listener (composedPath is only populated during
+    // dispatch).
+    const host = document.createElement('x-textfield');
+    const shadow = host.attachShadow({ mode: 'open' });
+    const inner = document.createElement('input');
+    shadow.appendChild(inner);
+    document.body.appendChild(host);
+
+    let result: boolean | undefined;
+    const listener = (e: Event) => {
+      result = isEventFromEditable(e as KeyboardEvent);
+    };
+    document.addEventListener('keydown', listener, { capture: true });
+    inner.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'w', bubbles: true, composed: true })
+    );
+    document.removeEventListener('keydown', listener, { capture: true });
+    host.remove();
+
+    expect(result).toBe(true);
+  });
+
+  it('does not treat plain elements as editable (pan proceeds)', () => {
+    expect(isEventFromEditable(keydownOn(document.createElement('div')))).toBe(
+      false
+    );
+    expect(isEventFromEditable(keydownOn(document.createElement('span')))).toBe(
+      false
+    );
+  });
+});

package/vitest.config.ts

@@ -4,7 +4,7 @@ import { configDefaults, defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     // Visual/pixel regression tests run in a real browser via the dedicated
-    // vitest.visual.config.ts — keep them out of the happy-dom unit run.
+    // vitest.visual.config.ts , keep them out of the happy-dom unit run.
     exclude: [...configDefaults.exclude, '**/*.visual.test.{ts,tsx}'],
     watch: false,
     environment: 'happy-dom'

package/vitest.visual.config.ts

@@ -40,6 +40,13 @@ export default defineConfig({
     }
   },
   resolve: {
+    // The browser runner renders through vitest-browser-react, which can pull
+    // its own React/React-DOM copy (a different patch than the app's pinned
+    // 19.2.3). Two React instances means the renderer sets the hook dispatcher
+    // on one copy while the panels call hooks on the other, producing "Invalid
+    // hook call / more than one copy of React" and a null dispatcher. Force a
+    // single instance so the renderer and the components share it.
+    dedupe: ['react', 'react-dom'],
     alias: {
       '~': path.resolve(__dirname, './src'),
       '@': path.resolve(__dirname, './src')