@oar-sh/oar 0.9.17 → 0.9.18

package/server/public/app/claude-billing-toggle.mjs

@@ -0,0 +1,112 @@
+// The composer's billing toggle for a Claude chat: Subscription | API key.
+// Pure and DOM-free: what the toggle shows, from the chat's provider, what
+// the relay said of its billing (`billing`, GET /api/conversation and the
+// `conversation_billing` socket event) and the Claude API tab's state.
+//
+// A switch applies from the chat's next turn; the worker is swapped between
+// turns, and while it waits the relay's `billing.pending` says for what.
+
+export const CLAUDE_BILLING_TOGGLE_OPTIONS = Object.freeze([
+  Object.freeze({ value: 'claude', label: 'Subscription' }),
+  Object.freeze({ value: 'claude-api', label: 'API key' }),
+]);
+
+export const CLAUDE_BILLING_CACHE_WARNING = 'The first turn on the API key has no prompt cache and costs more.';
+// A subscription chat while Claude API's monthly cap is reached: said on the
+// toggle itself, not only when the unavailable side is pressed.
+export const CLAUDE_BILLING_CAP_TEXT = "This month's Claude API cap is reached: the chat stays on the subscription.";
+
+function normalizeBilling(value) {
+  const billing = String(value || '').trim().toLowerCase();
+  return billing === 'claude' || billing === 'claude-api' ? billing : '';
+}
+
+/** "the API key" / "the subscription", for running text. */
+export function claudeBillingPlace(billing) {
+  return normalizeBilling(billing) === 'claude-api' ? 'the API key' : 'the subscription';
+}
+
+/** What the toggle says while the worker swap waits (`billing.pending`), or ''. */
+export function claudeBillingPendingText(pending) {
+  if (!pending || typeof pending !== 'object') return '';
+  const place = claudeBillingPlace(pending.to);
+  if (pending.swapping === true) return `Restarting on ${place}…`;
+  const waitingFor = String(pending.waitingFor || '').trim();
+  if (waitingFor === 'turn') return `Moves to ${place} after the running turn.`;
+  if (waitingFor === 'question') return `Moves to ${place} once the open question is answered.`;
+  if (waitingFor === 'compaction') return `Moves to ${place} after the compaction.`;
+  if (waitingFor === 'background') {
+    const count = Number(pending.backgroundTaskCount) || 0;
+    return count > 0
+      ? `Moves to ${place} once ${count} background task${count === 1 ? '' : 's'} finish${count === 1 ? 'es' : ''}.`
+      : `Moves to ${place} once the background tasks finish.`;
+  }
+  if (waitingFor === 'stop') return `Moving to ${place}: the old Claude process has not stopped yet, retrying.`;
+  return `Moving to ${place}…`;
+}
+
+/**
+ * The toggle for one chat:
+ * `{ visible, current, options: [{ value, label, pressed, available, reason }],
+ *    status, statusKind }`.
+ *
+ * Shown in a Claude SDK chat (either billing) whose relay said its billing,
+ * when Claude API is on with a saved key; a chat on the key keeps it after
+ * Claude API is switched off, so it can move back. `inFlight` is a switch
+ * this page sent and has no answer for yet; `warnCache` the chat this page
+ * just moved to the key.
+ */
+export function claudeBillingToggleModel({
+  providerType = '',
+  billing = null,
+  claudeApi = null,
+  inFlight = false,
+  warnCache = false,
+} = {}) {
+  const hidden = { visible: false, current: '', options: [], status: '', statusKind: '' };
+  const chatProvider = normalizeBilling(providerType);
+  if (!chatProvider || !billing || typeof billing !== 'object') return hidden;
+  const current = normalizeBilling(billing.provider) || chatProvider;
+  const claudeApiReady = claudeApi?.configured === true && claudeApi?.enabled === true;
+  if (current === 'claude' && !claudeApiReady) return hidden;
+  const switchable = billing.switchable && typeof billing.switchable === 'object' ? billing.switchable : {};
+  const target = normalizeBilling(switchable.to);
+  // The chat's billing was read while Claude API was off; the tab has since
+  // switched it on. The relay checks the switch again when it is pressed;
+  // a refusal it gave this page since (`refused`) stands.
+  const allowed = switchable.allowed === true
+    || (target === 'claude-api' && claudeApiReady && switchable.code === 'CLAUDE_API_NOT_CONFIGURED'
+      && switchable.refused !== true);
+  const options = CLAUDE_BILLING_TOGGLE_OPTIONS.map((option) => {
+    const pressed = option.value === current;
+    const available = pressed || (option.value === target && allowed && !inFlight);
+    const reason = pressed || available
+      ? ''
+      : (inFlight ? 'A switch is on its way.' : (String(switchable.reason || '').trim() || 'The relay does not allow this switch now.'));
+    return { value: option.value, label: option.label, pressed, available, reason };
+  });
+  let status = '';
+  let statusKind = '';
+  const pendingText = claudeBillingPendingText(billing.pending);
+  if (inFlight) {
+    status = 'Switching…';
+    statusKind = 'pending';
+  } else if (pendingText) {
+    status = pendingText;
+    statusKind = 'pending';
+  } else if (warnCache && current === 'claude-api') {
+    status = CLAUDE_BILLING_CACHE_WARNING;
+    statusKind = 'warning';
+  } else if (current === 'claude' && target === 'claude-api' && !allowed && switchable.code === 'CLAUDE_API_CAP_REACHED') {
+    status = CLAUDE_BILLING_CAP_TEXT;
+    statusKind = 'warning';
+  }
+  return { visible: true, current, options, status, statusKind };
+}
+
+/** The notice after a switch the relay accepted. */
+export function claudeBillingSwitchedText(to) {
+  return normalizeBilling(to) === 'claude-api'
+    ? `This chat runs on the API key from the next turn. ${CLAUDE_BILLING_CACHE_WARNING}`
+    : 'This chat runs on the subscription from the next turn.';
+}

