codebaseiq 0.1.0 → 0.2.0

package/ui/view/focus.js

@@ -0,0 +1,379 @@
+import {
+  asArray,
+  chip,
+  describeCoverage,
+  editorLink,
+  el,
+  expandableList,
+  fill,
+  formatLocation,
+  getSource,
+  isAbort,
+  normalizeLaneItem,
+  normalizeStatements,
+  notice,
+  pathLabel,
+  plural,
+  routeLink,
+  staleNotice,
+  titleCase,
+} from '/assets/api.js';
+
+const LOWER_LANES = ['contracts', 'data', 'state', 'runtime'];
+const SOURCE_LINE_CAP = 2000;
+const LANE_TITLES = { callers: 'Callers', callees: 'Callees' };
+
+function laneEntries(lanes, name) {
+  return asArray(lanes[name]).map(normalizeLaneItem);
+}
+
+function laneItem(item, nav) {
+  const location = formatLocation(item.file, item.line);
+  const title = item.symbol
+    ? routeLink(nav, { symbol: item.symbol }, item.label, { class: 'lane-title' })
+    : (editorLink(item.editorUri, item.label, 'lane-title') ?? el('span', { class: 'lane-title' }, item.label));
+  const place =
+    item.symbol && item.editorUri
+      ? editorLink(item.editorUri, location, 'lane-place')
+      : location && location !== item.label
+        ? el('span', { class: 'lane-place' }, location)
+        : null;
+  return el(
+    'li',
+    { class: 'lane-item', data: { strength: item.strength ?? 'unknown' } },
+    title,
+    el(
+      'div',
+      { class: 'lane-meta' },
+      place,
+      item.subtypes.map((subtype) => chip(subtype)),
+      item.reference ? chip('reference', 'subtle') : null,
+      item.local ? chip('local', 'subtle') : null,
+      item.count !== null ? el('span', { class: 'lane-count', title: 'Count' }, `×${item.count}`) : null,
+      item.strength ? el('span', { class: 'lane-strength' }, item.strength) : null,
+    ),
+  );
+}
+
+function lane(name, items, nav, className = '') {
+  return el(
+    'section',
+    { class: `lane ${className}`.trim(), data: { lane: name } },
+    el('h3', null, LANE_TITLES[name] ?? titleCase(name), el('span', { class: 'count' }, items.length)),
+    items.length === 0
+      ? el('p', { class: 'empty' }, 'None reported')
+      : expandableList(items, (item) => laneItem(item, nav), { limit: 25, className: 'lane-list' }),
+  );
+}
+
+function symbolCard(definition, parent, nav) {
+  return el(
+    'section',
+    { class: 'symbol-card', 'aria-label': 'Focused symbol' },
+    el('strong', { class: 'symbol-card-name' }, definition.name),
+    el('div', { class: 'muted' }, formatLocation(definition.file, definition.startLine)),
+    parent ? el('div', { class: 'muted' }, 'in ', routeLink(nav, { symbol: parent.symbol }, parent.name)) : null,
+  );
+}
+
+function lanesGrid(data, nav) {
+  const lanes = data.lanes && typeof data.lanes === 'object' ? data.lanes : {};
+  const extra = Object.keys(lanes).filter((name) => !['callers', 'callees', ...LOWER_LANES].includes(name));
+  return el(
+    'div',
+    { class: 'lanes' },
+    el(
+      'div',
+      { class: 'lanes-main' },
+      lane('callers', laneEntries(lanes, 'callers'), nav, 'lane-callers'),
+      symbolCard(data.definition, data.parent, nav),
+      lane('callees', laneEntries(lanes, 'callees'), nav, 'lane-callees'),
+    ),
+    el(
+      'div',
+      { class: 'lanes-more' },
+      [...LOWER_LANES, ...extra].map((name) => lane(name, laneEntries(lanes, name), nav)),
+    ),
+  );
+}
+
+function header(data) {
+  const { definition } = data;
+  return el(
+    'header',
+    { class: 'panel-head' },
+    el('p', { class: 'eyebrow' }, 'Symbol'),
+    el('h2', { class: 'path-title', tabindex: '-1' }, definition.name),
+    definition.signature ? el('pre', { class: 'signature' }, el('code', null, definition.signature)) : null,
+    definition.documentation ? el('div', { class: 'documentation' }, definition.documentation) : null,
+    el(
+      'div',
+      { class: 'head-actions' },
+      el('span', { class: 'muted' }, formatLocation(definition.file, definition.startLine)),
+      editorLink(definition.editorUri, 'Open in editor'),
+    ),
+    data.source?.stale === true ? staleNotice() : null,
+  );
+}
+
+function relatives(data, nav) {
+  const members = asArray(data.members);
+  if (!data.parent && members.length === 0) return null;
+  return el(
+    'section',
+    { class: 'block relatives' },
+    data.parent
+      ? el(
+          'p',
+          null,
+          el('span', { class: 'muted' }, 'Parent '),
+          routeLink(nav, { symbol: data.parent.symbol }, data.parent.name),
+        )
+      : null,
+    members.length > 0
+      ? el(
+          'div',
+          null,
+          el('h3', null, 'Members', el('span', { class: 'count' }, members.length)),
+          expandableList(
+            members,
+            (member) =>
+              el(
+                'li',
+                null,
+                routeLink(nav, { symbol: member.symbol }, member.name, { class: 'path-link' }),
+                member.line ? el('span', { class: 'muted' }, `L${member.line}`) : null,
+              ),
+            { limit: 20, className: 'plain-list columns' },
+          ),
+        )
+      : null,
+  );
+}
+
+function importsBlock(imports, nav) {
+  const paths = asArray(imports).filter((path) => typeof path === 'string');
+  if (paths.length === 0) return null;
+  return el(
+    'details',
+    { class: 'block collapsible' },
+    el('summary', null, 'Imports in this file', el('span', { class: 'count' }, paths.length)),
+    expandableList(paths, (path) =>
+      el('li', null, routeLink(nav, { file: path }, pathLabel(path), { class: 'path-link', title: path })),
+    ),
+  );
+}
+
+function lineCount(text) {
+  return text.replace(/\n$/, '').split('\n').length;
+}
+
+function sourceBlock(data) {
+  const source = data.source;
+  if (!source || typeof source.text !== 'string') return null;
+  const { definition } = data;
+  const gutter = el('pre', { class: 'gutter', 'aria-hidden': 'true' });
+  const code = el('code');
+  const note = el('span', { class: 'muted', role: 'status' });
+  const show = (text, startLine) => {
+    gutter.textContent = Array.from({ length: lineCount(text) }, (_, index) => startLine + index).join('\n');
+    code.textContent = text;
+  };
+  const start = source.startLine ?? definition.startLine;
+  show(source.text, start);
+  const range = `L${start}–${source.endLine ?? definition.endLine}`;
+
+  const actions = [note];
+  if (source.truncated) {
+    note.textContent = 'Showing a truncated excerpt.';
+    const load = el(
+      'button',
+      {
+        type: 'button',
+        class: 'link-button',
+        on: {
+          click: async () => {
+            load.disabled = true;
+            note.textContent = 'Loading full source';
+            try {
+              const end = Math.min(definition.endLine, start + SOURCE_LINE_CAP - 1);
+              const full = await getSource({ file: definition.file, start, end });
+              show(full.text, full.startLine ?? start);
+              note.textContent = end < definition.endLine ? `Showing the first ${SOURCE_LINE_CAP} lines.` : '';
+              load.remove();
+            } catch (error) {
+              if (isAbort(error)) return;
+              note.textContent = error.message;
+              load.disabled = false;
+            }
+          },
+        },
+      },
+      'Load full definition',
+    );
+    actions.push(load);
+  }
+  return el(
+    'details',
+    { class: 'block collapsible source', open: true },
+    el('summary', null, 'Source', el('span', { class: 'count' }, range)),
+    el('div', { class: 'source-actions' }, actions),
+    el('div', { class: 'code-view' }, gutter, el('pre', { class: 'code' }, code)),
+  );
+}
+
+function endpointCell(endpoint, nav) {
+  return el(
+    'td',
+    null,
+    endpoint.symbol
+      ? routeLink(nav, { symbol: endpoint.symbol }, endpoint.label, { class: 'lane-title' })
+      : el('code', null, endpoint.label),
+    endpoint.place ? el('div', { class: 'muted place' }, endpoint.place) : null,
+  );
+}
+
+function statementsTable(group, nav) {
+  return el(
+    'table',
+    { class: 'statements' },
+    el('caption', null, group.name, el('span', { class: 'count' }, group.rows.length)),
+    el(
+      'thead',
+      null,
+      el(
+        'tr',
+        null,
+        ['Relationship', 'From', 'To', 'Strength'].map((heading) => el('th', { scope: 'col' }, heading)),
+      ),
+    ),
+    el(
+      'tbody',
+      null,
+      group.rows.map((row) =>
+        el(
+          'tr',
+          { data: { strength: row.strength || 'unknown' } },
+          el('td', null, row.subtype),
+          endpointCell(row.from, nav),
+          endpointCell(row.to, nav),
+          el('td', null, row.strength),
+        ),
+      ),
+    ),
+  );
+}
+
+function inventoryTable(inventory) {
+  return el(
+    'details',
+    { class: 'collapsible' },
+    el('summary', null, 'Inventory', el('span', { class: 'count' }, inventory.length)),
+    el(
+      'table',
+      { class: 'statements' },
+      el(
+        'thead',
+        null,
+        el(
+          'tr',
+          null,
+          ['Family', 'Subtype', 'Incoming', 'Outgoing', 'Both'].map((heading) => el('th', { scope: 'col' }, heading)),
+        ),
+      ),
+      el(
+        'tbody',
+        null,
+        inventory.map((row) =>
+          el(
+            'tr',
+            null,
+            el('td', null, row.family),
+            el('td', null, row.subtype),
+            el('td', { class: 'num' }, row.incoming),
+            el('td', { class: 'num' }, row.outgoing),
+            el('td', { class: 'num' }, row.both),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+function statementsBlock(data, nav, options) {
+  const on = options.statements === true;
+  const toggle = el(
+    'button',
+    {
+      type: 'button',
+      class: 'toggle',
+      'aria-pressed': String(on),
+      data: { focusKey: 'statements' },
+      on: { click: () => options.onToggleStatements?.(!on) },
+    },
+    'Statements',
+  );
+  const { inventory, groups } = on ? normalizeStatements(data.statements) : { inventory: [], groups: [] };
+  return el(
+    'section',
+    { class: 'block' },
+    el(
+      'div',
+      { class: 'block-head' },
+      toggle,
+      el('span', { class: 'muted' }, 'Statement-level relationships, grouped by family'),
+    ),
+    on && groups.length === 0 ? el('p', { class: 'empty' }, 'No statements reported') : null,
+    inventory.length > 0 ? inventoryTable(inventory) : null,
+    groups.map((group) => statementsTable(group, nav)),
+  );
+}
+
+/** The detail panel for one matched symbol: header, relatives, evidence lanes, source, and statements. */
+export function renderFocus(container, data, nav, options = {}) {
+  const coverage = describeCoverage(data.coverage);
+  fill(
+    container,
+    header(data),
+    relatives(data, nav),
+    lanesGrid(data, nav),
+    coverage ? el('p', { class: 'coverage' }, el('strong', null, 'Coverage '), coverage) : null,
+    importsBlock(data.fileImports, nav),
+    sourceBlock(data),
+    statementsBlock(data, nav, options),
+  );
+}
+
+/** The picker shown when a focus selector matches several symbols. */
+export function renderCandidates(container, data, nav, selector) {
+  const candidates = asArray(data.candidates);
+  const total = Number.isFinite(data.total) ? data.total : candidates.length;
+  fill(
+    container,
+    el(
+      'header',
+      { class: 'panel-head' },
+      el('p', { class: 'eyebrow' }, 'Ambiguous focus'),
+      el('h2', { class: 'path-title', tabindex: '-1' }, selector),
+      el('p', { class: 'hint' }, `${plural(total, 'symbol')} match. Choose one.`),
+    ),
+    el(
+      'section',
+      { class: 'block' },
+      expandableList(
+        candidates,
+        (candidate) =>
+          el(
+            'li',
+            { class: 'candidate' },
+            routeLink(nav, { symbol: candidate.symbol }, candidate.name, { class: 'lane-title' }),
+            el('span', { class: 'muted' }, formatLocation(candidate.file, candidate.line)),
+          ),
+        { limit: 50 },
+      ),
+      total > candidates.length
+        ? notice('info', `Showing ${candidates.length} of ${total}. Narrow the selector to see the rest.`)
+        : null,
+    ),
+  );
+}

package/ui/view/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="codebaseiq-token" content="__CODEBASEIQ_TOKEN__" />
+    <title>codebaseiq view</title>
+    <link rel="stylesheet" href="/assets/styles.css" />
+    <script type="module" src="/assets/app.js"></script>
+  </head>
+  <body>
+    <a class="skip-link" href="#detail">Skip to details</a>
+    <header class="topbar">
+      <a class="brand" id="project-name" href="/">codebaseiq</a>
+      <nav class="crumbs" id="breadcrumbs" aria-label="Breadcrumbs"></nav>
+      <div class="tools">
+        <div class="segmented" role="group" aria-label="Edge basis">
+          <button type="button" data-basis="references" aria-pressed="true">References</button>
+          <button type="button" data-basis="imports" aria-pressed="false">Imports</button>
+        </div>
+        <form class="search" id="search" role="search">
+          <input
+            id="search-input"
+            type="search"
+            name="focus"
+            placeholder="Focus a symbol"
+            aria-label="Focus selector"
+            aria-keyshortcuts="/"
+            title="Press / to search"
+            autocomplete="off"
+            spellcheck="false"
+          />
+          <button type="submit">Focus</button>
+        </form>
+        <button type="button" id="builder-button" class="accent" aria-expanded="false" aria-controls="builder" hidden>
+          Builder
+        </button>
+        <span class="pill" id="watcher-state" data-state="unknown">Connecting</span>
+      </div>
+      <div class="progress" aria-hidden="true"></div>
+    </header>
+    <main class="split" id="split" data-view="scope">
+      <section class="pane map-pane" id="map" aria-label="Code map"></section>
+      <section class="pane detail-pane" id="detail" aria-label="Details" tabindex="-1">
+        <p class="muted pad">Loading</p>
+      </section>
+    </main>
+    <aside class="drawer" id="builder" role="dialog" aria-labelledby="builder-title" hidden></aside>
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+    <div class="visually-hidden" id="announce" role="status" aria-live="polite"></div>
+    <noscript><p class="pad">The codebaseiq viewer needs JavaScript. Nothing is loaded from the network.</p></noscript>
+  </body>
+</html>