@cardstack/boxel-cli 0.3.2-unstable.61 → 0.4.0-unstable.0

package/bundled-types/host-app/components/matrix/room.gts

@@ -276,6 +276,7 @@ export default class Room extends Component<Signature> {
                 @onSend={{this.sendMessage}}
                 @onPaste={{this.handleChatInputPaste}}
                 @canSend={{this.canSend}}
+                @isSending={{this.isSending}}
                 data-test-message-field={{@roomId}}
               />
               {{#if this.aiAssistantPanelService.isFocusPillVisible}}
@@ -612,6 +613,10 @@ export default class Room extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args);
     this.doMatrixEventFlush.perform();
+    // Replay any persisted optimistic sends from a prior tab/session before
+    // matrix-js-sdk's /sync delivers real echoes — entries left in 'not_sent'
+    // surface the retry alert; matched real echoes reconcile via the cgi bridge.
+    this.matrixService.ensurePendingSendsHydrated(this.args.roomId);
     registerDestructor(this, () => {
       this.cleanupScrollState();
       this.getConversationScrollability = undefined;
@@ -1599,33 +1604,68 @@ export default class Room extends Component<Signature> {
       keepInputAndAttachments = false,
     ) => {
       this.unknownMessageSendError = undefined;
-      let messageToSend = this.matrixService.getMessageToSend(this.args.roomId);
-      let cardsToSend =
-        this.matrixService.getCardsToSend(this.args.roomId) ?? undefined;
-      let cardsToSendCopy = cardsToSend ? [...cardsToSend] : undefined;
-      let filesToSend =
-        this.matrixService.getFilesToSend(this.args.roomId) ?? undefined;
-      let filesToSendCopy = filesToSend ? [...filesToSend] : undefined;
-      const shouldClearDraft = !keepInputAndAttachments;
-
-      // We copy the draft and attachments into local variables before clearing them
-      // (unless we're intentionally preserving the user's current draft for a retry).
-      // Clearing immediately empties the input so the user sees that their message is “in flight”.
-      // If the send fails, we restore those saved values in the catch block so nothing is lost.
-      if (shouldClearDraft) {
-        this.matrixService.setMessageToSend(this.args.roomId, undefined);
-        this.matrixService.setCardsToSend(this.args.roomId, undefined);
-        this.matrixService.setFilesToSend(this.args.roomId, undefined);
+      const isRetry = keepInputAndAttachments;
+      const roomId = this.args.roomId;
+
+      // Snapshot the click-time inputs and render an optimistic bubble before
+      // any awaited work. The pre-send pipeline (skill / command / card / file
+      // serialization + upload) can take seconds; without this snapshot the
+      // user sees an empty transcript while the pipeline runs.
+      let snapshotBody = message ?? '';
+      let snapshotCardIds: string[] = [];
+      if (cardsOrIds) {
+        if (typeof cardsOrIds[0] === 'string') {
+          snapshotCardIds = (cardsOrIds as string[]).slice();
+        } else {
+          snapshotCardIds = (cardsOrIds as CardDef[])
+            .map((c) => c.id as unknown as string)
+            .filter((id) => Boolean(id));
+        }
+      }
+      let snapshotFiles = files ?? [];
+
+      if (!isRetry) {
+        let originServerTs = await this.matrixService.addOptimisticEvent(
+          roomId,
+          {
+            body: snapshotBody,
+            clientGeneratedId,
+            attachedCardIds: snapshotCardIds,
+            attachedFiles: snapshotFiles.map((f) => f.serialize()),
+          },
+        );
+        // Persist before clearing the draft so a tab close mid-pipeline still
+        // restores the bubble on reload. Share the synthetic event's ts so
+        // hydration reconstructs an identical origin_server_ts — otherwise
+        // MessageBuilder.updateMessage may early-return when the real echo
+        // arrives with an earlier ts.
+        this.matrixService.persistOptimisticSend(roomId, {
+          clientGeneratedId,
+          body: snapshotBody,
+          attachedCardIds: snapshotCardIds,
+          attachedFiles: snapshotFiles.map((f) => f.serialize()),
+          createdAt: originServerTs,
+        });
+
+        this.matrixService.setMessageToSend(roomId, undefined);
+        this.matrixService.setCardsToSend(roomId, undefined);
+        this.matrixService.setFilesToSend(roomId, undefined);
         this._fileUploadStates.clear();
+      } else {
+        // Retry — flip the existing bubble back to 'sending' and clear any
+        // prior error so the alert / Retry button hides while the pipeline runs.
+        this.matrixService.patchPendingSend(roomId, clientGeneratedId, {
+          status: 'sending',
+        });
       }
 
-      let openCardIds = new Set([
-        ...(this.operatorModeStateService.getOpenCardIds() || []),
-        ...this.autoAttachedCardIds,
-      ]) as Set<RealmResourceIdentifier>;
-      let context =
-        await this.operatorModeStateService.getSummaryForAIBot(openCardIds);
       try {
+        let openCardIds = new Set([
+          ...(this.operatorModeStateService.getOpenCardIds() || []),
+          ...this.autoAttachedCardIds,
+        ]) as Set<RealmResourceIdentifier>;
+        let context =
+          await this.operatorModeStateService.getSummaryForAIBot(openCardIds);
         let cards: CardDef[] | undefined = [];
         if (typeof cardsOrIds?.[0] === 'string') {
           // we use detached instances since these are just
@@ -1657,7 +1697,7 @@ export default class Room extends Component<Signature> {
         }
 
         await this.matrixService.sendMessage(
-          this.args.roomId,
+          roomId,
           message,
           cards,
           files,
@@ -1666,24 +1706,32 @@ export default class Room extends Component<Signature> {
         );
       } catch (e) {
         console.error(e);
-        this.unknownMessageSendError =
-          'There was an error sending your message. This could be due to network issues, or serialization issues with the cards or files you are trying to send. It might be helpful to refresh the page and try again.';
 
-        if (shouldClearDraft) {
-          this.matrixService.setMessageToSend(this.args.roomId, messageToSend);
-          this.matrixService.setCardsToSend(
-            this.args.roomId,
-            cardsToSendCopy && cardsToSendCopy.length > 0
-              ? cardsToSendCopy
-              : undefined,
-          );
-          this.matrixService.setFilesToSend(
-            this.args.roomId,
-            filesToSendCopy && filesToSendCopy.length > 0
-              ? filesToSendCopy
-              : undefined,
+        // Inverse delivery race: client.sendEvent may have already handed the
+        // event to matrix (status === 'sent') before a downstream throw escaped
+        // into this catch. Flipping the bubble to 'not_sent' in that case
+        // would briefly contradict the server's view. Consult the SDK's own
+        // EventStatus first; only stamp 'not_sent' when matrix agrees the send
+        // didn't land.
+        let matrixStatus = this.matrixService.findPendingMatrixEventStatus(
+          roomId,
+          clientGeneratedId,
+        );
+        if (matrixStatus === 'sent') {
+          console.warn(
+            `sendMessage threw after matrix accepted clientGeneratedId=${clientGeneratedId}; ` +
+              'leaving bubble in sending state for reconciliation.',
           );
+          return;
         }
+
+        this.unknownMessageSendError =
+          'There was an error sending your message. This could be due to network issues, or serialization issues with the cards or files you are trying to send. It might be helpful to refresh the page and try again.';
+
+        this.matrixService.patchPendingSend(roomId, clientGeneratedId, {
+          status: 'not_sent',
+          errorMessage: 'Failed to send',
+        });
       }
     },
   );
@@ -1717,6 +1765,10 @@ export default class Room extends Component<Signature> {
     },
   );
 
+  private get isSending() {
+    return this.doSendMessage.isRunning;
+  }
+
   private get canSend() {
     return (
       !this.doSendMessage.isRunning &&
@@ -1729,7 +1781,16 @@ export default class Room extends Component<Signature> {
       ) &&
       !this.hasFileUploadIssues &&
       !!this.room &&
-      !this.messages.some((m) => this.isPendingMessage(m)) &&
+      // Block input only on a *failed* prior send. `doSendMessage` is an
+      // enqueueTask, so concurrent sends are already serialized; a healthy
+      // 'sending' bubble awaiting the matrix echo doesn't need a second
+      // guard. A 'not_sent' bubble does need attention before the next send,
+      // matching the retry-alert UX.
+      !this.messages.some(
+        (m) =>
+          m.author.userId === this.matrixService.userId &&
+          m.status === 'not_sent',
+      ) &&
       !this.matrixService.isLoadingTimeline &&
       !this.aiAssistantPanelService.isPreparingSession
     );
@@ -1817,10 +1878,20 @@ export default class Room extends Component<Signature> {
   }
 
   private get generatingResults() {
-    return (
-      this.messages[this.messages.length - 1] &&
-      !this.messages[this.messages.length - 1].isStreamingFinished
-    );
+    let lastMessage = this.messages[this.messages.length - 1];
+    if (!lastMessage) {
+      return false;
+    }
+    // The banner means "the AI is generating a reply". Only consider the bot's
+    // streaming state — user messages don't carry `isStreamingFinished` on the
+    // wire, so they read as not-streamed-yet even after they've landed. With
+    // the optimistic bubble appearing at click-time, the user's message is the
+    // last message for a longer window than before; without this author gate
+    // the banner shows on the user's own pending bubble.
+    if (lastMessage.author.userId !== this.matrixService.aiBotUserId) {
+      return false;
+    }
+    return !lastMessage.isStreamingFinished;
   }
 
   @cached

package/bundled-types/host-app/lib/matrix-classes/message-builder.ts

@@ -228,6 +228,19 @@ export default class MessageBuilder {
     message.errorMessage = this.errorMessage;
     message.reloadBillingData = shouldReloadBillingData(this.event.content);
 
+    // Refresh attached card/file metadata so an optimistic synthetic — which
+    // names attached cards from URL slugs alone — gets its names/types
+    // replaced by the real echo's serialized FileDef shape (title-cased,
+    // proper contentType, etc.) without re-creating the Message instance.
+    if (
+      this.event.content.msgtype === APP_BOXEL_MESSAGE_MSGTYPE ||
+      this.event.content.msgtype === APP_BOXEL_CODE_PATCH_CORRECTNESS_MSGTYPE
+    ) {
+      message.attachedCardIds = this.attachedCardIds;
+      message.attachedCardsAsFiles = this.attachedCardsAsFiles;
+      message.attachedFiles = this.attachedFiles;
+    }
+
     let encodedCommandRequests =
       (this.event.content as CardMessageContent)[
         APP_BOXEL_COMMAND_REQUESTS_KEY

package/bundled-types/host-app/services/local-persistence-service.ts

@@ -7,6 +7,7 @@ import type { SerializedFileDef } from 'https://cardstack.com/base/file-api';
 
 import {
   AiAssistantMessageDrafts,
+  AiAssistantPendingSends,
   CurrentRoomIdPersistenceKey,
 } from '../utils/local-storage-keys';
 
@@ -30,6 +31,23 @@ type DraftUpdate = {
   attachedFiles?: StoredFileDraft[] | undefined;
 };
 
+export type StoredPendingFile = Pick<
+  SerializedFileDef,
+  'sourceUrl' | 'name' | 'url' | 'contentType' | 'contentHash'
+> & { contentSize?: number };
+
+export type PendingSendStatus = 'sending' | 'not_sent';
+
+export type StoredPendingSend = {
+  clientGeneratedId: string;
+  body: string;
+  attachedCardIds: string[];
+  attachedFiles: StoredPendingFile[];
+  createdAt: number;
+  status: PendingSendStatus;
+  errorMessage?: string;
+};
+
 export default class LocalPersistenceService extends Service {
   // Using sessionStorage for agent id because we want:
   // - to keep the same agent id if user reloads the page (or tab)
@@ -287,6 +305,167 @@ export default class LocalPersistenceService extends Service {
     let hasFiles = draft.attachedFiles && draft.attachedFiles.length > 0;
     return !hasMessage && !hasCards && !hasFiles;
   }
+
+  getPendingSends(roomId: string): StoredPendingSend[] {
+    return this.readPendingSends()[roomId] ?? [];
+  }
+
+  upsertPendingSend(roomId: string, entry: StoredPendingSend) {
+    let all = this.readPendingSends();
+    let list = all[roomId] ? [...all[roomId]] : [];
+    let index = list.findIndex(
+      (e) => e.clientGeneratedId === entry.clientGeneratedId,
+    );
+    if (index >= 0) {
+      list[index] = entry;
+    } else {
+      list.push(entry);
+    }
+    all[roomId] = list;
+    this.writePendingSends(all);
+  }
+
+  updatePendingSendStatus(
+    roomId: string,
+    clientGeneratedId: string,
+    update: { status: PendingSendStatus; errorMessage?: string },
+  ) {
+    let all = this.readPendingSends();
+    let list = all[roomId];
+    if (!list) {
+      return;
+    }
+    let index = list.findIndex(
+      (e) => e.clientGeneratedId === clientGeneratedId,
+    );
+    if (index < 0) {
+      return;
+    }
+    let next = [...list];
+    next[index] = {
+      ...next[index],
+      status: update.status,
+      errorMessage: update.errorMessage,
+    };
+    all[roomId] = next;
+    this.writePendingSends(all);
+  }
+
+  removePendingSend(roomId: string, clientGeneratedId: string) {
+    let all = this.readPendingSends();
+    let list = all[roomId];
+    if (!list) {
+      return;
+    }
+    let next = list.filter((e) => e.clientGeneratedId !== clientGeneratedId);
+    if (next.length === 0) {
+      delete all[roomId];
+    } else {
+      all[roomId] = next;
+    }
+    this.writePendingSends(all);
+  }
+
+  private readPendingSends(): Record<string, StoredPendingSend[]> {
+    let raw = window.localStorage.getItem(AiAssistantPendingSends);
+    if (!raw) {
+      return {};
+    }
+    try {
+      let parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== 'object') {
+        return {};
+      }
+      let sanitized: Record<string, StoredPendingSend[]> = {};
+      for (let [roomId, list] of Object.entries(
+        parsed as Record<string, unknown>,
+      )) {
+        if (!Array.isArray(list)) {
+          continue;
+        }
+        let entries = list
+          .map((entry) => this.sanitizePendingSend(entry))
+          .filter((e): e is StoredPendingSend => Boolean(e));
+        if (entries.length > 0) {
+          sanitized[roomId] = entries;
+        }
+      }
+      return sanitized;
+    } catch {
+      window.localStorage.removeItem(AiAssistantPendingSends);
+      return {};
+    }
+  }
+
+  private sanitizePendingSend(value: unknown): StoredPendingSend | undefined {
+    if (!value || typeof value !== 'object') {
+      return;
+    }
+    let cgi = (value as { clientGeneratedId?: unknown }).clientGeneratedId;
+    if (typeof cgi !== 'string' || cgi.length === 0) {
+      return;
+    }
+    let body = (value as { body?: unknown }).body;
+    let attachedCardIds = (value as { attachedCardIds?: unknown })
+      .attachedCardIds;
+    let attachedFiles = (value as { attachedFiles?: unknown }).attachedFiles;
+    let createdAt = Number((value as { createdAt?: unknown }).createdAt);
+    let status = (value as { status?: unknown }).status;
+    let errorMessage = (value as { errorMessage?: unknown }).errorMessage;
+
+    return {
+      clientGeneratedId: cgi,
+      body: typeof body === 'string' ? body : '',
+      attachedCardIds: Array.isArray(attachedCardIds)
+        ? attachedCardIds.filter(
+            (id): id is string => typeof id === 'string' && id.length > 0,
+          )
+        : [],
+      attachedFiles: Array.isArray(attachedFiles)
+        ? (attachedFiles
+            .map((file) => this.sanitizePendingFile(file))
+            .filter(Boolean) as StoredPendingFile[])
+        : [],
+      createdAt: Number.isFinite(createdAt) ? createdAt : 0,
+      status: status === 'not_sent' ? 'not_sent' : 'sending',
+      errorMessage: typeof errorMessage === 'string' ? errorMessage : undefined,
+    };
+  }
+
+  private sanitizePendingFile(file: unknown): StoredPendingFile | undefined {
+    if (!file || typeof file !== 'object') {
+      return;
+    }
+    let sourceUrl = (file as { sourceUrl?: unknown }).sourceUrl;
+    if (typeof sourceUrl !== 'string' || sourceUrl.length === 0) {
+      return;
+    }
+    let name = (file as { name?: unknown }).name;
+    let url = (file as { url?: unknown }).url;
+    let contentType = (file as { contentType?: unknown }).contentType;
+    let contentHash = (file as { contentHash?: unknown }).contentHash;
+    let contentSize = (file as { contentSize?: unknown }).contentSize;
+    return {
+      sourceUrl,
+      ...(typeof name === 'string' ? { name } : {}),
+      ...(typeof url === 'string' ? { url } : {}),
+      ...(typeof contentType === 'string' ? { contentType } : {}),
+      ...(typeof contentHash === 'string' ? { contentHash } : {}),
+      ...(typeof contentSize === 'number' ? { contentSize } : {}),
+    };
+  }
+
+  private writePendingSends(all: Record<string, StoredPendingSend[]>) {
+    let entries = Object.entries(all).filter(([, list]) => list.length > 0);
+    if (entries.length === 0) {
+      window.localStorage.removeItem(AiAssistantPendingSends);
+      return;
+    }
+    window.localStorage.setItem(
+      AiAssistantPendingSends,
+      JSON.stringify(Object.fromEntries(entries)),
+    );
+  }
 }
 
 declare module '@ember/service' {