@oar-sh/oar 0.9.16 → 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

@@ -1,6 +1,8 @@
 // Mirrors shared/model-id.mjs, which the browser cannot import (only
 // server/public is served).
 const CLAUDE_LONG_CONTEXT_LIMIT_TOKENS = 1000000;
+// Mirrors shared/deepseek-models.mjs for the same reason.
+const DEEPSEEK_CONTEXT_WINDOW_TOKENS = 1048576;
 export const UNKNOWN_WINDOW_LABEL = '—';
 
 // Shared by the context chip and both model pickers so a window reads the same
@@ -44,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 = '',
@@ -59,7 +63,11 @@ export function buildContextTierOptions({
   // metadata either (that number is Copilot's): one blank default, as for a
   // Claude model whose window is unknown.
   if (provider === 'claude-cloud') return [{ value: 'default', label: UNKNOWN_WINDOW_LABEL }];
-  const claudeTierList = provider === 'claude' ? claudeTiersForModel(modelId, claudeTiers) : null;
+  // 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' || 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

@@ -23,6 +23,16 @@ export function isConversationUsingGrokProvider(conversation = null) {
   return resolveConversationProviderType(conversation) === 'grok';
 }
 
+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.
@@ -36,9 +46,11 @@ 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',
+  deepseek: 'DeepSeek',
   github: 'Copilot',
   'github-copilot': 'Copilot',
 });
@@ -74,8 +86,12 @@ 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',
   'claude-cloud': `${CLAUDE_CLOUD_MARKER} Claude Cloud`,
 };
 
