@opensip-cli/dashboard 0.1.0

package/dist/code-paths/graph-controls.js

@@ -0,0 +1,257 @@
+/**
+ * @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 function dashboardGraphControlsJs() {
+    return String.raw `
+// Append [value, label] option pairs to a select, marking 'current' selected.
+function gvAddOptions(sel, pairs, current) {
+  for (var i = 0; i < pairs.length; i++) {
+    var opt = el('option', { value: pairs[i][0], text: pairs[i][1] });
+    if (pairs[i][0] === current) opt.selected = true;
+    sel.appendChild(opt);
+  }
+}
+
+// The view's controls, laid out as a 2-row × 4-column CSS grid where each cell
+// is a labeled control (label + control flex pair). Auto-flow fills 4 cells per
+// row:
+//   Row 1: Layout · Scope · Search · Highlight cycles
+//   Row 2: Level · Package · Kind · Edges
+// Self-contained (the shared Explore filter bar was removed). The Level
+// dropdown decides what the graph shows; Package, Kind, AND Edges only apply at
+// function level, so all three are DISABLED at package level (faded, not
+// hidden) — consistent greying. Most changes re-render the graph in place via
+// gvRenderGraph; Layout re-runs the layout on the live graph (no remount).
+function gvRenderControls(host, catalog, indexes) {
+  function rerender() { gvRenderGraph(host, catalog, indexes); }
+  var fnLevel = (gvLevel === 'function');
+  var grid = el('div', { class: 'code-paths-graph-grid' });
+  // cell(labelText, control) — one labeled grid cell (label + control). A null
+  // labelText yields an unlabeled cell (used for the search box).
+  function cell(labelText, control) {
+    var c = el('div', { class: 'code-paths-graph-cell' });
+    if (labelText) c.appendChild(el('span', { class: 'code-paths-graph-toolbar-label', text: labelText }));
+    if (control) c.appendChild(control);
+    grid.appendChild(c);
+    return c;
+  }
+
+  // ---- Row 1: Layout · Scope · Search · Highlight cycles ----
+  // Layout — dropdown; re-runs the layout on the live graph (no full remount).
+  var layoutSel = el('select', { class: 'code-paths-graph-select', 'data-control': 'layout' });
+  gvAddOptions(layoutSel, GV_LAYOUTS.map(function(l) { return [l.id, l.label]; }), gvCurrentLayout);
+  layoutSel.addEventListener('change', function(e) { gvRunLayout(e.target.value); });
+  cell('Layout', layoutSel);
+
+  // Scope — always enabled. Production-only vs include-tests.
+  var scopeSel = el('select', { class: 'code-paths-graph-select', 'data-control': 'scope' });
+  gvAddOptions(scopeSel, [['prod', 'Production only'], ['tests', 'Include tests']], gvIncludeTests ? 'tests' : 'prod');
+  scopeSel.addEventListener('change', function(e) { gvIncludeTests = (e.target.value === 'tests'); rerender(); });
+  cell('Scope', scopeSel);
+
+  // Search (unlabeled cell) — the name search box.
+  var searchCell = el('div', { class: 'code-paths-graph-cell code-paths-graph-cell-search' });
+  gvRenderSearchBox(searchCell);
+  grid.appendChild(searchCell);
+
+  // Highlight cycles (unlabeled cell) — the checkbox toggle.
+  var cyclesCell = el('div', { class: 'code-paths-graph-cell' });
+  gvRenderCyclesToggle(cyclesCell);
+  grid.appendChild(cyclesCell);
+
+  // ---- Row 2: Level · Package · Kind · Edges ----
+  // Level — always enabled. Drives package vs function granularity.
+  var levelSel = el('select', { class: 'code-paths-graph-select', 'data-control': 'level' });
+  gvAddOptions(levelSel, [['package', 'Package'], ['function', 'Function']], gvLevel);
+  levelSel.addEventListener('change', function(e) { gvLevel = e.target.value; rerender(); });
+  cell('Level', levelSel);
+
+  // Package — single-select; function level only (disabled at package level).
+  var pkgs = (typeof packagesInCatalog === 'function') ? packagesInCatalog(catalog) : [];
+  var pkgSel = el('select', { class: 'code-paths-graph-select', 'data-control': 'package' });
+  pkgSel.appendChild(el('option', { value: '', text: pkgs.length ? '— select —' : '— none —' }));
+  gvAddOptions(pkgSel, pkgs.map(function(p) { return [p, p]; }), gvSelectedPackage);
+  pkgSel.disabled = !fnLevel;
+  pkgSel.addEventListener('change', function(e) { gvSelectedPackage = e.target.value || null; rerender(); });
+  cell('Package', pkgSel);
+
+  // Kind — multi-select dropdown; function level only (disabled at package
+  // level). A custom checkbox popover (gvMultiSelect) rather than a native
+  // <select multiple> listbox, which renders as an always-open box.
+  cell('Kind', gvMultiSelect({
+    id: 'kind',
+    items: (typeof KIND_LIST !== 'undefined') ? KIND_LIST : [],
+    selected: gvKinds,
+    allLabel: 'All kinds',
+    disabled: !fnLevel,
+    onClose: function(sel) { gvKinds = sel; rerender(); },
+  }));
+
+  // Edges — function level only: intra-package (default) vs + cross-package.
+  // Always present; disabled at package level (consistent with Package/Kind).
+  var edgeSel = el('select', { class: 'code-paths-graph-select', 'data-control': 'granularity' });
+  gvAddOptions(edgeSel, [['intra', 'Intra-package'], ['cross', '+ cross-package']], gvCrossPackage ? 'cross' : 'intra');
+  edgeSel.disabled = !fnLevel;
+  edgeSel.addEventListener('change', function(e) { gvCrossPackage = (e.target.value === 'cross'); rerender(); });
+  cell('Edges', edgeSel);
+
+  host.appendChild(grid);
+}
+
+// The "Highlight cycles" checkbox — rendered into the row-3 search row (beside
+// the search box), not in the control grid. Package-level SCC emphasis; toggles
+// the emphasis on the live graph in place (no re-render).
+function gvRenderCyclesToggle(host) {
+  var sccToggle = el('label', { class: 'code-paths-graph-checkbox' });
+  var sccCb = el('input', { type: 'checkbox', 'data-scc-toggle': '1' });
+  sccCb.checked = gvSccHighlight;
+  sccCb.addEventListener('change', function() { gvSccHighlight = sccCb.checked; gvApplySccHighlight(); });
+  sccToggle.appendChild(sccCb);
+  sccToggle.appendChild(document.createTextNode(' Highlight cycles'));
+  host.appendChild(sccToggle);
+}
+
+// A compact multi-select dropdown: a trigger button + a checkbox popover.
+// Native <select multiple> renders an ugly always-open listbox, so we roll a
+// small popover instead. Checkboxes toggle the selection live and update the
+// trigger label; the graph re-renders only when the panel CLOSES (trigger
+// re-click or outside click) so a remount doesn't fire on every checkbox.
+//   opts: { id, items:[string], selected:[string], allLabel, disabled, onClose }
+function gvMultiSelect(opts) {
+  var wrap = el('div', { class: 'code-paths-graph-ms' });
+  var selected = opts.selected.slice();
+  function triggerLabel() {
+    if (selected.length === 0) return opts.allLabel;
+    if (selected.length === 1) return selected[0];
+    return selected.length + ' selected';
+  }
+  var trigger = el('button', { class: 'code-paths-graph-select code-paths-graph-ms-trigger', 'data-control': opts.id, text: triggerLabel() + ' ▾' });
+  trigger.disabled = !!opts.disabled;
+  var panel = el('div', { class: 'code-paths-graph-ms-panel' });
+  panel.style.display = 'none';
+  var open = false;
+  var docHandler = null;
+  function close() {
+    if (!open) return;
+    open = false;
+    panel.style.display = 'none';
+    if (docHandler) { document.removeEventListener('mousedown', docHandler); docHandler = null; }
+    opts.onClose(selected.slice());
+  }
+  function openPanel() {
+    if (open || opts.disabled) return;
+    open = true;
+    panel.style.display = 'block';
+    docHandler = function(e) { if (!wrap.contains(e.target)) close(); };
+    document.addEventListener('mousedown', docHandler);
+  }
+  trigger.addEventListener('click', function() { if (open) close(); else openPanel(); });
+  for (var i = 0; i < opts.items.length; i++) {
+    (function(item) {
+      var row = el('label', { class: 'code-paths-graph-ms-item' });
+      var cb = el('input', { type: 'checkbox' });
+      cb.checked = selected.indexOf(item) >= 0;
+      cb.addEventListener('change', function() {
+        var ix = selected.indexOf(item);
+        if (cb.checked && ix < 0) selected.push(item);
+        else if (!cb.checked && ix >= 0) selected.splice(ix, 1);
+        trigger.textContent = triggerLabel() + ' ▾';
+      });
+      row.appendChild(cb);
+      row.appendChild(document.createTextNode(' ' + item));
+      panel.appendChild(row);
+    })(opts.items[i]);
+  }
+  wrap.appendChild(trigger);
+  wrap.appendChild(panel);
+  return wrap;
+}
+
+// Project the function-level graph for a single package, client-side from the
+// embedded catalog indexes (the package->package view-model blob can't express
+// it). Nodes = the package's functions passing the Scope/Kind filters; edges =
+// resolved function->function calls. Intra-package mode keeps only calls whose
+// callee is in the same package; "+ cross-package" mode also keeps calls
+// leaving the package, drawing the external callee as a faded node. Node size
+// (totalCoupling) is the incident-edge degree. Bounded by package size.
+function gvBuildFunctionElements(indexes, pkg, includeTests, kinds, crossPackage) {
+  var elements = [];
+  if (!indexes || !indexes.occurrencesByHash || !indexes.callees) return elements;
+  var kindSet = (kinds && kinds.length) ? kinds : null;
+  function passes(occ) {
+    if (!includeTests && occ.inTestFile) return false;
+    if (kindSet && kindSet.indexOf(occ.kind) < 0) return false;
+    return true;
+  }
+
+  // Seeds: one occurrence per bodyHash that lives in 'pkg' and passes filters.
+  var seeds = [];
+  var seenSeed = {};
+  indexes.occurrencesByHash.forEach(function(occs) {
+    for (var i = 0; i < occs.length; i++) {
+      if (pkgOf(occs[i]) === pkg && passes(occs[i])) {
+        if (!seenSeed[occs[i].bodyHash]) { seenSeed[occs[i].bodyHash] = true; seeds.push(occs[i]); }
+        break;
+      }
+    }
+  });
+
+  var nodeIds = {};
+  var degree = {};
+  function addNode(occ, external) {
+    if (nodeIds[occ.bodyHash]) return;
+    nodeIds[occ.bodyHash] = true;
+    if (degree[occ.bodyHash] === undefined) degree[occ.bodyHash] = 0;
+    elements.push({ group: 'nodes', data: { id: occ.bodyHash, label: displayName(occ.simpleName), external: external ? 1 : 0, totalCoupling: 0 } });
+  }
+  for (var s = 0; s < seeds.length; s++) addNode(seeds[s], false);
+
+  var edgeSeen = {};
+  for (var s2 = 0; s2 < seeds.length; s2++) {
+    var seed = seeds[s2];
+    var targets = indexes.callees.get(seed.bodyHash) || [];
+    for (var t = 0; t < targets.length; t++) {
+      var callee = resolveCalleeOcc(targets[t], seed, indexes);
+      if (!callee) continue;
+      var external = (pkgOf(callee) !== pkg);
+      if (external && !crossPackage) continue;
+      if (!external && !passes(callee)) continue;
+      addNode(callee, external);
+      var ekey = seed.bodyHash + '\n' + callee.bodyHash;
+      if (edgeSeen[ekey]) continue;
+      edgeSeen[ekey] = true;
+      elements.push({ group: 'edges', data: { id: 'fe' + s2 + '_' + t, source: seed.bodyHash, target: callee.bodyHash, weight: 1, isCycleEdge: false } });
+      degree[seed.bodyHash] = (degree[seed.bodyHash] || 0) + 1;
+      degree[callee.bodyHash] = (degree[callee.bodyHash] || 0) + 1;
+    }
+  }
+  for (var e = 0; e < elements.length; e++) {
+    if (elements[e].group === 'nodes') elements[e].data.totalCoupling = degree[elements[e].data.id] || 0;
+  }
+  return elements;
+}
+`;
+}
+//# sourceMappingURL=graph-controls.js.map

package/dist/code-paths/graph-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-controls.js","sourceRoot":"","sources":["../../src/code-paths/graph-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,wBAAwB;IACtC,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOlB,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview Strongly-connected-components (Tarjan) over the graph view
+ * model's node/edge set.
+ *
+ * Extracted from `graph-view-model.ts` to keep that projector under the
+ * file-length budget. The algorithm is purely structural — it operates on
+ * string ids and an adjacency map, with no dependency on the view-model
+ * shapes — so it lives as a standalone, reusable unit.
+ *
+ * Replicated here rather than imported from the graph engine: the
+ * catalog-decoupling rule forbids `dashboard → @opensip-cli/graph`.
+ */
+/**
+ * Build a directed adjacency map (`source id → unique target ids`) from a
+ * node set and edge set. Generic over any `{ id }` node and
+ * `{ source, target }` edge so it stays independent of the view-model types.
+ */
+export declare function buildAdjacency(nodes: readonly {
+    readonly id: string;
+}[], edges: readonly {
+    readonly source: string;
+    readonly target: string;
+}[]): Map<string, string[]>;
+/**
+ * Tarjan's strongly-connected-components algorithm (iterative, no recursion
+ * so deep call graphs don't blow the stack). Returns a map from node id → SCC
+ * id, populated ONLY for nodes in a non-trivial SCC (size ≥ 2, or a singleton
+ * with a self-edge). Trivial singletons are omitted so the view treats them
+ * as `sccId: null`.
+ */
+export declare function tarjanSccIds(nodeIds: readonly string[], adjacency: ReadonlyMap<string, string[]>): Map<string, string>;
+//# sourceMappingURL=graph-scc.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph-scc.d.ts","sourceRoot":"","sources":["../../src/code-paths/graph-scc.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,SAAS;IAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EACzC,KAAK,EAAE,SAAS;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAAE,GACrE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAQvB;AAgBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GACvC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBrB"}

