diff --git a/.github/workflows/pr-boxel-host.yml b/.github/workflows/pr-boxel-host.yml
index a510f9f743..bf848a7b9b 100644
--- a/.github/workflows/pr-boxel-host.yml
+++ b/.github/workflows/pr-boxel-host.yml
@@ -59,12 +59,12 @@ jobs:
           RESOLVED_BASE_REALM_URL: https://realms-staging.stack.cards/base/
           MATRIX_URL: https://matrix-staging.stack.cards
           MATRIX_SERVER_NAME: stack.cards
-          EXPERIMENTAL_AI_ENABLED: true
           S3_PREVIEW_BUCKET_NAME: boxel-host-preview.stack.cards
           AWS_S3_BUCKET: boxel-host-preview.stack.cards
           AWS_REGION: us-east-1
           AWS_CLOUDFRONT_DISTRIBUTION: EU4RGLH4EOCHJ
           ENABLE_PLAYGROUND: true
+          AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED: true
         with:
           package: boxel-host
           environment: staging
@@ -90,12 +90,12 @@ jobs:
           RESOLVED_BASE_REALM_URL: https://app.boxel.ai/base/
           MATRIX_URL: https://matrix.boxel.ai
           MATRIX_SERVER_NAME: boxel.ai
-          EXPERIMENTAL_AI_ENABLED: true
           S3_PREVIEW_BUCKET_NAME: boxel-host-preview.boxel.ai
           AWS_S3_BUCKET: boxel-host-preview.boxel.ai
           AWS_REGION: us-east-1
           AWS_CLOUDFRONT_DISTRIBUTION: E2PZR9CIAW093B
           ENABLE_PLAYGROUND: true
+          AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED: true
         with:
           package: boxel-host
           environment: production
diff --git a/packages/base/file-api.gts b/packages/base/file-api.gts
index 0f56996ca5..3079998385 100644
--- a/packages/base/file-api.gts
+++ b/packages/base/file-api.gts
@@ -14,6 +14,13 @@ class View extends Component<typeof FileDef> {
   </template>
 }
 
+export type SerializedFile = {
+  sourceUrl: string;
+  url: string;
+  name: string;
+  contentType: string;
+};
+
 export class FileDef extends BaseDef {
   static displayName = 'File';
   static icon = FileIcon;
@@ -21,7 +28,7 @@ export class FileDef extends BaseDef {
   @field sourceUrl = contains(StringField);
   @field url = contains(StringField);
   @field name = contains(StringField);
-  @field type = contains(StringField);
+  @field contentType = contains(StringField);
 
   static embedded: BaseDefComponent = View;
   static fitted: BaseDefComponent = View;
@@ -33,7 +40,21 @@ export class FileDef extends BaseDef {
       sourceUrl: this.sourceUrl,
       url: this.url,
       name: this.name,
-      type: this.type,
+      contentType: this.contentType,
     };
   }
 }
+
+export function createFileDef({
+  url,
+  sourceUrl,
+  name,
+  contentType,
+}: {
+  url?: string;
+  sourceUrl: string;
+  name?: string;
+  contentType?: string;
+}) {
+  return new FileDef({ url, sourceUrl, name, contentType });
+}
diff --git a/packages/base/matrix-event.gts b/packages/base/matrix-event.gts
index ee1cd1d55b..91bd722a8a 100644
--- a/packages/base/matrix-event.gts
+++ b/packages/base/matrix-event.gts
@@ -16,6 +16,7 @@ import {
   APP_BOXEL_ROOM_SKILLS_EVENT_TYPE,
   APP_BOXEL_ACTIVE_LLM,
 } from '@cardstack/runtime-common/matrix-constants';
