@xdelivered/emberflow 0.2.0

package/src/lib/useTailAnchor.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Chat-style tail anchoring for streaming log lists: follow the latest entry
+ * only while the user is at (or near) the bottom. Scrolling up detaches the
+ * follow; scrolling back within the threshold re-attaches it. `detached`
+ * lets callers show a "jump to latest" affordance while new entries arrive
+ * off-screen.
+ */
+export function useTailAnchor(
+  count: number,
+  options: { suspended?: boolean; threshold?: number } = {},
+): {
+  scrollerRef: (el: HTMLElement | null) => void;
+  endRef: React.RefObject<HTMLDivElement | null>;
+  detached: boolean;
+  jumpToLatest: () => void;
+} {
+  const { suspended = false, threshold = 48 } = options;
+  const atBottom = useRef(true);
+  const scroller = useRef<HTMLElement | null>(null);
+  const endRef = useRef<HTMLDivElement | null>(null);
+  const [detached, setDetached] = useState(false);
+
+  const onScroll = useCallback(() => {
+    const el = scroller.current;
+    if (!el) return;
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
+    atBottom.current = nearBottom;
+    setDetached((d) => (d === !nearBottom ? d : !nearBottom));
+  }, [threshold]);
+
+  const scrollerRef = useCallback(
+    (el: HTMLElement | null) => {
+      scroller.current?.removeEventListener('scroll', onScroll);
+      scroller.current = el;
+      el?.addEventListener('scroll', onScroll, { passive: true });
+    },
+    [onScroll],
+  );
+
+  useEffect(() => {
+    if (!suspended && atBottom.current) endRef.current?.scrollIntoView({ block: 'end' });
+  }, [count, suspended]);
+
+  const jumpToLatest = useCallback(() => {
+    atBottom.current = true;
+    setDetached(false);
+    endRef.current?.scrollIntoView({ block: 'end', behavior: 'smooth' });
+  }, []);
+
+  return { scrollerRef, endRef, detached, jumpToLatest };
+}

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import '@fontsource-variable/inter/index.css';
+import '@fontsource/ibm-plex-mono/400.css';
+import '@fontsource/ibm-plex-mono/500.css';
+import './globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/nodes/anomaly.test.ts

@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createDefaultRegistry } from './index';
+import { startRun, type WorkflowDefinition } from '../engine';
+
+const SERIES = [
+  { timestamp: '2026-01-01T00:00:00.000Z', value: 100 },
+  { timestamp: '2026-01-01T01:00:00.000Z', value: 105 },
+];
+
+function detectEntireFlow(config: Record<string, unknown>): WorkflowDefinition {
+  return {
+    id: 'detect-entire-test',
+    name: 'Detect Entire (test)',
+    version: 1,
+    nodes: [
+      {
+        id: 'detect',
+        type: 'DetectEntireSeries',
+        label: 'Detect Entire Series',
+        position: { x: 0, y: 0 },
+        config: { series: SERIES, sensitivity: 80, ...config },
+      },
+    ],
+    edges: [],
+    createdAt: '2026-01-01T00:00:00Z',
+    updatedAt: '2026-01-01T00:00:00Z',
+  };
+}
+
+function stubFetch() {
+  const calls: Array<{ url: string; headers: Record<string, string> }> = [];
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url: string, init?: RequestInit) => {
+      calls.push({ url, headers: (init?.headers as Record<string, string>) ?? {} });
+      return {
+        ok: true,
+        status: 200,
+        json: async () => ({
+          isAnomaly: [false, false],
+          expectedValues: [100, 105],
+          upperMargins: [110, 115],
+          lowerMargins: [90, 95],
+          period: 24,
+        }),
+        text: async () => '',
+      } as Response;
+    }),
+  );
+  return calls;
+}
+
+describe('anomaly node key resolution', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('prefers ctx.secrets.ANOMALY_API_KEY over config.apiKey', async () => {
+    const calls = stubFetch();
+    const registry = createDefaultRegistry(0);
+    const run = await startRun({
+      flow: detectEntireFlow({ apiKey: 'config-key' }),
+      registry,
+      secrets: { ANOMALY_API_KEY: 'secret-key' },
+    }).runToEnd();
+
+    expect(run.status).toBe('succeeded');
+    expect(calls).toHaveLength(1);
+    expect(calls[0].headers['x-api-key']).toBe('secret-key');
+  });
+
+  it('falls back to config.apiKey when no secret is set', async () => {
+    const calls = stubFetch();
+    const registry = createDefaultRegistry(0);
+    const run = await startRun({
+      flow: detectEntireFlow({ apiKey: 'config-key' }),
+      registry,
+      secrets: {},
+    }).runToEnd();
+
+    expect(run.status).toBe('succeeded');
+    expect(calls).toHaveLength(1);
+    expect(calls[0].headers['x-api-key']).toBe('config-key');
+  });
+
+  it('fails the node with "No API key" when neither secret nor config is set', async () => {
+    stubFetch();
+    const registry = createDefaultRegistry(0);
+    const run = await startRun({
+      flow: detectEntireFlow({}),
+      registry,
+      secrets: {},
+    }).runToEnd();
+
+    expect(run.status).toBe('failed');
+    expect(run.nodeStates.detect.error).toBe('No API key: set secret ANOMALY_API_KEY or config apiKey');
+  });
+});