codebaseiq 0.1.0 → 0.3.0

package/ui/view/builder.js

@@ -0,0 +1,323 @@
+import {
+  ApiError,
+  asArray,
+  chip,
+  el,
+  fill,
+  formatLocation,
+  isAbort,
+  notice,
+  plural,
+  postBuilder,
+  routeLink,
+  titleCase,
+} from '/assets/api.js';
+
+const BUCKETS = ['reuse', 'rework', 'compose'];
+const DESCRIPTION_LIMIT = 2000;
+const STATUS_HINTS = {
+  403: 'Reload this page to get a fresh session token.',
+  409: 'Wait for the running search to finish, then try again.',
+  504: 'The provider took too long. Try again, or switch mode.',
+};
+
+function splitList(value) {
+  return value
+    .split(/[\s,]+/)
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
+function termGroups(value) {
+  return value
+    .split('\n')
+    .map((line) =>
+      line
+        .split('|')
+        .map((word) => word.trim())
+        .filter(Boolean),
+    )
+    .filter((group) => group.length > 0);
+}
+
+function describeProbes(probes) {
+  const rows = [
+    ['Terms', asArray(probes.terms).map((group) => (Array.isArray(group) ? group.join(' | ') : String(group)))],
+    ['Names', asArray(probes.names)],
+    ['Calls', asArray(probes.calls)],
+    ['Params', asArray(probes.params)],
+    ['Returns', asArray(probes.returns)],
+    ['Kinds', asArray(probes.kinds)],
+  ].filter(([, values]) => values.length > 0);
+  if (rows.length === 0) return null;
+  return el(
+    'dl',
+    { class: 'probe-list' },
+    rows.map(([label, values]) => [
+      el('dt', null, label),
+      el(
+        'dd',
+        null,
+        values.map((value) => chip(value)),
+      ),
+    ]),
+  );
+}
+
+function candidateCard(candidate, nav, onActivate) {
+  const route = candidate.symbolId ? { symbol: candidate.symbolId } : { focus: candidate.name };
+  return el(
+    'li',
+    { class: 'card' },
+    routeLink(nav, route, candidate.name, { class: 'lane-title' }, onActivate),
+    el('div', { class: 'muted' }, formatLocation(candidate.file, candidate.line)),
+    candidate.signature ? el('code', { class: 'card-signature' }, candidate.signature) : null,
+    el(
+      'div',
+      { class: 'lane-meta' },
+      chip(candidate.tier, candidate.tier === 'direct' ? 'strong' : ''),
+      Number.isFinite(candidate.score) ? el('span', { class: 'muted' }, `score ${candidate.score.toFixed(2)}`) : null,
+    ),
+    asArray(candidate.why).length > 0
+      ? el(
+          'ul',
+          { class: 'why' },
+          candidate.why.map((reason) => el('li', null, reason)),
+        )
+      : null,
+  );
+}
+
+function renderResponse(response, nav, onActivate) {
+  const candidates = asArray(response.candidates);
+  const fallbacks = asArray(response.fallbacksTried);
+  const unresolved = asArray(response.unresolvedProbes);
+  const probes = response.probes ? describeProbes(response.probes) : null;
+  return [
+    el(
+      'div',
+      { class: 'result-summary' },
+      el('span', null, 'Provider '),
+      chip(response.provider || 'none', 'strong'),
+      chip('heuristic', 'subtle'),
+      response.coverage?.note ? el('p', { class: 'muted' }, response.coverage.note) : null,
+    ),
+    fallbacks.length > 0
+      ? el(
+          'details',
+          { class: 'collapsible' },
+          el('summary', null, 'Fallbacks tried', el('span', { class: 'count' }, fallbacks.length)),
+          el(
+            'ul',
+            { class: 'plain-list stacked' },
+            fallbacks.map((fallback) => el('li', null, el('strong', null, fallback.provider), ` ${fallback.reason}`)),
+          ),
+        )
+      : null,
+    probes ? el('details', { class: 'collapsible' }, el('summary', null, 'Probes matched'), probes) : null,
+    unresolved.length > 0
+      ? notice('info', `Unresolved probes: ${unresolved.map((entry) => `${entry.probe} (${entry.status})`).join(', ')}`)
+      : null,
+    candidates.length === 0
+      ? el('p', { class: 'empty' }, 'No candidates found.')
+      : el(
+          'div',
+          { class: 'buckets' },
+          BUCKETS.map((bucket) => {
+            const items = candidates.filter((candidate) => candidate.bucket === bucket);
+            return el(
+              'section',
+              { class: 'bucket', data: { bucket } },
+              el('h3', null, titleCase(bucket), el('span', { class: 'count' }, items.length)),
+              items.length === 0
+                ? el('p', { class: 'empty' }, 'None')
+                : el(
+                    'ul',
+                    { class: 'cards' },
+                    items.map((candidate) => candidateCard(candidate, nav, onActivate)),
+                  ),
+            );
+          }),
+        ),
+  ];
+}
+
+/** The builder drawer: describe code about to be written, then browse reuse, rework, and compose candidates. */
+export function createBuilder({ drawer, trigger, nav }) {
+  let modes = [];
+  let selectedMode = null;
+  let inFlight = null;
+
+  const title = el('h2', { id: 'builder-title' }, 'Symbol builder');
+  const closeButton = el('button', { type: 'button', class: 'icon-button', 'aria-label': 'Close builder' }, '×');
+  const description = el('textarea', {
+    id: 'builder-description',
+    rows: '4',
+    maxlength: String(DESCRIPTION_LIMIT),
+    placeholder: 'Retry a failed request with exponential backoff',
+  });
+  const modeGroup = el('fieldset', { class: 'modes' }, el('legend', null, 'Mode'));
+  const terms = el('textarea', {
+    id: 'builder-terms',
+    rows: '3',
+    placeholder: 'retry | reattempt | backoff',
+    spellcheck: 'false',
+  });
+  const calls = el('input', {
+    id: 'builder-calls',
+    type: 'text',
+    placeholder: 'fetch, setTimeout',
+    spellcheck: 'false',
+  });
+  const names = el('input', {
+    id: 'builder-names',
+    type: 'text',
+    placeholder: 'retryWithBackoff',
+    spellcheck: 'false',
+  });
+  const submit = el('button', { type: 'submit', class: 'accent' }, 'Search');
+  const status = el('span', { class: 'muted', role: 'status' });
+  const results = el('div', { class: 'results', 'aria-live': 'polite' });
+
+  const form = el(
+    'form',
+    { class: 'drawer-form' },
+    el(
+      'p',
+      { class: 'hint' },
+      'Describe the code you are about to write to find existing code to reuse, rework, or compose.',
+    ),
+    el('label', { for: 'builder-description' }, 'Description'),
+    description,
+    modeGroup,
+    el(
+      'details',
+      { class: 'collapsible' },
+      el('summary', null, 'Probes (optional)'),
+      el('label', { for: 'builder-terms' }, 'Terms: one concept per line, synonyms separated by |'),
+      terms,
+      el('label', { for: 'builder-calls' }, 'Calls the new code makes'),
+      calls,
+      el('label', { for: 'builder-names' }, 'Names the code might already use'),
+      names,
+    ),
+    el('div', { class: 'form-actions' }, submit, status),
+  );
+  drawer.replaceChildren(
+    el('header', { class: 'drawer-head' }, title, closeButton),
+    el('div', { class: 'drawer-body' }, form, results),
+  );
+
+  function open() {
+    drawer.hidden = false;
+    trigger.setAttribute('aria-expanded', 'true');
+    description.focus();
+  }
+
+  function close() {
+    if (drawer.hidden) return;
+    drawer.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.focus();
+  }
+
+  function renderModes(available, preferred) {
+    modes = available;
+    if (!modes.includes(selectedMode)) selectedMode = modes.includes(preferred) ? preferred : (modes[0] ?? null);
+    fill(
+      modeGroup,
+      el('legend', null, 'Mode'),
+      modes.map((mode) =>
+        el(
+          'label',
+          { class: 'radio' },
+          el('input', {
+            type: 'radio',
+            name: 'builder-mode',
+            value: mode,
+            checked: mode === selectedMode,
+            on: {
+              change: () => {
+                selectedMode = mode;
+              },
+            },
+          }),
+          mode,
+        ),
+      ),
+    );
+    modeGroup.hidden = modes.length === 0;
+  }
+
+  function buildRequest() {
+    const request = {};
+    const text = description.value.trim();
+    if (text) request.description = text;
+    const probes = {
+      terms: termGroups(terms.value),
+      names: splitList(names.value),
+      calls: splitList(calls.value),
+      params: [],
+      returns: [],
+      kinds: [],
+    };
+    if (probes.terms.length + probes.names.length + probes.calls.length > 0) request.probes = probes;
+    if (selectedMode) request.mode = selectedMode;
+    return request;
+  }
+
+  function showFailure(error) {
+    const hint = error instanceof ApiError ? STATUS_HINTS[error.status] : null;
+    results.replaceChildren(notice('error', error.message, hint ? ` ${hint}` : ''));
+  }
+
+  async function run(event) {
+    event.preventDefault();
+    if (inFlight) return;
+    const request = buildRequest();
+    if (!request.description && !request.probes) {
+      results.replaceChildren(notice('error', 'Enter a description or at least one probe.'));
+      return;
+    }
+    inFlight = new AbortController();
+    submit.disabled = true;
+    results.setAttribute('aria-busy', 'true');
+    status.textContent = 'Searching';
+    try {
+      const response = await postBuilder(request, { signal: inFlight.signal });
+      fill(results, renderResponse(response, nav, close));
+      status.textContent = plural(asArray(response.candidates).length, 'candidate');
+    } catch (error) {
+      if (isAbort(error)) return;
+      status.textContent = '';
+      showFailure(error);
+    } finally {
+      inFlight = null;
+      submit.disabled = false;
+      results.removeAttribute('aria-busy');
+    }
+  }
+
+  form.addEventListener('submit', run);
+  closeButton.addEventListener('click', close);
+  drawer.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') close();
+  });
+  trigger.addEventListener('click', () => (drawer.hidden ? open() : close()));
+
+  return {
+    /** Apply `meta.builder`: show the trigger only when a builder is available. */
+    configure(info) {
+      const available = Boolean(info?.available);
+      trigger.hidden = !available;
+      if (!available) {
+        inFlight?.abort();
+        drawer.hidden = true;
+        return;
+      }
+      const availableModes = Array.isArray(info.modes) ? info.modes.filter((mode) => typeof mode === 'string') : [];
+      if (availableModes.join() !== modes.join()) renderModes(availableModes, info.defaultMode);
+    },
+    close,
+  };
+}

