@oar-sh/oar 0.9.17 → 0.9.19

package/server/public/app/relay-error-ctas.mjs

@@ -16,6 +16,14 @@
 const CLAUDE_SETTINGS_CTA = Object.freeze([
   Object.freeze({ action: 'open-claude-settings', label: 'Claude settings' }),
 ]);
+const CLAUDE_API_SETTINGS_CTA = Object.freeze([
+  Object.freeze({ action: 'open-claude-api-settings', label: 'Claude API settings' }),
+]);
+const SWITCH_TO_SUBSCRIPTION_CTA = Object.freeze({ action: 'switch-claude-billing-to-subscription', label: 'Switch to subscription' });
+const CLAUDE_API_UNAVAILABLE_CTA = Object.freeze([
+  Object.freeze({ action: 'open-claude-api-settings', label: 'Claude API settings' }),
+  SWITCH_TO_SUBSCRIPTION_CTA,
+]);
 
 const RELAY_ERROR_CTAS = Object.freeze({
   'grok-cli-missing': Object.freeze([
@@ -44,6 +52,31 @@ const RELAY_ERROR_CTAS = Object.freeze({
     Object.freeze({ action: 'open-deepseek-top-up', label: 'Top up DeepSeek' }),
     Object.freeze({ action: 'open-deepseek-settings', label: 'DeepSeek settings' }),
   ]),
+  // A Claude API row failed closed at the claim (server-runtime.mjs,
+  // claudeApiClaimCheck): no key or the provider switched off, or this
+  // month's cap reached. The way out is the tab (at its cap field for the
+  // cap), or the subscription, which the cap never blocks.
+  'claude-api-not-configured': CLAUDE_API_UNAVAILABLE_CTA,
+  'claude-api-cap-reached': Object.freeze([
+    Object.freeze({ action: 'open-claude-api-cap', label: 'Claude API settings' }),
+    SWITCH_TO_SUBSCRIPTION_CTA,
+  ]),
+  // A turn the Claude API refused (claude-api-backend.mjs, describeClaudeApiFailure).
+  'claude-api-key': CLAUDE_API_SETTINGS_CTA,
+  'claude-api-key-source': CLAUDE_API_SETTINGS_CTA,
+  'claude-api-credit': Object.freeze([
+    Object.freeze({ action: 'open-claude-api-billing', label: 'Add funds' }),
+    Object.freeze({ action: 'open-claude-api-settings', label: 'Claude API settings' }),
+  ]),
+  'claude-api-billing': Object.freeze([
+    Object.freeze({ action: 'open-claude-api-billing', label: 'Console billing' }),
+  ]),
+  'claude-api-spend-limit': Object.freeze([
+    Object.freeze({ action: 'open-claude-api-limits', label: 'Console limits' }),
+  ]),
+  'claude-api-rate-limit': Object.freeze([
+    Object.freeze({ action: 'open-claude-api-limits', label: 'Console limits' }),
+  ]),
 });
 
 const STABLE_CODE_PATTERN = /error code:\s*relay\.([a-z0-9-]+)/i;
@@ -81,3 +114,20 @@ export function relayErrorCtaActionsForCode(code) {
   const normalized = String(code || '').trim().toLowerCase().replace(/^relay\./, '');
   return RELAY_ERROR_CTAS[normalized] || [];
 }
+
+export const START_ON_SUBSCRIPTION_ACTION = 'start-new-chat-on-subscription';
+
+/**
+ * The buttons of New Chat when the relay refused to start a Claude API chat
+ * (its 409 code, CLAUDE_API_CAP_REACHED or CLAUDE_API_NOT_CONFIGURED; nothing
+ * was bound): the transcript's buttons for that code, where "Switch to
+ * subscription" becomes "Start on subscription" (the same new chat on the
+ * Claude provider), offered only when New Chat offers the Claude provider.
+ */
+export function newChatClaudeApiRefusalActions(code, { subscriptionOffered = false } = {}) {
+  const normalized = String(code || '').trim().toLowerCase().replace(/_/g, '-');
+  return relayErrorCtaActionsForCode(normalized).flatMap((item) => {
+    if (item.action !== 'switch-claude-billing-to-subscription') return [item];
+    return subscriptionOffered ? [{ action: START_ON_SUBSCRIPTION_ACTION, label: 'Start on subscription' }] : [];
+  });
+}

package/server/public/app/relay-schedules-ui.js

@@ -164,7 +164,7 @@ export function syncRelayScheduleHeader() {
   }
   const next = nextScheduledAt(mine);
   const nextText = next ? new Date(next).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
-  line.innerHTML = `<button type="button" class="relay-watch-chip relay-schedule-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-schedule-panel" title="Prompts the relay queues at set times (agents set them with remote_relay schedule)">⏰ ${escHtml(chipText)}${nextText ? ` <span class="relay-watch-hint">next ${escHtml(nextText)}</span>` : ''}</button>`;
+  line.innerHTML = `<button type="button" class="relay-watch-chip relay-schedule-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-schedule-panel" title="Prompts the relay queues at set times (agents set them with relay_tool schedule)">⏰ ${escHtml(chipText)}${nextText ? ` <span class="relay-watch-hint">next ${escHtml(nextText)}</span>` : ''}</button>`;
   line.hidden = false;
   panel.innerHTML = panelOpen ? renderSchedulePanelHtml(schedules, id, { conversations, escHtml }) : '';
   panel.hidden = !panelOpen;

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

@@ -56,6 +56,7 @@ import { selectSettingsTab } from './settings-tabs.js';
 import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { syncDeepSeekSettingsInputs } from './deepseek-settings-ui.js';
+import { syncClaudeApiSettingsInputs } from './claude-api-settings-ui.js';
 
 export {
   applyDeepSeekSettingsState,
@@ -65,6 +66,15 @@ export {
   saveDeepSeekSettings,
   toggleDeepSeekProvider,
 } from './deepseek-settings-ui.js';
+export {
+  applyClaudeApiSettingsState,
+  openClaudeTabFromClaudeApi,
+  refreshClaudeApiModels,
+  refreshClaudeApiSettingsState,
+  removeClaudeApiSettings,
+  saveClaudeApiSettings,
+  toggleClaudeApiProvider,
+} from './claude-api-settings-ui.js';
 import { openClaudeCloudSettingsSection } from './claude-cloud-settings-ui.js';
 import { refreshCliInstallSections } from './cli-install-ui.js';
 import { refreshUpdateSection } from './update-ui.js';
@@ -1960,6 +1970,7 @@ export function openSettingsModal(tab, providerTab) {
   ensureCursorSettingsInputTracking();
   void syncCursorSettingsInputs();
   void syncDeepSeekSettingsInputs();
+  void syncClaudeApiSettingsInputs();
   void refreshCursorAllowanceState();
   void refreshCursorDashboardTokenState();
   void refreshGrokAllowanceState();

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

@@ -4,7 +4,7 @@ const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
 const SETTINGS_TABS = ['general', 'providers', 'relays', 'previews', 'shares', 'notifications', 'features'];
 // 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', 'claude-cloud', 'grok', 'cursor', 'deepseek'];
+const SETTINGS_PROVIDER_TABS = ['copilot', 'openai', 'claude', 'claude-api', 'claude-cloud', 'grok', 'cursor', 'deepseek'];
 
 let settingsTabsBound = false;
 

package/server/public/app/socket-handlers.js

@@ -66,7 +66,7 @@ import { updateProviderReadinessInputs } from './provider-readiness.mjs';
 import { applyCliInstallState } from './cli-install-ui.js';
 import { renderUpdateSection } from './update-ui.js';
 import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
-import { applyClaudeUsageLimit, applyUsageLimitPause } from './usage-limit-ui.js';
+import { applyClaudeUsageLimit, applyConversationBilling, applyUsageLimitPause } from './usage-limit-ui.js';
 import {
   showThinking,
   removeThinking,
@@ -154,6 +154,7 @@ let deps = null;
  * @property {(payload?: object) => void} applyClaudeSettingsState
  * @property {(payload?: object) => void} applyGrokSettingsState
  * @property {(payload?: object) => void} applyDeepSeekSettingsState
+ * @property {(payload?: object) => void} applyClaudeApiSettingsState
  * @property {(payload?: object) => void} applyCursorSettingsState
  */
 
@@ -466,6 +467,11 @@ export async function connectSocket(overrideDeps) {
   });
   // The Claude usage limit: a conversation's paused turn, and the account's
   // latest report (also sent on connect).
+  // A Claude chat moved between the subscription and the API key, or what it
+  // may switch to changed (a swap waiting, the key removed).
+  socket.on('conversation_billing', (payload) => {
+    applyConversationBilling(payload || null);
+  });
   socket.on('usage_limit_pause', (payload) => {
     applyUsageLimitPause(payload || null);
   });
@@ -507,6 +513,17 @@ export async function connectSocket(overrideDeps) {
         .catch(() => {});
     }
   });
+  // The Claude API tab saved (a key, the switch, the cap): the tab, New
+  // Chat's readiness and the composer's billing toggle follow.
+  socket.on('claude_api_settings_updated', (payload) => {
+    const state = deps?.applyClaudeApiSettingsState?.(payload || {});
+    updateProviderReadinessInputs({ claudeApi: state || payload || null });
+    if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
+      void Promise.resolve()
+        .then(() => deps?.refreshCurrentView?.())
+        .catch(() => {});
+    }
+  });
   socket.on('cursor_settings_updated', (payload) => {
     const state = deps?.applyCursorSettingsState?.(payload || {});
     updateProviderReadinessInputs({ cursor: state || payload || null });

package/server/public/app/tool-activity-emoji.mjs

@@ -31,10 +31,11 @@ export function prefixToolActivityEmoji(text) {
   if (/^Tool \((create_file|write)\)/i.test(value)) return `🆕 ${value}`;
   if (/^Tool \((bash|shell|terminal)\)/i.test(value)) return `🔧 ${value}`;
   if (/^Tool \((sql|sqlite)\)/i.test(value)) return `🗄️ ${value}`;
-  // Work on another OAR relay. Claude's raw name is mcp__relay__remote_relay and
-  // the Copilot CLI names MCP tools <server>-<tool> (oar-remote_relay); the
+  // Work on another OAR relay. Claude's raw name is mcp__relay__relay_tool and
+  // the Copilot CLI names MCP tools <server>-<tool> (oar-relay_tool); the
   // activity normalisers strip both, but a line that kept one matches too.
-  if (/^Tool \((?:mcp__[a-z0-9_-]+__|[a-z0-9_]+-)?remote_relay\)/i.test(value)) return `🛰️ ${value}`;
+  // Lines written up to 0.9.17 carry the old name, remote_relay.
+  if (/^Tool \((?:mcp__[a-z0-9_-]+__|[a-z0-9_]+-)?(?:relay_tool|remote_relay)\)/i.test(value)) return `🛰️ ${value}`;
   if (/^Tool \(/i.test(value)) return `🛠️ ${value}`;
   return `ℹ️ ${value}`;
 }

package/server/public/app/usage-limit-ui.js

@@ -2,14 +2,15 @@
 // banner above the composer. Before the limit it warns ("usage at 96 %"); at
 // the limit it says when the window resets; and when a turn of this
 // conversation was paused there, it says when the turn carries on, with
-// Resume now and Cancel.
+// Resume now and Cancel, and Switch this chat to API key when the chat may
+// move to the Claude API key (its `billing` says so).
 //
 // State arrives over the socket (`usage_limit_pause` per conversation,
 // `claude_usage_limit` for the account), with the conversation payload, and
 // with GET /api/status polls, so a client that missed an event catches up.
 
 import { showTransientRelayNotice } from './store.js';
-import { cancelUsageLimitPause, resumeUsageLimitPause } from './api-client.js';
+import { cancelUsageLimitPause, resumeUsageLimitPause, switchConversationBilling } from './api-client.js';
 
 const BANNER_ID = 'usage-limit-banner';
 const DISMISSED_KEY = 'oar.usageLimitWarningDismissed';
@@ -18,11 +19,25 @@ const WARNING_FROM = 0.9;
 
 let account = null;
 const pauses = new Map();
+// Each conversation's billing as the relay last said it (payload `billing`,
+// socket `conversation_billing`): the subscription or the API key, and
+// whether it may switch now.
+const billings = new Map();
+// Told of every change to a chat's billing (the composer's billing toggle).
+const billingListeners = new Set();
 let currentConversationId = '';
 let currentProviderType = '';
 let actionInFlight = false;
 let wakeTimer = null;
 
+function notifyBilling(conversationId) {
+  const id = String(conversationId || '').trim();
+  if (!id) return;
+  for (const listener of billingListeners) {
+    try { listener(id, billings.get(id) || null); } catch {}
+  }
+}
+
 function isFuture(iso, nowMs) {
   const at = Date.parse(String(iso || ''));
   return Number.isFinite(at) && at > nowMs;
@@ -73,6 +88,33 @@ export function usageLimitAccountText(state, nowMs = Date.now()) {
   return `Claude usage at ${Math.round(utilization * 100)} % of the ${label} — resets ${resets}`;
 }
 
+/**
+ * Whether the usage-limit note offers to move the chat to the API key: a
+ * subscription chat (never a cloud one) whose relay says the switch is
+ * allowed now (a key saved, Claude API on, the cap not reached, the model on
+ * the key's list).
+ */
+export function usageLimitSwitchOffered(conversationId, providerType = currentProviderType) {
+  if (String(providerType || '').trim().toLowerCase() !== 'claude') return false;
+  const billing = billings.get(String(conversationId || '')) || null;
+  return billing?.provider === 'claude'
+    && billing?.switchable?.to === 'claude-api'
+    && billing.switchable.allowed === true;
+}
+
+/**
+ * Why the usage-limit note does not offer the API key, when the reason is
+ * worth a line: this month's Claude API cap. '' otherwise (Claude API off or
+ * without a key is no news at the limit).
+ */
+export function usageLimitSwitchBlockedText(conversationId, providerType = currentProviderType) {
+  if (String(providerType || '').trim().toLowerCase() !== 'claude') return '';
+  const billing = billings.get(String(conversationId || '')) || null;
+  if (billing?.provider !== 'claude' || billing?.switchable?.to !== 'claude-api') return '';
+  if (billing.switchable.allowed === true || billing.switchable.code !== 'CLAUDE_API_CAP_REACHED') return '';
+  return "No switch to the API key: this month's Claude API cap is reached.";
+}
+
 function dismissedKey(state) {
   return state ? `${state.rateLimitType || ''}|${state.resetsAt || ''}|${state.status || ''}` : '';
 }
@@ -101,6 +143,21 @@ async function runPauseAction(action) {
   actionInFlight = true;
   renderUsageLimitBanner();
   try {
+    if (action === 'switch') {
+      const switched = await switchConversationBilling(conversationId, { to: 'claude-api', by: 'usage-limit' });
+      if (!switched?.ok) {
+        // Refused (the cap, the model, the key): the pause stays, and says why.
+        showTransientRelayNotice(`Not switched: ${switched?.error || 'the relay refused it.'}`, 7000);
+        return;
+      }
+      pauses.delete(conversationId);
+      if (switched.billing) {
+        billings.set(conversationId, switched.billing);
+        notifyBilling(conversationId);
+      }
+      showTransientRelayNotice('This chat now runs on the Claude API key; the paused turn carries on there.', 5000);
+      return;
+    }
     const result = action === 'resume'
       ? await resumeUsageLimitPause(conversationId)
       : await cancelUsageLimitPause(conversationId);
@@ -149,7 +206,19 @@ export function renderUsageLimitBanner(nowMs = Date.now()) {
     const text = document.createElement('span');
     text.className = 'usage-limit-text';
     text.textContent = usageLimitPauseText(pause, nowMs);
-    children.push(text, button('Resume now', 'usage-limit-resume', () => runPauseAction('resume')), button('Cancel', 'usage-limit-cancel', () => runPauseAction('cancel')));
+    children.push(text, button('Resume now', 'usage-limit-resume', () => runPauseAction('resume')));
+    if (usageLimitSwitchOffered(currentConversationId)) {
+      children.push(button('Switch this chat to API key', 'usage-limit-switch', () => runPauseAction('switch')));
+    } else {
+      const blocked = usageLimitSwitchBlockedText(currentConversationId);
+      if (blocked) {
+        const note = document.createElement('span');
+        note.className = 'usage-limit-text usage-limit-switch-blocked';
+        note.textContent = blocked;
+        children.push(note);
+      }
+    }
+    children.push(button('Cancel', 'usage-limit-cancel', () => runPauseAction('cancel')));
     banner.dataset.state = 'paused';
   } else {
     const line = currentConversationId && currentProviderType === 'claude' && !isDismissed(account)
@@ -198,15 +267,75 @@ export function applyUsageLimitFromStatus(status) {
   renderUsageLimitBanner();
 }
 
-/** The conversation on screen, with what its payload said about a pause. */
-export function setUsageLimitConversation(conversationId, { pause = undefined, providerType = '' } = {}) {
+/** The conversation on screen, with what its payload said about a pause and its billing. */
+export function setUsageLimitConversation(conversationId, { pause = undefined, providerType = '', billing = undefined } = {}) {
   currentConversationId = String(conversationId || '').trim();
   currentProviderType = String(providerType || '').trim().toLowerCase();
   if (currentConversationId && pause !== undefined) {
     if (pause && typeof pause === 'object') pauses.set(currentConversationId, pause);
     else pauses.delete(currentConversationId);
   }
+  if (currentConversationId && billing !== undefined) {
+    if (billing && typeof billing === 'object') billings.set(currentConversationId, billing);
+    else billings.delete(currentConversationId);
+  }
   renderUsageLimitBanner();
+  notifyBilling(currentConversationId);
+}
+
+/** `conversation_billing`: a chat's billing changed, or what it may switch to. */
+export function applyConversationBilling(payload) {
+  const conversationId = String(payload?.conversationId || '').trim();
+  if (!conversationId) return;
+  if (payload.billing && typeof payload.billing === 'object') {
+    billings.set(conversationId, payload.billing);
+    if (conversationId === currentConversationId && payload.billing.provider) currentProviderType = payload.billing.provider;
+  } else {
+    billings.delete(conversationId);
+  }
+  renderUsageLimitBanner();
+  notifyBilling(conversationId);
+}
+
+/** A switch answered with the chat's billing (the composer's toggle). */
+export function setConversationBilling(conversationId, billing) {
+  const id = String(conversationId || '').trim();
+  if (!id || !billing || typeof billing !== 'object') return;
+  billings.set(id, billing);
+  if (id === currentConversationId && billing.provider) currentProviderType = billing.provider;
+  renderUsageLimitBanner();
+  notifyBilling(id);
+}
+
+/** What the relay last said of a chat's billing, or null. */
+export function conversationBillingState(conversationId) {
+  return billings.get(String(conversationId || '').trim()) || null;
+}
+
+/** `listener(conversationId, billing)` on every change; returns the unsubscribe. */
+export function onConversationBillingChange(listener) {
+  if (typeof listener !== 'function') return () => {};
+  billingListeners.add(listener);
+  return () => billingListeners.delete(listener);
+}
+
+/** A send was refused because the chat's billing is now `provider`: remember it. */
+export function noteConversationBilling(conversationId, provider) {
+  const id = String(conversationId || '').trim();
+  const billing = String(provider || '').trim().toLowerCase();
+  if (!id || (billing !== 'claude' && billing !== 'claude-api')) return;
+  const known = billings.get(id) || {};
+  // What it may switch to is the relay's to say again; until then, nothing.
+  billings.set(id, { ...known, provider: billing, switchable: { to: billing === 'claude' ? 'claude-api' : 'claude', allowed: false, code: null, reason: null } });
+  if (id === currentConversationId) currentProviderType = billing;
+  renderUsageLimitBanner();
+  notifyBilling(id);
+}
+
+/** The billing the page last heard for a chat: 'claude', 'claude-api', or ''. */
+export function knownConversationBilling(conversationId) {
+  const billing = billings.get(String(conversationId || '').trim()) || null;
+  return billing?.provider === 'claude' || billing?.provider === 'claude-api' ? billing.provider : '';
 }
 
 export function initUsageLimitUi() {
@@ -216,6 +345,8 @@ export function initUsageLimitUi() {
 export function __resetUsageLimitUiForTests() {
   account = null;
   pauses.clear();
+  billings.clear();
+  billingListeners.clear();
   currentConversationId = '';
   currentProviderType = '';
   actionInFlight = false;