@opensip-cli/dashboard 0.1.0

package/dist/code-paths/cytoscape-vendor.js

@@ -0,0 +1,68 @@
+/**
+ * Vendored Cytoscape emitter.
+ *
+ * Reads the committed `src/vendor/cytoscape-bundle.js` UMD blob at
+ * generation time and returns it as a JS string for inlining into the
+ * report's single `<script>` block. The bundle registers the `cytoscape`
+ * and `cytoscapeDagre` browser globals the Graph view (`view-graph.ts`)
+ * consumes — fully offline, no CDN, no network at view time.
+ *
+ * Architectural note: this module reads the bundle via `node:fs`, it does
+ * NOT `import 'cytoscape'`. That is deliberate — the `dashboard-no-ui-
+ * framework` dependency-cruiser rule forbids importing a visualization
+ * library into `packages/dashboard/src/`. The renderer reaches the report
+ * as committed source text, never as a module dependency. The `cytoscape`
+ * / `cytoscape-dagre` packages are devDependencies used only by the vendor
+ * build script (`scripts/vendor-cytoscape.mjs`), which lives outside
+ * `src/` and so is out of the rule's scope.
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const HERE = dirname(fileURLToPath(import.meta.url));
+/**
+ * Candidate locations for the committed bundle. The first is the build
+ * copy that lives next to the compiled module (`dist/vendor/` — produced
+ * by the `copy-vendor` build step and shipped in the published tarball);
+ * the rest resolve back to the source tree for the monorepo / test runs
+ * where `dist/vendor/` may not exist.
+ */
+const BUNDLE_CANDIDATES = [
+    join(HERE, '..', 'vendor', 'cytoscape-bundle.js'),
+    join(HERE, '..', '..', 'src', 'vendor', 'cytoscape-bundle.js'),
+];
+let cachedBundle = null;
+/**
+ * Read and cache the committed Cytoscape UMD bundle from the first candidate
+ * path that exists.
+ *
+ * @throws {Error} When the bundle is absent from every candidate path (the
+ *   `vendor:cytoscape` build step has not been run / the asset was not shipped).
+ */
+function readVendorBundle() {
+    if (cachedBundle !== null)
+        return cachedBundle;
+    for (const candidate of BUNDLE_CANDIDATES) {
+        try {
+            cachedBundle = readFileSync(candidate, 'utf8');
+            return cachedBundle;
+        }
+        catch {
+            // @swallow-ok candidate-path probe: a missing candidate is expected
+            // (dist vs src layout). The final `throw` below reports if ALL fail.
+            continue;
+        }
+    }
+    throw new Error('cytoscape-bundle.js not found. Run `pnpm --filter=@opensip-cli/dashboard vendor:cytoscape`.');
+}
+/**
+ * Emit the vendored Cytoscape UMD bundle as a JS string for inlining.
+ *
+ * MUST be concatenated into the Code Paths script BEFORE any view emitter
+ * that references the `cytoscape` global (i.e. before
+ * `dashboardViewGraphJs()`).
+ */
+export function dashboardCytoscapeVendorJs() {
+    return readVendorBundle();
+}
+//# sourceMappingURL=cytoscape-vendor.js.map

package/dist/code-paths/cytoscape-vendor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cytoscape-vendor.js","sourceRoot":"","sources":["../../src/code-paths/cytoscape-vendor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG;IACxB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,qBAAqB,CAAC;IACjD,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,CAAC;CAC/D,CAAC;AAEF,IAAI,YAAY,GAAkB,IAAI,CAAC;AAEvC;;;;;;GAMG;AACH,SAAS,gBAAgB;IACvB,IAAI,YAAY,KAAK,IAAI;QAAE,OAAO,YAAY,CAAC;IAC/C,KAAK,MAAM,SAAS,IAAI,iBAAiB,EAAE,CAAC;QAC1C,IAAI,CAAC;YACH,YAAY,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YAC/C,OAAO,YAAY,CAAC;QACtB,CAAC;QAAC,MAAM,CAAC;YACP,oEAAoE;YACpE,qEAAqE;YACrE,SAAS;QACX,CAAC;IACH,CAAC;IACD,MAAM,IAAI,KAAK,CACb,6FAA6F,CAC9F,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,0BAA0B;IACxC,OAAO,gBAAgB,EAAE,CAAC;AAC5B,CAAC"}

