Modified Files Tracker component

example/src/commands.ts

@@ -28,5 +28,6 @@ export enum Commands {
     CLEAR_CONTEXT_ITEMS = '/clear-context-items',
     CLEAR_LOGS = '/clear-logs',
     SHOW_CUSTOM_FORM = '/show-custom-form',
-    VOTE = '/vote'
+    VOTE = '/vote',
+    MODIFIED_FILES_DEMO = '/modified-files-demo'
 }

example/src/config.ts

@@ -283,6 +283,11 @@ export const QuickActionCommands: QuickActionCommandGroup[] = [
                 icon: MynahIcons.FLASH,
                 description: 'Test streaming animation with different speeds. Use tab bar buttons to switch modes.',
             },
+            {
+                command: Commands.MODIFIED_FILES_DEMO,
+                icon: MynahIcons.FILE,
+                description: 'Demo the modified files tracker component above the chat interface.',
+            },
         ],
     },
 ];

example/src/main.ts

@@ -1259,8 +1259,17 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
       `);
         },
         onChatPrompt: (tabId: string, prompt: ChatPrompt) => {
-
+            // Clear modified files tracker only for commands that modify files
+            const fileModifyingCommands = [
+                Commands.MODIFIED_FILES_DEMO,
+                '/dev',
+                '/transform',
+                '/generate'
+            ];
 
+            if (prompt.command && fileModifyingCommands.includes(prompt.command)) {
+                mynahUI.clearModifiedFiles(tabId);
+            }
 
             Log(`New prompt on tab: <b>${tabId}</b><br/>
       prompt: <b>${prompt.prompt !== undefined && prompt.prompt !== '' ? prompt.prompt : '{command only}'}</b><br/>
@@ -1578,6 +1587,9 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
         onMessageDismiss: (tabId, messageId) => {
             Log(`Card dismissed: tabId: <b>${tabId}</b>, messageId: <b>${messageId}</b>`);
         },
+        onModifiedFileClick: (tabId, filePath) => {
+            Log(`Modified file clicked on tab <b>${tabId}</b>: <b>${filePath}</b>`);
+        },
     });
 
     setTimeout(() => {
@@ -1624,6 +1636,23 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
                 case Commands.VOTE:
                     mynahUI.addChatItem(tabId, exampleVoteChatItem);
                     mynahUI.addChatItem(tabId, defaultFollowUps);
+                    break;
+                case Commands.MODIFIED_FILES_DEMO:
+                    // Demo the modified files tracker
+                    mynahUI.addChatItem(tabId, {
+                        type: ChatItemType.ANSWER,
+                        messageId: generateUID(),
+                        body: 'Demonstrating the modified files tracker. Watch the component above the chat!',
+                    });
+
+                    // Demo will be handled through chatItem approach now
+                    mynahUI.addChatItem(tabId, {
+                        type: ChatItemType.ANSWER,
+                        messageId: generateUID(),
+                        body: 'Modified files tracker demo is now handled through chatItem.header.fileList approach.',
+                    });
+
+
                     break;
                 case Commands.CARD_WITH_MARKDOWN_LIST:
                     getGenerativeAIAnswer(tabId, sampleMarkdownList);

example/src/samples/sample-data.ts

@@ -681,6 +681,10 @@ export const defaultFollowUps: ChatItem = {
                 pillText: 'Some auto reply',
                 prompt: 'Some random auto reply here.',
             },
+            {
+                command: Commands.MODIFIED_FILES_DEMO,
+                pillText: 'Modified files demo',
+            },
         ],
     },
 };
@@ -2181,7 +2185,7 @@ export const mcpToolRunSampleCardInit:ChatItem = // Summary Card
                     filePaths: ['Running'],
                     details: {
                         'Running': {
-                            description: 'Work in progress!',
+                            description: 'Work in progress...',
                             icon: null,
                             labelIcon: 'progress',
                             labelIconForegroundStatus: 'info',

src/__test__/components/feedback-form/feedback-form-integration.spec.ts

@@ -358,7 +358,7 @@ describe('FeedbackForm Integration Tests', () => {
   describe('Error Handling', () => {
     it('should handle missing tab data gracefully', () => {
       // Override the mock for this specific test
-      mockTabsStore.getTabDataStore.mockReturnValueOnce(undefined as any);
+      (mockTabsStore.getTabDataStore as jest.Mock).mockReturnValueOnce(undefined as any);
 
       feedbackForm = new FeedbackForm();
 

src/__test__/components/feedback-form/feedback-form.spec.ts

@@ -347,7 +347,7 @@ describe('FeedbackForm Component', () => {
 
     it('should return empty array when tab data store is undefined', () => {
       // Override the mock for this specific test
-      mockTabsStore.getTabDataStore.mockReturnValueOnce(undefined as any);
+      (mockTabsStore.getTabDataStore as jest.Mock).mockReturnValueOnce(undefined as any);
 
       feedbackForm = new FeedbackForm();
 

src/components/__test__/chat-item/chat-item-card-content.spec.ts

@@ -19,28 +19,26 @@ describe('ChatItemCardContent Animation Speed', () => {
   beforeEach(() => {
     jest.clearAllMocks();
 
-    mockGetInstance.mockReturnValue({
-      // @ts-expect-error
+    (mockGetInstance as jest.Mock).mockReturnValue({
       config: {
         typewriterStackTime: 100,
         typewriterMaxWordTime: 20,
         disableTypewriterAnimation: false,
       }
-    });
+    } as any);
 
     document.body.innerHTML = '<div id="test-container"></div>';
   });
 
   describe('Animation Configuration', () => {
     it('should use fast animation settings', () => {
-      mockGetInstance.mockReturnValue({
-        // @ts-expect-error
+      (mockGetInstance as jest.Mock).mockReturnValue({
         config: {
           typewriterStackTime: 100,
           typewriterMaxWordTime: 20,
           disableTypewriterAnimation: false,
         }
-      });
+      } as any);
 
       const props: ChatItemCardContentProps = {
         body: 'Test content',
@@ -53,12 +51,11 @@ describe('ChatItemCardContent Animation Speed', () => {
     });
 
     it('should disable animation when configured', () => {
-      mockGetInstance.mockReturnValue({
-        // @ts-expect-error
+      (mockGetInstance as jest.Mock).mockReturnValue({
         config: {
           disableTypewriterAnimation: true,
         }
-      });
+      } as any);
 
       const props: ChatItemCardContentProps = {
         body: 'Test content',
@@ -89,10 +86,9 @@ describe('ChatItemCardContent Animation Speed', () => {
 
   describe('Default Values', () => {
     it('should use defaults when config is empty', () => {
-      mockGetInstance.mockReturnValue({
-        // @ts-expect-error
+      (mockGetInstance as jest.Mock).mockReturnValue({
         config: {}
-      });
+      } as any);
 
       const props: ChatItemCardContentProps = {
         body: 'Test content',