Modified Files Tracker component #444

sacrodge · 2025-10-08T23:07:36Z

Problem

Modified files are scattered across multiple chatItem cards and can seem lost to users if too many files are modified and has verbose explanation. Needed access to all files modified as part of the conversation in one place.

Solution

Created a new separate component which renders just modified files along with undo button per each file. Still working on styling the component a little better.

Currently handles file clicks, undo and undoall buttons
Files are just displayed per prompt (not conversation). So for each prompt the previous files are removed
Implemented comprehensive unit tests
Fixed the unexpected collapsing of component upon fileclick
Arranged buttons inline for better visuals

10.17.2025.mov

ToDos :

Currently controlling clearing of the component per prompt from chat-wrapper. Handle that from LS
Also, title of the component (x files modified) is handled by chat-wrapper as I could not find a property to use for these use cases in LS >> chatMessage.

Tests

[ + ] I have tested this change on VSCode
[ - ] I have tested this change on JetBrains
[ - ] I have added/updated the documentation (if applicable)

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

… etc. consistent with initial commit for LS

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

- Currently gets file details just like chatItemCard - Files are listed but other functionalities are lacking

- undo buttons are showing per file - Upon clicking the button it undoes the chnages correctly

- Added chat=wrapper support to handle title - Should ideally be controller but no title property in chatMessage

laileni-aws · 2025-10-09T00:07:14Z

example/src/main.ts