package/dist/code-paths/editor-link.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Editor deep-link URL generator.
+ *
+ * Reads the embedded `EDITOR_PROTOCOL` constant set by `generator.ts`
+ * (passed through from `dashboard.editor` in opensip-cli.config.yml).
+ * Recognized values: 'vscode', 'cursor'. Anything else returns null and
+ * the Function Card falls back to a "Copy path" button.
+ */
+export declare function dashboardEditorLinkJs(): string;
+//# sourceMappingURL=editor-link.d.ts.map

package/dist/code-paths/editor-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-link.d.ts","sourceRoot":"","sources":["../../src/code-paths/editor-link.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,wBAAgB,qBAAqB,IAAI,MAAM,CAU9C"}

package/dist/code-paths/editor-link.js

@@ -0,0 +1,20 @@
+/**
+ * Editor deep-link URL generator.
+ *
+ * Reads the embedded `EDITOR_PROTOCOL` constant set by `generator.ts`
+ * (passed through from `dashboard.editor` in opensip-cli.config.yml).
+ * Recognized values: 'vscode', 'cursor'. Anything else returns null and
+ * the Function Card falls back to a "Copy path" button.
+ */
+export function dashboardEditorLinkJs() {
+    return String.raw `
+function editorLinkUrl(filePath, line) {
+  if (typeof EDITOR_PROTOCOL !== 'string' || !EDITOR_PROTOCOL) return null;
+  if (EDITOR_PROTOCOL === 'vscode' || EDITOR_PROTOCOL === 'cursor') {
+    return EDITOR_PROTOCOL + '://file/' + filePath + ':' + (line || 1);
+  }
+  return null;
+}
+`;
+}
+//# sourceMappingURL=editor-link.js.map

package/dist/code-paths/editor-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-link.js","sourceRoot":"","sources":["../../src/code-paths/editor-link.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,UAAU,qBAAqB;IACnC,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQlB,CAAC;AACF,CAAC"}

package/dist/code-paths/filters.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Filter primitives for the Code Paths panel.
+ *
+ * The interactive "Filters" chip drawer that used to sit between the Explore
+ * subtab and the view tab bar was removed — the Visualization view owns its own
+ * controls and the other views don't need a shared chip bar. What remains is
+ * the small shared surface still consumed elsewhere:
+ *
+ *   - `filterState` — default, non-interactive filter (production-only, all
+ *     packages, all kinds). The Functions table reads it via `passesFilter`;
+ *     the Coupling drilldown passes it through. Nothing mutates it now.
+ *   - `passesFilter(occ, filterState)` — the per-row predicate the Functions
+ *     view (and the Coupling drilldown) applies.
+ *   - `packagesInCatalog(catalog)` / `KIND_LIST` — the package list and kind
+ *     vocabulary the Visualization controls (`graph-controls.ts`) drive their
+ *     Package and Kind selectors from.
+ */
+export declare function dashboardFiltersJs(): string;
+//# sourceMappingURL=filters.d.ts.map

package/dist/code-paths/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../src/code-paths/filters.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAgB,kBAAkB,IAAI,MAAM,CA4B3C"}

package/dist/code-paths/filters.js

