@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

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

@@ -0,0 +1,1872 @@
+import { registerDestructor } from '@ember/destroyable';
+import { fn } from '@ember/helper';
+import { array } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import type Owner from '@ember/owner';
+import { schedule } from '@ember/runloop';
+import { service } from '@ember/service';
+import { isTesting } from '@embroider/macros';
+import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
+
+import {
+  enqueueTask,
+  restartableTask,
+  timeout,
+  all,
+  task,
+} from 'ember-concurrency';
+
+import perform from 'ember-concurrency/helpers/perform';
+import { consume } from 'ember-provide-consume-context';
+import { resource, use } from 'ember-resources';
+import max from 'lodash/max';
+
+import pluralize from 'pluralize';
+
+import { TrackedObject, TrackedMap, TrackedSet } from 'tracked-built-ins';
+
+import { v4 as uuidv4 } from 'uuid';
+
+import {
+  Alert,
+  BoxelButton,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
+import { and, eq, not } from '@cardstack/boxel-ui/helpers';
+
+import type {
+  RealmResourceIdentifier,
+  ResolvedCodeRef,
+} from '@cardstack/runtime-common';
+import {
+  baseFileRef,
+  formattedError,
+  type getCard,
+  GetCardContextName,
+  inferContentType,
+  internalKeyFor,
+  isCardInstance,
+  resolveFileDefCodeRef,
+  SupportedMimeType,
+} from '@cardstack/runtime-common';
+import {
+  DEFAULT_LLM_LIST,
+  DEFAULT_LLM_ID_TO_NAME,
+} from '@cardstack/runtime-common/matrix-constants';
+
+import UpdateRoomSkillsCommand from '@cardstack/host/commands/update-room-skills';
+import ENV from '@cardstack/host/config/environment';
+import type { FileUploadState } from '@cardstack/host/lib/file-upload-state';
+import type { Message } from '@cardstack/host/lib/matrix-classes/message';
+import type { StackItem } from '@cardstack/host/lib/stack-item';
+import { getAutoAttachment } from '@cardstack/host/resources/auto-attached-card';
+import { isReady } from '@cardstack/host/resources/file';
+import type { RoomResource } from '@cardstack/host/resources/room';
+
+import type AiAssistantPanelService from '@cardstack/host/services/ai-assistant-panel-service';
+import type CardService from '@cardstack/host/services/card-service';
+import type CommandService from '@cardstack/host/services/command-service';
+import type FileUploadService from '@cardstack/host/services/file-upload';
+import type LoaderService from '@cardstack/host/services/loader-service';
+import type MatrixService from '@cardstack/host/services/matrix-service';
+import type { MonacoSDK } from '@cardstack/host/services/monaco-service';
+import type NetworkService from '@cardstack/host/services/network';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type PlaygroundPanelService from '@cardstack/host/services/playground-panel-service';
+import type SpecPanelService from '@cardstack/host/services/spec-panel-service';
+import type StoreService from '@cardstack/host/services/store';
+import { FileDefAttributesExtractor } from '@cardstack/host/utils/file-def-attributes-extractor';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+import { errorJsonApiToErrorEntry } from '../../lib/window-error-handler';
+import AiAssistantActionBar from '../ai-assistant/action-bar';
+import AiAssistantAttachmentPicker from '../ai-assistant/attachment-picker';
+import AiAssistantChatInput from '../ai-assistant/chat-input';
+import FocusPill from '../ai-assistant/focus-pill';
+import LLMModeToggle from '../ai-assistant/llm-mode-toggle';
+import LLMSelect, { type LLMOption } from '../ai-assistant/llm-select';
+import { AiAssistantConversation } from '../ai-assistant/message';
+import NewSession from '../ai-assistant/new-session';
+import AiAssistantSkillMenu from '../ai-assistant/skill-menu';
+
+import { Submodes } from '../submode-switcher';
+
+import RoomMessage from './room-message';
+
+import type RoomData from '../../lib/matrix-classes/room';
+import type { RoomSkill } from '../../resources/room';
+import type { MatrixEvent } from 'matrix-js-sdk';
+
+const LOCAL_SOURCE_URL_PREFIX = 'boxel-local://';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    roomId: string;
+    roomResource: RoomResource;
+    monacoSDK: MonacoSDK;
+    selectedCardRef?: ResolvedCodeRef;
+  };
+}
+
+interface RoomScrollState {
+  messageElements: Map<HTMLElement, number>;
+  messageScrollers: Map<number, Element['scrollIntoView']>;
+  messageVisibilityObserver: IntersectionObserver;
+  isScrolledToBottom: boolean;
+  userHasScrolled: boolean;
+  isConversationScrollable: boolean;
+}
+
+export default class Room extends Component<Signature> {
+  <template>
+    {{#if (not this.doMatrixEventFlush.isRunning)}}
+      <section
+        class='room'
+        data-room-settled={{and
+          this.doWhenRoomChanges.isIdle
+          (not this.matrixService.isLoadingTimeline)
+        }}
+        data-test-room-settled={{and
+          this.doWhenRoomChanges.isIdle
+          (not this.matrixService.isLoadingTimeline)
+        }}
+        data-test-room-name={{@roomResource.name}}
+        data-test-room={{@roomId}}
+        data-room-id={{@roomId}}
+        ...attributes
+      >
+        <AiAssistantConversation
+          @registerConversationScroller={{this.registerConversationScroller}}
+          @setScrollPosition={{this.setScrollPosition}}
+        >
+          {{#if this.matrixService.isLoadingTimeline}}
+            <div class='session-preparation-container'>
+              <LoadingIndicator
+                @color='var(--boxel-light)'
+                class='loading-indicator'
+              />
+            </div>
+          {{else if this.aiAssistantPanelService.isPreparingSession}}
+            <div
+              class='session-preparation-container'
+              data-test-session-preparation
+            >
+              <LoadingIndicator
+                @color='var(--boxel-light)'
+                class='loading-indicator'
+              />
+              <span class='session-preparation-message'>
+                {{#if
+                  (and
+                    this.aiAssistantPanelService.isSummarizingSession
+                    this.aiAssistantPanelService.isCopyingFileHistory
+                  )
+                }}
+                  Summarizing session and copying files
+                {{else if this.aiAssistantPanelService.isSummarizingSession}}
+                  Summarizing previous session
+                {{else if this.aiAssistantPanelService.isCopyingFileHistory}}
+                  Copying file history from previous session
+                {{else}}
+                  Preparing session context
+                {{/if}}
+              </span>
+              <span class='session-preparation-message'>
+                Please keep Assistant open
+              </span>
+              <span class='session-preparation-small-message'>
+                Takes 10-20 seconds
+              </span>
+              <button
+                type='button'
+                class='session-preparation-skip-button'
+                {{on 'click' this.skipSessionPreparation}}
+                data-test-session-preparation-skip-button
+              >
+                Skip
+              </button>
+            </div>
+          {{else}}
+            {{#each this.messages key='eventId' as |message i|}}
+              <RoomMessage
+                @roomId={{@roomId}}
+                @roomResource={{@roomResource}}
+                @index={{i}}
+                @isMostRecentMessage={{this.isLastMessage i}}
+                @registerScroller={{this.registerMessageScroller}}
+                @unregisterScroller={{this.unregisterMessageScroller}}
+                @isPending={{this.isPendingMessage message}}
+                @monacoSDK={{@monacoSDK}}
+                @isStreaming={{this.isMessageStreaming message}}
+                @retryAction={{this.maybeRetryAction i message}}
+                data-test-message-idx={{i}}
+              />
+            {{else}}
+              <NewSession @sendPrompt={{this.sendMessage}} />
+            {{/each}}
+
+            {{#if this.shouldShowUnknownMessageSendError}}
+              <Alert @type='error' as |Alert|>
+                <Alert.Messages
+                  @messages={{array this.unknownMessageSendError}}
+                />
+              </Alert>
+            {{/if}}
+          {{/if}}
+        </AiAssistantConversation>
+
+        <footer class='room-actions'>
+          <AiAssistantAttachmentPicker
+            @autoAttachedCardIds={{this.autoAttachedCardIds}}
+            @cardIdsToAttach={{this.cardIdsToAttach}}
+            @chooseCard={{this.chooseCard}}
+            @removeCard={{this.removeCard}}
+            @chooseFile={{perform this.chooseFileTask}}
+            @chooseLocalFile={{perform this.chooseLocalFileTask}}
+            @removeFile={{this.removeFile}}
+            @autoAttachedFiles={{this.autoAttachedFiles}}
+            @filesToAttach={{this.filesToAttach}}
+            @fileUploadStates={{this.fileUploadStates}}
+            @retryFileUpload={{this.retryFileUpload}}
+            @inputModalities={{@roomResource.activeInputModalities}}
+            @autoAttachedCardTooltipMessage={{if
+              (eq this.operatorModeStateService.state.submode Submodes.Code)
+              'Current card is shared automatically'
+              'Topmost card is shared automatically'
+            }}
+            as |AttachedItems AttachButton|
+          >
+            {{#if this.displayActionBar}}
+              <AiAssistantActionBar
+                @acceptAll={{perform this.executeAllReadyActionsTask}}
+                @cancel={{this.cancelActionBar}}
+                @acceptingAll={{this.isAcceptingAll}}
+                @acceptingAllLabel={{this.acceptingAllLabel}}
+                @generatingResults={{this.generatingResults}}
+                @stop={{perform this.stopGeneratingTask}}
+                @stopping={{this.stopGeneratingTask.isRunning}}
+                @showUnreadIndicator={{this.showUnreadIndicator}}
+                @unreadMessageText={{this.unreadMessageText}}
+                @scrollToFirstUnread={{this.scrollToFirstUnread}}
+              />
+            {{/if}}
+            <div
+              class='chat-input-area'
+              data-test-chat-input-area
+              data-drop-zone-active={{this.isDropZoneActive}}
+              {{on 'dragover' this.handleChatInputDragOver}}
+              {{on 'dragenter' this.handleChatInputDragEnter}}
+              {{on 'dragleave' this.handleChatInputDragLeave}}
+              {{on 'drop' this.handleChatInputDrop}}
+            >
+              {{#if this.isDropZoneActive}}
+                <div
+                  class='chat-input-drop-hint'
+                  data-test-chat-input-drop-hint
+                >
+                  Drop file to attach
+                </div>
+              {{/if}}
+              <AiAssistantChatInput
+                @attachButton={{AttachButton}}
+                @value={{this.messageToSend}}
+                @onInput={{this.setMessage}}
+                @onSend={{this.sendMessage}}
+                @onPaste={{this.handleChatInputPaste}}
+                @canSend={{this.canSend}}
+                data-test-message-field={{@roomId}}
+              />
+              {{#if this.aiAssistantPanelService.isFocusPillVisible}}
+                <FocusPill
+                  @label={{this.aiAssistantPanelService.focusPillLabel}}
+                  @metaPills={{this.aiAssistantPanelService.focusPillMetaPills}}
+                  class='pill-row'
+                />
+              {{/if}}
+              {{#if this.displayAttachedItems}}
+                <AttachedItems class='pill-row' />
+              {{/if}}
+
+              <div class='chat-input-area__bottom-actions'>
+                {{#if this.displaySkillMenu}}
+                  <AiAssistantSkillMenu
+                    class='skill-menu'
+                    @skills={{this.sortedSkills}}
+                    @onChooseCard={{perform this.attachSkillTask}}
+                    @onUpdateSkillIsActive={{perform
+                      this.updateSkillIsActiveTask
+                    }}
+                    @onExpand={{fn this.setSelectedBottomAction 'skill-menu'}}
+                    @onCollapse={{fn this.setSelectedBottomAction undefined}}
+                    data-test-skill-menu
+                  />
+                {{/if}}
+                {{#if this.displayLLMSelect}}
+                  <LLMSelect
+                    class='llm-select'
+                    @selected={{@roomResource.activeLLM}}
+                    @onChange={{perform @roomResource.activateLLMTask}}
+                    @options={{this.llmsForSelectMenu}}
+                    @disabled={{@roomResource.isActivatingLLM}}
+                    @onExpand={{fn this.setSelectedBottomAction 'llm-select'}}
+                    @onCollapse={{fn this.setSelectedBottomAction undefined}}
+                  >
+                    <:footer>
+                      <li class='llm-select-footer'>
+                        {{#if this.systemCardId}}
+                          <BoxelButton
+                            @kind='text-only'
+                            @size='extra-small'
+                            class='llm-select-footer-action'
+                            {{on 'click' this.goToSystemCard}}
+                            data-test-go-to-system-card
+                          >
+                            Go to current system card
+                          </BoxelButton>
+                        {{/if}}
+                        {{#unless this.isDefaultSystemCard}}
+                          <BoxelButton
+                            @kind='text-only'
+                            @size='extra-small'
+                            class='llm-select-footer-action'
+                            {{on
+                              'click'
+                              (perform this.restoreDefaultSystemCardTask)
+                            }}
+                            data-test-restore-default-system-card
+                          >
+                            Restore default system card
+                          </BoxelButton>
+                        {{/unless}}
+                      </li>
+                    </:footer>
+                  </LLMSelect>
+                {{/if}}
+                {{#if this.displayLLMModeSelect}}
+                  <LLMModeToggle
+                    class='llm-mode-toggle'
+                    @selected={{@roomResource.activeLLMMode}}
+                    @onChange={{perform @roomResource.activateLLMModeTask}}
+                    @disabled={{@roomResource.isActivatingLLMMode}}
+                  />
+                {{/if}}
+              </div>
+            </div>
+          </AiAssistantAttachmentPicker>
+        </footer>
+      </section>
+    {{/if}}
+
+    <style scoped>
+      .room {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+
+        --chat-input-area-border-radius: var(--boxel-border-radius-xxl);
+      }
+      .room-actions {
+        position: relative;
+        padding: 0 var(--ai-assistant-panel-padding)
+          var(--ai-assistant-panel-padding);
+        box-shadow: var(--boxel-box-shadow);
+      }
+
+      .room-actions::before {
+        content: '';
+        position: absolute;
+
+        width: 100%;
+        height: calc(
+          var(--ai-assistant-panel-bottom-gradient-height) +
+            var(--chat-input-area-border-radius)
+        );
+        left: 0;
+        bottom: calc(100% - var(--chat-input-area-border-radius));
+
+        background: linear-gradient(
+          to top,
+          var(--boxel-ai-purple),
+          var(--boxel-ai-purple) 20%,
+          transparent 100%
+        );
+
+        z-index: 0;
+      }
+
+      .chat-input-area {
+        --boxel-pill-menu-header-padding: 0;
+        --boxel-pill-menu-content-padding: var(--boxel-sp) 0;
+        --boxel-pill-menu-footer-padding: 0;
+        --boxel-pill-menu-button-padding: 2px 6px;
+
+        --chat-input-area-bottom-padding: var(--boxel-sp-sm);
+
+        background-color: var(--boxel-light);
+        color: var(--boxel-dark);
+        border-radius: var(--chat-input-area-border-radius);
+
+        position: relative;
+        z-index: 2;
+
+        timeline-scope: --chat-input-scroll-timeline;
+      }
+      .chat-input-area[data-drop-zone-active='true'] {
+        box-shadow: inset 0 0 0 2px var(--boxel-dark);
+        background-color: #e8f0ff;
+      }
+      .chat-input-drop-hint {
+        position: absolute;
+        top: var(--boxel-sp-xs);
+        right: var(--boxel-sp-xs);
+        bottom: var(--boxel-sp-xs);
+        left: var(--boxel-sp-xs);
+        z-index: 3;
+        pointer-events: none;
+        color: var(--boxel-light-100);
+        font: 500 var(--boxel-font);
+        background-color: var(--boxel-darker-hover);
+        border-radius: var(--boxel-border-radius-lg);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .chat-input-area__bottom-actions {
+        display: flex;
+        align-items: center;
+        padding: var(--chat-input-area-bottom-padding);
+        gap: var(--boxel-sp-sm);
+        background-color: var(--boxel-light-100);
+        border-bottom-left-radius: var(--chat-input-area-border-radius);
+        border-bottom-right-radius: var(--chat-input-area-border-radius);
+      }
+
+      .chat-input-area__bottom-actions:not(:has(.menu-content)) {
+        height: 40px;
+      }
+
+      .chat-input-area__bottom-actions:has(.menu-content) {
+        padding: 0;
+      }
+
+      .pill-row {
+        margin: var(--boxel-sp-xxxs);
+      }
+
+      .pill-row + .pill-row {
+        margin-top: 0;
+      }
+
+      .llm-mode-toggle {
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      :deep(.ai-assistant-conversation > *:first-child) {
+        margin-top: auto;
+      }
+
+      .session-preparation-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        gap: 4px;
+      }
+
+      .loading-indicator {
+        margin-bottom: var(--boxel-sp-xxs);
+      }
+
+      .session-preparation-message {
+        text-align: center;
+        color: var(--boxel-light);
+        font: 500 var(--boxel-font-sm);
+      }
+
+      .session-preparation-small-message {
+        color: var(--boxel-400);
+        font: 500 var(--boxel-font-xs);
+      }
+
+      .session-preparation-skip-button {
+        background: none;
+        border: 1px solid var(--boxel-400);
+        border-radius: var(--boxel-border-radius-lg);
+        color: var(--boxel-light);
+        font: 500 var(--boxel-font-xs);
+        padding: 4px 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-top: var(--boxel-sp-sm);
+      }
+
+      .session-preparation-skip-button:hover {
+        background: var(--boxel-400);
+        color: var(--boxel-light);
+      }
+
+      .chat-input-area :deep(.pill-menu-button) {
+        height: 22px;
+        gap: var(--boxel-sp-xxxs);
+      }
+
+      .chat-input-area :deep(.pill-menu-button:hover) {
+        border-color: var(--boxel-dark);
+      }
+
+      .llm-select :deep(.menu-content) {
+        margin-right: calc(-2 * var(--boxel-sp-sm));
+        width: 100%;
+      }
+
+      .llm-select-footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxxs);
+        border-top: 1px solid var(--boxel-200);
+        padding-top: var(--boxel-sp-xxxs);
+      }
+
+      .llm-select-footer-action {
+        --boxel-button-padding: var(--boxel-sp-xxxs) var(--boxel-sp-sm);
+        --boxel-button-min-height: unset;
+        justify-content: flex-start;
+        font: 500 var(--boxel-font-xs);
+        color: var(--boxel-500);
+      }
+
+      .llm-select-footer-action:hover {
+        color: var(--boxel-dark);
+      }
+
+      .chat-input-area :deep(.minimized-arrow) {
+        margin-left: 0;
+      }
+    </style>
+  </template>
+
+  @consume(GetCardContextName) declare private getCard: getCard;
+  @tracked private selectedBottomAction:
+    | 'skill-menu'
+    | 'llm-select'
+    | undefined;
+  @tracked lastCanceledActionMessageId: string | undefined;
+  @tracked acceptingAllLabel: string | undefined;
+  @tracked private isDropZoneActive = false;
+  private dropZoneDragDepth = 0;
+
+  @service declare private store: StoreService;
+  @service declare private cardService: CardService;
+  @service declare private commandService: CommandService;
+  @service('file-upload') declare private fileUpload: FileUploadService;
+  @service('loader-service') declare private loaderService: LoaderService;
+  @service declare private matrixService: MatrixService;
+  @service declare private network: NetworkService;
+  @service declare private operatorModeStateService: OperatorModeStateService;
+  @service declare private playgroundPanelService: PlaygroundPanelService;
+  @service declare private specPanelService: SpecPanelService;
+  @service declare private aiAssistantPanelService: AiAssistantPanelService;
+
+  private autoAttachmentResource = getAutoAttachment(this, {
+    submode: () => this.operatorModeStateService.state.submode,
+    moduleInspectorPanel: () =>
+      this.operatorModeStateService.moduleInspectorPanel,
+    autoAttachedFileUrls: () => this.autoAttachedFileUrls,
+    playgroundPanelCardId: () => this.playgroundPanelCardId,
+    activeSpecId: () => this.specPanelService.specSelection,
+    topMostStackItems: () => this.topMostStackItems,
+    attachedCardIds: () => this.cardIdsToAttach,
+    removedCardIds: () => this.removedAttachedCardIds,
+  });
+  private removedAttachedCardIds = new TrackedSet<string>();
+  private removedAttachedFileUrls: string[] = [];
+  private lastAutoAttachedFileUrlsKey: string | undefined;
+  private lastKnownRoom: RoomData | undefined;
+  private getConversationScrollability: (() => boolean) | undefined;
+  private scrollConversationToBottom: (() => void) | undefined;
+  private roomScrollState: WeakMap<RoomData, RoomScrollState> = new WeakMap();
+
+  @tracked private unknownMessageSendError: string | undefined = undefined;
+  private _fileUploadStates = new TrackedMap<string, FileUploadState>();
+
+  get fileUploadStates(): ReadonlyMap<string, FileUploadState> {
+    return this._fileUploadStates;
+  }
+  private get shouldShowUnknownMessageSendError() {
+    // Since unknownMessageSendError error is coming from the catch-all block in doSendMessage,
+    // we need to check if there already exists an error message in the last message, which is
+    // more specific and would take precedence (we don't want to show the generic unknown error
+    // message if there is a more specific error message in the last message)
+    if (!this.unknownMessageSendError) {
+      return false;
+    }
+    let lastMessage = this.messages[this.messages.length - 1];
+    return lastMessage?.errorMessage === undefined;
+  }
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.doMatrixEventFlush.perform();
+    registerDestructor(this, () => {
+      this.cleanupScrollState();
+      this.getConversationScrollability = undefined;
+      this.scrollConversationToBottom = undefined;
+    });
+  }
+
+  private get existingScrollState() {
+    let room = this.roomForCleanup;
+    return room ? this.roomScrollState.get(room) : undefined;
+  }
+
+  private ensureScrollState() {
+    let room = this.room;
+    if (!room) {
+      return;
+    }
+    if (this.lastKnownRoom && this.lastKnownRoom !== room) {
+      this.cleanupScrollState(this.lastKnownRoom);
+    }
+    this.lastKnownRoom = room;
+    let state = this.roomScrollState.get(room);
+    if (!state) {
+      let nextState!: RoomScrollState;
+      nextState = new TrackedObject({
+        isScrolledToBottom: false,
+        userHasScrolled: false,
+        isConversationScrollable: false,
+        messageElements: new Map(),
+        messageScrollers: new Map(),
+        messageVisibilityObserver: new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            let index = nextState.messageElements.get(
+              entry.target as HTMLElement,
+            );
+            if (index != null) {
+              if (
+                (!nextState.isConversationScrollable || entry.isIntersecting) &&
+                index > this.lastReadMessageIndex
+              ) {
+                this.sendReadReceipt(this.messages[index]);
+              }
+            }
+          });
+        }),
+      });
+      state = nextState;
+      this.roomScrollState.set(room, state);
+    }
+    return state;
+  }
+
+  private cleanupScrollState(room = this.roomForCleanup) {
+    if (!room) {
+      return;
+    }
+    let scrollState = this.roomScrollState.get(room);
+    if (!scrollState) {
+      return;
+    }
+    for (let element of scrollState.messageElements.keys()) {
+      scrollState.messageVisibilityObserver.unobserve(element);
+    }
+    scrollState.messageVisibilityObserver.disconnect();
+    scrollState.messageElements.clear();
+    scrollState.messageScrollers.clear();
+    scrollState.isScrolledToBottom = false;
+    scrollState.userHasScrolled = false;
+    scrollState.isConversationScrollable = false;
+    this.roomScrollState.delete(room);
+  }
+
+  // Using a resource for automatically attached files,
+  // so the file can be reattached after being removed
+  // when the user opens a different file and then returns to this one.
+  @use private autoAttachedFileResource = resource(() => {
+    let state = new TrackedObject<{
+      value: FileDef[];
+      remove: (sourceUrl?: string) => void;
+    }>({
+      value: [],
+      remove: (sourceUrl?: string) => {
+        if (!sourceUrl) {
+          state.value = [];
+          return;
+        }
+        state.value = state.value.filter(
+          (file) => file.sourceUrl !== sourceUrl,
+        );
+      },
+    });
+
+    let autoAttachedFileUrls = this.autoAttachedFileUrls;
+    let manuallyAttachedFiles = this.filesToAttach;
+    let autoAttachedFileUrlsKey = autoAttachedFileUrls.join('\n');
+
+    let removedFileUrls: string[];
+    if (autoAttachedFileUrlsKey !== this.lastAutoAttachedFileUrlsKey) {
+      this.removedAttachedFileUrls.splice(0);
+      removedFileUrls = this.removedAttachedFileUrls;
+      this.lastAutoAttachedFileUrlsKey = autoAttachedFileUrlsKey;
+    } else {
+      removedFileUrls = this.removedAttachedFileUrls;
+    }
+
+    let candidateUrls = autoAttachedFileUrls.filter((url) => {
+      if (!url) {
+        return false;
+      }
+      let isManuallyAttached = manuallyAttachedFiles.some(
+        (file) => file.sourceUrl === url,
+      );
+      let isRemoved = removedFileUrls.includes(url);
+      return !isManuallyAttached && !isRemoved;
+    });
+
+    state.value = candidateUrls.map((url) => {
+      let name = url.split('/').pop();
+      return this.matrixService.fileAPI.createFileDef({
+        sourceUrl: url,
+        name,
+        contentType: url.endsWith('.json')
+          ? SupportedMimeType.CardJson
+          : name
+            ? inferContentType(name)
+            : undefined,
+      });
+    });
+
+    return state;
+  });
+
+  private get autoAttachedFileUrls() {
+    let codePathUrl = this.operatorModeStateService.state.codePath?.href;
+    if (!codePathUrl) {
+      return [];
+    }
+
+    let urls = [codePathUrl];
+
+    if (codePathUrl.endsWith('.json')) {
+      let openFile = this.operatorModeStateService.openFile?.current;
+      if (openFile && isReady(openFile)) {
+        try {
+          let fileContent = JSON.parse(openFile.content);
+          let adoptsFrom = fileContent?.data?.meta?.adoptsFrom;
+          if (adoptsFrom?.module) {
+            let moduleURLWithExtension = new URL(
+              adoptsFrom.module.endsWith('.gts')
+                ? adoptsFrom.module
+                : `${adoptsFrom.module}.gts`,
+              openFile.url,
+            );
+            if (!urls.includes(moduleURLWithExtension.href)) {
+              urls.push(moduleURLWithExtension.href);
+            }
+          }
+        } catch (_error) {
+          // If JSON parse fails, fall back to just the current file URL.
+        }
+      }
+    }
+
+    return urls;
+  }
+
+  private get autoAttachedFiles() {
+    return this.operatorModeStateService.state.submode === Submodes.Code
+      ? this.autoAttachedFileResource.value
+      : [];
+  }
+
+  private get removeAutoAttachedFile() {
+    return (sourceUrl?: string) => {
+      this.autoAttachedFileResource.remove(sourceUrl);
+    };
+  }
+
+  private markAttachedFileRemoved(sourceUrl?: string | null) {
+    if (!sourceUrl) {
+      return;
+    }
+    if (!this.removedAttachedFileUrls.includes(sourceUrl)) {
+      this.removedAttachedFileUrls.push(sourceUrl);
+    }
+  }
+
+  private get filesToAttach() {
+    return this.matrixService.getFilesToSend(this.args.roomId) ?? [];
+  }
+
+  @use private playgroundPanelCardIdResource = resource(() => {
+    let state = new TrackedObject<{
+      value: string | undefined;
+      remove: () => void;
+    }>({
+      value: undefined,
+      remove: () => {
+        state.value = undefined;
+      },
+    });
+
+    (async () => {
+      if (!this.args.selectedCardRef) {
+        return;
+      }
+      let moduleId = internalKeyFor(this.args.selectedCardRef, undefined);
+      state.value = this.playgroundPanelService.getSelection(moduleId)?.cardId;
+    })();
+
+    return state;
+  });
+
+  private get playgroundPanelCardId() {
+    return this.playgroundPanelCardIdResource.value;
+  }
+
+  private get removePlaygroundPanelCard() {
+    return this.playgroundPanelCardIdResource.remove;
+  }
+
+  private get isScrolledToBottom() {
+    return this.existingScrollState?.isScrolledToBottom ?? false;
+  }
+
+  private get userHasScrolled() {
+    return this.existingScrollState?.userHasScrolled ?? false;
+  }
+
+  private get isConversationScrollable() {
+    return this.existingScrollState?.isConversationScrollable ?? false;
+  }
+
+  private registerMessageScroller = ({
+    index,
+    element,
+    scrollTo,
+  }: {
+    index: number;
+    element: HTMLElement;
+    scrollTo: (arg?: any) => void;
+  }) => {
+    let scrollState = this.ensureScrollState();
+    if (!scrollState) {
+      return;
+    }
+    for (let [
+      registeredElement,
+      registeredIndex,
+    ] of scrollState.messageElements) {
+      if (registeredIndex === index && registeredElement !== element) {
+        scrollState.messageElements.delete(registeredElement);
+        scrollState.messageVisibilityObserver.unobserve(registeredElement);
+        break;
+      }
+    }
+    scrollState.messageElements.set(element, index);
+    scrollState.messageScrollers.set(index, scrollTo);
+    scrollState.messageVisibilityObserver.observe(element);
+    scrollState.isConversationScrollable = Boolean(
+      this.getConversationScrollability?.(),
+    );
+    if (!this.isConversationScrollable || !this.isAllowedToAutoScroll) {
+      return;
+    }
+
+    // TODO udpate this so that we preserve the scroll position as the user
+    // changes rooms and we restore the scroll position when a user enters a room
+    if (
+      // If we are permitted to auto-scroll and if there are no unread messages in the
+      // room, then scroll to the last message in the room.
+      !this.hasUnreadMessages &&
+      index === this.messages.length - 1 &&
+      !this.isScrolledToBottom
+    ) {
+      scrollTo();
+    } else if (
+      // otherwise if we are permitted to auto-scroll and if there are unread
+      // messages in the room, then scroll to the first unread message in the room.
+      this.hasUnreadMessages &&
+      index === this.lastReadMessageIndex + 1
+    ) {
+      scrollTo();
+    } else if (this.isScrolledToBottom) {
+      this.scrollConversationToBottom?.();
+    }
+  };
+
+  private unregisterMessageScroller = ({
+    index,
+    element,
+  }: {
+    index: number;
+    element: HTMLElement;
+  }) => {
+    let scrollState = this.existingScrollState;
+    if (!scrollState) {
+      return;
+    }
+    let elementOwnsIndex = scrollState.messageElements.get(element) === index;
+    scrollState.messageElements.delete(element);
+    if (elementOwnsIndex) {
+      scrollState.messageScrollers.delete(index);
+    }
+    scrollState.messageVisibilityObserver.unobserve(element);
+  };
+
+  private registerConversationScroller = (
+    isConversationScrollable: () => boolean,
+    scrollToBottom: () => void,
+  ) => {
+    this.getConversationScrollability = isConversationScrollable;
+    this.scrollConversationToBottom = scrollToBottom;
+  };
+
+  private setScrollPosition = ({ isBottom }: { isBottom: boolean }) => {
+    let scrollState = this.ensureScrollState();
+    if (!scrollState) {
+      return;
+    }
+    scrollState.isScrolledToBottom = isBottom;
+    if (!isBottom) {
+      scrollState.userHasScrolled = true;
+    }
+  };
+
+  private scrollToFirstUnread = () => {
+    if (!this.hasUnreadMessages) {
+      return;
+    }
+
+    let firstUnreadIndex = this.lastReadMessageIndex + 1;
+    let scrollTo =
+      this.existingScrollState?.messageScrollers.get(firstUnreadIndex);
+    if (!scrollTo) {
+      console.warn(`No scroller for message index ${firstUnreadIndex}`);
+    } else {
+      scrollTo({ behavior: 'smooth' });
+    }
+  };
+
+  private get isAllowedToAutoScroll() {
+    return !this.userHasScrolled || this.isScrolledToBottom;
+  }
+
+  // For efficiency, read receipts are implemented using "up to" markers. This
+  // marker indicates that the acknowledgement applies to all events "up to and
+  // including" the event specified. For example, marking an event as "read" would
+  // indicate that the user had read all events up to the referenced event.
+  @cached private get lastReadMessageIndex() {
+    let readReceiptIndicies: number[] = [];
+    for (let receipt of this.matrixService.currentUserEventReadReceipts.keys()) {
+      let maybeIndex = this.messages.findIndex((m) => m.eventId === receipt);
+      if (maybeIndex != null) {
+        readReceiptIndicies.push(maybeIndex);
+      }
+    }
+    return max(readReceiptIndicies) ?? -1;
+  }
+
+  @cached private get numberOfUnreadMessages() {
+    let unreadMessagesCount = 0;
+    let firstUnreadIndex = this.lastReadMessageIndex + 1;
+    for (let i = firstUnreadIndex; i < this.messages.length; i++) {
+      if (
+        this.matrixService.profile.userId === this.messages[i].author.userId
+      ) {
+        continue;
+      }
+      unreadMessagesCount++;
+    }
+    return unreadMessagesCount;
+  }
+
+  private get hasUnreadMessages() {
+    return this.numberOfUnreadMessages > 0;
+  }
+
+  private get showUnreadIndicator() {
+    // if user is already scrolled to bottom we don't show the indicator to
+    // prevent the flash of the indicator appearing and then disappearing during
+    // the read receipt acknowledgement
+    return (
+      this.isConversationScrollable &&
+      this.hasUnreadMessages &&
+      !this.isScrolledToBottom
+    );
+  }
+
+  private get isAcceptingAll() {
+    return (
+      this.executeAllReadyActionsTask.isRunning ||
+      this.commandService.isPerformingAcceptAllForRoom(this.args.roomId)
+    );
+  }
+
+  private get unreadMessageText() {
+    return `${this.numberOfUnreadMessages} New ${pluralize(
+      'Message',
+      this.numberOfUnreadMessages,
+    )}`;
+  }
+
+  private sendReadReceipt(message: Message) {
+    if (this.matrixService.profile.userId === message.author.userId) {
+      if (isTesting()) {
+        console.log(
+          `[read-receipt-trace] skip self event=${message.eventId} room=${this.args.roomId}`,
+        );
+      }
+      return;
+    }
+    if (this.matrixService.currentUserEventReadReceipts.has(message.eventId)) {
+      if (isTesting()) {
+        console.log(
+          `[read-receipt-trace] skip already-acked event=${message.eventId} room=${this.args.roomId}`,
+        );
+      }
+      return;
+    }
+
+    // sendReadReceipt expects an actual MatrixEvent (as defined in the matrix
+    // SDK), but it' not available to us here - however, we can fake it by adding
+    // the necessary methods
+    let matrixEvent = {
+      getId: () => message.eventId,
+      getRoomId: () => this.args.roomId,
+      getTs: () => message.created.getTime(),
+    };
+
+    if (isTesting()) {
+      console.log(
+        `[read-receipt-trace] schedule event=${message.eventId} room=${this.args.roomId}`,
+      );
+    }
+    // Without scheduling this after render, this produces the "attempted to
+    // update value, but it had already been used previously in the same
+    // computation" error
+    schedule('afterRender', () => {
+      if (isTesting()) {
+        console.log(
+          `[read-receipt-trace] dispatch event=${message.eventId} room=${this.args.roomId}`,
+        );
+      }
+      this.matrixService.sendReadReceipt(matrixEvent as MatrixEvent);
+    });
+  }
+
+  private maybeRetryAction = (messageIndex: number, message: Message) => {
+    if (this.isLastMessage(messageIndex) && message.isRetryable) {
+      return this.resendLastMessage;
+    }
+    return undefined;
+  };
+
+  private isMessageStreaming = (message: Message) => {
+    return !message.isStreamingFinished;
+  };
+
+  private doMatrixEventFlush = restartableTask(async () => {
+    await this.matrixService.flushMembership;
+    await this.matrixService.flushTimeline;
+    await this.args.roomResource.processing;
+  });
+
+  private get messages() {
+    return this.args.roomResource.messages;
+  }
+
+  private get skills(): RoomSkill[] {
+    return this.args.roomResource.skills;
+  }
+
+  private get llmsForSelectMenu(): LLMOption[] {
+    // Read from the system card if available
+    let systemCard = this.matrixService.systemCard;
+    if (systemCard?.modelConfigurations) {
+      let options: LLMOption[] = [];
+      let configModelIds = new Set<string>();
+      for (let modelConfig of systemCard.modelConfigurations) {
+        if (modelConfig.modelId && modelConfig.id) {
+          options.push({
+            id: modelConfig.id,
+            modelId: modelConfig.modelId,
+            name: modelConfig.cardTitle || modelConfig.modelId,
+          });
+          configModelIds.add(modelConfig.modelId);
+        }
+      }
+      // Add any used LLMs that aren't already covered by a config
+      for (let usedLLM of this.args.roomResource.usedLLMs) {
+        if (usedLLM && !configModelIds.has(usedLLM)) {
+          options.push({
+            id: usedLLM,
+            modelId: usedLLM,
+            name: usedLLM,
+          });
+        }
+      }
+      return options;
+    }
+
+    // Fallback to hardcoded list for backwards compatibility
+    let ids = [
+      ...new Set([...DEFAULT_LLM_LIST, ...this.args.roomResource.usedLLMs]),
+    ]
+      .filter(Boolean)
+      .sort();
+
+    return ids.map((id) => ({
+      id,
+      modelId: id,
+      name: DEFAULT_LLM_ID_TO_NAME[id] ?? id,
+    }));
+  }
+
+  private get systemCardId(): string | undefined {
+    return this.matrixService.systemCard?.id;
+  }
+
+  private get isDefaultSystemCard(): boolean {
+    let systemCardId = this.systemCardId;
+    let defaultSystemCardId = ENV.defaultSystemCardId;
+    if (!defaultSystemCardId) {
+      return true;
+    }
+    return !systemCardId || systemCardId === defaultSystemCardId;
+  }
+
+  @action
+  private goToSystemCard() {
+    let systemCardId = this.systemCardId;
+    if (systemCardId) {
+      let stackIndex = Math.min(
+        this.operatorModeStateService.numberOfStacks(),
+        1,
+      );
+      let stackItem = this.operatorModeStateService.createStackItem(
+        systemCardId,
+        stackIndex,
+        'isolated',
+      );
+      this.operatorModeStateService.addItemToStack(stackItem);
+    }
+  }
+
+  private restoreDefaultSystemCardTask = task(async () => {
+    await this.matrixService.setUserSystemCard(undefined);
+  });
+
+  private get sortedSkills(): RoomSkill[] {
+    return [...this.skills].sort((a, b) => {
+      // Not all of the skills have a title, so we use the sourceUrl as a fallback
+      // which should be consistent.
+      let aTitle = a.cardId || a.fileDef.sourceUrl;
+      let bTitle = b.cardId || b.fileDef.sourceUrl;
+      return aTitle?.localeCompare(bTitle ?? '') ?? 0;
+    });
+  }
+
+  private get room() {
+    return this.args.roomResource?.matrixRoom;
+  }
+
+  private get roomForCleanup() {
+    return this.room ?? this.lastKnownRoom;
+  }
+
+  private doWhenRoomChanges = restartableTask(async () => {
+    await all([this.cardService.cardsSettled(), timeout(500)]);
+  });
+
+  private get messageToSend() {
+    return this.matrixService.getMessageToSend(this.args.roomId) ?? '';
+  }
+
+  private get cardIdsToAttach() {
+    return this.matrixService.getCardsToSend(this.args.roomId);
+  }
+
+  @action private resendLastMessage() {
+    if (!this.room) {
+      throw new Error(
+        'Bug: should not be able to resend a message without a room.',
+      );
+    }
+
+    let myMessages = this.messages.filter(
+      (message) => message.author.userId === this.matrixService.userId,
+    );
+    if (myMessages.length === 0) {
+      throw new Error(
+        'Bug: should not be able to resend a message that does not exist.',
+      );
+    }
+    let myLastMessage = myMessages[myMessages.length - 1];
+
+    this.doSendMessage.perform(
+      myLastMessage.body,
+      myLastMessage!.attachedCardIds || [],
+      myLastMessage.attachedFiles,
+      myLastMessage.clientGeneratedId,
+      true,
+    );
+  }
+
+  @action
+  private setMessage(message: string) {
+    this.matrixService.setMessageToSend(this.args.roomId, message);
+  }
+
+  @action
+  private sendMessage(prompt?: string) {
+    let cards = [];
+    if (this.cardIdsToAttach) {
+      cards.push(...this.cardIdsToAttach);
+    }
+    if (this.autoAttachedCardIds.size > 0) {
+      this.autoAttachedCardIds.forEach((card) => {
+        cards.push(card);
+      });
+    }
+
+    let files = [];
+    if (this.autoAttachedFiles.length > 0) {
+      files.push(...this.autoAttachedFiles);
+    }
+    files.push(...this.filesToAttach);
+
+    this.doSendMessage.perform(
+      prompt ?? this.messageToSend,
+      cards.length ? cards : undefined,
+      files.length ? files : undefined,
+    );
+  }
+
+  @action
+  private chooseCard(cardId: string) {
+    // handle the case where auto-attached card pill is clicked
+    if (this.autoAttachedCardIds.has(cardId)) {
+      this.removedAttachedCardIds.add(cardId);
+    }
+
+    let cardIds = this.cardIdsToAttach ?? [];
+    if (!cardIds.includes(cardId)) {
+      this.matrixService.setCardsToSend(this.args.roomId, [...cardIds, cardId]);
+    }
+  }
+
+  @action
+  private removeCard(id: string) {
+    if (this.playgroundPanelCardId === id) {
+      this.removePlaygroundPanelCard();
+      return;
+    }
+
+    if (this.autoAttachedCardIds.has(id)) {
+      this.removedAttachedCardIds.add(id);
+      return;
+    }
+
+    let cardIds = this.cardIdsToAttach ?? [];
+    if (!cardIds.length) {
+      return;
+    }
+
+    let next = cardIds.filter((url) => url !== id);
+    if (next.length === cardIds.length) {
+      return;
+    }
+
+    this.matrixService.setCardsToSend(
+      this.args.roomId,
+      next.length ? next : undefined,
+    );
+  }
+
+  private chooseFileTask = enqueueTask(async (file: FileDef) => {
+    // handle the case where auto-attached file pill is clicked
+    if (this.isAutoAttachedFile(file)) {
+      this.removeAutoAttachedFile(file.sourceUrl ?? undefined);
+    }
+
+    let files = this.filesToAttach;
+    if (!files?.find((f) => f.sourceUrl === file.sourceUrl)) {
+      await this.matrixService.prefetchFileContent(file);
+      this.matrixService.setFilesToSend(this.args.roomId, [...files, file]);
+      this.startFileUploadTask.perform(file);
+    }
+  });
+
+  private chooseLocalFileTask = task(async () => {
+    let localFile = await this.fileUpload.pickLocalFile();
+    if (!localFile) {
+      return;
+    }
+    await this.attachLocalFile(localFile);
+  });
+
+  @action
+  private handleChatInputDragOver(event: Event) {
+    let dragEvent = event as DragEvent;
+    if (!this.isFileDrag(dragEvent.dataTransfer)) {
+      return;
+    }
+    dragEvent.preventDefault();
+    dragEvent.stopPropagation();
+    this.isDropZoneActive = true;
+    if (dragEvent.dataTransfer) {
+      dragEvent.dataTransfer.dropEffect = 'copy';
+    }
+  }
+
+  @action
+  private handleChatInputDragEnter(event: Event) {
+    let dragEvent = event as DragEvent;
+    if (!this.isFileDrag(dragEvent.dataTransfer)) {
+      return;
+    }
+    dragEvent.preventDefault();
+    dragEvent.stopPropagation();
+    this.dropZoneDragDepth++;
+    this.isDropZoneActive = true;
+  }
+
+  @action
+  private handleChatInputDragLeave(event: Event) {
+    let dragEvent = event as DragEvent;
+    if (!this.isFileDrag(dragEvent.dataTransfer) && !this.isDropZoneActive) {
+      return;
+    }
+    dragEvent.preventDefault();
+    dragEvent.stopPropagation();
+    this.dropZoneDragDepth = Math.max(0, this.dropZoneDragDepth - 1);
+    if (this.dropZoneDragDepth === 0) {
+      this.isDropZoneActive = false;
+    }
+  }
+
+  @action
+  private handleChatInputDrop(event: Event) {
+    let dragEvent = event as DragEvent;
+    let files = Array.from(dragEvent.dataTransfer?.files ?? []);
+    if (!files.length) {
+      return;
+    }
+    dragEvent.preventDefault();
+    dragEvent.stopPropagation();
+    this.dropZoneDragDepth = 0;
+    this.isDropZoneActive = false;
+    this.attachLocalFilesTask.perform(files);
+  }
+
+  @action
+  private handleChatInputPaste(event: ClipboardEvent) {
+    let files = this.getClipboardFiles(event.clipboardData);
+    if (!files.length) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.attachLocalFilesTask.perform(files);
+  }
+
+  private attachLocalFilesTask = enqueueTask(async (files: File[]) => {
+    for (let file of files) {
+      await this.attachLocalFile(file);
+    }
+  });
+
+  private getClipboardFiles(clipboardData: DataTransfer | null): File[] {
+    if (!clipboardData) {
+      return [];
+    }
+
+    let files = Array.from(clipboardData.files ?? []);
+    if (files.length) {
+      return files;
+    }
+
+    let itemFiles: File[] = [];
+    for (let item of Array.from(clipboardData.items ?? [])) {
+      if (item.kind !== 'file') {
+        continue;
+      }
+      let file = item.getAsFile();
+      if (file) {
+        itemFiles.push(file);
+      }
+    }
+
+    return itemFiles;
+  }
+
+  private isFileDrag(dataTransfer: DataTransfer | null | undefined): boolean {
+    if (!dataTransfer) {
+      return false;
+    }
+    return Array.from(dataTransfer.types ?? []).includes('Files');
+  }
+
+  private async attachLocalFile(localFile: File) {
+    let bytes = new Uint8Array(await localFile.arrayBuffer());
+    let file = await this.createLocalFileDef(localFile, bytes);
+    let files = this.filesToAttach;
+    let contentType =
+      file.contentType || localFile.type || 'application/octet-stream';
+    await this.matrixService.prefetchLocalFileContent(file, bytes, contentType);
+    this.matrixService.setFilesToSend(this.args.roomId, [...files, file]);
+    this.startFileUploadTask.perform(file);
+  }
+
+  @action
+  private isAutoAttachedFile(file: FileDef) {
+    return this.autoAttachedFiles.some(
+      (autoFile) => autoFile.sourceUrl === file.sourceUrl,
+    );
+  }
+
+  @action
+  private removeFile(file: FileDef) {
+    if (this.isAutoAttachedFile(file)) {
+      this.removeAutoAttachedFile(file.sourceUrl ?? undefined);
+      return;
+    }
+
+    let files = this.filesToAttach;
+    if (!files.length) {
+      return;
+    }
+
+    let newFiles = files.filter((f) => f.sourceUrl !== file.sourceUrl);
+    if (newFiles.length === files.length) {
+      return;
+    }
+
+    this.matrixService.setFilesToSend(
+      this.args.roomId,
+      newFiles.length ? newFiles : undefined,
+    );
+
+    this.markAttachedFileRemoved(file.sourceUrl);
+    if (file.sourceUrl) {
+      this._fileUploadStates.delete(file.sourceUrl);
+    }
+  }
+
+  private startFileUploadTask = task(async (file: FileDef) => {
+    let sourceUrl = file.sourceUrl;
+    if (!sourceUrl) return;
+    this._fileUploadStates.set(sourceUrl, { status: 'uploading' });
+    try {
+      let [uploadedFile] = await this.matrixService.uploadFiles([file]);
+      let uploadedOrOriginal = uploadedFile ?? file;
+      // Only update state if the file is still attached (guards against
+      // race where file is removed while upload was in-flight).
+      let files = this.filesToAttach;
+      if (files?.find((f) => f.sourceUrl === sourceUrl)) {
+        let nextFiles = files.map((f) =>
+          f.sourceUrl === sourceUrl ? uploadedOrOriginal : f,
+        );
+        this.matrixService.setFilesToSend(this.args.roomId, nextFiles);
+        this._fileUploadStates.set(sourceUrl, { status: 'complete' });
+      }
+    } catch (e: any) {
+      // Only set error state if the file is still attached, to avoid
+      // blocking canSend for a file the user already removed.
+      if (this.filesToAttach?.find((f) => f.sourceUrl === sourceUrl)) {
+        this._fileUploadStates.set(sourceUrl, {
+          status: 'error',
+          error: e?.message,
+        });
+      }
+    }
+  });
+
+  private get hasFileUploadIssues() {
+    for (let [, state] of this._fileUploadStates) {
+      if (state.status === 'uploading' || state.status === 'error') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  @action
+  private retryFileUpload(file: FileDef) {
+    this.startFileUploadTask.perform(file);
+  }
+
+  private buildLocalSourceUrl(fileName: string): string {
+    return `${LOCAL_SOURCE_URL_PREFIX}${uuidv4()}/${encodeURIComponent(fileName)}`;
+  }
+
+  private async createLocalFileDef(
+    localFile: File,
+    bytes: Uint8Array,
+  ): Promise<FileDef> {
+    let sourceUrl = this.buildLocalSourceUrl(localFile.name);
+    let fileDefCodeRef = resolveFileDefCodeRef(new URL(sourceUrl));
+    let extractor = new FileDefAttributesExtractor({
+      loaderService: this.loaderService,
+      network: this.network,
+      fileURL: sourceUrl,
+      fileDefCodeRef,
+      baseFileDefCodeRef: baseFileRef,
+      contentHash: undefined,
+      contentSize: bytes.byteLength,
+      fileBytes: bytes,
+      buildError: (errorUrl, error) => {
+        let errorJSONAPI = formattedError(errorUrl, error).errors[0];
+        return errorJsonApiToErrorEntry(errorJSONAPI);
+      },
+    });
+    let extracted = await extractor.extract();
+    if (extracted.status === 'error' || !extracted.resource) {
+      throw new Error(
+        extracted.error?.error?.message ??
+          `Failed to extract file metadata for ${localFile.name}`,
+      );
+    }
+
+    let classCodeRef =
+      extracted.resource.meta.adoptsFrom &&
+      'module' in extracted.resource.meta.adoptsFrom &&
+      'name' in extracted.resource.meta.adoptsFrom
+        ? extracted.resource.meta.adoptsFrom
+        : fileDefCodeRef;
+    let fileDefModule = await this.loaderService.loader.import<
+      Record<string, unknown>
+    >(classCodeRef.module);
+    let FileDefKlass = fileDefModule[classCodeRef.name] as
+      | (new (attributes: Record<string, unknown>) => FileDef)
+      | undefined;
+    let baseAttributes = extracted.resource.attributes as Record<
+      string,
+      unknown
+    >;
+    let attributes: Record<string, unknown> = {
+      ...baseAttributes,
+      sourceUrl,
+      url: sourceUrl,
+      name: (baseAttributes.name as string | undefined) ?? localFile.name,
+      contentSize:
+        (baseAttributes.contentSize as number | undefined) ?? bytes.byteLength,
+    };
+
+    if (!FileDefKlass) {
+      return this.matrixService.fileAPI.createFileDef({
+        sourceUrl,
+        url: sourceUrl,
+        name: localFile.name,
+        contentType:
+          (attributes.contentType as string | undefined) ??
+          localFile.type ??
+          'application/octet-stream',
+        contentHash: attributes.contentHash as string | undefined,
+        contentSize: attributes.contentSize as number | undefined,
+      });
+    }
+
+    return new FileDefKlass(attributes);
+  }
+
+  private doSendMessage = enqueueTask(
+    async (
+      message: string | undefined,
+      cardsOrIds?: CardDef[] | string[],
+      files?: FileDef[],
+      clientGeneratedId: string = uuidv4(),
+      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);
+        this._fileUploadStates.clear();
+      }
+
+      let openCardIds = new Set([
+        ...(this.operatorModeStateService.getOpenCardIds() || []),
+        ...this.autoAttachedCardIds,
+      ]) as Set<RealmResourceIdentifier>;
+      let context =
+        await this.operatorModeStateService.getSummaryForAIBot(openCardIds);
+      try {
+        let cards: CardDef[] | undefined = [];
+        if (typeof cardsOrIds?.[0] === 'string') {
+          // we use detached instances since these are just
+          // serialized and send to matrix--these don't appear
+          // elsewhere in our app.
+          let cardsOrErrors = await Promise.all(
+            (cardsOrIds as string[]).map((id) => this.store.get(id)),
+          );
+          cardsOrErrors = cardsOrErrors.filter(Boolean);
+          for (let cardOrError of cardsOrErrors) {
+            if (isCardInstance(cardOrError)) {
+              cards?.push(cardOrError as CardDef);
+            } else {
+              // error, let's attach it as a file instead if possible
+              if (cardOrError.id) {
+                let cardFileDef = this.matrixService.fileAPI.createFileDef({
+                  sourceUrl: cardOrError.id + '.json',
+                  name: cardOrError.id.split('/').pop(),
+                });
+                if (!files) {
+                  files = [];
+                }
+                files.push(cardFileDef);
+              }
+            }
+          }
+        } else {
+          cards = cardsOrIds as CardDef[] | undefined;
+        }
+
+        await this.matrixService.sendMessage(
+          this.args.roomId,
+          message,
+          cards,
+          files,
+          clientGeneratedId,
+          context,
+        );
+      } 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,
+          );
+        }
+      }
+    },
+  );
+
+  @cached
+  private get topMostStackItems(): StackItem[] {
+    // side effect: whenever the stack changes we reset the
+    // auto-attached removed items state in a task to prevent rerender cycles
+    this.resetAutoAttachedRemovedStateTask.perform();
+    return this.operatorModeStateService.topMostStackItems();
+  }
+
+  private resetAutoAttachedRemovedStateTask = task(async () => {
+    await Promise.resolve();
+    this.removedAttachedCardIds.clear();
+  });
+
+  private get autoAttachedCardIds() {
+    return this.autoAttachmentResource.cardIds;
+  }
+
+  private updateSkillIsActiveTask = task(
+    async (isActive: boolean, skillCardId?: string) => {
+      await new UpdateRoomSkillsCommand(
+        this.commandService.commandContext,
+      ).execute({
+        roomId: this.args.roomId,
+        skillCardIdsToActivate: isActive ? [skillCardId!] : [],
+        skillCardIdsToDeactivate: isActive ? [] : [skillCardId!],
+      });
+    },
+  );
+
+  private get canSend() {
+    return (
+      !this.doSendMessage.isRunning &&
+      Boolean(
+        this.messageToSend?.trim() ||
+        this.cardIdsToAttach?.length ||
+        this.autoAttachedCardIds.size !== 0 ||
+        this.filesToAttach?.length ||
+        this.autoAttachedFiles.length > 0,
+      ) &&
+      !this.hasFileUploadIssues &&
+      !!this.room &&
+      !this.messages.some((m) => this.isPendingMessage(m)) &&
+      !this.matrixService.isLoadingTimeline &&
+      !this.aiAssistantPanelService.isPreparingSession
+    );
+  }
+
+  @action
+  private isLastMessage(messageIndex: number) {
+    return (this.room && messageIndex === this.messages.length - 1) ?? false;
+  }
+
+  private isPendingMessage(message: Message) {
+    return message.status === 'sending' || message.status === 'queued';
+  }
+
+  private attachSkillTask = task(async (cardId: string) => {
+    let updateRoomSkillsCommand = new UpdateRoomSkillsCommand(
+      this.commandService.commandContext,
+    );
+
+    await updateRoomSkillsCommand.execute({
+      roomId: this.args.roomId,
+      skillCardIdsToActivate: [cardId],
+    });
+  });
+
+  @action
+  private setSelectedBottomAction(
+    action: 'skill-menu' | 'llm-select' | undefined,
+  ) {
+    this.selectedBottomAction = action;
+  }
+
+  @action
+  private skipSessionPreparation() {
+    this.aiAssistantPanelService.skipSessionPreparation();
+  }
+
+  private get displaySkillMenu() {
+    return (
+      !this.selectedBottomAction || this.selectedBottomAction === 'skill-menu'
+    );
+  }
+
+  private get displayLLMSelect() {
+    return (
+      !this.selectedBottomAction || this.selectedBottomAction === 'llm-select'
+    );
+  }
+
+  private get displayLLMModeSelect() {
+    return this.displaySkillMenu && this.displayLLMSelect;
+  }
+
+  private get displayAttachedItems() {
+    return (
+      this.filesToAttach?.length ||
+      this.cardIdsToAttach?.length ||
+      this.autoAttachedFiles.length > 0 ||
+      this.autoAttachedCardIds?.size
+    );
+  }
+
+  @cached
+  private get readyCommands() {
+    let lastMessage = this.messages[this.messages.length - 1];
+
+    if (!lastMessage || !lastMessage.commands) {
+      return [];
+    }
+    return lastMessage.commands.filter(
+      (command) =>
+        (command.status === 'ready' || command.status === undefined) &&
+        !this.commandService.currentlyExecutingCommandRequestIds.has(
+          command.id!,
+        ) &&
+        !this.commandService.executedCommandRequestIds.has(command.id!),
+    );
+  }
+
+  @cached
+  private get readyCodePatches() {
+    let lastMessage = this.messages[this.messages.length - 1];
+    if (!lastMessage || !lastMessage.htmlParts) return [];
+    return this.commandService.getReadyCodePatches(lastMessage.htmlParts);
+  }
+
+  private get generatingResults() {
+    return (
+      this.messages[this.messages.length - 1] &&
+      !this.messages[this.messages.length - 1].isStreamingFinished
+    );
+  }
+
+  @cached
+  private get displayActionBar() {
+    let lastMessage = this.messages[this.messages.length - 1];
+    if (
+      (this.lastCanceledActionMessageId &&
+        lastMessage?.eventId === this.lastCanceledActionMessageId) ||
+      lastMessage?.isCanceled
+    ) {
+      return false;
+    }
+    return (
+      this.showUnreadIndicator ||
+      this.generatingResults ||
+      this.readyCommands.length > 0 ||
+      this.readyCodePatches.length > 0 ||
+      this.isAcceptingAll
+    );
+  }
+
+  private async executeReadyCommands() {
+    for (let command of this.readyCommands) {
+      this.acceptingAllLabel = command.actionVerb;
+      await this.commandService.run.unlinked().perform(command);
+      this.acceptingAllLabel = undefined;
+    }
+  }
+
+  private async executeReadyCodePatches() {
+    let lastMessage = this.messages[this.messages.length - 1];
+    if (!lastMessage || !lastMessage.htmlParts) return;
+
+    await this.commandService.executeReadyCodePatches(
+      this.args.roomId,
+      lastMessage.htmlParts,
+    );
+  }
+
+  private executeAllReadyActionsTask = task(async () => {
+    await this.executeReadyCodePatches();
+    await this.executeReadyCommands();
+  });
+
+  @action
+  private cancelActionBar() {
+    let lastMessage = this.messages[this.messages.length - 1];
+    if (lastMessage) {
+      this.lastCanceledActionMessageId = lastMessage.eventId;
+      this.matrixService.markActionAsCanceled(
+        this.args.roomId,
+        lastMessage.eventId,
+      );
+    }
+  }
+
+  private stopGeneratingTask = task(async () => {
+    await this.matrixService.sendStopGeneratingEvent(this.args.roomId);
+  });
+}