agl 40.4.0 → 40.5.1

package/ts_web/elements.accounts.ts

@@ -1,11 +1,13 @@
 import * as plugins from './plugins.js';
 import type * as interfaces from '../ts_interfaces/index.js';
-import { isControllerReserveLiftHours } from '../ts_interfaces/index.js';
+import { controllerApiKeyMaxLength, isControllerReserveLiftHours } from '../ts_interfaces/index.js';
 import type { ControllerSocketClient } from './classes.controllersocketclient.js';
 import {
   accountsHowTo,
   accountsView,
   answerNotice,
+  apiKeyAddedNotice,
+  apiKeyReason,
   claudeHostReadPending,
   claudeHostView,
   claudeReadPending,
@@ -31,6 +33,8 @@ import {
   recheckNotice,
   renameReason,
   servicePanel,
+  spendLimitDraft,
+  spendLimitReason,
   usageTargets,
   type IAccountActionSlot,
   type IAccountLoginView,
@@ -102,9 +106,27 @@ type TAccountsDialog =
   | { kind: 'codexRelease'; accountId: string }
   | { kind: 'preuse'; accountId: string; loginId: string }
   | { kind: 'liftReserve'; accountId: string }
+  /** Adding an API key of the provider Add account chose. */
+  | { kind: 'apiKey'; providerId: interfaces.TControllerApiKeyProvider }
   | { kind: 'claudeRelease' }
   | { kind: 'claudeRepair' };
 
+/** What a spend limit does, under its field. */
+const spendLimitDescription = 'What AGL\'s own traffic on the key may cost in a calendar month (UTC), in dollars. At'
+  + ' the limit AGL places nothing more on the key until the month ends; answers already running finish. Keep the'
+  + ' provider\'s own limit higher, as the backstop for everything else that uses the key.';
+
+/**
+ * How long the browser waits for an added key: the accounts service gives the provider 15 seconds to answer whether it
+ * accepts the key, and the controller answers once its own projection shows the account.
+ */
+const apiKeyAddTimeoutMs = 60_000;
+
+/** A key's provider by name, as the Add API key dialog names it. */
+const apiKeyProviderName = (providerIdArg: interfaces.TControllerApiKeyProvider): string => (
+  providerIdArg === 'openai' ? 'OpenAI' : 'Anthropic'
+);
+
 /** What a usage threshold does, under its field. */
 const maxUsageDescription = 'At this share of any usage window AGL places no new work on the account and moves its'
   + ' sessions on, so the rest stays yours outside AGL.';
@@ -166,8 +188,9 @@ const liftOptions = Array.from({ length: 24 }, (_, indexArg) => ({
 }));
 
 /**
- * The Accounts screen: the accounts service's ChatGPT and Claude accounts as a list of one-line rows -- one status, the
- * tightest usage window -- that each open the account's own page; the tools on this host; and the service itself.
+ * The Accounts screen: the accounts service's ChatGPT and Claude accounts and OpenAI and Anthropic API keys as a list of
+ * one-line rows -- one status, the tightest usage window or a key's month -- that each open the account's own page; the
+ * tools on this host; and the service itself.
  *
  * It holds no account state of its own. It renders the controller's projection and Flex's connections as the app hands
  * them over, re-reads when the controller announces a change, and runs no timer and no poll -- so a failed read is a
@@ -236,6 +259,24 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
   @plugins.deesElement.state()
   private accessor maxUsageDraft: string | null = null;
 
+  /** A key's spend limit, in dollars, as the open page's field holds it while edited; `null` while it shows the saved one. */
+  @plugins.deesElement.state()
+  private accessor spendLimitDraft: string | null = null;
+
+  /**
+   * Whether the Add API key dialog's key field holds a key. The key itself stays in its field only, which leaves the
+   * page with the dialog; it is read from there when the owner adds it.
+   */
+  @plugins.deesElement.state()
+  private accessor apiKeyTyped = false;
+
+  /** The name and the spend limit, in dollars, the Add API key dialog holds. */
+  @plugins.deesElement.state()
+  private accessor apiKeyName = '';
+
+  @plugins.deesElement.state()
+  private accessor apiKeyLimit = '';
+
   /** What the screen read of Claude Code's own home on this host. */
   @plugins.deesElement.state()
   private accessor claudeHost: TAccountsClaudeHostRead = claudeHostReadPending;
@@ -386,7 +427,7 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
       }
 
       .figure { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
-      .tile.loud .figure { color: var(--dees-color-accent-warning); }
+      .tile.loud .figure { color: var(--dees-color-text-warning); }
       .of { color: var(--dees-color-text-muted); font-size: var(--dees-font-footnote-size); font-weight: 500; }
       .tileLabel { font-size: var(--dees-font-footnote-size); font-weight: 500; }
 
@@ -490,6 +531,9 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
       }
 
       .meterValue { color: var(--dees-color-text-secondary); font-variant-numeric: tabular-nums; }
+      .spend { margin: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); }
+      .spend.attention { color: var(--dees-color-text-warning); }
+      .spend.critical { color: var(--dees-color-text-error); }
       .row dees-badge { justify-self: end; }
       .chevron { color: var(--dees-color-label-quaternary, var(--dees-color-text-muted)); }
 
