@oar-sh/oar 0.9.0

package/server/public/app/settings-tabs.js

@@ -0,0 +1,129 @@
+const SETTINGS_TAB_STORAGE_KEY = 'copilot_settings_tab';
+const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
+
+const SETTINGS_TABS = ['general', 'providers', 'previews', 'notifications'];
+// Copilot leads: it is the default provider, and `SETTINGS_PROVIDER_TABS[0]`
+// is also the sub-tab a first-time visitor lands on.
+const SETTINGS_PROVIDER_TABS = ['copilot', 'openai', 'claude', 'grok', 'cursor'];
+
+let settingsTabsBound = false;
+
+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 normalizeTab(raw, allowed) {
+  const value = String(raw || '').trim().toLowerCase();
+  return allowed.includes(value) ? value : '';
+}
+
+function storedSettingsTab() {
+  return normalizeTab(readLocalStorage(SETTINGS_TAB_STORAGE_KEY), SETTINGS_TABS) || SETTINGS_TABS[0];
+}
+
+function storedProviderTab() {
+  return normalizeTab(readLocalStorage(SETTINGS_PROVIDER_TAB_STORAGE_KEY), SETTINGS_PROVIDER_TABS)
+    || SETTINGS_PROVIDER_TABS[0];
+}
+
+function settingsElements(attribute) {
+  return Array.from(document.querySelectorAll(`#settings-modal [${attribute}]`));
+}
+
+// One strip + its panels: mark the selected button/panel and hide the rest.
+function applyTabState(buttonAttribute, panelAttribute, active) {
+  const buttons = settingsElements(buttonAttribute);
+  if (!buttons.length) return false;
+  for (const button of buttons) {
+    const selected = button.getAttribute(buttonAttribute) === active;
+    button.classList.toggle('active', selected);
+    button.setAttribute('aria-selected', selected ? 'true' : 'false');
+    button.tabIndex = selected ? 0 : -1;
+  }
+  for (const panel of settingsElements(panelAttribute)) {
+    const selected = panel.getAttribute(panelAttribute) === active;
+    panel.classList.toggle('active', selected);
+    panel.hidden = !selected;
+  }
+  return true;
+}
+
+function focusTabByOffset(strip, current, offset) {
+  const buttons = Array.from(strip.querySelectorAll('[data-settings-tab], [data-settings-provider-tab]'))
+    .filter((button) => !button.disabled);
+  if (!buttons.length) return;
+  const index = buttons.indexOf(current);
+  const next = offset === 'home'
+    ? buttons[0]
+    : offset === 'end'
+      ? buttons[buttons.length - 1]
+      : buttons[(index + offset + buttons.length) % buttons.length];
+  if (!next) return;
+  next.focus();
+  next.click();
+}
+
+function handleTabKeydown(event) {
+  const button = event.target?.closest?.('[data-settings-tab], [data-settings-provider-tab]');
+  if (!button) return;
+  const strip = button.closest('.settings-tab-strip');
+  if (!strip) return;
+  const offset = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+    Home: 'home',
+    End: 'end',
+  }[event.key];
+  if (offset === undefined) return;
+  event.preventDefault();
+  focusTabByOffset(strip, button, offset);
+}
+
+function handleTabClick(event) {
+  const topTab = event.target?.closest?.('[data-settings-tab]');
+  if (topTab) {
+    selectSettingsTab(topTab.dataset.settingsTab);
+    return;
+  }
+  const providerTab = event.target?.closest?.('[data-settings-provider-tab]');
+  if (providerTab) selectSettingsTab(null, providerTab.dataset.settingsProviderTab);
+}
+
+export function ensureSettingsTabsBound() {
+  if (settingsTabsBound) return;
+  const modal = document.getElementById('settings-modal');
+  if (!modal) return;
+  settingsTabsBound = true;
+  modal.addEventListener('click', handleTabClick);
+  modal.addEventListener('keydown', handleTabKeydown);
+}
+
+// `tab` / `providerTab` are optional: anything omitted (or unknown) falls back
+// to the last selection persisted in localStorage.
+export function selectSettingsTab(tab, providerTab) {
+  ensureSettingsTabsBound();
+  const nextTab = normalizeTab(tab, SETTINGS_TABS) || storedSettingsTab();
+  const nextProviderTab = normalizeTab(providerTab, SETTINGS_PROVIDER_TABS) || storedProviderTab();
+  if (applyTabState('data-settings-tab', 'data-settings-panel', nextTab)) {
+    writeLocalStorage(SETTINGS_TAB_STORAGE_KEY, nextTab);
+  }
+  if (applyTabState('data-settings-provider-tab', 'data-settings-provider-panel', nextProviderTab)) {
+    writeLocalStorage(SETTINGS_PROVIDER_TAB_STORAGE_KEY, nextProviderTab);
+  }
+  return { tab: nextTab, providerTab: nextProviderTab };
+}

