@oar-sh/oar 0.9.0

package/server/public/app/emoji-view.js

@@ -0,0 +1,101 @@
+import { autoResize, isMobileComposerViewport } from './store.js';
+
+const LAST_EMOJI_STORAGE_KEY = 'copilot_last_emoji';
+const DEFAULT_EMOJI = '🙂';
+const EMOJI_CHOICES = ['🙂', '😀', '😁', '😂', '😊', '😍', '😘', '😎', '🤔', '🙌', '👍', '👏', '🎉', '❤️', '🔥', '✅', '👀', '🤝', '🙏', '💡', '🚀', '✨', '🧠', '🛠️'];
+
+let pickerOpen = false;
+
+function getLastEmoji() {
+  const saved = String(localStorage.getItem(LAST_EMOJI_STORAGE_KEY) || '').trim();
+  return saved || DEFAULT_EMOJI;
+}
+
+function setLastEmoji(emoji) {
+  const value = String(emoji || '').trim();
+  if (!value) return;
+  localStorage.setItem(LAST_EMOJI_STORAGE_KEY, value);
+}
+
+function updateEmojiButton() {
+  const button = document.getElementById('emoji-btn');
+  if (!button) return;
+  button.textContent = getLastEmoji();
+}
+
+function closeEmojiPicker() {
+  const popup = document.getElementById('emoji-popup');
+  if (!popup) return;
+  popup.classList.remove('visible');
+  popup.setAttribute('aria-hidden', 'true');
+  pickerOpen = false;
+}
+
+function insertEmojiAtCaret(emoji) {
+  const input = document.getElementById('msg-input');
+  if (!input) return;
+  const value = String(input.value || '');
+  const start = Number.isFinite(input.selectionStart) ? input.selectionStart : value.length;
+  const end = Number.isFinite(input.selectionEnd) ? input.selectionEnd : value.length;
+  input.value = `${value.slice(0, start)}${emoji}${value.slice(end)}`;
+  const nextCaret = start + emoji.length;
+  input.selectionStart = nextCaret;
+  input.selectionEnd = nextCaret;
+  autoResize(input);
+  input.focus();
+}
+
+function handleEmojiChoice(emoji) {
+  const value = String(emoji || '').trim();
+  if (!value) return;
+  setLastEmoji(value);
+  updateEmojiButton();
+  insertEmojiAtCaret(value);
+  closeEmojiPicker();
+}
+
+function ensureEmojiChoices() {
+  const popup = document.getElementById('emoji-popup');
+  if (!popup || popup.dataset.bound === '1') return;
+  popup.dataset.bound = '1';
+  popup.innerHTML = EMOJI_CHOICES
+    .map((emoji) => `<button class="emoji-choice" type="button" data-emoji="${emoji}" aria-label="Insert ${emoji}">${emoji}</button>`)
+    .join('');
+  popup.addEventListener('click', (event) => {
+    const target = event.target?.closest?.('.emoji-choice');
+    if (!target) return;
+    handleEmojiChoice(target.getAttribute('data-emoji'));
+  });
+}
+
+export function toggleEmojiPicker() {
+  if (isMobileComposerViewport()) return;
+  const popup = document.getElementById('emoji-popup');
+  if (!popup) return;
+  if (pickerOpen) {
+    closeEmojiPicker();
+    return;
+  }
+  popup.classList.add('visible');
+  popup.setAttribute('aria-hidden', 'false');
+  pickerOpen = true;
+}
+
+export function initEmojiPicker() {
+  ensureEmojiChoices();
+  updateEmojiButton();
+  if (document.body.dataset.emojiPickerBound === '1') return;
+  document.body.dataset.emojiPickerBound = '1';
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') closeEmojiPicker();
+  });
+  document.addEventListener('pointerdown', (event) => {
+    if (!pickerOpen) return;
+    const popup = document.getElementById('emoji-popup');
+    const button = document.getElementById('emoji-btn');
+    const target = event.target;
+    if (popup?.contains(target) || button?.contains(target)) return;
+    closeEmojiPicker();
+  });
+}
+