package/ui/view/file-panel.js

@@ -0,0 +1,170 @@
+import {
+  asArray,
+  chip,
+  editorLink,
+  el,
+  expandableList,
+  fill,
+  pathLabel,
+  plural,
+  routeLink,
+  staleNotice,
+} from '/assets/api.js';
+
+function fileList(title, paths, nav) {
+  return el(
+    'section',
+    { class: 'block' },
+    el('h3', null, title, el('span', { class: 'count' }, paths.length)),
+    paths.length === 0
+      ? el('p', { class: 'empty' }, 'None reported')
+      : expandableList(paths, (path) =>
+          el('li', null, routeLink(nav, { file: path }, pathLabel(path), { class: 'path-link', title: path })),
+        ),
+  );
+}
+
+function outlineEntry(entry, nav) {
+  const lines = entry.startLine
+    ? `${entry.startLine}${entry.endLine > entry.startLine ? `–${entry.endLine}` : ''}`
+    : '';
+  const row = el(
+    'div',
+    { class: 'outline-row' },
+    routeLink(
+      nav,
+      { symbol: entry.symbol },
+      [chip(entry.kind || 'symbol', 'kind'), el('span', { class: 'outline-name' }, entry.name)],
+      { class: 'outline-link' },
+    ),
+    lines ? el('span', { class: 'lines' }, `L${lines}`) : null,
+  );
+  const children = asArray(entry.children);
+  return el(
+    'li',
+    null,
+    row,
+    entry.signature ? el('code', { class: 'outline-signature' }, entry.signature) : null,
+    children.length > 0
+      ? el(
+          'ul',
+          { class: 'outline-list' },
+          children.map((child) => outlineEntry(child, nav)),
+        )
+      : null,
+  );
+}
+
+function outlineCount(entries) {
+  return entries.reduce((total, entry) => total + 1 + outlineCount(asArray(entry.children)), 0);
+}
+
+/** The detail panel for one file: where it lives, what it relates to, and its symbols. */
+export function renderFilePanel(container, data, nav) {
+  const outline = asArray(data.outline);
+  const dependsOn = asArray(data.dependsOn);
+  const dependedOnBy = asArray(data.dependedOnBy);
+  fill(
+    container,
+    el(
+      'header',
+      { class: 'panel-head' },
+      el('p', { class: 'eyebrow' }, 'File'),
+      el('h2', { class: 'path-title', tabindex: '-1' }, pathLabel(data.file)),
+      el(
+        'div',
+        { class: 'head-actions' },
+        editorLink(data.editorUri, 'Open in editor'),
+        el('span', { class: 'muted' }, `${plural(outlineCount(outline), 'symbol')}`),
+      ),
+      data.stale === true ? staleNotice() : null,
+    ),
+    el(
+      'section',
+      { class: 'block' },
+      el('h3', null, 'Outline', el('span', { class: 'count' }, outlineCount(outline))),
+      outline.length === 0
+        ? el('p', { class: 'empty' }, 'No indexed symbols in this file')
+        : el(
+            'ul',
+            { class: 'outline-list root' },
+            outline.map((entry) => outlineEntry(entry, nav)),
+          ),
+    ),
+    fileList('Depends on', dependsOn, nav),
+    fileList('Depended on by', dependedOnBy, nav),
+  );
+}
+
+function scopeStat(value, label) {
+  return el('div', { class: 'stat' }, el('strong', null, value), el('span', null, label));
+}
+
+function nodeRow(node, nav) {
+  const route = node.kind === 'file' || node.isFile ? { file: node.path } : { scope: node.path };
+  const detail = node.kind === 'directory' && node.fileCount !== null ? plural(node.fileCount, 'file') : null;
+  return el(
+    'li',
+    null,
+    routeLink(nav, route, node.kind === 'directory' ? `${node.name}/` : node.name, {
+      class: 'path-link',
+      title: node.path,
+    }),
+    detail ? el('span', { class: 'muted' }, detail) : null,
+    node.cycle === null ? null : chip(`cycle ${node.cycle}`, 'danger'),
+  );
+}
+
+/** The detail panel when a directory is the focus: its contents and strongest dependencies as lists. */
+export function renderScopePanel(container, scope, nav) {
+  const byKind = (kind) => scope.nodes.filter((node) => node.kind === kind);
+  const directories = byKind('directory');
+  const files = byKind('file');
+  const externals = byKind('external');
+  const names = new Map(scope.nodes.map((node) => [node.id, node.name]));
+  const cycles = scope.edges.filter((edge) => edge.cycle);
+  const strongest = [...scope.edges].sort((a, b) => b.count - a.count).slice(0, 20);
+  const unit = scope.basis === 'imports' ? 'imports' : 'references';
+
+  const section = (title, items, render) =>
+    items.length === 0
+      ? null
+      : el(
+          'section',
+          { class: 'block' },
+          el('h3', null, title, el('span', { class: 'count' }, items.length)),
+          expandableList(items, render),
+        );
+
+  fill(
+    container,
+    el(
+      'header',
+      { class: 'panel-head' },
+      el('p', { class: 'eyebrow' }, 'Directory'),
+      el('h2', { class: 'path-title', tabindex: '-1' }, scope.path || 'Project root'),
+      el(
+        'div',
+        { class: 'stats' },
+        scopeStat(directories.length, 'directories'),
+        scopeStat(scope.totals.files ?? files.length, 'files'),
+        scopeStat(externals.length, 'external'),
+        scopeStat(cycles.length, cycles.length === 1 ? 'cycle edge' : 'cycle edges'),
+      ),
+      el('p', { class: 'hint' }, 'Double-click a directory on the map to open it, or choose from the lists below.'),
+    ),
+    section('Directories', directories, (node) => nodeRow(node, nav)),
+    section('Files', files, (node) => nodeRow(node, nav)),
+    section('External', externals, (node) => nodeRow(node, nav)),
+    section(`Strongest ${unit}`, strongest, (edge) =>
+      el(
+        'li',
+        { class: edge.cycle ? 'edge-row cycle' : 'edge-row' },
+        el('span', null, `${names.get(edge.source)} → ${names.get(edge.target)}`),
+        el('span', { class: 'muted' }, `×${edge.count}`),
+        edge.cycle ? chip('cycle', 'danger') : null,
+      ),
+    ),
+    scope.nodes.length === 0 ? el('p', { class: 'empty pad' }, 'Nothing indexed in this directory.') : null,
+  );
+}