+                    });
+
+                    // Demo will be handled through chatItem approach now
+                    mynahUI.addChatItem(tabId, {


Just curious: Why we need two addChatItem here?

I will remove this and find a way to provide demo differently

laileni-aws · 2025-10-09T00:07:41Z

example/src/samples/sample-data.ts

                    details: {
                        'Running': {
-                            description: 'Work in progress!',
+                            description: 'Work in progress...',


not necessary!

laileni-aws · 2025-10-09T00:09:18Z

src/components/chat-item/chat-item-tree-file.ts

          this.hideTooltip();
          if (this.props.details?.clickable !== false) {
+            const fileMessageId = this.props.details?.data?.messageId ?? this.props.messageId;
+            console.log('[ChatItemTreeFile] File clicked - originalFilePath:', this.props.originalFilePath);


Why do we need multiple console logs here? Can we combine into one instead?

Will remove unnecessary logging

- Added session functionality for every new chat the modified files are getting cleared

achieves all the functionalities needed might need testing and use set for storing files needs more styling, refer previous versions

- removed previous unnecesary edits - removed example for now

- Switched buttons to header and kept undoall button at top level

… height. Temporarily updated the snapshots. Once the component is made invisible, will revert to correct snapshots

- Aligned the per file undo buttons correctly - Set undoall button to the right for view consistency

- Fixed on file click propogation, so the component doesn't collapse now unexpectedly - Removed unnecessary code changes from previous PR feedback

- Fixed failing unit tests due to new changes for preventing collapsing

laileni-aws · 2025-10-21T15:34:32Z

src/components/modified-files-tracker.ts

+    this.renderModifiedFiles(null);
+  }
+
+  public setVisible (visible: boolean): void {


Do we need this function?

Will remove it for now, as I am no longer marking the component invisible yet

laileni-aws · 2025-10-21T15:37:05Z

src/components/chat-item/chat-wrapper.ts

+    // Normal flow on initially opening ui requires the currentMessageId;
    this.removeEmptyCardsAndFollowups();
    const currentMessageId: string = (chatItem.messageId != null && chatItem.messageId !== '') ? chatItem.messageId : `TEMP_${generateUID()}`;
+    // Check if messageId contains "modified-files-" prefix


Can you add this to documentation or add some comments why we are checking for this prefix?

Added comments for now

laileni-aws · 2025-10-21T15:40:44Z

src/components/chat-item/chat-wrapper.ts

+      if (chatItem.header?.fileList !== null && chatItem.header?.fileList !== undefined) {
+        this.allRenderedModifiedFileChatItems[chatItem.messageId] = chatItem;
+        const size = Object.keys(this.allRenderedModifiedFileChatItems).length;
+        chatItem.title = size === 1 ? '1 file modified!' : `${size} files modified!`;


nit:

chatItem.title = `${fileCount} file${fileCount === 1 ? '' : 's'} modified!`;

laileni-aws · 2025-10-21T15:43:43Z

src/components/chat-item/chat-wrapper.ts


    if (chatItem.type === ChatItemType.PROMPT || chatItem.type === ChatItemType.SYSTEM_PROMPT) {
+      // Clear modified files tracker on new prompt
+      this.allRenderedModifiedFileChatItems = {};


not a blocker but this does not work if we introduce intermediate input handling from the user.

laileni-aws · 2025-10-21T15:45:22Z

src/components/modified-files-tracker.ts

+  render: ExtendedHTMLElement;
+  private readonly props: ModifiedFilesTrackerProps;
+  private readonly collapsibleContent: CollapsibleContent;
+  public titleText: string = 'No files modified!';


Was this a default value ? Can we reset this from LS?

Currently we do not have any property in chatMessage, that can be used for titleText

laileni-aws · 2025-10-21T15:46:06Z

src/components/modified-files-tracker.ts

+      children: [ this.collapsibleContent.render ]
+    });
+
+    console.log('[ModifiedFilesTracker] Render element created:', this.render);


Do we need this console.log?

laileni-aws · 2025-10-21T15:54:36Z

src/components/modified-files-tracker.ts

+
+  public clear (): void {
+    this.allFiles.clear();
+    this.titleText = 'No files modified!';


Can you add const and assign this !

laileni-aws · 2025-10-21T15:55:34Z

src/components/modified-files-tracker.ts

+    if (chatItem.messageId !== undefined && chatItem.messageId !== null && chatItem.messageId !== '') {
+      undoAllMessageId = this.getOriginalMessageId(chatItem.messageId);
+    } else {
+      return;


Add early return

src/components/modified-files-tracker.ts

sacrodge added 30 commits September 9, 2025 22:24

created new component to track modified files along with tests

84dc8f4

refactored mynah-ui code as it had some duplication of code

9cf60fe

fixed formatting issues

10e5b09

working version for demo. Still no functionalities added like onClick…

0f81966

… etc. consistent with initial commit for LS

working version for demo. Still no functionalities added like onClick…

ca53a64

… etc. consistent with initial commit for LS

feat: add onClick and undo functionalities

3fa96d1

feat: add onClick and undo functionalities

cdc71c2

feat: add onClick and undo functionalities

eb725c9

msg: working-version : Added onFileClick functionality to open the fi…

d2096a1

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

msg: working-version : Added onFileClick functionality to open the fi…

b752e8d

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

msg: working-version : Added onFileClick functionality to open the fi…

50890e4

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

msg: working-version : Added onFileClick functionality to open the fi…

10adc33

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

msg: working-version : Added onFileClick functionality to open the fi…

38c0200

…le in diff mode. Logging enabled, disable later. Undo buttons still not working

msg: refactoring code to use existing functionality

68cb763

msg: refactoring code to use existing functionality

5650932

msg: arrow aligns with titleText

3ad8e8d

msg: not working, imported file functionality from chat-item-card

0e8a803

msg: not working, imported file functionality from chat-item-card

0144697

msg: working-mynahUI, Lists files with undo buttons. refactored code

d2659ad

msg: working-mynahUI, Lists files with undo buttons. refactored code

fe41190

msg: working-mynahUI, Lists files with undo buttons. refactored code

63695b8

msg: working-mynahUI, Lists files with undo buttons. refactored code

1f1137f

msg: working-mynahUI, Lists files with undo buttons. refactored code

37a3337

msg: working-mynahUI, Lists files with undo buttons. refactored code

298d4f5

msg: working, arrow now alogns with titleText

e667f83

msg: working, with no edits to language-servers

516842e

- Currently gets file details just like chatItemCard - Files are listed but other functionalities are lacking

msg: working, with no edits to language-servers

8ca1a61

- Currently gets file details just like chatItemCard - Files are listed but other functionalities are lacking

msg: UI works with files displayed as pills. not-tested with LS.

ca1c746

msg: UI works with files displayed as pills. not-tested with LS.

a39316c

msg: not-working, styled pills for better looks

2cf6ce6

sacrodge added 2 commits October 7, 2025 21:50

msg: working-partially;

0c482da

- undo buttons are showing per file - Upon clicking the button it undoes the chnages correctly

msg: working-partially;

023480d

- Added chat=wrapper support to handle title - Should ideally be controller but no title property in chatMessage

sacrodge changed the base branch from main to feature/upgrade-modified-files-ux October 8, 2025 23:08

laileni-aws reviewed Oct 9, 2025

View reviewed changes

sacrodge added 3 commits October 13, 2025 15:33

msg: working-partially;

cd11065

- Added session functionality for every new chat the modified files are getting cleared

msg: working-completely;

cd411f2

achieves all the functionalities needed might need testing and use set for storing files needs more styling, refer previous versions

msg: working-completely;

dc3f6a2

- removed previous unnecesary edits - removed example for now

sacrodge marked this pull request as ready for review October 14, 2025 01:16

sacrodge requested a review from a team as a code owner October 14, 2025 01:16

msg: working-partially;

5535430

- Switched buttons to header and kept undoall button at top level

sacrodge force-pushed the feature-prod branch from 6abed0a to 5535430 Compare October 16, 2025 00:45

sacrodge added 5 commits October 15, 2025 17:56

msg: added comprehensive tests

5aa50cd

msg: E2E tests were failing because of the new component changing the…

ce1482c

… height. Temporarily updated the snapshots. Once the component is made invisible, will revert to correct snapshots

msg: working-completely;

5b8b76a

- Aligned the per file undo buttons correctly - Set undoall button to the right for view consistency

msg: working-completely;

62451f9

- Fixed on file click propogation, so the component doesn't collapse now unexpectedly - Removed unnecessary code changes from previous PR feedback

msg: working-completely:

25a27b6

- Fixed failing unit tests due to new changes for preventing collapsing

laileni-aws reviewed Oct 21, 2025

View reviewed changes

src/components/modified-files-tracker.ts Show resolved Hide resolved

sacrodge added 3 commits October 21, 2025 14:29

fixed following the PR comments

1e156fc

removed ! from the end of titletext, reflected the same in tests

b75c9fe

removed unnecessary logging in the component

7180ca0

Modified Files Tracker component #444

Are you sure you want to change the base?

Modified Files Tracker component #444

Uh oh!

Conversation

sacrodge commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

ToDos :

Tests

License

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sacrodge commented Oct 8, 2025 •

edited

Loading