@oar-sh/oar 0.9.16 → 0.9.18

package/server/public/app/claude-api-settings-ui.js

@@ -0,0 +1,362 @@
+// Settings → Providers → Claude API: Claude chats on an API key from the
+// Claude Console. The key (written, never read back: the tab only says that
+// one is saved), the switch, the default model and the monthly spend cap.
+// The relay asks Anthropic for the key's models when a key is saved, when the
+// provider is switched on again, and on Refresh models. Commit attribution,
+// the background command limit, the effort levels and the compaction window
+// are the Claude tab's: a link there says so.
+
+import { loadClaudeApiSettings, refreshModelVariantCatalog, updateClaudeApiSettings } from './api-client.js';
+import { selectSettingsTab } from './settings-tabs.js';
+import { showTransientRelayNotice } from './store.js';
+
+export const CLAUDE_API_BILLING_URL = 'https://platform.claude.com/settings/billing';
+export const CLAUDE_API_LIMITS_URL = 'https://platform.claude.com/settings/limits';
+export const CLAUDE_API_KEYS_URL = 'https://platform.claude.com/settings/keys';
+
+let updateInFlight = false;
+let inputsDirty = false;
+// The default model was picked by hand since the tab was filled. Only such a
+// pick, from the key's own list, is saved as the default: a save that sends
+// whatever the select shows would pin a model the key may not have (before
+// discovery the select shows the Claude tab's list).
+let modelChosen = false;
+let state = {
+  configured: false,
+  enabled: false,
+  model: '',
+  availableModels: [],
+  discovered: false,
+  monthlyCapUsd: null,
+  discoveryError: null,
+};
+const listeners = new Set();
+
+const CONTROL_IDS = [
+  'claude-api-key-input',
+  'claude-api-model-select',
+  'claude-api-monthly-cap-input',
+  'claude-api-enabled-toggle',
+  'claude-api-save-btn',
+  'claude-api-remove-btn',
+  'claude-api-refresh-btn',
+];
+
+function element(id) {
+  return document.getElementById(id);
+}
+
+function ensureInputTracking() {
+  for (const id of ['claude-api-key-input', 'claude-api-model-select', 'claude-api-monthly-cap-input']) {
+    const input = element(id);
+    if (!input || input.dataset.claudeApiDirtyTracking === '1') continue;
+    input.dataset.claudeApiDirtyTracking = '1';
+    input.addEventListener(input.tagName === 'SELECT' ? 'change' : 'input', () => {
+      inputsDirty = true;
+      if (id === 'claude-api-monthly-cap-input') showCapError('');
+      if (id === 'claude-api-model-select') modelChosen = true;
+    });
+  }
+}
+
+function setControlsDisabled(disabled) {
+  for (const id of CONTROL_IDS) {
+    const control = element(id);
+    if (control) control.disabled = disabled;
+  }
+}
+
+function fillModelSelect(select) {
+  const models = Array.from(new Set([state.model, ...state.availableModels].filter(Boolean)));
+  select.innerHTML = '';
+  for (const model of models) {
+    const option = document.createElement('option');
+    option.value = model;
+    option.textContent = model;
+    select.appendChild(option);
+  }
+  select.value = state.model;
+}
+
+/** The cap as the field shows it: "25", "12.5", or '' for none. */
+export function claudeApiCapInputText(capUsd) {
+  const value = Number(capUsd);
+  return Number.isFinite(value) && value > 0 ? String(value) : '';
+}
+
+/**
+ * The cap field's text as the relay takes it: `{ ok: true, capUsd }` (null:
+ * no cap), else `{ ok: false, error }`. The relay checks it again.
+ */
+export function parseClaudeApiCapInput(text) {
+  const value = String(text ?? '').trim();
+  if (!value) return { ok: true, capUsd: null };
+  if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(value) || !(Number(value) > 0)) {
+    return { ok: false, error: 'The monthly cap must be an amount of US dollars above 0 with at most two decimals, or empty for no cap.' };
+  }
+  return { ok: true, capUsd: Number(value) };
+}
+
+// Why the cap field's text is refused, under the field; '' clears it.
+function showCapError(text) {
+  const message = element('claude-api-monthly-cap-error');
+  const input = element('claude-api-monthly-cap-input');
+  if (message) {
+    message.textContent = text;
+    message.hidden = !text;
+  }
+  if (input) {
+    if (text) input.setAttribute('aria-invalid', 'true');
+    else input.removeAttribute('aria-invalid');
+  }
+}
+
+/** The tab's status line: `{ text, state }`. */
+export function claudeApiSettingsStatus(settings = {}) {
+  // Anthropic refused the key when it was saved or its models refreshed: the
+  // key stays saved, and the tab says why it does not work yet.
+  if (settings.configured === true && settings.discoveryError?.error) {
+    const changed = settings.discoveryError.defaultModelChanged;
+    const note = changed?.from && changed?.to
+      ? ` Until it lists this key's models, the default model is ${changed.to} (was ${changed.from}).`
+      : '';
+    return { text: `API key saved, but Anthropic refused it: ${settings.discoveryError.error}${note}`, state: 'error' };
+  }
+  if (settings.configured === true && settings.enabled === true) {
+    return {
+      text: 'API key saved. Claude API is on: pick it in New Chat, or switch a Claude chat to the API key.',
+      state: 'active',
+    };
+  }
+  if (settings.configured === true) {
+    return { text: 'API key saved, Claude API is off. Switch it on to offer it in New Chat.', state: 'saved' };
+  }
+  return { text: 'No API key saved. Claude chats run on the relay host\'s Claude login.', state: 'unconfigured' };
+}
+
+export function claudeApiSettingsState() {
+  return state;
+}
+
+/** Called with the tab's state whenever it changes (the composer's toggle listens). */
+export function onClaudeApiSettingsChange(listener) {
+  if (typeof listener !== 'function') return () => {};
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function applyClaudeApiSettingsState(settings = {}, { resetInputs = false } = {}) {
+  if (typeof document !== 'undefined') ensureInputTracking();
+  const available = Array.isArray(settings?.availableModels)
+    ? settings.availableModels.map((value) => String(value || '').trim()).filter(Boolean)
+    : state.availableModels;
+  const cap = Number(settings?.monthlyCapUsd);
+  state = {
+    configured: settings?.configured === true,
+    enabled: settings?.configured === true && settings?.enabled === true,
+    model: String(settings?.model || state.model || '').trim(),
+    availableModels: available.length ? available : state.availableModels,
+    discovered: settings?.discovered === true,
+    monthlyCapUsd: Number.isFinite(cap) && cap > 0 ? cap : null,
+    // From a save's or a refresh's answer; a plain read keeps the last one.
+    discoveryError: settings?.configured !== true
+      ? null
+      : (Object.prototype.hasOwnProperty.call(settings || {}, 'discoveryError') ? (settings.discoveryError || null) : (state.discoveryError || null)),
+  };
+  for (const listener of listeners) {
+    try { listener(state); } catch {}
+  }
+  if (typeof document === 'undefined') return state;
+  const keepInputs = inputsDirty && !resetInputs;
+  const keyInput = element('claude-api-key-input');
+  if (keyInput && !keepInputs) {
+    // Never filled from the relay: it has no key to give back.
+    keyInput.value = '';
+    keyInput.placeholder = state.configured ? 'Saved API key (enter to replace)' : 'Claude Console API key…';
+  }
+  const modelSelect = element('claude-api-model-select');
+  if (modelSelect && !keepInputs) fillModelSelect(modelSelect);
+  const capInput = element('claude-api-monthly-cap-input');
+  if (capInput && !keepInputs) {
+    capInput.value = claudeApiCapInputText(state.monthlyCapUsd);
+    showCapError('');
+  }
+  if (resetInputs) {
+    inputsDirty = false;
+    modelChosen = false;
+  }
+  const toggle = element('claude-api-enabled-toggle');
+  if (toggle) {
+    toggle.checked = state.enabled;
+    toggle.disabled = updateInFlight || !state.configured;
+  }
+  const removeButton = element('claude-api-remove-btn');
+  if (removeButton) removeButton.disabled = updateInFlight || !state.configured;
+  const refreshButton = element('claude-api-refresh-btn');
+  if (refreshButton) refreshButton.disabled = updateInFlight || !state.enabled;
+  const modelsNote = element('claude-api-models-status');
+  if (modelsNote) {
+    modelsNote.textContent = state.configured && !state.discovered
+      ? 'Not listed by Anthropic yet: these are the Claude tab\'s models until the key\'s list is read.'
+      : '';
+    modelsNote.hidden = !modelsNote.textContent;
+  }
+  const status = element('claude-api-settings-status');
+  if (status) {
+    const { text, state: statusState } = claudeApiSettingsStatus(state);
+    status.textContent = text;
+    status.dataset.state = statusState;
+  }
+  window.syncAutoModelAvailability?.();
+  return state;
+}
+
+export async function refreshClaudeApiSettingsState() {
+  const settings = await loadClaudeApiSettings();
+  if (!settings) return null;
+  return applyClaudeApiSettingsState(settings);
+}
+
+/** Called when the Settings modal opens. */
+export async function syncClaudeApiSettingsInputs() {
+  inputsDirty = false;
+  modelChosen = false;
+  ensureInputTracking();
+  const status = element('claude-api-settings-status');
+  const settings = await refreshClaudeApiSettingsState();
+  if (!settings && status) {
+    status.textContent = 'Unable to load Claude API settings.';
+    status.dataset.state = 'error';
+  }
+}
+
+async function runUpdate(payload, { successText, failureText, resetInputs = false }) {
+  if (updateInFlight) return null;
+  updateInFlight = true;
+  setControlsDisabled(true);
+  try {
+    const result = await updateClaudeApiSettings(payload);
+    if (!result) throw new Error(failureText);
+    applyClaudeApiSettingsState(result, { resetInputs });
+    const text = typeof successText === 'function' ? successText(result) : successText;
+    showTransientRelayNotice(result.warning ? `${text} ${result.warning}` : text, result.warning ? 8000 : 4000);
+    return result;
+  } catch (error) {
+    // A refused key (a login token, an Admin key) or a refused removal (409)
+    // says why; the relay never quotes the key back.
+    alert(error?.message || failureText);
+    return null;
+  } finally {
+    updateInFlight = false;
+    setControlsDisabled(false);
+    applyClaudeApiSettingsState(state);
+  }
+}
+
+export async function saveClaudeApiSettings() {
+  const apiKey = String(element('claude-api-key-input')?.value || '').trim();
+  if (!apiKey && !state.configured) {
+    alert('Enter an API key from the Claude Console.');
+    return;
+  }
+  const capInput = element('claude-api-monthly-cap-input');
+  // A number field reads '' for text it cannot parse: that is not "no cap".
+  const cap = capInput?.validity?.badInput
+    ? parseClaudeApiCapInput('not a number')
+    : parseClaudeApiCapInput(capInput?.value);
+  showCapError(cap.ok ? '' : cap.error);
+  if (!cap.ok) {
+    capInput?.focus?.();
+    return;
+  }
+  // A pick from the key's discovered list; otherwise the relay keeps the
+  // default it has, or derives one from the key's models.
+  const model = modelChosen && state.discovered
+    ? String(element('claude-api-model-select')?.value || '').trim()
+    : '';
+  await runUpdate({
+    apiKey,
+    ...(model ? { model } : {}),
+    monthlyCapUsd: cap.capUsd,
+    enabled: state.configured ? state.enabled : true,
+  }, {
+    successText: (result) => (result.model ? `Claude API settings saved for ${result.model}.` : 'Claude API settings saved.'),
+    failureText: 'Failed to save Claude API settings.',
+    resetInputs: true,
+  });
+}
+
+export async function toggleClaudeApiProvider(enabled) {
+  if (enabled && !state.configured) {
+    applyClaudeApiSettingsState(state);
+    alert('Save an API key from the Claude Console before switching Claude API on.');
+    return;
+  }
+  await runUpdate({ enabled: enabled === true }, {
+    successText: (result) => (result.enabled ? 'Claude API switched on.' : 'Claude API switched off.'),
+    failureText: 'Failed to update the Claude API provider.',
+  });
+}
+
+export async function removeClaudeApiSettings() {
+  if (!state.configured) return;
+  if (!confirm('Remove the saved Claude API key?')) return;
+  await runUpdate({ remove: true }, {
+    successText: 'Claude API key removed.',
+    failureText: 'Failed to remove the Claude API key.',
+    resetInputs: true,
+  });
+}
+
+/** Asks Anthropic for the key's models again (the relay's model refresh). */
+export async function refreshClaudeApiModels() {
+  if (updateInFlight || !state.enabled) return;
+  updateInFlight = true;
+  setControlsDisabled(true);
+  try {
+    const refreshed = await refreshModelVariantCatalog();
+    const discovery = refreshed?.claudeApiModelDiscovery || null;
+    await refreshClaudeApiSettingsState();
+    if (discovery && !discovery.skipped) {
+      state = {
+        ...state,
+        discoveryError: discovery.ok === false && discovery.stale !== true
+          ? { error: discovery.error || 'Claude API model discovery failed', code: discovery.code || null }
+          : (discovery.ok === true ? null : state.discoveryError),
+      };
+    }
+    if (!refreshed) {
+      showTransientRelayNotice('Could not refresh the models.', 6000);
+    } else if (discovery && discovery.ok === false && !discovery.skipped) {
+      showTransientRelayNotice(`Claude API model discovery failed. The stored models were kept: ${discovery.error || 'unknown error'}`, 8000);
+    } else {
+      showTransientRelayNotice('Claude API models refreshed.', 4000);
+    }
+  } finally {
+    updateInFlight = false;
+    setControlsDisabled(false);
+    applyClaudeApiSettingsState(state);
+  }
+}
+
+/** The cap refusal's button: the cap field, ready to raise or empty. */
+export function focusClaudeApiCapInput() {
+  const input = element('claude-api-monthly-cap-input');
+  if (!input) return;
+  input.scrollIntoView?.({ block: 'center' });
+  input.focus?.();
+}
+
+// The settings Claude API chats share with Claude chats live on the Claude
+// tab: one place to change them.
+export function openClaudeTabFromClaudeApi() {
+  selectSettingsTab('providers', 'claude');
+}
+
+export function __resetClaudeApiSettingsUiForTests() {
+  updateInFlight = false;
+  inputsDirty = false;
+  modelChosen = false;
+  state = { configured: false, enabled: false, model: '', availableModels: [], discovered: false, monthlyCapUsd: null, discoveryError: null };
+  listeners.clear();
+}

package/server/public/app/claude-billing-toggle-ui.js

@@ -0,0 +1,224 @@
+// The composer's billing toggle (claude-billing-toggle.mjs) on the page: a
+// row above the composer, under the lock note, in Claude SDK chats. A press
+// moves the open chat between the subscription and the saved API key through
+// the relay's billing route; the relay's answer and its `conversation_billing`
+// events (usage-limit-ui.js keeps them per chat) redraw it.
+
+import { switchConversationBilling } from './api-client.js';
+import { claudeApiSettingsState, onClaudeApiSettingsChange } from './claude-api-settings-ui.js';
+import {
+  CLAUDE_BILLING_CACHE_WARNING,
+  claudeBillingSwitchedText,
+  claudeBillingToggleModel,
+} from './claude-billing-toggle.mjs';
+import { conversations, currentConvId, showTransientRelayNotice } from './store.js';
+import { conversationBillingState, onConversationBillingChange, setConversationBilling } from './usage-limit-ui.js';
+
+const ROW_ID = 'claude-billing-toggle';
+
+// The relay's refusals of a switch that say the target is closed for now: the
+// toggle closes that side with the relay's reason until the next billing event.
+const CLOSING_REFUSALS = new Set([
+  'CLAUDE_API_CAP_REACHED',
+  'CLAUDE_API_NOT_CONFIGURED',
+  'CLAUDE_BILLING_MODEL_UNAVAILABLE',
+  'CLAUDE_BILLING_HISTORY',
+]);
+
+let deps = {};
+// The chats this page has a switch on its way for; one per chat.
+const inFlightConversationIds = new Set();
+// Chat → what the relay said it may switch to before this page closed the
+// side a refusal named: given back when the Claude API tab changes.
+const switchableBeforeRefusal = new Map();
+// The Claude API tab's state as last seen, so that only a change reopens.
+let claudeApiSettingsKey = '';
+
+function settingsKey(settings) {
+  return JSON.stringify([
+    settings?.configured === true,
+    settings?.enabled === true,
+    String(settings?.model || ''),
+    Array.isArray(settings?.availableModels) ? settings.availableModels : [],
+    settings?.monthlyCapUsd ?? null,
+  ]);
+}
+// The chat this page just moved to the key: the toggle says what the first
+// turn there costs until another chat is opened.
+let warnCacheConversationId = '';
+let renderedConversationId = '';
+
+function conversationProvider(conversationId) {
+  const conversation = conversations[conversationId] || null;
+  return String(conversation?.runtimeProviderType || conversation?.runtime_provider_type || '').trim().toLowerCase();
+}
+
+// A switch changes the chat's provider: the composer's model list, the lock
+// note and the list pill follow it.
+function followBilling(conversationId, billing) {
+  const provider = String(billing?.provider || '').trim().toLowerCase();
+  if (provider !== 'claude' && provider !== 'claude-api') return;
+  const conversation = conversations[conversationId];
+  if (!conversation || conversationProvider(conversationId) === provider) return;
+  conversations[conversationId] = { ...conversation, runtimeProviderType: provider };
+  if (provider !== 'claude-api' && warnCacheConversationId === conversationId) warnCacheConversationId = '';
+  try { deps.onConversationProviderChanged?.(conversationId, provider); } catch {}
+}
+
+function optionButton(option, conversationId) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'claude-billing-option';
+  button.dataset.billing = option.value;
+  button.textContent = option.label;
+  button.setAttribute('aria-pressed', option.pressed ? 'true' : 'false');
+  // Not `disabled`: a press on an unavailable side says why (a phone has no
+  // tooltip to read).
+  if (!option.pressed && !option.available) button.setAttribute('aria-disabled', 'true');
+  const title = option.reason || (!option.pressed && option.value === 'claude-api' ? CLAUDE_BILLING_CACHE_WARNING : '');
+  if (title) button.title = title;
+  button.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (option.pressed) return;
+    if (!option.available) {
+      showTransientRelayNotice(option.reason, 7000);
+      return;
+    }
+    void switchClaudeBilling(conversationId, option.value);
+  });
+  return button;
+}
+
+export function renderClaudeBillingToggle() {
+  if (typeof document === 'undefined') return;
+  const row = document.getElementById(ROW_ID);
+  if (!row) return;
+  const conversationId = String(currentConvId || '').trim();
+  if (conversationId !== renderedConversationId) {
+    renderedConversationId = conversationId;
+    if (warnCacheConversationId && warnCacheConversationId !== conversationId) warnCacheConversationId = '';
+  }
+  const shared = (() => {
+    try { return deps.isSharedReaderMode?.() === true; } catch { return false; }
+  })();
+  const model = conversationId && !shared
+    ? claudeBillingToggleModel({
+      providerType: conversationProvider(conversationId),
+      billing: conversationBillingState(conversationId),
+      claudeApi: claudeApiSettingsState(),
+      inFlight: inFlightConversationIds.has(conversationId),
+      warnCache: warnCacheConversationId === conversationId,
+    })
+    : { visible: false };
+  if (!model.visible) {
+    row.hidden = true;
+    row.replaceChildren();
+    delete row.dataset.billing;
+    return;
+  }
+  const label = document.createElement('span');
+  label.className = 'claude-billing-label';
+  label.id = 'claude-billing-toggle-label';
+  label.textContent = 'Billing';
+  const group = document.createElement('div');
+  group.className = 'claude-billing-options';
+  group.setAttribute('role', 'group');
+  group.setAttribute('aria-labelledby', 'claude-billing-toggle-label');
+  group.append(...model.options.map((option) => optionButton(option, conversationId)));
+  const status = document.createElement('span');
+  status.className = 'claude-billing-status';
+  status.setAttribute('role', 'status');
+  status.setAttribute('aria-live', 'polite');
+  status.textContent = model.status;
+  if (model.statusKind) status.dataset.kind = model.statusKind;
+  row.replaceChildren(label, group, status);
+  row.dataset.billing = model.current;
+  row.hidden = false;
+}
+
+// A 409 carries no billing: the side it refused is closed here with the
+// relay's reason, so a second press does not ask again. The next
+// conversation_billing for the chat (a switch, or the cap flipping) replaces
+// it; a change on the Claude API tab (a key, the switch, the models, the cap)
+// opens it again, since the relay sends no billing event for those.
+function closeRefusedSide(conversationId, to, result) {
+  const code = String(result?.code || '').trim().toUpperCase();
+  if (!CLOSING_REFUSALS.has(code)) return;
+  const known = conversationBillingState(conversationId);
+  if (!known || String(known.switchable?.to || '') !== to) return;
+  if (known.switchable?.refused !== true) switchableBeforeRefusal.set(conversationId, known.switchable);
+  setConversationBilling(conversationId, {
+    ...known,
+    switchable: {
+      to,
+      allowed: false,
+      code,
+      reason: String(result?.error || '').trim() || null,
+      refused: true,
+    },
+  });
+}
+
+function reopenRefusedSides() {
+  for (const [conversationId, before] of Array.from(switchableBeforeRefusal.entries())) {
+    switchableBeforeRefusal.delete(conversationId);
+    const known = conversationBillingState(conversationId);
+    if (known?.switchable?.refused !== true) continue;
+    setConversationBilling(conversationId, { ...known, switchable: before });
+  }
+}
+
+/** Moves a chat to `to` ('claude' | 'claude-api'); answers the relay's result. */
+export async function switchClaudeBilling(conversationId, to) {
+  const id = String(conversationId || '').trim();
+  if (!id || inFlightConversationIds.has(id)) return null;
+  inFlightConversationIds.add(id);
+  renderClaudeBillingToggle();
+  let result = null;
+  try {
+    result = await switchConversationBilling(id, { to, by: 'user' });
+  } finally {
+    inFlightConversationIds.delete(id);
+  }
+  if (!result?.ok) {
+    showTransientRelayNotice(`Not switched: ${result?.error || 'the relay refused it.'}`, 7000);
+    closeRefusedSide(id, to, result);
+    renderClaudeBillingToggle();
+    return result;
+  }
+  if (result.changed && result.provider === 'claude-api') warnCacheConversationId = id;
+  if (result.billing) setConversationBilling(id, result.billing);
+  else followBilling(id, { provider: result.provider });
+  if (result.changed) showTransientRelayNotice(claudeBillingSwitchedText(result.provider), 6000);
+  renderClaudeBillingToggle();
+  return result;
+}
+
+export function initClaudeBillingToggle(options = {}) {
+  deps = options && typeof options === 'object' ? options : {};
+  onConversationBillingChange((conversationId, billing) => {
+    // The relay's own word replaces this page's patch.
+    if (billing?.switchable?.refused !== true) switchableBeforeRefusal.delete(conversationId);
+    if (billing) followBilling(conversationId, billing);
+    if (conversationId === String(currentConvId || '').trim()) renderClaudeBillingToggle();
+  });
+  claudeApiSettingsKey = settingsKey(claudeApiSettingsState());
+  onClaudeApiSettingsChange((settings) => {
+    const key = settingsKey(settings);
+    if (key !== claudeApiSettingsKey) {
+      claudeApiSettingsKey = key;
+      reopenRefusedSides();
+    }
+    renderClaudeBillingToggle();
+  });
+  renderClaudeBillingToggle();
+}
+
+export function __resetClaudeBillingToggleForTests() {
+  deps = {};
+  inFlightConversationIds.clear();
+  switchableBeforeRefusal.clear();
+  claudeApiSettingsKey = '';
+  warnCacheConversationId = '';
+  renderedConversationId = '';
+}