Populate ChooseFile modal via file-meta entries in index #3949

lukemelia · 2026-02-04T23:24:27Z

Summary

Replace HTTP directory listing requests with indexed file-meta queries for the ChooseFile modal
Instead of making separate HTTP requests for each directory level, query all files at once via the search API and build the tree client-side
Leverages SearchResource for Store integration, caching, reference counting, and live event subscription

Changes

File	Description
`packages/host/app/resources/file-tree-from-index.ts`	New resource that wraps SearchResource with FileDef type filter and builds tree structure
`packages/host/app/components/editor/indexed-file-tree.gts`	New component that renders file tree using the resource
`packages/host/app/components/operator-mode/choose-file-modal.gts`	Updated to use IndexedFileTree instead of FileTree

Test plan

Use the staging or production preview link
Open the AI Assistant.
Click the + button and choose Attach File
Verify files display in tree structure
Verify directory expand/collapse works
Verify file selection works
Verify switching realms refreshes the tree
Verify adding/removing files updates the tree (via event subscription)

Closes CS-10109

🤖 Generated with Claude Code

github-actions · 2026-02-04T23:32:07Z

Preview deployments

github-actions · 2026-02-04T23:47:40Z

Host Test Results

1 files ±0 1 suites ±0 1h 37m 37s ⏱️ - 3m 20s
1 806 tests ±0 1 793 ✅ +1 13 💤 ±0 0 ❌ ±0
1 821 runs ±0 1 808 ✅ +2 13 💤 ±0 0 ❌ - 1

Results for commit d642938. ± Comparison against base commit a6b00eb.

♻️ This comment has been updated with latest results.

Copilot

Pull request overview

This PR replaces HTTP directory listing requests with indexed file-meta queries for the ChooseFile modal. Instead of making separate HTTP requests for each directory level as users expand directories, the new implementation queries all files at once via the search API and builds the tree structure client-side. This approach leverages SearchResource for Store integration, caching, reference counting, and live event subscription, which should improve performance and provide real-time updates when files are added or removed.

Changes:

Introduces FileTreeFromIndexResource that queries all FileDef instances in a realm and builds a tree structure from them
Creates IndexedFileTree component that renders the file tree using the new resource
Updates choose-file-modal to use the new IndexedFileTree component with a component recreation pattern when realms switch

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
packages/host/app/resources/file-tree-from-index.ts	New resource that wraps SearchResource with FileDef type filter, queries all files at once, and builds hierarchical tree structure from flat file list
packages/host/app/components/editor/indexed-file-tree.gts	New component that renders file tree using FileTreeFromIndexResource, manages directory expansion state, and provides loading indicators
packages/host/app/components/operator-mode/choose-file-modal.gts	Updates to use IndexedFileTree instead of FileTree, with #each pattern to force component recreation when realm changes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-06T01:32:50Z

packages/host/app/components/editor/indexed-file-tree.gts

+    onFileSelected: (entryPath: LocalPath) => void;
+    onDirectorySelected: (entryPath: LocalPath) => void;
+    scrollPositionKey?: LocalPath;
+    relativePath: string;


The relativePath parameter is declared in the TreeLevelSignature but is never used in the TreeLevel component. It's passed down recursively but has no effect on the component's behavior. Consider removing it if it's not needed, or document why it's being tracked for future use.

Copilot · 2026-02-06T01:32:50Z

packages/host/app/components/editor/indexed-file-tree.gts