package/dist/code-paths/graph-scc.js

@@ -0,0 +1,136 @@
+/**
+ * @fileoverview Strongly-connected-components (Tarjan) over the graph view
+ * model's node/edge set.
+ *
+ * Extracted from `graph-view-model.ts` to keep that projector under the
+ * file-length budget. The algorithm is purely structural — it operates on
+ * string ids and an adjacency map, with no dependency on the view-model
+ * shapes — so it lives as a standalone, reusable unit.
+ *
+ * Replicated here rather than imported from the graph engine: the
+ * catalog-decoupling rule forbids `dashboard → @opensip-cli/graph`.
+ */
+/**
+ * Build a directed adjacency map (`source id → unique target ids`) from a
+ * node set and edge set. Generic over any `{ id }` node and
+ * `{ source, target }` edge so it stays independent of the view-model types.
+ */
+export function buildAdjacency(nodes, edges) {
+    const adjacency = new Map();
+    for (const node of nodes)
+        adjacency.set(node.id, []);
+    for (const edge of edges) {
+        const out = adjacency.get(edge.source);
+        if (out && !out.includes(edge.target))
+            out.push(edge.target);
+    }
+    return adjacency;
+}
+/**
+ * Tarjan's strongly-connected-components algorithm (iterative, no recursion
+ * so deep call graphs don't blow the stack). Returns a map from node id → SCC
+ * id, populated ONLY for nodes in a non-trivial SCC (size ≥ 2, or a singleton
+ * with a self-edge). Trivial singletons are omitted so the view treats them
+ * as `sccId: null`.
+ */
+export function tarjanSccIds(nodeIds, adjacency) {
+    const state = {
+        index: new Map(),
+        lowlink: new Map(),
+        onStack: new Set(),
+        stack: [],
+        components: [],
+        nextIndex: 0,
+    };
+    for (const start of nodeIds) {
+        if (state.index.has(start))
+            continue;
+        const work = [{ v: start, ai: 0 }];
+        while (work.length > 0) {
+            stepTarjanFrame(work, state, adjacency);
+        }
+    }
+    return assignSccIds(state.components, adjacency);
+}
+/**
+ * Advance the top Tarjan work-frame by one DFS step: visit the node on
+ * first touch, descend into the next unvisited successor, or — when the
+ * frame is exhausted — close out its SCC root and propagate lowlink to the
+ * parent frame before popping.
+ */
+function stepTarjanFrame(work, state, adjacency) {
+    const frame = work.at(-1);
+    const v = frame.v;
+    if (frame.ai === 0) {
+        state.index.set(v, state.nextIndex);
+        state.lowlink.set(v, state.nextIndex);
+        state.nextIndex += 1;
+        state.stack.push(v);
+        state.onStack.add(v);
+    }
+    const descendInto = scanSuccessors(frame, state, adjacency);
+    if (descendInto !== null) {
+        work.push({ v: descendInto, ai: 0 });
+        return; // descend
+    }
+    if (state.lowlink.get(v) === state.index.get(v))
+        popComponent(v, state);
+    work.pop();
+    const parent = work.length > 0 ? work.at(-1).v : null;
+    if (parent !== null && state.lowlink.get(v) < state.lowlink.get(parent)) {
+        state.lowlink.set(parent, state.lowlink.get(v));
+    }
+}
+/**
+ * Scan the frame's remaining successors, updating lowlink for already-
+ * visited on-stack nodes. Returns the first unvisited successor to descend
+ * into (leaving `frame.ai` pointing past it), or `null` when exhausted.
+ */
+function scanSuccessors(frame, state, adjacency) {
+    const v = frame.v;
+    const adj = adjacency.get(v) ?? [];
+    while (frame.ai < adj.length) {
+        const w = adj[frame.ai];
+        frame.ai += 1;
+        if (!state.index.has(w))
+            return w;
+        if (state.onStack.has(w)) {
+            const iw = state.index.get(w);
+            if (iw < state.lowlink.get(v))
+                state.lowlink.set(v, iw);
+        }
+    }
+    return null;
+}
+/** Pop the stack down to SCC root `v`, recording the component. */
+function popComponent(v, state) {
+    const component = [];
+    for (;;) {
+        const w = state.stack.pop();
+        state.onStack.delete(w);
+        component.push(w);
+        if (w === v)
+            break;
+    }
+    state.components.push(component);
+}
+/**
+ * Assign a stable sccId per non-trivial component. A singleton counts as
+ * cyclic only when it has a self-edge; trivial singletons are omitted so
+ * the view treats them as `sccId: null`.
+ */
+function assignSccIds(components, adjacency) {
+    const sccByNode = new Map();
+    for (const component of components) {
+        const isCyclic = component.length >= 2 ||
+            (component.length === 1 && (adjacency.get(component[0]) ?? []).includes(component[0]));
+        if (!isCyclic)
+            continue;
+        // Deterministic id: smallest member id (components are not pre-sorted).
+        const sccId = `scc:${[...component].sort()[0]}`;
+        for (const member of component)
+            sccByNode.set(member, sccId);
+    }
+    return sccByNode;
+}
+//# sourceMappingURL=graph-scc.js.map

