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

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/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/scroll-into-view.js

@@ -0,0 +1,164 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Stable scroll-into-view for the lazily rendered diff panel.
+ *
+ * Since the large-PR perf fix, expanded file bodies start as empty
+ * placeholders (`minHeight` ≈ patch lines × APPROX_DIFF_LINE_PX) and only
+ * render real rows when an IntersectionObserver sees them near the viewport.
+ * A plain `scrollIntoView()` therefore lands wrong on the first attempt:
+ * the browser computes the destination from placeholder heights, then the
+ * bodies passed during the scroll render and change height, shifting the
+ * target away from where the animation ends. A second attempt "works"
+ * because everything along the path has rendered by then.
+ *
+ * `scrollIntoViewStable()` fixes this by:
+ *   1. Rendering the target's own file body first (rows inside a lazy body
+ *      don't exist until rendered, and its placeholder height is wrong).
+ *   2. Issuing the caller's scroll (smooth behavior preserved).
+ *   3. Waiting for the viewport-relative position of the target to stop
+ *      moving (scroll animation done AND observer-triggered renders settled),
+ *      then re-issuing an instant scroll. If that correction moved the
+ *      target, newly revealed placeholders rendered and shifted layout
+ *      again — so settle and correct again, up to MAX_CORRECTIONS times.
+ *
+ * The settle loop aborts if the user starts scrolling themselves (wheel /
+ * touch / scroll-intent keys) so corrections never fight real input, and
+ * whenever the target leaves the DOM (file list re-render, tour unmount).
+ */
+
+/** Corrective re-scroll attempts after the initial scroll. */
+const MAX_CORRECTIONS = 4;
+/** Position delta (px) treated as "didn't move". */
+const STABLE_PX = 2;
+/** Consecutive same-position frames before the target counts as settled. */
+const SETTLE_FRAMES = 3;
+/** Hard cap on one settle wait — covers the longest smooth animation. */
+const SETTLE_TIMEOUT_MS = 2000;
+
+/** Keys that express scroll intent and should cancel pending corrections. */
+const SCROLL_KEYS = new Set([
+  'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '
+]);
+
+/**
+ * Latest-scroll-wins token. Every call captures `++activeGeneration`; any
+ * call whose captured value no longer matches has been superseded by a newer
+ * scroll and must bow out so stale settle loops don't fight or snap the
+ * viewport back to an old target.
+ */
+let activeGeneration = 0;
+
+/**
+ * Wait until `target`'s viewport-relative top is unchanged for
+ * SETTLE_FRAMES consecutive animation frames (or SETTLE_TIMEOUT_MS passes).
+ * Resolves early when the target is disconnected or `isCancelled()` trips.
+ * @param {Element} target
+ * @param {() => boolean} isCancelled
+ * @returns {Promise<void>}
+ */
+function waitForStablePosition(target, isCancelled) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    let lastTop = null;
+    let stableFrames = 0;
+    const tick = () => {
+      if (isCancelled() || !target.isConnected || Date.now() - start > SETTLE_TIMEOUT_MS) {
+        resolve();
+        return;
+      }
+      const top = target.getBoundingClientRect().top;
+      if (lastTop !== null && Math.abs(top - lastTop) <= STABLE_PX) {
+        stableFrames += 1;
+        if (stableFrames >= SETTLE_FRAMES) {
+          resolve();
+          return;
+        }
+      } else {
+        stableFrames = 0;
+      }
+      lastTop = top;
+      requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  });
+}
+
+/**
+ * Scroll `target` into view and keep it there while lazy file bodies render.
+ * Safe to call on any element; outside a lazy diff it degrades to one
+ * `scrollIntoView` plus a settle wait. Fire-and-forget friendly.
+ * @param {Element} target - Element to bring into view
+ * @param {ScrollIntoViewOptions} [options] - Passed to the initial scroll;
+ *   corrective re-scrolls force `behavior: 'auto'`.
+ * @returns {Promise<void>} resolves once the position is stable (or aborted)
+ */
+async function scrollIntoViewStable(target, options = {}) {
+  if (!target || !target.isConnected || typeof target.scrollIntoView !== 'function') return;
+
+  // Claim the active-scroll slot. A later call bumps activeGeneration past
+  // ours, at which point isCancelled() trips and this call bows out.
+  const myGen = ++activeGeneration;
+
+  // Render the target's own lazy body first: until then its rows don't
+  // exist and the wrapper's height is the placeholder estimate. Skip
+  // collapsed wrappers — their body is display:none (zero height), so
+  // rendering would pay full renderPatch cost without changing the scroll.
+  // Skip file-level comment/suggestion cards too: they live in
+  // `.file-comments-zone`, which sits above the lazy body, so rendering the
+  // body can't move them — only burn the renderPatch cost we want to avoid.
+  const prManager = (typeof window !== 'undefined') ? window.prManager : null;
+  const wrapper = target.closest?.('.d2h-file-wrapper');
+  if (wrapper && !target.closest?.('.file-comments-zone')
+      && !wrapper.classList.contains('collapsed')
+      && typeof prManager?.ensureFileBodyRendered === 'function') {
+    try {
+      await prManager.ensureFileBodyRendered(wrapper);
+    } catch (err) {
+      console.warn('[ScrollUtils] ensureFileBodyRendered failed; scrolling anyway', err);
+    }
+    if (!target.isConnected || myGen !== activeGeneration) return;
+  }
+
+  // Cancel corrections when the user scrolls on their own OR when a newer
+  // scrollIntoViewStable call supersedes this one (latest-scroll-wins).
+  let cancelled = false;
+  const isCancelled = () => cancelled || myGen !== activeGeneration;
+  const cancel = () => { cancelled = true; };
+  const onKeyDown = (e) => {
+    // Scroll-intent keys are also everyday caret/typing keys inside form
+    // fields — there they mean "move the cursor", not "scroll the page", so
+    // they must not abort the correction loop.
+    if (e.target?.closest?.('input, textarea, select') || e.target?.isContentEditable) return;
+    if (SCROLL_KEYS.has(e.key)) cancelled = true;
+  };
+  window.addEventListener('wheel', cancel, { capture: true, passive: true });
+  window.addEventListener('touchstart', cancel, { capture: true, passive: true });
+  window.addEventListener('keydown', onKeyDown, { capture: true });
+
+  try {
+    target.scrollIntoView(options);
+    for (let i = 0; i < MAX_CORRECTIONS; i++) {
+      await waitForStablePosition(target, isCancelled);
+      if (isCancelled() || !target.isConnected) return;
+      // Re-issue instantly: a no-op when the smooth scroll landed true, a
+      // snap to the real position when lazy renders shifted the layout.
+      const before = target.getBoundingClientRect().top;
+      target.scrollIntoView({ ...options, behavior: 'auto' });
+      if (Math.abs(target.getBoundingClientRect().top - before) <= STABLE_PX) return;
+      // The correction moved us — newly revealed bodies may render and
+      // shift layout once more; loop to settle and verify again.
+    }
+  } finally {
+    window.removeEventListener('wheel', cancel, { capture: true });
+    window.removeEventListener('touchstart', cancel, { capture: true });
+    window.removeEventListener('keydown', onKeyDown, { capture: true });
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.ScrollUtils = { scrollIntoViewStable, waitForStablePosition };
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { scrollIntoViewStable, waitForStablePosition, MAX_CORRECTIONS, STABLE_PX, SETTLE_FRAMES, SETTLE_TIMEOUT_MS };
+}

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

@@ -595,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>
 
@@ -610,6 +614,9 @@
     <!-- Modal detection (shared by KeyboardShortcuts and PRManager) -->
     <script src="/js/utils/modal-detection.js"></script>
 
+    <!-- Stable scroll-into-view for lazily rendered diff bodies -->
+    <script src="/js/utils/scroll-into-view.js"></script>
+
     <!-- WebSocket client -->
     <script src="/js/ws-client.js"></script>
 
@@ -674,6 +681,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>