codebaseiq 0.1.0 → 0.2.0

package/ui/view/app.js

@@ -0,0 +1,394 @@
+import {
+  basename,
+  dirname,
+  el,
+  getFile,
+  getMeta,
+  getScope,
+  getSymbol,
+  isAbort,
+  normalizeScope,
+  notice,
+  parseRoute,
+  pathPrefixes,
+  routeLink,
+  routeToSearch,
+  watcherTone,
+} from '/assets/api.js';
+import { createBuilder } from '/assets/builder.js';
+import { renderFilePanel, renderScopePanel } from '/assets/file-panel.js';
+import { renderCandidates, renderFocus } from '/assets/focus.js';
+import { createMap } from '/assets/map.js';
+
+const POLL_MS = 5000;
+const TOAST_MS = 3500;
+const CRUMB_LABEL_LIMIT = 40;
+
+const dom = {
+  brand: document.getElementById('project-name'),
+  crumbs: document.getElementById('breadcrumbs'),
+  basis: [...document.querySelectorAll('[data-basis]')],
+  search: document.getElementById('search'),
+  searchInput: document.getElementById('search-input'),
+  builderButton: document.getElementById('builder-button'),
+  builderDrawer: document.getElementById('builder'),
+  watcher: document.getElementById('watcher-state'),
+  split: document.getElementById('split'),
+  map: document.getElementById('map'),
+  detail: document.getElementById('detail'),
+  toast: document.getElementById('toast'),
+  announce: document.getElementById('announce'),
+};
+
+const state = {
+  meta: null,
+  generation: undefined,
+  route: parseRoute(location.search),
+  scope: null,
+  mapKey: null,
+  mapPath: '',
+  statements: false,
+  sequence: 0,
+  controller: null,
+  loadFailed: false,
+  polling: false,
+  toastTimer: 0,
+};
+
+const nav = {
+  href: (route) => routeToSearch(withBasis(route)) || location.pathname,
+  go: (route) => navigate(withBasis(route)),
+};
+
+const map = createMap(dom.map, {
+  onDrill: (path) => nav.go({ scope: path }),
+  onFile: (path) => nav.go({ file: path }),
+  onExternal: (node) => nav.go(node.isFile ? { file: node.path } : { scope: node.path }),
+});
+
+const builder = createBuilder({ drawer: dom.builderDrawer, trigger: dom.builderButton, nav });
+
+function withBasis(route) {
+  return { basis: state.route.basis, ...route };
+}
+
+function projectName() {
+  return state.meta?.projectName || 'project';
+}
+
+// ── Navigation ────────────────────────────────────────────
+
+function navigate(route) {
+  const search = routeToSearch(route);
+  if (search === routeToSearch(state.route)) return;
+  history.pushState(null, '', search || location.pathname);
+  void load(route, { userInitiated: true });
+}
+
+window.addEventListener('popstate', () => {
+  void load(parseRoute(location.search));
+});
+
+// ── Chrome: breadcrumbs, title, status ────────────────────
+
+function setCrumbs({ scope = '', file = null, label = null }) {
+  const items = [{ label: projectName(), route: { scope: '' } }];
+  for (const directory of pathPrefixes(file ? dirname(file) : scope)) {
+    items.push({ label: directory.name, route: { scope: directory.path } });
+  }
+  if (file) items.push({ label: basename(file), route: { file } });
+  if (label)
+    items.push({ label: label.length > CRUMB_LABEL_LIMIT ? `${label.slice(0, CRUMB_LABEL_LIMIT - 1)}…` : label });
+  const list = el('ol');
+  items.forEach((item, index) => {
+    const last = index === items.length - 1;
+    list.append(
+      el(
+        'li',
+        null,
+        last || !item.route
+          ? el('span', { 'aria-current': last ? 'page' : null }, item.label)
+          : routeLink(nav, item.route, item.label),
+      ),
+    );
+  });
+  dom.crumbs.replaceChildren(list);
+}
+
+function finishView(ctx, { scope = '', file = null, label = null, title, message }) {
+  setCrumbs({ scope, file, label });
+  dom.split.dataset.view = ctx.view;
+  document.title = `${title || projectName()} · ${projectName()}`;
+  if (!ctx.quiet) dom.announce.textContent = message;
+}
+
+function syncControls(route) {
+  for (const button of dom.basis) button.setAttribute('aria-pressed', String(button.dataset.basis === route.basis));
+  dom.searchInput.value = route.focus ?? '';
+}
+
+function setPill(text, pillState) {
+  dom.watcher.textContent = text;
+  dom.watcher.dataset.state = pillState;
+}
+
+function showToast(message) {
+  dom.toast.textContent = message;
+  dom.toast.classList.add('visible');
+  clearTimeout(state.toastTimer);
+  state.toastTimer = setTimeout(() => {
+    dom.toast.classList.remove('visible');
+    dom.toast.textContent = '';
+  }, TOAST_MS);
+}
+
+function nearestScopes(value) {
+  if (typeof value === 'string') return [value];
+  if (Array.isArray(value)) return value.filter((entry) => typeof entry === 'string');
+  return typeof value?.path === 'string' ? [value.path] : [];
+}
+
+function errorNotice(error) {
+  const nearest = nearestScopes(error?.payload?.nearest);
+  return notice(
+    'error',
+    error?.message ?? 'Something went wrong.',
+    nearest.length > 0
+      ? [
+          ' Nearest: ',
+          nearest.map((path, index) => [index > 0 ? ', ' : '', routeLink(nav, { scope: path }, path || projectName())]),
+        ]
+      : null,
+  );
+}
+
+// ── Loading ───────────────────────────────────────────────
+
+async function attempt(promise) {
+  try {
+    return { data: await promise };
+  } catch (error) {
+    if (isAbort(error)) throw error;
+    return { error };
+  }
+}
+
+/** Fetch and draw a scope unless the same one is already on screen. */
+async function ensureMap(path, basis, { signal, refresh }) {
+  const key = `${path}\n${basis}`;
+  if (!refresh && state.mapKey === key && state.scope) return { scope: state.scope };
+  const { data, error } = await attempt(getScope(path, basis, { signal }));
+  if (error) {
+    state.scope = null;
+    state.mapKey = null;
+    map.showNotice(errorNotice(error));
+    return { error };
+  }
+  const scope = normalizeScope(data, path);
+  state.scope = scope;
+  state.mapKey = key;
+  state.mapPath = path;
+  map.render(scope);
+  return { scope };
+}
+
+async function loadScope(ctx) {
+  const path = ctx.route.scope ?? '';
+  ctx.view = 'scope';
+  const { scope } = await ensureMap(path, ctx.route.basis, ctx);
+  if (ctx.isStale()) return;
+  finishView(ctx, { scope: path, title: path || projectName(), message: `Showing ${path || 'the project root'}` });
+  map.select(null);
+  if (scope) renderScopePanel(dom.detail, scope, nav);
+  else dom.detail.replaceChildren(el('p', { class: 'empty pad' }, 'This directory could not be loaded.'));
+}
+
+async function loadFile(ctx) {
+  const path = ctx.route.file;
+  const directory = dirname(path);
+  ctx.view = 'file';
+  const [mapped, fileResult] = await Promise.all([
+    ensureMap(directory, ctx.route.basis, ctx),
+    attempt(getFile(path, ctx.route.basis, { signal: ctx.signal })),
+  ]);
+  if (ctx.isStale()) return;
+  finishView(ctx, { scope: directory, file: path, title: basename(path), message: `Showing file ${path}` });
+  map.select(mapped.scope ? path : null);
+  if (fileResult.error) dom.detail.replaceChildren(errorNotice(fileResult.error));
+  else renderFilePanel(dom.detail, fileResult.data, nav);
+}
+
+async function loadSymbol(ctx) {
+  const { route } = ctx;
+  const selector = route.symbol ?? route.focus;
+  const query = route.symbol ? { symbol: route.symbol } : { focus: route.focus };
+  const result = await attempt(getSymbol({ ...query, statements: state.statements }, { signal: ctx.signal }));
+  if (ctx.isStale()) return;
+
+  if (result.data?.status === 'matched') {
+    const { definition } = result.data;
+    ctx.view = 'focus';
+    const mapped = await ensureMap(dirname(definition.file), route.basis, ctx);
+    if (ctx.isStale()) return;
+    finishView(ctx, {
+      scope: dirname(definition.file),
+      file: definition.file,
+      label: definition.name,
+      title: definition.name,
+      message: `Showing symbol ${definition.name}`,
+    });
+    map.select(mapped.scope ? definition.file : null);
+    renderFocus(dom.detail, result.data, nav, {
+      statements: state.statements,
+      onToggleStatements: (next) => {
+        state.statements = next;
+        void load(state.route, { keepScroll: true });
+      },
+    });
+    return;
+  }
+
+  ctx.view = 'scope';
+  await ensureMap(state.mapPath, route.basis, ctx);
+  if (ctx.isStale()) return;
+  finishView(ctx, {
+    scope: state.mapPath,
+    label: `focus: ${selector}`,
+    title: selector,
+    message:
+      result.data?.status === 'ambiguous' ? `${selector} matches several symbols` : `No symbol found for ${selector}`,
+  });
+  map.select(null);
+  if (result.data?.status === 'ambiguous') renderCandidates(dom.detail, result.data, nav, selector);
+  else dom.detail.replaceChildren(errorNotice(result.error ?? new Error('The server sent an unexpected response.')));
+}
+
+function focusedKey() {
+  const active = document.activeElement;
+  return dom.detail.contains(active) ? (active.dataset.focusKey ?? null) : null;
+}
+
+/**
+ * Load a route. `refresh` refetches data already on screen; `keepScroll`
+ * leaves the detail scroll position and announcements alone; `userInitiated`
+ * moves keyboard focus to the new heading.
+ */
+async function load(route, { refresh = false, keepScroll = false, userInitiated = false } = {}) {
+  state.controller?.abort();
+  const controller = new AbortController();
+  state.controller = controller;
+  const sequence = ++state.sequence;
+  const ctx = {
+    route,
+    refresh,
+    signal: controller.signal,
+    quiet: refresh || keepScroll,
+    view: 'scope',
+    isStale: () => sequence !== state.sequence,
+  };
+  state.route = route;
+  if (!refresh) syncControls(route);
+  const scrollTop = keepScroll || refresh ? dom.detail.scrollTop : 0;
+  const focusKey = keepScroll || refresh ? focusedKey() : null;
+  document.body.dataset.busy = 'true';
+  dom.detail.setAttribute('aria-busy', 'true');
+  try {
+    if (route.symbol || route.focus) await loadSymbol(ctx);
+    else if (route.file) await loadFile(ctx);
+    else await loadScope(ctx);
+    if (ctx.isStale()) return;
+    state.loadFailed = false;
+    dom.detail.scrollTop = scrollTop;
+    if (focusKey)
+      dom.detail.querySelector(`[data-focus-key="${CSS.escape(focusKey)}"]`)?.focus({ preventScroll: true });
+    else if (userInitiated) dom.detail.querySelector('[tabindex="-1"]')?.focus({ preventScroll: true });
+  } catch (error) {
+    if (isAbort(error) || ctx.isStale()) return;
+    state.loadFailed = true;
+    dom.detail.replaceChildren(errorNotice(error));
+  } finally {
+    if (!ctx.isStale()) {
+      delete document.body.dataset.busy;
+      dom.detail.removeAttribute('aria-busy');
+    }
+  }
+}
+
+// ── Meta and polling ──────────────────────────────────────
+
+function applyMeta(meta) {
+  const changed = state.generation !== undefined && (meta.generation ?? null) !== state.generation;
+  state.meta = meta;
+  state.generation = meta.generation ?? null;
+  dom.brand.textContent = meta.projectName || 'codebaseiq';
+  dom.brand.title = meta.cliVersion ? `codebaseiq ${meta.cliVersion}` : 'codebaseiq';
+  const watcher = meta.watcher?.state || 'unknown';
+  setPill(`Watcher ${watcher}`, watcherTone(watcher));
+  builder.configure(meta.builder);
+  return changed;
+}
+
+async function poll() {
+  if (document.visibilityState !== 'visible' || state.polling) return;
+  state.polling = true;
+  try {
+    const wasFailed = state.loadFailed;
+    const changed = applyMeta(await getMeta());
+    if (changed) {
+      showToast('Index updated');
+      await load(state.route, { refresh: true });
+    } else if (wasFailed) {
+      await load(state.route, { refresh: true });
+    }
+  } catch (error) {
+    if (!isAbort(error)) setPill('Server unreachable', 'offline');
+  } finally {
+    state.polling = false;
+  }
+}
+
+// ── Controls ──────────────────────────────────────────────
+
+function isTyping(target) {
+  return (
+    target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))
+  );
+}
+
+function wireControls() {
+  for (const button of dom.basis) {
+    button.addEventListener('click', () => navigate({ ...state.route, basis: button.dataset.basis }));
+  }
+  dom.search.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const selector = dom.searchInput.value.trim();
+    if (selector) nav.go({ focus: selector });
+  });
+  dom.brand.addEventListener('click', (event) => {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
+    event.preventDefault();
+    nav.go({});
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return;
+    event.preventDefault();
+    dom.searchInput.focus();
+    dom.searchInput.select();
+  });
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') void poll();
+  });
+  setInterval(() => void poll(), POLL_MS);
+}
+
+async function boot() {
+  wireControls();
+  try {
+    applyMeta(await getMeta());
+  } catch {
+    setPill('Server unreachable', 'offline');
+  }
+  await load(state.route);
+}
+
+void boot();