package/dist/code-paths/graph-scc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-scc.js","sourceRoot":"","sources":["../../src/code-paths/graph-scc.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview Cytoscape stylesheet for the Code Graph "Visualization" view.
+ *
+ * A render helper (registers no view), extracted from `view-graph.ts` to keep
+ * that emitter under the file-length budget and deliberately named out of the
+ * `view-*` namespace so it stays clear of the views-disjoint architecture
+ * rule. Emits the `gvStylesheet()` browser function as a JS string; the main
+ * emitter interpolates it into its `<script>` body.
+ *
+ * PACKAGE granularity (item 10): nodes are packages, not functions. The
+ * visual encoding is therefore simpler than the function-level original —
+ * uniform round-rectangle nodes sized by total coupling degree, edges
+ * thickened by call-count weight, plus the cross-package SCC accent and the
+ * shared selection/search/impact highlight classes.
+ */
+/**
+ * Emit the `gvStylesheet()` browser function as a JS string. No leading or
+ * trailing newline, so the main emitter can interpolate it where the inline
+ * function used to sit.
+ */
+export declare function dashboardViewGraphStylesheetJs(): string;
+//# sourceMappingURL=graph-stylesheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph-stylesheet.d.ts","sourceRoot":"","sources":["../../src/code-paths/graph-stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;GAIG;AACH,wBAAgB,8BAA8B,IAAI,MAAM,CAmGvD"}

