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

package/public/js/repo-links.js

@@ -0,0 +1,328 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Repo Links UI Renderer
+ *
+ * Fetches `/api/repos/:owner/:repo/links` and renders the resulting
+ * configuration into the review header:
+ *
+ *   - `links.external`: insert a new anchor button into the header icon
+ *     group with the configured label, icon, and substituted URL.
+ *   - `links.github === false`: hide `#github-link`.
+ *   - `links.graphite === false`: hide `#graphite-link`.
+ *
+ * Shared between PR mode (public/js/pr.js) and Local mode
+ * (public/js/local.js). Local mode only calls this when the review is
+ * associated with a `repos` entry whose `owner/repo` is known.
+ *
+ * URL templates are substituted client-side because only the frontend
+ * has the live PR/branch context (head_sha may change at any refresh).
+ */
+(function () {
+  // Whitelist of allowed `{placeholder}` names in `url_template`. Must
+  // match `ALLOWED_PLACEHOLDERS` in src/links/repo-links.js — kept in
+  // sync because mismatch produces silent template drift.
+  const ALLOWED_PLACEHOLDERS = [
+    'owner', 'repo', 'number', 'branch', 'base_branch', 'head_sha'
+  ];
+
+  // The most recently resolved links + substitution context for the
+  // current review. Stored so other code (ReviewModal, pr.js) can read
+  // the configured host name / external URL / icon instead of hardcoding
+  // "GitHub". `fetchAndApplyRepoLinks` refreshes these on every load.
+  let _currentLinks = null;
+  let _currentContext = null;
+
+  /**
+   * Substitute whitelisted placeholders in a URL template. Returns the
+   * substituted URL, or null if any required placeholder is missing or
+   * the result does not start with `https://`. Mirrors the server-side
+   * implementation as defence-in-depth.
+   *
+   * @param {string} template
+   * @param {Object} context
+   * @returns {string|null}
+   */
+  function substituteUrlTemplate(template, context) {
+    if (typeof template !== 'string' || !template) return null;
+    const ctx = context || {};
+
+    const substituted = template.replace(/\{([a-zA-Z_]+)\}/g, (match, name) => {
+      if (!ALLOWED_PLACEHOLDERS.includes(name)) return match;
+      const value = ctx[name];
+      if (value === undefined || value === null || value === '') return match;
+      return encodeURIComponent(String(value));
+    });
+
+    if (!substituted.startsWith('https://')) return null;
+    for (const placeholder of ALLOWED_PLACEHOLDERS) {
+      if (substituted.includes('{' + placeholder + '}')) return null;
+    }
+    return substituted;
+  }
+
+  /**
+   * Parse a sanitised SVG string and return its root `<svg>` element,
+   * or null if parsing fails. The server sanitises the SVG before
+   * sending it down (strips scripts, on* handlers, javascript: URLs).
+   * We DOMParse here as a second filter, and also so the DOM we insert
+   * doesn't go through `innerHTML` on the live document.
+   *
+   * @param {string} svgString
+   * @returns {SVGElement|null}
+   */
+  function parseSvgIcon(svgString) {
+    if (typeof svgString !== 'string' || !svgString) return null;
+    try {
+      const doc = new DOMParser().parseFromString(svgString, 'image/svg+xml');
+      // image/svg+xml mode returns a <parsererror> root on bad input.
+      const root = doc.documentElement;
+      if (!root || root.nodeName !== 'svg') return null;
+      // Belt-and-braces: strip dangerous attributes/elements even though
+      // the server already removed them.
+      stripDangerousAttributes(root);
+      return root;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Recursively strip on* event handlers and `javascript:` URLs from an
+   * SVG element tree, and remove any `<script>` descendants. Defensive
+   * second pass after server sanitisation.
+   */
+  function stripDangerousAttributes(element) {
+    if (!element || !element.attributes) return;
+    const attrs = Array.from(element.attributes);
+    for (const attr of attrs) {
+      const name = attr.name.toLowerCase();
+      const value = String(attr.value || '').toLowerCase();
+      if (name.startsWith('on') || value.includes('javascript:')) {
+        element.removeAttribute(attr.name);
+      }
+    }
+    const children = Array.from(element.children || []);
+    for (const child of children) {
+      if (child.nodeName && child.nodeName.toLowerCase() === 'script') {
+        child.remove();
+        continue;
+      }
+      stripDangerousAttributes(child);
+    }
+  }
+
+  /**
+   * Build the external-link anchor element. Returns null if the URL
+   * substitution fails (invalid template or missing required values).
+   *
+   * @param {Object} external  { label, url_template, icon }
+   * @param {Object} context   substitution context
+   * @returns {HTMLAnchorElement|null}
+   */
+  function buildExternalLink(external, context) {
+    if (!external || typeof external !== 'object') return null;
+    const url = substituteUrlTemplate(external.url_template, context);
+    if (!url) {
+      console.warn(
+        '[repo-links] Dropping external link: url_template substitution failed',
+        { template: external.url_template, context }
+      );
+      return null;
+    }
+
+    const anchor = document.createElement('a');
+    anchor.className = 'btn btn-icon';
+    anchor.id = 'external-link';
+    anchor.href = url;
+    anchor.target = '_blank';
+    anchor.rel = 'noopener noreferrer';
+    anchor.title = external.label;
+    anchor.setAttribute('aria-label', external.label);
+
+    if (external.icon) {
+      const svg = parseSvgIcon(external.icon);
+      if (svg) {
+        // Ensure the icon scales like the existing header icons.
+        if (!svg.getAttribute('width')) svg.setAttribute('width', '16');
+        if (!svg.getAttribute('height')) svg.setAttribute('height', '16');
+        anchor.appendChild(svg);
+      } else {
+        appendFallbackIcon(anchor);
+      }
+    } else {
+      appendFallbackIcon(anchor);
+    }
+
+    return anchor;
+  }
+
+  /**
+   * Append a generic "external link" SVG icon (an arrow leaving a box)
+   * when no icon is configured or sanitisation rejected the supplied
+   * SVG. Keeps the button visually consistent with the others.
+   */
+  function appendFallbackIcon(anchor) {
+    const svgNs = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(svgNs, 'svg');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('fill', 'currentColor');
+    const path = document.createElementNS(svgNs, 'path');
+    // "open in new tab" icon: box with arrow leaving top-right corner.
+    path.setAttribute('d', 'M3.75 2A1.75 1.75 0 0 0 2 3.75v8.5C2 13.216 2.784 14 3.75 14h8.5A1.75 1.75 0 0 0 14 12.25v-3a.75.75 0 0 0-1.5 0v3a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25v-8.5a.25.25 0 0 1 .25-.25h3a.75.75 0 0 0 0-1.5h-3Zm6.97-.53a.75.75 0 0 0 0 1.06l1.72 1.72-4.97 4.97a.75.75 0 1 0 1.06 1.06l4.97-4.97 1.72 1.72a.75.75 0 0 0 1.28-.53V2.75A.75.75 0 0 0 14.75 2h-3.5a.75.75 0 0 0-.53 1.28Z');
+    svg.appendChild(path);
+    anchor.appendChild(svg);
+  }
+
+  /**
+   * Apply the resolved links config to the header DOM.
+   *
+   *   - Hide `#github-link` if links.github === false.
+   *   - Hide `#graphite-link` if links.graphite === false.
+   *   - Insert an `#external-link` anchor before `#github-link` when
+   *     `links.external` is set and substitution succeeds.
+   *
+   * Idempotent: a pre-existing `#external-link` is replaced rather than
+   * duplicated. Safe to call multiple times (e.g. after a refresh).
+   *
+   * @param {Object} links     resolved links config from the server
+   * @param {Object} context   substitution context for url_template
+   */
+  function applyRepoLinks(links, context) {
+    if (!links || typeof links !== 'object') return;
+
+    const githubLink = document.getElementById('github-link');
+    if (githubLink) {
+      if (links.github === false) {
+        githubLink.style.display = 'none';
+      }
+    }
+
+    const graphiteLink = document.getElementById('graphite-link');
+    if (graphiteLink) {
+      if (links.graphite === false) {
+        // Permanently hide — overrides the enable_graphite toggle for
+        // this repo. Stored on a data attribute so pr.js can detect the
+        // suppression and skip the show-on-load codepath.
+        graphiteLink.style.display = 'none';
+        graphiteLink.dataset.suppressed = 'true';
+      }
+    }
+
+    // Remove any previously inserted external link before re-inserting.
+    const existing = document.getElementById('external-link');
+    if (existing) existing.remove();
+
+    if (links.external) {
+      const anchor = buildExternalLink(links.external, context);
+      if (anchor) {
+        // Insert just before #github-link if present; otherwise append to
+        // the icon group. Falls back to header-right > div if needed.
+        if (githubLink && githubLink.parentNode) {
+          githubLink.parentNode.insertBefore(anchor, githubLink);
+        } else {
+          const iconGroup = document.querySelector('.header .header-icon-group')
+            || document.querySelector('.header-icon-group');
+          if (iconGroup) iconGroup.appendChild(anchor);
+        }
+      }
+    }
+  }
+
+  /**
+   * Fetch the resolved links config for an owner/repo and apply it.
+   *
+   * @param {string} owner
+   * @param {string} repo
+   * @param {Object} context  substitution context (owner, repo, number,
+   *                          branch, base_branch, head_sha)
+   * @returns {Promise<void>}
+   */
+  async function fetchAndApplyRepoLinks(owner, repo, context) {
+    if (!owner || !repo) return;
+    // Reset so a failed fetch (or a repo with no links) falls back to the
+    // "GitHub" defaults rather than carrying a previous review's host name.
+    _currentLinks = null;
+    _currentContext = context || null;
+    try {
+      const response = await fetch(
+        '/api/repos/' + encodeURIComponent(owner) + '/' + encodeURIComponent(repo) + '/links'
+      );
+      if (!response.ok) {
+        console.warn('[repo-links] Failed to fetch repo links:', response.status);
+        return;
+      }
+      const data = await response.json();
+      _currentLinks = (data && data.links) || null;
+      applyRepoLinks(_currentLinks, context);
+    } catch (err) {
+      console.warn('[repo-links] Error fetching repo links:', err);
+    }
+  }
+
+  /**
+   * Display name of the remote code host for the current review, for use
+   * in user-facing text in place of the literal "GitHub". Returns the
+   * configured `links.external.name`, or "GitHub" when unset. Server-side
+   * counterpart: `resolveHostName` in src/links/repo-links.js.
+   *
+   * @returns {string}
+   */
+  function hostName() {
+    if (_currentLinks && _currentLinks.external && _currentLinks.external.name) {
+      return _currentLinks.external.name;
+    }
+    return 'GitHub';
+  }
+
+  /**
+   * The substituted external URL for the current review (built from
+   * `links.external.url_template` and the stored context), or null when no
+   * external link is configured or substitution fails (e.g. Local mode,
+   * which has no `{number}`).
+   *
+   * @returns {string|null}
+   */
+  function externalUrl() {
+    if (!_currentLinks || !_currentLinks.external || !_currentLinks.external.url_template) {
+      return null;
+    }
+    return substituteUrlTemplate(_currentLinks.external.url_template, _currentContext || {});
+  }
+
+  /**
+   * The configured (server-sanitised) external host icon SVG string for the
+   * current review, or null when none is configured.
+   *
+   * @returns {string|null}
+   */
+  function externalIcon() {
+    if (_currentLinks && _currentLinks.external && _currentLinks.external.icon) {
+      return _currentLinks.external.icon;
+    }
+    return null;
+  }
+
+  const api = {
+    substituteUrlTemplate,
+    parseSvgIcon,
+    buildExternalLink,
+    applyRepoLinks,
+    fetchAndApplyRepoLinks,
+    hostName,
+    externalUrl,
+    externalIcon,
+  };
+
+  // Expose on window for use by pr.js and local.js.
+  if (typeof window !== 'undefined') {
+    window.RepoLinks = api;
+  }
+
+  // Also export for Node.js/test environments. Tests that only need the
+  // pure functions (substituteUrlTemplate) don't need a DOM.
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+})();

package/public/js/utils/modal-detection.js

@@ -0,0 +1,77 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Shared modal-detection helpers.
+ *
+ * Used by KeyboardShortcuts and PRManager so keyboard handlers consistently
+ * defer to whatever modal/dialog is currently open. Single source of truth
+ * for both the selector list and the visibility check — keeping them in
+ * sync across consumers was the original motivation for extracting this.
+ *
+ * The help overlay (`#keyboard-shortcuts-help`) is intentionally excluded
+ * from the selectors so the shortcuts overlay itself doesn't suppress
+ * Escape handling for its own close button.
+ */
+
+/**
+ * Selectors that identify "a modal is open". Anything matched here will be
+ * treated as a blocker for unrelated keyboard shortcuts.
+ * @type {string[]}
+ */
+const MODAL_SELECTORS = [
+  '.modal-overlay:not(#keyboard-shortcuts-help)',
+  '.review-modal-overlay',
+  '.preview-modal-overlay',
+  '.confirm-dialog-overlay',
+  '.analysis-config-overlay',
+  '.ai-summary-modal-overlay',
+  '[role="dialog"]:not(#keyboard-shortcuts-help)'
+];
+
+/**
+ * Return true when `element` is visually present — i.e. not hidden via
+ * `display`, `visibility`, or zero opacity. Mirrors the legacy
+ * KeyboardShortcuts.isElementVisible behavior so existing call sites keep
+ * the same semantics.
+ *
+ * @param {Element|null|undefined} element
+ * @returns {boolean}
+ */
+function isElementVisible(element) {
+  if (!element) return false;
+  if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+    return true;
+  }
+  const style = window.getComputedStyle(element);
+  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Return true when at least one of the registered modal selectors matches
+ * a visible element in the document.
+ *
+ * Excludes the keyboard-shortcuts help overlay so it doesn't block its own
+ * close behavior.
+ *
+ * @returns {boolean}
+ */
+function isModalOpen() {
+  if (typeof document === 'undefined') return false;
+  for (const selector of MODAL_SELECTORS) {
+    const el = document.querySelector(selector);
+    if (el && isElementVisible(el)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+if (typeof window !== 'undefined') {
+  window.ModalDetection = { isModalOpen, isElementVisible, MODAL_SELECTORS };
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { isModalOpen, isElementVisible, MODAL_SELECTORS };
+}

package/public/js/utils/provider-model.js

@@ -0,0 +1,88 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Shared provider/model pair resolver.
+ *
+ * Provider and model defaults are sourced from several scopes (repository
+ * settings, then app config) and historically each half was resolved
+ * independently with `repo || app || hardcoded`. When a scope overrides only
+ * ONE half, the halves can come from different scopes and produce an invalid
+ * pair such as `gemini` + `opus` (an Anthropic model). The modal then shows no
+ * selected model, and the non-modal auto-analyze path posts the broken pair
+ * straight to the backend.
+ *
+ * This resolver treats each scope as a unit and never mixes a provider from one
+ * scope with a model from another: it picks the first scope that names a known
+ * provider, keeps that scope's model only if it belongs to the provider, and
+ * otherwise derives the model from the provider's own default.
+ */
+
+/**
+ * @param {Object} providerInfo - One entry from /api/providers
+ * @param {string} modelId
+ * @returns {boolean} Whether modelId is one of the provider's models
+ */
+function _modelBelongsToProvider(providerInfo, modelId) {
+  return !!(
+    providerInfo &&
+    Array.isArray(providerInfo.models) &&
+    providerInfo.models.some(m => m && m.id === modelId)
+  );
+}
+
+/**
+ * Resolve a coherent { provider, model } pair from ordered candidate scopes.
+ *
+ * @param {Array<{provider?: string, model?: string}>} scopes - Ordered by
+ *   precedence (e.g. [repoSettings, appConfig]). Entries, and either half, may
+ *   be null/undefined.
+ * @param {Array<Object>} providersInfo - The `providers` array from
+ *   /api/providers (each `{ id, models: [{id, ...}], defaultModel }`). May be
+ *   empty if the fetch failed.
+ * @returns {{provider: string, model: (string|null)}} A matched pair. `model`
+ *   is null only when no provider metadata is available to derive one.
+ */
+function resolveProviderModelPair(scopes, providersInfo) {
+  const providers = Array.isArray(providersInfo) ? providersInfo : [];
+  const findProvider = (id) => providers.find(p => p && p.id === id);
+  const providerDefaultModel = (info) =>
+    (info && (info.defaultModel || (Array.isArray(info.models) && info.models[0] && info.models[0].id))) || null;
+
+  for (const scope of (Array.isArray(scopes) ? scopes : [])) {
+    if (!scope) continue;
+    const provId = scope.provider || null;
+    const modelId = scope.model || null;
+
+    if (provId) {
+      const info = findProvider(provId);
+      if (info) {
+        if (modelId && _modelBelongsToProvider(info, modelId)) {
+          return { provider: provId, model: modelId };
+        }
+        return { provider: provId, model: providerDefaultModel(info) };
+      }
+      // Provider not in metadata (custom/unavailable): can't validate, pass
+      // through this scope's own halves rather than mixing in another scope's.
+      return { provider: provId, model: modelId };
+    }
+
+    if (modelId) {
+      // Scope names a model but no provider — attribute it to whichever
+      // provider owns it. If none owns it, fall through to the next scope.
+      const owner = providers.find(p => _modelBelongsToProvider(p, modelId));
+      if (owner) return { provider: owner.id, model: modelId };
+    }
+  }
+
+  // Nothing resolved: fall back to claude, deriving its default model from
+  // metadata when available (else null → let the backend/provider decide).
+  const claude = findProvider('claude');
+  return { provider: 'claude', model: providerDefaultModel(claude) };
+}
+
+if (typeof window !== 'undefined') {
+  window.resolveProviderModelPair = resolveProviderModelPair;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { resolveProviderModelPair };
+}

package/public/js/utils/storage-keys.js

@@ -0,0 +1,50 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Shared localStorage-key helpers.
+ *
+ * Single source of truth for repository-scoped storage keys. These keys are
+ * shared ACROSS pages — the index/bulk page writes per-repo keys (e.g.
+ * `pair-review-tab`, `pair-review-instructions`) that the PR page later reads
+ * via `PRManager.getRepoStorageKey`. Any divergence in the base64 byte
+ * assembly would silently break remembered-tab / instructions reuse with no
+ * error, so the encoding lives here once rather than being copied per page.
+ */
+
+/**
+ * Base64-encode a UTF-8 string in a byte-accurate way (btoa alone mangles
+ * multibyte characters).
+ * @param {string} value
+ * @returns {string} Base64 (with '=' padding)
+ */
+function encodeBase64Utf8(value) {
+  const bytes = new TextEncoder().encode(value);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+
+/**
+ * Generate a safe localStorage key for repository-specific settings.
+ * Uses base64 encoding to handle special characters in owner/repo names.
+ * @param {string} prefix - Key prefix (e.g. 'pair-review-tab')
+ * @param {string} owner - Repository owner
+ * @param {string} repo - Repository name
+ * @returns {string} Safe localStorage key
+ */
+function getRepoStorageKey(prefix, owner, repo) {
+  try {
+    const repoId = encodeBase64Utf8(owner + '/' + repo).replace(/=/g, '');
+    return prefix + ':' + repoId;
+  } catch (_error) {
+    return prefix + ':' + encodeURIComponent(owner + '/' + repo);
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.encodeBase64Utf8 = encodeBase64Utf8;
+  window.getRepoStorageKey = getRepoStorageKey;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { encodeBase64Utf8, getRepoStorageKey };
+}

package/public/local.html

@@ -448,6 +448,16 @@
                             </svg>
                             <span class="btn-text">Analyze</span>
                         </button>
+                        <button class="btn btn-sm btn-icon btn-summary-toggle" id="summary-toggle-btn" title="Hide hunk summaries" aria-label="Toggle hunk summaries" aria-pressed="true" style="display: none;">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <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>
+                        </button>
+                        <button class="btn btn-sm btn-icon btn-tour-toggle" id="tour-toggle-btn" title="Start guided tour" aria-label="Start guided tour" aria-pressed="false" style="display: none;">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <path d="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"/>
+                            </svg>
+                        </button>
                         <button class="btn btn-sm btn-icon" id="chat-toggle-btn" title="Toggle Chat panel">
                             <svg class="chat-icon" viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
                                 <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/>
@@ -585,6 +595,10 @@
     <!-- Tier icons utility -->
     <script src="/js/utils/tier-icons.js"></script>
 
+    <!-- Shared storage-key and provider/model helpers -->
+    <script src="/js/utils/storage-keys.js"></script>
+    <script src="/js/utils/provider-model.js"></script>
+
     <!-- Category emoji mapping -->
     <script src="/js/utils/category-emoji.js"></script>
 
@@ -597,6 +611,9 @@
     <!-- Timestamp parsing utility -->
     <script src="/js/utils/time.js"></script>
 
+    <!-- Modal detection (shared by KeyboardShortcuts and PRManager) -->
+    <script src="/js/utils/modal-detection.js"></script>
+
     <!-- WebSocket client -->
     <script src="/js/ws-client.js"></script>
 
@@ -639,6 +656,10 @@
     <script src="/js/modules/analysis-history.js"></script>
     <script src="/js/modules/diff-context.js"></script>
     <script src="/js/modules/file-list-merger.js"></script>
+    <script src="/js/modules/hunk-summary-renderer.js"></script>
+    <script src="/js/modules/tour-renderer.js"></script>
+    <script src="/js/modules/cancel-background-job.js"></script>
+    <script src="/js/components/TourBar.js"></script>
 
     <!-- Chat Panel Component -->
     <script src="/js/components/ChatPanel.js"></script>
@@ -657,6 +678,9 @@
          pr.js / AIPanel initialise. Must load BEFORE pr.js. -->
     <script src="/runtime-config.js"></script>
 
+    <!-- Repo Links UI (must load before pr.js / local.js) -->
+    <script src="/js/repo-links.js"></script>
+
     <!-- PR JavaScript (shared with local mode) -->
     <script src="/js/pr.js"></script>
 

package/public/pr.html

@@ -244,6 +244,16 @@
                             </svg>
                             <span class="btn-text">Analyze</span>
                         </button>
+                        <button class="btn btn-sm btn-icon btn-summary-toggle" id="summary-toggle-btn" title="Hide hunk summaries" aria-label="Toggle hunk summaries" aria-pressed="true" style="display: none;">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <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>
+                        </button>
+                        <button class="btn btn-sm btn-icon btn-tour-toggle" id="tour-toggle-btn" title="Start guided tour" aria-label="Start guided tour" aria-pressed="false" style="display: none;">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <path d="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"/>
+                            </svg>
+                        </button>
                         <button class="btn btn-sm btn-icon" id="chat-toggle-btn" title="Toggle Chat panel">
                             <svg class="chat-icon" viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
                                 <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/>
@@ -388,6 +398,10 @@
     <!-- Tier icons utility -->
     <script src="/js/utils/tier-icons.js"></script>
 
+    <!-- Shared storage-key and provider/model helpers -->
+    <script src="/js/utils/storage-keys.js"></script>
+    <script src="/js/utils/provider-model.js"></script>
+
     <!-- Category emoji mapping -->
     <script src="/js/utils/category-emoji.js"></script>
 
@@ -400,6 +414,9 @@
     <!-- Timestamp parsing utility -->
     <script src="/js/utils/time.js"></script>
 
+    <!-- Modal detection (shared by KeyboardShortcuts and PRManager) -->
+    <script src="/js/utils/modal-detection.js"></script>
+
     <!-- WebSocket client -->
     <script src="/js/ws-client.js"></script>
 
@@ -443,6 +460,10 @@
     <script src="/js/modules/analysis-history.js"></script>
     <script src="/js/modules/diff-context.js"></script>
     <script src="/js/modules/file-list-merger.js"></script>
+    <script src="/js/modules/hunk-summary-renderer.js"></script>
+    <script src="/js/modules/tour-renderer.js"></script>
+    <script src="/js/modules/cancel-background-job.js"></script>
+    <script src="/js/components/TourBar.js"></script>
 
     <!-- Chat Panel Component -->
     <script src="/js/components/ChatPanel.js"></script>
@@ -458,6 +479,9 @@
          pr.js / AIPanel initialise. Must load BEFORE pr.js. -->
     <script src="/runtime-config.js"></script>
 
+    <!-- Repo Links UI (must load before pr.js) -->
+    <script src="/js/repo-links.js"></script>
+
     <!-- PR JavaScript -->
     <script src="/js/pr.js"></script>
 </body>

package/public/repo-settings.html

@@ -13,6 +13,7 @@
     <title>Repository Settings - Pair Review</title>
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/css/pr.css">
+    <link rel="stylesheet" href="/css/analysis-config.css">
     <link rel="stylesheet" href="/css/repo-settings.css">
 </head>
 <body>