Fix assistant "out of credit" messaging due to stale credits data in the host app

packages/ai-bot/lib/matrix/response-publisher.ts

@@ -176,12 +176,13 @@ export default class MatrixResponsePublisher {
     return sendOperation;
   }
 
-  async sendError(error: any) {
+  async sendError(error: any, opts?: { reloadBillingData?: boolean }) {
     sendErrorEvent(
       this.client,
       this.roomId,
       error,
       this.originalResponseEventId,
+      opts,
     );
   }
 

packages/ai-bot/lib/responder.ts

@@ -181,7 +181,10 @@ export class Responder {
     };
   }
 
-  async onError(error: OpenAIError | string) {
+  async onError(
+    error: OpenAIError | string,
+    opts?: { reloadBillingData?: boolean },
+  ) {
     Sentry.captureException(error, {
       extra: {
         roomId: this.matrixResponsePublisher.roomId,
@@ -191,7 +194,7 @@ export class Responder {
     if (this.responseState.isStreamingFinished) {
       return;
     }
-    return await this.matrixResponsePublisher.sendError(error);
+    return await this.matrixResponsePublisher.sendError(error, opts);
   }
 
   async flush() {

packages/ai-bot/main.ts

@@ -442,6 +442,7 @@ Common issues are:
             // Careful when changing this message, it's used in the UI as a detection of whether to show the "Buy credits" button.
             return responder.onError(
               `You need a minimum of ${MINIMUM_AI_CREDITS_TO_CONTINUE} credits to continue using the AI bot. Please upgrade to a larger plan, or top up your account.`,
+              { reloadBillingData: true },
             );
           }
 

packages/host/app/components/ai-assistant/message/index.gts

@@ -2,10 +2,13 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { registerDestructor } from '@ember/destroyable';
 import { hash } from '@ember/helper';
 import { action } from '@ember/object';
+import { scheduleOnce } from '@ember/runloop';
 import { service } from '@ember/service';
 import type { SafeString } from '@ember/template';
 import Component from '@glimmer/component';
 
+import { task } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
 import Modifier from 'ember-modifier';
 import throttle from 'lodash/throttle';
 
@@ -45,6 +48,7 @@ interface Signature {
     isFromAssistant: boolean;
     isStreaming: boolean;
     isLastAssistantMessage: boolean;
+    isMostRecentMessage?: boolean;
     userMessageThisMessageIsRespondingTo?: Message;
     profileAvatar?: ComponentLike;
     collectionResource?: ReturnType<getCardCollection>;
@@ -64,6 +68,7 @@ interface Signature {
       element: HTMLElement;
     }) => void;
     errorMessage?: string;
+    reloadBillingData?: boolean;
     isDebugMessage?: boolean;
     isPending?: boolean;
     retryAction?: () => void;
@@ -234,6 +239,40 @@ class ScrollPosition extends Modifier<ScrollPositionSignature> {
   }
 }
 
+interface ReloadBillingOnInsertSignature {
+  Args: {
+    Named: {
+      shouldReloadBillingData: boolean;
+      reload: () => void;
+    };
+  };
+}
+
+// In the future if we implement subscription to credit consumption, we can remove this modifier
+// It's currently used to reload the billing data when an out of credits error message is shown so that we can
+// conditionally display the "buy more credits" button, or "credits added" message + retry button
+class ReloadBillingOnInsert extends Modifier<ReloadBillingOnInsertSignature> {
+  private hasReloaded = false;
+
+  private runReload(reload: () => void) {
+    reload();
+  }
+
+  modify(
+    _element: HTMLElement,
+    _positional: [],
+    {
+      shouldReloadBillingData,
+      reload,
+    }: ReloadBillingOnInsertSignature['Args']['Named'],
+  ) {
+    if (shouldReloadBillingData && !this.hasReloaded) {
+      this.hasReloaded = true;
+      scheduleOnce('afterRender', this, this.runReload, reload);
+    }
+  }
+}
+
 function isThinkingMessage(s: string | null | undefined) {
   if (!s) {
     return false;
@@ -328,6 +367,12 @@ export default class AiAssistantMessage extends Component<Signature> {
     }
   }
 
+  private reloadBillingDataTask = task(async () => {
+    if (!this.billingService.loadingSubscriptionData) {
+      await this.billingService.loadSubscriptionData();
+    }
+  });
+
   <template>
     <section
       class={{cn
@@ -340,6 +385,10 @@ export default class AiAssistantMessage extends Component<Signature> {
         registerScroller=@registerScroller
         unregisterScroller=@unregisterScroller
       }}
+      {{ReloadBillingOnInsert
+        shouldReloadBillingData=this.shouldReloadBillingData
+        reload=(perform this.reloadBillingDataTask)
+      }}
       data-test-ai-assistant-message
       data-test-ai-assistant-message-pending={{@isPending}}
       ...attributes
@@ -542,6 +591,12 @@ export default class AiAssistantMessage extends Component<Signature> {
     return Boolean(this.args.waitAction || this.args.retryAction);
   }
 
+  private get shouldReloadBillingData() {
+    return Boolean(
+      this.args.reloadBillingData && this.args.isMostRecentMessage,
+    );
+  }
+
   private get isOutOfCreditsErrorMessage(): boolean {
     return this.errorMessages.some((error) =>
       /You need a minimum of \d+ credits to continue using the AI bot\. Please upgrade to a larger plan, or top up your account\./.test(

packages/host/app/components/matrix/room-message.gts

@@ -41,6 +41,7 @@ interface Signature {
     index: number;
     monacoSDK: MonacoSDK;
     isStreaming: boolean;
+    isMostRecentMessage?: boolean;
     retryAction?: () => void;
     isPending?: boolean;
     registerScroller: (args: {
@@ -185,6 +186,7 @@ export default class RoomMessage extends Component<Signature> {
         @eventId={{this.message.eventId}}
         @index={{@index}}
         @isLastAssistantMessage={{this.isLastAssistantMessage}}
+        @isMostRecentMessage={{@isMostRecentMessage}}
         @userMessageThisMessageIsRespondingTo={{this.userMessageThisMessageIsRespondingTo}}
         @registerScroller={{@registerScroller}}
         @unregisterScroller={{@unregisterScroller}}
@@ -200,6 +202,7 @@ export default class RoomMessage extends Component<Signature> {
         @files={{this.message.attachedFiles}}
         @attachedCardsAsFiles={{this.message.attachedCardsAsFiles}}
         @errorMessage={{this.errorMessage}}
+        @reloadBillingData={{this.message.reloadBillingData}}
         @isDebugMessage={{this.message.isDebugMessage}}
         @isStreaming={{@isStreaming}}
         @retryAction={{@retryAction}}

packages/host/app/components/matrix/room.gts

@@ -191,6 +191,7 @@ export default class Room extends Component<Signature> {
                 @roomId={{@roomId}}
                 @roomResource={{@roomResource}}
                 @index={{i}}
+                @isMostRecentMessage={{this.isLastMessage i}}
                 @registerScroller={{this.registerMessageScroller}}
                 @unregisterScroller={{this.unregisterMessageScroller}}
                 @isPending={{this.isPendingMessage message}}

packages/host/app/lib/matrix-classes/message-builder.ts

@@ -23,6 +23,7 @@ import {
   APP_BOXEL_CONTINUATION_OF_CONTENT_KEY,
   APP_BOXEL_HAS_CONTINUATION_CONTENT_KEY,
   APP_BOXEL_MESSAGE_MSGTYPE,
+  APP_BOXEL_RELOAD_BILLING_DATA_KEY,
   APP_BOXEL_REASONING_CONTENT_KEY,
   APP_BOXEL_DEBUG_MESSAGE_EVENT_TYPE,
   APP_BOXEL_CODE_PATCH_RESULT_EVENT_TYPE,
@@ -60,6 +61,14 @@ const ErrorMessage: Record<string, string> = {
   ['M_TOO_LARGE']: 'Message is too large',
 };
 
+function shouldReloadBillingData(content: object) {
+  return Boolean(
+    (content as { [APP_BOXEL_RELOAD_BILLING_DATA_KEY]?: boolean })[
+      APP_BOXEL_RELOAD_BILLING_DATA_KEY
+    ],
+  );
+}
+
 export default class MessageBuilder {
   constructor(
     private event: MessageEvent | CardMessageEvent | DebugMessageEvent,
@@ -169,6 +178,7 @@ export default class MessageBuilder {
       message.clientGeneratedId = this.clientGeneratedId;
       message.setIsStreamingFinished(!!event.content.isStreamingFinished);
       message.setIsCanceled(!!event.content.isCanceled);
+      message.reloadBillingData = shouldReloadBillingData(event.content);
       message.attachedCardIds = this.attachedCardIds;
       message.attachedCardsAsFiles = this.attachedCardsAsFiles;
       if (event.content[APP_BOXEL_COMMAND_REQUESTS_KEY]) {
@@ -178,6 +188,7 @@ export default class MessageBuilder {
     } else if (event.content.msgtype === 'm.text') {
       message.setIsStreamingFinished(!!event.content.isStreamingFinished);
       message.setIsCanceled(!!event.content.isCanceled);
+      message.reloadBillingData = shouldReloadBillingData(event.content);
     }
     if (event.type === APP_BOXEL_DEBUG_MESSAGE_EVENT_TYPE) {
       message.isDebugMessage = true;
@@ -214,6 +225,7 @@ export default class MessageBuilder {
       : null;
     message.setUpdated(new Date());
     message.errorMessage = this.errorMessage;
+    message.reloadBillingData = shouldReloadBillingData(this.event.content);
 
     let encodedCommandRequests =
       (this.event.content as CardMessageContent)[

packages/host/app/lib/matrix-classes/message.ts

@@ -46,6 +46,7 @@ interface RoomMessageOptional {
   clientGeneratedId?: string | null;
   reasoningContent?: string | null;
   isDebugMessage?: boolean;
+  reloadBillingData?: boolean;
   hasContinuation?: boolean;
   continuationOf?: string | null;
   agentId?: string;
@@ -73,6 +74,7 @@ export class Message implements RoomMessageInterface {
   errorMessage?: string;
   clientGeneratedId?: string;
   isDebugMessage?: boolean;
+  reloadBillingData?: boolean;
   isCodePatchCorrectness?: boolean;
 
   author: RoomMember;

packages/host/tests/integration/components/ai-assistant-panel/general-test.gts

@@ -23,6 +23,7 @@ import {
   APP_BOXEL_CONTINUATION_OF_CONTENT_KEY,
   APP_BOXEL_HAS_CONTINUATION_CONTENT_KEY,
   APP_BOXEL_MESSAGE_MSGTYPE,
+  APP_BOXEL_RELOAD_BILLING_DATA_KEY,
   APP_BOXEL_REASONING_CONTENT_KEY,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -863,6 +864,58 @@ module('Integration | ai-assistant-panel | general', function (hooks) {
     assert.dom('[data-test-credits-added]').exists();
   });
 
+  test('it reloads billing data for the latest flagged out-of-credits message', async function (assert) {
+    let roomId = await renderAiAssistantPanel();
+    let billingService = getService('billing-service');
+    let requestCount = 0;
+
+    billingService.fetchSubscriptionData = async () => {
+      requestCount++;
+
+      let attributes =
+        requestCount === 1
+          ? {
+              creditsAvailableInPlanAllowance: 1,
+              extraCreditsAvailableInBalance: 2,
+            }
+          : {
+              creditsAvailableInPlanAllowance: 1,
+              extraCreditsAvailableInBalance: 1000,
+            };
+
+      return new Response(JSON.stringify({ data: { attributes } }));
+    };
+
+    await billingService.loadSubscriptionData();
+    assert.strictEqual(billingService.availableCredits, 3);
+
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: 'You need a minimum of 10 credits to continue using the AI bot. Please upgrade to a larger plan, or top up your account.',
+      msgtype: APP_BOXEL_MESSAGE_MSGTYPE,
+      format: 'org.matrix.custom.html',
+      isStreamingFinished: true,
+      errorMessage:
+        'You need a minimum of 10 credits to continue using the AI bot. Please upgrade to a larger plan, or top up your account.',
+      [APP_BOXEL_RELOAD_BILLING_DATA_KEY]: true,
+    });
+
+    await waitUntil(() => requestCount === 2);
+    await waitUntil(() => billingService.availableCredits >= 10, {
+      timeout: 2000,
+    });
+
+    assert.strictEqual(requestCount, 2, 'billing data reloads exactly once');
+    assert
+      .dom('[data-test-alert-action-button="Retry"]')
+      .exists('retry is shown after the reload confirms credits are available');
+    assert
+      .dom('[data-test-credits-added]')
+      .exists('credits added notice is shown after the reload');
+    assert
+      .dom('[data-test-alert-action-button="Buy More Credits"]')
+      .doesNotExist();
+  });
+
   test('it can retry a message when receiving an error from the AI bot', async function (assert) {
     let roomId = await renderAiAssistantPanel();
 

packages/runtime-common/ai/matrix-utils.ts

@@ -7,6 +7,7 @@ import type { CommandRequest } from '../commands';
 import { encodeCommandRequests } from '../commands';
 import {
   APP_BOXEL_COMMAND_REQUESTS_KEY,
+  APP_BOXEL_RELOAD_BILLING_DATA_KEY,
   APP_BOXEL_REASONING_CONTENT_KEY,
   APP_BOXEL_MESSAGE_MSGTYPE,
   APP_BOXEL_DEBUG_MESSAGE_EVENT_TYPE,
@@ -77,6 +78,7 @@ export async function sendErrorEvent(
   roomId: string,
   error: any,
   eventIdToReplace: string | undefined,
+  opts?: { reloadBillingData?: boolean },
 ) {
   try {
     let errorMessage = getErrorMessage(error);
@@ -89,6 +91,7 @@ export async function sendErrorEvent(
       {
         isStreamingFinished: true,
         errorMessage,
+        [APP_BOXEL_RELOAD_BILLING_DATA_KEY]: opts?.reloadBillingData ?? false,
       },
     );
   } catch (e) {

packages/runtime-common/matrix-constants.ts

@@ -32,6 +32,7 @@ export const APP_BOXEL_HAS_CONTINUATION_CONTENT_KEY =
 export const APP_BOXEL_CONTINUATION_OF_CONTENT_KEY =
   'app.boxel.continuation-of';
 export const APP_BOXEL_LLM_MODE = 'app.boxel.llm-mode';
+export const APP_BOXEL_RELOAD_BILLING_DATA_KEY = 'app.boxel.reloadBillingData';
 export type LLMMode = 'ask' | 'act';
 export const DEFAULT_LLM = 'anthropic/claude-sonnet-4.6';
 export const DEFAULT_CODING_LLM = 'anthropic/claude-sonnet-4.6';