@@ -756,7 +800,10 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
       this.settleStartedClaudeSignIns(authority);
       const targets = usageTargets(accountsView(this.read, this.projects, this.flex));
       for (const target of targets) {
-        if (rereadUsageArg || !this.usage.has(target.accountId)) void this.readUsage(target.accountId, target.loginId);
+        // A key's spend moves with every answer AGL relays on it, and each change of it the controller announces.
+        if (rereadUsageArg || target.apiKey || !this.usage.has(target.accountId)) {
+          void this.readUsage(target.accountId, target.loginId);
+        }
       }
     } catch (errorArg) {
       if (generation !== this.readGeneration) return;
@@ -870,8 +917,9 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
   }
 
   /**
-   * Re-checks one Claude account: the service reads it at once and clears its payment problem when it reads healthy.
-   * The usage it answers replaces what the row showed, and the notice says how the read went.
+   * Re-checks one Claude account or API key: the service reads a Claude account at once and clears its payment problem
+   * when it reads healthy, and lifts a key's hold without asking its provider. The usage it answers replaces what the
+   * row showed, and the notice says how the read went.
    */
   private async recheckUsage(accountIdArg: string, loginIdArg: string, labelArg: string): Promise<void> {
     const client = this.client;
@@ -945,6 +993,7 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
     this.dialogAnswer = null;
     this.dialogCheck = false;
     this.liftHours = undefined;
+    this.forgetApiKeyDrafts();
   }
 
   /** Closes the dialog on screen before it leaves the template, so focus returns to the control that opened it. */
@@ -959,6 +1008,14 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
     this.dialogAnswer = null;
     this.dialogCheck = false;
     this.liftHours = undefined;
+    this.forgetApiKeyDrafts();
+  }
+
+  /** The Add API key dialog's drafts; its key field leaves the page with the dialog. */
+  private forgetApiKeyDrafts(): void {
+    this.apiKeyTyped = false;
+    this.apiKeyName = '';
+    this.apiKeyLimit = '';
   }
 
   /** Asks the app to run a Flex action; Flex's state and its requests live there. */
@@ -999,6 +1056,47 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
     });
   }
 