+import { type SerializedFile } from './file-api';
 
 interface BaseMatrixEvent {
   sender: string;
@@ -186,6 +187,7 @@ export interface CardMessageContent {
   data: {
     // we use this field over the wire since the matrix message protocol
     // limits us to 65KB per message
+    attachedFiles?: SerializedFile[];
     attachedCardsEventIds?: string[];
     attachedSkillEventIds?: string[];
     // we materialize this field on the server from the card
diff --git a/packages/host/app/components/ai-assistant/attachment-picker/index.gts b/packages/host/app/components/ai-assistant/attachment-picker/index.gts
index bda326da24..dd73b61069 100644
--- a/packages/host/app/components/ai-assistant/attachment-picker/index.gts
+++ b/packages/host/app/components/ai-assistant/attachment-picker/index.gts
@@ -8,32 +8,42 @@ import { restartableTask } from 'ember-concurrency';
 import { TrackedSet } from 'tracked-built-ins';
 
 import { AddButton, Tooltip, Pill } from '@cardstack/boxel-ui/components';
-import { and, cn, gt, not } from '@cardstack/boxel-ui/helpers';
+import { and, cn, eq, gt, not } from '@cardstack/boxel-ui/helpers';
 
 import {
   chooseCard,
   baseCardRef,
   isCardInstance,
+  chooseFile,
 } from '@cardstack/runtime-common';
 
 import CardPill from '@cardstack/host/components/card-pill';
+import FilePill from '@cardstack/host/components/file-pill';
+import ENV from '@cardstack/host/config/environment';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 import { type FileDef } from 'https://cardstack.com/base/file-api';
 
+import { Submode } from '../../submode-switcher';
+
 interface Signature {
   Element: HTMLDivElement;
   Args: {
     autoAttachedCards?: TrackedSet<CardDef>;
-    autoAttachedFiles?: FileDef[];
     cardsToAttach: CardDef[] | undefined;
+    autoAttachedFile?: FileDef;
     filesToAttach: FileDef[] | undefined;
     chooseCard: (card: CardDef) => void;
     removeCard: (card: CardDef) => void;
+    chooseFile: (file: FileDef) => void;
+    removeFile: (file: FileDef) => void;
+    submode: Submode;
     maxNumberOfItemsToAttach?: number;
   };
 }
 
+const isAttachingFilesEnabled =
+  ENV.featureFlags?.AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED;
 const MAX_ITEMS_TO_DISPLAY = 4;
 
 export default class AiAssistantAttachmentPicker extends Component<Signature> {
@@ -64,6 +74,27 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
               @removeCard={{@removeCard}}
             />
           {{/if}}
+        {{else if isAttachingFilesEnabled}}
+          {{#if (this.isAutoAttachedFile item)}}
+            <Tooltip @placement='top'>
+              <:trigger>
+                <FilePill
+                  @file={{item}}
+                  @isAutoAttachedFile={{true}}
+                  @removeFile={{@removeFile}}
+                />
+              </:trigger>
+              <:content>
+                Currently opened file is shared automatically
+              </:content>
+            </Tooltip>
+          {{else}}
+            <FilePill
+              @file={{item}}
+              @isAutoAttachedFile={{false}}
+              @removeFile={{@removeFile}}
+            />
+          {{/if}}
         {{/if}}
       {{/each}}
       {{#if
@@ -81,19 +112,35 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
         </Pill>
       {{/if}}
       {{#if this.canDisplayAddButton}}
-        <AddButton
-          class={{cn 'attach-button' icon-only=this.itemsToDisplay.length}}
-          @variant='pill'
-          @iconWidth='14'
-          @iconHeight='14'
-          {{on 'click' this.chooseCard}}
-          @disabled={{this.doChooseCard.isRunning}}
-          data-test-choose-card-btn
-        >
-          <span class={{if this.itemsToDisplay.length 'boxel-sr-only'}}>
-            Add Card
-          </span>
-        </AddButton>
+        {{#if (and (eq @submode 'code') isAttachingFilesEnabled)}}
+          <AddButton
+            class={{cn 'attach-button' icon-only=this.files.length}}
+            @variant='pill'
+            @iconWidth='14'
+            @iconHeight='14'
+            {{on 'click' this.chooseFile}}
+            @disabled={{this.doChooseFile.isRunning}}
+            data-test-choose-file-btn
+          >
+            <span class={{if this.files.length 'boxel-sr-only'}}>
+              Attach File
+            </span>
+          </AddButton>
+        {{else}}
+          <AddButton
+            class={{cn 'attach-button' icon-only=this.cards.length}}
+            @variant='pill'
+            @iconWidth='14'
+            @iconHeight='14'
+            {{on 'click' this.chooseCard}}
+            @disabled={{this.doChooseCard.isRunning}}
+            data-test-choose-card-btn
+          >
+            <span class={{if this.cards.length 'boxel-sr-only'}}>
+              Add Card
+            </span>
+          </AddButton>
+        {{/if}}
       {{/if}}
     </div>
     <style scoped>
@@ -136,30 +183,41 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
     this.areAllItemsDisplayed = !this.areAllItemsDisplayed;
   }
 
-  isCard = (item: CardDef | FileDef): item is CardDef => {
+  private isCard = (item: CardDef | FileDef): item is CardDef => {
     return isCardInstance(item);
   };
 
-  isAutoAttachedCard = (card: CardDef) => {
-    if (this.args.autoAttachedCards === undefined) {
-      return false;
-    }
-    return this.args.autoAttachedCards.has(card);
+  private isAutoAttachedCard = (card: CardDef) => {
+    return this.args.autoAttachedCards?.has(card);
+  };
+
+  private isAutoAttachedFile = (file: FileDef) => {
+    return this.args.autoAttachedFile?.sourceUrl === file.sourceUrl;
   };
 
   private get items() {
+    return [...this.cards, ...this.files];
+  }
+
+  private get cards() {
     let cards = this.args.cardsToAttach ?? [];
-    let files = this.args.filesToAttach ?? [];
+
     if (this.args.autoAttachedCards) {
       cards = [...new Set([...this.args.autoAttachedCards, ...cards])];
     }
 
     cards = cards.filter((card) => card.id); // Dont show new unsaved cards
+    return cards;
+  }
+
+  private get files() {
+    let files = this.args.filesToAttach ?? [];
 
-    if (this.args.autoAttachedFiles) {
-      files = [...new Set([...this.args.autoAttachedFiles, ...files])];
+    if (this.args.autoAttachedFile) {
+      files = [...new Set([this.args.autoAttachedFile, ...files])];
     }
-    return [...cards, ...files];
+
+    return files;
   }
 
   private get itemsToDisplay() {
@@ -189,4 +247,17 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
     });
     return chosenCard;
   });
+
+  @action
+  private async chooseFile() {
+    let file = await this.doChooseFile.perform();
+    if (file) {
+      this.args.chooseFile(file);
+    }
+  }
+
+  private doChooseFile = restartableTask(async () => {
+    let chosenFile: FileDef | undefined = await chooseFile();
+    return chosenFile;
+  });
 }
diff --git a/packages/host/app/components/ai-assistant/attachment-picker/usage.gts b/packages/host/app/components/ai-assistant/attachment-picker/usage.gts
index 3a922bbea0..943c29ea6e 100644
--- a/packages/host/app/components/ai-assistant/attachment-picker/usage.gts
+++ b/packages/host/app/components/ai-assistant/attachment-picker/usage.gts
@@ -20,7 +20,7 @@ export default class AiAssistantCardPickerUsage extends Component {
   cards: TrackedArray<CardDef> = new TrackedArray([]);
   @tracked maxNumberOfCards: number | undefined = undefined;
   @tracked autoAttachedCards?: TrackedSet<CardDef> = new TrackedSet();
-  @tracked autoAttachedFiles: TrackedArray<FileDef> = new TrackedArray([]);
+  @tracked autoAttachedFile?: FileDef | undefined;
   @tracked filesToAttach: TrackedArray<FileDef> = new TrackedArray([]);
 
   @action chooseCard(card: CardDef) {
@@ -34,6 +34,19 @@ export default class AiAssistantCardPickerUsage extends Component {
     this.cards.splice(index, 1);
   }
 
+  @action chooseFile(file: FileDef) {
+    if (!this.filesToAttach?.find((f) => f.sourceUrl === file.sourceUrl)) {
+      this.filesToAttach.push(file);
+    }
+  }
+
+  @action removeFile(file: FileDef) {
+    let index = this.filesToAttach.findIndex(
+      (f) => f.sourceUrl === file.sourceUrl,
+    );
+    this.filesToAttach.splice(index, 1);
+  }
+
   <template>
     <FreestyleUsage @name='AiAssistant::AttachmentPicker'>
       <:description>
@@ -47,9 +60,12 @@ export default class AiAssistantCardPickerUsage extends Component {
           @cardsToAttach={{this.cards}}
           @chooseCard={{this.chooseCard}}
           @removeCard={{this.removeCard}}
+          @chooseFile={{this.chooseFile}}
+          @removeFile={{this.removeFile}}
           @maxNumberOfItemsToAttach={{this.maxNumberOfCards}}
-          @autoAttachedFiles={{this.autoAttachedFiles}}
+          @autoAttachedFile={{this.autoAttachedFile}}
           @filesToAttach={{this.filesToAttach}}
+          @submode={{'interact'}}
         />
         <CardCatalogModal />
       </:example>
@@ -65,9 +81,9 @@ export default class AiAssistantCardPickerUsage extends Component {
           @value={{this.autoAttachedCards}}
         />
         <Args.Object
-          @name='autoAttachedFiles'
-          @description='An array of files automatically attached to the message.'
-          @value={{this.autoAttachedFiles}}
+          @name='autoAttachedFile'
+          @description='A file automatically attached to the message.'
+          @value={{this.autoAttachedFile}}
         />
         <Args.Object
           @name='filesToAttach'
@@ -84,6 +100,11 @@ export default class AiAssistantCardPickerUsage extends Component {
           @description='Action to be taken when a card is removed'
           @value={{this.removeCard}}
         />
+        <Args.Action
+          @name='removeFile'
+          @description='Action to be taken when a file is removed'
+          @value={{this.removeFile}}
+        />
         <Args.Number
           @name='maxNumberOfCards'
           @description='Maximum number of cards that can be added. If a value is not provided, there is no limit.'
diff --git a/packages/host/app/components/editor/directory.gts b/packages/host/app/components/editor/directory.gts
index 441bc22224..4ce8b30ecf 100644
--- a/packages/host/app/components/editor/directory.gts
+++ b/packages/host/app/components/editor/directory.gts
@@ -1,26 +1,30 @@
 import { fn, concat } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import type RouterService from '@ember/routing/router-service';
-import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
+import { tracked } from '@glimmer/tracking';
+
+import { TrackedArray } from 'tracked-built-ins';
+
 import { eq } from '@cardstack/boxel-ui/helpers';
 
 import { DropdownArrowDown } from '@cardstack/boxel-ui/icons';
 
-import { RealmPaths, type LocalPath } from '@cardstack/runtime-common/paths';
+import { type LocalPath } from '@cardstack/runtime-common/paths';
 
 import scrollIntoViewModifier from '@cardstack/host/modifiers/scroll-into-view';
 import { directory } from '@cardstack/host/resources/directory';
 
-import type CardService from '../../services/card-service';
-import type OperatorModeStateService from '../../services/operator-mode-state-service';
-
 interface Args {
   Args: {
     relativePath: string;
     realmURL: URL;
+    selectedFile?: LocalPath;
+    openDirs?: LocalPath[];
+    onFileSelected?: (entryPath: LocalPath) => void;
+    onDirectorySelected?: (entryPath: LocalPath) => void;
+    scrollPositionKey?: LocalPath;
   };
 }
 
@@ -33,17 +37,13 @@ export default class Directory extends Component<Args> {
             <button
               data-test-file={{entryPath}}
               title={{entry.name}}
-              {{on 'click' (fn this.openFile entryPath)}}
+              {{on 'click' (fn this.selectFile entryPath)}}
               {{scrollIntoViewModifier
-                (fileIsSelected entryPath this.operatorModeStateService)
+                (this.isSelectedFile entryPath)
                 container='file-tree'
-                key=this.scrollPositionKey
+                key=@scrollPositionKey
               }}
-              class='file
-                {{if
-                  (fileIsSelected entryPath this.operatorModeStateService)
-                  "selected"
-                }}'
+              class='file {{if (this.isSelectedFile entryPath) "selected"}}'
             >
               {{entry.name}}
             </button>
@@ -51,24 +51,29 @@ export default class Directory extends Component<Args> {
             <button
               data-test-directory={{entryPath}}
               title={{entry.name}}
-              {{on 'click' (fn this.toggleDirectory entryPath)}}
+              {{on 'click' (fn this.selectDirectory entryPath)}}
               class='directory'
             >
               <DropdownArrowDown
                 class={{concat
                   'icon '
-                  (if
-                    (isOpen entryPath this.operatorModeStateService)
-                    'open'
-                    'closed'
-                  )
+                  (if (this.isOpenDirectory entryPath) 'open' 'closed')
                 }}
               />{{entry.name}}
             </button>
-            {{#if (isOpen entryPath this.operatorModeStateService)}}
+            {{#if (this.isOpenDirectory entryPath)}}
               <Directory
                 @relativePath='{{@relativePath}}{{entry.name}}'
                 @realmURL={{@realmURL}}
+                @selectedFile={{if
+                  @selectedFile
+                  @selectedFile
+                  this.selectedFile
+                }}
+                @openDirs={{if @openDirs @openDirs this.openDirs}}
+                @onFileSelected={{this.selectFile}}
+                @onDirectorySelected={{this.selectDirectory}}
+                @scrollPositionKey={{@scrollPositionKey}}
               />
             {{/if}}
           {{/if}}
@@ -132,45 +137,55 @@ export default class Directory extends Component<Args> {
     </style>
   </template>
 
-  listing = directory(
+  private listing = directory(
     this,
     () => this.args.relativePath,
     () => this.args.realmURL,
   );
-  @service declare cardService: CardService;
-  @service declare operatorModeStateService: OperatorModeStateService;
-  @service declare router: RouterService;
+
+  @tracked private selectedFile?: LocalPath;
+  private openDirs: TrackedArray<LocalPath> = new TrackedArray();
 
   @action
-  openFile(entryPath: LocalPath) {
-    let fileUrl = new RealmPaths(this.args.realmURL).fileURL(entryPath);
-    this.operatorModeStateService.updateCodePath(fileUrl);
+  private selectFile(entryPath: LocalPath) {
+    this.selectedFile = entryPath;
+    this.args.onFileSelected?.(entryPath);
   }
 
   @action
-  toggleDirectory(entryPath: string) {
-    this.operatorModeStateService.toggleOpenDir(entryPath);
+  private selectDirectory(entryPath: string) {
+    for (let i = 0; i < this.openDirs.length; i++) {
+      if (this.openDirs[i].startsWith(entryPath)) {
+        let localParts = entryPath.split('/').filter((p) => p.trim() != '');
+        localParts.pop();
+        if (localParts.length) {
+          this.openDirs[i] = localParts.join('/') + '/';
+        } else {
+          this.openDirs.splice(i, 1);
+        }
+        this.args.onDirectorySelected?.(entryPath);
+        return;
+      } else if (entryPath.startsWith(this.openDirs[i])) {
+        this.openDirs[i] = entryPath;
+        this.args.onDirectorySelected?.(entryPath);
+        return;
+      }
+    }
+    this.openDirs.push(entryPath);
+    this.args.onDirectorySelected?.(entryPath);
   }
 
-  private get scrollPositionKey() {
-    return this.operatorModeStateService.state.codePath?.toString();
+  @action
+  private isSelectedFile(entryPath: LocalPath) {
+    return this.args.selectedFile
+      ? this.args.selectedFile === entryPath
+      : this.selectedFile === entryPath;
   }
-}
-
-function fileIsSelected(
-  localPath: string,
-  operatorModeStateService: OperatorModeStateService,
-) {
-  return operatorModeStateService.codePathRelativeToRealm === localPath;
-}
 
-function isOpen(
-  path: string,
-  operatorModeStateService: OperatorModeStateService,
-) {
-  let directoryIsPersistedOpen = (
-    operatorModeStateService.currentRealmOpenDirs ?? []
-  ).find((item) => item.startsWith(path));
-
-  return directoryIsPersistedOpen;
+  @action
+  private isOpenDirectory(entryPath: LocalPath) {
+    return this.args.openDirs
+      ? this.args.openDirs.find((item) => item.startsWith(entryPath))
+      : this.openDirs.find((item) => item.startsWith(entryPath));
+  }
 }
diff --git a/packages/host/app/components/editor/file-tree.gts b/packages/host/app/components/editor/file-tree.gts
index a566358c62..80c48e72e8 100644
--- a/packages/host/app/components/editor/file-tree.gts
+++ b/packages/host/app/components/editor/file-tree.gts
@@ -8,11 +8,14 @@ import { tracked } from '@glimmer/tracking';
 import { restartableTask, timeout } from 'ember-concurrency';
 
 import { Label, RealmIcon, Tooltip } from '@cardstack/boxel-ui/components';
+import { not } from '@cardstack/boxel-ui/helpers';
 import {
   IconPencilNotCrossedOut,
   IconPencilCrossedOut,
 } from '@cardstack/boxel-ui/icons';
 
+import { type LocalPath } from '@cardstack/runtime-common';
+
 import RealmService from '@cardstack/host/services/realm';
 
 import WithLoadedRealm from '../with-loaded-realm';
@@ -22,55 +25,72 @@ import Directory from './directory';
 interface Signature {
   Args: {
     realmURL: URL;
+    selectedFile?: LocalPath;
+    openDirs?: LocalPath[];
+    onFileSelected?: (entryPath: LocalPath) => void;
+    onDirectorySelected?: (entryPath: LocalPath) => void;
+    scrollPositionKey?: LocalPath;
+    hideRealmInfo?: boolean;
   };
 }
 
 export default class FileTree extends Component<Signature> {
   <template>
     <WithLoadedRealm @realmURL={{@realmURL.href}} as |realm|>
-      <div class='realm-info'>
-        <RealmIcon @realmInfo={{realm.info}} />
-        {{#let (concat 'In ' realm.info.name) as |realmTitle|}}
-          <Label
-            @ellipsize={{true}}
-            title={{realmTitle}}
-            data-test-realm-name={{realm.info.name}}
-          >
-            {{realmTitle}}
-          </Label>
-        {{/let}}
-        {{#if realm.canWrite}}
-          <Tooltip @placement='top' class='editability-icon'>
-            <:trigger>
-              <IconPencilNotCrossedOut
-                width='18px'
-                height='18px'
-                aria-label='Can edit files in this workspace'
-                data-test-realm-writable
-              />
-            </:trigger>
-            <:content>
-              Can edit files in this workspace
-            </:content>
-          </Tooltip>
-        {{else}}
-          <Tooltip @placement='top' class='editability-icon'>
-            <:trigger>
-              <IconPencilCrossedOut
-                width='18px'
-                height='18px'
-                aria-label='Cannot edit files in this workspace'
-                data-test-realm-not-writable
-              />
-            </:trigger>
-            <:content>
-              Cannot edit files in this workspace
-            </:content>
-          </Tooltip>
-        {{/if}}
-      </div>
+      {{#if (not @hideRealmInfo)}}
+        <div class='realm-info'>
+          <RealmIcon @realmInfo={{realm.info}} />
+          {{#let (concat 'In ' realm.info.name) as |realmTitle|}}
+            <Label
+              @ellipsize={{true}}
+              title={{realmTitle}}
+              data-test-realm-name={{realm.info.name}}
+            >
+              {{realmTitle}}
+            </Label>
+          {{/let}}
+
+          {{#if realm.canWrite}}
+            <Tooltip @placement='top' class='editability-icon'>
+              <:trigger>
+                <IconPencilNotCrossedOut
+                  width='18px'
+                  height='18px'
+                  aria-label='Can edit files in this workspace'
+                  data-test-realm-writable
+                />
+              </:trigger>
+              <:content>
+                Can edit files in this workspace
+              </:content>
+            </Tooltip>
+          {{else}}
+            <Tooltip @placement='top' class='editability-icon'>
+              <:trigger>
+                <IconPencilCrossedOut
+                  width='18px'
+                  height='18px'
+                  aria-label='Cannot edit files in this workspace'
+                  data-test-realm-not-writable
+                />
+              </:trigger>
+              <:content>
+                Cannot edit files in this workspace
+              </:content>
+            </Tooltip>
+          {{/if}}
+        </div>
+      {{/if}}
       <nav>
-        <Directory @relativePath='' @realmURL={{@realmURL}} />
+        <Directory
+          @relativePath=''
+          @realmURL={{@realmURL}}
+          @selectedFile={{@selectedFile}}
+          @openDirs={{@openDirs}}
+          @onFileSelected={{@onFileSelected}}
+          @onDirectorySelected={{@onDirectorySelected}}
+          @scrollPositionKey={{@scrollPositionKey}}
+        />
         {{#if this.showMask}}
           <div class='mask' data-test-file-tree-mask></div>
         {{/if}}
diff --git a/packages/host/app/components/file-pill.gts b/packages/host/app/components/file-pill.gts
new file mode 100644
index 0000000000..7f59b6c43d
--- /dev/null
+++ b/packages/host/app/components/file-pill.gts
@@ -0,0 +1,86 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+import Component from '@glimmer/component';
+
+import FileCode from '@cardstack/boxel-icons/file-code';
+
+import { IconButton, Pill } from '@cardstack/boxel-ui/components';
+import { cn, cssVar } from '@cardstack/boxel-ui/helpers';
+import { IconX } from '@cardstack/boxel-ui/icons';
+
+import { type FileDef } from 'https://cardstack.com/base/file-api';
+
+interface FilePillSignature {
+  Element: HTMLDivElement | HTMLButtonElement;
+  Args: {
+    file: FileDef;
+    isAutoAttachedFile?: boolean;
+    removeFile?: (file: FileDef) => void;
+  };
+}
+
+export default class FilePill extends Component<FilePillSignature> {
+  get component() {
+    return this.args.file.constructor.getComponent(this.args.file);
+  }
+
+  <template>
+    <Pill
+      class={{cn 'file-pill' is-autoattached=@isAutoAttachedFile}}
+      data-test-attached-file={{@file.sourceUrl}}
+      data-test-autoattached-file={{@isAutoAttachedFile}}
+      ...attributes
+    >
+      <:iconLeft>
+        <FileCode style={{cssVar icon-color='#0031ff'}} />
+      </:iconLeft>
+      <:default>
+        <div class='file-content' title={{@file.name}}>
+          <this.component @format='atom' @displayContainer={{false}} />
+        </div>
+      </:default>
+      <:iconRight>
+        {{#if @removeFile}}
+          <IconButton
+            class='remove-button'
+            @icon={{IconX}}
+            @height='10'
+            @width='10'
+            {{on 'click' (fn @removeFile @file)}}
+            data-test-remove-file-btn
+          />
+        {{/if}}
+      </:iconRight>
+    </Pill>
+    <style scoped>
+      .file-pill {
+        --pill-icon-size: 16px;
+        --boxel-realm-icon-size: var(--pill-icon-size);
+        border: 1px solid var(--boxel-400);
+        height: var(--pill-height, 1.875rem);
+        overflow: hidden;
+        padding-left: 3px;
+      }
+      .is-autoattached {
+        border-style: dashed;
+      }
+
+      .file-content {
+        max-width: 100px;
+        max-height: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .remove-button {
+        --boxel-icon-button-width: var(--boxel-icon-sm);
+        --boxel-icon-button-height: var(--boxel-icon-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--boxel-border-radius-xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index 9901566c37..7068346189 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -17,6 +17,7 @@ import {
 } from 'ember-concurrency';
 
 import perform from 'ember-concurrency/helpers/perform';
+import { resource, use } from 'ember-resources';
 import max from 'lodash/max';
 
 import { MatrixEvent } from 'matrix-js-sdk';
@@ -42,11 +43,13 @@ import { getRoom } from '@cardstack/host/resources/room';
 
 import type CardService from '@cardstack/host/services/card-service';
 import type CommandService from '@cardstack/host/services/command-service';
+import 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 OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
+import { type FileDef } from 'https://cardstack.com/base/file-api';
 import type { SkillCard } from 'https://cardstack.com/base/skill-card';
 
 import AiAssistantAttachmentPicker from '../ai-assistant/attachment-picker';
@@ -139,7 +142,10 @@ export default class Room extends Component<Signature> {
                 @cardsToAttach={{this.cardsToAttach}}
                 @chooseCard={{this.chooseCard}}
                 @removeCard={{this.removeCard}}
-                @autoAttachedFiles={{this.autoAttachedFiles}}
+                @chooseFile={{this.chooseFile}}
+                @removeFile={{this.removeFile}}
+                @submode={{this.operatorModeStateService.state.submode}}
+                @autoAttachedFile={{this.autoAttachedFile}}
                 @filesToAttach={{this.filesToAttach}}
               />
               <LLMSelect
@@ -209,6 +215,7 @@ export default class Room extends Component<Signature> {
   @service private declare commandService: CommandService;
   @service private declare matrixService: MatrixService;
   @service private declare operatorModeStateService: OperatorModeStateService;
+  @service private declare loaderService: LoaderService;
 
   private roomResource = getRoom(
     this,
@@ -274,12 +281,46 @@ export default class Room extends Component<Signature> {
     return state;
   }
 
-  private get autoAttachedFiles() {
-    return []; // TODO: implement
+  // 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 | undefined;
+      remove: () => void;
+    }>({
+      value: undefined,
+      remove: () => {
+        state.value = undefined;
+      },
+    });
+
+    if (!this.autoAttachedFileUrl) {
+      state.value = undefined;
+    } else {
+      state.value = this.matrixService.fileAPI.createFileDef({
+        sourceUrl: this.autoAttachedFileUrl,
+        name: this.autoAttachedFileUrl.split('/').pop(),
+      });
+    }
+
+    return state;
+  });
+
+  private get autoAttachedFileUrl() {
+    return this.operatorModeStateService.state.codePath?.href;
+  }
+
+  private get autoAttachedFile() {
+    return this.autoAttachedFileResource.value;
+  }
+
+  private get removeAutoAttachedFile() {
+    return this.autoAttachedFileResource.remove;
   }
 
   private get filesToAttach() {
-    return []; // TODO: implement
+    return this.matrixService.filesToSend.get(this.args.roomId) ?? [];
   }
 
   private get isScrolledToBottom() {
@@ -547,6 +588,7 @@ export default class Room extends Component<Signature> {
     this.doSendMessage.perform(
       myLastMessage.message,
       attachedCards,
+      myLastMessage.attachedFiles,
       true,
       myLastMessage.clientGeneratedId,
     );
@@ -568,9 +610,17 @@ export default class Room extends Component<Signature> {
         cards.push(card);
       });
     }
+
+    let files = [];
+    if (this.autoAttachedFile) {
+      files.push(this.autoAttachedFile);
+    }
+    files.push(...this.filesToAttach);
+
     this.doSendMessage.perform(
       prompt ?? this.messageToSend,
       cards.length ? cards : undefined,
+      files.length ? files : undefined,
       Boolean(prompt),
     );
   }
@@ -608,10 +658,47 @@ export default class Room extends Component<Signature> {
       this.cardsToAttach?.length ? this.cardsToAttach : undefined,
     );
   }
+
+  @action
+  private chooseFile(file: FileDef) {
+    let files = this.filesToAttach;
+    if (!files?.find((f) => f.sourceUrl === file.sourceUrl)) {
+      this.matrixService.filesToSend.set(this.args.roomId, [...files, file]);
+    }
+  }
+
+  @action
+  private isAutoAttachedFile(file: FileDef) {
+    return this.autoAttachedFile?.sourceUrl === file.sourceUrl;
+  }
+
+  @action
+  private removeFile(file: FileDef) {
+    if (this.isAutoAttachedFile(file)) {
+      this.removeAutoAttachedFile();
+      return;
+    }
+
+    const fileIndex = this.filesToAttach?.findIndex(
+      (f) => f.sourceUrl === file.sourceUrl,
+    );
+    if (fileIndex != undefined && fileIndex !== -1) {
+      if (this.filesToAttach !== undefined) {
+        this.filesToAttach.splice(fileIndex, 1);
+      }
+    }
+
+    this.matrixService.cardsToSend.set(
+      this.args.roomId,
+      this.cardsToAttach?.length ? this.cardsToAttach : undefined,
+    );
+  }
+
   private doSendMessage = enqueueTask(
     async (
       message: string | undefined,
       cards?: CardDef[],
+      files?: FileDef[],
       keepInputAndAttachments: boolean = false,
       clientGeneratedId: string = uuidv4(),
     ) => {
@@ -630,10 +717,15 @@ export default class Room extends Component<Signature> {
           .map((stackItem) => stackItem.card.id),
       };
       try {
+        if (files) {
+          files = await this.matrixService.uploadFiles(files);
+        }
+
         await this.matrixService.sendMessage(
           this.args.roomId,
           message,
           cards,
+          files,
           clientGeneratedId,
           context,
         );
diff --git a/packages/host/app/components/operator-mode/attach-file-modal.gts b/packages/host/app/components/operator-mode/attach-file-modal.gts
new file mode 100644
index 0000000000..69f02af1cf
--- /dev/null
+++ b/packages/host/app/components/operator-mode/attach-file-modal.gts
@@ -0,0 +1,252 @@
+import { registerDestructor } from '@ember/destroyable';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import type Owner from '@ember/owner';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { tracked } from '@glimmer/tracking';
+
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
+
+import {
+  BoxelButton,
+  FieldContainer,
+  BoxelSelect,
+} from '@cardstack/boxel-ui/components';
+
+import {
+  Deferred,
+  RealmPaths,
+  type LocalPath,
+} from '@cardstack/runtime-common';
+
+import ModalContainer from '@cardstack/host/components/modal-container';
+
+import MatrixService from '@cardstack/host/services/matrix-service';
+import OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+
+import type RealmService from '@cardstack/host/services/realm';
+
+import { type FileDef } from 'https://cardstack.com/base/file-api';
+
+import FileTree from '../editor/file-tree';
+
+interface Signature {
+  Args: {};
+}
+
+export default class AttachFileModal extends Component<Signature> {
+  @tracked deferred?: Deferred<FileDef>;
+  @tracked selectedRealm = this.knownRealms[0];
+  @tracked selectedFile?: LocalPath;
+
+  @service private declare operatorModeStateService: OperatorModeStateService;
+  @service private declare realm: RealmService;
+  @service private declare matrixService: MatrixService;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    (globalThis as any)._CARDSTACK_FILE_CHOOSER = this;
+    registerDestructor(this, () => {
+      delete (globalThis as any)._CARDSTACK_FILE_CHOOSER;
+    });
+  }
+
+  // public API
+  async chooseFile<T extends FileDef>(): Promise<undefined | T> {
+    this.deferred = new Deferred();
+    let defaultRealm = this.knownRealms.find(
+      (r) =>
+        r.url.toString() === this.operatorModeStateService.realmURL?.toString(),
+    );
+    this.selectedRealm = defaultRealm ?? this.selectedRealm;
+
+    let file = await this.deferred.promise;
+    if (file) {
+      return file as T;
+    } else {
+      return undefined;
+    }
+  }
+
+  @action
+  private pick(path: LocalPath | undefined) {
+    if (this.deferred && this.selectedRealm && path) {
+      let fileURL = new RealmPaths(this.selectedRealm.url).fileURL(path);
+      let file = this.matrixService.fileAPI.createFileDef({
+        sourceUrl: fileURL.toString(),
+        name: fileURL.toString().split('/').pop()!,
+      });
+      this.deferred.fulfill(file);
+    }
+
+    this.selectedRealm = this.knownRealms[0];
+    this.selectedFile = undefined;
+    this.deferred = undefined;
+  }
+
+  private get knownRealms() {
+    return Object.entries(this.realm.allRealmsInfo).map((entry) => ({
+      url: new URL(entry[0]),
+      info: entry[1].info,
+    }));
+  }
+
+  @action
+  private selectRealm(realm: any) {
+    this.selectedRealm = realm;
+  }
+
+  @action
+  private selectFile(file: LocalPath) {
+    this.selectedFile = file;
+  }
+
+  @action private handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.pick(undefined);
+    }
+  }
+
+  <template>
+    <style scoped>
+      :deep(.dialog-box__content) {
+        overflow: hidden;
+      }
+      .attach-file-modal {
+        --horizontal-gap: var(--boxel-sp-xs);
+      }
+      .attach-file-modal > :deep(.boxel-modal__inner) {
+        display: flex;
+      }
+      :deep(.attach-file) {
+        height: 32rem;
+      }
+      .field + .field {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
+      }
+      .field :deep(.label-container) {
+        width: 8rem;
+      }
+      .field :deep(.content) {
+        flex-grow: 1;
+        max-width: 100%;
+        min-width: 13rem;
+      }
+      .footer-buttons {
+        display: flex;
+        margin-left: auto;
+        gap: var(--horizontal-gap);
+        align-self: center;
+      }
+      fieldset.field {
+        border: none;
+        padding: 0;
+        margin-inline: 0;
+      }
+      .realm-chooser {
+        width: 100%;
+      }
+      .realm-chooser__options {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+      }
+      .realm-chooser__options img {
+        width: 16px;
+        height: 16px;
+      }
+      .realm-chooser__options span {
+        font: 500 var(--boxel-font-sm);
+      }
+      .choose-file {
+        overflow: hidden;
+      }
+      .choose-file :deep(.content) {
+        height: 267px;
+        overflow: auto;
+        align-items: flex-start;
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-xxs);
+      }
+      :deep(.dialog-box__footer) {
+        height: auto;
+        border: none;
+        padding: 0 var(--boxel-sp) 40px var(--boxel-sp);
+      }
+    </style>
+    {{#if this.deferred}}
+      <ModalContainer
+        @title='Attach File'
+        @onClose={{(fn this.pick undefined)}}
+        @size='medium'
+        @centered={{true}}
+        {{on 'keydown' this.handleKeydown}}
+        @cardContainerClass='attach-file'
+        class='attach-file-modal'
+        data-test-attach-file-modal
+      >
+        <:content>
+          <FieldContainer class='field' @label='Workspace'>
+            <BoxelSelect
+              class='realm-chooser'
+              @options={{this.knownRealms}}
+              @selected={{this.selectedRealm}}
+              @onChange={{this.selectRealm}}
+              data-test-attach-file-modal-realm-chooser
+              as |item|
+            >
+              <div
+                class='realm-chooser__options'
+                data-test-attach-file-modal-realm-option={{item.info.name}}
+              >
+                <img src={{item.info.iconURL}} alt='realm icon' />
+                <span>{{item.info.name}}</span>
+              </div>
+            </BoxelSelect>
+          </FieldContainer>
+          <FieldContainer
+            class='field choose-file'
+            @label='Choose File'
+            @tag='div'
+          >
+            <FileTree
+              @hideRealmInfo={{true}}
+              @realmURL={{this.selectedRealm.url}}
+              @onFileSelected={{this.selectFile}}
+            />
+          </FieldContainer>
+        </:content>
+        <:footer>
+          <div class='footer-buttons'>
+            <BoxelButton
+              @size='tall'
+              {{on 'click' (fn this.pick undefined)}}
+              {{onKeyMod 'Escape'}}
+              data-test-attach-file-modal-cancel-button
+            >
+              Cancel
+            </BoxelButton>
+            <BoxelButton
+              @kind='primary'
+              @size='tall'
+              {{on 'click' (fn this.pick this.selectedFile)}}
+              {{onKeyMod 'Enter'}}
+              data-test-attach-file-modal-add-button
+            >
+              Add
+            </BoxelButton>
+          </div>
+        </:footer>
+      </ModalContainer>
+    {{/if}}
+  </template>
+}
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
index 09135c7dc5..f3c9b9d296 100644
--- a/packages/host/app/components/operator-mode/code-submode.gts
+++ b/packages/host/app/components/operator-mode/code-submode.gts
@@ -65,6 +65,7 @@ import { htmlComponent } from '../../lib/html-component';
 import { CodeModePanelWidths } from '../../utils/local-storage-keys';
 import FileTree from '../editor/file-tree';
 
+import AttachFileModal from './attach-file-modal';
 import CardError from './card-error';
 import CardErrorDetail from './card-error-detail';
 import CardPreviewPanel from './card-preview-panel/index';
@@ -790,6 +791,7 @@ export default class CodeSubmode extends Component<Signature> {
   }
 
   <template>
+    <AttachFileModal />
     {{#let (this.realm.info this.realmURL.href) as |realmInfo|}}
       <div
         class='code-mode-background'
@@ -860,7 +862,14 @@ export default class CodeSubmode extends Component<Signature> {
                       {{/if}}
                     </:inspector>
                     <:browser>
-                      <FileTree @realmURL={{this.realmURL}} />
+                      <FileTree
+                        @realmURL={{this.realmURL}}
+                        @selectedFile={{this.operatorModeStateService.codePathRelativeToRealm}}
+                        @openDirs={{this.operatorModeStateService.currentRealmOpenDirs}}
+                        @onFileSelected={{this.operatorModeStateService.onFileSelected}}
+                        @onDirectorySelected={{this.operatorModeStateService.toggleOpenDir}}
+                        @scrollPositionKey={{this.operatorModeStateService.codePathString}}
+                      />
                     </:browser>
                   </CodeSubmodeLeftPanelToggle>
                 </VerticallyResizablePanel>
diff --git a/packages/host/app/config/environment.d.ts b/packages/host/app/config/environment.d.ts
index f7c1a156d6..cf0aad6138 100644
--- a/packages/host/app/config/environment.d.ts
+++ b/packages/host/app/config/environment.d.ts
@@ -30,5 +30,6 @@ declare const config: {
   stripePaymentLink: string;
   featureFlags?: {
     ENABLE_PLAYGROUND: boolean;
+    AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED: boolean;
   };
 };
diff --git a/packages/host/app/lib/matrix-classes/message-builder.ts b/packages/host/app/lib/matrix-classes/message-builder.ts
index 38844b167b..add00b7768 100644
--- a/packages/host/app/lib/matrix-classes/message-builder.ts
+++ b/packages/host/app/lib/matrix-classes/message-builder.ts
@@ -18,8 +18,11 @@ import {
 
 import type CommandService from '@cardstack/host/services/command-service';
 
+import MatrixService from '@cardstack/host/services/matrix-service';
+
 import type { CommandStatus } from 'https://cardstack.com/base/command';
 
+import { SerializedFile } from 'https://cardstack.com/base/file-api';
 import type {
   CardMessageContent,
   CardMessageEvent,
@@ -54,7 +57,8 @@ export default class MessageBuilder {
     setOwner(this, owner);
   }
 
-  @service declare commandService: CommandService;
+  @service private declare commandService: CommandService;
+  @service private declare matrixService: MatrixService;
 
   private get coreMessageArgs() {
     return new Message({
@@ -71,6 +75,7 @@ export default class MessageBuilder {
       status: this.event.status,
       eventId: this.builderContext.effectiveEventId,
       index: this.builderContext.index,
+      attachedFiles: this.attachedFiles,
     });
   }
 
@@ -98,6 +103,16 @@ export default class MessageBuilder {
     return attachedCardIds;
   }
 
+  get attachedFiles() {
+    let content = this.event.content as CardMessageContent;
+    // Safely skip over cases that don't have attached cards or a data type
+    return content.data?.attachedFiles
+      ? content.data?.attachedFiles.map((attachedFile: SerializedFile) =>
+          this.matrixService.fileAPI.createFileDef(attachedFile),
+        )
+      : undefined;
+  }
+
   get errorMessage() {
     let errorMessage: string | undefined;
     let { event } = this;
diff --git a/packages/host/app/lib/matrix-classes/message.ts b/packages/host/app/lib/matrix-classes/message.ts
index 93758af14d..18cabc0fb9 100644
--- a/packages/host/app/lib/matrix-classes/message.ts
+++ b/packages/host/app/lib/matrix-classes/message.ts
@@ -7,6 +7,8 @@ import { getCard } from '@cardstack/runtime-common';
 
 import { CardDef } from 'https://cardstack.com/base/card-api';
 
+import { type FileDef } from 'https://cardstack.com/base/file-api';
+
 import { RoomMember } from './member';
 import MessageCommand from './message-command';
 
@@ -36,6 +38,7 @@ interface RoomMessageRequired {
 interface RoomMessageOptional {
   transactionId?: string | null;
   attachedCardIds?: string[] | null;
+  attachedFiles?: FileDef[];
   isStreamingFinished?: boolean;
   index?: number;
   errorMessage?: string;
@@ -50,6 +53,7 @@ export class Message implements RoomMessageInterface {
   @tracked isStreamingFinished?: boolean;
 
   attachedCardIds?: string[] | null;
+  attachedFiles?: FileDef[];
   attachedSkillCardIds?: string[] | null;
   index?: number;
   transactionId?: string | null;
@@ -76,6 +80,7 @@ export class Message implements RoomMessageInterface {
     this.updated = init.updated;
     this.status = init.status;
     this.roomId = init.roomId;
+    this.attachedFiles = init.attachedFiles;
     this.instanceId = guidFor(this);
   }
   get isRetryable() {
diff --git a/packages/host/app/resources/auto-attached-card.ts b/packages/host/app/resources/auto-attached-card.ts
index fbdbf1dfb2..f250163e8d 100644
--- a/packages/host/app/resources/auto-attached-card.ts
+++ b/packages/host/app/resources/auto-attached-card.ts
@@ -1,5 +1,7 @@
 import { action } from '@ember/object';
 
+import { service } from '@ember/service';
+
 import { restartableTask } from 'ember-concurrency';
 import { Resource } from 'ember-resources';
 
@@ -10,6 +12,8 @@ import { isIndexCard } from '@cardstack/host/lib/stack-item';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 
+import { Submodes } from '../components/submode-switcher';
+import OperatorModeStateService from '../services/operator-mode-state-service';
 interface Args {
   named: {
     topMostStackItems: StackItem[];
@@ -25,9 +29,13 @@ export class AutoAttachment extends Resource<Args> {
   cards: TrackedSet<CardDef> = new TrackedSet(); // auto-attached cards
   private lastStackedItems: StackItem[] = [];
   private lastRemovedCards: Set<string> = new Set(); // internal state, changed from the outside. It tracks, everytime a card is removed in the ai-panel
+  @service private declare operatorModeStateService: OperatorModeStateService;
 
   modify(_positional: never[], named: Args['named']) {
     const { topMostStackItems, attachedCards } = named;
+    if (this.operatorModeStateService.state.submode === Submodes.Code) {
+      return; // Don't auto-attach cards in code mode
+    }
     this.updateAutoAttachedCardsTask.perform(topMostStackItems, attachedCards);
   }
 
diff --git a/packages/host/app/services/matrix-sdk-loader.ts b/packages/host/app/services/matrix-sdk-loader.ts
index 97afc9797b..060a3a6d08 100644
--- a/packages/host/app/services/matrix-sdk-loader.ts
+++ b/packages/host/app/services/matrix-sdk-loader.ts
@@ -113,6 +113,11 @@ export type ExtendedClient = Pick<
   ): Promise<MatrixSDK.LoginResponse>;
   createRealmSession(realmURL: URL): Promise<string>;
   hashMessageWithSecret(message: string): Promise<string>;
+  uploadContent(
+    file: MatrixSDK.FileType,
+    opts: MatrixSDK.UploadOpts,
+  ): Promise<MatrixSDK.UploadResponse>;
+  mxcUrlToHttp(mxcUrl: string): string;
 };
 
 async function hashMessageWithSecret(
diff --git a/packages/host/app/services/matrix-service.ts b/packages/host/app/services/matrix-service.ts
index fc54bd3e71..89edd08135 100644
--- a/packages/host/app/services/matrix-service.ts
+++ b/packages/host/app/services/matrix-service.ts
@@ -64,6 +64,8 @@ import { getMatrixProfile } from '@cardstack/host/resources/matrix-profile';
 import type { Base64ImageField as Base64ImageFieldType } from 'https://cardstack.com/base/base64-image';
 import { BaseDef, type CardDef } from 'https://cardstack.com/base/card-api';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
+import type * as FileAPI from 'https://cardstack.com/base/file-api';
+import { type FileDef } from 'https://cardstack.com/base/file-api';
 import type {
   CardMessageContent,
   CardFragmentContent,
@@ -88,10 +90,10 @@ import type CommandService from './command-service';
 import type LoaderService from './loader-service';
 import type MatrixSDKLoader from './matrix-sdk-loader';
 import type { ExtendedClient, ExtendedMatrixSDK } from './matrix-sdk-loader';
+import type NetworkService from './network';
 import type RealmService from './realm';
 import type RealmServerService from './realm-server';
 import type ResetService from './reset';
-
 import type * as MatrixSDK from 'matrix-js-sdk';
 
 const { matrixURL } = ENV;
@@ -113,6 +115,7 @@ export default class MatrixService extends Service {
   @service private declare realmServer: RealmServerService;
   @service private declare router: RouterService;
   @service private declare reset: ResetService;
+  @service private declare network: NetworkService;
   @tracked private _client: ExtendedClient | undefined;
   @tracked private _isInitializingNewUser = false;
   @tracked private _isNewUser = false;
@@ -126,6 +129,7 @@ export default class MatrixService extends Service {
   roomResourcesCache: TrackedMap<string, RoomResource> = new TrackedMap();
   messagesToSend: TrackedMap<string, string | undefined> = new TrackedMap();
   cardsToSend: TrackedMap<string, CardDef[] | undefined> = new TrackedMap();
+  filesToSend: TrackedMap<string, FileDef[] | undefined> = new TrackedMap();
   failedCommandState: TrackedMap<string, Error> = new TrackedMap();
   flushTimeline: Promise<void> | undefined;
   flushMembership: Promise<void> | undefined;
@@ -173,12 +177,18 @@ export default class MatrixService extends Service {
     () => 'https://cardstack.com/base/card-api',
   );
 
+  private fileAPIModule = importResource(
+    this,
+    () => 'https://cardstack.com/base/file-api',
+  );
+
   private loadState = task(async () => {
     await this.loadSDK();
   });
 
   private async loadSDK() {
     await this.cardAPIModule.loaded;
+    await this.fileAPIModule.loaded;
     // The matrix SDK is VERY big so we only load it when we need it
     this.#matrixSDK = await this.matrixSdkLoader.load();
     this._client = this.matrixSDK.createClient({
@@ -242,6 +252,20 @@ export default class MatrixService extends Service {
     return this.cardAPIModule.module as typeof CardAPI;
   }
 
+  get fileAPI() {
+    if (this.fileAPIModule.error) {
+      throw new Error(
+        `Error loading File API: ${JSON.stringify(this.cardAPIModule.error)}`,
+      );
+    }
+    if (!this.fileAPIModule.module) {
+      throw new Error(
+        `bug: File API has not loaded yet--make sure to await this.loaded before using the api`,
+      );
+    }
+    return this.fileAPIModule.module as typeof FileAPI;
+  }
+
   private get matrixSDK() {
     if (!this.#matrixSDK) {
       throw new Error(`cannot use matrix SDK before it has loaded`);
@@ -620,10 +644,43 @@ export default class MatrixService extends Service {
     return eventIds;
   }
 
+  async uploadFiles(files: FileDef[]) {
+    let uploadedFiles = await Promise.all(
+      files.map(async (file) => {
+        if (!file.sourceUrl) {
+          throw new Error('File needs a realm server source URL to upload');
+        }
+        let response = await this.network.authedFetch(file.sourceUrl, {
+          headers: {
+            Accept: 'application/vnd.card+source',
+          },
+        });
+
+        let blob = await response.blob();
+        let contentType = response.headers.get('content-type');
+
+        if (!contentType) {
+          throw new Error(`File has no content type: ${file.sourceUrl}`);
+        }
+        let uploadResponse = await this.client.uploadContent(blob, {
+          type: contentType,
+        });
+
+        file.url = this.client.mxcUrlToHttp(uploadResponse.content_uri);
+        file.contentType = contentType;
+
+        return file;
+      }),
+    );
+
+    return uploadedFiles;
+  }
+
   async sendMessage(
     roomId: string,
     body: string | undefined,
     attachedCards: CardDef[] = [],
+    attachedFiles: FileDef[] = [],
     clientGeneratedId = uuidv4(),
     context?: OperatorModeContext,
   ): Promise<void> {
@@ -664,6 +721,7 @@ export default class MatrixService extends Service {
       formatted_body: html,
       clientGeneratedId,
       data: {
+        attachedFiles: attachedFiles.map((file: FileDef) => file.serialize()),
         attachedCardsEventIds,
         context: {
           openCardIds: attachedOpenCards.map((c) => c.id),
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index c9f7d6c83c..3f5628d108 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -16,6 +16,7 @@ import {
   type PatchData,
   RealmPaths,
   type ResolvedCodeRef,
+  type LocalPath,
 } from '@cardstack/runtime-common';
 
 import { Submode, Submodes } from '@cardstack/host/components/submode-switcher';
@@ -357,6 +358,15 @@ export default class OperatorModeStateService extends Service {
     return undefined;
   }
 
+  get codePathString() {
+    return this.state.codePath?.toString();
+  }
+
+  onFileSelected = (entryPath: LocalPath) => {
+    let fileUrl = new RealmPaths(this.realmURL).fileURL(entryPath);
+    this.updateCodePath(fileUrl);
+  };
+
   updateCodePath(codePath: URL | null) {
     this.state.codePath = codePath;
     this.updateOpenDirsForNestedPath();
@@ -540,7 +550,7 @@ export default class OperatorModeStateService extends Service {
     return this.state.openDirs ?? new TrackedMap();
   }
 
-  toggleOpenDir(entryPath: string): void {
+  toggleOpenDir = (entryPath: string): void => {
     if (!this.realmURL) {
       return;
     }
@@ -568,7 +578,7 @@ export default class OperatorModeStateService extends Service {
       new TrackedArray([...dirs, entryPath]),
     );
     this.schedulePersist();
-  }
+  };
 
   private get readyFile() {
     if (isReady(this.openFile.current)) {
diff --git a/packages/host/config/environment.js b/packages/host/config/environment.js
index 9758199d06..43cd29bd79 100644
--- a/packages/host/config/environment.js
+++ b/packages/host/config/environment.js
@@ -43,6 +43,8 @@ module.exports = function (environment) {
       process.env.RESOLVED_BASE_REALM_URL || 'http://localhost:4201/base/',
     featureFlags: {
       ENABLE_PLAYGROUND: process.env.ENABLE_PLAYGROUND || false,
+      AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED:
+        process.env.AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED || false,
     },
   };
 
@@ -54,6 +56,7 @@ module.exports = function (environment) {
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
     ENV.featureFlags = {
       ENABLE_PLAYGROUND: true,
+      AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED: true,
     };
   }
 
@@ -76,6 +79,7 @@ module.exports = function (environment) {
     ENV.sqlSchema = sqlSchema;
     ENV.featureFlags = {
       ENABLE_PLAYGROUND: true,
+      AI_ASSISTANT_EXPERIMENTAL_ATTACHING_FILES_ENABLED: true,
     };
   }
 
diff --git a/packages/host/tests/acceptance/ai-assistant-test.gts b/packages/host/tests/acceptance/ai-assistant-test.gts
index cf408435ef..78112394f8 100644
--- a/packages/host/tests/acceptance/ai-assistant-test.gts
+++ b/packages/host/tests/acceptance/ai-assistant-test.gts
@@ -354,4 +354,91 @@ module('Acceptance | AI Assistant tests', function (hooks) {
     await click('[data-test-enter-room="mock_room_2"]');
     assert.dom('[data-test-llm-select-selected]').hasText('claude-3.5-sonnet');
   });
+
+  test('can open attach file modal', async function (assert) {
+    await visitOperatorMode({
+      submode: 'code',
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}index`,
+            format: 'isolated',
+          },
+        ],
+      ],
+    });
+    await click('[data-test-open-ai-assistant]');
+    assert.dom('[data-test-choose-file-btn]').hasText('Attach File');
+
+    await click('[data-test-choose-file-btn]');
+    assert.dom('[data-test-attach-file-modal]').exists();
+    assert.dom('[data-test-file="pet.gts"]').exists();
+
+    // Change realm
+    await click('[data-test-attach-file-modal-realm-chooser]');
+    await click('[data-test-attach-file-modal-realm-option="Base Workspace"]');
+    assert.dom('[data-test-file="boolean.gts"]').exists();
+
+    await click('[data-test-attach-file-modal-realm-chooser]');
+    await click(
+      '[data-test-attach-file-modal-realm-option="Test Workspace B"]',
+    );
+
+    // Add attachment item
+    await click('[data-test-file="person.gts"]');
+    await click('[data-test-attach-file-modal-add-button]');
+    assert.dom('[data-test-attached-file]').exists({ count: 1 });
+    assert.dom('[data-test-attached-file]').hasText('person.gts');
+    // Add attachment item
+    await click('[data-test-choose-file-btn]');
+    await click('[data-test-file="pet.gts"]');
+    await click('[data-test-attach-file-modal-add-button]');
+    assert.dom('[data-test-attached-file]').exists({ count: 2 });
+    assert
+      .dom(`[data-test-attached-file="${testRealmURL}person.gts"]`)
+      .hasText('person.gts');
+    assert
+      .dom(`[data-test-attached-file="${testRealmURL}pet.gts"]`)
+      .hasText('pet.gts');
+
+    // Add remove attachment item
+    await click(
+      `[data-test-attached-file="${testRealmURL}person.gts"] [data-test-remove-file-btn]`,
+    );
+    assert.dom('[data-test-attached-file]').hasText('pet.gts');
+  });
+
+  test('can display and remove auto attached card', async function (assert) {
+    await visitOperatorMode({
+      submode: 'code',
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}index`,
+            format: 'isolated',
+          },
+        ],
+      ],
+    });
+    await click('[data-test-open-ai-assistant]');
+    assert.dom('[data-test-choose-file-btn]').hasText('Attach File');
+
+    await click('[data-test-file="person.gts"]');
+    assert.dom('[data-test-autoattached-file]').exists();
+    assert.dom(`[data-test-autoattached-file]`).hasText('person.gts');
+
+    await click('[data-test-file-browser-toggle]');
+    await click(`[data-test-autoattached-file] [data-test-remove-file-btn]`);
+    assert.dom('[data-test-autoattached-file]').doesNotExist();
+
+    await click('[data-test-file-browser-toggle]');
+    await click('[data-test-file="pet.gts"]');
+    assert.dom('[data-test-autoattached-file]').exists();
+    assert.dom(`[data-test-autoattached-file]`).hasText('pet.gts');
+
+    await click('[data-test-file-browser-toggle]');
+    await click('[data-test-file="person.gts"]');
+    assert.dom('[data-test-autoattached-file]').exists();
+    assert.dom(`[data-test-autoattached-file]`).hasText('person.gts');
+  });
 });
diff --git a/packages/host/tests/helpers/mock-matrix/_client.ts b/packages/host/tests/helpers/mock-matrix/_client.ts
index 0651209010..7c8dc6b8fc 100644
--- a/packages/host/tests/helpers/mock-matrix/_client.ts
+++ b/packages/host/tests/helpers/mock-matrix/_client.ts
@@ -589,4 +589,15 @@ export class MockClient implements ExtendedClient {
   getUserId(): string | null {
     return this.loggedInAs ?? null;
   }
+
+  async uploadContent(
+    _content: ArrayBuffer,
+    _opts?: { type?: string; name?: string },
+  ): Promise<{ content_uri: string }> {
+    return { content_uri: `mxc://mock-server/${Math.random()}` };
+  }
+
+  mxcUrlToHttp(mxcUrl: string): string {
+    return mxcUrl.replace('mxc://', 'http://mock-server/');
+  }
 }
diff --git a/packages/matrix/tests/messages.spec.ts b/packages/matrix/tests/messages.spec.ts
index 8e7af035f1..680c261ab7 100644
--- a/packages/matrix/tests/messages.spec.ts
+++ b/packages/matrix/tests/messages.spec.ts
@@ -320,6 +320,112 @@ test.describe('Room messages', () => {
     ]);
   });
 
+  test('currently viewed file is auto-attached', async ({ page }) => {
+    await login(page, 'user1', 'pass', { url: appURL });
+    const testCard = `${appURL}/hassan`;
+    await page.locator(`[data-test-cards-grid-item="${testCard}"]`).click();
+    await page
+      .locator(`[data-test-submode-switcher] > [data-test-boxel-button]`)
+      .click();
+    await page.locator(`[data-test-boxel-menu-item-text="Code"]`).click();
+
+    await expect(page.locator(`[data-test-attached-file]`)).toHaveCount(1);
+    await expect(
+      page.locator(`[data-test-attached-file="${appURL}/hassan.json"]`),
+    ).toHaveCount(1);
+
+    await page.locator(`[data-test-clickable-definition-container]`).click();
+    await expect(page.locator(`[data-test-attached-file]`)).toHaveCount(1);
+    await expect(
+      page.locator(`[data-test-attached-file="${appURL}/person.gts"]`),
+    ).toHaveCount(1);
+
+    await page
+      .locator('[data-test-message-field]')
+      .fill('Are there any computed fields in person.gts?');
+    await page.locator('[data-test-send-message-btn]').click();
+    await assertMessages(page, [
+      {
+        from: 'user1',
+        message: 'Are there any computed fields in person.gts?',
+      },
+    ]);
+
+    let messages = await getRoomEvents();
+    let lastMessage = messages[messages.length - 1];
+    let attachedFiles = JSON.parse(lastMessage.content.data).attachedFiles;
+    expect(attachedFiles.length).toStrictEqual(1);
+    expect(attachedFiles[0].name).toStrictEqual('person.gts');
+    expect(attachedFiles[0].contentType).toStrictEqual(
+      'text/plain;charset=UTF-8',
+    );
+    expect(attachedFiles[0].sourceUrl).toStrictEqual(`${appURL}/person.gts`);
+    expect(attachedFiles[0].url).toMatch(
+      /^http:\/\/localhost:8008\/_matrix\/media\/v3\/download\/localhost\/[A-Za-z0-9]+$/,
+    ); // Example http://localhost:8008/_matrix/media/v3/download/localhost/eHDVqYSIxXpMKilfqCANpGej (generated by matrix storage)
+  });
+
+  test('ensure attached files are sent with the message', async ({ page }) => {
+    await login(page, 'user1', 'pass', { url: appURL });
+    const testCard = `${appURL}/hassan`;
+    await page.locator(`[data-test-cards-grid-item="${testCard}"]`).click();
+    await expect(
+      page.locator(`[data-test-attached-card="${appURL}/hassan"]`),
+    ).toHaveCount(1);
+    await page
+      .locator(`[data-test-submode-switcher] > [data-test-boxel-button]`)
+      .click();
+    await page.locator(`[data-test-boxel-menu-item-text="Code"]`).click();
+
+    await expect(
+      page.locator(`[data-test-attached-card="${appURL}/hassan"]`),
+    ).toHaveCount(0);
+    await expect(page.locator(`[data-test-attached-file]`)).toHaveCount(1);
+    await expect(
+      page.locator(`[data-test-attached-file="${appURL}/hassan.json"]`),
+    ).toHaveCount(1);
+
+    await page.locator(`[data-test-clickable-definition-container]`).click();
+    await expect(page.locator(`[data-test-attached-file]`)).toHaveCount(1);
+    await expect(
+      page.locator(`[data-test-attached-file="${appURL}/person.gts"]`),
+    ).toHaveCount(1);
+
+    await page.locator('[data-test-choose-file-btn]').click();
+    await page.locator('[data-test-file="pet.gts"]').click();
+    await page.locator('[data-test-attach-file-modal-add-button]').click();
+    await expect(
+      page.locator(`[data-test-attached-file="${appURL}/pet.gts"]`),
+    ).toHaveCount(1);
+
+    await page
+      .locator('[data-test-message-field]')
+      .fill('Are there any computed fields in person.gts?');
+    await page.locator('[data-test-send-message-btn]').click();
+    await assertMessages(page, [
+      {
+        from: 'user1',
+        message: 'Are there any computed fields in person.gts?',
+      },
+    ]);
+
+    let messages = await getRoomEvents();
+    let lastMessage = messages[messages.length - 1];
+
+    let attachedCards = JSON.parse(lastMessage.content.data).attachedCards;
+    expect(attachedCards).toBeUndefined;
+    let attachedFiles = JSON.parse(lastMessage.content.data).attachedFiles;
+    expect(attachedFiles.length).toStrictEqual(2);
+    expect(attachedFiles[1].name).toStrictEqual('pet.gts');
+    expect(attachedFiles[1].contentType).toStrictEqual(
+      'text/plain;charset=UTF-8',
+    );
+    expect(attachedFiles[1].sourceUrl).toStrictEqual(`${appURL}/pet.gts`);
+    expect(attachedFiles[1].url).toMatch(
+      /^http:\/\/localhost:8008\/_matrix\/media\/v3\/download\/localhost\/[A-Za-z0-9]+$/,
+    ); // Example http://localhost:8008/_matrix/media/v3/download/localhost/eHDVqYSIxXpMKilfqCANpGej (generated by matrix storage)
+  });
+
   test('can send cards with types unsupported by matrix', async ({ page }) => {
     const testCard = `${appURL}/type-examples`;
     await login(page, 'user1', 'pass', { url: appURL });
diff --git a/packages/runtime-common/index.ts b/packages/runtime-common/index.ts
index 8a40d3e05f..75fde0bef0 100644
--- a/packages/runtime-common/index.ts
+++ b/packages/runtime-common/index.ts
@@ -195,6 +195,10 @@ export interface CardChooser {
   ): Promise<undefined | T>;
 }
 
+export interface FileChooser {
+  chooseFile<T>(defaultRealmURL?: URL): Promise<undefined | T>;
+}
+
 export async function chooseCard<T extends BaseDef>(
   query: CardCatalogQuery,
   opts?: {
@@ -220,6 +224,20 @@ export async function chooseCard<T extends BaseDef>(
   return await chooser.chooseCard<T>(query, opts);
 }
 
+export async function chooseFile<T extends FieldDef>(): Promise<
+  undefined | any
+> {
+  let here = globalThis as any;
+  if (!here._CARDSTACK_FILE_CHOOSER) {
+    throw new Error(
+      `no cardstack file chooser is available in this environment`,
+    );
+  }
+  let chooser: FileChooser = here._CARDSTACK_FILE_CHOOSER;
+
+  return await chooser.chooseFile<T>();
+}
+
 export interface CardSearch {
   getCards(
     getQuery: () => Query | undefined,