package/server/public/app/slash-autocomplete.mjs

@@ -0,0 +1,188 @@
+// The composer's slash-command autocompletion menu. Rendering and keyboard
+// only — what to offer comes from slash-commands.mjs, live preview tokens from
+// preview-cards.mjs, and the composer wires both in (conversation-view calls
+// update on input and offers every keydown here first).
+//
+// Enter contract: nothing is highlighted by default, so plain Enter keeps its
+// newline and Ctrl/Cmd+Enter keeps sending; only an arrow-selected row makes
+// Enter accept. Tab always accepts the top insertable match.
+
+import { completionsFor } from './slash-commands.mjs';
+import { getPreviews } from './preview-cards.mjs';
+
+let openState = null; // { items, replaceRange } while the menu is visible
+let selectedIndex = -1;
+
+function popupEl() {
+  return document.getElementById('slash-autocomplete-popup');
+}
+
+export function isSlashAutocompleteOpen() {
+  return openState !== null;
+}
+
+export function closeSlashAutocomplete() {
+  openState = null;
+  selectedIndex = -1;
+  const popup = popupEl();
+  if (!popup) return;
+  popup.classList.remove('visible');
+  popup.setAttribute('aria-hidden', 'true');
+  popup.textContent = '';
+}
+
+function insertableIndexes() {
+  return (openState?.items || [])
+    .map((item, index) => (item.insert !== null ? index : -1))
+    .filter((index) => index !== -1);
+}
+
+function renderMenu() {
+  const popup = popupEl();
+  if (!popup || !openState) return;
+  popup.textContent = '';
+  openState.items.forEach((item, index) => {
+    const row = document.createElement('div');
+    row.className = item.kind === 'hint' ? 'slash-item slash-item-hint' : 'slash-item';
+    if (index === selectedIndex) row.classList.add('slash-item-selected');
+    row.setAttribute('role', 'option');
+    row.setAttribute('aria-selected', index === selectedIndex ? 'true' : 'false');
+    row.dataset.index = String(index);
+
+    const nameEl = document.createElement('span');
+    nameEl.className = 'slash-item-name';
+    nameEl.textContent = item.display;
+    row.appendChild(nameEl);
+
+    if (item.description) {
+      // textContent throughout: preview labels are agent-supplied strings.
+      const descEl = document.createElement('span');
+      descEl.className = 'slash-item-desc';
+      descEl.textContent = item.description;
+      row.appendChild(descEl);
+    }
+    popup.appendChild(row);
+  });
+  popup.classList.add('visible');
+  popup.setAttribute('aria-hidden', 'false');
+}
+
+function acceptItem(input, index) {
+  const item = openState?.items?.[index];
+  if (!item || item.insert === null) return false;
+  const [start, end] = openState.replaceRange;
+  const value = String(input.value || '');
+  const inserted = `${item.insert} `;
+  input.value = `${value.slice(0, start)}${inserted}${value.slice(end)}`;
+  const caret = start + inserted.length;
+  input.selectionStart = caret;
+  input.selectionEnd = caret;
+  input.focus();
+  // Re-fires the composer's input pipeline (autoResize + this menu), so
+  // accepting a command immediately opens its next completion level.
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+  return true;
+}
+
+/**
+ * Recomputes the menu for the current input state. The composer calls this
+ * from the textarea's input handler; anything that is not a completable
+ * command head closes the menu.
+ */
+export function updateSlashAutocomplete(input, { conversationId = '' } = {}) {
+  if (!input) return;
+  const text = String(input.value || '');
+  if (!text.startsWith('/')) {
+    closeSlashAutocomplete();
+    return;
+  }
+  const caret = Number.isFinite(input.selectionStart) ? input.selectionStart : text.length;
+  const next = completionsFor(text, caret, { previews: getPreviews(), conversationId });
+  if (!next) {
+    closeSlashAutocomplete();
+    return;
+  }
+  // A rebuild replaces the item set, so a stale highlight index must not
+  // survive onto a different row.
+  const previousSelected = selectedIndex >= 0 ? openState?.items?.[selectedIndex] : null;
+  openState = next;
+  selectedIndex = previousSelected
+    ? next.items.findIndex((item) => item.insert !== null && item.insert === previousSelected.insert)
+    : -1;
+  renderMenu();
+}
+
+/**
+ * Offers a keydown to the menu. Returns true when the event was consumed; the
+ * composer's own handleKey must call this first and stop on true.
+ */
+export function handleSlashAutocompleteKey(event, input) {
+  if (!openState) return false;
+
+  if (event.key === 'Escape') {
+    closeSlashAutocomplete();
+    event.preventDefault();
+    // Swallowed entirely so the document-level Escape handlers (emoji picker,
+    // modals) do not also fire off one keypress.
+    event.stopPropagation();
+    return true;
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    const selectable = insertableIndexes();
+    if (!selectable.length) return false;
+    const position = selectable.indexOf(selectedIndex);
+    if (event.key === 'ArrowDown') {
+      selectedIndex = position === selectable.length - 1
+        ? selectable[0]
+        : selectable[position + 1] ?? selectable[0];
+    } else {
+      // ↑ from the top row returns to the no-highlight state, keeping plain
+      // Enter's newline reachable without Escape.
+      selectedIndex = position <= 0 ? -1 : selectable[position - 1];
+    }
+    renderMenu();
+    event.preventDefault();
+    return true;
+  }
+
+  if (event.key === 'Tab') {
+    const selectable = insertableIndexes();
+    if (!selectable.length) return false;
+    const target = selectedIndex >= 0 ? selectedIndex : selectable[0];
+    acceptItem(input, target);
+    event.preventDefault();
+    return true;
+  }
+
+  if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
+    if (selectedIndex < 0) return false;
+    acceptItem(input, selectedIndex);
+    event.preventDefault();
+    return true;
+  }
+
+  return false;
+}
+
+export function initSlashAutocomplete() {
+  const popup = popupEl();
+  if (!popup || popup.dataset.bound === '1') return;
+  popup.dataset.bound = '1';
+  // pointerdown, not click: the textarea loses focus on the tap, and a click
+  // handler would race the focus-driven close.
+  popup.addEventListener('pointerdown', (event) => {
+    const row = event.target?.closest?.('.slash-item');
+    if (!row || !openState) return;
+    event.preventDefault();
+    const input = document.getElementById('msg-input');
+    if (input) acceptItem(input, Number(row.dataset.index));
+  });
+  document.addEventListener('pointerdown', (event) => {
+    if (!openState) return;
+    const target = event.target;
+    if (popupEl()?.contains(target)) return;
+    if (document.getElementById('msg-input')?.contains?.(target)) return;
+    closeSlashAutocomplete();
+  });
+}