+
+class TreeLevel extends Component<TreeLevelSignature> {
+  <template>
+    {{#each @entries as |entry|}}


The #each loop should include a key parameter for better rendering performance and correctness. The old Directory component uses key='path' which should be added here as well. Without a key, Ember may not correctly track which items have changed when the list updates, potentially causing rendering issues or unnecessary re-renders.

Suggested change

{{#each @entries as |entry|}}

{{#each @entries key="path" as |entry|}}

Copilot · 2026-02-06T01:32:51Z

packages/host/app/resources/file-tree-from-index.ts

+    // We query with FileDef type filter, so instances are FileDef
+    let files = this.search.instances as FileDef[];
+    let tree = this.buildTreeFromFiles(files);
+    return this.sortEntries(tree);
+  }
+


The type assertion as FileDef[] assumes all instances are FileDef without runtime validation. If the search returns unexpected types (e.g., due to index inconsistencies or race conditions), this could cause issues downstream. Consider adding runtime validation or a filter to ensure only FileDef instances are processed.

Suggested change

// We query with FileDef type filter, so instances are FileDef

let files = this.search.instances as FileDef[];

let tree = this.buildTreeFromFiles(files);

return this.sortEntries(tree);

}

let instances = this.search.instances ?? [];

let files = instances.filter((instance): instance is FileDef =>

this.isFileDef(instance),

);

let tree = this.buildTreeFromFiles(files);

return this.sortEntries(tree);

}

private isFileDef(instance: CardDef | FileDef): instance is FileDef {

let anyInstance = instance as any;

return (

anyInstance?.type?.module === 'https://cardstack.com/base/file-api' &&

anyInstance?.type?.name === 'FileDef'

);

}

packages/host/app/resources/file-tree-from-index.ts

backspace · 2026-02-07T00:45:12Z

I noticed some differences, are they intentional?

it’s much slower, which I’m surprised by
the loading spinner is weirdly positioned
directories are clustered at the top now
the file with emoji in the name is missing

Replace HTTP directory listing requests with indexed file-meta queries for the ChooseFile modal. Instead of making separate HTTP requests for each directory level as users expand the tree, we now query all files at once via the search API and build the tree client-side. Changes: - Add FileTreeFromIndexResource that wraps SearchResource with FileDef type filter and builds a tree structure from flat file instances - Add IndexedFileTree component that renders the tree using the resource - Update ChooseFileModal to use IndexedFileTree instead of FileTree The new implementation leverages SearchResource for Store integration, caching, reference counting, and live event subscription. Closes CS-10109 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Use private class field (#realmURL) instead of tracked property to avoid "attempted to update but it had already been used" error during render. Private fields are not automatically tracked by Glimmer, which prevents the conflict when modify() updates the URL after entries getter has read it. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The comparison to skip re-creating the search was causing issues when switching realms - the search resource's realms function was evaluated with stale data. The SearchResource handles deduplication internally, so we can safely remove this optimization. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Use {{#each}} with single-element array to force component recreation when the realm URL changes. This ensures the FileTreeFromIndexResource is properly re-initialized with the new realm URL. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Show a centered LoadingIndicator spinner in the file tree mask overlay while the search query is still loading, so users see feedback instead of a blank white area in the ChooseFileModal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Switch from SearchResource (hydrated instances) to SearchDataResource (raw JSON:API resources) with asData: true and sparse fieldset fields: { 'file-meta': [] } for minimal payload - Skip loadLinks for asData queries in Realm.search() to avoid FilterRefersToNonexistentTypeError on stale type references - Fix loading spinner positioning with min-height: 100% on nav - Sort entries alphabetically (matching original file chooser behavior) - Decode percent-encoded URL path segments for proper display Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lukemelia · 2026-02-10T22:00:48Z

Issues reported by @backspace have been addressed except for the emoji issue, which I'll spin off into a separate PR

lukemelia force-pushed the cs-10109-populate-choosefile-modal-via-file-meta-entries-in-index branch 2 times, most recently from 061876a to 07c14a0 Compare February 5, 2026 22:41

lukemelia marked this pull request as ready for review February 6, 2026 01:25

lukemelia requested review from a team, backspace and Copilot February 6, 2026 01:25

Copilot started reviewing on behalf of lukemelia February 6, 2026 01:25 View session

Copilot AI reviewed Feb 6, 2026

View reviewed changes

lukemelia force-pushed the cs-10109-populate-choosefile-modal-via-file-meta-entries-in-index branch from 0458b9c to 6da65ad Compare February 10, 2026 18:32

lukemelia and others added 6 commits February 10, 2026 15:14

lukemelia force-pushed the cs-10109-populate-choosefile-modal-via-file-meta-entries-in-index branch from 6da65ad to d642938 Compare February 10, 2026 21:59

backspace approved these changes Feb 10, 2026

View reviewed changes

lukemelia merged commit 40fb32d into main Feb 10, 2026
101 of 102 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Populate ChooseFile modal via file-meta entries in index #3949

Populate ChooseFile modal via file-meta entries in index #3949

lukemelia commented Feb 4, 2026 •

edited by backspace

Loading

Uh oh!

github-actions bot commented Feb 4, 2026

Uh oh!

github-actions bot commented Feb 4, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 6, 2026

Uh oh!

Copilot AI Feb 6, 2026

Uh oh!

Copilot AI Feb 6, 2026

Uh oh!

Uh oh!

backspace commented Feb 7, 2026

Uh oh!

lukemelia commented Feb 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{{#each @entries as \|entry\|}}
	{{#each @entries key="path" as \|entry\|}}

-    // We query with FileDef type filter, so instances are FileDef
-    let files = this.search.instances as FileDef[];
-    let tree = this.buildTreeFromFiles(files);
-    return this.sortEntries(tree);
-  }
+    let instances = this.search.instances ?? [];
+    let files = instances.filter((instance): instance is FileDef =>
+      this.isFileDef(instance),
+    );
+    let tree = this.buildTreeFromFiles(files);
+    return this.sortEntries(tree);
+  }
+  private isFileDef(instance: CardDef | FileDef): instance is FileDef {
+    let anyInstance = instance as any;
+    return (
+      anyInstance?.type?.module === 'https://cardstack.com/base/file-api' &&
+      anyInstance?.type?.name === 'FileDef'
+    );
+  }

Populate ChooseFile modal via file-meta entries in index #3949

Populate ChooseFile modal via file-meta entries in index #3949

Conversation

lukemelia commented Feb 4, 2026 • edited by backspace Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Uh oh!

github-actions bot commented Feb 4, 2026

Preview deployments

Uh oh!

github-actions bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Host Test Results

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

backspace commented Feb 7, 2026

Uh oh!

lukemelia commented Feb 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lukemelia commented Feb 4, 2026 •

edited by backspace

Loading

github-actions bot commented Feb 4, 2026 •

edited

Loading