@xdelivered/emberflow 0.4.0 → 0.5.0

package/server/sourceNavRoute.test.ts

@@ -0,0 +1,163 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { spawn, type ChildProcess } from 'node:child_process';
+import { mkdtempSync, realpathSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+// End-to-end coverage of GET /source-file plus the nodesPayload sourceRef
+// wiring, through the real runner subprocess (same harness as
+// diagnosticsRoute.test.ts). Uses the regression fixture shape:
+// DeriveShipmentActuals registered from nodes.mjs, whose handler imports
+// deriveTrackingActual from shipment-logic.mjs.
+
+let proc: ChildProcess;
+const PORT = 8157;
+const base = `http://127.0.0.1:${PORT}`;
+let projectDir: string;
+
+async function waitHealthy(url: string, tries = 40): Promise<void> {
+  for (let i = 0; i < tries; i++) {
+    try {
+      if ((await fetch(url)).ok) return;
+    } catch {
+      /* not up yet */
+    }
+    await new Promise((r) => setTimeout(r, 150));
+  }
+  throw new Error('runner did not become healthy');
+}
+
+function sourceFileUrl(path: string): string {
+  return `${base}/api/source-file?${new URLSearchParams({ path })}`;
+}
+
+beforeAll(async () => {
+  projectDir = realpathSync(mkdtempSync(join(tmpdir(), 'sourcenavroute-')));
+  const w = (rel: string, content: string): void => writeFileSync(join(projectDir, rel), content);
+  w(
+    'shipment-logic.mjs',
+    [
+      'function nestedHelper(shipment) {', // 1
+      '  return (shipment.weight ?? 0) * 2;', // 2
+      '}', // 3
+      '', // 4
+      'export function deriveTrackingActual(shipment) {', // 5
+      '  return nestedHelper(shipment);', // 6
+      '}', // 7
+      '',
+    ].join('\n'),
+  );
+  w(
+    'nodes.mjs',
+    [
+      "import { deriveTrackingActual } from './shipment-logic.mjs';", // 1
+      '', // 2
+      'export function registerNodes(registry) {', // 3
+      '  registry.register(', // 4
+      "    { type: 'DeriveShipmentActuals', label: 'Derive Shipment Actuals' },", // 5
+      '    async (ctx) => ({ actual: deriveTrackingActual(ctx.input) }),', // 6
+      '  );', // 7
+      '}', // 8
+      '',
+    ].join('\n'),
+  );
+  w(
+    'emberflow.config.mjs',
+    ["import { registerNodes } from './nodes.mjs';", 'export default { registerNodes };', ''].join(
+      '\n',
+    ),
+  );
+  w('.env', 'TOP_SECRET=shh\n');
+
+  proc = spawn('npx', ['tsx', 'server/index.ts'], {
+    env: {
+      ...process.env,
+      EMBERFLOW_RUNNER_PORT: String(PORT),
+      EMBERFLOW_PROJECT: projectDir,
+    },
+    stdio: 'ignore',
+  });
+  await waitHealthy(`${base}/healthz`);
+}, 20_000);
+
+afterAll(() => {
+  proc?.kill();
+  if (projectDir) rmSync(projectDir, { recursive: true, force: true });
+});
+
+describe('GET /nodes sourceRef wiring', () => {
+  it('carries a repo-relative sourceRef for the project node and builtin flag for package nodes', async () => {
+    const res = await fetch(`${base}/api/nodes`);
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as {
+      nodes: Array<{ type: string; sourceRef?: { file: string; line?: number }; builtin?: boolean }>;
+    };
+    const project = body.nodes.find((n) => n.type === 'DeriveShipmentActuals');
+    expect(project).toBeDefined();
+    expect(project!.sourceRef).toEqual({ file: 'nodes.mjs', line: 4 });
+    expect(project!.builtin).toBeUndefined();
+
+    const builtin = body.nodes.find((n) => n.type === 'ValidateCredentials');
+    expect(builtin).toBeDefined();
+    expect(builtin!.builtin).toBe(true);
+    expect(builtin!.sourceRef).toBeUndefined();
+  });
+});
+
+describe('GET /source-file', () => {
+  it('serves the handler module with the imported helper resolved to its project file', async () => {
+    const res = await fetch(sourceFileUrl('nodes.mjs'));
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as {
+      path: string;
+      content: string;
+      language: string;
+      symbols: {
+        imports: Array<{ local: string; resolution: { kind: string; path?: string; line?: number } }>;
+      };
+    };
+    expect(body.path).toBe('nodes.mjs');
+    expect(body.language).toBe('js');
+    expect(body.content).toContain('DeriveShipmentActuals');
+    const imp = body.symbols.imports.find((i) => i.local === 'deriveTrackingActual');
+    expect(imp!.resolution).toEqual({ kind: 'project', path: 'shipment-logic.mjs', line: 5 });
+  });
+
+  it('exposes declaration lines on the helper module', async () => {
+    const res = await fetch(sourceFileUrl('shipment-logic.mjs'));
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as {
+      symbols: {
+        declarations: Array<{ name: string; line: number; endLine: number; exported: boolean }>;
+      };
+    };
+    const derive = body.symbols.declarations.find((d) => d.name === 'deriveTrackingActual');
+    expect(derive).toMatchObject({ line: 5, endLine: 7, exported: true });
+  });
+
+  it('400s on a traversal path without echoing it', async () => {
+    const res = await fetch(sourceFileUrl('../../etc/passwd'));
+    expect(res.status).toBe(400);
+    const body = (await res.json()) as { error: string };
+    expect(body.error).not.toContain('passwd');
+  });
+
+  it('400s on secret basenames and node_modules paths', async () => {
+    for (const p of ['.env', 'node_modules/x/index.js']) {
+      const res = await fetch(sourceFileUrl(p));
+      expect(res.status).toBe(400);
+      const body = (await res.json()) as { error: string };
+      expect(body.error).not.toContain(p);
+    }
+  });
+
+  it('400s when the path param is missing', async () => {
+    const res = await fetch(`${base}/api/source-file`);
+    expect(res.status).toBe(400);
+  });
+
+  it('404s for a missing file inside the project', async () => {
+    const res = await fetch(sourceFileUrl('missing.mjs'));
+    expect(res.status).toBe(404);
+  });
+});

package/src/components/Inspector.tsx

@@ -4,8 +4,7 @@ import { BranchRulesEditor } from './BranchRulesEditor';
 import { ExecutionPager } from './ExecutionPager';
 import { NodeRunModal } from './NodeRunModal';
 import { Json } from './Json';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { NodeCodeView } from './SourceNavigator';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
@@ -781,6 +780,8 @@ export function Inspector() {
   const outputValue = state?.output as Record<string, unknown> | undefined;
   const executions = state?.executions;
   const source = registry.has(node.type) ? (registry.getSource(node.type) ?? '') : '';
+  const sourceRef = registry.has(node.type) ? registry.getSourceRef(node.type) : undefined;
+  const builtinNode = registry.has(node.type) ? registry.isBuiltin(node.type) : false;
 
   const codeDialog = (
     <Dialog open={codeOpen} onOpenChange={setCodeOpen}>
@@ -790,30 +791,12 @@ export function Inspector() {
           <Badge variant="mono">{node.type}</Badge>
         </DialogTitle>
         <DialogDescription>{definition?.description ?? 'Node implementation'}</DialogDescription>
-        <div className="min-h-0 flex-1 overflow-auto rounded-md border border-border bg-background">
-          <SyntaxHighlighter
-            language="javascript"
-            style={vscDarkPlus}
-            showLineNumbers
-            customStyle={{
-              margin: 0,
-              background: 'transparent',
-              fontSize: '12.5px',
-              lineHeight: 1.6,
-              padding: '12px 2px',
-            }}
-            codeTagProps={{ style: { background: 'transparent', textShadow: 'none' } }}
-            lineNumberStyle={{
-              color: 'var(--muted-foreground)',
-              opacity: 0.35,
-              background: 'transparent',
-              minWidth: '2.75em',
-              paddingRight: '1em',
-            }}
-          >
-            {source}
-          </SyntaxHighlighter>
-        </div>
+        <NodeCodeView
+          nodeType={node.type}
+          source={source}
+          sourceRef={sourceRef}
+          builtin={builtinNode}
+        />
       </DialogContent>
     </Dialog>
   );

package/src/components/SourceNavigator.test.tsx

@@ -0,0 +1,226 @@
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { NodeCodeView, SourceNavigator } from './SourceNavigator';
+import type { SourceFileFetchResult, SourceFilePayload } from '../store/sourceNavClient';
+
+// Props-driven fixtures: renderToStaticMarkup never runs effects, so the
+// fetch cache is pre-populated via initialFiles and the fetcher is inert.
+const neverFetch = () => new Promise<SourceFileFetchResult>(() => {});
+
+const NODES_MJS: SourceFilePayload = {
+  path: 'nodes.mjs',
+  content: [
+    "import { deriveTrackingActual } from './shipment-logic.mjs';",
+    "import express from 'express';",
+    "import { createHash } from 'node:crypto';",
+    'const RATE = 1.2;',
+    'export function handler(input) {',
+    '  return deriveTrackingActual(input) * RATE;',
+    '}',
+  ].join('\n'),
+  language: 'js',
+  symbols: {
+    declarations: [
+      { name: 'RATE', kind: 'const', line: 4, endLine: 4, exported: false },
+      { name: 'handler', kind: 'fn', line: 5, endLine: 7, exported: true },
+    ],
+    imports: [
+      {
+        name: 'deriveTrackingActual',
+        local: 'deriveTrackingActual',
+        from: './shipment-logic.mjs',
+        resolution: { kind: 'project', path: 'shipment-logic.mjs', line: 5 },
+      },
+      {
+        name: 'default',
+        local: 'express',
+        from: 'express',
+        resolution: { kind: 'external', package: 'express' },
+      },
+      {
+        name: 'createHash',
+        local: 'createHash',
+        from: 'node:crypto',
+        resolution: { kind: 'builtin' },
+      },
+      {
+        name: 'import()',
+        local: '',
+        from: 'x',
+        resolution: { kind: 'unresolved', reason: 'dynamic import target is computed' },
+      },
+      {
+        name: '*',
+        local: '',
+        from: './polyfill.mjs',
+        resolution: { kind: 'project', path: 'polyfill.mjs' },
+      },
+    ],
+    reexports: [],
+  },
+};
+
+const SHIPMENT_MJS: SourceFilePayload = {
+  path: 'shipment-logic.mjs',
+  content: 'export function deriveTrackingActual(input) { return input.actual; }',
+  language: 'js',
+  symbols: {
+    declarations: [
+      { name: 'deriveTrackingActual', kind: 'fn', line: 1, endLine: 1, exported: true },
+    ],
+    imports: [],
+    reexports: [],
+  },
+};
+
+const files = (payload: SourceFilePayload): Record<string, SourceFileFetchResult> => ({
+  [payload.path]: { ok: true, payload },
+});
+
+/** Highlighting splits code across token spans; strip tags to assert on the raw text. */
+const text = (html: string): string => html.replace(/<[^>]+>/g, '');
+
+describe('SourceNavigator', () => {
+  it('renders the file content with local declarations linkified for same-file navigation', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="nodes.mjs"
+        entryLine={5}
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={files(NODES_MJS)}
+      />,
+    );
+    expect(out).toContain('deriveTrackingActual');
+    expect(out).toContain('RATE');
+    // Declaration + import identifiers render as link buttons (token linking).
+    expect(out).toContain('source-nav-link');
+    expect(out).toContain('Jump to line 5'); // handler declaration
+    expect(out).toContain('Open shipment-logic.mjs:5'); // project import token
+  });
+
+  it('renders a project import as a clickable path:line link in the Referenced code panel', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="nodes.mjs"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={files(NODES_MJS)}
+      />,
+    );
+    expect(out).toContain('Referenced code');
+    expect(out).toContain('shipment-logic.mjs:5');
+    expect(out).toContain('project');
+  });
+
+  it('badges external, builtin, and unresolved (with reason) references', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="nodes.mjs"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={files(NODES_MJS)}
+      />,
+    );
+    expect(out).toContain('package: express');
+    expect(out).toContain('Node.js builtin');
+    expect(out).toContain('unresolved — dynamic import target is computed');
+    // Imports without a local binding are still listed: dynamic + side-effect.
+    expect(out).toContain('import()');
+    expect(out).toContain('(side-effect import)');
+  });
+
+  it('shows the breadcrumb trail and a Back button at depth > 1', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="nodes.mjs"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialStack={[{ path: 'nodes.mjs', line: 5 }, { path: 'shipment-logic.mjs', line: 5 }]}
+        initialFiles={{ ...files(NODES_MJS), ...files(SHIPMENT_MJS) }}
+      />,
+    );
+    expect(out).toContain('nodes.mjs');
+    expect(out).toContain('shipment-logic.mjs');
+    expect(out).toContain('›');
+    expect(out).toContain('Back');
+    // Current file's content is on screen, not the ancestor's.
+    expect(text(out)).toContain('return input.actual;');
+  });
+
+  it('hides Back at depth 1', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="nodes.mjs"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={files(NODES_MJS)}
+      />,
+    );
+    expect(out).not.toContain('Back');
+  });
+
+  it('shows the resolver-unavailable banner while still rendering content', () => {
+    const degraded: SourceFilePayload = {
+      ...SHIPMENT_MJS,
+      resolver: 'unavailable',
+      symbols: { declarations: [], imports: [], reexports: [] },
+    };
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile="shipment-logic.mjs"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={files(degraded)}
+      />,
+    );
+    expect(out).toContain('Symbol resolution unavailable (typescript not installed)');
+    expect(text(out)).toContain('return input.actual;');
+  });
+
+  it('renders the fetch error text (denied / missing / runner down) instead of code', () => {
+    const out = renderToStaticMarkup(
+      <SourceNavigator
+        entryFile=".env"
+        nodeType="DeriveShipmentActuals"
+        fetcher={neverFetch}
+        initialFiles={{ '.env': { ok: false, error: 'Access denied: path not servable' } }}
+      />,
+    );
+    expect(out).toContain('Access denied: path not servable');
+    expect(out).not.toContain('Referenced code');
+  });
+});
+
+describe('NodeCodeView (Inspector code dialog body)', () => {
+  it('without sourceRef renders exactly the legacy highlighter view — no Referenced code', () => {
+    const out = renderToStaticMarkup(
+      <NodeCodeView nodeType="Map" source="async (input) => input" fetcher={neverFetch} />,
+    );
+    expect(out).toContain('input');
+    expect(out).not.toContain('Referenced code');
+    expect(out).not.toContain('Built-in node');
+    expect(out).not.toContain('source-nav-link');
+  });
+
+  it('builtin nodes keep the legacy view plus a quiet Built-in node badge', () => {
+    const out = renderToStaticMarkup(
+      <NodeCodeView nodeType="Input" source="async () => ({})" builtin fetcher={neverFetch} />,
+    );
+    expect(out).toContain('Built-in node');
+    expect(out).not.toContain('Referenced code');
+  });
+
+  it('with a sourceRef renders the SourceNavigator (breadcrumb + loading state pre-fetch)', () => {
+    const out = renderToStaticMarkup(
+      <NodeCodeView
+        nodeType="DeriveShipmentActuals"
+        source="ignored"
+        sourceRef={{ file: 'nodes.mjs', line: 4 }}
+        fetcher={neverFetch}
+      />,
+    );
+    expect(out).toContain('nodes.mjs');
+    expect(out).toContain('Loading source…');
+  });
+});