+  /** Sets an API key's monthly spend limit from the field, in dollars, or clears it with `null`. */
+  private async setSpendLimit(rowArg: IAccountRow, spendLimitMicroUsdArg: number | null): Promise<void> {
+    await this.runAction(`spendlimit:${rowArg.accountId}`, async () => {
+      const { answer } = await this.client!.fire<interfaces.IReq_ControllerAccountsSpendLimit>(
+        'controller.accounts.spendlimit',
+        { accountId: rowArg.accountId, expectedRevision: rowArg.revision, spendLimitMicroUsd: spendLimitMicroUsdArg },
+        { maxRetries: 0 },
+      );
+      this.notice = answerNotice(answer);
+      if (answer.state === 'done') this.spendLimitDraft = null;
+      await this.refresh();
+    });
+  }
+
+  /**
+   * Adds the API key the dialog holds. The accounts service asks the provider whether it accepts the key before it holds
+   * anything, so the dialog's fields stay locked while it does; added, the dialog closes and the screen says the spend
+   * limit the account actually has -- a key added again keeps its earlier one unless this add named one. A refusal stays
+   * in the dialog, and nothing is sent again on its own.
+   */
+  private async addApiKey(providerIdArg: interfaces.TControllerApiKeyProvider): Promise<void> {
+    const field = this.shadowRoot?.querySelector<plugins.deesCatalog.DeesInputText>(
+      'dialog[data-dialog="apiKey"] dees-input-text[data-api-key]');
+    const apiKey = String(field?.value ?? '').trim();
+    const label = this.apiKeyName.trim();
+    const limit = this.apiKeyLimit.trim();
+    if (apiKeyReason(apiKey !== '', label, limit) !== '') return;
+    const spendLimitMicroUsd = limit ? plugins.authswitchSpend.authSwitchParseUsd(limit) : null;
+    await this.runInDialog(`apikey:${providerIdArg}`, async () => {
+      const { answer } = await this.client!.fire<interfaces.IReq_ControllerAccountsApiKeyAdd>(
+        'controller.accounts.apikey.add',
+        { providerId: providerIdArg, apiKey, ...(label ? { label } : {}),
+          ...(spendLimitMicroUsd === null ? {} : { spendLimitMicroUsd }) },
+        { timeoutMs: apiKeyAddTimeoutMs, maxRetries: 0 },
+      );
+      this.notice = answer.state === 'done' ? apiKeyAddedNotice(answer.value.account) : answerNotice(answer);
+      if (answer.state === 'done') await this.refresh();
+      return answer.state === 'done';
+    });
+  }
+
   /** Lifts the account's reserve for the hours the dialog holds. An uncertain send is never retried. */
   private async liftReserve(rowArg: IAccountRow): Promise<void> {
     const hours = this.liftHours;
@@ -1306,6 +1404,7 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
     this.openKey = rowArg.key;
     this.renaming = false;
     this.maxUsageDraft = null;
+    this.spendLimitDraft = null;
   }
 
   private renderNotice(noticeArg: IAccountsNotice): plugins.deesElement.TemplateResult {
@@ -1363,7 +1462,7 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
       ${viewArg.operations.map((operationArg) => this.renderOperation(operationArg))}
       ${viewArg.claudeSignIns.map((signInArg) => this.renderClaudeSignIn(signInArg))}
       ${list.groups.map((groupArg) => plugins.deesElement.html`
-        <section class="group" data-provider-group=${groupArg.providerId}>
+        <section class="group" data-provider-group=${groupArg.id}>
           <div class="groupHead"><h3 class="groupTitle">${groupArg.label}</h3><span>${groupArg.rows.length}</span></div>
           <div class="card rows" role="list" aria-label=${`${groupArg.label} accounts`}>
             ${groupArg.rows.map((rowArg) => plugins.deesElement.html`<div role="listitem">${renderListRow(rowArg, open)}</div>`)}
@@ -1414,8 +1513,9 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
         <div class="itemText">${loginArg.statusText}</div>
         <dl class="facts">
           ${loginArg.causeText ? plugins.deesElement.html`<dt>Cause</dt><dd>${loginArg.causeText}</dd>` : ''}
-          <dt>Renewed by</dt><dd>${loginArg.renewedBy}</dd>
-          <dt>Next automatic renewal</dt><dd>${loginArg.renewalText}</dd>
+          ${loginArg.renewedBy ? plugins.deesElement.html`<dt>Renewed by</dt><dd>${loginArg.renewedBy}</dd>` : ''}
+          ${loginArg.renewalText
+            ? plugins.deesElement.html`<dt>Next automatic renewal</dt><dd>${loginArg.renewalText}</dd>` : ''}
           <dt>Last checked</dt><dd>${loginArg.observedText}</dd>
         </dl>
         ${this.slots([...(loginArg.reauth ? [loginArg.reauth] : []), ...(loginArg.preuse ? [loginArg.preuse] : [])],
@@ -1494,12 +1594,64 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
     `;
   }
 
+  /**
+   * An API key's monthly spend limit in dollars, saved with its own Save, or removed so the key serves without one. A
+   * limit below what the month spent holds the key at its next request.
+   */
+  private renderSpendLimit(rowArg: IAccountRow, slotArg: IAccountActionSlot): plugins.deesElement.TemplateResult {
+    const saved = rowArg.spendLimitMicroUsd;
+    if (saved === null && this.spendLimitDraft === null) {
+      return plugins.deesElement.html`
+        <div class="item" data-spend-limit>
+          <div>
+            <div class="itemLabel">Monthly spend limit</div>
+            <div class="itemText">Not set: AGL places requests on the key whatever they cost this month. Set a limit to
+              stop at an amount of your choosing.</div>
+          </div>
+          ${this.slots([slotArg], () => { this.spendLimitDraft = ''; }, () => 'Set a limit…')}
+        </div>
+      `;
+    }
+    const draft = this.spendLimitDraft ?? spendLimitDraft(saved!);
+    const reason = slotArg.reason || spendLimitReason(draft, saved);
+    return plugins.deesElement.html`
+      <div class="item stacked" data-spend-limit>
+        <div>
+          <div class="itemLabel">Monthly spend limit</div>
+          <div class="itemText">${spendLimitDescription}</div>
+        </div>
+        <div class="inline">
+          <span class="itemText">$</span>
+          <dees-input-text .label=${'Monthly spend limit ($)'} .labelPosition=${'none'} .value=${draft}
+            @input=${(eventArg: Event) => {
+              const target = eventArg.currentTarget as HTMLElement & { value?: string };
+              this.spendLimitDraft = target.value ?? '';
+            }}></dees-input-text>
+          <div>${this.slots(
+            [
+              { id: 'spendLimit', label: 'Save', icon: 'lucide:Check', reason },
+              ...(saved === null ? []
+                : [{ id: 'clearSpendLimit' as const, label: 'No limit', icon: 'lucide:X', reason: slotArg.reason }]),
+            ],
+            (runArg) => void this.setSpendLimit(rowArg, runArg.id === 'clearSpendLimit' ? null
+              : plugins.authswitchSpend.authSwitchParseUsd(draft)),
+          )}</div>
+          ${saved === null
+            ? plugins.deesElement.html`<dees-button size="sm" type="ghost" text="Keep it unset" data-action="keepSpendLimit"
+                @clicked=${() => { this.spendLimitDraft = null; }}></dees-button>`
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+
   /** An account's own page: everything the row stands for, each change with its own control, risky ones confirmed. */
   private renderPage(rowArg: IAccountRow): plugins.deesElement.TemplateResult {
     const slot = (idArg: TAccountActionId) => rowArg.manage.find((slotArg) => slotArg.id === idArg)
       ?? rowArg.actions.find((slotArg) => slotArg.id === idArg) ?? null;
     const renameSlot = slot('rename');
     const maxUsageSlot = slot('maxUsage');
+    const spendLimitSlot = slot('spendLimit');
     const liftSlot = slot('liftReserve');
     const removeSlot = slot('remove');
     const useCodexSlot = slot('useCodex');
@@ -1535,6 +1687,9 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
       }
     };
     const confirmLabel = (slotArg: IAccountActionSlot) => `${slotArg.label}…`;
+    // A key's usage is its month's spend, and its one login is the key itself.
+    const usageHead = rowArg.apiKey ? 'Spend' : 'Usage';
+    const signInHead = rowArg.apiKey ? 'Key' : 'Sign-in';
     return plugins.deesElement.html`
       <section class="page" data-account-page=${rowArg.key} aria-label=${`Account ${rowArg.label}`}>
         <button class="back" type="button" data-action="back" @click=${() => { this.openKey = ''; }}>
@@ -1573,10 +1728,13 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
               </div></div>
             </section>`
           : ''}
-        <section class="section" data-usage aria-label=${`Usage · ${rowArg.usage?.freshness ?? ''}`}>
-          <div class="sectionHead"><span>Usage</span><span>${rowArg.usage?.freshness ?? ''}</span></div>
-          ${renderUsageMeters(rowArg, rowArg.usage?.problemText
+        <section class="section" data-usage aria-label=${`${usageHead} · ${rowArg.usage?.freshness ?? ''}`}>
+          <div class="sectionHead"><span>${usageHead}</span><span>${rowArg.usage?.freshness ?? ''}</span></div>
+          ${renderUsageMeters(rowArg, rowArg.usage?.problemText || rowArg.usage?.spend?.unmeteredText
             || rowArg.facts.find((factArg) => factArg.label === 'Usage')?.value || 'No reading yet.')}
+          ${rowArg.usage?.spend
+            ? plugins.deesElement.html`<p class=${`spend ${rowArg.usage.spend.tone}`} data-spend>${rowArg.usage.spend.text}</p>`
+            : ''}
           ${rowArg.usage?.problemText && rowArg.usage.meters.length
             ? plugins.deesElement.html`<p class="reason">${rowArg.usage.problemText}</p>` : ''}
           ${rowArg.limitStatus
@@ -1585,6 +1743,12 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
             : ''}
           ${usageSlots.length ? this.slots(usageSlots, run) : ''}
         </section>
+        ${spendLimitSlot
+          ? plugins.deesElement.html`<section class="section" data-limits aria-label="Limits">
+              <div class="sectionHead"><span>Limits</span></div>
+              <div class="card">${this.renderSpendLimit(rowArg, this.effectiveSlot(spendLimitSlot))}</div>
+            </section>`
+          : ''}
         ${maxUsageSlot
           ? plugins.deesElement.html`<section class="section" data-limits aria-label="Limits">
               <div class="sectionHead"><span>Limits</span></div>
@@ -1623,8 +1787,8 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
             </section>`
           : ''}
         ${rowArg.logins.length
-          ? plugins.deesElement.html`<section class="section" data-signin aria-label="Sign-in">
-              <div class="sectionHead"><span>Sign-in</span></div>
+          ? plugins.deesElement.html`<section class="section" data-signin aria-label=${signInHead}>
+              <div class="sectionHead"><span>${signInHead}</span></div>
               <div class="card">
                 ${rowArg.logins.map((loginArg) => this.renderLogin(rowArg, loginArg))}
                 ${claudeSignIn ? plugins.deesElement.html`<div class="item">
@@ -1645,11 +1809,11 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
           ? plugins.deesElement.html`<section class="section" data-remove aria-label="Remove">
               <div class="card"><div class="item">
                 <div>
-                  <div class="itemLabel">Remove account</div>
+                  <div class="itemLabel">${rowArg.apiKey ? 'Remove key' : 'Remove account'}</div>
                   <div class="itemText">${rowArg.hostCodex
                     ? 'Codex on this host runs on it, so removing hands Codex\'s sign-in to AGL first. Using the account'
                       + ' again takes a new sign-in.'
-                    : 'AGL stops placing work on it. Using it again takes a new sign-in.'}</div>
+                    : rowArg.removeNote || 'AGL stops placing work on it. Using it again takes a new sign-in.'}</div>
                 </div>
                 <div>${this.slots([removeSlot], run, () => rowArg.hostCodex ? 'Hand to AGL and remove…' : 'Remove…')}</div>
               </div></div>
@@ -1857,7 +2021,8 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
           </button>`;
         };
         return this.dialogShell('add', 'Add account', plugins.deesElement.html`
-          <p class="itemText">AGL places work on the accounts it holds; each one is added with its own sign-in.</p>
+          <p class="itemText">AGL places work on the accounts it holds: a subscription with its own sign-in, and an API key
+            once no subscription can take a request.</p>
           <div class="sectionHead"><span>Subscription</span></div>
           ${choice('chatgpt', viewArg.add, 'ChatGPT', 'Sign in on any device with a one-time code',
             () => void this.addAccount(), 'openai')}
@@ -1867,8 +2032,40 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
             ? plugins.deesElement.html`<div class="inline"><span class="itemText">Codex on this host is signed in already?</span>
                 ${this.slots([viewArg.adoptCodex], () => void this.adoptCodexHost())}</div>`
             : ''}
+          <div class="sectionHead"><span>API key</span></div>
+          ${choice('openai-api-key', viewArg.addApiKey, 'OpenAI API key', 'A key from the OpenAI platform, paid per request',
+            () => this.openDialog({ kind: 'apiKey', providerId: 'openai' }), 'openai')}
+          ${choice('anthropic-api-key', viewArg.addApiKey, 'Anthropic API key', 'A key from the Claude Console, paid per request',
+            () => this.openDialog({ kind: 'apiKey', providerId: 'anthropic' }), 'anthropic')}
         `, this.dialogFoot('Cancel', null));
       }
+      case 'apiKey': {
+        const provider = apiKeyProviderName(dialog.providerId);
+        const running = this.busyAction === `apikey:${dialog.providerId}`;
+        const value = (eventArg: Event): string => String(
+          (eventArg.currentTarget as HTMLElement & { value?: unknown }).value ?? '');
+        return this.dialogShell('apiKey', `Add ${provider} API key`, plugins.deesElement.html`
+          <p class="itemText">An account of its own, which AGL places requests on at API prices once no subscription can take
+            them. ${provider} is asked whether it accepts the key before anything is kept.</p>
+          <dees-input-text data-api-key .label=${'API key'} .isPasswordBool=${true} .autocomplete=${'off'}
+            .maxLength=${controllerApiKeyMaxLength} .disabled=${running}
+            .description=${'Sent to the accounts service, which keeps it sealed and never shows it again.'}
+            @input=${(eventArg: Event) => { this.apiKeyTyped = value(eventArg).trim() !== ''; }}></dees-input-text>
+          <dees-input-text data-api-key-name .label=${'Name (optional)'} .value=${this.apiKeyName} .disabled=${running}
+            @input=${(eventArg: Event) => { this.apiKeyName = value(eventArg); }}></dees-input-text>
+          <dees-input-text data-api-key-limit .label=${'Monthly spend limit in dollars (optional)'} .value=${this.apiKeyLimit}
+            .description=${spendLimitDescription} .disabled=${running}
+            @input=${(eventArg: Event) => { this.apiKeyLimit = value(eventArg); }}></dees-input-text>
+          ${running
+            ? plugins.deesElement.html`<dees-hint data-api-key-progress .type=${'info'}
+                .text=${`Asking ${provider} whether it accepts this key…`}></dees-hint>`
+            : ''}
+        `, this.dialogFoot('Cancel', {
+          label: 'Add key', type: 'accent',
+          reason: apiKeyReason(this.apiKeyTyped, this.apiKeyName, this.apiKeyLimit) || busy(viewArg.addApiKey),
+          run: () => void this.addApiKey(dialog.providerId),
+        }));
+      }
       case 'signIn': {
         const operation = [...viewArg.operations, ...rows.flatMap((rowArg) => rowArg.operations)]
           .find((operationArg) => operationArg.id === dialog.operationId);
@@ -1914,10 +2111,12 @@ export class AglAccounts extends plugins.deesElement.DeesElement {
         const running = this.busyAction === `codex-release:${row.accountId}`;
         const question = asQuestion(handOver
           ? remove ? codexReleaseRemoveConfirmText(row.label) : codexReleaseConfirmText(row.label)
-          : row.assigned
+          : `${row.assigned
             ? `Remove ${row.label}? It is in use by ${row.assignedSummary}. AGL cannot stop those from here, so the`
               + ' removal is refused while they use it.'
-            : `Remove ${row.label}? Nothing uses it. Once removed, using it again takes a new sign-in.`,
+            : row.apiKey ? `Remove ${row.label}? Nothing uses it.`
+              : `Remove ${row.label}? Nothing uses it. Once removed, using it again takes a new sign-in.`}`
+            + (row.removeNote ? ` ${row.removeNote}` : ''),
         remove ? `Remove ${row.label}?` : `Hand Codex's sign-in of ${row.label} to AGL?`);
         return this.dialogShell(dialog.kind, question.title,
           plugins.deesElement.html`

package/ts_web/elements.codexconnections.ts

@@ -33,8 +33,10 @@ const connectionChoices = (
   };
   const profiles = profilesArg.filter(profile => profile.state === 'active');
   const withProfile = new Set(profiles.flatMap(profile => profile.accountId ? [profile.accountId] : []));
+  // A ChatGPT account; an OpenAI API key account (tenancy `api-key`) is no sign-in Codex runs on here.
   const accounts = (authorityArg?.state === 'ready' ? authorityArg.snapshot?.accounts ?? [] : [])
-    .filter(account => account.providerId === 'openai' && !account.removed && !withProfile.has(account.id));
+    .filter(account => account.providerId === 'openai' && account.organizationId !== 'api-key' && !account.removed
+      && !withProfile.has(account.id));
   return [
     ...profiles.map(profile => ({ value: profile.id, name: profile.name, mode: profile.mode,
       reason: profile.accountId ? accountReason(profile.accountId) : '' })),

package/ts_web/plugins.ts

@@ -9,8 +9,9 @@ import * as mpCatalog from '@modelprofile.com/catalog';
 
 import * as simpleWebAuthnBrowser from '@simplewebauthn/browser';
 
-// authswitch's time and preuse sentences, taken from where the Node-loadable read models take them.
-import { authswitchPreuseText } from './accounts.plugins.js';
+// authswitch's time and preuse sentences and an API key's dollar amounts, taken from where the Node-loadable read
+// models take them.
+import { authswitchPreuseText, authswitchSpend } from './accounts.plugins.js';
 
 // Bundled statically: the CSP allows no CDN scripts, so the catalog's lib
 // loader is fed these modules instead of fetching them at runtime. The
@@ -59,6 +60,7 @@ import type {
 
 export {
   authswitchPreuseText,
+  authswitchSpend,
   deesCatalog,
   deesComms,
   deesElement,