@opensip-cli/dashboard 0.1.0

package/dist/code-paths.js

@@ -0,0 +1,356 @@
+// @fitness-ignore-file module-coupling-fan-out -- Panel aggregator: composes JS-string emitters from sibling view-*.ts modules; fan-out is intrinsic to its role as the entry point
+/**
+ * Dashboard Code Paths panel — graph-tool surface with two subtabs:
+ *   1. Sessions — recent graph runs and their per-rule findings
+ *      (uses the shared renderSessionTable from sessions.ts).
+ *   2. Explore — interactive catalog browser with three views
+ *      (Graph, Coupling, Functions/distribution). The Graph view
+ *      carries the SCC cycle highlight that the standalone SCCs view
+ *      used to own. The Functions view absorbs the former standalone
+ *      Search subtab via an in-table name filter.
+ *
+ * Architecture: vanilla DOM, no framework. Each view-*.ts emits a
+ * JS string that pushes a `View` literal into the singleton `views`
+ * registry. The Explore subtab renders the view tab bar + one
+ * container per view; Sessions subtab renders the standard session
+ * table.
+ *
+ * The file imports JS-string emitters from sibling modules under
+ * `code-paths/`. It MUST NOT import from `@opensip-cli/graph` —
+ * the catalog is consumed by JSON shape only (the structural shape
+ * lives in @opensip-cli/contracts to keep this panel decoupled
+ * from the graph engine's runtime types).
+ */
+import { dashboardCatalogProvenanceJs } from './code-paths/catalog-provenance.js';
+import { dashboardCatalogRecipesTablesJs } from './code-paths/catalog-recipes-tables.js';
+import { dashboardCytoscapeVendorJs } from './code-paths/cytoscape-vendor.js';
+import { dashboardEditorLinkJs } from './code-paths/editor-link.js';
+import { dashboardFiltersJs } from './code-paths/filters.js';
+import { dashboardFunctionCardJs } from './code-paths/function-card.js';
+import { dashboardFunctionRowJs } from './code-paths/function-row.js';
+import { dashboardHelpDrawerJs } from './code-paths/help-drawer.js';
+import { dashboardIndexesJs } from './code-paths/indexes.js';
+import { dashboardPathUtilsJs } from './code-paths/path-utils.js';
+import { dashboardSearchJs } from './code-paths/search.js';
+import { dashboardTraceJs } from './code-paths/trace.js';
+import { dashboardViewCouplingJs } from './code-paths/view-coupling.js';
+import { dashboardViewDistributionJs } from './code-paths/view-distribution.js';
+import { dashboardViewGraphJs } from './code-paths/view-graph.js';
+import { dashboardViewsRegistryJs } from './code-paths/views-registry.js';
+/**
+ * Build flag for the Code Paths explore-tab restructure.
+ *
+ * `true` (Plan D default, current): the restructured set — graph (with the
+ * SCC-highlight fold) / coupling + the ranked-distribution "Functions"
+ * affordance (which hosts the in-table name filter that replaced the
+ * former standalone Search subtab). The legacy single-metric views
+ * (`view-big/hot/wide/untested/sccs`) were deleted in Plan D once their
+ * signal moved into the engine gate rules (`graph:large-function`,
+ * `graph:wide-function`, `graph:high-blast-untested`, `graph:cycle`); the
+ * standalone SCCs view's signal lives on as the graph view's cycle highlight.
+ *
+ * `false`: there is no legacy branch anymore — the constant is retained only
+ * as the default for the `dashboardCodePathsJs(restructured)` test seam, which
+ * always exercises the restructured set.
+ *
+ * This is a build-time, server-side seam — no runtime toggle in the page.
+ */
+const RESTRUCTURED_EXPLORE_TABS = true;
+/**
+ * Concatenation order is load-bearing — each emitter declares
+ * top-level names that later emitters reference. The order below is
+ * the topological sort; reordering will silently break the page with
+ * `<name> is not defined`. Free-identifier dependencies of each
+ * emitter, listed against the emitter that supplies them:
+ *
+ *  1. path-utils       — declares `displayName`, `packageOfPath`, `pkgOf`,
+ *                        `shortPkg`.
+ *  2. indexes          — declares `buildIndexes`, `resolveCalleeOcc`. Uses
+ *                        `pkgOf` (path-utils, above).
+ *  3. filters          — declares `filterState` (default, non-interactive),
+ *                        `passesFilter`, `packagesInCatalog`, `KIND_LIST`.
+ *                        Uses `pkgOf` (path-utils, above).
+ *  4. editor-link      — declares `editorLink`. Reads `EDITOR_PROTOCOL`
+ *                        (declared in generator.ts before the script
+ *                        block).
+ *  5. trace            — declares `findUpstreamTrace`. Uses `indexes`.
+ *  6. search           — declares `searchFunctions`. Uses `indexes`,
+ *                        `displayName`.
+ *  7. function-row     — declares `renderFunctionRows` and the empty
+ *                        states it uses. Calls `el`, `displayName`,
+ *                        `packageOfPath`, `passesFilter`.
+ *  8. function-card    — declares `openFunctionCard`, `closeFunctionCard`.
+ *                        Uses `editorLink`, `findUpstreamTrace`, `el`.
+ *  9. views-registry   — declares the singleton `views = []` array.
+ *                        Must come before any view emitter.
+ * 10. help-drawer      — declares `openHelpDrawer`. No external deps
+ *                        beyond `el`.
+ * 11-13. view-*        — push View descriptors into `views` in TAB order:
+ *                        coupling / distribution / graph (alphabetical:
+ *                        Coupling, Functions, Visualization — the first is the
+ *                        default view). Each renderer closes over `el`,
+ *                        `passesFilter`, `displayName`, `packageOfPath`,
+ *                        `renderFunctionRows`, plus its own utilities; the
+ *                        Visualization renderer also uses `resolveCalleeOcc`
+ *                        (prelude) for its function-level projection.
+ * 15. panelOrchestrator — top-level `renderCodePathsTab`,
+ *                        `renderCodePathsExplore`, `openCodePathsSession`.
+ *                        Uses every name above plus `renderSubtabBar`
+ *                        (from shared/) and `registerTabActivator`.
+ *
+ * If the list grows past ~30 entries, replace this manual order with
+ * a `{ id, deps, emit }` topological sort.
+ */
+export function dashboardCodePathsJs(_restructured = RESTRUCTURED_EXPLORE_TABS) {
+    // The explore-tab restructure has shipped: there is one view set (coupling /
+    // distribution / graph). The `_restructured` parameter is kept
+    // for the test seam's call-shape compatibility but no longer selects a
+    // legacy branch (the single-metric view emitters were deleted in Plan D).
+    // Shared prelude — utilities + the views registry + help drawer. Every view
+    // emitter depends on these top-level names.
+    const prelude = [
+        // 0. cytoscape vendor — defines the `cytoscape` / `cytoscapeDagre`
+        //    browser globals the Graph view consumes. MUST precede any view
+        //    emitter that references them. No deps of its own.
+        dashboardCytoscapeVendorJs(),
+        dashboardPathUtilsJs(),
+        dashboardIndexesJs(),
+        dashboardFiltersJs(),
+        // Depends on `packagesInCatalog` (filters, above) + `el`; declares
+        // `renderCatalogProvenance`, called at the top of the Explore body.
+        dashboardCatalogProvenanceJs(),
+        // Declares `renderGraphRuleCatalog` / `renderGraphRecipeCatalog` (the
+        // Catalog/Recipes subtab tables); only needs `el`.
+        dashboardCatalogRecipesTablesJs(),
+        dashboardEditorLinkJs(),
+        dashboardTraceJs(),
+        dashboardSearchJs(),
+        dashboardFunctionRowJs(),
+        dashboardFunctionCardJs(),
+        dashboardViewsRegistryJs(),
+        dashboardHelpDrawerJs(),
+    ];
+    // The kept visualizations + the ranked-distribution affordance, in TAB
+    // order (alphabetical): Coupling, Functions, Visualization. `views[0]` is
+    // the default view, so Coupling opens first. SCCs fold into the graph view's
+    // cycle highlight; the single-metric tabs were dropped (their signal moved
+    // into the engine gate rules). `renderCodePathsExplore` iterates `views` to
+    // build the tab bar. Emission order here is also the runtime registry order;
+    // the three view emitters have no cross-dependencies (each only references
+    // prelude names), so this order is free to match the desired tab order.
+    const views = [dashboardViewCouplingJs(), dashboardViewDistributionJs(), dashboardViewGraphJs()];
+    return [...prelude, ...views, panelOrchestratorJs()].join('\n');
+}
+/**
+ * Top-level orchestrator emitter for the Code Paths tab. Concerns,
+ * with the section delimiters that mark them in the emitted JS:
+ *
+ *   1. CATALOG STATE — singleton `graphCatalog` and `graphIndexes`.
+ *   2. CATALOG LOAD — `loadGraphCatalogFromBlob` reads the inline
+ *      `<script id="graph-catalog">` blob.
+ *   3. PANEL ENTRY — `renderCodePathsTab` mounts the Sessions /
+ *      Explore subtabs via `renderSubtabBar` (F2).
+ *   4. EXPLORE BODY — `renderCodePathsExplore` builds the view tab
+ *      bar, view containers, row-click delegation, escape handler,
+ *      and runs each view's initial render.
+ *   5. HASH ROUTE — `readViewIdFromHash` parses `#code-paths/<id>`
+ *      for deep-link initial view.
+ *   6. CROSS-TAB NAV — `openCodePathsSession` is the activator
+ *      Overview's row-click handler invokes via
+ *      `activateTabForSession` for graph sessions.
+ *   7. ACTIVATOR REGISTRATION — registers `openCodePathsSession`
+ *      under key `'graph'` in the shared `tabActivators` registry.
+ *
+ * The escape handler in EXPLORE BODY is attached to `document`; if
+ * `renderCodePathsTab` runs more than once (it does not today) the
+ * handler would leak.
+ */
+function panelOrchestratorJs() {
+    return String.raw `
+// =======================================================
+// CODE PATHS — CATALOG STATE
+// =======================================================
+let graphCatalog = null;
+let graphIndexes = { byBodyHash: new Map(), occurrencesByHash: new Map(), bySimpleName: new Map(), callees: new Map(), callers: new Map() };
+
+// =======================================================
+// CODE PATHS — CATALOG LOAD
+// =======================================================
+function loadGraphCatalogFromBlob() {
+  const blob = document.getElementById('graph-catalog');
+  if (!blob || !blob.textContent) return null;
+  try {
+    return JSON.parse(blob.textContent);
+  } catch (err) {
+    return null;
+  }
+}
+
+// =======================================================
+// CODE PATHS — PANEL ENTRY (Sessions | Explore subtabs)
+// =======================================================
+function renderCodePathsTab() {
+  const panel = document.getElementById('panel-code-paths');
+  if (!panel) return;
+  while (panel.firstChild) panel.removeChild(panel.firstChild);
+
+  const graphSessions = sessions.filter(s => s.tool === 'graph');
+  graphCatalog = loadGraphCatalogFromBlob();
+
+  // Code Paths uses the shared renderSubtabBar Strategy (F2). The
+  // two-subtab Sessions/Explore shape is a config; the DOM-and-click
+  // boilerplate now lives in subtab-bar.ts and is shared with
+  // renderToolTab's three-subtab shape. The subtabs render even when
+  // empty so the tab matches the visual pattern used by Fitness and
+  // Simulation (subtab bar + italic-centered .empty placeholder).
+  renderSubtabBar(panel, [
+    {
+      id: 'sessions',
+      label: 'Sessions',
+      render: function(p) {
+        if (graphSessions.length > 0) {
+          renderSessionTable(p, graphSessions, 'var(--accent)');
+        } else {
+          p.appendChild(el('div', { class: 'empty', text: 'No sessions yet.' }));
+        }
+      },
+    },
+    {
+      id: 'catalog',
+      label: 'Catalog',
+      render: function(p) {
+        renderGraphRuleCatalog(p, typeof graphRuleCatalog !== 'undefined' ? graphRuleCatalog : []);
+      },
+    },
+    {
+      id: 'recipes',
+      label: 'Recipes',
+      render: function(p) {
+        renderGraphRecipeCatalog(p, typeof graphRecipeCatalog !== 'undefined' ? graphRecipeCatalog : []);
+      },
+    },
+    {
+      id: 'explore',
+      label: 'Explore',
+      render: function(p) {
+        if (graphCatalog) {
+          renderCodePathsExplore(p);
+        } else {
+          p.appendChild(el('div', { class: 'empty', text: 'No catalog yet.' }));
+        }
+      },
+    },
+  ]);
+}
+
+// =======================================================
+// CODE PATHS — EXPLORE BODY (view tab bar + view stack)
+// =======================================================
+function renderCodePathsExplore(host) {
+  graphIndexes = buildIndexes(graphCatalog);
+
+  // Provenance bar — what this Explore view is built from (package scope,
+  // function count, build time, engine). Shown above the view tabs so a SCOPED
+  // or stale catalog (e.g. a 'graph packages/contracts' run) reads as "1
+  // package, built 8 min ago", not as a broken/empty graph. Covers all three
+  // views since they share the one cached catalog.
+  renderCatalogProvenance(host, graphCatalog);
+
+  // (No shared filter chip bar — the Visualization view owns its own controls;
+  // the Functions table reads the default filterState via passesFilter.)
+
+  // View tab bar — built from the registered views.
+  const tabBar = el('div', { class: 'code-paths-tabs', id: 'code-paths-tabs' });
+  for (const view of views) {
+    const tab = el('div', {
+      class: 'code-paths-tab',
+      'data-view': view.id,
+      text: view.label,
+      onclick: () => activateView(view.id),
+    });
+    tabBar.appendChild(tab);
+  }
+  host.appendChild(tabBar);
+
+  // One container per view; only one is .active at a time.
+  const stack = el('div', { class: 'code-paths-view-container', id: 'code-paths-view-container' });
+  for (const view of views) {
+    const c = el('div', { class: 'code-paths-view', id: 'code-paths-view-' + view.id });
+    stack.appendChild(c);
+  }
+  host.appendChild(stack);
+
+  // Delegate row clicks to the function card.
+  stack.addEventListener('click', e => {
+    const row = e.target.closest && e.target.closest('[data-body-hash]');
+    if (!row) return;
+    openFunctionCard(row.dataset.bodyHash);
+  });
+
+  // Escape closes the function card.
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') closeFunctionCard();
+  });
+
+  // Render every view once on init.
+  for (const view of views) {
+    const container = document.getElementById('code-paths-view-' + view.id);
+    if (container) view.render(container, graphCatalog, graphIndexes, filterState);
+  }
+  const initialId = readViewIdFromHash() || (views[0] && views[0].id);
+  if (initialId) activateView(initialId);
+}
+
+// =======================================================
+// CODE PATHS — HASH ROUTE (deep-link initial view)
+// =======================================================
+function readViewIdFromHash() {
+  const m = /^#code-paths\/([a-z]+)/.exec(window.location.hash || '');
+  return m ? m[1] : null;
+}
+
+// =======================================================
+// CODE PATHS — CROSS-TAB NAV (graph sessions deep-link)
+// =======================================================
+/**
+ * Open the Code Paths tab on the Sessions subtab, scrolling to and
+ * selecting the row matching the given session id. Used by the
+ * Overview row-click handler so a graph row in Recent Activity opens
+ * the same per-session detail view that fit/sim rows open.
+ *
+ * Registered into the shared tabActivators registry under the key
+ * 'graph' (the StoredSession.tool value for graph runs); the Overview
+ * row-click handler invokes it through activateTabForSession() rather
+ * than naming this function directly.
+ */
+function openCodePathsSession(sessionId) {
+  const tab = document.querySelector('.tab[data-tab="code-paths"]');
+  const panel = document.getElementById('panel-code-paths');
+  if (!tab || !panel) return;
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  tab.classList.add('active');
+  panel.classList.add('active');
+  // Force the Sessions subtab.
+  const sessionsSub = panel.querySelector('.subtab[data-subtab="sessions"]');
+  const exploreSub = panel.querySelector('.subtab[data-subtab="explore"]');
+  const sessionsPanel = document.getElementById('panel-code-paths-sessions');
+  const explorePanel = document.getElementById('panel-code-paths-explore');
+  if (sessionsSub) sessionsSub.classList.add('active');
+  if (exploreSub) exploreSub.classList.remove('active');
+  if (sessionsPanel) sessionsPanel.classList.add('active');
+  if (explorePanel) explorePanel.classList.remove('active');
+  // Click the matching row to trigger the standard renderDetail flow.
+  const row = sessionsPanel && sessionsPanel.querySelector('tr[data-session-id="' + sessionId + '"]');
+  if (row) row.click();
+}
+
+// =======================================================
+// CODE PATHS — ACTIVATOR REGISTRATION
+// =======================================================
+if (typeof registerTabActivator === 'function') {
+  registerTabActivator('graph', openCodePathsSession);
+}
+`;
+}
+//# sourceMappingURL=code-paths.js.map