package/server/public/app/external-link-policy.mjs

@@ -0,0 +1,80 @@
+const EXTERNAL_LINK_PROTOCOLS = new Set(['http:', 'https:']);
+
+export function isExternalNavigationHref(rawHref, baseHref) {
+  const href = String(rawHref || '').trim();
+  if (!href || href.startsWith('#')) return false;
+  try {
+    const url = new URL(href, baseHref);
+    return EXTERNAL_LINK_PROTOCOLS.has(url.protocol);
+  } catch {
+    return false;
+  }
+}
+
+function isInAppLink(anchor) {
+  return anchor.matches('a.workspace-file-link[data-workspace-path]')
+    || Boolean(anchor.closest('.file-preview-markdown'));
+}
+
+export function openExternalNavigation(url, onFallback = null) {
+  const opened = window.open(url, '_blank');
+  if (opened) opened.opener = null;
+  if (!opened && typeof onFallback === 'function') onFallback(url);
+  return !!opened;
+}
+
+function secureExternalLink(anchor, baseHref, onFallback) {
+  if (
+    !(anchor instanceof HTMLAnchorElement)
+    || anchor.hasAttribute('download')
+    || isInAppLink(anchor)
+    || !isExternalNavigationHref(anchor.getAttribute('href'), baseHref)
+  ) {
+    return;
+  }
+
+  if (anchor.target !== '_blank') anchor.target = '_blank';
+  const relTokens = new Set(String(anchor.rel || '').split(/\s+/).filter(Boolean));
+  relTokens.add('noopener');
+  relTokens.add('noreferrer');
+  anchor.rel = Array.from(relTokens).join(' ');
+}
+
+export function installExternalLinkPolicy({ documentRef = document, onFallback = null } = {}) {
+  if (!documentRef || documentRef.documentElement?.dataset.externalLinkPolicy === 'installed') return;
+  documentRef.documentElement.dataset.externalLinkPolicy = 'installed';
+
+  const secureLinksIn = (root) => {
+    if (root instanceof HTMLAnchorElement) {
+      secureExternalLink(root, documentRef.baseURI, onFallback);
+      return;
+    }
+    if (!(root instanceof Element)) return;
+    root.querySelectorAll('a[href]').forEach((anchor) => secureExternalLink(anchor, documentRef.baseURI, onFallback));
+  };
+
+  secureLinksIn(documentRef.documentElement);
+  documentRef.addEventListener('click', (event) => {
+    const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+    const anchor = target?.closest?.('a[href]');
+    if (!anchor || isInAppLink(anchor)) return;
+    secureExternalLink(anchor, documentRef.baseURI, onFallback);
+    if (!isExternalNavigationHref(anchor.getAttribute('href'), documentRef.baseURI)) return;
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    openExternalNavigation(anchor.href, onFallback);
+  }, true);
+
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === 'attributes') secureLinksIn(record.target);
+      for (const node of record.addedNodes) secureLinksIn(node);
+    }
+  });
+  observer.observe(documentRef.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ['class', 'download', 'href', 'target'],
+  });
+}

package/server/public/app/file-preview-navigation.mjs