@@ -0,0 +1,47 @@
+/**
+ * Filter primitives for the Code Paths panel.
+ *
+ * The interactive "Filters" chip drawer that used to sit between the Explore
+ * subtab and the view tab bar was removed — the Visualization view owns its own
+ * controls and the other views don't need a shared chip bar. What remains is
+ * the small shared surface still consumed elsewhere:
+ *
+ *   - `filterState` — default, non-interactive filter (production-only, all
+ *     packages, all kinds). The Functions table reads it via `passesFilter`;
+ *     the Coupling drilldown passes it through. Nothing mutates it now.
+ *   - `passesFilter(occ, filterState)` — the per-row predicate the Functions
+ *     view (and the Coupling drilldown) applies.
+ *   - `packagesInCatalog(catalog)` / `KIND_LIST` — the package list and kind
+ *     vocabulary the Visualization controls (`graph-controls.ts`) drive their
+ *     Package and Kind selectors from.
+ */
+export function dashboardFiltersJs() {
+    return String.raw `
+const filterState = {
+  packages: new Set(),
+  kinds: new Set(),
+  includeTests: false,
+};
+
+const KIND_LIST = ['function-declaration', 'function-expression', 'method', 'arrow', 'constructor', 'getter', 'setter', 'module-init'];
+
+function packagesInCatalog(catalog) {
+  const pkgs = new Set();
+  if (!catalog || !catalog.functions) return [];
+  for (const name of Object.keys(catalog.functions)) {
+    for (const occ of (catalog.functions[name] || [])) {
+      pkgs.add(pkgOf(occ));
+    }
+  }
+  return Array.from(pkgs).sort();
+}
+
+function passesFilter(occ, fs) {
+  if (!fs.includeTests && occ.inTestFile) return false;
+  if (fs.packages.size > 0 && !fs.packages.has(pkgOf(occ))) return false;
+  if (fs.kinds.size > 0 && !fs.kinds.has(occ.kind)) return false;
+  return true;
+}
+`;
+}
+//# sourceMappingURL=filters.js.map

package/dist/code-paths/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../src/code-paths/filters.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,UAAU,kBAAkB;IAChC,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BlB,CAAC;AACF,CAAC"}

package/dist/code-paths/function-card.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Universal Function Card overlay — opened by every view's row click.
+ *
+ * `openFunctionCard(bodyHash)` looks up the occurrence in
+ * `graphIndexes.byBodyHash`, renders a card with name + location +
+ * meta + callers + callees + action buttons, and appends a single
+ * `.function-card-overlay` element to <body>. Re-opening swaps the
+ * content of the same overlay (singleton invariant — §10.2).
+ *
+ * Closes on Escape key (panel orchestrator), close-button click, and click on
+ * the overlay backdrop. "Trace from entry" renders the shortest indexed path
+ * from an inferred entry point when one exists.
+ */
+export declare function dashboardFunctionCardJs(): string;
+//# sourceMappingURL=function-card.d.ts.map

package/dist/code-paths/function-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-card.d.ts","sourceRoot":"","sources":["../../src/code-paths/function-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wBAAgB,uBAAuB,IAAI,MAAM,CA0JhD"}

package/dist/code-paths/function-card.js