package/server/public/app/context-tier-options.mjs

@@ -46,7 +46,9 @@ function claudeTiersForModel(modelId, claudeTiers) {
  * windows on a Claude conversation. For the Claude provider the offered tiers
  * are exactly the enabled catalog ids the server folded into
  * claudeContextTiersByModel: base id → default, "[1m]" id → long_context, and a
- * model may legitimately have only one of the two.
+ * model may legitimately have only one of the two. Claude API (`claude-api`)
+ * serves the same ids on an API key, with its own folded list
+ * (claudeApiContextTiersByModel), which the caller passes as `claudeTiers`.
  */
 export function buildContextTierOptions({
   modelId = '',
@@ -63,7 +65,9 @@ export function buildContextTierOptions({
   if (provider === 'claude-cloud') return [{ value: 'default', label: UNKNOWN_WINDOW_LABEL }];
   // DeepSeek's models have one window, 1M: no tier to choose.
   if (provider === 'deepseek') return [{ value: 'default', label: tokenLabel(DEEPSEEK_CONTEXT_WINDOW_TOKENS) }];
-  const claudeTierList = provider === 'claude' ? claudeTiersForModel(modelId, claudeTiers) : null;
+  const claudeTierList = provider === 'claude' || provider === 'claude-api'
+    ? claudeTiersForModel(modelId, claudeTiers)
+    : null;
   if (claudeTierList) {
     return claudeTierList
       .map((tier) => String(tier?.value || '').trim().toLowerCase())

package/server/public/app/context-usage-view.mjs

@@ -352,7 +352,7 @@ ${renderThinkingButtons('display', THINKING_DISPLAY_CHOICES, displayKey)}
 
 /**
  * The owner's switch for a session an agent started: may its agents start
- * sessions themselves (the remote_relay tool's one-level rule lifted for it)?
+ * sessions themselves (the relay_tool's one-level rule lifted for it)?
  * Only the owner sets it; no agent can.
  */
 export function renderAgentSessionsControlHtml({ conversationId = '', mayCreateSessions = false } = {}) {

package/server/public/app/conversation-provider-indicator.mjs

@@ -27,6 +27,12 @@ export function isConversationUsingDeepSeekProvider(conversation = null) {
   return resolveConversationProviderType(conversation) === 'deepseek';
 }
 
+// A Claude chat on the saved Claude Console key: the same Claude worker as
+// `claude`, on another bill. A chat can switch between the two.
+export function isConversationUsingClaudeApiProvider(conversation = null) {
+  return resolveConversationProviderType(conversation) === 'claude-api';
+}
+
 // Its own provider, never a flavour of `claude`: the session runs in a sandbox
 // at Anthropic, so nothing that is true of a local Claude worker (modes,
 // effort, steering, a working directory) may be assumed for it.
@@ -40,6 +46,7 @@ const CLAUDE_CLOUD_MARKER = '☁';
 const PROVIDER_NAMES = Object.freeze({
   openai: 'OpenAI',
   claude: 'Claude',
+  'claude-api': 'Claude API',
   'claude-cloud': 'Claude Cloud',
   cursor: 'Cursor',
   grok: 'Grok',
@@ -79,6 +86,9 @@ const SESSION_LOCK_LABELS = {
   openai: 'OpenAI',
   'openai-image': 'OpenAI Image',
   claude: 'Claude SDK',
+  // The same Claude SDK models as `claude`, named for the bill, as the pill
+  // and New Chat name it.
+  'claude-api': 'Claude API',
   cursor: 'Cursor SDK',
   grok: 'Grok',
   deepseek: 'DeepSeek',
@@ -99,6 +109,7 @@ export function sessionLockProviderKey({ providerType = '', model = '' } = {}) {
   }
   if (normalized === 'openai-image' || normalized === 'openai-image-byok') return 'openai-image';
   if (normalized === 'claude' || normalized === 'claude-agent-sdk' || normalized === 'anthropic') return 'claude';
+  if (normalized === 'claude-api') return 'claude-api';
   if (normalized === 'claude-cloud') return 'claude-cloud';
   if (normalized === 'cursor') return 'cursor';
   if (normalized === 'grok' || normalized === 'xai' || normalized === 'xai-grok') return 'grok';

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

@@ -81,6 +81,9 @@ import { stripRemoteRelayDisplayArtifacts } from './relay-prompt-sanitizer.mjs';
 import { evaluateUnknownCommandGuard } from './slash-commands.mjs';
 import { attachCodeCopyButtons } from './code-copy.mjs';
 import { relayErrorCtaActions } from './relay-error-ctas.mjs';
+import { switchClaudeBilling } from './claude-billing-toggle-ui.js';
+import { CLAUDE_API_BILLING_URL, CLAUDE_API_LIMITS_URL, focusClaudeApiCapInput } from './claude-api-settings-ui.js';
+import { knownConversationBilling, noteConversationBilling } from './usage-limit-ui.js';
 import { confirmCliInstall } from './cli-install-ui.js';
 import { startGrokSignIn } from './grok-auth-ui.js';
 import { openSettingsModal } from './settings-modal.js';
@@ -3508,8 +3511,9 @@ async function toggleMessageShareVisibility(conversationId, messageId, hiddenFro
 
 // Each CTA lands the user where the state actually lives: the provider panel
 // shows the install log / the device code, so the settings modal is opened
-// first and the action then runs on top of it.
-function runRelayErrorCta(cta) {
+// first and the action then runs on top of it. New Chat runs them too, for a
+// refusal of its own (journal-view.js).
+export function runRelayErrorCta(cta) {
   if (cta === 'install-grok-cli') {
     openSettingsModal('providers', 'grok');
     // The confirm sheet — never a bare curl | bash from a chat bubble.
@@ -3525,6 +3529,15 @@ function runRelayErrorCta(cta) {
   if (cta === 'open-claude-settings') openSettingsModal('providers', 'claude');
   if (cta === 'open-deepseek-settings') openSettingsModal('providers', 'deepseek');
   if (cta === 'open-deepseek-top-up') window.open('https://platform.deepseek.com/top_up', '_blank', 'noopener');
+  if (cta === 'open-claude-api-settings') openSettingsModal('providers', 'claude-api');
+  if (cta === 'open-claude-api-cap') {
+    openSettingsModal('providers', 'claude-api');
+    focusClaudeApiCapInput();
+  }
+  if (cta === 'open-claude-api-billing') window.open(CLAUDE_API_BILLING_URL, '_blank', 'noopener');
+  if (cta === 'open-claude-api-limits') window.open(CLAUDE_API_LIMITS_URL, '_blank', 'noopener');
+  // The chat this note is in, not a chat opened since: the bubble is on screen.
+  if (cta === 'switch-claude-billing-to-subscription' && currentConvId) void switchClaudeBilling(currentConvId, 'claude');
 }
 
 function handleBubbleActionClick(event) {
@@ -4615,6 +4628,10 @@ export async function sendMessage() {
       relayMode: selectedMode,
       conversationId: targetConversationId || undefined,
       newConversation: isNew || undefined,
+      // The billing this page shows for a Claude chat: the relay refuses the
+      // send when the chat has moved to the other one since, so nobody's
+      // turn runs on a bill they did not see.
+      billing: (!isNew && targetConversationId && knownConversationBilling(targetConversationId)) || undefined,
       attachments,
       imageTarget: draftImageEditTarget
         ? {
@@ -4628,7 +4645,16 @@ export async function sendMessage() {
     // A refusal the user can act on (the conversation's model left the
     // catalog) is shown as the relay words it.
     let refusal = '';
-    const r = await sendMessageApi(body, { onRefused: (reason) => { refusal = reason; } });
+    const r = await sendMessageApi(body, {
+      onRefused: (reason, payload) => {
+        refusal = reason;
+        // The chat's billing changed under this page: it learns the new one,
+        // so sending again goes through.
+        if (payload?.code === 'CLAUDE_BILLING_CHANGED' && targetConversationId) {
+          noteConversationBilling(targetConversationId, payload.billing);
+        }
+      },
+    });
     if (!r) {
       // Offline: park the send in the durable outbox instead of bouncing it
       // back into the composer. The client-generated messageId makes a replay

package/server/public/app/inbox-view.mjs

@@ -1,7 +1,7 @@
 // The Inbox, as DOM: every pending question across this relay and its paired
 // relays (GET /api/inbox), grouped by relay, newest first; what was answered
 // or dismissed in the last day under a divider. And the card a question that
-// does not block (remote_relay `ask`) shows in its own session.
+// does not block (relay_tool `ask`) shows in its own session.
 //
 // Every text here is written by an agent, some on other relays: it goes into
 // the page through textContent only, never as HTML or a link. Buttons carry

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

@@ -73,13 +73,15 @@ import {
   loadClaudeCloudRepos,
   loadGrokSettings,
   loadDeepSeekSettings,
+  loadClaudeApiSettings,
   loadOpenAISettings,
 } from './api-client.js';
 import { isSetupRequired, updateProviderReadinessInputs } from './provider-readiness.mjs';
 import { SETUP_TEXT } from './no-conversation-state.mjs';
 import { openSettingsModal } from './settings-modal.js';
+import { START_ON_SUBSCRIPTION_ACTION, newChatClaudeApiRefusalActions } from './relay-error-ctas.mjs';
 import { captureReadingBlock, restoreReadingBlock } from './transcript-viewport-anchor.mjs';
-import { renderMessages, renderNoConversationState, restoreInFlightThinking, focusConversationMessageById, noteTranscriptJump, getTranscriptJumpEpoch, getTranscriptLiveRowEpoch, flushConversationDraft, hydrateConversationDraft, beginConversationDraftSwitch, openStopTurnConfirmationForConversation, conversationHasActiveTurn, captureConversationReadingAnchor, restoreConversationReadingAnchor, detachConversationWindowFromTail, mergeMessagesIntoTranscript, isConversationWindowAtTail } from './conversation-view.js';
+import { runRelayErrorCta, renderMessages, renderNoConversationState, restoreInFlightThinking, focusConversationMessageById, noteTranscriptJump, getTranscriptJumpEpoch, getTranscriptLiveRowEpoch, flushConversationDraft, hydrateConversationDraft, beginConversationDraftSwitch, openStopTurnConfirmationForConversation, conversationHasActiveTurn, captureConversationReadingAnchor, restoreConversationReadingAnchor, detachConversationWindowFromTail, mergeMessagesIntoTranscript, isConversationWindowAtTail } from './conversation-view.js';
 import { mergeTailPage } from './transcript-reading-anchor.mjs';
 import { readWindowRetention } from './conversation-window-retention.mjs';
 import { MENU_SEPARATOR, bindLongPress, closeContextMenu, openContextMenu } from './context-menu.mjs';
@@ -105,6 +107,7 @@ import { createInfiniteLoader } from './infinite-loader.js';
 import {
   buildNewConversationModelChoices,
   newConversationContextTierState,
+  preselectNewConversationModel,
   reasoningChoicesForProviderModel,
   resolvePreferredReasoningEffort,
 } from './new-conversation-model-choice.mjs';
@@ -191,6 +194,7 @@ let newConversationClaudeSettingsCache = null;
 let newConversationCursorSettingsCache = null;
 let newConversationGrokSettingsCache = null;
 let newConversationDeepSeekSettingsCache = null;
+let newConversationClaudeApiSettingsCache = null;
 let newConversationClaudeCloudSettingsCache = null;
 // Claude Cloud fields of the New Chat modal: what the selected folder's git
 // remote said, and what was written into Repository/Branch from it (so a later
@@ -700,7 +704,7 @@ function paintConvList() {
       : renderConversationOriginMarkerHtml(c, { conversations });
     // "watched": a session another conversation watches by id (relay events).
     const watchedMarkerHtml = relayEventWatchedMarkerHtml(c.id);
-    // "scheduled": a schedule fires into this session (remote_relay schedule).
+    // "scheduled": a schedule fires into this session (relay_tool schedule).
     const scheduledMarkerHtml = relayScheduleMarkerHtml(c.id);
     const groupClass = item.kind === 'head' ? ' conv-group-head' : (item.kind === 'member' ? ' conv-group-member' : '');
     const groupAttr = item.kind === 'head' || item.kind === 'member' ? ` data-group-id="${escHtml(item.group.id)}"` : '';
@@ -926,6 +930,8 @@ export function applyLoadedConversationState(id, response, {
     // Absent from an older relay's payload: keep what the socket said.
     pause: 'usageLimitPause' in response ? response.usageLimitPause : undefined,
     providerType: response.runtimeSession?.providerType,
+    // A Claude chat's billing and whether it may switch (an older relay: absent).
+    billing: 'billing' in response ? response.billing : undefined,
   });
   // Merge, not replace: this payload only carries one conversation's previews.
   mergeConversationPreviews(id, response.previews || []);
@@ -1236,6 +1242,7 @@ function normalizeNewConversationProviderType(value = '') {
   if (normalized === 'openai' || normalized === 'openai-byok') return 'openai';
   if (normalized === 'openai-image' || normalized === 'openai-image-byok') return 'openai-image';
   if (normalized === 'claude') return 'claude';
+  if (normalized === 'claude-api') return 'claude-api';
   if (normalized === CLAUDE_CLOUD_PROVIDER) return CLAUDE_CLOUD_PROVIDER;
   if (normalized === 'cursor') return 'cursor';
   if (normalized === 'grok') return 'grok';
@@ -1278,6 +1285,7 @@ function modelMatchesNewConversationProvider(catalog = {}, modelId = '', provide
   const hasCursor = providers.includes('cursor');
   const hasGrok = providers.includes('grok');
   const hasDeepSeek = providers.includes('deepseek');
+  const hasClaudeApi = providers.includes('claude-api');
   if (wantsOpenAI) {
     if (hasOpenAIByok) return true;
     const settingsModel = String(newConversationOpenAISettingsCache?.model || '').trim();
@@ -1321,7 +1329,16 @@ function modelMatchesNewConversationProvider(catalog = {}, modelId = '', provide
       : [];
     return normalizedModelId === deepseekModel || deepseekModels.includes(normalizedModelId);
   }
-  const claudeOnly = hasClaude && providers.every((provider) => provider === 'claude');
+  if (normalizedProvider === 'claude-api') {
+    if (hasClaudeApi) return true;
+    const claudeApiModel = String(newConversationClaudeApiSettingsCache?.model || '').trim();
+    const claudeApiModels = Array.isArray(newConversationClaudeApiSettingsCache?.models)
+      ? newConversationClaudeApiSettingsCache.models.map((entry) => String(entry || '').trim()).filter(Boolean)
+      : [];
+    return normalizedModelId === claudeApiModel || claudeApiModels.includes(normalizedModelId);
+  }
+  // Claude API serves the Claude provider's ids: still none of Copilot's.
+  const claudeOnly = hasClaude && providers.every((provider) => provider === 'claude' || provider === 'claude-api');
   if (claudeOnly) return false;
   const cursorOnly = hasCursor && providers.every((provider) => provider === 'cursor');
   if (cursorOnly) return false;
@@ -1332,7 +1349,8 @@ function modelMatchesNewConversationProvider(catalog = {}, modelId = '', provide
   // Should a relay ever tag catalog rows for Claude Cloud, they are no more
   // Copilot's than the other runtimes' rows are.
   const exclusiveOnly = providers.length > 0 && providers.every((provider) => (
-    provider === 'claude' || provider === 'cursor' || provider === 'grok' || provider === 'deepseek' || provider === CLAUDE_CLOUD_PROVIDER
+    provider === 'claude' || provider === 'cursor' || provider === 'grok' || provider === 'deepseek'
+    || provider === 'claude-api' || provider === CLAUDE_CLOUD_PROVIDER
   ));
   if (exclusiveOnly) return false;
   return providers.some((provider) => (
@@ -1341,6 +1359,7 @@ function modelMatchesNewConversationProvider(catalog = {}, modelId = '', provide
     && provider !== 'cursor'
     && provider !== 'grok'
     && provider !== 'deepseek'
+    && provider !== 'claude-api'
     && provider !== CLAUDE_CLOUD_PROVIDER
   )) || !hasOpenAIByok;
 }
@@ -1492,6 +1511,10 @@ function updateNewConversationProviderHelp(provider = 'github') {
     help.textContent = "Claude chats run through the Claude Agent SDK with the relay host's Claude login.";
     return;
   }
+  if (normalizedProvider === 'claude-api') {
+    help.textContent = 'Claude API chats run through the Claude Agent SDK on the API key saved in Settings, billed to its Claude Console organisation. The chat can switch to the subscription later.';
+    return;
+  }
   if (normalizedProvider === CLAUDE_CLOUD_PROVIDER) {
     help.textContent = "Claude Cloud chats run in a sandbox at Anthropic on a clone of a GitHub repository, billed to the relay host's Claude account.";
     return;
@@ -1537,7 +1560,7 @@ async function populateNewConversationModelSelect(providerType = 'github') {
     buildCatalogModelOptions(eligibleModels, {
       metadataByModel: catalog.modelMetadataByModel || {},
       // The merged metadata knows Copilot's windows, not Claude's or the cloud's.
-      annotateContextWindow: normalizedProvider !== 'claude' && !isCloud,
+      annotateContextWindow: normalizedProvider !== 'claude' && normalizedProvider !== 'claude-api' && !isCloud,
     }).filter((option) => hasAuto || option.value.toLowerCase() !== 'auto'),
   );
   for (const choice of choices) {
@@ -1555,10 +1578,13 @@ async function populateNewConversationModelSelect(providerType = 'github') {
     // The tab's default, not the last model another provider's chat used.
     const cloudDefault = claudeCloudDefaultModel(newConversationClaudeCloudSettingsCache, eligibleModels);
     if (cloudDefault) target.value = cloudDefault;
-  } else if (storedModel && Array.from(target.options).some((option) => option.value === storedModel)) {
-    target.value = storedModel;
-  } else if (normalizedProvider !== 'openai-image' && Array.from(target.options).some((option) => option.value === 'auto')) {
-    target.value = 'auto';
+  } else {
+    const preselected = preselectNewConversationModel(Array.from(target.options, (option) => option.value), {
+      storedModel,
+      providerDefault: normalizedProvider === 'claude-api' ? newConversationClaudeApiSettingsCache?.model : '',
+      allowAuto: normalizedProvider !== 'openai-image',
+    });
+    if (preselected) target.value = preselected;
   }
   updateNewConversationProviderHelp(normalizedProvider);
   syncNewConversationReasoningLabel(normalizedProvider);
@@ -2115,7 +2141,7 @@ function applyNewConversationSetupState(setupRequired) {
 }
 
 async function openNewConversationModelModal() {
-  const [catalog, settings, claudeSettings, cursorSettings, grokSettings, claudeCloudSettings, deepseekSettings] = await Promise.all([
+  const [catalog, settings, claudeSettings, cursorSettings, grokSettings, claudeCloudSettings, deepseekSettings, claudeApiSettings] = await Promise.all([
     loadModelCatalog(),
     loadOpenAISettings(),
     loadClaudeSettings(),
@@ -2125,6 +2151,8 @@ async function openNewConversationModelModal() {
     loadClaudeCloudSettings(),
     // The same for a relay without DeepSeek.
     loadDeepSeekSettings(),
+    // And without Claude API.
+    loadClaudeApiSettings(),
   ]);
   newConversationCatalogCache = catalog || null;
   newConversationOpenAISettingsCache = settings || null;
@@ -2133,6 +2161,7 @@ async function openNewConversationModelModal() {
   newConversationGrokSettingsCache = grokSettings || null;
   newConversationClaudeCloudSettingsCache = claudeCloudSettings || null;
   newConversationDeepSeekSettingsCache = deepseekSettings || null;
+  newConversationClaudeApiSettingsCache = claudeApiSettings || null;
   // Fresh answers for the readiness question, shared with the empty screen
   // and the composer. With no provider known to be ready the modal opens in
   // its setup state: Settings is the main button, Start stays as "anyway".
@@ -2143,11 +2172,13 @@ async function openNewConversationModelModal() {
     cursor: cursorSettings || null,
     grok: grokSettings || null,
     deepseek: deepseekSettings || null,
+    claudeApi: claudeApiSettings || null,
     catalog: catalog || null,
   });
   applyNewConversationSetupState(isSetupRequired(readiness));
   // Every open starts from empty cloud fields; the folder lookup refills them.
   resetNewConversationCloudState();
+  clearNewConversationClaudeApiRefusal();
   bindNewConversationCloudInputs();
   const providerSelect = document.getElementById('new-conversation-provider-select');
   if (providerSelect) {
@@ -2159,6 +2190,9 @@ async function openNewConversationModelModal() {
     if (claudeSettings?.enabled === true) {
       options.push({ value: 'claude', label: 'Claude SDK' });
     }
+    if (claudeApiSettings?.enabled === true) {
+      options.push({ value: 'claude-api', label: 'Claude API' });
+    }
     if (claudeCloudSettings?.enabled === true) {
       options.push({ value: CLAUDE_CLOUD_PROVIDER, label: 'Claude Cloud' });
     }
@@ -2188,6 +2222,7 @@ async function openNewConversationModelModal() {
     if (providerSelect.dataset.modelsBound !== '1') {
       providerSelect.dataset.modelsBound = '1';
       providerSelect.addEventListener('change', () => {
+        clearNewConversationClaudeApiRefusal();
         void populateNewConversationModelSelect(providerSelect.value);
       });
     }
@@ -2376,6 +2411,18 @@ async function createNewConversation(selectedModel, selectedReasoningEffort = ''
       showNewConversationCloudError(cloudError.text, cloudError.field ? [cloudError.field] : []);
       return;
     }
+    // Claude API refused to start (this month's cap, no key, switched off):
+    // nothing was bound. The relay's words stay in the modal, with the way
+    // to fix it and the same chat on the subscription.
+    const claudeApiActions = !recovered && selectedProvider === 'claude-api'
+      ? newChatClaudeApiRefusalActions(error?.payload?.code, {
+        subscriptionOffered: newConversationProviderOffered('claude'),
+      })
+      : [];
+    if (claudeApiActions.length) {
+      showNewConversationClaudeApiRefusal(error?.message || 'Claude API could not start this chat.', claudeApiActions, selectedModel);
+      return;
+    }
     showTransientRelayNotice(recovered
       // The chat is usable, but its worker did not start, so say what broke.
       ? `The chat was created, but its session could not start: ${error?.message || 'unknown error'}.`
@@ -2387,8 +2434,78 @@ async function createNewConversation(selectedModel, selectedReasoningEffort = ''
   }
 }
 
+function newConversationProviderOffered(provider) {
+  return Array.from(document.getElementById('new-conversation-provider-select')?.options || [])
+    .some((option) => option.value === provider);
+}
+
+function clearNewConversationClaudeApiRefusal() {
+  const note = document.getElementById('new-conversation-refusal');
+  if (!note) return;
+  note.replaceChildren();
+  note.hidden = true;
+}
+
+// The same chat, started on the Claude provider: its model when the Claude
+// list has it, the choices the modal holds otherwise.
+async function startNewConversationOnSubscription(model) {
+  const providerSelect = document.getElementById('new-conversation-provider-select');
+  if (!providerSelect || newConversationInFlight) return;
+  clearNewConversationClaudeApiRefusal();
+  // The effort chosen for the refused chat: rebuilding the lists for Claude
+  // would fall back to the stored one.
+  const effort = String(document.getElementById('new-conversation-reasoning-select')?.value || '').trim().toLowerCase();
+  providerSelect.value = 'claude';
+  await populateNewConversationModelSelect('claude');
+  const modelSelect = document.getElementById('new-conversation-model-select');
+  if (modelSelect && Array.from(modelSelect.options).some((option) => option.value === model)) {
+    modelSelect.value = model;
+    await populateNewConversationReasoningSelect(model);
+  }
+  const reasoningSelect = document.getElementById('new-conversation-reasoning-select');
+  if (effort && reasoningSelect && Array.from(reasoningSelect.options).some((option) => option.value === effort)) {
+    reasoningSelect.value = effort;
+  }
+  await confirmNewConversationModel();
+}
+
+function showNewConversationClaudeApiRefusal(message, actions, model) {
+  const note = document.getElementById('new-conversation-refusal');
+  if (!note) {
+    showTransientRelayNotice(message, 12000);
+    return;
+  }
+  const text = document.createElement('div');
+  text.className = 'new-conversation-refusal-text';
+  text.textContent = message;
+  const buttons = document.createElement('div');
+  buttons.className = 'new-conversation-refusal-actions';
+  for (const item of actions) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'summary-btn';
+    button.dataset.action = item.action;
+    button.textContent = item.label;
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      if (item.action === START_ON_SUBSCRIPTION_ACTION) {
+        void startNewConversationOnSubscription(model);
+        return;
+      }
+      closeNewConversationModelModal();
+      runRelayErrorCta(item.action);
+    });
+    buttons.appendChild(button);
+  }
+  note.replaceChildren(text, buttons);
+  note.hidden = false;
+  // The modal's body scrolls: on a phone the note lands below the fold.
+  note.scrollIntoView?.({ block: 'nearest' });
+}
+
 export async function confirmNewConversationModel() {
   if (newConversationInFlight) return;
+  clearNewConversationClaudeApiRefusal();
   const selectedModel = String(document.getElementById('new-conversation-model-select')?.value || '').trim();
   const selectedReasoningEffort = String(document.getElementById('new-conversation-reasoning-select')?.value || '').trim().toLowerCase();
   if (!selectedModel) return;

package/server/public/app/model-selector-options.mjs

@@ -12,7 +12,7 @@ export function composerPlaceholderFor({ modelId = '', providerType = '' } = {})
   const provider = String(providerType || '').trim().toLowerCase();
   const id = String(modelId || '').trim().toLowerCase().replace(/\[[^\]]*\]$/, '');
   const providerFallback = () => {
-    if (provider === 'claude' || provider === 'claude-cloud') return 'Message Claude…';
+    if (provider === 'claude' || provider === 'claude-api' || provider === 'claude-cloud') return 'Message Claude…';
     if (provider === 'grok') return 'Message Grok…';
     if (provider === 'openai' || provider === 'openai-byok') return 'Message OpenAI…';
     if (provider === 'cursor') return 'Message Cursor…';
@@ -195,6 +195,22 @@ export function normalizeModelSelectorOptions(models = [], {
   });
 }
 
+/**
+ * `humanizeModelLabel` for a list of ids, where two ids that would read the
+ * same (two dated snapshots of one model) keep their ids instead: a Map of
+ * id → label.
+ */
+export function distinctModelLabels(modelIds = []) {
+  const ids = (Array.isArray(modelIds) ? modelIds : []).map((id) => String(id || '').trim()).filter(Boolean);
+  const labels = new Map(ids.map((id) => [id, humanizeModelLabel(id) || id]));
+  const counts = new Map();
+  for (const label of labels.values()) counts.set(label, (counts.get(label) || 0) + 1);
+  for (const [id, label] of labels) {
+    if (counts.get(label) > 1) labels.set(id, id);
+  }
+  return labels;
+}
+
 /**
  * The one option list both pickers render (composer #model-select and the
  * New Chat modal), so they cannot disagree on order or wording. Callers filter

package/server/public/app/new-conversation-model-choice.mjs

@@ -25,6 +25,27 @@ export function buildNewConversationModelChoices(options = []) {
   return choices;
 }
 
+/**
+ * The model New Chat starts on, from the values its list offers: the
+ * composer's last model when the list has it, else the provider's own
+ * default (Claude API's settings model; the list is sorted by name, so its
+ * first entry is no default), else Auto when allowed, else ''. '' leaves the
+ * list's first entry.
+ */
+export function preselectNewConversationModel(values = [], {
+  storedModel = '',
+  providerDefault = '',
+  allowAuto = true,
+} = {}) {
+  const offered = new Set((Array.isArray(values) ? values : []).map((value) => String(value || '').trim()).filter(Boolean));
+  const stored = String(storedModel || '').trim();
+  if (stored && offered.has(stored)) return stored;
+  const fallback = String(providerDefault || '').trim();
+  if (fallback && offered.has(fallback)) return fallback;
+  if (allowAuto && offered.has('auto')) return 'auto';
+  return '';
+}
+
 function normalizeProviderKey(provider = '') {
   const key = String(provider || '').trim().toLowerCase();
   if (key === 'openai-byok') return 'openai';

package/server/public/app/provider-readiness.mjs

@@ -1,8 +1,8 @@
 // Which providers are known to be ready to run a chat, from what the client
 // already loads: the provider settings payloads and the model catalog. No DOM.
 //
-// OpenAI, Claude, Claude Cloud, Cursor, Grok and DeepSeek say so themselves: their
-// settings carry `enabled`. Copilot has no such flag and the relay never asks
+// OpenAI, Claude, Claude API, Claude Cloud, Cursor, Grok and DeepSeek say so
+// themselves: their settings carry `enabled`. Copilot has no such flag and the relay never asks
 // whether the Copilot CLI is signed in, so the best signal is indirect: has a
 // real Copilot model list ever reached the catalog? A fresh database is seeded
 // with a curated list under the source `bootstrap-seed`; a server discovery,
@@ -20,6 +20,7 @@ export const SEED_CATALOG_SOURCE = 'bootstrap-seed';
 const SETTINGS_PROVIDERS = Object.freeze([
   ['openai', 'openai'],
   ['claude', 'claude'],
+  ['claudeApi', 'claude-api'],
   ['claudeCloud', 'claude-cloud'],
   ['cursor', 'cursor'],
   ['grok', 'grok'],
@@ -33,6 +34,7 @@ const REQUIRED_INPUTS = Object.freeze(['openai', 'claude', 'cursor', 'grok', 'ca
  * @param {object} input the settings payloads New Chat loads, plus GET /api/models
  * @param {object|null} [input.openai]
  * @param {object|null} [input.claude]
+ * @param {object|null} [input.claudeApi] null on a relay without Claude API: not offered, not unknown
  * @param {object|null} [input.claudeCloud] null on a relay without Claude Cloud: not offered, not unknown
  * @param {object|null} [input.cursor]
  * @param {object|null} [input.grok]
@@ -68,6 +70,7 @@ export function isSetupRequired(readiness) {
 const inputs = {
   openai: undefined,
   claude: undefined,
+  claudeApi: undefined,
   claudeCloud: undefined,
   cursor: undefined,
   grok: undefined,