package/dist/code-paths/graph-stylesheet.js

@@ -0,0 +1,121 @@
+/**
+ * @fileoverview Cytoscape stylesheet for the Code Graph "Visualization" view.
+ *
+ * A render helper (registers no view), extracted from `view-graph.ts` to keep
+ * that emitter under the file-length budget and deliberately named out of the
+ * `view-*` namespace so it stays clear of the views-disjoint architecture
+ * rule. Emits the `gvStylesheet()` browser function as a JS string; the main
+ * emitter interpolates it into its `<script>` body.
+ *
+ * PACKAGE granularity (item 10): nodes are packages, not functions. The
+ * visual encoding is therefore simpler than the function-level original —
+ * uniform round-rectangle nodes sized by total coupling degree, edges
+ * thickened by call-count weight, plus the cross-package SCC accent and the
+ * shared selection/search/impact highlight classes.
+ */
+/**
+ * Emit the `gvStylesheet()` browser function as a JS string. No leading or
+ * trailing newline, so the main emitter can interpolate it where the inline
+ * function used to sit.
+ */
+export function dashboardViewGraphStylesheetJs() {
+    return String.raw `function gvStylesheet() {
+  return [
+    {
+      selector: 'node',
+      style: {
+        'background-color': '#c4956a',
+        'border-color': function(ele) { return ele.data('sccColor') || '#8a8a8a'; },
+        'border-width': function(ele) { return ele.data('sccId') ? 3 : 1; },
+        'shape': 'round-rectangle',
+        // Size by total coupling degree (fan-in + fan-out call count). The
+        // log-ish clamp keeps a megabus package from dwarfing the canvas.
+        'width': function(ele) { return 22 + Math.min(56, Math.sqrt(ele.data('totalCoupling') || 0) * 6); },
+        'height': function(ele) { return 22 + Math.min(56, Math.sqrt(ele.data('totalCoupling') || 0) * 6); },
+        'label': function(ele) { return ele.data('label') || ''; },
+        'font-size': 9,
+        'color': '#ddd',
+        'text-valign': 'bottom',
+        'text-halign': 'center',
+        'text-margin-y': 2,
+        'text-wrap': 'none',
+      },
+    },
+    {
+      selector: 'edge',
+      style: {
+        // Thickness by call-count weight (clamped). A solid uniform style —
+        // resolution/confidence encoding is function-level and not meaningful
+        // once edges are aggregated to packages.
+        'width': function(ele) { return 1 + Math.min(7, Math.sqrt(ele.data('weight') || 1) * 1.2); },
+        'line-color': '#5a5a5a',
+        'target-arrow-color': '#5a5a5a',
+        'target-arrow-shape': 'triangle',
+        'arrow-scale': 0.8,
+        'curve-style': 'bezier',
+      },
+    },
+    {
+      selector: 'edge[?isCycleEdge]',
+      style: { 'line-color': '#d46a6a', 'target-arrow-color': '#d46a6a' },
+    },
+    // Function-level "+ cross-package" mode only: a callee that lives OUTSIDE
+    // the selected package is drawn as a faded ellipse so the boundary reads
+    // at a glance. Package-level view-models never set 'external', so this
+    // selector is inert there.
+    {
+      selector: 'node[?external]',
+      style: { 'background-color': '#3a3a3a', 'border-color': '#666', 'color': '#9a9a9a', 'shape': 'ellipse', 'opacity': 0.55 },
+    },
+    {
+      selector: 'node.gv-search-hit',
+      style: { 'background-color': '#e0a96d', 'border-color': '#fff', 'border-width': 3, 'opacity': 1 },
+    },
+    {
+      selector: 'node.gv-search-fade',
+      style: { 'opacity': 0.12 },
+    },
+    {
+      selector: 'edge.gv-search-fade',
+      style: { 'opacity': 0.05 },
+    },
+    // Impact highlight (adapted to packages): clicking a package lights its
+    // direct caller packages (upstream) and callee packages (downstream).
+    // Accent palette mirrors the dashboard theme: --accent (selected),
+    // --accent-fitness (downstream), --accent-sim (upstream). Hard-coded
+    // because the Cytoscape canvas can't read CSS custom properties.
+    {
+      selector: 'node.gv-selected',
+      style: { 'background-color': '#e0a96d', 'border-color': '#fff', 'border-width': 4, 'opacity': 1 },
+    },
+    {
+      selector: 'node.gv-upstream',
+      style: { 'background-color': '#6a9bd4', 'opacity': 1 },
+    },
+    {
+      selector: 'node.gv-downstream',
+      style: { 'background-color': '#7ec47e', 'opacity': 1 },
+    },
+    {
+      selector: '.gv-dimmed',
+      style: { 'opacity': 0.1 },
+    },
+    // Cross-package cycle highlight (folded-in "Cycles / SCCs" affordance).
+    // Cycle members get a bright accent fill; cycle edges turn red and
+    // thicken; the acyclic remainder fades so multi-package cycles stand out.
+    {
+      selector: 'node.gv-scc-member',
+      style: { 'background-color': '#d46a6a', 'border-color': '#fff', 'border-width': 3, 'opacity': 1 },
+    },
+    {
+      selector: 'edge.gv-scc-edge',
+      style: { 'line-color': '#d46a6a', 'target-arrow-color': '#d46a6a', 'width': 3, 'opacity': 1 },
+    },
+    {
+      selector: '.gv-scc-dimmed',
+      style: { 'opacity': 0.08 },
+    },
+  ];
+}`;
+}
+//# sourceMappingURL=graph-stylesheet.js.map

package/dist/code-paths/graph-stylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-stylesheet.js","sourceRoot":"","sources":["../../src/code-paths/graph-stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;GAIG;AACH,MAAM,UAAU,8BAA8B;IAC5C,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGjB,CAAC;AACH,CAAC"}