package/dist/code-paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-paths.js","sourceRoot":"","sources":["../src/code-paths.ts"],"names":[],"mappings":"AAAA,oLAAoL;AACpL;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,4BAA4B,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,UAAU,oBAAoB,CAAC,gBAAyB,yBAAyB;IACrF,6EAA6E;IAC7E,+DAA+D;IAC/D,uEAAuE;IACvE,0EAA0E;IAC1E,4EAA4E;IAC5E,4CAA4C;IAC5C,MAAM,OAAO,GAAG;QACd,mEAAmE;QACnE,oEAAoE;QACpE,uDAAuD;QACvD,0BAA0B,EAAE;QAC5B,oBAAoB,EAAE;QACtB,kBAAkB,EAAE;QACpB,kBAAkB,EAAE;QACpB,mEAAmE;QACnE,oEAAoE;QACpE,4BAA4B,EAAE;QAC9B,sEAAsE;QACtE,mDAAmD;QACnD,+BAA+B,EAAE;QACjC,qBAAqB,EAAE;QACvB,gBAAgB,EAAE;QAClB,iBAAiB,EAAE;QACnB,sBAAsB,EAAE;QACxB,uBAAuB,EAAE;QACzB,wBAAwB,EAAE;QAC1B,qBAAqB,EAAE;KACxB,CAAC;IAEF,uEAAuE;IACvE,0EAA0E;IAC1E,6EAA6E;IAC7E,2EAA2E;IAC3E,4EAA4E;IAC5E,6EAA6E;IAC7E,2EAA2E;IAC3E,wEAAwE;IACxE,MAAM,KAAK,GAAG,CAAC,uBAAuB,EAAE,EAAE,2BAA2B,EAAE,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAEjG,OAAO,CAAC,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAClE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,mBAAmB;IAC1B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLlB,CAAC;AACF,CAAC"}