package/server/public/app/slash-commands.mjs

@@ -0,0 +1,183 @@
+// The composer's slash-command registry: the one place a command declares its
+// name, description, and completion structure. DOM-free by design — the menu
+// (slash-autocomplete.mjs) renders whatever completionsFor() returns, and the
+// typo guard in sendMessage() asks matchesKnownCommand(). Adding a command is
+// one entry here plus its intercept in sendMessage.
+
+export const SLASH_COMMANDS = [
+  {
+    name: 'compact',
+    description: 'Branch to a fresh conversation seeded with summary context',
+    usage: '/compact',
+    subcommands: [],
+    argHints: [],
+  },
+  {
+    name: 'preview',
+    description: 'Publish a port or folder on the public preview URL',
+    usage: '/preview <port|dir> [label]',
+    subcommands: [
+      { name: 'list', description: 'List live previews' },
+      { name: 'close', description: 'Close a preview', dynamicArgs: 'previews' },
+    ],
+    argHints: [
+      { hint: '<port>', description: 'proxy an already-running dev server' },
+      { hint: '<dir>', description: 'serve a folder statically' },
+    ],
+  },
+];
+
+function commandByName(name) {
+  const lower = String(name || '').toLowerCase();
+  return SLASH_COMMANDS.find((command) => command.name === lower) || null;
+}
+
+/**
+ * True when the first token would actually parse as a registered command.
+ * Exact name only: the guard runs at send time, where a prefix the user never
+ * completed is precisely the typo being guarded against.
+ */
+export function matchesKnownCommand(text) {
+  const trimmed = String(text || '');
+  if (!trimmed.startsWith('/')) return false;
+  const first = trimmed.slice(1).split(/\s+/, 1)[0] || '';
+  return commandByName(first) !== null;
+}
+
+export const UNKNOWN_COMMAND_REPEAT_WINDOW_MS = 8000;
+
+/**
+ * Warn-once decision for the unknown-command send guard. Pure: the composer
+ * holds the slot and passes it back on the next attempt. Returns
+ * `{ warn, notice?, slot }` — warn=true blocks the send and stores `slot`;
+ * warn=false lets it through (and clears the slot).
+ *
+ * Only single-line, attachment-free text that starts with "/" and parses as no
+ * known command is guarded: multi-line text is clearly prose, and an
+ * attachment send was never a command.
+ */
+export function evaluateUnknownCommandGuard(text, { slot = null, now = Date.now(), hasAttachments = false } = {}) {
+  const value = String(text || '');
+  if (hasAttachments || !value.startsWith('/') || value.includes('\n') || matchesKnownCommand(value)) {
+    return { warn: false, slot: null };
+  }
+  if (slot?.text === value && now - slot.at <= UNKNOWN_COMMAND_REPEAT_WINDOW_MS) {
+    return { warn: false, slot: null };
+  }
+  return {
+    warn: true,
+    notice: `Unknown command ${value.split(/\s+/, 1)[0]} — press send again to send as text.`,
+    slot: { text: value, at: now },
+  };
+}
+
+function commandItems(prefix) {
+  const lower = prefix.toLowerCase();
+  return SLASH_COMMANDS
+    .filter((command) => command.name.startsWith(lower))
+    .map((command) => ({
+      kind: 'command',
+      insert: `/${command.name}`,
+      display: `/${command.name}`,
+      description: command.description,
+    }));
+}
+
+function subcommandItems(command, prefix, previews, conversationId) {
+  const lower = prefix.toLowerCase();
+  const items = command.subcommands
+    .filter((sub) => sub.name.startsWith(lower))
+    .map((sub) => ({
+      kind: 'subcommand',
+      insert: sub.name,
+      display: sub.name,
+      description: sub.description,
+    }));
+  // Hint rows only while nothing has been typed yet: once the user starts a
+  // token they have chosen a shape, and a non-insertable row would sit in the
+  // way of Tab-accepting a real match.
+  if (!prefix) {
+    for (const hint of command.argHints) {
+      items.push({
+        kind: 'hint',
+        insert: null,
+        display: hint.hint,
+        description: hint.description,
+      });
+    }
+  }
+  return items;
+}
+
+function previewTokenItems(prefix, previews, conversationId) {
+  const lower = prefix.toLowerCase();
+  const entries = (Array.isArray(previews) ? previews : [])
+    .filter((entry) => entry && typeof entry.token === 'string')
+    .filter((entry) => entry.token.startsWith(lower));
+  const convId = String(conversationId || '').trim();
+  // This conversation's previews first — closing what you just made is the
+  // common case; foreign ones follow with their owning session shown.
+  const mine = entries.filter((entry) => convId && entry.conversationId === convId);
+  const others = entries.filter((entry) => !(convId && entry.conversationId === convId));
+  return [...mine, ...others].map((entry) => ({
+    kind: 'preview-token',
+    insert: entry.token,
+    display: entry.token.slice(0, 8),
+    description: mine.includes(entry) || !entry.conversationId
+      ? String(entry.label || '')
+      : `${entry.label || ''} · session ${String(entry.conversationId).slice(0, 8)}`,
+  }));
+}
+
+/**
+ * Completions for the caret position, or null when the menu must close.
+ *
+ * Only the message head is completed: the command grammar lives entirely
+ * before the free-text label, so completion stops once the caret moves past
+ * the token the grammar can still predict. `replaceRange` is [start, end) in
+ * the input string; accepting a completion replaces that range with
+ * `item.insert` plus a trailing space.
+ */
+export function completionsFor(text, caret, { previews = [], conversationId = '' } = {}) {
+  const value = String(text || '');
+  const position = Number.isFinite(caret) ? caret : value.length;
+  // Position-0 gating: a slash anywhere else is a path, never a command.
+  if (!value.startsWith('/')) return null;
+  // Completion only makes sense while the caret is in the head of the message.
+  if (value.slice(0, position).includes('\n')) return null;
+
+  const head = value.slice(0, position);
+  const afterSlash = head.slice(1);
+  const tokens = afterSlash.split(/\s+/);
+
+  // Still typing the command name (no space yet).
+  if (tokens.length === 1) {
+    const items = commandItems(tokens[0]);
+    if (!items.length) return null;
+    return { items, replaceRange: [0, position] };
+  }
+
+  const command = commandByName(tokens[0]);
+  if (!command) return null;
+
+  const tokenStart = head.length - tokens[tokens.length - 1].length;
+
+  // Typing the second token: subcommands + shape hints.
+  if (tokens.length === 2) {
+    const items = subcommandItems(command, tokens[1], previews, conversationId);
+    if (!items.length) return null;
+    return { items, replaceRange: [tokenStart, position] };
+  }
+
+  // Third token of "/preview close ": live preview tokens.
+  if (tokens.length === 3) {
+    const sub = command.subcommands.find((entry) => entry.name === tokens[1].toLowerCase());
+    if (sub?.dynamicArgs === 'previews') {
+      const items = previewTokenItems(tokens[2], previews, conversationId);
+      if (!items.length) return null;
+      return { items, replaceRange: [tokenStart, position] };
+    }
+  }
+
+  return null;
+}