@@ -93,9 +109,11 @@ 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';
+  if (normalized === 'deepseek') return 'deepseek';
   if (normalized === 'github' || normalized === 'github-copilot') return 'github';
   return '';
 }

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.
@@ -3523,6 +3527,17 @@ function runRelayErrorCta(cta) {
   }
   if (cta === 'open-grok-settings') openSettingsModal('providers', 'grok');
   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) {
@@ -4613,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
         ? {
@@ -4626,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/deepseek-settings-ui.js

@@ -0,0 +1,342 @@
+// Settings → Providers → DeepSeek: the key (written, never read back), the
+// switch, the default model, the commit attribution, the monthly budget for
+// the usage card with its currency, the starting balance its balance bar
+// measures from and, under Advanced, the base URL. The
+// relay discovers the models when a key is saved. Below them, the import of
+// DeepSeek's usage export (two CSV files) for the usage card.
+
+import { importDeepSeekUsageExport as postDeepSeekUsageExport, loadDeepSeekSettings, updateDeepSeekSettings } from './api-client.js';
+import { showTransientRelayNotice } from './store.js';
+
+const DEFAULT_MODEL = 'deepseek-flash';
+const DEFAULT_BASE_URL = 'https://api.deepseek.com';
+
+let updateInFlight = false;
+let inputsDirty = false;
+// The starting balance field was typed in since the tab was filled.
+let startingBalanceEdited = false;
+let state = {
+  configured: false,
+  enabled: false,
+  model: DEFAULT_MODEL,
+  availableModels: [DEFAULT_MODEL, 'deepseek-v4-pro'],
+  baseUrl: DEFAULT_BASE_URL,
+  attribution: 'oar',
+  monthlyBudget: null,
+  // 'USD' or 'CNY'; null for a budget saved before the currency was stored
+  // (the card reads it in the balance's currency), or no budget.
+  monthlyBudgetCurrency: null,
+  startingBalance: null,
+  // What the relay says of the starting balance (for example that a later
+  // top-up has replaced it), or null.
+  startingBalanceNote: null,
+};
+
+const BUDGET_CURRENCIES = ['USD', 'CNY'];
+
+const CONTROL_IDS = [
+  'deepseek-api-key-input',
+  'deepseek-model-select',
+  'deepseek-attribution-select',
+  'deepseek-monthly-budget-input',
+  'deepseek-monthly-budget-currency-select',
+  'deepseek-starting-balance-input',
+  'deepseek-base-url-input',
+  'deepseek-enabled-toggle',
+  'deepseek-save-btn',
+  'deepseek-remove-btn',
+];
+
+function element(id) {
+  return document.getElementById(id);
+}
+
+function ensureInputTracking() {
+  for (const id of ['deepseek-api-key-input', 'deepseek-model-select', 'deepseek-attribution-select', 'deepseek-monthly-budget-input', 'deepseek-monthly-budget-currency-select', 'deepseek-starting-balance-input', 'deepseek-base-url-input']) {
+    const input = element(id);
+    if (!input || input.dataset.deepseekDirtyTracking === '1') continue;
+    input.dataset.deepseekDirtyTracking = '1';
+    input.addEventListener(input.tagName === 'SELECT' ? 'change' : 'input', () => {
+      inputsDirty = true;
+      if (id === 'deepseek-starting-balance-input') startingBalanceEdited = 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;
+}
+
+export function applyDeepSeekSettingsState(settings = {}, { resetInputs = false } = {}) {
+  ensureInputTracking();
+  const available = Array.isArray(settings?.availableModels)
+    ? settings.availableModels.map((value) => String(value || '').trim()).filter(Boolean)
+    : state.availableModels;
+  state = {
+    configured: settings?.configured === true,
+    enabled: settings?.configured === true && settings?.enabled === true,
+    model: String(settings?.model || state.model || DEFAULT_MODEL).trim() || DEFAULT_MODEL,
+    availableModels: available.length ? available : state.availableModels,
+    baseUrl: String(settings?.baseUrl || DEFAULT_BASE_URL).trim() || DEFAULT_BASE_URL,
+    attribution: settings?.attribution === 'off' ? 'off' : 'oar',
+    monthlyBudget: Number.isFinite(Number(settings?.monthlyBudget)) && Number(settings.monthlyBudget) > 0 ? Number(settings.monthlyBudget) : null,
+    monthlyBudgetCurrency: BUDGET_CURRENCIES.includes(String(settings?.monthlyBudgetCurrency || '').toUpperCase())
+      ? String(settings.monthlyBudgetCurrency).toUpperCase()
+      : null,
+    startingBalance: Number.isFinite(Number(settings?.startingBalance)) && Number(settings.startingBalance) > 0 ? Number(settings.startingBalance) : null,
+    startingBalanceNote: String(settings?.startingBalanceNote || '').trim() || null,
+  };
+  const keepInputs = inputsDirty && !resetInputs;
+  const keyInput = element('deepseek-api-key-input');
+  if (keyInput && !keepInputs) {
+    keyInput.value = '';
+    keyInput.placeholder = state.configured ? 'Saved API key (enter to replace)' : 'DeepSeek API key…';
+  }
+  const modelSelect = element('deepseek-model-select');
+  if (modelSelect && !keepInputs) fillModelSelect(modelSelect);
+  const attributionSelect = element('deepseek-attribution-select');
+  if (attributionSelect && !keepInputs) attributionSelect.value = state.attribution;
+  const budgetInput = element('deepseek-monthly-budget-input');
+  if (budgetInput && !keepInputs) budgetInput.value = state.monthlyBudget === null ? '' : String(state.monthlyBudget);
+  const budgetCurrencySelect = element('deepseek-monthly-budget-currency-select');
+  // A new budget is in dollars unless chosen otherwise; a budget saved
+  // without a currency stays in the balance's until one is chosen.
+  if (budgetCurrencySelect && !keepInputs) budgetCurrencySelect.value = state.monthlyBudgetCurrency || (state.monthlyBudget === null ? 'USD' : '');
+  const startingInput = element('deepseek-starting-balance-input');
+  if (startingInput && !keepInputs) startingInput.value = state.startingBalance === null ? '' : String(state.startingBalance);
+  const startingStatus = element('deepseek-starting-balance-status');
+  if (startingStatus) {
+    startingStatus.textContent = state.startingBalanceNote || '';
+    startingStatus.hidden = !state.startingBalanceNote;
+  }
+  const baseUrlInput = element('deepseek-base-url-input');
+  if (baseUrlInput && !keepInputs) baseUrlInput.value = state.baseUrl === DEFAULT_BASE_URL ? '' : state.baseUrl;
+  if (resetInputs) {
+    inputsDirty = false;
+    startingBalanceEdited = false;
+  }
+  const toggle = element('deepseek-enabled-toggle');
+  if (toggle) {
+    toggle.checked = state.enabled;
+    toggle.disabled = updateInFlight || !state.configured;
+  }
+  const removeButton = element('deepseek-remove-btn');
+  if (removeButton) removeButton.disabled = updateInFlight || !state.configured;
+  const status = element('deepseek-settings-status');
+  if (status) {
+    status.textContent = state.enabled
+      ? 'DeepSeek is enabled. Select DeepSeek in New Chat to use it.'
+      : (state.configured
+          ? 'API key saved but currently disabled. Enable it to allow DeepSeek selection in New Chat.'
+          : 'Not configured. New conversations use GitHub Copilot.');
+    status.dataset.state = state.enabled ? 'active' : (state.configured ? 'saved' : 'unconfigured');
+  }
+  window.syncAutoModelAvailability?.();
+  return state;
+}
+
+export async function refreshDeepSeekSettingsState() {
+  const settings = await loadDeepSeekSettings();
+  if (!settings) return null;
+  return applyDeepSeekSettingsState(settings);
+}
+
+/** Called when the Settings modal opens. */
+export async function syncDeepSeekSettingsInputs() {
+  inputsDirty = false;
+  startingBalanceEdited = false;
+  ensureInputTracking();
+  const status = element('deepseek-settings-status');
+  const settings = await refreshDeepSeekSettingsState();
+  if (!settings && status) {
+    status.textContent = 'Unable to load DeepSeek 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 updateDeepSeekSettings(payload);
+    if (!result) throw new Error(failureText);
+    applyDeepSeekSettingsState(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 removal (409) names the conversations in its message.
+    alert(error?.message || failureText);
+    return null;
+  } finally {
+    updateInFlight = false;
+    setControlsDisabled(false);
+    applyDeepSeekSettingsState(state);
+  }
+}
+
+export async function saveDeepSeekSettings() {
+  const apiKey = String(element('deepseek-api-key-input')?.value || '').trim();
+  if (!apiKey && !state.configured) {
+    alert('Enter a DeepSeek API key.');
+    return;
+  }
+  const baseUrlText = String(element('deepseek-base-url-input')?.value || '').trim();
+  const budgetText = String(element('deepseek-monthly-budget-input')?.value || '').trim();
+  const monthlyBudget = budgetText ? Number(budgetText) : null;
+  if (budgetText && !(Number.isFinite(monthlyBudget) && monthlyBudget >= 0)) {
+    alert('The monthly budget must be an amount of zero or more, or empty for no budget bar.');
+    return;
+  }
+  const startingText = String(element('deepseek-starting-balance-input')?.value || '').trim();
+  const startingBalance = startingText ? Number(startingText) : null;
+  if (startingText && !(Number.isFinite(startingBalance) && startingBalance >= 0)) {
+    alert('The starting balance must be an amount of zero or more, or empty to measure from the balance after the last top-up.');
+    return;
+  }
+  await runUpdate({
+    apiKey,
+    model: String(element('deepseek-model-select')?.value || state.model || DEFAULT_MODEL),
+    attribution: String(element('deepseek-attribution-select')?.value || state.attribution),
+    // Empty is DeepSeek's own endpoint.
+    baseUrl: baseUrlText || null,
+    // Empty (or zero) is no budget bar on the usage card. The currency goes
+    // with the amount; empty is the balance's currency.
+    monthlyBudget,
+    monthlyBudgetCurrency: String(element('deepseek-monthly-budget-currency-select')?.value || '').trim() || null,
+    // Empty (or zero): the balance bar measures from the balance after the
+    // last top-up the relay has seen (before one, the highest balance read).
+    startingBalance,
+    // Typed in since the tab was filled: only then does the relay set a
+    // starting balance a top-up has replaced anew (the same amount too). The
+    // relay decides "replaced" itself, so a tab opened before a top-up was
+    // seen does not bring the old amount back when another field is saved.
+    startingBalanceEdited,
+    enabled: state.configured ? state.enabled : true,
+  }, {
+    successText: (result) => `DeepSeek settings saved for ${result.model}.`,
+    failureText: 'Failed to save DeepSeek settings.',
+    resetInputs: true,
+  });
+}
+
+export async function toggleDeepSeekProvider(enabled) {
+  if (enabled && !state.configured) {
+    applyDeepSeekSettingsState(state);
+    alert('Save a DeepSeek API key before enabling DeepSeek.');
+    return;
+  }
+  await runUpdate({ enabled: enabled === true }, {
+    successText: (result) => (result.enabled ? 'DeepSeek enabled.' : 'DeepSeek disabled.'),
+    failureText: 'Failed to update the DeepSeek provider.',
+  });
+}
+
+export async function removeDeepSeekSettings() {
+  if (!state.configured) return;
+  if (!confirm('Remove the saved DeepSeek API key?')) return;
+  await runUpdate({ remove: true }, {
+    successText: 'DeepSeek API key removed. New conversations use GitHub Copilot.',
+    failureText: 'Failed to remove DeepSeek settings.',
+    resetInputs: true,
+  });
+}
+
+// The export's times keep its offset: "2026-10-26T00:00:00+01:00" reads
+// "2026-10-26 00:00 (UTC+01:00)".
+function exportTimeLabel(value) {
+  const match = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})(?::\d{2}(?:\.\d+)?)?(Z|[+-]\d{2}:\d{2})?$/.exec(String(value || ''));
+  if (!match) return String(value || '');
+  const zone = !match[3] || match[3] === 'Z' ? 'UTC' : `UTC${match[3]}`;
+  return `${match[1]} ${match[2]} (${zone})`;
+}
+
+function listText(items) {
+  if (items.length <= 1) return items.join('');
+  return `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`;
+}
+
+/** The import's answer, in the panel. */
+export function deepseekUsageImportSummaryText(summary = {}) {
+  const days = Array.isArray(summary.days) ? summary.days : [];
+  const models = Array.isArray(summary.models) ? summary.models : [];
+  const keys = Array.isArray(summary.keys) ? summary.keys : [];
+  const rows = Number(summary.rows) || 0;
+  const parts = [];
+  if (!rows) {
+    parts.push('Nothing to import: the export has no period that has ended.');
+  } else {
+    const span = days.length > 1 ? `${days[0]} to ${days.at(-1)}` : (days[0] || '');
+    parts.push(`Imported ${rows} row${rows === 1 ? '' : 's'}${span ? ` for ${span}` : ''}${models.length ? `: ${listText(models)}` : ''}.`);
+  }
+  const skipped = Array.isArray(summary.skippedPeriods) ? summary.skippedPeriods.length : 0;
+  if (skipped) parts.push(`${skipped} period${skipped === 1 ? '' : 's'} not ended yet left out.`);
+  const currencies = Array.isArray(summary.currencies) ? summary.currencies : [];
+  const cardCurrency = summary.cardCurrency || '';
+  const exportCurrency = currencies.length ? listText(currencies) : '';
+  if (rows && summary.savedKeyMatched && summary.currencyMatched === false) {
+    parts.push(`The export is in ${exportCurrency || 'another currency'}, the usage card in ${cardCurrency} (the balance's): the card does not use these figures and stays estimated.`);
+  } else if (rows && summary.savedKeyMatched) {
+    const inCurrency = exportCurrency ? ` (${exportCurrency})` : '';
+    const cardNote = !cardCurrency && exportCurrency ? ` It uses them while the balance is in ${exportCurrency}.` : '';
+    parts.push(`The usage card shows the saved key's figures${inCurrency} on the export's days through ${exportTimeLabel(summary.through)}, estimated on the others.${cardNote}`);
+  } else if (rows && summary.savedKeyFp) {
+    parts.push(`The saved key (${summary.savedKeyFp}) is not in this export${keys.length ? `, only ${listText(keys.map((key) => key.keyFp))}` : ''}; the usage card stays estimated.`);
+  } else if (rows) {
+    parts.push('No DeepSeek key is saved: save the key this export belongs to and the usage card shows its figures.');
+  }
+  return parts.join(' ');
+}
+
+let importInFlight = false;
+
+function setImportStatus(text, stateName) {
+  const status = element('deepseek-usage-import-status');
+  if (!status) return;
+  status.textContent = text;
+  status.dataset.state = stateName;
+}
+
+export async function importDeepSeekUsageExport() {
+  if (importInFlight) return null;
+  const amountFile = element('deepseek-usage-amount-input')?.files?.[0] || null;
+  const costFile = element('deepseek-usage-cost-input')?.files?.[0] || null;
+  if (!amountFile || !costFile) {
+    setImportStatus('Choose both files of the export: the amount file and the cost file.', 'error');
+    return null;
+  }
+  const button = element('deepseek-usage-import-btn');
+  importInFlight = true;
+  if (button) button.disabled = true;
+  setImportStatus('Importing…', 'saved');
+  try {
+    const [amount, cost] = await Promise.all([amountFile.text(), costFile.text()]);
+    const result = await postDeepSeekUsageExport({ amount, cost });
+    if (!result?.ok) throw new Error('The relay could not be reached.');
+    const used = result.summary?.savedKeyMatched && result.summary?.currencyMatched !== false;
+    setImportStatus(deepseekUsageImportSummaryText(result.summary), used ? 'active' : 'saved');
+    return result;
+  } catch (error) {
+    setImportStatus(String(error?.message || 'The import failed.'), 'error');
+    return null;
+  } finally {
+    importInFlight = false;
+    if (button) button.disabled = false;
+  }
+}

package/server/public/app/inbox-ui.js

@@ -41,6 +41,10 @@ const drafts = new Map();
 // replaces it; the socket updates single asks in between).
 let sessionAsks = new Map();
 let sessionCardKey = '';
+// Where the Inbox was scrolled when it was last left; the next opening
+// starts there (the first one at the top). The transcript's own scroll
+// height is the transcript's, never the Inbox's.
+let inboxScrollTop = 0;
 
 function readFilter() {
   try {
@@ -90,12 +94,17 @@ function restoreDrafts(host, focusedKey) {
   }
 }
 
-function renderInboxNow() {
+/**
+ * Draws the Inbox into the transcript's place. A re-render keeps the scroll
+ * height; the render that opens the view (`opening`) takes the height the
+ * Inbox had when it was last left, not the one the transcript showed.
+ */
+function renderInboxNow({ opening = false } = {}) {
   if (!inboxActive) return;
   const host = document.getElementById('messages');
   if (!host) return;
   const focused = captureDrafts(host);
-  const top = host.scrollTop;
+  const top = opening ? inboxScrollTop : host.scrollTop;
   host.replaceChildren(renderInbox(document, { relays, filter, now: Date.now(), loading: !loaded }));
   restoreDrafts(host, focused);
   host.scrollTop = top;
@@ -153,6 +162,8 @@ export function noteInboxQuestionsChanged() {
 export function leaveInboxView() {
   const wasActive = inboxActive;
   if (!wasActive) return false;
+  const host = document.getElementById('messages');
+  if (host) inboxScrollTop = Math.max(0, Number(host.scrollTop) || 0);
   inboxActive = false;
   document.body.classList.remove('inbox-view-active');
   document.getElementById('input-area')?.removeAttribute('hidden');
@@ -187,7 +198,7 @@ export async function toggleInboxView() {
     }
   }
   syncInboxBadge();
-  renderInboxNow();
+  renderInboxNow({ opening: true });
   document.getElementById('sidebar')?.classList.remove('open');
   document.getElementById('sidebar-overlay')?.classList.remove('visible');
   await refreshInbox();