package/dist/css/cards.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Cards, stats grid, sections, empty states, and the trend chart.
+ *
+ * Container shells used by every panel — score cards, the
+ * `.section + .card` shell that wraps every tabular view, and the
+ * empty-state placeholder.
+ */
+export declare function dashboardCssCards(): string;
+//# sourceMappingURL=cards.d.ts.map

package/dist/css/cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards.d.ts","sourceRoot":"","sources":["../../src/css/cards.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA2B1C"}

package/dist/css/cards.js

@@ -0,0 +1,36 @@
+/**
+ * Cards, stats grid, sections, empty states, and the trend chart.
+ *
+ * Container shells used by every panel — score cards, the
+ * `.section + .card` shell that wraps every tabular view, and the
+ * empty-state placeholder.
+ */
+export function dashboardCssCards() {
+    return String.raw `
+/* Cards and stats */
+.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.stat-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
+.stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+.stat-value { font-size: 28px; font-weight: 700; }
+.score-good { color: var(--success); } .score-warn { color: var(--warning); } .score-bad { color: var(--error); }
+.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
+.section { margin-bottom: 32px; }
+.empty { color: var(--text-dim); font-style: italic; padding: 24px; text-align: center; }
+
+/* Contributed per-run tabs (host-owned-run-timing Phase 5) — generic
+   declarative views rendered without any tool import. */
+.panel-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
+.chart-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
+.timeline { display: flex; flex-direction: column; gap: 8px; }
+.timeline-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
+.timeline-time { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
+.timeline-detail { font-size: 13px; }
+.contributed-html { white-space: pre-wrap; word-break: break-word; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-size: 12px; overflow-x: auto; }
+
+/* Trend chart */
+.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; }
+.trend-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 8px; max-width: 40px; position: relative; cursor: pointer; }
+.trend-bar:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg-hover); color: var(--text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; white-space: nowrap; border: 1px solid var(--border); }
+`;
+}
+//# sourceMappingURL=cards.js.map