@@ -0,0 +1,169 @@
+/**
+ * Universal Function Card overlay — opened by every view's row click.
+ *
+ * `openFunctionCard(bodyHash)` looks up the occurrence in
+ * `graphIndexes.byBodyHash`, renders a card with name + location +
+ * meta + callers + callees + action buttons, and appends a single
+ * `.function-card-overlay` element to <body>. Re-opening swaps the
+ * content of the same overlay (singleton invariant — §10.2).
+ *
+ * Closes on Escape key (panel orchestrator), close-button click, and click on
+ * the overlay backdrop. "Trace from entry" renders the shortest indexed path
+ * from an inferred entry point when one exists.
+ */
+export function dashboardFunctionCardJs() {
+    return String.raw `
+function openFunctionCard(bodyHash) {
+  if (!bodyHash) return;
+  const occ = graphIndexes.byBodyHash.get(bodyHash);
+  if (!occ) return;
+
+  // Singleton: reuse the existing overlay if it's open.
+  let overlay = document.querySelector('.function-card-overlay');
+  if (!overlay) {
+    overlay = el('div', { class: 'function-card-overlay' });
+    overlay.addEventListener('click', e => {
+      if (e.target === overlay) closeFunctionCard();
+    });
+    document.body.appendChild(overlay);
+  }
+  while (overlay.firstChild) overlay.removeChild(overlay.firstChild);
+
+  const card = el('div', { class: 'function-card' });
+  overlay.appendChild(card);
+
+  const closeBtn = el('button', { class: 'fc-close', text: '×', onclick: closeFunctionCard });
+  card.appendChild(closeBtn);
+
+  card.appendChild(el('h3', { text: displayName(occ.simpleName || '<anonymous>') }));
+  card.appendChild(el('div', { class: 'fc-loc', text: occ.filePath + ':' + occ.line }));
+
+  const paramText = (occ.params || []).map(p => (p.rest ? '...' : '') + p.name + (p.optional ? '?' : '')).join(', ');
+  const metaText = 'Body: ' + Math.max(0, (occ.endLine || occ.line) - occ.line + 1) + ' lines · '
+    + (occ.kind || 'function') + ' · '
+    + (occ.visibility || 'module-local')
+    + (paramText ? ' · params: (' + paramText + ')' : '')
+    + (occ.returnType ? ' · returns: ' + occ.returnType : '');
+  card.appendChild(el('div', { class: 'fc-meta', text: metaText }));
+
+  // Callers section, grouped by package of caller.
+  const callerHashes = graphIndexes.callers.get(occ.bodyHash) || [];
+  const callerSection = el('div', { class: 'fc-section' });
+  callerSection.appendChild(el('h4', { text: 'Callers (' + callerHashes.length + ')' }));
+  if (callerHashes.length === 0) {
+    callerSection.appendChild(el('div', { class: 'empty', text: 'No callers in catalog.' }));
+  } else {
+    const list = el('ul', { class: 'fc-list' });
+    const grouped = new Map();
+    for (const h of callerHashes) {
+      const c = graphIndexes.byBodyHash.get(h);
+      if (!c) continue;
+      const pkg = pkgOf(c);
+      let bucket = grouped.get(pkg);
+      if (!bucket) { bucket = []; grouped.set(pkg, bucket); }
+      bucket.push(c);
+    }
+    const pkgNames = Array.from(grouped.keys()).sort();
+    for (const pkg of pkgNames) {
+      const groupHeader = el('li', { class: 'external', text: pkg + ' (' + grouped.get(pkg).length + ')' });
+      list.appendChild(groupHeader);
+      for (const c of grouped.get(pkg)) {
+        const item = el('li', {
+          'data-body-hash': c.bodyHash,
+          text: displayName(c.simpleName) + '  —  ' + c.filePath + ':' + c.line,
+        });
+        item.addEventListener('click', () => openFunctionCard(c.bodyHash));
+        list.appendChild(item);
+      }
+    }
+    callerSection.appendChild(list);
+  }
+  card.appendChild(callerSection);
+
+  // Callees section.
+  const calleeHashes = graphIndexes.callees.get(occ.bodyHash) || [];
+  const externalCalls = (occ.calls || []).reduce((n, e) => {
+    let c = 0;
+    for (const t of (e.to || [])) if (!graphIndexes.byBodyHash.has(t)) c++;
+    return n + c + ((e.to || []).length === 0 ? 1 : 0);
+  }, 0);
+  const calleeSection = el('div', { class: 'fc-section' });
+  calleeSection.appendChild(el('h4', { text: 'Callees (' + calleeHashes.length + ' resolved' + (externalCalls > 0 ? ', ' + externalCalls + ' external' : '') + ')' }));
+  if (calleeHashes.length === 0 && externalCalls === 0) {
+    calleeSection.appendChild(el('div', { class: 'empty', text: 'No callees.' }));
+  } else {
+    const list = el('ul', { class: 'fc-list' });
+    for (const h of calleeHashes) {
+      const c = graphIndexes.byBodyHash.get(h);
+      if (!c) continue;
+      const item = el('li', { 'data-body-hash': c.bodyHash, text: displayName(c.simpleName) + '  —  ' + c.filePath + ':' + c.line });
+      item.addEventListener('click', () => openFunctionCard(c.bodyHash));
+      list.appendChild(item);
+    }
+    if (externalCalls > 0) {
+      list.appendChild(el('li', { class: 'external', text: externalCalls + ' external or unresolved call(s)' }));
+    }
+    calleeSection.appendChild(list);
+  }
+  card.appendChild(calleeSection);
+
+  // Action buttons.
+  const actions = el('div', { class: 'fc-actions' });
+  const editorUrl = editorLinkUrl(occ.filePath, occ.line);
+  if (editorUrl) {
+    const a = el('a', { class: 'fc-action', href: editorUrl, text: 'Open in editor' });
+    actions.appendChild(a);
+  } else {
+    const copyBtn = el('button', {
+      class: 'fc-action',
+      text: 'Copy path',
+      onclick: () => {
+        if (navigator && navigator.clipboard) navigator.clipboard.writeText(occ.filePath + ':' + occ.line);
+      },
+    });
+    actions.appendChild(copyBtn);
+  }
+  const traceBtn = el('button', {
+    class: 'fc-action',
+    text: 'Trace from entry',
+    onclick: () => {
+      const path = traceFromEntry(occ.bodyHash, graphCatalog, graphIndexes);
+      renderTraceInCard(card, path);
+    },
+  });
+  actions.appendChild(traceBtn);
+  card.appendChild(actions);
+
+  // Move keyboard focus to the close button (accessibility).
+  closeBtn.focus();
+}
+
+function renderTraceInCard(card, path) {
+  // Replace the body of the card with the rendered trace path.
+  const old = card.querySelector('.fc-trace-result');
+  if (old) old.parentNode.removeChild(old);
+  const section = el('div', { class: 'fc-section fc-trace-result' });
+  section.appendChild(el('h4', { text: 'Trace from entry point' }));
+  if (!path || path.length === 0) {
+    section.appendChild(el('div', { class: 'empty', text: 'No path from any entry point.' }));
+  } else {
+    const list = el('ol', { class: 'fc-list' });
+    for (const h of path) {
+      const occ = graphIndexes.byBodyHash.get(h);
+      if (!occ) continue;
+      const item = el('li', { 'data-body-hash': occ.bodyHash, text: displayName(occ.simpleName) + '  —  ' + occ.filePath + ':' + occ.line });
+      item.addEventListener('click', () => openFunctionCard(occ.bodyHash));
+      list.appendChild(item);
+    }
+    section.appendChild(list);
+  }
+  card.appendChild(section);
+}
+
+function closeFunctionCard() {
+  const overlay = document.querySelector('.function-card-overlay');
+  if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+}
+`;
+}
+//# sourceMappingURL=function-card.js.map

