@in-the-loop-labs/pair-review 3.5.2 → 3.7.0

package/public/js/components/ReviewModal.js

@@ -64,9 +64,9 @@ class ReviewModal {
               </div>
               <div class="pending-draft-notice-content">
                 <span class="pending-draft-notice-text">
-                  You have a pending draft review on GitHub with <strong id="pending-draft-count">0</strong> comments.
+                  You have a pending draft review on <span class="rm-host-name">GitHub</span> with <strong id="pending-draft-count">0</strong> comments.
                   Submitting here will add to or complete this review.
-                  <a href="#" id="pending-draft-link" target="_blank" rel="noopener noreferrer">Manage on GitHub</a>.
+                  <a href="#" id="pending-draft-link" target="_blank" rel="noopener noreferrer">Manage on <span class="rm-host-name">GitHub</span></a>.
                 </span>
               </div>
             </div>
@@ -120,7 +120,7 @@ class ReviewModal {
                   <input type="radio" name="review-event" value="DRAFT">
                   <div class="review-type-content">
                     <span class="review-type-label">Save as Draft</span>
-                    <span class="review-type-desc">Save your review as a draft on GitHub to finish later.</span>
+                    <span class="review-type-desc">Save your review as a draft on <span class="rm-host-name">GitHub</span> to finish later.</span>
                   </div>
                 </label>
               </div>
@@ -284,6 +284,11 @@ class ReviewModal {
     // Update AI summary link visibility
     this.updateAISummaryLink();
 
+    // Apply the configured remote-host display name + icon (resolves
+    // asynchronously after the modal HTML was built).
+    this.applyHostName();
+    this.applySubmitButtonIcon();
+
     // Update pending draft notice
     this.updatePendingDraftNotice();
   }
@@ -311,11 +316,17 @@ class ReviewModal {
         countElement.textContent = String(pendingDraft.comments_count || 0);
       }
 
-      // Update the link - hide if no github_url
+      // Update the link. Prefer the URL built from the repo's configured
+      // url_template (host-correct) over the server-reported github_url,
+      // which some alt-hosts return as a wrong-host github.com/issues URL.
       const linkElement = notice.querySelector('#pending-draft-link');
       if (linkElement) {
-        if (pendingDraft.github_url) {
-          linkElement.href = pendingDraft.github_url;
+        const templatedUrl = (typeof window !== 'undefined' && window.RepoLinks
+          && typeof window.RepoLinks.externalUrl === 'function')
+          ? window.RepoLinks.externalUrl() : null;
+        const manageUrl = templatedUrl || pendingDraft.github_url;
+        if (manageUrl) {
+          linkElement.href = manageUrl;
           linkElement.style.display = 'inline';
         } else {
           linkElement.style.display = 'none';
@@ -452,6 +463,8 @@ class ReviewModal {
       submitBtn.disabled = false;
       cancelBtn.style.display = 'inline-block';
       closeBtn.style.display = 'inline-block';
+      // innerHTML reset drops any host icon — re-apply it.
+      this.applySubmitButtonIcon();
     }
   }
 
@@ -531,7 +544,7 @@ class ReviewModal {
         const reviewUrl = result.reviewUrl || result.github_url;
         if (isDraft) {
           window.toast.showSuccess(
-            'Draft review submitted to GitHub successfully!',
+            `Draft review submitted to ${ReviewModal.escapeHtml(ReviewModal.hostName())} successfully!`,
             {
               duration: 5000
             }
@@ -541,7 +554,7 @@ class ReviewModal {
             'Review submitted successfully!',
             {
               link: reviewUrl,
-              linkText: 'View on GitHub',
+              linkText: `View on ${ReviewModal.escapeHtml(ReviewModal.hostName())}`,
               duration: 5000
             }
           );
@@ -586,11 +599,16 @@ class ReviewModal {
       }
 
       if (isDraft) {
-        // After 2 seconds, open GitHub PR page for drafts
-        setTimeout(() => {
-          const githubUrl = result.github_url || `https://github.com/${pr.owner}/${pr.repo}/pull/${pr.number}`;
-          window.open(githubUrl, '_blank');
-        }, 2000);
+        // After 2 seconds, open the PR page for drafts. Use the PR's canonical
+        // html_url (correct host + `/pull/`) rather than the review's html_url,
+        // which some alt-hosts return as a github.com `/issues/<n>` URL. Never
+        // assume github.com — see resolveDraftPrUrl.
+        const prUrl = ReviewModal.resolveDraftPrUrl(pr, result);
+        if (prUrl) {
+          setTimeout(() => {
+            window.open(prUrl, '_blank');
+          }, 2000);
+        }
       }
       
     } catch (error) {
@@ -676,6 +694,110 @@ class ReviewModal {
     localStorage.setItem(ASSISTED_BY_STORAGE_KEY, String(checkbox.checked));
   }
 
+  /**
+   * Display name of the remote code host, for user-facing text in place of
+   * the literal "GitHub". Reads the configured `links.external.name` via
+   * `window.RepoLinks.hostName()`, falling back to "GitHub".
+   *
+   * @returns {string}
+   */
+  static hostName() {
+    if (typeof window !== 'undefined' && window.RepoLinks
+        && typeof window.RepoLinks.hostName === 'function') {
+      return window.RepoLinks.hostName();
+    }
+    return 'GitHub';
+  }
+
+  /**
+   * Escape a string for safe interpolation into HTML. Used for the host
+   * name (user-supplied config) before it goes into the success toast,
+   * which renders its message/linkText via innerHTML.
+   *
+   * @param {string} text
+   * @returns {string}
+   */
+  static escapeHtml(text) {
+    return String(text == null ? '' : text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  /**
+   * Resolve the URL to open in a new tab after a draft submit.
+   *
+   * Precedence:
+   *   1. The URL built from the repo's configured `links.external.url_template`
+   *      (`window.RepoLinks.externalUrl()`) — authoritative and host-correct.
+   *   2. The PR's canonical `html_url` (the host's own PR page).
+   *   3. The server-reported `github_url` as a last resort.
+   *
+   * Some alt-hosts return the pending-review `html_url` as a
+   * `github.com/.../issues/<n>` URL, which lands on the wrong host and page.
+   * We must never assume github.com, so there is no hardcoded fallback host:
+   * if none of the above yields a URL we open nothing.
+   *
+   * @param {{html_url?: string}|null|undefined} pr - current PR (from prManager)
+   * @param {{github_url?: string}|null|undefined} result - submit-review response
+   * @returns {string|null} URL to open, or null if none is available
+   */
+  static resolveDraftPrUrl(pr, result) {
+    if (typeof window !== 'undefined' && window.RepoLinks
+        && typeof window.RepoLinks.externalUrl === 'function') {
+      const templated = window.RepoLinks.externalUrl();
+      if (templated) return templated;
+    }
+    if (pr && pr.html_url) return pr.html_url;
+    if (result && result.github_url) return result.github_url;
+    return null;
+  }
+
+  /**
+   * Update host-name-dependent static text in the modal (the pending-draft
+   * notice and the "Save as Draft" description) to the configured host name.
+   * Called from `show()` because the name resolves asynchronously after the
+   * modal HTML is built. No-op when the modal isn't present.
+   */
+  applyHostName() {
+    if (!this.modal) return;
+    const name = ReviewModal.hostName();
+    const spans = this.modal.querySelectorAll('.rm-host-name');
+    spans.forEach((el) => { el.textContent = name; });
+  }
+
+  /**
+   * Prepend the configured external-host icon to the submit button, when an
+   * icon is configured for the repo. The icon is parsed via
+   * `window.RepoLinks.parseSvgIcon` (DOMParser + attribute stripping) and
+   * inserted as a DOM node — never via innerHTML. Idempotent: any previously
+   * inserted icon is removed first. No-op for plain github.com repos.
+   */
+  applySubmitButtonIcon() {
+    const submitBtn = this.modal?.querySelector('#submit-review-btn-modal');
+    if (!submitBtn) return;
+
+    const existing = submitBtn.querySelector?.('.submit-host-icon');
+    if (existing) existing.remove();
+
+    if (typeof window === 'undefined' || !window.RepoLinks
+        || typeof window.RepoLinks.externalIcon !== 'function'
+        || typeof window.RepoLinks.parseSvgIcon !== 'function') {
+      return;
+    }
+    const iconStr = window.RepoLinks.externalIcon();
+    if (!iconStr) return;
+    const svg = window.RepoLinks.parseSvgIcon(iconStr);
+    if (!svg) return;
+
+    svg.classList.add('submit-host-icon');
+    if (!svg.getAttribute('width')) svg.setAttribute('width', '16');
+    if (!svg.getAttribute('height')) svg.setAttribute('height', '16');
+    submitBtn.insertBefore(svg, submitBtn.firstChild);
+  }
+
 }
 
 // Initialize when DOM is ready if not already initialized

package/public/js/components/TourBar.js

@@ -0,0 +1,248 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * TourBar - Sticky top bar shown while a guided tour is active.
+ *
+ * Displays "Stop N of M" plus Prev/Next/Exit controls. On completion the
+ * Prev/Next/Exit chrome swaps for Restart/Close. The bar consumes callbacks
+ * from PRManager; it never reaches back into application state.
+ *
+ * Lifecycle:
+ *   const bar = new TourBar({ onPrev, onNext, onExit, onRestart });
+ *   bar.mount(parent);       // prepends to parent (defaults to document.body)
+ *   bar.setStops(stops);     // initial render
+ *   bar.setActiveIndex(0);   // pre-tour state
+ *   bar.setCompleted(true);  // toggles to Restart / Close chrome
+ *   bar.unmount();
+ *
+ * The bar uses `position: sticky` so it visually pins to the top of its
+ * scrolling parent. Pass the diff-view scroll container as `parent` so the
+ * bar spans the diff width (and not the file-tree sidebar).
+ *
+ * Testability: instantiable in jsdom; CommonJS export at the bottom.
+ */
+
+// Octicon SVG path data. `milestone` brands the bar overall; `location`
+// marks the per-stop navigation chrome (mirrors the inline stop marker).
+// Module-scoped names are prefixed so they don't collide with the same
+// constants in tour-renderer.js when both are loaded as plain <script> tags
+// into the shared global scope.
+const TOUR_BAR_MILESTONE_PATH = 'M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.144 1.13.406l2.501 2.071a1.75 1.75 0 0 1 0 2.696l-2.5 2.07a1.75 1.75 0 0 1-1.131.407H8.5v5.6a.75.75 0 0 1-1.5 0V10.65H3.75A1.75 1.75 0 0 1 2 8.9V4.75C2 3.784 2.784 3 3.75 3H7V.75A.75.75 0 0 1 7.75 0Zm-4 4.5a.25.25 0 0 0-.25.25V8.9c0 .138.112.25.25.25h8.384a.25.25 0 0 0 .16-.058l2.5-2.07a.25.25 0 0 0 0-.386l-2.5-2.07a.25.25 0 0 0-.16-.058H3.75Z';
+const TOUR_BAR_LOCATION_PATH = 'm12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 9Z';
+
+function tourBarSvgIcon(pathData) {
+  return `<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="${pathData}"/></svg>`;
+}
+
+class TourBar {
+  /**
+   * @param {Object} callbacks
+   * @param {Function} [callbacks.onPrev]    - Called when the user clicks Prev.
+   * @param {Function} [callbacks.onNext]    - Called when the user clicks Next.
+   * @param {Function} [callbacks.onExit]    - Called when the user clicks Exit.
+   * @param {Function} [callbacks.onRestart] - Called when the user clicks Restart (completion state).
+   */
+  constructor({ onPrev, onNext, onExit, onRestart } = {}) {
+    this._onPrev = onPrev || (() => {});
+    this._onNext = onNext || (() => {});
+    this._onExit = onExit || (() => {});
+    this._onRestart = onRestart || (() => {});
+
+    this._stops = [];
+    this._activeIndex = -1;
+    this._completed = false;
+
+    this._root = null;
+    this._progressEl = null;
+    this._navEl = null;
+    this._prevBtn = null;
+    this._nextBtn = null;
+    this._exitBtn = null;
+    this._restartBtn = null;
+    this._closeBtn = null;
+  }
+
+  /**
+   * Prepend the bar to `parent` (defaults to `document.body`). Idempotent.
+   * The bar's CSS uses `position: sticky`, so it pins to the top of the
+   * nearest scrollable ancestor — pass that scroll container as `parent`
+   * to scope the bar to a region rather than the viewport.
+   * @param {HTMLElement} [parent=document.body]
+   * @returns {TourBar}
+   */
+  mount(parent) {
+    if (this._root && this._root.isConnected) return this;
+    const target = parent || document.body;
+
+    const root = document.createElement('div');
+    root.className = 'tour-bar';
+    root.setAttribute('role', 'toolbar');
+    root.setAttribute('aria-label', 'Guided tour controls');
+
+    const brand = document.createElement('div');
+    brand.className = 'tour-bar__brand';
+    brand.innerHTML = `${tourBarSvgIcon(TOUR_BAR_MILESTONE_PATH)}<span>Tour</span>`;
+
+    const progress = document.createElement('div');
+    progress.className = 'tour-bar__progress';
+    progress.textContent = '';
+
+    const nav = document.createElement('div');
+    nav.className = 'tour-bar__nav';
+
+    // Prev / Next / Exit (default chrome)
+    const prevBtn = document.createElement('button');
+    prevBtn.type = 'button';
+    prevBtn.className = 'tour-bar__prev';
+    prevBtn.innerHTML = `${tourBarSvgIcon(TOUR_BAR_LOCATION_PATH)}<span>Prev</span>`;
+    prevBtn.addEventListener('click', () => this._onPrev());
+
+    const nextBtn = document.createElement('button');
+    nextBtn.type = 'button';
+    nextBtn.className = 'tour-bar__next';
+    nextBtn.innerHTML = `<span>Next</span>${tourBarSvgIcon(TOUR_BAR_LOCATION_PATH)}`;
+    nextBtn.addEventListener('click', () => this._onNext());
+
+    const exitBtn = document.createElement('button');
+    exitBtn.type = 'button';
+    exitBtn.className = 'tour-bar__exit';
+    exitBtn.textContent = 'Exit';
+    exitBtn.addEventListener('click', () => this._onExit());
+
+    // Completion chrome (created up front, toggled by setCompleted)
+    const restartBtn = document.createElement('button');
+    restartBtn.type = 'button';
+    restartBtn.className = 'tour-bar__restart';
+    restartBtn.textContent = 'Restart';
+    restartBtn.style.display = 'none';
+    restartBtn.addEventListener('click', () => this._onRestart());
+
+    const closeBtn = document.createElement('button');
+    closeBtn.type = 'button';
+    closeBtn.className = 'tour-bar__close';
+    closeBtn.textContent = 'Close';
+    closeBtn.style.display = 'none';
+    closeBtn.addEventListener('click', () => this._onExit());
+
+    nav.appendChild(prevBtn);
+    nav.appendChild(nextBtn);
+    nav.appendChild(exitBtn);
+    nav.appendChild(restartBtn);
+    nav.appendChild(closeBtn);
+
+    root.appendChild(brand);
+    root.appendChild(progress);
+    root.appendChild(nav);
+
+    // Prepend so the bar becomes the first child — it pins above the
+    // diff-toolbar (which sits at top:0 in the same scroll container).
+    target.prepend(root);
+
+    this._root = root;
+    this._progressEl = progress;
+    this._navEl = nav;
+    this._prevBtn = prevBtn;
+    this._nextBtn = nextBtn;
+    this._exitBtn = exitBtn;
+    this._restartBtn = restartBtn;
+    this._closeBtn = closeBtn;
+
+    // Initial paint reflects whatever state was set before mount.
+    this._render();
+    return this;
+  }
+
+  /**
+   * Remove the bar from the DOM. Safe to call repeatedly.
+   */
+  unmount() {
+    if (this._root && this._root.isConnected) {
+      this._root.remove();
+    }
+    this._root = null;
+    this._progressEl = null;
+    this._navEl = null;
+    this._prevBtn = null;
+    this._nextBtn = null;
+    this._exitBtn = null;
+    this._restartBtn = null;
+    this._closeBtn = null;
+  }
+
+  /**
+   * @param {Array<Object>} stops - The full ordered list of stops.
+   */
+  setStops(stops) {
+    this._stops = Array.isArray(stops) ? stops : [];
+    this._render();
+  }
+
+  /**
+   * @param {number} index - The currently-active stop (0-based) or -1 for none.
+   */
+  setActiveIndex(index) {
+    this._activeIndex = typeof index === 'number' ? index : -1;
+    this._render();
+  }
+
+  /**
+   * @param {boolean} isCompleted - Swap to Restart/Close chrome when true.
+   */
+  setCompleted(isCompleted) {
+    this._completed = isCompleted === true;
+    this._render();
+  }
+
+  // --- private ------------------------------------------------------------
+
+  _render() {
+    if (!this._root) return;
+    const total = this._stops.length;
+    const visibleIndex = this._activeIndex + 1; // 1-based for display
+
+    if (this._progressEl) {
+      if (total === 0) {
+        this._progressEl.textContent = '';
+      } else if (this._completed) {
+        this._progressEl.textContent = `Tour complete (${total} stop${total === 1 ? '' : 's'})`;
+      } else if (this._activeIndex < 0) {
+        this._progressEl.textContent = `${total} stop${total === 1 ? '' : 's'}`;
+      } else {
+        this._progressEl.textContent = `Stop ${visibleIndex} of ${total}`;
+      }
+    }
+
+    if (this._completed) {
+      if (this._prevBtn) this._prevBtn.style.display = 'none';
+      if (this._nextBtn) this._nextBtn.style.display = 'none';
+      if (this._exitBtn) this._exitBtn.style.display = 'none';
+      if (this._restartBtn) this._restartBtn.style.display = '';
+      if (this._closeBtn) this._closeBtn.style.display = '';
+    } else {
+      if (this._prevBtn) this._prevBtn.style.display = '';
+      if (this._nextBtn) this._nextBtn.style.display = '';
+      if (this._exitBtn) this._exitBtn.style.display = '';
+      if (this._restartBtn) this._restartBtn.style.display = 'none';
+      if (this._closeBtn) this._closeBtn.style.display = 'none';
+
+      // Disable Prev at first stop; disable Next at last (no auto-completion
+      // happens in the bar — the orchestrator advances past the end to set
+      // completed state).
+      if (this._prevBtn) {
+        this._prevBtn.disabled = this._activeIndex <= 0;
+      }
+      if (this._nextBtn) {
+        // Next remains enabled on the last stop so the user can advance
+        // into completion state.
+        this._nextBtn.disabled = total === 0;
+      }
+    }
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.TourBar = TourBar;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { TourBar };
+}

package/public/js/components/VoiceCentricConfigTab.js

@@ -235,6 +235,37 @@ class VoiceCentricConfigTab {
    */
   setDefaultCouncilId(councilId) {
     this._pendingDefaultCouncilId = councilId;
+    // On a cached reopen the councils are already loaded, so loadCouncils() —
+    // and the _renderCouncilSelector() call that applies the pending default —
+    // will not run again (the modal instance is reused; see AnalysisConfigModal
+    // caching on window.analysisConfigModal). Apply it now so the saved/default
+    // council is restored instead of being silently dropped onto a blank
+    // "+ New Council" selection.
+    if (this._councilsLoaded && this._injected) {
+      this._renderCouncilSelector();
+    }
+  }
+
+  /**
+   * Reset selection and editor state for a fresh modal open.
+   *
+   * The AnalysisConfigModal (and therefore this tab) is reused across runs — and
+   * in the index/bulk flow, across different repositories. Without this reset a
+   * council selected in a previous run (or its pending default / dirty edits)
+   * would carry over and could be displayed or submitted for the next batch.
+   */
+  reset() {
+    this.selectedCouncilId = null;
+    this._pendingDefaultCouncilId = null;
+    this._isDirty = false;
+    if (!this._injected) return;
+    const selector = this.modal.querySelector('#vc-council-selector');
+    if (selector) {
+      selector.value = '';
+      selector.classList.add('new-council-selected');
+    }
+    this._applyConfigToUI(this._defaultConfig());
+    this._markClean();
   }
 
   /**
@@ -1494,3 +1525,8 @@ class VoiceCentricConfigTab {
 if (typeof window !== 'undefined') {
   window.VoiceCentricConfigTab = VoiceCentricConfigTab;
 }
+
+// Export for unit testing (Node/CommonJS environment)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { VoiceCentricConfigTab };
+}