package/dist/css/cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards.js","sourceRoot":"","sources":["../../src/css/cards.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Code Paths panel styling — search/chip bar, filter drawer, view tab
+ * bar, info button, view containers, and the Coupling heat-map.
+ *
+ * All selectors here are scoped to `.code-paths-*` so they cannot
+ * accidentally style the fit/sim panels.
+ */
+export declare function dashboardCssCodePaths(): string;
+//# sourceMappingURL=code-paths.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-paths.d.ts","sourceRoot":"","sources":["../../src/css/code-paths.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAsG9C"}

package/dist/css/code-paths.js

@@ -0,0 +1,111 @@
+/**
+ * Code Paths panel styling — search/chip bar, filter drawer, view tab
+ * bar, info button, view containers, and the Coupling heat-map.
+ *
+ * All selectors here are scoped to `.code-paths-*` so they cannot
+ * accidentally style the fit/sim panels.
+ */
+export function dashboardCssCodePaths() {
+    return String.raw `
+/* ====== Code Paths panel (v0.3) ====== */
+.code-paths-search { width: 320px; margin-bottom: 12px; display: block; }
+/* (The shared filter chip bar / collapsible filter drawer was removed — the
+   Visualization view owns its own controls and the other views don't need it.) */
+.code-paths-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
+.code-paths-tab { padding: 8px 16px; cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; user-select: none; }
+.code-paths-tab:hover { color: var(--text-secondary); }
+.code-paths-tab.active { color: var(--text); border-bottom-color: var(--accent); }
+
+/* Inline ⓘ button next to a section heading; opens the help drawer. */
+.section-info { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-dim); width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-style: italic; font-weight: 700; line-height: 16px; padding: 0; margin-left: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: color 0.15s, border-color 0.15s; }
+.section-info:hover { color: var(--accent); border-color: var(--accent); }
+.code-paths-view { display: none; }
+.code-paths-view.active { display: block; }
+
+/* Code Paths tables can hold long file paths and synthetic function
+   names; allow cells to wrap rather than overflow the card width. */
+.code-paths-view .data-table { table-layout: fixed; width: 100%; }
+.code-paths-view .data-table td,
+.code-paths-view .data-table th { white-space: normal; word-break: break-all; overflow-wrap: anywhere; vertical-align: top; }
+
+/* ====== Code Paths Graph view (Cytoscape) ====== */
+.code-paths-graph-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+.code-paths-graph-toolbar-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
+/* Visualization controls — a 2-row × 4-column grid; 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
+   Each label has a fixed width so the controls line up within a column, and
+   the columns are content-sized so the rows read like a table. Package, Kind,
+   and Edges are disabled at package level (they only apply at function level),
+   so they fade rather than vanish. */
+.code-paths-graph-grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 12px 24px; align-items: center; margin-bottom: 12px; }
+.code-paths-graph-cell { display: flex; align-items: center; gap: 8px; }
+.code-paths-graph-cell .code-paths-graph-toolbar-label { min-width: 56px; text-align: right; }
+.code-paths-graph-cell .code-paths-graph-select { width: 190px; min-width: 0; }
+.code-paths-graph-cell .code-paths-graph-ms { width: 190px; }
+.code-paths-graph-cell .code-paths-graph-ms-trigger { width: 100%; }
+.code-paths-graph-cell-search .code-paths-graph-search { width: 220px; margin-bottom: 0; }
+.code-paths-graph-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none; height: 30px; }
+.code-paths-graph-checkbox input { cursor: pointer; }
+/* Functions view controls row (Kind · Package · search). */
+.code-paths-ranked-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
+.code-paths-ranked-controls .code-paths-search { margin-bottom: 0; }
+.code-paths-graph-select { font-size: 12px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font); min-width: 150px; height: 30px; box-sizing: border-box; }
+.code-paths-graph-select:disabled { opacity: 0.4; cursor: not-allowed; }
+/* Kind multi-select: a trigger button + a checkbox popover (native
+   <select multiple> renders an always-open listbox, which looked wrong). */
+.code-paths-graph-ms { position: relative; display: inline-block; }
+.code-paths-graph-ms-trigger { cursor: pointer; text-align: left; }
+.code-paths-graph-ms-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 190px; max-height: 230px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
+.code-paths-graph-ms-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; white-space: nowrap; border-radius: 3px; }
+.code-paths-graph-ms-item:hover { background: var(--bg-hover); color: var(--text); }
+.code-paths-graph-banner { font-size: 12px; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 10px; }
+.code-paths-graph-search { width: 320px; margin-bottom: 10px; display: block; }
+.code-paths-graph-canvas { width: 100%; height: 640px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
+/* Node highlight + impact states live on the Cytoscape canvas (set via cy
+   classes gv-search-hit / gv-search-fade / gv-selected / gv-upstream /
+   gv-downstream / gv-dimmed). The canvas can't read CSS custom properties,
+   so the authoritative colors are inline in view-graph.ts's stylesheet;
+   these DOM classes mirror the naming for any future DOM overlay. */
+.search-hit { outline: 2px solid var(--accent); }
+.search-fade { opacity: 0.3; }
+.gv-selected { outline: 2px solid var(--accent); }
+.gv-upstream { color: var(--accent-sim); }
+.gv-downstream { color: var(--accent-fitness); }
+.gv-dimmed { opacity: 0.1; }
+
+/* Coupling toolbar (Export CSV) — sits between the heading and the matrix. */
+.coupling-toolbar { display: flex; justify-content: flex-start; margin-bottom: 8px; }
+.coupling-export-btn { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: var(--font); }
+.coupling-export-btn:hover { background: var(--bg-hover); color: var(--text); }
+
+/* Coupling heat map cell shading — set --coupling-density per cell */
+.coupling-cell { background: color-mix(in srgb, var(--bg-surface), var(--accent) calc(var(--coupling-density, 0) * 60%)); cursor: pointer; }
+.coupling-cell.empty { color: var(--text-dim); cursor: default; }
+
+/* Bounded, scrollable viewport so a large N×N matrix stays on the page —
+   gives both a vertical and a horizontal scrollbar instead of overflowing. */
+.coupling-scroll { overflow: auto; max-height: 70vh; max-width: 100%; }
+
+/* border-collapse:separate (not collapse) so sticky cells keep their borders
+   while scrolling — collapsed borders detach from sticky elements. Cells carry
+   only right+bottom borders to avoid doubling; the first row/column add the
+   top/left outer edges. */
+.coupling-table { width: auto; border-collapse: separate; border-spacing: 0; font-size: 12px; }
+.coupling-table th, .coupling-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: center; min-width: 36px; }
+.coupling-table thead th { border-top: 1px solid var(--border); }
+.coupling-table tr > :first-child { border-left: 1px solid var(--border); }
+.coupling-table th { color: var(--text-muted); background: var(--bg-surface); }
+.coupling-table th.row-label { text-align: right; padding-right: 10px; }
+
+/* Pin the header row (survives vertical scroll) and the label column (survives
+   horizontal scroll); the top-left corner is pinned on both axes and layered
+   above both. Sticky cells need an opaque background — the th rule above
+   supplies one — so scrolling content doesn't bleed through. */
+.coupling-table thead th { position: sticky; top: 0; z-index: 2; }
+.coupling-table th.row-label { position: sticky; left: 0; z-index: 1; }
+.coupling-table thead th.row-label { z-index: 3; }
+`;
+}
+//# sourceMappingURL=code-paths.js.map

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

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

package/dist/css/data-table.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Data tables — the `.data-table` shell used by every list view —
+ * plus check rows, findings, expander rows, badges, pagination, the
+ * search/filter bar, the long-description block, and the pass-rate
+ * progress bar.
+ *
+ * One file because all of these only ever appear inside a card body
+ * around a `.data-table`; splitting further would just create a pile
+ * of two-rule files.
+ */
+export declare function dashboardCssDataTable(): string;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/css/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/css/data-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CA2F9C"}