@in-the-loop-labs/pair-review 3.5.1 → 3.6.0

package/public/js/modules/cancel-background-job.js

@@ -0,0 +1,183 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Shared frontend helpers for cancelling in-flight background jobs
+ * (tour and summaries). Both flows share the same dialog -> POST ->
+ * reset-button-state shape, so the per-artifact wrappers stay thin.
+ *
+ * Backend contract (see src/routes/reviews.js handleJobCancel):
+ *   POST /api/reviews/:reviewId/jobs/:jobKey/cancel
+ *   200 -> { cancelled: true, count: N }
+ *   404 -> { cancelled: false }   (nothing in flight)
+ *   400 -> invalid jobKey
+ *
+ * Local-mode parity: the local route at
+ *   POST /api/local/:reviewId/jobs/:jobKey/cancel
+ * is a thin wrapper. Both modes share the `reviews` table, so we can
+ * use ONE endpoint here. Local mode is detected via document.body.dataset
+ * to keep this module independent of PRManager internals.
+ */
+
+(function () {
+  'use strict';
+
+  /**
+   * POST the cancel request for a single (reviewId, jobKey) pair.
+   * Returns a Promise resolving to the parsed JSON response.
+   *
+   * @param {number|string} reviewId
+   * @param {string} jobKey - bare prefix (`tour` | `summaries`) or full
+   *   suffix (`summaries:<digest>`); the backend treats bare prefixes as
+   *   "cancel all matching".
+   * @returns {Promise<{ok: boolean, status: number, body: any}>}
+   */
+  async function postCancel(reviewId, jobKey) {
+    if (!reviewId) {
+      return { ok: false, status: 0, body: { error: 'missing reviewId' } };
+    }
+    // Both modes share the /api/reviews/... endpoint thanks to the
+    // shared reviews table. No need to branch on local-vs-PR mode here.
+    const url = `/api/reviews/${reviewId}/jobs/${encodeURIComponent(jobKey)}/cancel`;
+    try {
+      const resp = await fetch(url, { method: 'POST' });
+      let body = null;
+      try {
+        body = await resp.json();
+      } catch {
+        body = null;
+      }
+      return { ok: resp.ok, status: resp.status, body };
+    } catch (err) {
+      // Network or unexpected fetch error — log and surface as failure.
+      // We deliberately do not toast here so callers can decide the UX.
+      // eslint-disable-next-line no-console
+      console.warn(`[cancel-background-job] POST ${url} failed:`, err);
+      return { ok: false, status: 0, body: { error: err && err.message } };
+    }
+  }
+
+  /**
+   * Open the shared ConfirmDialog with cancel-job copy, then on confirm
+   * POST the cancel and invoke the caller's `onCancelled` callback so it
+   * can sync UI state (button class toggles, in-memory `_generating`
+   * flags, etc.).
+   *
+   * The caller's `onCancelled` runs only when the backend confirms the
+   * cancel reached a terminal state: 200 (cancelled) or 404 (already gone).
+   * For any other HTTP status (400 validation, 500 server error, etc.) or
+   * a network failure, we toast an error and leave the active state intact
+   * so the pulse stays visible and the user can retry the cancel click.
+   *
+   * @param {Object} opts
+   * @param {number|string} opts.reviewId
+   * @param {string} opts.jobKey  - `tour` or `summaries`
+   * @param {string} opts.title   - Dialog title (e.g. "Tour is still generating")
+   * @param {string} opts.message - Dialog body
+   * @param {string} opts.confirmText - Confirm button label (e.g. "Cancel Tour")
+   * @param {Function} opts.onCancelled - Called after a confirmed cancel.
+   * @returns {Promise<void>}
+   */
+  async function showCancelJobDialog(opts) {
+    const { reviewId, jobKey, title, message, confirmText, onCancelled } = opts || {};
+    const dialog = typeof window !== 'undefined' ? window.confirmDialog : null;
+    if (!dialog || typeof dialog.show !== 'function') {
+      // ConfirmDialog hasn't initialized yet — bail silently. The button
+      // still works on its second click (after DOMContentLoaded fires).
+      return;
+    }
+    const result = await dialog.show({
+      title: title || 'Generation in progress',
+      message: message || 'Cancel this job?',
+      confirmText: confirmText || 'Cancel',
+      confirmClass: 'btn-danger',
+      cancelText: 'OK',
+    });
+    if (result !== 'confirm') return;
+
+    const { status, body } = await postCancel(reviewId, jobKey);
+    // ONLY 200 (cancelled) and 404 (already gone) are UI-clearing outcomes.
+    // Anything else (400, 500, 503, network failure with status=0) means
+    // the job may still be running — keep the pulse, toast an error, and
+    // let the user re-click to retry.
+    if (status !== 200 && status !== 404) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `[cancel-background-job] cancel failed for ${jobKey} (status ${status}):`,
+        body
+      );
+      if (typeof window !== 'undefined' && window.toast?.error) {
+        const detail = body && body.error ? `: ${body.error}` : '';
+        const msg = status === 0
+          ? 'Failed to cancel — check connection'
+          : `Failed to cancel (HTTP ${status})${detail}`;
+        window.toast.error(msg);
+      }
+      return;
+    }
+    // 200 or 404 — terminal. Reset UI state.
+    if (typeof onCancelled === 'function') {
+      try {
+        onCancelled({ cancelled: status === 200 && body && body.cancelled, status });
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn('[cancel-background-job] onCancelled handler threw:', err);
+      }
+    }
+  }
+
+  // ---- Per-artifact wrappers (thin convenience layer) --------------------
+
+  /**
+   * Open the "Cancel Tour" confirm dialog.
+   * @param {Object} opts
+   * @param {number|string} opts.reviewId
+   * @param {Function} opts.onCancelled
+   * @returns {Promise<void>}
+   */
+  function showCancelTourDialog(opts) {
+    return showCancelJobDialog({
+      reviewId: opts.reviewId,
+      jobKey: 'tour',
+      title: 'Tour is still being generated',
+      message:
+        'A guided tour is still being generated for this review. ' +
+        'Cancelling will stop the upstream AI call.',
+      confirmText: 'Cancel Tour',
+      onCancelled: opts.onCancelled,
+    });
+  }
+
+  /**
+   * Open the "Cancel Summaries" confirm dialog.
+   * @param {Object} opts
+   * @param {number|string} opts.reviewId
+   * @param {Function} opts.onCancelled
+   * @returns {Promise<void>}
+   */
+  function showCancelSummariesDialog(opts) {
+    return showCancelJobDialog({
+      reviewId: opts.reviewId,
+      jobKey: 'summaries',
+      title: 'Summaries are still being generated',
+      message:
+        'Hunk summaries are still being generated for this review. ' +
+        'Cancelling will stop the upstream AI call. Summaries already ' +
+        'persisted will remain.',
+      confirmText: 'Cancel Summaries',
+      onCancelled: opts.onCancelled,
+    });
+  }
+
+  const api = {
+    postCancel,
+    showCancelJobDialog,
+    showCancelTourDialog,
+    showCancelSummariesDialog,
+  };
+
+  if (typeof window !== 'undefined') {
+    window.CancelBackgroundJob = api;
+  }
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+})();