@@ -0,0 +1,51 @@
+const EXTERNAL_SCHEME = /^[a-z][a-z\d+.-]*:/i;
+
+function decodeFragment(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function resolveRelativePath(currentPath, hrefPath) {
+  const baseParts = String(currentPath || '').replace(/\\/g, '/').split('/').filter(Boolean);
+  baseParts.pop();
+  const targetParts = String(hrefPath || '').replace(/\\/g, '/').split('/');
+  for (const part of targetParts) {
+    if (!part || part === '.') continue;
+    if (part === '..') {
+      if (!baseParts.length) return '';
+      baseParts.pop();
+      continue;
+    }
+    baseParts.push(part);
+  }
+  return baseParts.join('/');
+}
+
+export function resolveFilePreviewLink(rawHref, currentPath) {
+  const href = String(rawHref || '').trim();
+  if (!href) return { kind: 'none' };
+  if (href.startsWith('#')) return { kind: 'fragment', fragment: decodeFragment(href.slice(1)) };
+  if (href.startsWith('//') || EXTERNAL_SCHEME.test(href)) return { kind: 'external', href };
+
+  const hashIndex = href.indexOf('#');
+  const pathPart = hashIndex >= 0 ? href.slice(0, hashIndex) : href;
+  const fragment = hashIndex >= 0 ? decodeFragment(href.slice(hashIndex + 1)) : '';
+  if (pathPart.startsWith('/')) return { kind: 'none' };
+
+  const path = resolveRelativePath(currentPath, pathPart);
+  return path ? { kind: 'file', path, fragment } : { kind: 'none' };
+}
+
+export function markdownHeadingId(text) {
+  return String(text || '')
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}

package/server/public/app/font-scaling.js

@@ -0,0 +1,262 @@
+const FONT_SCALE_STORAGE_KEY = 'copilot_font_scale';
+const FONT_SCALE_MIN = 0.5;
+const FONT_SCALE_MAX = 1.5;
+const FONT_SCALE_DEFAULT = 1;
+const FONT_SCALE_WHEEL_STEP_MIN = 0.01;
+const FONT_SCALE_WHEEL_STEP_MAX = 0.2;
+const FONT_SCALE_PILL_VISIBLE_MS = 900;
+
+let fontScaleValue = FONT_SCALE_DEFAULT;
+let fontScaleIndicatorTimer = null;
+let fontScalePinchState = {
+  active: false,
+  startDistance: 0,
+  startScale: FONT_SCALE_DEFAULT,
+};
+
+function readLocalStorage(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeLocalStorage(key, value) {
+  try {
+    localStorage.setItem(key, value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function clampFontScale(value) {
+  if (value == null) return FONT_SCALE_DEFAULT;
+  const text = typeof value === 'string' ? value.trim() : value;
+  if (text === '') return FONT_SCALE_DEFAULT;
+  const numeric = Number(text);
+  if (!Number.isFinite(numeric)) return FONT_SCALE_DEFAULT;
+  return Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, numeric));
+}
+
+function readStoredFontScale() {
+  return clampFontScale(readLocalStorage(FONT_SCALE_STORAGE_KEY));
+}
+
+function normalizeFontScaleSelectValue(raw = '') {
+  const text = String(raw || '').trim();
+  if (!text) return null;
+  const numeric = Number(text);
+  if (!Number.isFinite(numeric)) return null;
+  if (numeric > 3) return clampFontScale(numeric / 100);
+  return clampFontScale(numeric);
+}
+
+function getMessageViewportAnchor() {
+  const container = document.getElementById('messages');
+  if (!container) return null;
+  const containerRect = container.getBoundingClientRect();
+  const messages = Array.from(container.querySelectorAll('.msg[data-message-id]'));
+  for (const message of messages) {
+    const rect = message.getBoundingClientRect();
+    if (rect.bottom <= containerRect.top || rect.top >= containerRect.bottom) continue;
+    const messageId = String(message.dataset.messageId || '').trim();
+    if (!messageId) continue;
+    return {
+      messageId,
+      offsetTop: rect.top - containerRect.top,
+    };
+  }
+  return null;
+}
+
+function restoreMessageViewportAnchor(anchor) {
+  if (!anchor?.messageId) return;
+  const container = document.getElementById('messages');
+  if (!container) return;
+  const messageId = String(anchor.messageId || '').trim();
+  if (!messageId) return;
+  const message = Array.from(container.querySelectorAll('.msg[data-message-id]'))
+    .find((node) => String(node?.dataset?.messageId || '').trim() === messageId);
+  if (!message) return;
+  const containerRect = container.getBoundingClientRect();
+  const rect = message.getBoundingClientRect();
+  const delta = rect.top - containerRect.top - Number(anchor.offsetTop || 0);
+  if (Math.abs(delta) > 0.5) {
+    container.scrollTop += delta;
+  }
+}
+
+export function syncFontScaleSelect() {
+  const select = document.getElementById('font-scale-select');
+  if (!select) return;
+  const currentPercent = Math.round(clampFontScale(fontScaleValue) * 100);
+  const candidate = String(currentPercent);
+  if (Array.from(select.options).some((option) => option.value === candidate)) {
+    select.value = candidate;
+    return;
+  }
+  const dynamicValue = String(currentPercent);
+  const dynamicLabel = `${currentPercent}%`;
+  let dynamicOption = select.querySelector('option[data-dynamic-font-scale="1"]');
+  if (!dynamicOption) {
+    dynamicOption = document.createElement('option');
+    dynamicOption.setAttribute('data-dynamic-font-scale', '1');
+    select.appendChild(dynamicOption);
+  }
+  dynamicOption.value = dynamicValue;
+  dynamicOption.textContent = dynamicLabel;
+  select.value = dynamicValue;
+}
+
+export function setFontScale(nextScale, { persist = true, preserveMessageAnchor = true } = {}) {
+  const normalized = clampFontScale(nextScale);
+  if (Math.abs(normalized - fontScaleValue) <= 0.0001) {
+    if (persist) writeLocalStorage(FONT_SCALE_STORAGE_KEY, String(normalized));
+    syncFontScaleSelect();
+    return normalized;
+  }
+  const anchor = preserveMessageAnchor ? getMessageViewportAnchor() : null;
+  fontScaleValue = normalized;
+  document.documentElement.style.setProperty('--font-scale', normalized.toFixed(4));
+  document.documentElement.style.setProperty('--font-scale-percent', `${Math.round(normalized * 100)}%`);
+  if (persist) writeLocalStorage(FONT_SCALE_STORAGE_KEY, String(normalized));
+  syncFontScaleSelect();
+  if (anchor) {
+    requestAnimationFrame(() => {
+      restoreMessageViewportAnchor(anchor);
+    });
+  }
+  return normalized;
+}
+
+function showFontScaleIndicator(scaleValue) {
+  const indicator = document.getElementById('font-scale-indicator');
+  if (!indicator) return;
+  const normalized = clampFontScale(scaleValue);
+  indicator.textContent = `${Math.round(normalized * 100)}%`;
+  indicator.hidden = false;
+  indicator.classList.add('visible');
+  if (fontScaleIndicatorTimer) clearTimeout(fontScaleIndicatorTimer);
+  fontScaleIndicatorTimer = setTimeout(() => {
+    indicator.classList.remove('visible');
+    window.setTimeout(() => {
+      if (!indicator.classList.contains('visible')) indicator.hidden = true;
+    }, 180);
+    fontScaleIndicatorTimer = null;
+  }, FONT_SCALE_PILL_VISIBLE_MS);
+}
+
+function isImageZoomGestureTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return !!target.closest('#file-preview-body.image-zoom-mode');
+}
+
+function pinchDistance(touchA, touchB) {
+  return Math.hypot(touchA.clientX - touchB.clientX, touchA.clientY - touchB.clientY);
+}
+
+function normalizeWheelDeltaPixels(event) {
+  const deltaY = Number(event?.deltaY);
+  if (!Number.isFinite(deltaY) || deltaY === 0) return 0;
+  const deltaMode = Number(event?.deltaMode || 0);
+  if (deltaMode === 1) return deltaY * 16; // lines -> approx pixels
+  if (deltaMode === 2) return deltaY * (window.innerHeight || 800); // pages -> pixels
+  return deltaY; // already pixels
+}
+
+function onGlobalFontScaleWheel(event) {
+  if (!(event.ctrlKey || event.metaKey)) return;
+  if (isImageZoomGestureTarget(event.target)) return;
+  event.preventDefault();
+  const deltaPixels = normalizeWheelDeltaPixels(event);
+  if (!Number.isFinite(deltaPixels) || deltaPixels === 0) return;
+  const direction = deltaPixels < 0 ? 1 : -1;
+  // Slow wheel gestures move by 1%, while faster spins accelerate.
+  const magnitude = Math.min(
+    FONT_SCALE_WHEEL_STEP_MAX,
+    Math.max(FONT_SCALE_WHEEL_STEP_MIN, Math.abs(deltaPixels) / 10_000),
+  );
+  const nextScale = setFontScale(fontScaleValue + (direction * magnitude), { persist: true, preserveMessageAnchor: true });
+  showFontScaleIndicator(nextScale);
+}
+
+function onGlobalFontScaleTouchStart(event) {
+  if (event.touches.length !== 2) return;
+  if (isImageZoomGestureTarget(event.target)) {
+    fontScalePinchState.active = false;
+    return;
+  }
+  const t0 = event.touches[0];
+  const t1 = event.touches[1];
+  fontScalePinchState = {
+    active: true,
+    startDistance: pinchDistance(t0, t1),
+    startScale: fontScaleValue,
+  };
+  event.preventDefault();
+}
+
+function onGlobalFontScaleTouchMove(event) {
+  if (!fontScalePinchState.active) return;
+  if (event.touches.length !== 2) {
+    fontScalePinchState.active = false;
+    return;
+  }
+  if (isImageZoomGestureTarget(event.target)) {
+    fontScalePinchState.active = false;
+    return;
+  }
+  event.preventDefault();
+  const t0 = event.touches[0];
+  const t1 = event.touches[1];
+  const distance = pinchDistance(t0, t1);
+  if (!fontScalePinchState.startDistance || !Number.isFinite(distance) || distance <= 0) return;
+  const ratio = distance / fontScalePinchState.startDistance;
+  const nextScale = fontScalePinchState.startScale * ratio;
+  const appliedScale = setFontScale(nextScale, { persist: true, preserveMessageAnchor: true });
+  showFontScaleIndicator(appliedScale);
+}
+
+function onGlobalFontScaleTouchEnd(event) {
+  if (event.touches.length < 2) {
+    fontScalePinchState.active = false;
+  }
+}
+
+function populateFontScaleSelect() {
+  const select = document.getElementById('font-scale-select');
+  if (!select || select.dataset.populated === '1') return;
+  select.dataset.populated = '1';
+  for (let value = 50; value <= 150; value += 10) {
+    const option = document.createElement('option');
+    option.value = String(value);
+    option.textContent = `${value}%`;
+    select.appendChild(option);
+  }
+}
+
+export function initFontScaling() {
+  populateFontScaleSelect();
+  const inlineScale = Number(document.documentElement.style.getPropertyValue('--font-scale'));
+  const initialScale = Number.isFinite(inlineScale) ? clampFontScale(inlineScale) : readStoredFontScale();
+  setFontScale(initialScale, { persist: false, preserveMessageAnchor: false });
+  if (!window.__fontScaleGestureHandlersBound) {
+    window.__fontScaleGestureHandlersBound = true;
+    window.addEventListener('wheel', onGlobalFontScaleWheel, { passive: false, capture: true });
+    window.addEventListener('touchstart', onGlobalFontScaleTouchStart, { passive: false, capture: true });
+    window.addEventListener('touchmove', onGlobalFontScaleTouchMove, { passive: false, capture: true });
+    window.addEventListener('touchend', onGlobalFontScaleTouchEnd, { passive: true, capture: true });
+    window.addEventListener('touchcancel', onGlobalFontScaleTouchEnd, { passive: true, capture: true });
+  }
+}
+
+export function updateFontScaleFromSelect(rawValue) {
+  const next = normalizeFontScaleSelectValue(rawValue);
+  if (next == null) {
+    syncFontScaleSelect();
+    return;
+  }
+  setFontScale(next, { persist: true, preserveMessageAnchor: true });
+}