package/dist/code-paths/function-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-card.js","sourceRoot":"","sources":["../../src/code-paths/function-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,UAAU,uBAAuB;IACrC,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJlB,CAAC;AACF,CAAC"}

package/dist/code-paths/function-row.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Reusable simple-table renderer for the Hot/Big/Wide/Untested/Search
+ * views.
+ *
+ * Wraps the rendered table in the same .section + .card shell used by
+ * fit/sim's renderSessionTable so all dashboard tables share one shape:
+ * a section heading, a card-bordered sortable table, and a pagination
+ * footer wired through paginateTable (defined in shared.ts).
+ *
+ * Each caller passes its own `columns` array, a `heading` string, and
+ * an optional `viewId` (used to attach the help-drawer info icon to
+ * the heading). The helper handles header, body, click delegation
+ * via data-body-hash, sortable activation, and pagination at 10
+ * rows/page.
+ */
+export declare function dashboardFunctionRowJs(): string;
+//# sourceMappingURL=function-row.d.ts.map

package/dist/code-paths/function-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-row.d.ts","sourceRoot":"","sources":["../../src/code-paths/function-row.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,sBAAsB,IAAI,MAAM,CA4D/C"}

package/dist/code-paths/function-row.js

@@ -0,0 +1,77 @@
+/**
+ * Reusable simple-table renderer for the Hot/Big/Wide/Untested/Search
+ * views.
+ *
+ * Wraps the rendered table in the same .section + .card shell used by
+ * fit/sim's renderSessionTable so all dashboard tables share one shape:
+ * a section heading, a card-bordered sortable table, and a pagination
+ * footer wired through paginateTable (defined in shared.ts).
+ *
+ * Each caller passes its own `columns` array, a `heading` string, and
+ * an optional `viewId` (used to attach the help-drawer info icon to
+ * the heading). The helper handles header, body, click delegation
+ * via data-body-hash, sortable activation, and pagination at 10
+ * rows/page.
+ */
+export function dashboardFunctionRowJs() {
+    return String.raw `
+function makeSectionHeading(text, viewId) {
+  // Heading + optional ⓘ button that opens the help drawer for this
+  // view. SCCs and Coupling use the same shape inline.
+  const h3 = el('h3');
+  h3.appendChild(document.createTextNode(text));
+  if (viewId && typeof openHelpDrawer === 'function') {
+    const info = el('button', {
+      class: 'section-info',
+      'aria-label': 'About this view',
+      title: 'About this view',
+      text: 'i',
+    });
+    info.addEventListener('click', e => {
+      e.stopPropagation();
+      openHelpDrawer(viewId);
+    });
+    h3.appendChild(info);
+  }
+  return h3;
+}
+
+function renderFunctionRows(container, occurrences, columns, heading, viewId, skipHeading) {
+  while (container.firstChild) container.removeChild(container.firstChild);
+  if (!occurrences || occurrences.length === 0) {
+    container.appendChild(el('div', { class: 'empty', text: 'No functions to show.' }));
+    return;
+  }
+  const headingText = (heading || 'Results') + ' (' + occurrences.length + ')';
+  const section = el('div', { class: 'section' });
+  // skipHeading lets a caller render the section heading itself (e.g. ABOVE its
+  // own controls row) rather than at the top of the rows host.
+  if (!skipHeading) section.appendChild(makeSectionHeading(headingText, viewId));
+  const card = el('div', { class: 'card' });
+  const table = el('table', { class: 'data-table sortable' });
+  const thead = el('thead');
+  const headRow = el('tr');
+  for (const col of columns) headRow.appendChild(el('th', { text: col.label }));
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+  const tbody = el('tbody');
+  for (const occ of occurrences) {
+    const tr = el('tr', { class: 'clickable', 'data-body-hash': occ.bodyHash });
+    for (const col of columns) {
+      const v = col.value(occ);
+      tr.appendChild(el('td', { text: v == null ? '' : String(v) }));
+    }
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  const pag = el('div', { class: 'pagination' });
+  card.appendChild(table);
+  card.appendChild(pag);
+  section.appendChild(card);
+  container.appendChild(section);
+  if (typeof paginateTable === 'function') paginateTable(tbody, pag, 10);
+  if (typeof makeSortable === 'function') makeSortable(table);
+}
+`;
+}
+//# sourceMappingURL=function-row.js.map