package/public/js/modules/hunk-summary-renderer.js

@@ -0,0 +1,116 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * HunkSummaryRenderer - Renders inline natural-language hunk summaries.
+ *
+ * A summary is a short natural-language description of a non-trivial hunk,
+ * generated by a background AI job. Renderer responsibilities:
+ *   - Insert a styled annotation row immediately above the hunk's first code row
+ *   - Keep the mounted-row map in sync so re-renders update text in place
+ *   - Remove an annotation when its underlying hunk goes away (file re-render)
+ *
+ * Visibility is controlled outside the renderer via CSS classes:
+ *   - body.summaries-hidden                    — review-level toggle
+ *   - .d2h-file-wrapper.summaries-hidden-file  — per-file toggle
+ *
+ * Trivial / model-skipped / model-malformed rows are filtered out by the
+ * caller; this renderer only handles rows with non-empty `summary_text`.
+ */
+
+class HunkSummaryRenderer {
+  /**
+   * @param {Object} prManager - PRManager instance (kept for future callbacks).
+   */
+  constructor(prManager) {
+    this.prManager = prManager;
+    // Map<contentHash, HTMLTableRowElement> — annotation rows currently mounted
+    this._mounted = new Map();
+  }
+
+  /**
+   * Render a summary inline, immediately above its hunk anchor row.
+   * Idempotent: if a summary for the same hash is already mounted, replace
+   * its text rather than stack a duplicate.
+   *
+   * @param {HTMLTableRowElement} anchorRow - The first code-line `<tr>` of
+   *   the target hunk (carries `data-hunk-start="${contentHash}"`).
+   * @param {Object} summary - Summary object: { content_hash, summary_text }.
+   * @param {Object} [_opts] - Reserved for future per-render options.
+   * @returns {HTMLTableRowElement|null}
+   */
+  renderInline(anchorRow, summary, _opts) {
+    if (!anchorRow || !summary || !summary.summary_text) return null;
+    const contentHash = summary.content_hash;
+    if (!contentHash) return null;
+
+    const existing = this._mounted.get(contentHash);
+    if (existing && existing.isConnected) {
+      const textEl = existing.querySelector('.hunk-summary-text');
+      if (textEl) textEl.textContent = summary.summary_text;
+      return existing;
+    }
+
+    const row = document.createElement('tr');
+    row.className = 'hunk-summary-row';
+    row.dataset.contentHash = contentHash;
+
+    const cell = document.createElement('td');
+    cell.colSpan = 2;
+    cell.className = 'hunk-summary-cell';
+
+    const annotation = document.createElement('div');
+    annotation.className = 'hunk-summary-annotation';
+
+    const icon = document.createElement('span');
+    icon.className = 'hunk-summary-icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.innerHTML = '<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">' +
+      '<path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"/>' +
+      '</svg>';
+
+    const text = document.createElement('span');
+    text.className = 'hunk-summary-text';
+    text.textContent = summary.summary_text;
+
+    annotation.appendChild(icon);
+    annotation.appendChild(text);
+    cell.appendChild(annotation);
+    row.appendChild(cell);
+
+    // Insert IMMEDIATELY ABOVE the hunk's first code line so a reader
+    // scrolling down sees the description before the change itself.
+    anchorRow.parentNode.insertBefore(row, anchorRow);
+    this._mounted.set(contentHash, row);
+    return row;
+  }
+
+  /**
+   * Remove a mounted annotation by its content hash.
+   * @param {string} contentHash
+   * @returns {boolean} true if a row was found and removed
+   */
+  removeByHash(contentHash) {
+    const row = this._mounted.get(contentHash);
+    if (!row) return false;
+    if (row.isConnected) row.remove();
+    this._mounted.delete(contentHash);
+    return true;
+  }
+
+  /**
+   * Clear all mounted annotations (e.g. before re-rendering the diff).
+   */
+  reset() {
+    for (const row of this._mounted.values()) {
+      if (row.isConnected) row.remove();
+    }
+    this._mounted.clear();
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.HunkSummaryRenderer = HunkSummaryRenderer;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { HunkSummaryRenderer };
+}

package/public/js/modules/storage-cleanup.js

@@ -21,6 +21,11 @@ function cleanupLegacyLocalStorage() {
     'settingsReferrer',           // Unscoped version (now uses settingsReferrer:${repo})
   ];
 
+  // Legacy key prefixes (one entry per review id) that we need to sweep
+  const legacyPrefixes = [
+    'pair-review:dismissed-summaries:'  // Replaced by per-file toggle in v3.4
+  ];
+
   // Remove known legacy keys
   legacyKeys.forEach(key => {
     if (localStorage.getItem(key) !== null) {
@@ -28,6 +33,17 @@ function cleanupLegacyLocalStorage() {
       console.log(`[cleanup] Removed legacy localStorage key: ${key}`);
     }
   });
+
+  // Sweep prefixed keys. localStorage.length and key(i) iteration in
+  // reverse order so removals don't shift indexes we still need to read.
+  for (let i = localStorage.length - 1; i >= 0; i--) {
+    const key = localStorage.key(i);
+    if (!key) continue;
+    if (legacyPrefixes.some(prefix => key.startsWith(prefix))) {
+      localStorage.removeItem(key);
+      console.log(`[cleanup] Removed legacy localStorage key: ${key}`);
+    }
+  }
 }
 
 // Export for use in other modules