Part of #1 — data lineage canvas. Depends on the wasm export. No new JS deps (reuse @xyflow/svelte + @dagrejs/dagre).
Changes (web-ide/)
src/lib/pds.js: add symbolLineage(modules, fqn) wrapping the new export (follow the symbolScene wrapper).src/lib/components/DataLineageCanvas.svelte (new): modeled on components/C4Flow.svelte (SvelteFlow + dagre, rankdir: "LR"). Renders the flow graph; side list shows usages (role + file:line, clickable → selectNode/goto).src/lib/components/DiagramPane.svelte: route scene.type === "lineage" (or a lineageMode flag) to DataLineageCanvas.src/lib/components/C4Flow.svelte: node popover gets a "Show data lineage" button, shown only when node.kind === "data", firing a new onlineage(fqn) prop.src/routes/+page.svelte: add onlineage handler → set lineage state and switch the view (extend the view toggle / add a lineageMode fqn the canvas $derived branches on, calling symbolLineage(allModules, fqn)). Wire the editor hover / find-usages popover to offer lineage for data symbols too.
Rebuild wasm into the IDE: npm run build:wasm.
E2E verification
cd web-ide && npm run build:wasm && npm run dev → load the sample workspace → select AccountData → Show data lineage. Confirm: canvas shows AccountRecord → AccountData flow; usages list includes MainframeFacade.GetAccountData (return type + from-target) and the ViewAccounts/Summary return-type sites; clicking a usage navigates. Drive with the run skill / playwright MCP and screenshot.
Part of #1 — data lineage canvas. Depends on the wasm export. No new JS deps (reuse
@xyflow/svelte+@dagrejs/dagre).Changes (
web-ide/)src/lib/pds.js: addsymbolLineage(modules, fqn)wrapping the new export (follow thesymbolScenewrapper).src/lib/components/DataLineageCanvas.svelte(new): modeled oncomponents/C4Flow.svelte(SvelteFlow + dagre,rankdir: "LR"). Renders the flow graph; side list showsusages(role +file:line, clickable →selectNode/goto).src/lib/components/DiagramPane.svelte: routescene.type === "lineage"(or alineageModeflag) toDataLineageCanvas.src/lib/components/C4Flow.svelte: node popover gets a "Show data lineage" button, shown only whennode.kind === "data", firing a newonlineage(fqn)prop.src/routes/+page.svelte: addonlineagehandler → set lineage state and switch the view (extend the view toggle / add alineageModefqn thecanvas$derivedbranches on, callingsymbolLineage(allModules, fqn)). Wire the editor hover / find-usages popover to offer lineage fordatasymbols too.Rebuild wasm into the IDE:
npm run build:wasm.E2E verification
cd web-ide && npm run build:wasm && npm run dev→ load the sample workspace → selectAccountData→ Show data lineage. Confirm: canvas showsAccountRecord → AccountDataflow; usages list includesMainframeFacade.GetAccountData(return type + from-target) and theViewAccounts/Summaryreturn-type sites; clicking a usage navigates. Drive with the run skill / playwright MCP and screenshot.