package/dist/code-paths/function-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"function-row.js","sourceRoot":"","sources":["../../src/code-paths/function-row.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,sBAAsB;IACpC,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DlB,CAAC;AACF,CAAC"}

package/dist/code-paths/graph-controls.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Visualization control toolbar + function-level projector.
+ *
+ * A render helper (registers no view), extracted from `view-graph.ts` to keep
+ * that emitter under the file-length budget — and, like `graph-stylesheet.ts`,
+ * deliberately named out of the `view-*` namespace so it stays clear of the
+ * views-disjoint architecture rule. Emits two browser functions plus a tiny
+ * helper as a JS string; the main emitter interpolates it into its `<script>`
+ * body, so they share one runtime scope with the view's state vars
+ * (`gvLevel`, `gvSelectedPackage`, …) and `gvRenderGraph`.
+ *
+ *  - `gvRenderControls(host, catalog, indexes)` — the self-contained Level /
+ *    Scope / Package / Kind / Edges control bar. Package + Kind are disabled at
+ *    package level (they only apply at function level). Every change re-renders
+ *    the graph in place via `gvRenderGraph`.
+ *  - `gvBuildFunctionElements(indexes, pkg, includeTests, kinds, crossPackage)`
+ *    — projects ONE package's function call graph client-side from the catalog
+ *    indexes (the package→package view-model blob can't express it).
+ *  - `gvAddOptions(sel, pairs, current)` — small `<select>` option builder.
+ *
+ * Free identifiers (supplied by earlier prelude emitters / the host template):
+ * `el`, `pkgOf`, `displayName`, `resolveCalleeOcc`, `packagesInCatalog`,
+ * `KIND_LIST`, `gvRenderGraph`, `GV_LAYOUTS`, `gvRunLayout`, `gvSccHighlight`,
+ * `gvApplySccHighlight`, and the `gv*` control-state vars.
+ */
+export declare function dashboardGraphControlsJs(): string;
+//# sourceMappingURL=graph-controls.d.ts.map

package/dist/code-paths/graph-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-controls.d.ts","sourceRoot":"","sources":["../../src/code-paths/graph-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAsOjD"}